108 lines
3.4 KiB
TypeScript
108 lines
3.4 KiB
TypeScript
"use client";
|
|
|
|
import { Card, CardContent } from "@/components/ui/card";
|
|
import { Tabs, TabsContent, TabsList, TabsTrigger } from "@/components/ui/tabs";
|
|
import { useStats } from "@/hooks/useStats";
|
|
import { SimpleStatsChart } from "./charts/simple-stats-chart";
|
|
import { UserConnectionsChart } from "./charts/user-connections-chart";
|
|
import { ModelDistributionChart } from "./charts/model-distribution-chart";
|
|
import { AlertCircle } from "lucide-react";
|
|
|
|
export function RealTimeStats() {
|
|
const { stats, loading, error } = useStats();
|
|
|
|
console.log("RealTimeStats - stats:", stats);
|
|
console.log("RealTimeStats - loading:", loading);
|
|
console.log("RealTimeStats - error:", error);
|
|
|
|
if (loading) {
|
|
return (
|
|
<div className="space-y-6">
|
|
<div className="h-64 bg-muted animate-pulse rounded-lg" />
|
|
<div className="h-64 bg-muted animate-pulse rounded-lg" />
|
|
</div>
|
|
);
|
|
}
|
|
|
|
if (error) {
|
|
return (
|
|
<div className="space-y-6">
|
|
<Card>
|
|
<CardContent className="flex items-center justify-center h-64">
|
|
<div className="text-center">
|
|
<AlertCircle className="h-8 w-8 text-destructive mx-auto mb-2" />
|
|
<p className="text-sm text-muted-foreground">
|
|
Erreur lors du chargement des données
|
|
</p>
|
|
</div>
|
|
</CardContent>
|
|
</Card>
|
|
<Card>
|
|
<CardContent className="flex items-center justify-center h-64">
|
|
<div className="text-center">
|
|
<AlertCircle className="h-8 w-8 text-destructive mx-auto mb-2" />
|
|
<p className="text-sm text-muted-foreground">
|
|
Erreur lors du chargement des données
|
|
</p>
|
|
</div>
|
|
</CardContent>
|
|
</Card>
|
|
</div>
|
|
);
|
|
}
|
|
|
|
if (!stats) {
|
|
return (
|
|
<div className="space-y-6">
|
|
<Card>
|
|
<CardContent className="flex items-center justify-center h-64">
|
|
<p className="text-sm text-muted-foreground">
|
|
Aucune donnée disponible
|
|
</p>
|
|
</CardContent>
|
|
</Card>
|
|
<Card>
|
|
<CardContent className="flex items-center justify-center h-64">
|
|
<p className="text-sm text-muted-foreground">
|
|
Aucune donnée disponible
|
|
</p>
|
|
</CardContent>
|
|
</Card>
|
|
</div>
|
|
);
|
|
}
|
|
|
|
return (
|
|
<Tabs defaultValue="connections" className="space-y-6">
|
|
<TabsList className="grid w-full grid-cols-2">
|
|
<TabsTrigger value="connections">Nombre de connexions par utilisateur/par jour</TabsTrigger>
|
|
<TabsTrigger value="tokens">Tokens consommés par jour</TabsTrigger>
|
|
</TabsList>
|
|
|
|
<TabsContent value="connections" className="space-y-6">
|
|
<UserConnectionsChart
|
|
title="Nombre de connexions par utilisateur/par jour"
|
|
data={stats.dailyConnections || []}
|
|
color="hsl(var(--chart-2))"
|
|
/>
|
|
<ModelDistributionChart
|
|
title="Répartition par modèle"
|
|
data={stats.modelDistribution}
|
|
/>
|
|
</TabsContent>
|
|
|
|
<TabsContent value="tokens" className="space-y-6">
|
|
<SimpleStatsChart
|
|
title="Tokens consommés par jour"
|
|
data={stats.dailyTokens}
|
|
color="hsl(var(--primary))"
|
|
/>
|
|
<ModelDistributionChart
|
|
title="Répartition par modèle"
|
|
data={stats.modelDistribution}
|
|
/>
|
|
</TabsContent>
|
|
</Tabs>
|
|
);
|
|
}
|