Компонент Waffle: мозаичные диаграммы

Компонент Waffle из экосистемы Nivo предназначен для визуализации долей и пропорций через сетку одинаковых ячеек. Такой тип графика часто используется как альтернатива круговым диаграммам, когда требуется более наглядное представление распределения значений в дискретной форме.

Waffle-диаграмма представляет собой прямоугольную решётку, где каждая ячейка соответствует фиксированной части общего значения. Закрашенные элементы отображают вклад категории в общий объём, а незакрашенные — оставшуюся часть или другие категории.

Базовая структура данных

Компонент Waffle работает с массивом объектов, каждый из которых описывает категорию и её значение.

const data = [
  {
    id: 'JavaScript',
    label: 'JavaScript',
    value: 40,
    color: '#f1e05a',
  },
  {
    id: 'TypeScript',
    label: 'TypeScript',
    value: 25,
    color: '#2b7489',
  },
  {
    id: 'Python',
    label: 'Python',
    value: 35,
    color: '#3572A5',
  },
]

Ключевой параметр — value. Он определяет количество клеток, которое будет занято категорией относительно общего числа.

Подключение компонента

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

import { ResponsiveWaffle } from '@nivo/waffle'

Минимальная конфигурация:

<ResponsiveWaffle
  data={data}
  total={100}
  rows={10}
  columns={10}
  margin={{ top: 10, right: 10, bottom: 10, left: 10 }}
  colors={{ scheme: 'nivo' }}
  borderColor={{ from: 'color', modifiers: [['darker', 0.3]] }}
/>

Принцип работы разбиения на клетки

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

  • rows и columns задают геометрию сетки
  • произведение rows × columns должно соответствовать или превышать total
  • каждая ячейка представляет фиксированную долю

Пример:

total = 100
rows = 10
columns = 10

Каждая клетка = 1%

Ключевые свойства компонента

data

Массив категорий с числовыми значениями.

total

Общая сумма, на которую нормализуются значения.

total={100}

Если сумма значений меньше total, часть сетки остаётся пустой.

rows и columns

Определяют структуру мозаики:

rows={6}
columns={10}

Используется прямоугольная сетка, где важна читаемость:

  • больше строк — вертикальная визуализация
  • больше столбцов — горизонтальная интерпретация

padding

Управляет расстоянием между ячейками.

padding={1}
  • 0 — плотная сетка
  • 1–2 — стандартная читаемость
  • более 2 — выраженная сегментация

colors

Поддерживаются различные способы задания цветов:

colors={{ scheme: 'set3' }}

Или через функцию:

colors={(node) => node.data.color}

Также возможно использование интерполяции:

colors={{ datum: 'color' }}

borderColor

Позволяет управлять границами клеток:

borderColor={{ from: 'color', modifiers: [['darker', 0.4]] }}

Часто используется для повышения контраста между соседними элементами.

Отображение нескольких категорий

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

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

  1. первая категория заполняет клетки до своего значения
  2. следующая продолжает заполнение
  3. остаток сетки остаётся пустым или служит фоном

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

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

motionConfig="gentle"

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

  • wobbly
  • gentle
  • stiff
  • molasses

Анимации влияют на:

  • заполнение клеток
  • изменение цвета
  • перераспределение значений

Подписи и доступность

Для повышения информативности используются элементы:

labels

enableLabels={true}

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

accessibility

Компонент поддерживает базовую ARIA-разметку, включая:

  • описание категорий
  • значения
  • процентное соотношение

Tooltip (всплывающие подсказки)

Tooltip активируется при наведении:

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

Типичная структура данных в tooltip:

  • категория
  • значение
  • процент от общего числа

Темизация и кастомизация внешнего вида

Nivo использует систему тем:

theme={{
  fontSize: 12,
  textColor: '#333',
  grid: {
    line: {
      stroke: '#eee',
    },
  },
}}

Параметры темы применяются ко всем визуальным элементам:

  • подписи
  • подсказки
  • сетка
  • рамки

Паттерны и визуальные дефиниции

Nivo поддерживает SVG-паттерны через defs и fill.

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

Применение:

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

Управление направлением заполнения

Waffle может заполняться в разных направлениях:

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

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

Оптимизация отображения

При работе с большими наборами данных учитываются следующие факторы:

  • уменьшение rows × columns для снижения количества DOM-элементов
  • отключение лишних анимаций
  • использование статических цветов вместо функций
  • ограничение tooltip-логики

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

<ResponsiveWaffle
  data={data}
  total={100}
  rows={10}
  columns={10}
  padding={2}
  colors={{ scheme: 'paired' }}
  borderColor={{ from: 'color', modifiers: [['darker', 0.5]] }}
  enableLabels={true}
  labelTextColor="#000"
  motionConfig="gentle"
  tooltip={({ id, value }) => (
    <div>
      {id}: {value}
    </div>
  )}
  defs={[
    {
      id: 'lines',
      type: 'patternLines',
      background: 'inherit',
      color: '#fff',
      rotation: -45,
      lineWidth: 6,
      spacing: 10,
    },
  ]}
  fill={[
    {
      match: { id: 'Python' },
      id: 'lines',
    },
  ]}
/>

Поведение при изменении данных

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

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

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

Ограничения модели представления

Waffle-диаграммы имеют ряд структурных особенностей:

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

Использование в аналитических интерфейсах

Чаще всего мозаичные диаграммы применяются для:

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

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

Оглавление