Настройка направления: horizontal и vertical

В библиотеке Nivo направление отображения данных определяется через параметр компоновки, который влияет на ось категорий и распределение значений. Визуально это проявляется в том, как строятся столбцы, линии или области: по вертикали (стандартное представление) или по горизонтали (разворот координатной системы).

Основная идея заключается в том, что vertical ориентирует категории по оси X, а значения по оси Y, тогда как horizontal меняет их местами, превращая категории в вертикальную ось, а значения — в горизонтальную шкалу.

Базовая концепция направления

В Nivo направление задаётся через свойство layout (в большинстве категорий графиков) или через специфические параметры компонента.

Два основных режима:

  • vertical — данные «растут» вверх
  • horizontal — данные «растут» вправо

Разница заключается не только в визуальной ориентации, но и в восприятии данных:

  • вертикальная компоновка подходит для временных рядов и классических диаграмм
  • горизонтальная — для длинных категорий и сравнительных рейтингов

Vertical как стандартная ориентация

Во многих компонентах Nivo вертикальная ориентация используется по умолчанию. В этом режиме:

  • ось X отображает категории
  • ось Y отображает числовые значения
  • столбцы располагаются вертикально

Пример конфигурации для столбчатой диаграммы:

import { ResponsiveBar } from '@nivo/bar'

const data = [
  { country: 'A', value: 40 },
  { country: 'B', value: 80 },
  { country: 'C', value: 60 }
]

const MyBar = () => (
  <ResponsiveBar
    data={data}
    keys={['value']}
    indexBy="country"
    layout="vertical"
    margin={{ top: 50, right: 50, bottom: 50, left: 60 }}
  />
)

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

Horizontal ориентация и разворот координат

При установке layout="horizontal" происходит инверсия осей:

  • категории переходят на ось Y
  • значения откладываются по оси X
  • столбцы становятся горизонтальными

Пример конфигурации:

import { ResponsiveBar } from '@nivo/bar'

const data = [
  { country: 'A', value: 40 },
  { country: 'B', value: 80 },
  { country: 'C', value: 60 }
]

const MyHorizontalBar = () => (
  <ResponsiveBar
    data={data}
    keys={['value']}
    indexBy="country"
    layout="horizontal"
    margin={{ top: 50, right: 50, bottom: 50, left: 80 }}
  />
)

Горизонтальное расположение часто требует увеличенного левого отступа из-за длинных подписей категорий.

Сравнение вертикальной и горизонтальной компоновки

Различия между режимами проявляются в нескольких аспектах:

1. Читаемость категорий

  • vertical: удобен при коротких названиях
  • horizontal: лучше подходит для длинных строк

2. Количество категорий

  • vertical: ограничен по ширине при большом количестве элементов
  • horizontal: масштабируется по высоте

3. Визуальное восприятие величин

  • vertical: привычная «гистограмма»
  • horizontal: удобнее для рейтинговых списков

Ориентация в компоненте Bar

В @nivo/bar параметр layout является ключевым механизмом управления направлением.

Дополнительно на ориентацию влияют:

  • indexBy — определяет категориальную ось
  • keys — определяет значения
  • axisBottom, axisLeft — привязка осей
  • enableLabel — размещение подписей

Смена layout автоматически перестраивает:

  • оси
  • подписи
  • направление шкал
  • расположение tooltip

Ориентация в Line графиках

В линейных графиках Nivo (@nivo/line) концепция horizontal/vertical не задаётся напрямую через layout, но логика ориентации сохраняется через оси:

  • X-axis всегда категориальная или временная
  • Y-axis всегда числовая

Пример:

import { ResponsiveLine } from '@nivo/line'

const data = [
  {
    id: 'series 1',
    data: [
      { x: 1, y: 10 },
      { x: 2, y: 20 },
      { x: 3, y: 15 }
    ]
  }
]

const MyLine = () => (
  <ResponsiveLine
    data={data}
    margin={{ top: 50, right: 50, bottom: 50, left: 60 }}
    xScale={{ type: 'point' }}
    yScale={{ type: 'linear' }}
  />
)

Здесь визуальная ориентация определяется системой координат, а не явным параметром layout.

Ориентация в Heatmap и других компонентах

В heatmap и сеточных графиках направление определяется структурой данных:

  • строки интерпретируются как вертикальные категории
  • столбцы как горизонтальные

Хотя явного horizontal/vertical нет, визуальная логика аналогична:

  • перестановка ключей меняет восприятие направления
  • изменение indexBy и keys фактически разворачивает матрицу

Влияние ориентации на подписи и оси

При смене направления автоматически изменяются:

  • позиция axisBottom и axisLeft
  • угол наклона подписей
  • выравнивание текста
  • отступы (margin)

Особенно важно учитывать:

  • horizontal требует большего пространства слева
  • vertical требует больше пространства снизу при длинных категориях

Практическая интерпретация layout

Внутренне Nivo реализует ориентацию как трансформацию координат:

  • vertical: (x = категория, y = значение)
  • horizontal: (x = значение, y = категория)

Это влияет на:

  • расчёт шкал d3-scale
  • позиционирование bar segments
  • работу с tooltips
  • распределение padding между элементами

Особенности взаимодействия с responsive контейнерами

Компоненты ResponsiveBar, ResponsiveLine и другие используют размеры контейнера для пересчёта:

  • при horizontal увеличивается вертикальная нагрузка на layout
  • при vertical увеличивается горизонтальная плотность

Это влияет на:

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

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

Визуальные паттерны:

  • vertical: временные ряды, распределения, метрики по времени
  • horizontal: рейтинги, сравнение сущностей, списки с длинными названиями

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

Поведение tooltip при смене направления

Tooltip в Nivo адаптируется автоматически:

  • в vertical он привязан к верхней части столбца
  • в horizontal он смещается к правой границе сегмента

Это позволяет сохранять логическую связь между курсором и значением независимо от ориентации графика.

Оглавление