Форматы данных для Bar

В библиотеке Nivo компонент Bar строится на основе табличной структуры данных, где каждая строка представляет категорию, а свойства объекта — числовые серии, отображаемые в виде столбцов.

Базовый формат:

const data = [
  {
    country: "AD",
    "hot dog": 120,
    burger: 80,
    sandwich: 45,
    kebab: 60,
    fries: 20,
    donut: 30
  },
  {
    country: "AE",
    "hot dog": 90,
    burger: 60,
    sandwich: 70,
    kebab: 50,
    fries: 10,
    donut: 40
  }
];

Каждый объект массива:

  • задаёт одну категорию по оси X (или Y при горизонтальном режиме)
  • содержит набор числовых значений для разных серий

Ключевая особенность модели — отсутствие строгой схемы: структура полностью определяется параметрами keys и indexBy.

Параметр keys

keys определяет, какие поля объекта данных будут использованы как серии.

const keys = ["hot dog", "burger", "sandwich", "kebab", "fries", "donut"];

Если поле не указано в keys, оно игнорируется при построении графика.

Связь между keys и данными:

  • keys задаёт набор визуализируемых метрик
  • порядок в массиве влияет на порядок отображения столбцов (и слоёв при stacked режиме)

Индексирование indexBy

Параметр indexBy определяет поле, используемое как категория (ось X или Y).

По умолчанию:

indexBy: "id"

Пример переопределения:

<ResponsiveBar
  data={data}
  keys={keys}
  indexBy="country"
/>

В этом случае:

  • country становится категорией
  • все остальные числовые поля обрабатываются как серии (если включены в keys)

Структура зависит от выбранного поля:

  • строки данных = категории
  • значения keys = метрики

Группировка и стек

Bar chart в Nivo поддерживает два основных режима визуализации серий:

Группированный режим (grouped)

Каждая категория отображает несколько отдельных столбцов рядом.

groupMode="grouped"

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

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

Стековый режим (stacked)

Серии накладываются друг на друга:

groupMode="stacked"

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

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

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

Горизонтальные бары

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

layout="horizontal"

При горизонтальном режиме:

  • indexBy становится осью Y
  • значения keys откладываются по оси X
  • категории читаются вертикально

Пример логики:

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

Работа с временными рядами

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

Пример:

const data = [
  { day: "2026-01-01", value: 10 },
  { day: "2026-01-02", value: 15 },
  { day: "2026-01-03", value: 7 }
];

Конфигурация:

<ResponsiveBar
  data={data}
  keys={["value"]}
  indexBy="day"
/>

Особенности работы с датами:

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

Нулевые и отсутствующие значения

Nivo корректно обрабатывает отсутствующие поля в объектах данных.

Пример:

const data = [
  { category: "A", apples: 10, oranges: 5 },
  { category: "B", apples: 0 }, 
  { category: "C", oranges: 8 }
];

Поведение:

  • отсутствующие ключи трактуются как 0 или null (в зависимости от конфигурации)
  • визуально могут отсутствовать сегменты
  • stacked режим может изменять итоговую высоту

Рекомендуется:

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

Кастомные форматы и преобразование данных

Часто исходные данные не соответствуют требованиям Bar и требуют преобразования.

Из массива объектов с вложенной структурой

Исходные данные:

const raw = [
  { region: "North", metrics: { sales: 100, profit: 30 } },
  { region: "South", metrics: { sales: 80, profit: 20 } }
];

Преобразование:

const data = raw.map(item => ({
  region: item.region,
  sales: item.metrics.sales,
  profit: item.metrics.profit
}));

Из API с динамическими ключами

const apiData = {
  "2026-01": { a: 10, b: 20 },
  "2026-02": { a: 15, b: 25 }
};

Преобразование:

const data = Object.entries(apiData).map(([month, values]) => ({
  month,
  ...values
}));

keys:

const keys = ["a", "b"];

Нормализация числовых значений

При работе с необработанными API-данными часто требуется:

const normalize = (value) =>
  typeof value === "number" ? value : 0;

Применение:

const data = raw.map(item => ({
  category: item.category,
  sales: normalize(item.sales),
  profit: normalize(item.profit)
}));

Практические схемы подготовки данных

Многосерийная модель

const data = [
  { month: "Jan", mobile: 120, desktop: 200, tablet: 80 },
  { month: "Feb", mobile: 150, desktop: 180, tablet: 90 }
];

const keys = ["mobile", "desktop", "tablet"];

Используется для:

  • аналитики устройств
  • сравнений каналов
  • сегментированных показателей

Один показатель по категориям

const data = [
  { product: "A", value: 30 },
  { product: "B", value: 45 },
  { product: "C", value: 25 }
];

const keys = ["value"];

Используется для:

  • рейтингов
  • распределений
  • простых сравнений

Агрегированные данные

const data = [
  { year: 2023, revenue: 1000, cost: 700 },
  { year: 2024, revenue: 1200, cost: 800 }
];

const keys = ["revenue", "cost"];

Используется для:

  • финансовой аналитики
  • сравнений затрат и доходов
  • отчётности

Типичные ошибки структуры данных

Несоответствие keys и данных

Если ключ отсутствует в объектах:

const keys = ["a", "b", "c"];

а c отсутствует в данных, серия будет пустой.

Разнородные типы значений

{ category: "A", value: "100" }

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

Несогласованный indexBy

Если indexBy указывает на несуществующее поле:

indexBy="id"

а id отсутствует, график теряет структуру категорий.

Нестабильный порядок данных

Nivo не сортирует данные автоматически:

[
  { month: "March" },
  { month: "January" },
  { month: "February" }
]

Порядок отрисовки будет таким же, как входной массив, если не выполнить сортировку заранее.

Влияние структуры данных на визуальные параметры

Формат данных напрямую влияет на:

  • плотность графика
  • читаемость категорий
  • поведение stacked/grouped режимов
  • масштабирование осей
  • интерактивные подсказки

Чем более предсказуемая структура данных, тем стабильнее визуальный результат при использовании Bar-компонента Nivo.

Оглавление