Приходилось ли строить графики и диаграммы

Что проверяют

Есть ли у вас опыт визуализации и понимаете ли, что график это не картинка, а производительность, ресайз и доступность. Для фронтендера это ещё и вопрос про вес бандла.

Как отвечать

Скажите, что строили: дашборд с временными рядами, воронку, сравнение категорий. Дальше про выбор.

• Чем рисовали. SVG удобен интерактивностью и стилями, но на тысячах узлов страница проседает. canvas держит десятки тысяч точек и хуже с доступностью. Готовая библиотека закрывает типовые графики, низкоуровневый инструмент нужен, когда график нестандартный.
• Как держали производительность. Прореживание ряда перед отрисовкой, агрегирование по интервалу на сервере, отрисовка по кадру анимации вместо перерисовки на каждое событие, мемоизация подготовленных данных.
• Как жили в React. Инстанс графика создаётся один раз и обязательно уничтожается в функции очистки эффекта, иначе на каждом перерендере остаётся лишний. Тяжёлая библиотека подключается ленивым импортом, чтобы не ехать в основной чанк и не ломать серверный рендер.
• Ресайз и состояния. Наблюдатель за размером контейнера вместо события окна, отдельная отрисовка для пустых данных, ошибки и загрузки.

Про доступность скажите сами: подписи осей, единицы измерения, значение не только цветом, текстовая альтернатива или таблица рядом.

Где спотыкаются

Создают график в эффекте и не уничтожают при размонтировании. Признаки узнаваемые: подсказки всплывают дважды, память растёт при переходах между вкладками, старые данные мигают поверх новых.

Вторая ошибка: тянут визуализацию в общий бандл. Библиотека графиков часто весит больше, чем весь остальной экран, а нужна она одному разделу, который открывают редко.

Третья: льют в график весь массив как есть. Пять тысяч точек на ширине в тысячу пикселей это лишняя работа: агрегируйте до отрисовки, иначе интерфейс замирает на каждом переключении фильтра.