103 lines
2.9 KiB
TypeScript
103 lines
2.9 KiB
TypeScript
|
'use client'
|
||
|
|
|
||
|
|
import {
|
||
|
|
LineChart,
|
||
|
|
Line,
|
||
|
|
XAxis,
|
||
|
|
YAxis,
|
||
|
|
CartesianGrid,
|
||
|
|
Tooltip,
|
||
|
|
Legend,
|
||
|
|
ResponsiveContainer,
|
||
|
|
Area,
|
||
|
|
ComposedChart,
|
||
|
|
Bar,
|
||
|
|
} from 'recharts'
|
||
|
|
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) {
|
||
|
|
// Format date for display
|
||
|
|
const formattedData = data.map((d) => ({
|
||
|
|
...d,
|
||
|
|
dateFormatted: new Date(d.date).toLocaleDateString('en-US', {
|
||
|
|
month: 'short',
|
||
|
|
day: 'numeric',
|
||
|
|
}),
|
||
|
|
}))
|
||
|
|
|
||
|
|
const totalEvaluations =
|
||
|
|
data.length > 0 ? data[data.length - 1].cumulative : 0
|
||
|
|
|
||
|
|
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>
|
||
|
|
<div className="h-[300px]">
|
||
|
|
<ResponsiveContainer width="100%" height="100%">
|
||
|
|
<ComposedChart
|
||
|
|
data={formattedData}
|
||
|
|
margin={{ top: 20, right: 30, bottom: 20, left: 20 }}
|
||
|
|
>
|
||
|
|
<CartesianGrid strokeDasharray="3 3" className="stroke-muted" />
|
||
|
|
<XAxis
|
||
|
|
dataKey="dateFormatted"
|
||
|
|
tick={{ fontSize: 12 }}
|
||
|
|
interval="preserveStartEnd"
|
||
|
|
/>
|
||
|
|
<YAxis yAxisId="left" orientation="left" stroke="#8884d8" />
|
||
|
|
<YAxis yAxisId="right" orientation="right" stroke="#82ca9d" />
|
||
|
|
<Tooltip
|
||
|
|
contentStyle={{
|
||
|
|
backgroundColor: 'hsl(var(--card))',
|
||
|
|
border: '1px solid hsl(var(--border))',
|
||
|
|
borderRadius: '6px',
|
||
|
|
}}
|
||
|
|
formatter={(value: number | undefined, name: string | undefined) => [
|
||
|
|
value ?? 0,
|
||
|
|
(name ?? '') === 'daily' ? 'Daily' : 'Cumulative',
|
||
|
|
]}
|
||
|
|
labelFormatter={(label) => `Date: ${label}`}
|
||
|
|
/>
|
||
|
|
<Legend />
|
||
|
|
<Bar
|
||
|
|
yAxisId="left"
|
||
|
|
dataKey="daily"
|
||
|
|
name="Daily Evaluations"
|
||
|
|
fill="#8884d8"
|
||
|
|
radius={[4, 4, 0, 0]}
|
||
|
|
/>
|
||
|
|
<Line
|
||
|
|
yAxisId="right"
|
||
|
|
type="monotone"
|
||
|
|
dataKey="cumulative"
|
||
|
|
name="Cumulative Total"
|
||
|
|
stroke="#82ca9d"
|
||
|
|
strokeWidth={2}
|
||
|
|
dot={{ r: 3 }}
|
||
|
|
activeDot={{ r: 6 }}
|
||
|
|
/>
|
||
|
|
</ComposedChart>
|
||
|
|
</ResponsiveContainer>
|
||
|
|
</div>
|
||
|
|
</CardContent>
|
||
|
|
</Card>
|
||
|
|
)
|
||
|
|
}
|