clean

components/dashboard/charts/model-distribution-chart.tsx

@@ -41,11 +41,6 @@ interface TooltipPayload {
   };
 }
 
-interface CustomTooltipProps {
-  active?: boolean;
-  payload?: TooltipPayload[];
-}
-
 // Couleurs par fournisseur selon l'image
 const providerColors: { [key: string]: string } = {
   Anthropic: "#7C3AED", // Violet vif
@@ -114,7 +109,37 @@ const groupByProvider = (modelData: Array<{ name: string; value: number }>) => {
   }));
 };
 
-const CustomTooltip = () => {
+const CustomTooltip = ({
+  active,
+  payload,
+}: {
+  active?: boolean;
+  payload?: TooltipPayload[];
+}) => {
+  if (active && payload && payload.length) {
+    const data = payload[0].payload;
+    return (
+      <div className="bg-white p-3 border rounded-lg shadow-lg">
+        <p className="font-semibold">{data.name}</p>
+        <p className="text-blue-600">Tokens: {data.value.toLocaleString()}</p>
+        {data.models && data.models.length > 0 && (
+          <div className="mt-2 space-y-1">
+            <p className="text-sm font-medium text-gray-600">Modèles:</p>
+            {data.models.slice(0, 5).map((model, index) => (
+              <p key={index} className="text-xs text-gray-500">
+                • {model.name}: {model.value.toLocaleString()}
+              </p>
+            ))}
+            {data.models.length > 5 && (
+              <p className="text-xs text-gray-400">
+                ... et {data.models.length - 5} autres
+              </p>
+            )}
+          </div>
+        )}
+      </div>
+    );
+  }
   return null;
 };
 
@@ -129,12 +154,13 @@ export function ModelDistributionChart({
   const groupedData = data[0]?.models ? data : groupByProvider(data);
 
   // Créer une liste de tous les modèles avec leurs couleurs
-  const allModels = groupedData.flatMap((provider) => 
-    provider.models?.map((model) => ({
-      name: model.name,
-      color: provider.color,
-      value: model.value
-    })) || []
+  const allModels = groupedData.flatMap(
+    (provider) =>
+      provider.models?.map((model) => ({
+        name: model.name,
+        color: provider.color,
+        value: model.value,
+      })) || []
   );
 
   return (
@@ -238,16 +264,16 @@ export function ModelDistributionChart({
               {allModels
                 .sort((a, b) => b.value - a.value) // Trier par usage décroissant
                 .map((model, index) => (
-                <div key={index} className="flex items-center gap-2">
-                  <div
-                    className="w-3 h-3 rounded-full flex-shrink-0"
-                    style={{ backgroundColor: model.color }}
-                  ></div>
-                  <span className="text-xs text-muted-foreground">
-                    {model.name}
-                  </span>
-                </div>
-              ))}
+                  <div key={index} className="flex items-center gap-2">
+                    <div
+                      className="w-3 h-3 rounded-full flex-shrink-0"
+                      style={{ backgroundColor: model.color }}
+                    ></div>
+                    <span className="text-xs text-muted-foreground">
+                      {model.name}
+                    </span>
+                  </div>
+                ))}
             </div>
           </div>
         )}