52 lines
1.4 KiB
TypeScript
52 lines
1.4 KiB
TypeScript
"use client";
|
|
|
|
import React from "react";
|
|
import { Bar, BarChart, ResponsiveContainer, XAxis, YAxis, Tooltip, CartesianGrid } from "recharts";
|
|
|
|
interface OverviewChartProps {
|
|
data: { name: string; total: number }[];
|
|
}
|
|
|
|
export function OverviewChart({ data }: OverviewChartProps) {
|
|
const [mounted, setMounted] = React.useState(false);
|
|
|
|
React.useEffect(() => {
|
|
setMounted(true);
|
|
}, []);
|
|
|
|
if (!mounted) return <div className="h-[350px] w-full bg-muted/10 animate-pulse rounded-lg" />;
|
|
|
|
return (
|
|
<ResponsiveContainer width="100%" height={350}>
|
|
<BarChart data={data}>
|
|
<CartesianGrid strokeDasharray="3 3" vertical={false} stroke="rgba(255,255,255,0.05)" />
|
|
<XAxis
|
|
dataKey="name"
|
|
stroke="#888888"
|
|
fontSize={12}
|
|
tickLine={false}
|
|
axisLine={false}
|
|
/>
|
|
<YAxis
|
|
stroke="#888888"
|
|
fontSize={12}
|
|
tickLine={false}
|
|
axisLine={false}
|
|
tickFormatter={(value) => `${value}`}
|
|
/>
|
|
<Tooltip
|
|
contentStyle={{ backgroundColor: "#1A1814", border: "1px solid #2A261E", borderRadius: "8px" }}
|
|
itemStyle={{ color: "#D4891A" }}
|
|
cursor={{ fill: "rgba(212, 137, 26, 0.05)" }}
|
|
/>
|
|
<Bar
|
|
dataKey="total"
|
|
fill="currentColor"
|
|
radius={[4, 4, 0, 0]}
|
|
className="fill-primary"
|
|
/>
|
|
</BarChart>
|
|
</ResponsiveContainer>
|
|
);
|
|
}
|