33 lines
1.3 KiB
TypeScript
33 lines
1.3 KiB
TypeScript
"use client";
|
|
import {
|
|
AreaChart, Area, XAxis, YAxis, Tooltip, ResponsiveContainer, CartesianGrid,
|
|
} from "recharts";
|
|
|
|
const DOW = ["Sun", "Mon", "Tue", "Wed", "Thu", "Fri", "Sat"];
|
|
|
|
export default function ScanTrendChart({ data }: { data: { date: string; scans: number }[] }) {
|
|
const chart = data.map((d) => ({
|
|
label: DOW[new Date(d.date).getDay()],
|
|
scans: d.scans,
|
|
}));
|
|
return (
|
|
<ResponsiveContainer width="100%" height={230}>
|
|
<AreaChart data={chart} margin={{ top: 10, right: 10, left: -20, bottom: 0 }}>
|
|
<defs>
|
|
<linearGradient id="scanFill" x1="0" y1="0" x2="0" y2="1">
|
|
<stop offset="0%" stopColor="#3b82f6" stopOpacity={0.35} />
|
|
<stop offset="100%" stopColor="#3b82f6" stopOpacity={0} />
|
|
</linearGradient>
|
|
</defs>
|
|
<CartesianGrid strokeDasharray="3 3" stroke="#eef2f7" vertical={false} />
|
|
<XAxis dataKey="label" tickLine={false} axisLine={false}
|
|
tick={{ fontSize: 12, fill: "#94a3b8" }} />
|
|
<YAxis tickLine={false} axisLine={false} tick={{ fontSize: 12, fill: "#94a3b8" }} />
|
|
<Tooltip />
|
|
<Area type="monotone" dataKey="scans" stroke="#2563eb" strokeWidth={2.5}
|
|
fill="url(#scanFill)" dot={{ r: 3, fill: "#2563eb" }} />
|
|
</AreaChart>
|
|
</ResponsiveContainer>
|
|
);
|
|
}
|