32 lines
1.0 KiB
TypeScript
32 lines
1.0 KiB
TypeScript
"use client";
|
|
|
|
import { LineChart, Line, XAxis, YAxis, Tooltip, ResponsiveContainer, Legend } from "recharts";
|
|
|
|
type Point = { t: string } & Record<string, number>;
|
|
|
|
function fmtBps(v: number) {
|
|
const units = ["bps","Kbps","Mbps","Gbps"];
|
|
let val = v, i = 0;
|
|
while (val >= 1000 && i < units.length-1) { val /= 1000; i++; }
|
|
const digits = val < 10 && i > 0 ? 2 : 0;
|
|
return `${val.toFixed(digits)} ${units[i]}`;
|
|
}
|
|
|
|
export default function TrafficChart({ data, series }: { data: Point[]; series: string[] }) {
|
|
return (
|
|
<div className="h-64 w-full">
|
|
<ResponsiveContainer width="100%" height="100%">
|
|
<LineChart data={data}>
|
|
<XAxis dataKey="t" tick={{ fontSize: 12 }} />
|
|
<YAxis tick={{ fontSize: 12 }} tickFormatter={(v)=>fmtBps(Number(v))} />
|
|
<Tooltip formatter={(v:any)=>fmtBps(Number(v))} />
|
|
<Legend />
|
|
{series.map((s) => (
|
|
<Line key={s} type="monotone" dataKey={s} dot={false} strokeWidth={2} />
|
|
))}
|
|
</LineChart>
|
|
</ResponsiveContainer>
|
|
</div>
|
|
);
|
|
}
|