38 lines
1.7 KiB
TypeScript
38 lines
1.7 KiB
TypeScript
"use client";
|
|
|
|
import { LineChart, Line, XAxis, YAxis, CartesianGrid, Tooltip, ResponsiveContainer } from "recharts";
|
|
import { MONTH_NAMES } from "@/lib/data";
|
|
|
|
type Props = {
|
|
income: (number | null)[];
|
|
fixed: (number | null)[];
|
|
running: (number | null)[];
|
|
};
|
|
|
|
export function MachineLineChart({ income, fixed, running }: Props) {
|
|
const data = MONTH_NAMES.map((m, i) => ({
|
|
month: m,
|
|
income: income[i] ?? null,
|
|
fixed: fixed[i] ?? null,
|
|
running: running[i] ?? null,
|
|
}));
|
|
|
|
const fmt = (v: number) =>
|
|
new Intl.NumberFormat("en-ZA", { style: "currency", currency: "ZAR", maximumFractionDigits: 0, notation: "compact" }).format(v);
|
|
|
|
return (
|
|
<div className="h-44">
|
|
<ResponsiveContainer width="100%" height="100%">
|
|
<LineChart data={data} margin={{ top: 5, right: 10, left: 0, bottom: 0 }}>
|
|
<CartesianGrid stroke="#f3f4f6" strokeDasharray="3 3" vertical={false} />
|
|
<XAxis dataKey="month" stroke="#9ca3af" tick={{ fontSize: 10 }} tickLine={false} axisLine={false} />
|
|
<YAxis stroke="#9ca3af" tick={{ fontSize: 10 }} tickLine={false} axisLine={false} tickFormatter={fmt} width={60} />
|
|
<Tooltip formatter={(v: number) => fmt(v)} />
|
|
<Line type="monotone" dataKey="income" stroke="#00798C" strokeWidth={2.5} dot={{ r: 3, fill: "#00798C" }} connectNulls={false} />
|
|
<Line type="monotone" dataKey="fixed" stroke="#EDAE49" strokeWidth={2.5} dot={{ r: 3, fill: "#EDAE49" }} connectNulls={false} />
|
|
<Line type="monotone" dataKey="running" stroke="#D1495B" strokeWidth={2.5} dot={{ r: 3, fill: "#D1495B" }} connectNulls={false} />
|
|
</LineChart>
|
|
</ResponsiveContainer>
|
|
</div>
|
|
);
|
|
}
|