Библиотека Nivo построена вокруг композиционного подхода, в котором каждый график представляет собой набор независимых, но согласованных слоёв. Архитектура ориентирована на декларативное описание данных и визуальных правил, где итоговый рендер формируется из цепочки преобразований: данные → масштабирование → геометрия → оформление → интерактивность.
Каждый компонент Nivo представляет собой React-компонент с чётко определённым набором входных данных и внутренней структурой обработки. Несмотря на разнообразие типов графиков (bar, line, pie, radar, heatmap), внутренняя логика компонентов подчиняется общей схеме.
Базовые элементы архитектуры:
Каждый слой может быть переопределён или расширен, что делает архитектуру гибкой и модульной.
В основе Nivo лежит концепция layered rendering. Любой график можно представить как стек слоёв, которые рендерятся последовательно:
Каждый слой — это либо встроенная функция, либо пользовательский React-компонент. Такая модель позволяет изменять визуализацию без переписывания логики данных.
Пример концепции слоёв:
gridaxesbars / lines / slicesmarkerslegendsСлои могут быть отключены или переупорядочены, что влияет на итоговую визуальную композицию.
Данные в Nivo не используются напрямую. Перед рендером они проходят несколько стадий трансформации.
Входные данные приводятся к единому формату, где каждая точка или группа данных получает:
Например, для линейного графика данные преобразуются в массив точек с координатами X/Y, где X зависит от категории или времени, а Y — от числового значения.
Для столбчатых и составных графиков данные группируются:
Это формирует структуру stacked/grouped, которая влияет на выбор геометрии.
Масштабы являются центральным элементом архитектуры. Они преобразуют абстрактные значения в экранные координаты.
Основные типы масштабов:
Каждый масштаб задаёт:
Масштабы формируют основу для построения осей и геометрии.
Геометрия определяет, как данные превращаются в визуальные элементы.
Столбец формируется как прямоугольник:
В stacked режиме высота каждого сегмента зависит от суммы предыдущих значений.
Линейный график строится как последовательность точек:
Круговая диаграмма использует дуги:
Layers в Nivo — это ключевой механизм расширения.
Каждый слой представляет собой функцию:
Типовая последовательность слоёв:
Особенность системы заключается в том, что пользователь может:
Таким образом достигается полная контрольная точка над визуальной композицией.
Оси формируются на основе масштабов.
Каждая ось включает:
Оси синхронизированы с геометрией через shared scale context.
Типы осей:
Подписи осей могут автоматически поворачиваться, обрезаться или переноситься в зависимости от доступного пространства.
Интерактивность строится поверх визуальных элементов.
Основные механизмы:
Tooltip не является отдельным DOM-элементом графика — он подключается как overlay-компонент, который получает данные активного элемента.
Каждый элемент графика содержит metadata:
Это позволяет строить универсальную систему взаимодействий независимо от типа графика.
Theme в Nivo представляет собой централизованный объект стилей.
Он управляет:
Темизация распространяется через context и применяется ко всем слоям.
Структура темы включает:
Темы могут быть объединены (extend), что позволяет строить кастомные дизайн-системы поверх базовой модели.
Nivo поддерживает два режима рендеринга:
Используется для:
Преимущества:
Используется для:
В Canvas режиме рендеринг выполняется через imperative drawing API, а интерактивность реализуется через вычисление hit regions.
Каждый график Nivo обычно оборачивается в responsive wrapper.
Он выполняет:
Механизм основан на ResizeObserver, что позволяет графику реагировать на любые изменения layout без ручного управления размерами.
Анимации реализованы через transition engine.
Каждое изменение данных приводит к:
Поддерживаются:
Анимация привязана к конкретным визуальным элементам, а не к целому графику.
Легенды представляют собой отдельный слой UI, который получает данные из:
Каждая легенда может:
Расположение легенд задаётся независимо от основной области графика.
Внутри компонента используется shared context, который содержит:
Этот контекст доступен всем слоям и обеспечивает согласованность между визуальными элементами без необходимости prop drilling.
Ключевая особенность архитектуры заключается в том, что каждый слой:
Это позволяет повторно использовать слои между различными типами визуализаций и строить новые графики на основе существующих компонентов без изменения ядра библиотеки.