36 lines
1.4 KiB
TypeScript
36 lines
1.4 KiB
TypeScript
// web/src/components/charts/VariableAllocationDonut.tsx
|
|
import { PieChart, Pie, Cell, ResponsiveContainer, Tooltip, Legend } from "recharts";
|
|
|
|
export type VariableSlice = { name: string; value: number; isSavings: boolean };
|
|
|
|
export default function VariableAllocationDonut({ data }: { data: VariableSlice[] }) {
|
|
const total = data.reduce((s, d) => s + d.value, 0);
|
|
if (!data.length || total === 0) {
|
|
return (
|
|
<div className="card">
|
|
<h3 className="text-sm mb-2" style={{ color: "var(--color-sage)" }}>Variable Allocation</h3>
|
|
<div className="muted text-sm">No categories configured yet.</div>
|
|
</div>
|
|
);
|
|
}
|
|
|
|
const fillFor = (s: boolean) => (s ? "#165F46" : "#374151");
|
|
|
|
return (
|
|
<div className="card">
|
|
<h3 className="text-sm mb-2" style={{ color: "var(--color-sage)" }}>Variable Allocation</h3>
|
|
<div className="chart-md">
|
|
<ResponsiveContainer>
|
|
<PieChart>
|
|
<Pie data={data} dataKey="value" nameKey="name" innerRadius={70} outerRadius={100} stroke="#0B1020" strokeWidth={2}>
|
|
{data.map((d, i) => <Cell key={i} fill={fillFor(d.isSavings)} />)}
|
|
</Pie>
|
|
<Tooltip formatter={(v: number) => `${v}%`} contentStyle={{ background: "#111827", border: "1px solid #111827", borderRadius: 12, color: "#E7E3D7" }} />
|
|
<Legend verticalAlign="bottom" height={24} />
|
|
</PieChart>
|
|
</ResponsiveContainer>
|
|
</div>
|
|
</div>
|
|
);
|
|
}
|