Типы пропсов для каждого компонента

Nivo построена вокруг строго типизированных React-компонентов, где каждый график представляет собой отдельный модуль с собственным набором пропсов. В TypeScript-экосистеме библиотека предоставляет детализированные интерфейсы, которые позволяют контролировать структуру данных, внешний вид, поведение анимаций и взаимодействие с пользователем.

Базовый принцип организации типов в Nivo заключается в разделении на три уровня:

  • Тип данных (Datum) — описывает форму входных данных
  • Тип пропсов компонента (Component Props) — описывает конфигурацию графика
  • Вспомогательные типы (Scales, Axes, Legends, Themes) — описывают отдельные подсистемы визуализации

Каждый компонент, например Bar, Line, Pie, имеет собственный набор generic-типов, где ключевую роль играет параметризация данных.

Типизация данных (Datum types)

Каждый график требует строго определённого формата данных, который задаётся через generics.

Bar chart datum

Для столбчатых диаграмм используется структура, где каждая запись содержит категорию и числовые значения:

  • ключ категории (indexBy)
  • набор числовых полей (keys)

Типизация обычно выражается через:

  • BarDatum
  • расширенные пользовательские интерфейсы

Ключевая особенность — динамическое количество метрик, определяемое массивом keys.

Line chart datum

Линейные графики используют структуру серии:

  • id — идентификатор линии
  • data — массив точек { x, y }

Типизация:

  • Serie
  • LineSvgProps generic-параметры

Особенность: поддержка как числовой, так и категориальной оси X, что отражается в union-типах string | number | Date.

Pie chart datum

Круговые диаграммы используют плоскую структуру:

  • id
  • value
  • опциональные метаданные

Тип:

  • PieDatum

В отличие от Bar и Line, Pie требует минимальной структуры, но усиливает требования к числовой целостности данных.

Типы пропсов компонента ResponsiveBar

Компонент ResponsiveBar является одним из наиболее типизированных модулей, поскольку сочетает визуализацию, оси, анимации и взаимодействие.

Основной интерфейс:

  • ResponsiveBarProps<Datum>

Ключевые группы пропсов:

1. Данные и структура

  • data: Datum[]
  • keys: string[]
  • indexBy: keyof Datum

Типизация здесь критична: indexBy должен ссылаться на существующее поле объекта данных, иначе TypeScript выдаёт ошибку несоответствия.

2. Геометрия и компоновка

  • margin: { top, right, bottom, left }
  • padding: number
  • innerPadding: number

Типы строго числовые, но допускают partial-конфигурации через Partial<>.

3. Цветовая система

  • colors: string | string[] | Function
  • colorBy: 'id' | 'indexValue'

Типизация поддерживает функции вида (datum) => string, что позволяет реализовать динамическое раскрашивание.

4. Оси и шкалы

  • axisBottom, axisLeft, axisTop, axisRight

Каждая ось имеет тип:

  • AxisProps

Включает:

  • tickSize
  • tickPadding
  • tickRotation
  • format: string | Function

TypeScript позволяет переопределять форматирование через функцию, возвращающую string | number.

5. Анимации

  • animate: boolean
  • motionConfig: 'default' | 'gentle' | 'wobbly' | object

Типизация motion основана на конфигурации Framer Motion, где допускаются как строковые пресеты, так и объектные определения переходов.

Типы пропсов LineChart (ResponsiveLine)

Линейные графики имеют более сложную типизацию из-за многосерийной структуры.

Основной интерфейс:

  • ResponsiveLineProps<Serie>

Структура данных

  • data: Serie[]

Где Serie включает:

  • id: string | number
  • data: { x: X; y: Y }[]

Типы X и Y параметризуются отдельно, что позволяет строить графики на датах, строках или числах.

Настройки осей

Line chart использует дополнительные параметры:

  • xScale: ScaleSpec
  • yScale: ScaleSpec

Тип ScaleSpec может включать:

  • type: 'linear' | 'time' | 'point'
  • min, max

Типизация шкал тесно связана с d3-scale моделями.

Интерактивность

  • useMesh: boolean
  • enableSlices: 'x' | 'y' | false

Типизация событий:

  • onMouseMove
  • onClick
  • onLegendClick

Каждый обработчик получает строго типизированный datum:

  • SeriePoint
  • PointTooltip

Типы пропсов PieChart (ResponsivePie)

Pie chart использует компактную модель, но с богатой конфигурацией визуализации.

Основной интерфейс

  • ResponsivePieProps<PieDatum>

Данные

  • data: PieDatum[]

Где:

  • id: string | number
  • value: number
  • label?: string

TypeScript строго ограничивает value числом, поскольку вся геометрия строится на долях суммы.

Геометрия круга

  • innerRadius: number
  • outerRadius: number
  • padAngle: number

Типы float-значений в диапазоне 0–1 или радианных значений зависят от параметра.

Лейблы и оформление

  • arcLabelsSkipAngle: number
  • arcLabelsTextColor: string | Function

Типизация функций позволяет динамически определять цвет текста на основе контраста сегмента.

Типы ScatterPlot и HeatMap

ScatterPlot

  • data: { id: string; dat a: { x: number; y: number }[] }[]

Типы:

  • ScatterPoint
  • ScatterSeries

Особенность: строгая числовая система координат, без категориальных осей.

HeatMap

  • data: HeatMapDatum[][]

Типизация:

  • HeatMapDatum
  • HeatMapValue

Каждая ячейка содержит:

  • x
  • y
  • value: number

Допускается расширение через generic T extends HeatMapDatum.

Общие вспомогательные типы

Theme

Тип:

  • Theme

Включает:

  • background
  • textColor
  • fontSize
  • axis
  • grid

Все поля допускают глубокое частичное переопределение через Partial<Theme>.

Legends

Тип:

  • LegendProps

Содержит:

  • anchor
  • direction
  • translateX, translateY
  • itemsSpacing

Типизация ориентации строго ограничена union-типами:

  • 'horizontal' | 'vertical'

Tooltips

Тип:

  • TooltipComponent

Может быть:

  • ReactNode
  • Function (datum) => ReactNode

Это обеспечивает расширяемость без нарушения базовой типизации компонента.

Особенности дженерик-архитектуры Nivo

Типовая структура компонентов построена вокруг:

  • Responsive<ComponentName><Datum, ExtraProps>
  • строгой параметризации данных
  • переиспользования общих интерфейсов

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

Такой подход позволяет:

  • предотвращать ошибки несоответствия структуры данных
  • обеспечивать автодополнение в IDE
  • интегрировать кастомные доменные модели без потери типовой безопасности
Оглавление