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 +

+ )} +
+ )} +
+ ); + } 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) => ( -
-
- - {model.name} - -
- ))} +
+
+ + {model.name} + +
+ ))} )} diff --git a/lib/utils/currency.ts b/lib/utils/currency.ts index 7ce2249..ab17d94 100644 --- a/lib/utils/currency.ts +++ b/lib/utils/currency.ts @@ -39,7 +39,7 @@ export async function getCurrentExchangeRate(): Promise { const response = await fetch('https://api.exchangerate-api.com/v4/latest/USD'); const data = await response.json(); return data.rates.EUR || 0.92; // Fallback au taux fixe - } catch (error) { + } catch { console.warn('Impossible de récupérer le taux de change, utilisation du taux fixe'); return 0.92; // Taux fixe de fallback }