Использование Responsive-версий компонентов

В библиотеке Nivo ключевая идея адаптивной визуализации реализована через responsive-компоненты, которые автоматически подстраиваются под размеры контейнера. Вместо ручного задания ширины и высоты графика используется механизм измерения DOM-элемента, что позволяет компонентам корректно масштабироваться при любых изменениях layout.

Responsive-версия компонентов строится поверх базовых (например, Line, Bar, Pie), но полностью делегирует управление размерами контейнеру.

Основная особенность заключается в том, что рендер графика происходит только при наличии вычисленных размеров, что делает поведение предсказуемым в flex- и grid-раскладках.

Архитектура responsive-компонентов

Каждый responsive-компонент (например, ResponsiveLine, ResponsiveBar) представляет собой обёртку над измерением контейнера и передачей размеров в базовый график.

Внутренний процесс можно представить так:

  1. Создаётся контейнер с width: 100% и height: 100%
  2. Используется наблюдатель размеров (ResizeObserver)
  3. При изменении размеров пересчитываются width и height
  4. Эти значения передаются в базовый компонент (Line, Bar, Pie)
  5. Перерисовка графика происходит с новыми параметрами

Таким образом достигается синхронизация графика с layout без ручного управления размерами.

Базовый паттерн использования responsive-компонентов

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

Пример структуры:

import { ResponsiveLine } from '@nivo/line'

const data = [
  {
    id: 'series-1',
    data: [
      { x: 0, y: 10 },
      { x: 1, y: 20 },
      { x: 2, y: 15 }
    ]
  }
]

export default function Chart() {
  return (
    <div style={{ height: 400 }}>
      <ResponsiveLine
        data={data}
        margin={{ top: 20, right: 20, bottom: 50, left: 50 }}
        xScale={{ type: 'point' }}
        yScale={{ type: 'linear', min: 0, max: 'auto' }}
      />
    </div>
  )
}

Ключевой аспект — контейнер задаёт высоту, компонент управляет шириной автоматически.

ResponsiveLine: особенности поведения

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

При изменении размеров контейнера происходит перерасчёт:

  • координат точек
  • масштаба осей
  • отступов (margin)
  • области отрисовки (chart area)

Особое значение имеет параметр margin, поскольку при уменьшении контейнера визуальная область сокращается, но отступы остаются фиксированными.

<ResponsiveLine
  data={data}
  margin={{ top: 50, right: 110, bottom: 50, left: 60 }}
  xScale={{ type: 'point' }}
  yScale={{ type: 'linear', min: 0, max: 'auto' }}
  axisBottom={{ tickRotation: -45 }}
/>

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

ResponsiveBar и управление плотностью данных

ResponsiveBar отличается тем, что масштабирование влияет не только на геометрию, но и на визуальную читаемость категорий.

При уменьшении ширины контейнера:

  • уменьшается ширина столбцов
  • увеличиваются интервалы между группами
  • часть подписей может скрываться автоматически
import { ResponsiveBar } from '@nivo/bar'

const data = [
  { country: 'A', value: 40 },
  { country: 'B', value: 70 },
  { country: 'C', value: 30 }
]

export default () => (
  <div style={{ height: 300 }}>
    <ResponsiveBar
      data={data}
      keys={['value']}
      indexBy="country"
      margin={{ top: 20, right: 20, bottom: 50, left: 50 }}
      padding={0.3}
      axisBottom={{ tickRotation: 0 }}
    />
  </div>
)

Параметр padding начинает играть критическую роль в responsive-режиме, так как влияет на минимальную читаемую ширину столбца.

ResponsivePie и динамика радиуса

В круговых диаграммах адаптивность выражается через изменение радиуса окружности в зависимости от доступного пространства.

ResponsivePie вычисляет:

  • внешний радиус
  • внутренний радиус (donut-режим)
  • положение легенды
  • доступное пространство для подписей
import { ResponsivePie } from '@nivo/pie'

const data = [
  { id: 'A', value: 30 },
  { id: 'B', value: 50 },
  { id: 'C', value: 20 }
]

export default () => (
  <div style={{ height: 350 }}>
    <ResponsivePie
      data={data}
      margin={{ top: 20, right: 20, bottom: 20, left: 20 }}
      innerRadius={0.5}
      padAngle={0.7}
    />
  </div>
)

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

Контейнеры и критичность высоты

Responsive-компоненты Nivo зависят от вычисления размеров DOM-элемента. Основная проблема возникает при отсутствии заданной высоты у родителя.

Типичные ошибки:

  • height: auto без контента
  • flex-контейнер без min-height
  • рендер в скрытом состоянии (display: none)
  • вкладки без активного состояния при первом рендере

Корректная схема:

.chart-wrapper {
  width: 100%;
  height: 400px;
}

или flex-раскладка:

.container {
  display: flex;
  height: 100vh;
}

.chart {
  flex: 1;
}

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

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

  • пересчёт bounding box
  • обновление scales
  • повторная отрисовка SVG или Canvas
  • перерасчёт label layout

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

Особенно важно учитывать производительность при частых изменениях размеров: анимации (motion) и сложные сетки могут увеличивать нагрузку.

SSR и гидратация responsive-компонентов

При серверном рендеринге отсутствует доступ к DOM, поэтому размеры контейнера неизвестны.

Типичное поведение:

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

В некоторых случаях применяется отложенный рендер:

const [mounted, setMounted] = useState(false)

useEffect(() => {
  setMounted(true)
}, [])

return (
  <div style={{ height: 400 }}>
    {mounted && <ResponsiveLine data={data} />}
  </div>
)

Взаимодействие responsive-компонентов с theme и margin

Адаптивность не ограничивается геометрией. theme и margin влияют на поведение графика при разных размерах контейнера.

  • увеличенные margin уменьшают полезную область
  • кастомные font sizes влияют на перенос подписей
  • сетка (grid) может становиться визуально перегруженной при малых размерах

Пример:

<ResponsiveLine
  data={data}
  margin={{ top: 30, right: 30, bottom: 80, left: 60 }}
  theme={{
    axis: {
      ticks: {
        text: {
          fontSize: 12
        }
      }
    }
  }}
/>

Ограничения responsive-подхода

Несмотря на автоматизацию, существуют ограничения:

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

Responsive-подход эффективен в дашбордах, но требует балансировки между автоматикой и настройками отображения.

Оглавление