clean

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

@@ -9,7 +9,6 @@ import {
   CartesianGrid,
   Tooltip,
   ResponsiveContainer,
-  Cell,
 } from "recharts";
 
 interface ModelDistributionChartProps {
@@ -28,20 +27,27 @@ interface ModelDistributionChartProps {
   totalTokens?: number;
 }
 
-interface TooltipPayload {
+interface ModelData {
+  name: string;
   value: number;
-  payload: {
-    name: string;
-    value: number;
-    color?: string;
-    models?: Array<{
-      name: string;
-      value: number;
-    }>;
-  };
 }
 
-// Couleurs par fournisseur selon l'image
+interface StackedDataEntry {
+  provider: string;
+  total: number;
+  models: ModelData[];
+  baseColor: string;
+  modelColors: string[];
+  [key: string]: string | number | ModelData[] | string[];
+}
+
+interface ModelInfo {
+  color: string;
+  name: string;
+  provider: string;
+}
+
+// Couleurs par fournisseur (couleurs de base)
 const providerColors: { [key: string]: string } = {
   Anthropic: "#7C3AED", // Violet vif
   OpenAI: "#059669", // Vert turquoise vif
@@ -51,8 +57,25 @@ const providerColors: { [key: string]: string } = {
   Cohere: "#0891B2", // Cyan vif
 };
 
-// Fonction pour regrouper les modèles par fournisseur
-const groupByProvider = (modelData: Array<{ name: string; value: number }>) => {
+// Fonction pour générer des variations de couleur pour les modèles d'un même provider
+const generateModelColors = (baseColor: string, modelCount: number) => {
+  const colors = [];
+  for (let i = 0; i < modelCount; i++) {
+    // Créer des variations en ajustant la luminosité
+    const opacity = 1 - i * 0.15; // De 1.0 à 0.4 environ
+    colors.push(
+      `${baseColor}${Math.round(opacity * 255)
+        .toString(16)
+        .padStart(2, "0")}`
+    );
+  }
+  return colors;
+};
+
+// Fonction pour regrouper les modèles par fournisseur et préparer les données pour le graphique empilé
+const prepareStackedData = (
+  modelData: Array<{ name: string; value: number }>
+) => {
   const providerMap: {
     [key: string]: {
       value: number;
@@ -101,40 +124,89 @@ const groupByProvider = (modelData: Array<{ name: string; value: number }>) => {
     providerMap[provider].models.push(model);
   });
 
-  return Object.entries(providerMap).map(([name, data]) => ({
-    name,
-    value: data.value,
-    models: data.models,
-    color: providerColors[name] || "#6B7280",
-  }));
+  // Créer les données pour le graphique empilé
+  const stackedData: StackedDataEntry[] = Object.entries(providerMap).map(
+    ([providerName, data]) => {
+      const baseColor = providerColors[providerName] || "#6B7280";
+      const modelColors = generateModelColors(baseColor, data.models.length);
+
+      // Créer un objet avec le provider comme clé et chaque modèle comme propriété
+      const stackedEntry: StackedDataEntry = {
+        provider: providerName,
+        total: data.value,
+        models: data.models,
+        baseColor,
+        modelColors,
+      };
+
+      // Ajouter chaque modèle comme propriété séparée pour le stacking
+      data.models.forEach((model, index) => {
+        const modelKey = `${providerName}_${model.name}`;
+        stackedEntry[modelKey] = model.value;
+        stackedEntry[`${modelKey}_color`] = modelColors[index];
+        stackedEntry[`${modelKey}_name`] = model.name;
+      });
+
+      return stackedEntry;
+    }
+  );
+
+  // Créer la liste de tous les modèles uniques pour les barres
+  const allModelKeys: string[] = [];
+  const modelInfo: { [key: string]: ModelInfo } = {};
+
+  stackedData.forEach((entry) => {
+    entry.models.forEach((model, index) => {
+      const modelKey = `${entry.provider}_${model.name}`;
+      allModelKeys.push(modelKey);
+      modelInfo[modelKey] = {
+        color: entry.modelColors[index],
+        name: model.name,
+        provider: entry.provider,
+      };
+    });
+  });
+
+  return { stackedData, allModelKeys, modelInfo };
 };
 
-const CustomTooltip = ({
+interface CustomStackedTooltipProps {
+  active?: boolean;
+  payload?: Array<{
+    payload: StackedDataEntry;
+  }>;
+  label?: string;
+}
+
+const CustomStackedTooltip = ({
   active,
   payload,
-}: {
-  active?: boolean;
-  payload?: TooltipPayload[];
-}) => {
+  label,
+}: CustomStackedTooltipProps) => {
   if (active && payload && payload.length) {
-    const data = payload[0].payload;
+    const providerData = payload[0].payload;
+    const totalTokens = providerData.total;
+
     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 && (
+        <p className="font-semibold">{label}</p>
+        <p className="text-blue-600 font-medium">
+          Total: {totalTokens.toLocaleString()} tokens
+        </p>
+        {providerData.models && (
           <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>
+            {providerData.models.map((model, index) => (
+              <div key={index} className="flex items-center gap-2">
+                <div
+                  className="w-3 h-3 rounded-full"
+                  style={{ backgroundColor: providerData.modelColors[index] }}
+                />
+                <p className="text-xs text-gray-700">
+                  {model.name}: {model.value.toLocaleString()} tokens
+                </p>
+              </div>
             ))}
-            {data.models.length > 5 && (
-              <p className="text-xs text-gray-400">
-                ... et {data.models.length - 5} autres
-              </p>
-            )}
           </div>
         )}
       </div>
@@ -151,17 +223,11 @@ export function ModelDistributionChart({
 }: ModelDistributionChartProps) {
   // Si les données sont déjà groupées par fournisseur, les utiliser directement
   // Sinon, les regrouper automatiquement
-  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 modelData = data[0]?.models
+    ? data.flatMap((d) => d.models || [])
+    : data;
+  const { stackedData, allModelKeys, modelInfo } =
+    prepareStackedData(modelData);
 
   return (
     <Card>
@@ -174,20 +240,20 @@ export function ModelDistributionChart({
         )}
       </CardHeader>
       <CardContent className="pt-0">
-        <ResponsiveContainer width="100%" height={200}>
+        <ResponsiveContainer width="100%" height={300}>
           <BarChart
-            data={groupedData}
-            margin={{ top: 10, right: 10, left: 10, bottom: 10 }}
+            data={stackedData}
+            margin={{ top: 10, right: 10, left: 10, bottom: 60 }}
           >
             <CartesianGrid strokeDasharray="3 3" className="stroke-muted/20" />
             <XAxis
-              dataKey="name"
+              dataKey="provider"
               axisLine={false}
               tickLine={false}
               className="text-xs fill-muted-foreground"
               angle={-45}
               textAnchor="end"
-              height={60}
+              height={80}
               interval={0}
             />
             <YAxis
@@ -200,23 +266,29 @@ export function ModelDistributionChart({
                 return value.toString();
               }}
             />
-            <Tooltip content={<CustomTooltip />} />
-            <Bar dataKey="value" radius={[2, 2, 0, 0]}>
-              {groupedData.map((entry, index) => (
-                <Cell key={`cell-${index}`} fill={entry.color} />
-              ))}
-            </Bar>
+            <Tooltip content={<CustomStackedTooltip />} />
+
+            {/* Créer une barre empilée pour chaque modèle */}
+            {allModelKeys.map((modelKey) => (
+              <Bar
+                key={modelKey}
+                dataKey={modelKey}
+                stackId="models"
+                fill={modelInfo[modelKey].color}
+                radius={0}
+              />
+            ))}
           </BarChart>
         </ResponsiveContainer>
 
-        {/* Petites cartes légères pour chaque provider */}
+        {/* Légende des providers avec leurs couleurs de base */}
         <div className="mt-4 grid grid-cols-2 gap-3">
-          {groupedData.map((item, index) => (
+          {stackedData.map((item, index) => (
             <div
               key={index}
               className="p-3 rounded-lg border border-muted/20 bg-muted/5 hover:bg-muted/10 transition-colors"
               style={{
-                borderLeftColor: item.color,
+                borderLeftColor: item.baseColor,
                 borderLeftWidth: "3px",
                 borderLeftStyle: "solid",
               }}
@@ -224,19 +296,21 @@ export function ModelDistributionChart({
               <div className="flex items-center gap-2 mb-1">
                 <div
                   className="w-2 h-2 rounded-full"
-                  style={{ backgroundColor: item.color }}
+                  style={{ backgroundColor: item.baseColor }}
                 ></div>
                 <h3
                   className="text-sm font-medium"
-                  style={{ color: item.color }}
+                  style={{ color: item.baseColor }}
                 >
-                  {item.name}
+                  {item.provider}
                 </h3>
               </div>
               <p className="text-lg font-semibold text-foreground">
-                {item.value.toLocaleString()}
+                {item.total.toLocaleString()}
+              </p>
+              <p className="text-xs text-muted-foreground">
+                {item.models.length} modèle{item.models.length > 1 ? "s" : ""}
               </p>
-              <p className="text-xs text-muted-foreground">tokens</p>
             </div>
           ))}
         </div>
@@ -254,29 +328,37 @@ export function ModelDistributionChart({
           </div>
         )}
 
-        {/* Légende dynamique des modèles */}
-        {allModels.length > 0 && (
-          <div className="mt-4 pt-3 border-t border-muted/20">
-            <h4 className="text-sm font-medium text-muted-foreground mb-3 text-center">
-              Modèles utilisés
-            </h4>
-            <div className="flex flex-wrap justify-center gap-x-4 gap-y-2">
-              {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>
+        {/* Légende détaillée des modèles avec leurs couleurs spécifiques */}
+        <div className="mt-4 pt-3 border-t border-muted/20">
+          <h4 className="text-sm font-medium text-muted-foreground mb-3 text-center">
+            Modèles par provider
+          </h4>
+          <div className="space-y-3">
+            {stackedData.map((provider) => (
+              <div key={provider.provider} className="space-y-1">
+                <h5
+                  className="text-xs font-medium"
+                  style={{ color: provider.baseColor }}
+                >
+                  {provider.provider}
+                </h5>
+                <div className="flex flex-wrap gap-x-4 gap-y-1 ml-2">
+                  {provider.models.map((model, index) => (
+                    <div key={index} className="flex items-center gap-1">
+                      <div
+                        className="w-2 h-2 rounded-full flex-shrink-0"
+                        style={{ backgroundColor: provider.modelColors[index] }}
+                      ></div>
+                      <span className="text-xs text-muted-foreground">
+                        {model.name} ({model.value.toLocaleString()})
+                      </span>
+                    </div>
+                  ))}
+                </div>
+              </div>
+            ))}
           </div>
-        )}
+        </div>
       </CardContent>
     </Card>
   );