Кастомная Альтернатива Google таблиц и Excel

Когда я работал в крупной компании где я бы фронтендером была поставлена задача создать внутреннюю альтернативу Excel в web исполнении, чтобы пользователи перенесли всю работу в web-приложение.

Первым делом нужно было найти библиотеку js для табличного редактора. Выбор пал на Hansontable за многофункциональность, простоту подключения и за легкую кастомизацию. В общем, на работе задача была выполнена, приложение под узкий профиль пользователей было создано.

Но мой личный интерес был удовлетворен не полностью, и я решил создать более универсальное приложение до известных пределов - альтернативу Google таблиц/Excel, где будет самый важный функционал из Google таблиц и Excel: это формулы, условное форматирование, построение графиков и тд.

Определился со стеком: Vue3 + Typescript; в качестве табличного редактора тот же Hansontable.

Условное форматирование

Функционал условного форматирования был заимствован у Google таблиц с некоторым пересмотром: так как столбцы "строго типизированы", то среди правил форматирования можно выбрать лишь те правила, которые подходят под тип данных столбца. Под капотом Hansontable работает виртуальный скроллинг, поэтому отрисовка происходит только для строк которые отображены + по ~10 строк вверх и вниз, что позволяет избежать зависания.

Работа с формулами

В качестве работы с формулами взял js библиотеку HyperFormula, которая повторяет более 400 формул, которые есть в Excel и Google Таблицах. Чтобы приложение не начало зависать из-за вычислений для тысячей строк, я распределил вычисления на worker'ы, а основной поток моментально рассчитывает только для 50-60 строк отображенных в текущем viewport'e.

Графики

Для работы с графиками использовал библиотку Graph.js.

Функционал построения диаграмм также был заимствован у Google таблиц с некоторым пересмотром: диапазон данных по горизонтали выбирается добавлением столбцов в окно с лэйблом "использовать данные столбцов...", а по вертикали выделением строк в таблице.