Компонент Pie: основная конфигурация

Компонент Pie в библиотеке Nivo (@nivo/pie) работает с массивом объектов, где каждый элемент представляет отдельный сектор диаграммы. Базовая структура данных предельно проста, но требует строгого соблюдения формы.

const data = [
  {
    id: "React",
    value: 35
  },
  {
    id: "Vue",
    value: 25
  },
  {
    id: "Angular",
    value: 20
  }
];

Ключевые поля:

  • id — уникальный идентификатор сектора, используется для подписи и легенд
  • value — числовое значение, определяющее размер сектора

Дополнительно могут использоваться поля:

  • color — переопределение цвета конкретного сектора
  • label — кастомная подпись (если отличается от id)

Базовая конфигурация Pie

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

import { ResponsivePie } from '@nivo/pie';

const MyPie = () => (
  <ResponsivePie
    data={data}
    margin={{ top: 40, right: 80, bottom: 80, left: 80 }}
    innerRadius={0}
    padAngle={0}
    cornerRadius={0}
    activeOuterRadiusOffset={8}
  />
);

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

  • data — источник данных
  • margin — отступы вокруг диаграммы
  • innerRadius — радиус внутреннего отверстия (0 — круг, >0 — donut)
  • padAngle — расстояние между секторами
  • cornerRadius — скругление краёв сегментов
  • activeOuterRadiusOffset — увеличение активного сектора при наведении

Режимы отображения: круг и donut

Переход между классической круговой диаграммой и кольцевой осуществляется через innerRadius.

innerRadius={0}   // круговая диаграмма
innerRadius={0.5} // donut-диаграмма

Значение интерпретируется как доля от внешнего радиуса:

  • 0 — заполненный круг
  • 0.4–0.6 — стандартный donut
  • 0.7+ — визуально «тонкое кольцо»

Управление углами и геометрией

Pie-компонент позволяет точно контролировать форму сегментов.

startAngle={0}
endAngle={360}
padAngle={1}
cornerRadius={4}

Параметры:

  • startAngle / endAngle — диапазон отображения (можно создавать полу-диаграммы)
  • padAngle — расстояние между секторами в градусах
  • cornerRadius — скругление углов сегментов

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

Цветовая модель

Nivo предоставляет гибкую систему управления цветами через colors.

Палитра по умолчанию

colors={{ scheme: 'nivo' }}

Фиксированные цвета

colors={["#e63946", "#457b9d", "#a8dadc"]}

Цвета на основе данных

colors={{ datum: 'id' }}

Функция генерации цвета

colors={(datum) => {
  if (datum.value > 30) return "#2a9d8f";
  return "#e76f51";
}}

Настройка подписей (Arc Labels)

Подписи внутри сегментов управляются через arcLabels.

arcLabelsSkipAngle={10}
arcLabelsTextColor="#ffffff"
arcLabelsRadiusOffset={0.6}

Параметры:

  • arcLabelsSkipAngle — скрытие подписей для маленьких сегментов
  • arcLabelsTextColor — цвет текста
  • arcLabelsRadiusOffset — смещение подписи от центра сектора

Дополнительно можно отключить подписи полностью:

enableArcLabels={false}

Для сложных диаграмм используются линии-выноски.

enableArcLinkLabels={true}
arcLinkLabelsSkipAngle={10}
arcLinkLabelsTextColor="#333"
arcLinkLabelsThickness={2}
arcLinkLabelsColor={{ from: 'color' }}

Ключевые параметры:

  • enableArcLinkLabels — включение внешних подписей
  • arcLinkLabelsThickness — толщина линий
  • arcLinkLabelsColor — цвет линии (может наследоваться от сектора)

Легенды

Легенды добавляются через массив legends.

legends={[
  {
    anchor: 'bottom',
    direction: 'row',
    translateY: 56,
    itemWidth: 100,
    itemHeight: 18,
    itemTextColor: '#999',
    symbolSize: 18,
    symbolShape: 'circle'
  }
]}

Основные настройки:

  • anchor — позиция (top, bottom, left, right)
  • direction — направление (row / column)
  • itemWidth / itemHeight — размеры элементов
  • symbolShape — форма маркера (circle, square)

Анимации и взаимодействие

Nivo использует встроенную систему анимаций на основе d3 transitions.

animate={true}
motionConfig="gentle"

Доступные пресеты:

  • wobbly
  • stiff
  • gentle
  • molasses

Поведение при наведении:

activeOuterRadiusOffset={10}
activeInnerRadiusOffset={0}

Tooltip

Tooltip позволяет кастомизировать всплывающую информацию.

tooltip={({ datum }) => (
  <div style={{ padding: 12, background: "#fff" }}>
    <strong>{datum.id}</strong>: {datum.value}
  </div>
)}

Доступные данные:

  • datum.id
  • datum.value
  • datum.color

Сортировка данных

Сортировка влияет на порядок сегментов.

sortByValue={true}

Варианты:

  • true — сортировка по возрастанию
  • false — порядок из массива данных
  • функция — кастомная сортировка

Активные элементы

Подсветка и поведение активного сегмента:

activeOuterRadiusOffset={8}
activeInnerRadiusOffset={2}

Дополнительно можно управлять состоянием через события:

onMouseEn ter={(datum) => console.log(datum)}
onMouseLe ave={(datum) => console.log("leave", datum)}

Темизация

Объект theme управляет визуальным стилем:

theme={{
  labels: {
    text: {
      fontSize: 12,
      fill: "#333"
    }
  },
  legends: {
    text: {
      fontSize: 11,
      fill: "#666"
    }
  }
}}

Основные зоны:

  • labels — подписи внутри диаграммы
  • legends — легенды
  • tooltip — всплывающие подсказки

Паттерны и defs

Поддержка SVG паттернов позволяет создавать текстурные заливки.

defs={[
  {
    id: 'dots',
    type: 'patternDots',
    background: 'inherit',
    color: '#38bcb2',
    size: 4,
    padding: 1
  }
]}

Применение:

fill={[
  {
    match: {
      id: 'React'
    },
    id: 'dots'
  }
]}

Типы паттернов:

  • patternDots
  • patternLines
  • patternSquares

Полная конфигурационная модель

Компонент Pie объединяет несколько слоёв конфигурации:

  • геометрия (радиусы, углы)
  • визуальный стиль (цвета, темы, паттерны)
  • данные (value, id)
  • интерактивность (hover, active)
  • аннотации (labels, legends, tooltips)

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

Оглавление