62 lines
1.6 KiB
TypeScript
62 lines
1.6 KiB
TypeScript
"use client";
|
|
|
|
import { Card, CardContent, CardHeader, CardTitle } from "@/components/ui/card";
|
|
import {
|
|
BarChart,
|
|
Bar,
|
|
XAxis,
|
|
YAxis,
|
|
CartesianGrid,
|
|
Tooltip,
|
|
ResponsiveContainer
|
|
} from "recharts";
|
|
|
|
interface SimpleBarChartProps {
|
|
title: string;
|
|
data: Array<{
|
|
name: string;
|
|
value: number;
|
|
}>;
|
|
color?: string;
|
|
}
|
|
|
|
export function SimpleBarChart({ title, data, color = "hsl(var(--primary))" }: SimpleBarChartProps) {
|
|
return (
|
|
<Card>
|
|
<CardHeader className="pb-2">
|
|
<CardTitle className="text-sm font-medium text-muted-foreground">{title}</CardTitle>
|
|
</CardHeader>
|
|
<CardContent className="pt-0">
|
|
<ResponsiveContainer width="100%" height={200}>
|
|
<BarChart data={data}>
|
|
<CartesianGrid strokeDasharray="3 3" className="stroke-muted/20" />
|
|
<XAxis
|
|
dataKey="name"
|
|
axisLine={false}
|
|
tickLine={false}
|
|
className="text-xs fill-muted-foreground"
|
|
/>
|
|
<YAxis
|
|
axisLine={false}
|
|
tickLine={false}
|
|
className="text-xs fill-muted-foreground"
|
|
/>
|
|
<Tooltip
|
|
contentStyle={{
|
|
backgroundColor: 'hsl(var(--background))',
|
|
border: '1px solid hsl(var(--border))',
|
|
borderRadius: '8px',
|
|
fontSize: '12px'
|
|
}}
|
|
/>
|
|
<Bar
|
|
dataKey="value"
|
|
fill={color}
|
|
radius={[4, 4, 0, 0]}
|
|
/>
|
|
</BarChart>
|
|
</ResponsiveContainer>
|
|
</CardContent>
|
|
</Card>
|
|
);
|
|
} |