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>
  )
}