89 lines
2.4 KiB
TypeScript
89 lines
2.4 KiB
TypeScript
"use client";
|
|
|
|
import { Card, CardContent, CardHeader, CardTitle } from "@/components/ui/card";
|
|
import {
|
|
PieChart,
|
|
Pie,
|
|
Cell,
|
|
ResponsiveContainer,
|
|
Tooltip,
|
|
Legend
|
|
} from "recharts";
|
|
|
|
interface UserActivityChartProps {
|
|
activeUsers: number;
|
|
inactiveUsers: number;
|
|
}
|
|
|
|
export function UserActivityChart({ activeUsers, inactiveUsers }: UserActivityChartProps) {
|
|
const data = [
|
|
{
|
|
name: 'Utilisateurs actifs',
|
|
value: activeUsers,
|
|
color: '#000000' // Noir pour actifs
|
|
},
|
|
{
|
|
name: 'Utilisateurs inactifs',
|
|
value: inactiveUsers,
|
|
color: '#666666' // Gris pour inactifs
|
|
},
|
|
];
|
|
|
|
const total = activeUsers + 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 30 derniers jours
|
|
</p>
|
|
</CardHeader>
|
|
<CardContent>
|
|
<ResponsiveContainer width="100%" height={300}>
|
|
<PieChart>
|
|
<Pie
|
|
data={data}
|
|
cx="50%"
|
|
cy="50%"
|
|
innerRadius={60}
|
|
outerRadius={100}
|
|
paddingAngle={2}
|
|
dataKey="value"
|
|
stroke="#ffffff"
|
|
strokeWidth={2}
|
|
>
|
|
{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',
|
|
fontSize: '12px'
|
|
}}
|
|
formatter={(value: number) => [
|
|
`${value} utilisateurs (${((value / total) * 100).toFixed(1)}%)`,
|
|
'',
|
|
]}
|
|
/>
|
|
<Legend
|
|
wrapperStyle={{
|
|
paddingTop: "20px",
|
|
fontSize: "12px"
|
|
}}
|
|
formatter={(value, entry) => (
|
|
<span style={{ color: entry.color, fontWeight: 500 }}>
|
|
{value}: {entry.payload?.value} (
|
|
{((entry.payload?.value / total) * 100).toFixed(1)}%)
|
|
</span>
|
|
)}
|
|
/>
|
|
</PieChart>
|
|
</ResponsiveContainer>
|
|
</CardContent>
|
|
</Card>
|
|
);
|
|
} |