43 lines
1.9 KiB
TypeScript
43 lines
1.9 KiB
TypeScript
"use client";
|
|
|
|
import { BarChart, Bar, LineChart, Line, XAxis, YAxis, Tooltip, ResponsiveContainer, CartesianGrid } from "recharts";
|
|
|
|
interface Props {
|
|
inventoryData: { name: string; quantity: number }[];
|
|
consumptionData: { date: string; qty: number }[];
|
|
}
|
|
|
|
export function SiteCharts({ inventoryData, consumptionData }: Props) {
|
|
return (
|
|
<div className="grid grid-cols-2 gap-4">
|
|
{inventoryData.length > 0 && (
|
|
<div className="rounded-lg border border-neutral-200 bg-white p-5">
|
|
<p className="text-sm font-semibold text-neutral-900 mb-4">Inventory Levels</p>
|
|
<ResponsiveContainer width="100%" height={220}>
|
|
<BarChart data={inventoryData} layout="vertical" margin={{ left: 8, right: 16 }}>
|
|
<CartesianGrid strokeDasharray="3 3" horizontal={false} />
|
|
<XAxis type="number" tick={{ fontSize: 11 }} />
|
|
<YAxis type="category" dataKey="name" width={130} tick={{ fontSize: 11 }} />
|
|
<Tooltip formatter={(v) => [v, "Qty"]} />
|
|
<Bar dataKey="quantity" fill="#2563eb" radius={[0, 3, 3, 0]} />
|
|
</BarChart>
|
|
</ResponsiveContainer>
|
|
</div>
|
|
)}
|
|
{consumptionData.length > 0 && (
|
|
<div className="rounded-lg border border-neutral-200 bg-white p-5">
|
|
<p className="text-sm font-semibold text-neutral-900 mb-4">Daily Consumption (30 days)</p>
|
|
<ResponsiveContainer width="100%" height={220}>
|
|
<LineChart data={consumptionData} margin={{ left: 0, right: 16 }}>
|
|
<CartesianGrid strokeDasharray="3 3" />
|
|
<XAxis dataKey="date" tick={{ fontSize: 10 }} interval="preserveStartEnd" />
|
|
<YAxis tick={{ fontSize: 11 }} />
|
|
<Tooltip />
|
|
<Line type="monotone" dataKey="qty" stroke="#16a34a" strokeWidth={2} dot={false} name="Units consumed" />
|
|
</LineChart>
|
|
</ResponsiveContainer>
|
|
</div>
|
|
)}
|
|
</div>
|
|
);
|
|
}
|