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

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

Recharts — бібліотека графіків, нативна для React, побудована на SVG та D3. Кожен компонент графіка — звичайний React-компонент, що спрощує кастомізацію та інтеграцію зі станом додатку.

Встановлення

npm install recharts

Area Chart з користувацькою підказкою

import {
  AreaChart, Area, XAxis, YAxis, CartesianGrid,
  Tooltip, ResponsiveContainer, Legend
} from 'recharts';

function CustomTooltip({ active, payload, label }) {
  if (!active || !payload?.length) return null;

  return (
    <div className="bg-white border rounded-lg shadow-lg p-3">
      <p className="font-semibold text-gray-700 mb-2">{label}</p>
      {payload.map(entry => (
        <div key={entry.name} className="flex items-center gap-2">
          <div className="w-3 h-3 rounded-full" style={{ background: entry.color }} />
          <span className="text-sm">
            {entry.name}: <strong>{formatCurrency(entry.value)}</strong>
          </span>
        </div>
      ))}
    </div>
  );
}

function SalesAreaChart({ data }) {
  return (
    <ResponsiveContainer width="100%" height={300}>
      <AreaChart data={data} margin={{ top: 10, right: 30, left: 0, bottom: 0 }}>
        <defs>
          <linearGradient id="salesGradient" x1="0" y1="0" x2="0" y2="1">
            <stop offset="5%" stopColor="#3b82f6" stopOpacity={0.3} />
            <stop offset="95%" stopColor="#3b82f6" stopOpacity={0} />
          </linearGradient>
        </defs>
        <CartesianGrid strokeDasharray="3 3" stroke="#f0f0f0" />
        <XAxis dataKey="date" tickFormatter={d => format(parseISO(d), 'dd MMM')} />
        <YAxis tickFormatter={v => `${(v/1000).toFixed(0)}k`} />
        <Tooltip content={<CustomTooltip />} />
        <Area
          type="monotone"
          dataKey="revenue"
          name="Дохід"
          stroke="#3b82f6"
          fill="url(#salesGradient)"
          strokeWidth={2}
        />
      </AreaChart>
    </ResponsiveContainer>
  );
}

Composed Chart (змішаний тип)

import { ComposedChart, Bar, Line, Scatter } from 'recharts';

function ComposedAnalytics({ data }) {
  return (
    <ResponsiveContainer width="100%" height={350}>
      <ComposedChart data={data}>
        <CartesianGrid strokeDasharray="3 3" />
        <XAxis dataKey="month" />
        <YAxis yAxisId="revenue" orientation="left" />
        <YAxis yAxisId="count" orientation="right" />
        <Tooltip />
        <Legend />

        <Bar yAxisId="revenue" dataKey="revenue" name="Дохід" fill="#93c5fd" />
        <Line yAxisId="count" dataKey="orders" name="Замовлення"
          type="monotone" stroke="#f59e0b" strokeWidth={2} dot={false} />
        <Scatter yAxisId="revenue" dataKey="bigOrders" name="Великі замовлення"
          fill="#ef4444" />
      </ComposedChart>
    </ResponsiveContainer>
  );
}

Користувацька форма для Bar

function RoundedBar(props) {
  const { x, y, width, height, fill } = props;
  const radius = 4;

  return (
    <path
      d={`M${x},${y + height}
         L${x},${y + radius}
         Q${x},${y} ${x + radius},${y}
         L${x + width - radius},${y}
         Q${x + width},${y} ${x + width},${y + radius}
         L${x + width},${y + height} Z`}
      fill={fill}
    />
  );
}

<Bar dataKey="value" shape={<RoundedBar />} />

Масштабування через ReferenceArea

function ZoomableChart({ data }) {
  const [refArea, setRefArea] = useState({ left: '', right: '' });
  const [zoomedData, setZoomedData] = useState(data);

  const zoom = () => {
    if (refArea.left === refArea.right) return;
    const filtered = data.filter(d =>
      d.date >= refArea.left && d.date <= refArea.right
    );
    setZoomedData(filtered);
    setRefArea({ left: '', right: '' });
  };

  return (
    <LineChart data={zoomedData}
      onMouseDown={e => setRefArea({ left: e.activeLabel, right: '' })}
      onMouseMove={e => refArea.left && setRefArea(prev => ({ ...prev, right: e.activeLabel }))}
      onMouseUp={zoom}>
      {/* ... */}
      {refArea.left && refArea.right && (
        <ReferenceArea x1={refArea.left} x2={refArea.right} strokeOpacity={0.3} />
      )}
    </LineChart>
  );
}

Часові межі

3–5 типів графіків із користувацькими підказками та інтерактивністю — 3–4 дні.