applicatif 3M, user, chart

components/dashboard/charts/user-connections-chart.tsx

@@ -0,0 +1,80 @@
+"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>
+  );
+}