/
keorlov
/
collsim
Обзор
Документация
Войти
/
keorlov
/
collsim
Код
Запросы
0
Задачи
Вики
Пакеты
0
Релизы
0
CI/CD
Аналитика
Безопасность
master
frontend/src/components/RollRateChart.jsx
39 строк
2 KB
Konstantin Orlov
wip
14 июл 2026, 12:10
14 июл 2026, 12:10
c8f2d41
Код
Авторство
О чём код?
import { AreaChart, Area, XAxis, YAxis, CartesianGrid, Tooltip, Legend, ResponsiveContainer, } from "recharts"; export default function RollRateChart({ userMetrics }) { const data = (userMetrics || []).map((m) => ({ day: m.day, dpd1_30: m.dpd_1_30_count ?? 0, dpd31_60: m.dpd_31_60_count ?? 0, dpd61_89: m.dpd_61_89_count ?? 0, dpd90plus: m.hard_count ?? 0, })); return ( <ResponsiveContainer width="100%" height={320}> <AreaChart data={data} 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" /> <Tooltip labelFormatter={(l) => `День ${l}`} contentStyle={{ background: "#0f172a", border: "1px solid #334155" }} /> <Legend /> <Area type="monotone" dataKey="dpd1_30" name="DPD 1–30" stackId="1" stroke="#fbbf24" fill="#fbbf24" fillOpacity={0.4} /> <Area type="monotone" dataKey="dpd31_60" name="DPD 31–60" stackId="1" stroke="#f59e0b" fill="#f59e0b" fillOpacity={0.4} /> <Area type="monotone" dataKey="dpd61_89" name="DPD 61–89" stackId="1" stroke="#ef4444" fill="#ef4444" fillOpacity={0.4} /> <Area type="monotone" dataKey="dpd90plus" name="DPD 90+" stackId="1" stroke="#991b1b" fill="#991b1b" fillOpacity={0.4} /> </AreaChart> </ResponsiveContainer> ); }