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

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

Основой работы Radar является строго определённая структура входного массива объектов. Каждый объект представляет отдельную серию данных:

const data = [
  {
    id: 'A',
    data: [
      { axis: 'speed', value: 120 },
      { axis: 'strength', value: 80 },
      { axis: 'accuracy', value: 90 }
    ]
  },
  {
    id: 'B',
    data: [
      { axis: 'speed', value: 100 },
      { axis: 'strength', value: 95 },
      { axis: 'accuracy', value: 70 }
    ]
  }
];

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

  • id — уникальный идентификатор серии
  • data — массив измерений
  • axis — категория (ось)
  • value — числовое значение по оси

При несоответствии структуры компонент не сможет корректно построить радиальную сетку.

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

Базовая конфигурация компонента задаёт поведение визуализации, масштабирование и обработку данных.

<Radar
  data={data}
  keys={['A', 'B']}
  indexBy="axis"
  maxValue="auto"
/>

data

Основной источник данных. Должен соответствовать описанной структуре.

keys

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

indexBy

Определяет поле, которое используется как ось (категория). Обычно это axis.

maxValue

Определяет максимальное значение шкалы:

  • "auto" — вычисляется автоматически
  • число — фиксированная верхняя граница

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

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

Radar-компонент предоставляет набор параметров для управления геометрией радиальной сетки.

margin

margin={{ top: 40, right: 40, bottom: 40, left: 40 }}

Определяет внешние отступы области построения. При недостаточном margin подписи и легенды могут обрезаться.

gridLevels

gridLevels={5}

Количество концентрических окружностей (уровней сетки). Чем больше значение, тем детальнее шкала.

gridShape

gridShape="circular"

Возможные значения:

  • circular — круговая сетка
  • linear — многоугольная сетка

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

Настройка внешнего вида

colors

colors={{ scheme: 'nivo' }}

Поддерживаются:

  • встроенные схемы
  • массив цветов
  • функция генерации цвета

Пример функции:

colors={(d) => d.id === 'A' ? '#ff0000' : '#0000ff'}

borderWidth и borderColor

borderWidth={2}
borderColor={{ from: 'color', modifiers: [['darker', 0.3]] }}

Позволяет управлять контуром полигонов. Использование from: 'color' обеспечивает согласованность с основной палитрой.

dotSize и dotColor

dotSize={4}
dotColor={{ theme: 'background' }}
dotBorderWidth={2}
dotBorderColor={{ from: 'color' }}

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

Работа с масштабированием

Масштабирование значений определяется через maxValue и внутреннюю нормализацию данных.

Если задано:

maxValue={200}

все значения преобразуются по формуле нормализации:

  • относительное значение = value / maxValue

При auto используется максимальное значение среди всех серий и категорий.

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

Легенды

Конфигурация легенд позволяет управлять отображением серий.

legends={[
  {
    anchor: 'top-left',
    direction: 'column',
    translateX: -50,
    translateY: -40,
    itemWidth: 80,
    itemHeight: 20,
    symbolSize: 12,
    symbolShape: 'circle'
  }
]}

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

  • anchor — позиция легенды
  • direction — направление элементов
  • translateX / translateY — смещение
  • symbolShape — форма маркера

Легенды критичны при большом количестве серий, так как Radar визуально перегружен при высокой плотности данных.

Tooltip

Tooltip отображает детализированную информацию по точке.

tooltip={({ point }) => (
  <div>
    <strong>{point.serieId}</strong>
    <div>{point.axis}: {point.value}</div>
  </div>
)}

Доступные поля:

  • point.serieId — серия
  • point.axis — ось
  • point.value — значение
  • point.color — цвет серии

Tooltip может быть полностью переопределён, что позволяет внедрять сложную бизнес-логику (например, сравнительные подсказки между сериями).

Анимации

Radar поддерживает встроенные анимации переходов.

animate={true}
motionConfig="gentle"

motionConfig

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

  • wobbly — более динамичные переходы
  • gentle — плавные изменения
  • stiff — резкие переходы

Анимации применяются при:

  • изменении данных
  • обновлении масштаба
  • смене конфигурации

При большом объёме данных анимации могут влиять на производительность, особенно при частых обновлениях состояния.

Ключевые настройки слоя (layers)

Radar позволяет управлять слоями отрисовки:

layers={[
  'grid',
  'layers',
  'dots',
  'legends'
]}

Доступные слои:

  • grid — сетка
  • layers — полигоны серий
  • dots — точки значений
  • legends — легенды

Переопределение порядка слоёв используется для кастомизации визуальной иерархии.

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

<Radar
  data={data}
  keys={['A', 'B']}
  indexBy="axis"
  maxValue="auto"
  margin={{ top: 40, right: 40, bottom: 40, left: 40 }}
  curve="linearClosed"
  borderWidth={2}
  borderColor={{ from: 'color' }}
  gridLevels={5}
  gridShape="circular"
  dotSize={5}
  dotColor={{ theme: 'background' }}
  dotBorderWidth={2}
  enableDots={true}
  enableDotLabel={false}
  colors={{ scheme: 'nivo' }}
  fillOpacity={0.25}
  blendMode="normal"
  animate={true}
  motionConfig="gentle"
  legends={[
    {
      anchor: 'top-left',
      direction: 'column',
      translateX: -50,
      translateY: -40,
      itemWidth: 80,
      itemHeight: 20,
      symbolSize: 12,
      symbolShape: 'circle'
    }
  ]}
/>

Поведение кривых

Параметр curve управляет способом соединения точек:

  • linearClosed — прямые линии с замыканием контура
  • catmullRomClosed — сглаженные кривые
  • basisClosed — мягкие интерполяции

Выбор типа кривой влияет на восприятие формы данных: линейные подчёркивают точность, сглаженные — тенденции.

Управление прозрачностью и наложением

fillOpacity={0.3}
blendMode="multiply"
  • fillOpacity регулирует визуальную плотность заливки
  • blendMode управляет поведением наложения серий

При пересечении нескольких полигонов режим наложения существенно влияет на читаемость пересекающихся областей.

Обработка крайних значений

Radar чувствителен к выбросам. При наличии экстремальных значений:

  • форма полигона искажается
  • остальные значения визуально «сжимаются»

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

Поведение при пустых данных

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

Оглавление