Розробка інтерактивних графіків на Nivo для React-додатків

Зауважте: коли React-додатку потрібно візуалізувати десятки тисяч точок даних, вибір бібліотеки для графіків стає критичним. D3.js дає повний контроль, але вимагає написання сотень рядків коду. Chart.js і Recharts простіші, але обмежені в кастомізації. Nivo — золота середина: компонентний підхід React, підтримка SVG і Canvas, десятки готових типів графіків, які можна кастомізувати під будь-яке завдання. Наші інженери використовують Nivo в продакшені понад 5 років, реалізували 50+ проєктів з візуалізаціями даних для фінтеху, e-commerce та аналітики. Економія на розробці візуалізації становить до 30% порівняно з D3, а час інтеграції скорочується в 2-3 рази. Джерело: офіційна документація Nivo

Типова проблема — неправильний формат даних. Nivo очікує масив об'єктів з полями id і data. Помилка hydration mismatch при SSR виникає, коли дані на клієнті та сервері відрізняються. Nivo коректно рендериться на сервері за умови, що дані передаються однаково. Ми гарантуємо стабільну роботу на всіх етапах.

Чому Nivo кращий за D3 для React-додатків?

D3 — низькорівнева робота з DOM, а Nivo — готові React-компоненти. При використанні D3 потрібно самостійно керувати життєвим циклом, оновленнями та знищенням графіків. Nivo бере це на себе: при зміні даних достатньо передати нові пропси, і компонент перемалюється з анімацією. D3 вимагає ручного виклику update та exit. Nivo також рендериться на сервері (SSR) за допомогою React, тоді як D3 зазвичай працює тільки на клієнті. Це критично для SEO та LCP. Крім того, Nivo дозволяє легко перемикатися між SVG і Canvas: для великих даних (10 000+ точок) використовуйте Canvas — продуктивність 60 fps проти 30 fps у D3.

Як підвищити продуктивність графіків?

При роботі з великими датасетами (понад 5000 точок) рекомендуємо:

• Використовувати useCanvas замість SVG.
• Мемоізувати дані за допомогою React.memo або useMemo.
• Обмежити кількість точок на екрані через агрегацію.
• Налаштувати motionConfig для відключення анімацій.

Ці техніки прискорюють відмальовку в 2-3 рази та зменшують навантаження на CPU.

Порівняння Nivo з D3

При розробці ми враховуємо адаптивність: графіки автоматично підлаштовуються під розмір контейнера через Responsive-компоненти Nivo. Це особливо важливо для дашбордів, які переглядають на різних пристроях. Ми також налаштовуємо тултіпи так, щоб вони коректно відображалися на мобільних екранах.

Що входить в роботу

• Вихідний код компонентів графіків з кастомними тултіпами.
• Документація щодо формату даних і пропсів.
• Інтеграція з існуючим API.
• Адаптивність під мобільні пристрої.
• Навчання команди (до 1 години).
• Гарантія 3 місяці.

Типові помилки та як їх уникнути

• Неправильна структура даних: перевір, що масив містить об'єкти з id (рядок) та data (масив точок).
• Відсутність ключів при мапінгу: використовуй React.memo та унікальний key.
• Ігнорування responsive: обгорни в контейнер з фіксованою висотою (min-height).
• Забув про useMesh: без нього тултіпи не працюють.
• Не встановлені залежності: @nivo/core обов'язковий.

Процес роботи

1. Аналіз даних та вимог до візуалізації.
2. Вибір типів графіків та прототипування.
3. Налаштування бекенду для віддачі даних у потрібному форматі.
4. Інтеграція Nivo компонентів, кастомізація тултіпів, легенд.
5. Оптимізація продуктивності (мемоізація, Canvas для великих даних).
6. Тестування на мобільних пристроях та різних екранах.
7. Деплой та моніторинг.

Строки

Від 3 до 10 днів залежно від складності. Вартість розраховується індивідуально.

npm install @nivo/line @nivo/bar @nivo/pie @nivo/heatmap @nivo/core 

import { ResponsiveLine } from '@nivo/line'; function NivoLineChart({ data }) { // Nivo очікує формат: [{ id: 'series', data: [{ x, y }] }] const nivoData = [ { id: 'Виручка', color: '#3b82f6', data: data.map(d => ({ x: d.date, y: d.revenue })) }, { id: 'Ціль', color: '#f59e0b', data: data.map(d => ({ x: d.date, y: d.target })) } ]; return ( <div style={{ height: 350 }}> <ResponsiveLine data={nivoData} margin={{ top: 20, right: 120, bottom: 50, left: 70 }} xScale={{ type: 'time', format: '%Y-%m-%d', precision: 'day' }} xFormat="time:%d.%m.%Y" yScale={{ type: 'linear', stacked: false }} yFormat=" >-.0f" curve="monotoneX" axisLeft={{ format: v => `${(v / 1000).toFixed(0)}k`, legend: 'Виручка (₽)', legendOffset: -60, legendPosition: 'middle' }} axisBottom={{ format: '%d %b', tickValues: 'every 2 weeks' }} colors={{ scheme: 'paired' }} lineWidth={2} pointSize={4} enableArea areaOpacity={0.1} useMesh legends={[{ anchor: 'bottom-right', direction: 'column', itemWidth: 100, itemHeight: 20 }]} tooltip={({ point }) => ( <div className="chart-tooltip"> <strong>{point.data.xFormatted}</strong> <br /> {point.serieId}: {Number(point.data.y).toLocaleString('uk')} ₴ </div> )} /> </div> ); } 

import { ResponsiveBar } from '@nivo/bar'; function ConversionBarChart({ data }) { return ( <div style={{ height: 300 }}> <ResponsiveBar data={data} keys={['conversion']} indexBy="page" margin={{ top: 10, right: 20, bottom: 60, left: 60 }} padding={0.4} valueScale={{ type: 'linear' }} colors={({ data }) => { if (data.conversion >= 5) return '#22c55e'; if (data.conversion >= 2) return '#f59e0b'; return '#ef4444'; }} axisBottom={{ tickRotation: -45 }} axisLeft={{ format: v => `${v}%` }} label={d => `${d.value}%`} tooltip={({ data, value }) => ( <div className="chart-tooltip"> <strong>{data.page}</strong>: {value}% конверсія </div> )} /> </div> ); } 

import { ResponsiveCalendar } from '@nivo/calendar'; function ActivityCalendar({ data }) { // data: [{ day: '2024-03-28', value: 42 }] return ( <div style={{ height: 200 }}> <ResponsiveCalendar data={data} from="2024-01-01" to="2024-12-31" emptyColor="#f3f4f6" colors={['#dbeafe', '#93c5fd', '#3b82f6', '#1d4ed8']} margin={{ top: 20, right: 20, bottom: 20, left: 20 }} yearSpacing={40} monthBorderColor="#ffffff" dayBorderWidth={2} dayBorderColor="#ffffff" tooltip={({ day, value }) => ( <div className="chart-tooltip">{day}: {value} подій</div> )} /> </div> ); }