Метки и подсказки

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

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

Базовое отображение меток

В компоненте столбчатой диаграммы ResponsiveBar метки активируются по умолчанию и отображаются внутри или рядом со столбцами:

import { ResponsiveBar } from '@nivo/bar'

const data = [
  { country: 'A', value: 42 },
  { country: 'B', value: 81 }
]

<ResponsiveBar
  data={data}
  keys={['value']}
  indexBy="country"
  label={(d) => `${d.value}`}
/>

Ключевые особенности:

  • label задаёт функцию формирования текста метки
  • доступ к данным элемента осуществляется через объект d
  • результатом может быть строка или вычисленное значение

Форматирование меток

Форматирование меток позволяет контролировать представление чисел, единиц измерения и текста:

label={(d) => `${d.value.toFixed(1)} ед.`}

Часто используется:

  • округление значений
  • добавление префиксов и суффиксов
  • преобразование чисел в процентные значения

Для круговых диаграмм (ResponsivePie) форматирование особенно важно:

<ResponsivePie
  data={[
    { id: 'JavaScript', value: 55 },
    { id: 'Python', value: 45 }
  ]}
  valueFormat={(v) => `${v}%`}
/>

Здесь valueFormat влияет на отображение значений в подсказках и легендах.

Управление положением меток

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

В ResponsiveBar используется свойство:

labelPosition="inside"

Возможные варианты:

  • inside — метка внутри элемента
  • outside — метка снаружи (если поддерживается типом графика)

При недостатке пространства метки автоматически скрываются или обрезаются в зависимости от настроек перекрытия.

Стилизация меток

Стили меток задаются через theme:

<ResponsiveBar
  data={data}
  keys={['value']}
  indexBy="country"
  theme={{
    labels: {
      text: {
        fontSize: 12,
        fill: '#333333'
      }
    }
  }}
/>

Основные параметры:

  • fontSize — размер текста
  • fill — цвет
  • fontWeight — насыщенность
  • textShadow — тень для повышения читаемости

В сложных визуализациях часто применяется условное форматирование меток в зависимости от значения:

label={(d) =>
  d.value > 50 ? `HIGH: ${d.value}` : `${d.value}`
}

Подсказки (Tooltips) в Nivo

Подсказки (tooltips) в Nivo представляют собой интерактивные элементы, отображающие подробную информацию о данных при наведении курсора или фокусе на элементе графика. Они являются одним из основных инструментов анализа данных в визуализациях.

В отличие от меток, которые статичны, подсказки динамически создаются во время взаимодействия с графиком.

Базовое использование подсказок

В большинстве компонентов подсказки включены по умолчанию:

<ResponsiveBar
  data={data}
  keys={['value']}
  indexBy="country"
  tooltip={({ id, value, color }) => (
    <div style={{ padding: 12, background: '#fff' }}>
      <strong style={{ color }}>{id}</strong>: {value}
    </div>
  )}
/>

Параметры:

  • tooltip — функция, возвращающая React-элемент
  • передаваемые данные зависят от типа диаграммы
  • можно использовать любые стили и компоненты

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

В зависимости от визуализации структура отличается:

Bar chart:

  • id — идентификатор серии
  • value — значение
  • indexValue — категория

Pie chart:

  • datum.id — сектор
  • datum.value — значение
  • datum.color — цвет сектора

Line chart:

  • point.data.x
  • point.data.y
  • point.serieId

Кастомизация подсказок

Подсказки в Nivo полностью заменяемы. Часто используется вынесенный компонент:

const CustomTooltip = ({ point }) => (
  <div
    style={{
      padding: 10,
      background: 'white',
      border: '1px solid #ccc'
    }}
  >
    <div>Ось X: {point.data.x}</div>
    <div>Ось Y: {point.data.y}</div>
  </div>
)

<ResponsiveLine
  data={data}
  tooltip={CustomTooltip}
/>

Преимущества такого подхода:

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

Отключение подсказок

В некоторых случаях интерактивность не требуется:

<ResponsiveBar
  data={data}
  keys={['value']}
  indexBy="country"
  enableTooltip={false}
/>

Такое отключение снижает нагрузку на DOM и улучшает производительность при больших наборах данных.

Поведение и позиционирование

Подсказки в Nivo используют систему позиционирования, которая автоматически рассчитывает оптимальное размещение относительно курсора.

Основные особенности:

  • предотвращение выхода за границы контейнера
  • автоматическое смещение при перекрытии
  • адаптация к размерам viewport

Для кастомного позиционирования применяется обёртка или внешний контейнер:

tooltip={({ value }) => (
  <div style={{ transform: 'translate(-50%, -100%)' }}>
    {value}
  </div>
)}

Форматирование значений в подсказках

Часто данные требуют преобразования перед отображением:

tooltip={({ value }) => (
  <div>
    Значение: {(value * 100).toFixed(2)}%
  </div>
)}

Типовые операции:

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

Взаимодействие меток и подсказок

Метки и подсказки выполняют разные, но взаимодополняющие функции:

  • Метки обеспечивают постоянную визуальную аннотацию данных
  • Подсказки предоставляют расширенную информацию по запросу

В сложных визуализациях применяется комбинированный подход:

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

Пример:

<ResponsiveBar
  data={data}
  keys={['value']}
  indexBy="country"
  label={(d) => d.value}
  tooltip={({ data }) => (
    <div>
      Страна: {data.country}
      <br />
      Полное значение: {data.value}
    </div>
  )}
/>

Управление читаемостью и перегрузкой интерфейса

При работе с плотными наборами данных метки и подсказки требуют балансировки:

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

Типовой подход для bar charts:

label={(d) => (d.value > 20 ? d.value : '')}

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

Динамические метки на основе состояния

Метки могут изменяться в зависимости от состояния компонента или внешних параметров:

label={(d) =>
  d.id === selectedId ? `▶ ${d.value}` : `${d.value}`
}

Подобная логика позволяет:

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

Использование форматтеров

Для унификации отображения значений применяются форматтеры:

const formatValue = (v) => `${v.toLocaleString()} ₽`

<ResponsiveBar
  data={data}
  keys={['value']}
  indexBy="country"
  label={formatValue}
  tooltip={({ value }) => formatValue(value)}
/>

Форматтеры обеспечивают:

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