new

components/dashboard/charts/real-user-activity-chart.tsx

@@ -44,12 +44,12 @@ export function RealUserActivityChart() {
     {
       name: "Utilisateurs actifs",
       value: activity.activeUsers,
-      color: "#22c55e", // Vert clair pour actifs
+      color: "#000000", // Noir pour actifs
     },
     {
       name: "Utilisateurs inactifs",
       value: activity.inactiveUsers,
-      color: "#ef4444", // Rouge pour inactifs
+      color: "#666666", // Gris pour inactifs
     },
   ];
 
@@ -62,7 +62,7 @@ export function RealUserActivityChart() {
           Activité des utilisateurs
         </CardTitle>
         <p className="text-sm text-muted-foreground">
-          Actifs = connectés dans les 7 derniers jours
+          Actifs = connectés dans les 30 derniers jours
         </p>
       </CardHeader>
       <CardContent>
@@ -74,8 +74,10 @@ export function RealUserActivityChart() {
               cy="50%"
               innerRadius={60}
               outerRadius={100}
-              paddingAngle={5}
+              paddingAngle={2}
               dataKey="value"
+              stroke="#ffffff"
+              strokeWidth={2}
             >
               {data.map((entry, index) => (
                 <Cell key={`cell-${index}`} fill={entry.color} />
@@ -86,17 +88,20 @@ export function RealUserActivityChart() {
                 backgroundColor: "hsl(var(--background))",
                 border: "1px solid hsl(var(--border))",
                 borderRadius: "8px",
+                fontSize: "12px"
               }}
               formatter={(value: number) => [
-                `${value} utilisateurs (${((value / total) * 100).toFixed(
-                  1
-                )}%)`,
+                `${value} utilisateurs (${((value / total) * 100).toFixed(1)}%)`,
                 "",
               ]}
             />
             <Legend
+              wrapperStyle={{
+                paddingTop: "20px",
+                fontSize: "12px"
+              }}
               formatter={(value, entry) => (
-                <span style={{ color: entry.color }}>
+                <span style={{ color: entry.color, fontWeight: 500 }}>
                   {value}: {entry.payload?.value} (
                   {((entry.payload?.value / total) * 100).toFixed(1)}%)
                 </span>