111 lines
2.9 KiB
TypeScript
111 lines
2.9 KiB
TypeScript
"use client";
|
|
|
|
import { Card, CardContent, CardHeader, CardTitle } from "@/components/ui/card";
|
|
import {
|
|
PieChart,
|
|
Pie,
|
|
Cell,
|
|
ResponsiveContainer,
|
|
Tooltip,
|
|
Legend,
|
|
} from "recharts";
|
|
import { useUserActivity } from "@/hooks/useUserActivity";
|
|
import { AlertCircle } from "lucide-react";
|
|
|
|
export function RealUserActivityChart() {
|
|
const { activity, loading, error } = useUserActivity();
|
|
|
|
if (loading) {
|
|
return (
|
|
<Card>
|
|
<CardContent className="flex items-center justify-center h-64">
|
|
<div className="h-64 bg-muted animate-pulse rounded-lg w-full" />
|
|
</CardContent>
|
|
</Card>
|
|
);
|
|
}
|
|
|
|
if (error || !activity) {
|
|
return (
|
|
<Card>
|
|
<CardContent className="flex items-center justify-center h-64">
|
|
<div className="text-center">
|
|
<AlertCircle className="h-8 w-8 text-destructive mx-auto mb-2" />
|
|
<p className="text-sm text-muted-foreground">
|
|
Erreur lors du chargement
|
|
</p>
|
|
</div>
|
|
</CardContent>
|
|
</Card>
|
|
);
|
|
}
|
|
|
|
const data = [
|
|
{
|
|
name: "Utilisateurs actifs",
|
|
value: activity.activeUsers,
|
|
color: "#22c55e", // Vert clair pour actifs
|
|
},
|
|
{
|
|
name: "Utilisateurs inactifs",
|
|
value: activity.inactiveUsers,
|
|
color: "#ef4444", // Rouge pour inactifs
|
|
},
|
|
];
|
|
|
|
const total = activity.activeUsers + activity.inactiveUsers;
|
|
|
|
return (
|
|
<Card>
|
|
<CardHeader>
|
|
<CardTitle className="text-base font-medium">
|
|
Activité des utilisateurs
|
|
</CardTitle>
|
|
<p className="text-sm text-muted-foreground">
|
|
Actifs = connectés dans les 7 derniers jours
|
|
</p>
|
|
</CardHeader>
|
|
<CardContent>
|
|
<ResponsiveContainer width="100%" height={300}>
|
|
<PieChart>
|
|
<Pie
|
|
data={data}
|
|
cx="50%"
|
|
cy="50%"
|
|
innerRadius={60}
|
|
outerRadius={100}
|
|
paddingAngle={5}
|
|
dataKey="value"
|
|
>
|
|
{data.map((entry, index) => (
|
|
<Cell key={`cell-${index}`} fill={entry.color} />
|
|
))}
|
|
</Pie>
|
|
<Tooltip
|
|
contentStyle={{
|
|
backgroundColor: "hsl(var(--background))",
|
|
border: "1px solid hsl(var(--border))",
|
|
borderRadius: "8px",
|
|
}}
|
|
formatter={(value: number) => [
|
|
`${value} utilisateurs (${((value / total) * 100).toFixed(
|
|
1
|
|
)}%)`,
|
|
"",
|
|
]}
|
|
/>
|
|
<Legend
|
|
formatter={(value, entry) => (
|
|
<span style={{ color: entry.color }}>
|
|
{value}: {entry.payload?.value} (
|
|
{((entry.payload?.value / total) * 100).toFixed(1)}%)
|
|
</span>
|
|
)}
|
|
/>
|
|
</PieChart>
|
|
</ResponsiveContainer>
|
|
</CardContent>
|
|
</Card>
|
|
);
|
|
}
|