diff --git a/app/settings/page.tsx b/app/settings/page.tsx index f2fa0c6..9d14e7c 100644 --- a/app/settings/page.tsx +++ b/app/settings/page.tsx @@ -1,10 +1,4 @@ -import { - Card, - CardContent, - CardDescription, - CardHeader, - CardTitle, -} from "@/components/ui/card"; +import { Card, CardContent, CardHeader, CardTitle } from "@/components/ui/card"; import { Badge } from "@/components/ui/badge"; import { Database, Server, Settings } from "lucide-react"; diff --git a/components/dashboard/charts/model-distribution-chart.tsx b/components/dashboard/charts/model-distribution-chart.tsx index 0c6ee3f..7b7b132 100644 --- a/components/dashboard/charts/model-distribution-chart.tsx +++ b/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 ( +
{data.name}
+Tokens: {data.value.toLocaleString()}
+ {data.models && data.models.length > 0 && ( +Modèles:
+ {data.models.slice(0, 5).map((model, index) => ( ++ • {model.name}: {model.value.toLocaleString()} +
+ ))} + {data.models.length > 5 && ( ++ ... et {data.models.length - 5} autres +
+ )} +