122 lines
2.5 KiB
TypeScript
122 lines
2.5 KiB
TypeScript
'use client';
|
|
|
|
import {
|
|
BarChart,
|
|
Bar,
|
|
XAxis,
|
|
YAxis,
|
|
CartesianGrid,
|
|
Tooltip,
|
|
ResponsiveContainer,
|
|
PieChart,
|
|
Pie,
|
|
Cell,
|
|
Legend,
|
|
} from 'recharts';
|
|
|
|
const COLORS = [
|
|
'#0d9488',
|
|
'#14b8a6',
|
|
'#2dd4bf',
|
|
'#5eead4',
|
|
'#99f6e4',
|
|
'#ccfbf1',
|
|
];
|
|
|
|
interface BarChartData {
|
|
name: string;
|
|
value: number;
|
|
}
|
|
|
|
interface PieChartData {
|
|
name: string;
|
|
value: number;
|
|
}
|
|
|
|
export function StatsBarChart({
|
|
data,
|
|
title,
|
|
}: {
|
|
data: BarChartData[];
|
|
title?: string;
|
|
}) {
|
|
if (data.length === 0 || data.every((d) => d.value === 0)) {
|
|
return (
|
|
<div className="text-muted-foreground flex h-64 items-center justify-center text-sm">
|
|
Noch keine Daten vorhanden
|
|
</div>
|
|
);
|
|
}
|
|
|
|
return (
|
|
<div className="h-64">
|
|
{title && (
|
|
<p className="text-muted-foreground mb-2 text-sm font-medium">
|
|
{title}
|
|
</p>
|
|
)}
|
|
<ResponsiveContainer width="100%" height="100%">
|
|
<BarChart data={data}>
|
|
<CartesianGrid strokeDasharray="3 3" className="stroke-muted" />
|
|
<XAxis dataKey="name" className="text-xs" />
|
|
<YAxis className="text-xs" />
|
|
<Tooltip />
|
|
<Bar
|
|
dataKey="value"
|
|
fill="var(--primary, #0d9488)"
|
|
radius={[4, 4, 0, 0]}
|
|
/>
|
|
</BarChart>
|
|
</ResponsiveContainer>
|
|
</div>
|
|
);
|
|
}
|
|
|
|
export function StatsPieChart({
|
|
data,
|
|
title,
|
|
}: {
|
|
data: PieChartData[];
|
|
title?: string;
|
|
}) {
|
|
const filtered = data.filter((d) => d.value > 0);
|
|
if (filtered.length === 0) {
|
|
return (
|
|
<div className="text-muted-foreground flex h-64 items-center justify-center text-sm">
|
|
Noch keine Daten vorhanden
|
|
</div>
|
|
);
|
|
}
|
|
|
|
return (
|
|
<div className="h-64">
|
|
{title && (
|
|
<p className="text-muted-foreground mb-2 text-sm font-medium">
|
|
{title}
|
|
</p>
|
|
)}
|
|
<ResponsiveContainer width="100%" height="100%">
|
|
<PieChart>
|
|
<Pie
|
|
data={filtered}
|
|
cx="50%"
|
|
cy="50%"
|
|
innerRadius={50}
|
|
outerRadius={80}
|
|
dataKey="value"
|
|
label={({ name, percent }) =>
|
|
`${name} (${((percent ?? 0) * 100).toFixed(0)}%)`
|
|
}
|
|
>
|
|
{filtered.map((_, i) => (
|
|
<Cell key={`cell-${i}`} fill={COLORS[i % COLORS.length]} />
|
|
))}
|
|
</Pie>
|
|
<Legend />
|
|
<Tooltip />
|
|
</PieChart>
|
|
</ResponsiveContainer>
|
|
</div>
|
|
);
|
|
}
|