284 lines
8.4 KiB
TypeScript
284 lines
8.4 KiB
TypeScript
"use client";
|
|
|
|
import { Card, CardContent, CardHeader, CardTitle } from "@/components/ui/card";
|
|
import {
|
|
BarChart,
|
|
Bar,
|
|
XAxis,
|
|
YAxis,
|
|
CartesianGrid,
|
|
Tooltip,
|
|
ResponsiveContainer,
|
|
Cell,
|
|
} from "recharts";
|
|
|
|
interface ModelDistributionChartProps {
|
|
title: string;
|
|
subtitle?: string;
|
|
data: Array<{
|
|
name: string;
|
|
value: number;
|
|
color?: string;
|
|
models?: Array<{
|
|
name: string;
|
|
value: number;
|
|
}>;
|
|
}>;
|
|
showLegend?: boolean;
|
|
totalTokens?: number;
|
|
}
|
|
|
|
interface TooltipPayload {
|
|
value: number;
|
|
payload: {
|
|
name: string;
|
|
value: number;
|
|
color?: string;
|
|
models?: Array<{
|
|
name: string;
|
|
value: number;
|
|
}>;
|
|
};
|
|
}
|
|
|
|
// Couleurs par fournisseur selon l'image
|
|
const providerColors: { [key: string]: string } = {
|
|
Anthropic: "#7C3AED", // Violet vif
|
|
OpenAI: "#059669", // Vert turquoise vif
|
|
"Mistral AI": "#D97706", // Orange vif
|
|
Meta: "#DB2777", // Rose/Magenta vif
|
|
Google: "#2563EB", // Bleu vif
|
|
Cohere: "#0891B2", // Cyan vif
|
|
};
|
|
|
|
// Fonction pour regrouper les modèles par fournisseur
|
|
const groupByProvider = (modelData: Array<{ name: string; value: number }>) => {
|
|
const providerMap: {
|
|
[key: string]: {
|
|
value: number;
|
|
models: Array<{ name: string; value: number }>;
|
|
};
|
|
} = {};
|
|
|
|
modelData.forEach((model) => {
|
|
let provider = "";
|
|
|
|
// Déterminer le fournisseur basé sur le nom du modèle
|
|
if (
|
|
model.name.toLowerCase().includes("claude") ||
|
|
model.name.toLowerCase().includes("anthropic")
|
|
) {
|
|
provider = "Anthropic";
|
|
} else if (
|
|
model.name.toLowerCase().includes("gpt") ||
|
|
model.name.toLowerCase().includes("openai")
|
|
) {
|
|
provider = "OpenAI";
|
|
} else if (model.name.toLowerCase().includes("mistral")) {
|
|
provider = "Mistral AI";
|
|
} else if (
|
|
model.name.toLowerCase().includes("llama") ||
|
|
model.name.toLowerCase().includes("meta")
|
|
) {
|
|
provider = "Meta";
|
|
} else if (
|
|
model.name.toLowerCase().includes("palm") ||
|
|
model.name.toLowerCase().includes("gemini") ||
|
|
model.name.toLowerCase().includes("google")
|
|
) {
|
|
provider = "Google";
|
|
} else if (model.name.toLowerCase().includes("cohere")) {
|
|
provider = "Cohere";
|
|
} else {
|
|
provider = "Autres";
|
|
}
|
|
|
|
if (!providerMap[provider]) {
|
|
providerMap[provider] = { value: 0, models: [] };
|
|
}
|
|
|
|
providerMap[provider].value += model.value;
|
|
providerMap[provider].models.push(model);
|
|
});
|
|
|
|
return Object.entries(providerMap).map(([name, data]) => ({
|
|
name,
|
|
value: data.value,
|
|
models: data.models,
|
|
color: providerColors[name] || "#6B7280",
|
|
}));
|
|
};
|
|
|
|
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;
|
|
};
|
|
|
|
export function ModelDistributionChart({
|
|
title,
|
|
subtitle,
|
|
data,
|
|
totalTokens,
|
|
}: 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,
|
|
})) || []
|
|
);
|
|
|
|
return (
|
|
<Card>
|
|
<CardHeader className="pb-2">
|
|
<CardTitle className="text-sm font-medium text-muted-foreground">
|
|
{title}
|
|
</CardTitle>
|
|
{subtitle && (
|
|
<p className="text-xs text-muted-foreground mt-1">{subtitle}</p>
|
|
)}
|
|
</CardHeader>
|
|
<CardContent className="pt-0">
|
|
<ResponsiveContainer width="100%" height={200}>
|
|
<BarChart
|
|
data={groupedData}
|
|
margin={{ top: 10, right: 10, left: 10, bottom: 10 }}
|
|
>
|
|
<CartesianGrid strokeDasharray="3 3" className="stroke-muted/20" />
|
|
<XAxis
|
|
dataKey="name"
|
|
axisLine={false}
|
|
tickLine={false}
|
|
className="text-xs fill-muted-foreground"
|
|
angle={-45}
|
|
textAnchor="end"
|
|
height={60}
|
|
interval={0}
|
|
/>
|
|
<YAxis
|
|
axisLine={false}
|
|
tickLine={false}
|
|
className="text-xs fill-muted-foreground"
|
|
tickFormatter={(value) => {
|
|
if (value >= 1000000) return `${(value / 1000000).toFixed(1)}M`;
|
|
if (value >= 1000) return `${(value / 1000).toFixed(1)}K`;
|
|
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>
|
|
</BarChart>
|
|
</ResponsiveContainer>
|
|
|
|
{/* Petites cartes légères pour chaque provider */}
|
|
<div className="mt-4 grid grid-cols-2 gap-3">
|
|
{groupedData.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,
|
|
borderLeftWidth: "3px",
|
|
borderLeftStyle: "solid",
|
|
}}
|
|
>
|
|
<div className="flex items-center gap-2 mb-1">
|
|
<div
|
|
className="w-2 h-2 rounded-full"
|
|
style={{ backgroundColor: item.color }}
|
|
></div>
|
|
<h3
|
|
className="text-sm font-medium"
|
|
style={{ color: item.color }}
|
|
>
|
|
{item.name}
|
|
</h3>
|
|
</div>
|
|
<p className="text-lg font-semibold text-foreground">
|
|
{item.value.toLocaleString()}
|
|
</p>
|
|
<p className="text-xs text-muted-foreground">tokens</p>
|
|
</div>
|
|
))}
|
|
</div>
|
|
|
|
{/* Total général */}
|
|
{totalTokens && (
|
|
<div className="mt-4 pt-3 border-t border-muted/20 text-center">
|
|
<p className="text-sm text-muted-foreground">
|
|
Total général:{" "}
|
|
<span className="font-semibold text-foreground">
|
|
{totalTokens.toLocaleString()}
|
|
</span>{" "}
|
|
tokens
|
|
</p>
|
|
</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>
|
|
</div>
|
|
)}
|
|
</CardContent>
|
|
</Card>
|
|
);
|
|
}
|