Nuxt UI 4.12: что серверный SVG меняет для графиков

Chart в Nuxt UI 4.12 может отдать график как серверный SVG, но видимый рисунок, готовые данные и клиентская интерактивность — разные состояния отчёта. Для приёмки решите, что человек должен понять ещё до подключения обработчиков в браузере и как он получит точные значения. Сам SVG не подтверждает правильность расчёта или полноту доступа.

Что объявлено в компоненте Chart

Выпуск Nuxt UI 4.12.0 представляет Chart на TanStack Charts с серверной отрисовкой line, area, bar и donut в SVG. Для использования требуется optional peer dependency @tanstack/charts. Цвета связаны с темой; из этого не следует, что любая страница уже получила готовый отчёт без настройки данных.

Руководство TanStack по SSR и hydration требует согласованного определения графика между сервером и браузером. Получение и преобразование данных выполняется до построения определения. Примеры адаптера другого фреймворка не нужно копировать как синтаксис Nuxt UI.

Сначала состояние отчёта, потом выбор рисунка

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

Таблица — наш план интерфейса, не обещание встроенных состояний компонента. Она помогает не подменять «нет ответа» значением ноль. Для читателя это разные сведения: пустая выборка тоже не всегда означает нулевой результат бизнеса.

Точные значения не стоит прятать за наведением

Мы советуем рядом с графиком дать доступное табличное представление или другой согласованный способ получить значения. Это рекомендация по интерфейсу, а не автоматически выполняемая функция Nuxt UI. Она полезна, когда нужен точный показатель, а не только форма распределения.

В учебном отчёте названия направлений могут быть длинными, а экран — узким. Проверьте подписи и единицы измерения на характерном содержании. Не сокращайте название так, чтобы разные направления стали неразличимы, и не рассчитывайте, что подсказка при наведении решит задачу любого пользователя.

Hydration не должна менять предмет сравнения

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

Смена цветовой темы также должна сохранять различимость серий и подписей. Но один корректный тёмный скриншот не подтверждает доступность всей аналитики. Проверьте значение цвета вместе с текстовыми обозначениями и способом получить точные числа.

Приёмка по этапам

1. Определите период, метрику и разрешённый набор данных.
2. Подготовьте состояния готовности, пустой выборки и ошибки.
3. Проверьте серверный результат до клиентских взаимодействий.
4. Сопоставьте данные и смысл после hydration.
5. Проверьте нужные действия, подписи и тему на характерном содержании.
6. Дайте согласованный способ получить точные значения без угадывания по рисунку.

В разработке веб-приложения такой порядок отделяет интерфейс от источника показателя. Для автоматизации отчётов фиксируйте определение данных, а доработку интерфейса принимайте на разных состояниях. Серверный SVG может улучшить первый показ, но сам по себе не обещает рост SEO или работу всех действий без JavaScript.