56 lines
1.3 KiB
TypeScript
56 lines
1.3 KiB
TypeScript
'use client'
|
|
|
|
import { AreaChart } from '@tremor/react'
|
|
import { Card, CardContent, CardHeader, CardTitle } from '@/components/ui/card'
|
|
|
|
interface TimelineDataPoint {
|
|
date: string
|
|
daily: number
|
|
cumulative: number
|
|
}
|
|
|
|
interface EvaluationTimelineProps {
|
|
data: TimelineDataPoint[]
|
|
}
|
|
|
|
export function EvaluationTimelineChart({ data }: EvaluationTimelineProps) {
|
|
if (!data?.length) return null
|
|
|
|
const totalEvaluations =
|
|
data.length > 0 ? data[data.length - 1].cumulative : 0
|
|
|
|
const chartData = data.map((d) => ({
|
|
date: new Date(d.date).toLocaleDateString('en-US', {
|
|
month: 'short',
|
|
day: 'numeric',
|
|
}),
|
|
Cumulative: d.cumulative,
|
|
Daily: d.daily,
|
|
}))
|
|
|
|
return (
|
|
<Card>
|
|
<CardHeader>
|
|
<CardTitle className="flex items-center justify-between">
|
|
<span>Evaluation Progress Over Time</span>
|
|
<span className="text-sm font-normal text-muted-foreground">
|
|
Total: {totalEvaluations} evaluations
|
|
</span>
|
|
</CardTitle>
|
|
</CardHeader>
|
|
<CardContent>
|
|
<AreaChart
|
|
data={chartData}
|
|
index="date"
|
|
categories={['Cumulative', 'Daily']}
|
|
colors={['indigo', 'amber']}
|
|
curveType="monotone"
|
|
showGradient={true}
|
|
yAxisWidth={50}
|
|
className="h-[300px]"
|
|
/>
|
|
</CardContent>
|
|
</Card>
|
|
)
|
|
}
|