Учебник Nivo

Введение в Nivo
- Что такое Nivo и зачем он нужен
- Сравнение с D3.js, Recharts, Victory и Chart.js
- Архитектура библиотеки: пакеты, рендереры, провайдеры
- Требования к окружению и совместимость
- Установка и первый запуск
Основы работы с Nivo
- Структура компонента Nivo
- Система пропсов: обязательные и опциональные
- Типы данных и форматы входных данных
- Принцип responsive-обёрток
- Система тем: ThemeProvider и кастомизация
- Цветовые схемы и палитры
- Система отступов: margin и padding
- Анимации и transitions: настройка и отключение
- Легенды: позиционирование, символы, форматирование
Линейные и площадные графики
- Компонент Line: базовая конфигурация
- Форматы данных для Line
- Оси X и Y: типы шкал, форматирование меток
- Интерполяция линий: linear, monotone, step и другие
- Точки на линии: размер, форма, цвет
- Заливка области под линией
- Несколько серий данных
- SliceTooltip и точечные подсказки
- Crosshair: настройка перекрестья
- Компонент Bump: ранговые графики
- Компонент Line с динамическими данными и стримингом
Столбчатые и гистограммы
- Компонент Bar: вертикальные и горизонтальные столбцы
- Форматы данных для Bar
- Группировка столбцов: grouped и stacked
- Цветовая привязка к ключам и значениям
- Метки на столбцах: позиционирование и форматирование
- Кастомный рендер столбца через barComponent
- Компонент BarDatum и типизация данных
- Интерактивность: onClick, onMouseEnter, onMouseLeave
- Компонент Marimekko
- Компонент Histogram: распределение частот
Круговые и кольцевые диаграммы
- Компонент Pie: основная конфигурация
- Форматы данных для Pie
- Внутренний радиус и кольцевые диаграммы (Donut)
- Дуги: отступы, скругление, сортировка
- Метки на дугах: radialLabel и arcLabel
- Связующие линии меток
- Активные и неактивные дуги: анимация выделения
- Кастомные подсказки для Pie
- Компонент Sunburst: иерархические кольцевые диаграммы
- Форматы иерархических данных для Sunburst
Иерархические и древовидные визуализации
- Компонент TreeMap: конфигурация и тайлинг
- Алгоритмы тайлинга: squarify, binary, dice, slice
- Глубина отображения и навигация по уровням
- Метки в ячейках TreeMap
- Компонент Tree: древовидные графы
- Ориентация дерева и расположение узлов
- Кастомизация узлов и рёбер
- Компонент Icicle и Flamegraph
- Форматы данных для иерархических компонентов
Тепловые карты и матричные визуализации
- Компонент HeatMap: базовая конфигурация
- Форматы данных для HeatMap
- Цветовые интерполяции и шкалы
- Аннотации ячеек
- Интерактивность и подсказки
- Компонент Waffle: мозаичные диаграммы
- Форматы данных для Waffle
- Настройка рядов, колонок и отступов ячеек
Scatter и пузырьковые диаграммы
- Компонент ScatterPlot: базовая конфигурация
- Форматы данных для ScatterPlot
- Размер и форма точек
- Кастомный рендер точки через nodeComponent
- Компонент Bubble (PackedCircles): упаковка кругов
- Иерархические данные для Bubble
- Интерактивность в ScatterPlot и Bubble
Параллельные координаты и потоковые диаграммы
- Компонент ParallelCoordinates: конфигурация осей
- Типы переменных: linear, point, log
- Привязка цвета к переменной
- Интерактивность и выделение линий
- Компонент Stream: стековые потоки
- Алгоритмы укладки: wiggle, expand, none
- Порядок слоёв и сортировка
Гео-визуализации
- Компонент GeoMap: карты мира и регионов
- Подключение GeoJSON данных
- Проекции: mercator, orthographic, equalEarth и другие
- Цветовая шкала по значениям (choropleth)
- Компонент ChoroplethMap
- Интерактивность: hover и click по регионам
- Кастомные подсказки для гео-компонентов
- Работа с пользовательскими GeoJSON файлами
Сетевые графы
- Компонент Network: граф узлов и рёбер
- Форматы данных: узлы и связи
- Физическая симуляция: силы и параметры
- Интерактивность и перетаскивание
- Производительность при большом числе узлов
Радарные и полярные диаграммы
- Компонент Radar: основная конфигурация
- Форматы данных для Radar
- Настройка сетки: радиальная и угловая
- Заливки и обводки областей
- Метки и подсказки
Календарные диаграммы
- Компонент Calendar: годовое представление
- Компонент TimeRange
- Форматы данных: дата-значение
- Настройка направления: horizontal и vertical
- Цветовые шкалы и пустые дни
- Легенда и форматирование дат
Оси, шкалы и сетки
- Система шкал Nivo: linear, log, symlog, time, point, band
- Настройка осей: axisTop, axisBottom, axisLeft, axisRight
- Тики: количество, значения, размер, цвет
- Форматирование значений на осях
- Сетка: gridX, gridY, кастомные значения
- Синхронизация осей между несколькими графиками
Аннотации
- Система аннотаций в Nivo
- Типы аннотаций: dot, rect, circle
- Привязка аннотаций к данным
- Текстовые метки и выноски
- Кастомные аннотации через renderAnnotation
Подсказки (Tooltips)
- Встроенная система подсказок
- Кастомный компонент подсказки
- Позиционирование и смещение
- Стилизация через тему
- Общие подсказки для нескольких серий
- Портальный рендер подсказок
SVG и Canvas рендереры
- Различия между SVG и Canvas реализациями
- Когда использовать Canvas вместо SVG
- Производительность: бенчмарки и ограничения
- Экспорт Canvas в изображение
- Особенности Canvas API в контексте Nivo
HTTP и серверный рендеринг
- Пакет @nivo/static и серверный рендеринг
- Генерация графиков в Node.js
- Рендеринг в изображение на сервере
- Next.js и SSR: особенности и конфигурация
- Гидратация на клиенте
Типизация и TypeScript
- Типы пропсов для каждого компонента
- Дженерики и типизация входных данных
- Типизация обработчиков событий
- Расширение типов при кастомизации
- Строгая типизация тем
Кастомизация и расширяемость
- Кастомные слои (layers): добавление и переопределение
- Порядок слоёв и z-index в SVG
- Рендер кастомных компонентов внутри графика
- Использование D3 внутри кастомных слоёв
- Кастомные цветовые функции
- Кастомные шкалы и форматтеры
Responsive-компоненты
- Принцип работы ResponsiveWrapper
- Использование Responsive-версий компонентов
- Адаптация графиков под мобильные устройства
- useSize хук и ручное управление размерами
- Проблемы SSR и решения
Производительность и оптимизация
- Мемоизация данных и пропсов
- isInteractive и отключение лишней интерактивности
- Виртуализация при больших объёмах данных
- Переход с SVG на Canvas для производительности
- Профилирование рендера с React DevTools
- Анимации и их влияние на производительность
- Дебаунсинг обновлений данных
Интеграция с экосистемой React
- Управление состоянием: Redux, Zustand, Recoil
- React Query и загрузка данных для графиков
- Использование с Suspense и ErrorBoundary
- Тестирование компонентов Nivo с Jest и Testing Library
- Storybook и документирование графиков
Доступность (Accessibility)
- Роли ARIA для SVG-графиков
- Навигация с клавиатуры
- Скринридеры и текстовые альтернативы
- Контрастность цветов и стандарт WCAG
Работа с данными
- Предобработка данных перед передачей в Nivo
- Нормализация и трансформация данных
- Работа с временными рядами
- Агрегация и группировка данных
- Обработка пропущенных и некорректных значений
- Динамические и обновляемые данные в реальном времени