/
keorlov
/
collsim
Обзор
Документация
Войти
/
keorlov
/
collsim
Код
Запросы
0
Задачи
Вики
Пакеты
0
Релизы
0
CI/CD
Аналитика
Безопасность
master
frontend/src/components/FlowChart.jsx
40 строк
1 KB
Konstantin Orlov
wip
14 июл 2026, 12:10
14 июл 2026, 12:10
c8f2d41
Код
Авторство
О чём код?
import { ComposedChart, Bar, Line, XAxis, YAxis, CartesianGrid, Tooltip, Legend, ResponsiveContainer, } from "recharts"; export default function FlowChart({ userMetrics }) { const data = (userMetrics || []).map((m) => ({ day: m.day, inflowSoft: m.inflow_soft ?? 0, outflowCured: m.outflow_cured ?? 0, outflowHard: m.outflow_hard ?? 0, netFlow: (m.inflow_soft ?? 0) - (m.outflow_cured ?? 0) - (m.outflow_hard ?? 0), })); return ( <ResponsiveContainer width="100%" height={320}> <ComposedChart 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 /> <Bar dataKey="inflowSoft" name="Вход в просрочку" fill="#ef4444" radius={[2, 2, 0, 0]} /> <Bar dataKey="outflowCured" name="Cure (излечение)" fill="#22c55e" radius={[2, 2, 0, 0]} /> <Bar dataKey="outflowHard" name="Уход в hard" fill="#f59e0b" radius={[2, 2, 0, 0]} /> <Line type="monotone" dataKey="netFlow" name="Чистый приток" stroke="#60a5fa" dot={false} strokeWidth={2} /> </ComposedChart> </ResponsiveContainer> ); }