"use client"
import { useId } from "react"
import { Area, AreaChart, XAxis, YAxis, usePlotArea, type DotProps } from "recharts"
import { ChartContainer, ChartTooltip, type ChartConfig } from "@/components/ui/chart"
const usageData = [
{ time: "08:00", requests: 2350 },
{ time: "10:00", requests: 2910 },
{ time: "12:00", requests: 2560 },
{ time: "14:00", requests: 3833 },
{ time: "16:00", requests: 3540 },
{ time: "18:00", requests: 4370 },
{ time: "20:00", requests: 5680 },
]
const chartConfig = {
requests: { label: "Requests", color: "var(--brand)" },
} satisfies ChartConfig
function UsageHighlight({ cx, cy, value }: DotProps & { value?: number | number[] }) {
const plot = usePlotArea()
const guideId = useId()
const amount = Array.isArray(value) ? value[value.length - 1] : value
if (cx == null || cy == null || !plot || amount == null) return null
const labelX = Math.max(plot.x + 8, Math.min(cx - 82, plot.x + plot.width - 84))
const labelY = Math.max(8, cy - 46)
const formattedValue = amount.toLocaleString("en-US")
return (
{formattedValue} requests
{formattedValue}
)
}
export function UsageChart() {
const fillId = useId()
return (
null} />
}
isAnimationActive={false}
/>
)
}