Spaces:
Sleeping
Sleeping
File size: 1,811 Bytes
9dfccd9 | 1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 30 31 32 33 34 35 36 37 38 39 40 41 42 43 44 45 46 47 48 49 | import { useQuery } from '@tanstack/react-query'
import {
LineChart, Line, XAxis, YAxis, CartesianGrid, Tooltip, ResponsiveContainer,
} from 'recharts'
import { apiFetch } from '@/lib/http'
import { LoadingSkeleton } from '@/components/common/LoadingSkeleton'
interface TrendPoint { date: string; count: number }
interface Response {
query_count: number
unique_users: number
avg_response_time_ms: number
trend: { data: TrendPoint[] }
}
async function fetchTrend(): Promise<Response> {
const res = await apiFetch('/api/analytics/queries?date_range=30d')
return res.json()
}
export function QueryTrendChart() {
const { data, isLoading } = useQuery({ queryKey: ['analytics-trend'], queryFn: fetchTrend, staleTime: 300_000 })
return (
<div className="rounded-xl border border-surface-subtle p-5">
<div className="mb-4 flex items-start justify-between">
<div>
<p className="text-sm font-medium text-stone-500">Query Volume</p>
<p className="text-2xl font-bold">{isLoading ? '—' : (data?.query_count ?? 0).toLocaleString()}</p>
</div>
<span className="text-xs text-stone-400">Last 30 days</span>
</div>
{isLoading ? (
<LoadingSkeleton rows={2} />
) : (
<ResponsiveContainer width="100%" height={120}>
<LineChart data={data?.trend.data ?? []}>
<CartesianGrid strokeDasharray="3 3" stroke="#e7e5e4" />
<XAxis dataKey="date" tick={{ fontSize: 10 }} tickFormatter={(d) => d.slice(5)} />
<YAxis tick={{ fontSize: 10 }} width={30} />
<Tooltip />
<Line type="monotone" dataKey="count" stroke="#b45309" strokeWidth={2} dot={false} />
</LineChart>
</ResponsiveContainer>
)}
</div>
)
}
|