스크립트
00:00:00TanStack снова за свое, на этот раз решая проблему графиков в JavaScript с помощью TanStack Charts.
00:00:04Библиотека обещает меньший размер бандла, чем такие решения, как ReCharts, в ней есть поддержка SVG и
00:00:08вывода через canvas, анимации, подсказки, взаимодействия, и, как у большинства библиотек TanStack, у нее
00:00:13фреймворк-независимое ядро, строгая типизация и отличный пользовательский опыт для разработчиков. И несмотря на новизну,
00:00:18на ней уже можно создавать множество типов графиков: от обычного линейного
00:00:22или столбчатого до более сложных, таких как диаграмма Санкей, древовидная карта, тепловые карты, радарные диаграммы,
00:00:27кольцевые диаграммы, датчики и даже действительно классные карты мира. Вероятно, она уже способна построить все, что вам нужно.
00:00:32Теперь первое, о чем я хочу рассказать, это то, как именно TanStack Charts подходит к созданию графиков,
00:00:41потому что подход похож на библиотеку ggplot2 в R: здесь используется грамматика графики. Такой
00:00:47подход не рассматривает график как фиксированный тип, вместо этого они фактически представляют собой композицию маркеров,
00:00:51скал и сопоставлений, поэтому вместо запроса столбчатой диаграммы вы указываете что-то вроде: поместите сюда столбцы,
00:00:56свяжите эту переменную с оси x, ту с осью y и примените эти шкалы, и на основе этого описания
00:01:01формируется график. Это очень тонкое различие, но именно оно делает эту библиотеку чрезвычайно
00:01:05гибкой. То есть, кто-то написал в твиттере с вопросом, можно ли сделать такой график, и ответ был положительным.
00:01:11Это не встроенный тип графика, библиотека просто достаточно гибкая, чтобы его создать.
00:01:14Говоря о том, как это работает, если мы взглянем на демо столбчатой диаграммы, отображающей частоту
00:01:18английских букв, самый важный код для нее составляет всего 20 строк. Все начинается с определения графика
00:01:23с помощью функции define chart, и внутри мы начинаем с маркеров. Маркеры можно рассматривать
00:01:28как элементы, которые реально отрисовываются: линии, точки или столбцы. Я создал демонстрационный
00:01:32сайт, где попытался задействовать все доступные в TanStack charts маркеры, и думаю, их там около 55,
00:01:37так что это будет довольно хороший пример графиков, которые можно строить с помощью TanStack charts,
00:01:40и их здесь действительно огромное количество. Вам придется потерпеть,
00:01:43но вы видите привычные столбчатые диаграммы, горизонтальные или вертикальные,
00:01:47то же самое касается линий и областей. Затем у нас есть точечные диаграммы,
00:01:51правило, представляющее собой пунктирную линию поперек графика (может быть вертикальной),
00:01:54можно создать тиковый график (опять же по x или y), прямоугольники, ячейки, полосы,
00:01:59стрелки, векторы для создания ветрового поля, связи, шестиугольники,
00:02:04текст (маркеры могут быть текстом для вывода в любой точке графика). Есть рамки,
00:02:08линии, разницы, графики линейной регрессии, боксы, скрипичные диаграммы, вафельные диаграммы.
00:02:13Здесь уже можно строить карты изолиний. Кстати,
00:02:17эта библиотека вышла неделю назад, это безумие — в ней столько функций, и список продолжается.
00:02:22Мы можем создать вот этот график, черт знает что такое, я даже не знаю, для чего он нужен.
00:02:25Есть древовидная карта, лучевая диаграмма, диаграммы Санкей, направляющие фокуса перекрестия,
00:02:29радиальные диаграммы, такие как круговые, пончиковые или радарные, и наконец,
00:02:33внизу есть геофигуры, если вам нужны карты мира. Как я уже сказал, их так много,
00:02:38что их можно комбинировать для создания практически любого необходимого графика. Возвращаясь к нашему демо столбчатой диаграммы,
00:02:42единственный маркер, который мне нужен — это bar y, внутрь которого передаются данные,
00:02:47этот массив объектов. Затем вы определяете ключи для x и y,
00:02:51и это здорово, поскольку избавляет от необходимости подгонять данные под конкретную структуру,
00:02:56вы можете просто задать их здесь. Это также безопасно в плане типов, то есть при опечатке в ключе
00:03:00об этом станет известно немедленно, и это та самая типизация, за которую мы полюбили TanStack.
00:03:04После определения нужных маркеров идут оси x и y. Для оси x
00:03:08все очень просто. Я указал space band для категорий, чтобы наши буквы распределялись
00:03:12равномерно, а также задал отступы между ними. Для оси y я использую scale linear
00:03:17для чисел, а также установил nice в значение true, что означает округление
00:03:21оси до разумного значения вместо остановки на самом высоком имеющемся числе. Если установить false,
00:03:26можно увидеть, что верх оси заканчивается прямо на уровне вершины самого высокого столбца. Здесь
00:03:30я также добавил метку оси и формат, чтобы отображать числа в процентах
00:03:34вместо десятичных дробей. Все это описание является фреймворк-независимой частью, но для рендеринга
00:03:39в React нам нужно лишь импортировать компонент графика, передать ему определение,
00:03:43задать высоту и метку, и это все, что требуется для создания графика. Но я хочу подчеркнуть:
00:03:47мы не использовали здесь готовый компонент столбчатой диаграммы. Мы определили в коде места рендеринга маркеров,
00:03:51и так получилось, что конечным результатом стала столбчатая диаграмма. Разница очень тонка,
00:03:55но в этом и заключается суть грамматики графики. В качестве примера гибкости:
00:04:00допустим, мне нужна линия среднего значения на столбчатой диаграмме — достаточно зайти в массив маркеров и добавить
00:04:04новый маркер rule Y. Или другой быстрый пример: нужен линейный график с точками и областью
00:04:09внизу — я могу просто описать их все как маркеры, и взгляните: теперь у меня есть график
00:04:14числа подписчиков, и это идеальный момент попросить вас подписаться и следить за новостями об AI и
00:04:18разработке. Если вы хотите увидеть еще больше примеров использования этих маркеров для построения
00:04:22всех тех разнообразных графиков, показанных ранее, загляните в документацию — там масса
00:04:26примеров, и все невероятно подробно. На самом деле, я взял еще несколько примеров из документации,
00:04:30чтобы показать возможности tan stack charts, так как у меня нет времени разбирать все функции
00:04:34в деталях (на это ушло бы часов 20). Но одна из крутейших вещью — этот график-глобус,
00:04:38он мне безумно нравится, потрясающе, что это можно сделать в библиотеке недельной давности.
00:04:42Также есть крутые взаимодействия: например, такой кистевой выбор, позволяющий перетаскивать область
00:04:46по графику и менять диапазон с обеих сторон. Доступно увеличение графика, позволяющее приблизить
00:04:51нужный участок линейного графика. Есть выделение по ключу и с клавиатуры: если навести курсор
00:04:56на элемент и нажать пробел, все работает отлично, и снизу отображается значение выбранного элемента.
00:05:00Кроме того, есть перекрестие: при перемещении оно выводит актуальную дату,
00:05:04на которую указывает курсор на оси внизу. Также имеются подсказки с множеством настроек,
00:05:09поэтому сейчас подсказка настроена на nearest X, когда учитывается только горизонтальное расстояние
00:05:14до точки. Можно выбрать стратегию group X, и тогда при наведении на любую область
00:05:18будут показаны все значения. Подсказку можно закреплять: при наведении на столбчатую диаграмму
00:05:22она меняется, а при клике — закрепляется, отображая дополнительные детали.
00:05:26Здесь подсказки нет, но значения считываются напрямую внизу,
00:05:31позволяя извлекать эту информацию. В этом примере рендерится пользовательская подсказка,
00:05:35и при клике для закрепления появляется специальная кнопка закрытия, и все это сделано на React.
00:05:39Библиотека также поддерживает анимацию: если изменить значения этих столбцов,
00:05:43можно увидеть плавная анимация перехода между измененными значениями.
00:05:48Мы можем нажать повтор и увидеть каскадное появление столбчатой диаграммы,
00:05:51а если удалить несколько столбцов внизу, анимация плавно отразит
00:05:55их добавление или удаление. Доступна даже потоковая анимация: при поступлении новых данных
00:06:00линейный график просто сдвигается, а не перерисовывается целиком. Перед тем как перейти
00:06:03к стилизации графиков, последняя функция, которую я хотел показать — это экспорта. У меня есть
00:06:07кнопки загрузки в формате SVG и PNG, и при клике я получаю вот такой результат.
00:06:12Теперь поговорим о темизации и стилизации графиков: если убрать стили
00:06:16с этого графика, мы увидим базовый вид по умолчанию, поскольку из коробки стилей нет,
00:06:21используется цвет текста текущего элемента, а фон прозрачен. В tan stack charts
00:06:25предусмотрено три уровня стилизации. Первый — CSS-переменные, задающие категориальные цвета
00:06:30через шесть пользовательских свойств с возможностью переопределения на любом контейнере.
00:06:35Изменяя эти значения, можно видеть обновление цветов графика. Второй уровень —
00:06:39блок темы в самом определении графика. Он предназначен для элементов оформления графика,
00:06:43а не для данных: текста, линий сетки, фона и т. д.
00:06:47Третий уровень относится к самим маркерам, где настраиваются заливка, обводка,
00:06:51прозрачность, форма концов линий, штрихи, радиус скругления углов, шрифты и многое другое. Значения могут быть статическими или
00:06:57зависеть от данных (например, покраска столбца при превышении цели). Можно даже строить
00:07:01градиенты на основе данных. Библиотека невероятно гибкая и легкая.
00:07:06Полный набор функций включает перекрестия, выделение кистью, зум, выбор элементов,
00:07:10и размер бандла составляет от 36 до 43 килобайт. Сравнивая с chart.js или
00:07:16recharts: chart.js весит 45–58 КБ, а recharts — 153–168 КБ. Так что tanstack
00:07:24charts значительно меньше. Еще один классный аспект — ее философия. Инструмент создан с расчетом на две вещи:
00:07:28во-первых, пользователи должны получать аккуратные графики по короткой декларации,
00:07:32а во-вторых, ИИ должен уметь создавать, проверять и модифицировать графики без изучения специфичных моделей.
00:07:38API спроектирован так, чтобы агент мог писать графики без чтения документации,
00:07:42и честно говоря, я использовал Claude для создания большинства демо, и хотя я перепроверял код
00:07:47(что сейчас редкость), он почти полностью совпал с ожиданиями. Мне пришлось внести минимум изменений,
00:07:52что удивительно для совершенно новой библиотеки. Таков tanstack charts. Это моя
00:07:57новая любимая библиотека графиков, которая стремительно развивается. Пишите свое мнение в комментариях
00:08:01внизу. Не забудьте подписаться. Как всегда, увидимся в следующем видео.