80 lines
2.4 KiB
TypeScript
80 lines
2.4 KiB
TypeScript
"use client";
|
|
|
|
import { Card, CardContent, CardHeader, CardTitle } from "@/components/ui/card";
|
|
import {
|
|
AreaChart,
|
|
Area,
|
|
XAxis,
|
|
YAxis,
|
|
CartesianGrid,
|
|
Tooltip,
|
|
ResponsiveContainer
|
|
} from "recharts";
|
|
|
|
interface UserConnectionsChartProps {
|
|
title: string;
|
|
data: Array<{
|
|
name: string;
|
|
value: number;
|
|
}>;
|
|
color?: string;
|
|
}
|
|
|
|
export function UserConnectionsChart({ title, data, color = "hsl(var(--chart-2))" }: UserConnectionsChartProps) {
|
|
console.log("UserConnectionsChart - data:", data);
|
|
console.log("UserConnectionsChart - title:", title);
|
|
|
|
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}>
|
|
<AreaChart data={data}>
|
|
<defs>
|
|
<linearGradient id="connectionsGradient" x1="0" y1="0" x2="0" y2="1">
|
|
<stop offset="5%" stopColor={color} stopOpacity={0.8}/>
|
|
<stop offset="95%" stopColor={color} stopOpacity={0.2}/>
|
|
</linearGradient>
|
|
</defs>
|
|
<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"
|
|
tickFormatter={(value) => {
|
|
return value.toString();
|
|
}}
|
|
/>
|
|
<Tooltip
|
|
contentStyle={{
|
|
backgroundColor: 'hsl(var(--background))',
|
|
border: '1px solid hsl(var(--border))',
|
|
borderRadius: '8px',
|
|
fontSize: '12px'
|
|
}}
|
|
formatter={(value: number) => [
|
|
`${value} utilisateur${value > 1 ? 's' : ''}`,
|
|
'Connexions'
|
|
]}
|
|
/>
|
|
<Area
|
|
type="monotone"
|
|
dataKey="value"
|
|
stroke={color}
|
|
strokeWidth={3}
|
|
fill="url(#connectionsGradient)"
|
|
/>
|
|
</AreaChart>
|
|
</ResponsiveContainer>
|
|
</CardContent>
|
|
</Card>
|
|
);
|
|
} |