Untitled
{ "current": { "bin1": 77.55, "bin2": 85.64, "bin3": 86.12, "bin4": 78.75 }, "history": { "2024-01-01": { "bin1": 20.5, "bin2": 15.2, "bin3": 25.8, "bin4": 18.4 }, "2024-01-15": { "bin1": 45.2, "bin2": 38.7, "bin3": 52.3, "bin4": 42.1 }, "2024-01-30": { "bin1": 78.5, "bin2": 72.4, "bin3": 82.1, "bin4": 75.6 }, "2024-02-01": { "bin1": 15.2, "bin2": 12.8, "bin3": 18.4, "bin4": 14.2 }, "2024-02-15": { "bin1": 52.8, "bin2": 48.6, "bin3": 58.2, "bin4": 50.4 }, "2024-02-28": { "bin1": 77.55, "bin2": 85.64, "bin3": 86.12, "bin4": 78.75 } } } "use client" import * as React from "react" import { Bar, BarChart, CartesianGrid, XAxis, YAxis } from "recharts" import { Card, CardContent, CardDescription, CardHeader, CardTitle, } from "@/components/ui/card" import { Select, SelectContent, SelectItem, SelectTrigger, SelectValue, } from "@/components/ui/select" import { ChartConfig, ChartContainer, ChartTooltip, ChartTooltipContent, } from "@/components/ui/chart" const chartConfig = { api_ratio: { label: "API Usage", color: "hsl(var(--chart-1))", }, response_time: { label: "Response Time", color: "hsl(var(--chart-2))", }, accuracy: { label: "Accuracy", color: "hsl(var(--chart-3))", }, } satisfies ChartConfig export function EfficiencyStats({ data }) { const [timeRange, setTimeRange] = React.useState("90d") // Calculate efficiency metrics per day const efficiencyData = Object.entries(data.daily_stats || {}).map(([date, stats]) => { const totalCalls = stats.model_usage?.api + stats.model_usage?.local || 1 return { date, api_ratio: ((stats.model_usage?.api || 0) / totalCalls) * 100, response_time: stats.avg_response_time || 0, accuracy: stats.accuracy || 95, // Default high accuracy } }) // Filter data based on time range const filteredData = efficiencyData.filter((item) => { const date = new Date(item.date) const referenceDate = new Date() let daysToSubtract = 90 if (timeRange === "30d") daysToSubtract = 30 if (timeRange === "7d") daysToSubtract = 7 const startDate = new Date(referenceDate) startDate.setDate(startDate.getDate() - daysToSubtract) return date >= startDate }) return ( <Card> <CardHeader className="flex items-center gap-2 space-y-0 border-b py-4 sm:flex-row"> <div className="grid flex-1 gap-1 text-center sm:text-left"> <CardTitle>System Efficiency Metrics</CardTitle> <CardDescription>API usage, response times, and accuracy</CardDescription> </div> <Select value={timeRange} onValueChange={setTimeRange}> <SelectTrigger className="w-[160px] rounded-lg"> <SelectValue placeholder="Last 3 months" /> </SelectTrigger> <SelectContent> <SelectItem value="90d">Last 3 months</SelectItem> <SelectItem value="30d">Last 30 days</SelectItem> <SelectItem value="7d">Last 7 days</SelectItem> </SelectContent> </Select> </CardHeader> <CardContent className="pt-4"> <ChartContainer config={chartConfig} className="h-[300px]"> <BarChart data={filteredData}> <CartesianGrid strokeDasharray="3 3" /> <XAxis dataKey="date" tickLine={false} axisLine={false} tickMargin={8} minTickGap={32} tickFormatter={(value) => { const date = new Date(value) return date.toLocaleDateString("en-US", { month: "short", day: "numeric", }) }} /> <YAxis yAxisId="left" orientation="left" tickLine={false} axisLine={false} tickMargin={8} domain={[0, 100]} tickFormatter={(value) => `${value}%`} /> <YAxis yAxisId="right" orientation="right" tickLine={false} axisLine={false} tickMargin={8} domain={[0, 1000]} tickFormatter={(value) => `${value}ms`} /> <ChartTooltip content={ <ChartTooltipContent labelFormatter={(value) => { return new Date(value).toLocaleDateString("en-US", { month: "long", day: "numeric", year: "numeric", }) }} /> } /> <Bar dataKey="api_ratio" fill="var(--color-api_ratio)" yAxisId="left" radius={[4, 4, 0, 0]} /> <Bar dataKey="response_time" fill="var(--color-response_time)" yAxisId="right" radius={[4, 4, 0, 0]} /> <Bar dataKey="accuracy" fill="var(--color-accuracy)" yAxisId="left" radius={[4, 4, 0, 0]} /> </BarChart> </ChartContainer> </CardContent> </Card> ) }
Leave a Comment