frontend/src/components/RecoveryDetailedChart.jsx - master - keorlov/collsim

frontend/src/components/RecoveryDetailedChart.jsx

51 строка2 KB

Konstantin Orlov

wip

14 июл 2026, 12:10

14 июл 2026, 12:10c8f2d41

import {
  LineChart,
  Line,
  XAxis,
  YAxis,
  CartesianGrid,
  Tooltip,
  Legend,
  ResponsiveContainer,
} from "recharts";

const fmt = new Intl.NumberFormat("ru-RU", { maximumFractionDigits: 0 });

export default function RecoveryDetailedChart({ userMetrics }) {
  const data = (userMetrics || []).map((m) => ({
    day: m.day,
    recovered: m.recovered_today || 0,
    spent: m.daily_budget_spent || 0,
  }));

  let cumRec = 0, cumSpt = 0;
  const cumData = data.map((d) => {
    cumRec += d.recovered;
    cumSpt += d.spent;
    return {
      day: d.day,
      cumRecovered: cumRec,
      cumSpent: cumSpt,
      cumNet: cumRec - cumSpt,
    };
  });

  return (
    <ResponsiveContainer width="100%" height={320}>
      <LineChart data={cumData} margin={{ top: 10, right: 24, bottom: 8, left: 8 }}>
        <CartesianGrid strokeDasharray="3 3" stroke="#1f2937" opacity={0.4} />
        <XAxis dataKey="day" stroke="#94a3b8" label={{ value: "День", position: "insideBottom", offset: -2 }} />
        <YAxis stroke="#94a3b8" tickFormatter={(v) => v >= 1e6 ? (v/1e6).toFixed(1)+"M" : v>=1e3 ? Math.round(v/1e3)+"k" : v} />
        <Tooltip
          formatter={(v) => fmt.format(v) + " ₽"}
          labelFormatter={(l) => `День ${l}`}
          contentStyle={{ background: "#0f172a", border: "1px solid #334155" }}
        />
        <Legend />
        <Line type="monotone" dataKey="cumRecovered" name="Накопл. взыскание" stroke="#3b82f6" dot={false} strokeWidth={2} connectNulls />
        <Line type="monotone" dataKey="cumSpent" name="Накопл. затраты" stroke="#f59e0b" dot={false} strokeWidth={2} connectNulls />
        <Line type="monotone" dataKey="cumNet" name="Накопл. итог" stroke="#22c55e" dot={false} strokeWidth={2} connectNulls />
      </LineChart>
    </ResponsiveContainer>
  );
}