Компонент Marimekko

Компонент Marimekko в @nivo/marimekko предназначен для визуализации составных распределений, где одновременно отображаются доли категорий и их вклад внутри групп. Его ключевая особенность заключается в сочетании двух измерений: ширина сегмента отражает общий вес категории, а внутренняя разбивка показывает структуру этой категории. Подобная модель часто используется для анализа рыночных долей, структуры продаж, распределения ресурсов и сравнительных долей сегментов в общей совокупности.

В основе Marimekko лежит иерархическая структура данных, где каждая верхнеуровневая сущность содержит набор вложенных значений.

Типичная форма данных:

const data = [
  {
    id: 'Group A',
    data: [
      { x: 'Segment 1', y: 40 },
      { x: 'Segment 2', y: 60 }
    ]
  },
  {
    id: 'Group B',
    data: [
      { x: 'Segment 1', y: 20 },
      { x: 'Segment 2', y: 80 }
    ]
  }
];

В этой структуре:

  • id определяет группу (верхний уровень)
  • data содержит массив сегментов внутри группы
  • x задаёт категорию внутри группы
  • y определяет числовое значение, влияющее на пропорции

Суммарные значения внутри группы определяют её ширину относительно других групп.

Базовая интеграция компонента

В библиотеке Nivo используется компонент ResponsiveMarimekko, который автоматически адаптируется под размеры контейнера.

import { ResponsiveMarimekko } from '@nivo/marimekko';

const MyMarimekko = () => (
  <ResponsiveMarimekko
    data={data}
    id="id"
    value="value"
    dimensions={[
      {
        id: 'dimension',
        value: d => d.value
      }
    ]}
  />
);

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

Ключевые параметры конфигурации

Компонент предоставляет набор параметров, определяющих визуальное поведение:

Управление данными

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

Геометрия и отступы

  • innerPadding — расстояние между сегментами внутри блока
  • outerPadding — внешние отступы между группами
  • margin — внешние поля графика
margin={{ top: 40, right: 40, bottom: 40, left: 40 }}
innerPadding={2}
outerPadding={6}

Цветовая схема

Nivo поддерживает как предустановленные палитры, так и кастомные функции:

colors={{ scheme: 'nivo' }}

или

colors={d => (d.id === 'Group A' ? '#ff7f0e' : '#1f77b4')}

Цветовая логика часто применяется на уровне групп, однако возможна и детализация до внутренних сегментов.

Отображение подписей и меток

Marimekko позволяет управлять отображением текста внутри блоков.

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

  • label — функция формирования подписи
  • labelSkipWidth — минимальная ширина для отображения текста
  • labelSkipHeight — минимальная высота для отображения текста
label={d => `${d.id}`}
labelSkipWidth={32}
labelSkipHeight={18}

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

Настройка осей

Хотя Marimekko не является классической координатной диаграммой, он поддерживает оси для контекстного анализа.

axisTop={{
  tickSize: 5,
  tickPadding: 5,
  tickRotation: 0
}}

axisLeft={{
  tickSize: 5,
  tickPadding: 5
}}

Оси чаще всего используются для отображения категорий и шкалы распределения значений.

Tooltip и интерактивность

Tooltip является важным элементом взаимодействия, позволяя раскрывать точные значения сегментов.

tooltip={({ id, value, indexValue }) => (
  <div>
    <strong>{id}</strong>
    <div>{indexValue}</div>
    <div>{value}</div>
  </div>
)}

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

Анимации и переходы

Nivo использует react-spring для анимаций, обеспечивая плавные изменения состояния.

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

  • animate — включает или отключает анимации
  • motionConfig — конфигурация физики анимации
animate={true}
motionConfig="gentle"

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

Легенды

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

legends={[
  {
    anchor: 'bottom',
    direction: 'row',
    translateY: 50,
    itemWidth: 120,
    itemHeight: 14
  }
]}

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

Темизация

Компонент поддерживает глобальную тему оформления через объект theme.

theme={{
  axis: {
    ticks: {
      text: {
        fontSize: 12,
        fill: '#999'
      }
    }
  },
  labels: {
    text: {
      fontSize: 11,
      fill: '#333'
    }
  }
}}

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

Управление доступностью визуализации

При работе с Marimekko важно учитывать читаемость плотных областей. Основные подходы:

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

Сценарии применения и моделирование данных

Marimekko эффективен в задачах, где необходимо одновременно показать:

  • долю категории в общей структуре
  • внутреннее распределение внутри категории
  • сравнительную значимость групп

Типичный пример — анализ продаж:

  • группы — регионы
  • сегменты — категории товаров
  • значения — объем продаж

При этом ширина региона отражает общий объем продаж, а внутренние сегменты — структуру ассортимента.

Оптимизация производительности

При больших объёмах данных важны следующие подходы:

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

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

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

ResponsiveMarimekko автоматически пересчитывает геометрию при изменении размеров контейнера. Это делает компонент удобным для dashboard-систем и адаптивных интерфейсов.

При этом важно учитывать:

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

Кастомизация рендеринга элементов

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

Пример расширения логики отображения:

layers={[
  'grid',
  'axes',
  'bars',
  'legends',
  CustomOverlay
]}

CustomOverlay может добавлять:

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

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

Работа с процентными значениями

Часто исходные данные требуют нормализации. Marimekko может работать как с абсолютными значениями, так и с предрассчитанными долями.

При переходе к процентной модели важно:

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

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

Оглавление