Легенды: позиционирование, символы, форматирование

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

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

Позиционирование легенды: anchor и координатная система

Базовый механизм размещения определяется свойством anchor, задающим точку привязки относительно области графика:

  • top
  • top-right
  • right
  • bottom-right
  • bottom
  • bottom-left
  • left
  • top-left

Каждое значение фиксирует легенду в одной из сторон контейнера. Однако фактическое положение почти всегда уточняется дополнительными параметрами смещения:

  • translateX
  • translateY

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

Пример базовой конфигурации:

legends: [
  {
    anchor: 'bottom-right',
    direction: 'column',
    translateX: 20,
    translateY: -10,
    itemWidth: 100,
    itemHeight: 18
  }
]

Механизм позиционирования в Nivo работает в координатах SVG-контейнера, что делает поведение предсказуемым при масштабировании графика, но требует учета размеров самого контейнера при сложных макетах.

Направление и структура размещения элементов

Свойство direction управляет логикой расположения элементов внутри легенды:

  • column — вертикальная компоновка
  • row — горизонтальная компоновка

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

Дополнительные параметры:

  • itemsSpacing — расстояние между элементами
  • itemDirection — направление внутренней структуры элемента (left-to-right, right-to-left)
legends: [
  {
    anchor: 'right',
    direction: 'column',
    itemDirection: 'left-to-right',
    itemsSpacing: 12
  }
]

Размеры элементов и влияние на плотность легенды

Компоновка легенды определяется фиксированными размерами:

  • itemWidth — ширина элемента
  • itemHeight — высота элемента

Эти параметры задают жесткую сетку, внутри которой размещаются символ и текст. В отличие от гибких layout-систем, Nivo использует предсказуемую модель, где каждый элемент занимает одинаковое пространство.

Это особенно важно при работе с большим количеством категорий: при недостаточной ширине контейнера легенда начинает визуально уплотняться, что может требовать перерасчета itemWidth или переноса легенды в другую позицию.

Символы легенды: форма и визуальная семантика

Символ (symbol) является ключевым визуальным маркером, связывающим легенду с данными графика. Управление символами осуществляется через несколько параметров:

  • symbolSize — размер маркера
  • symbolShape — форма маркера

Поддерживаемые формы зависят от типа графика, но наиболее распространены:

  • circle
  • square
  • triangle
  • diamond
  • line
legends: [
  {
    anchor: 'bottom',
    symbolSize: 12,
    symbolShape: 'circle'
  }
]

Символы в Nivo не являются декоративными элементами — они отражают тип визуализации данных. Например, в линейных графиках часто используется line, а в категориальных диаграммах — circle или square.

Форматирование текста легенды

Текстовая часть легенды формируется на основе данных графика, но может быть модифицирована через форматтеры. Основной механизм — свойство format или formatter (в зависимости от компонента).

Форматирование позволяет:

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

Пример:

legends: [
  {
    anchor: 'bottom',
    formatter: (value) => `${value} %`
  }
]

В более сложных сценариях используется функция, получающая доступ к полному объекту данных элемента, что позволяет строить условное форматирование:

legends: [
  {
    anchor: 'right',
    format: (value, entry) =>
      entry.hidden ? `${value} (скрыто)` : value
  }
]

Визуальные эффекты и интерактивность

Каждый элемент легенды может иметь поведенческие эффекты, определяемые через effects. Они управляют состояниями hover и active:

  • изменение прозрачности
  • изменение цвета
  • изменение размера символа
legends: [
  {
    anchor: 'bottom',
    effects: [
      {
        on: 'hover',
        style: {
          itemOpacity: 1
        }
      },
      {
        on: 'mouseout',
        style: {
          itemOpacity: 0.7
        }
      }
    ]
  }
]

Эта модель построена на декларативном описании состояний, что исключает необходимость ручного управления DOM-манипуляциями.

Сложные схемы позиционирования в многослойных графиках

При использовании нескольких легенд одновременно каждая из них описывается отдельным объектом в массиве. Это позволяет создавать независимые блоки для разных наборов данных.

legends: [
  {
    anchor: 'bottom',
    dataFrom: 'keys',
    direction: 'row'
  },
  {
    anchor: 'right',
    dataFrom: 'indexes',
    direction: 'column'
  }
]

Каждая легенда может ссылаться на разные источники данных:

  • keys — ключи серий
  • indexes — индексы слоев
  • datum — произвольные поля данных

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

Согласование легенд с масштабируемой компоновкой

В SVG-рендеринге Nivo легенды не участвуют в потоковой верстке. Это означает, что они не влияют на размер графика и не перераспределяют пространство. Вся логика позиционирования основана на фиксированных координатах относительно контейнера.

При изменении размеров контейнера:

  • anchor сохраняет относительное положение
  • translateX/Y остаются фиксированными
  • элементы не пересчитывают размеры автоматически

Это делает легенды стабильными в responsive-сценариях, но требует ручной настройки при сложных адаптивных интерфейсах.

Влияние theme на стилизацию легенд

Стилизация текста и символов может наследоваться из глобальной темы:

  • fontSize
  • fontFamily
  • textColor

Пример интеграции с темой:

theme: {
  legends: {
    text: {
      fontSize: 12,
      fill: '#333'
    }
  }
}

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

Поведение при переполнении и ограничениях пространства

При недостатке места легенда не выполняет автоматического переноса. Вместо этого поведение определяется:

  • уменьшением itemWidth
  • сменой direction
  • изменением anchor
  • ручной переработкой компоновки

Вертикальные легенды (column) обычно устойчивее к ограниченному пространству, тогда как горизонтальные (row) требуют более широкой области отображения.

Связь легенды с данными и идентификаторами

Каждый элемент легенды связан с идентификатором данных графика. В зависимости от типа графика это могут быть:

  • series id (линейные графики)
  • category key (бар-чарты)
  • slice id (pie/donut charts)

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

Оглавление