feat: BurndownChart component (Recharts LineChart, ideal vs remaining)

LineChart met two series: ideal (grijs, dashed) en remaining (status-in-progress blauw).
ResponsiveContainer 100% x 240px, empty-state bij lege days-array.

Co-Authored-By: Claude Sonnet 4.6 <noreply@anthropic.com>
This commit is contained in:
Janpeter Visser 2026-05-01 15:47:06 +02:00
parent d90172f346
commit 93d937e39d

View file

@ -0,0 +1,49 @@
'use client'
import {
LineChart,
Line,
XAxis,
YAxis,
Tooltip,
Legend,
ResponsiveContainer,
} from 'recharts'
import type { BurndownSprint } from '@/lib/insights/burndown'
interface Props {
sprint: BurndownSprint
}
export function BurndownChart({ sprint }: Props) {
if (sprint.days.length === 0) {
return <p className="text-muted-foreground text-sm">Geen sprint-data</p>
}
return (
<div className="space-y-2">
<h3 className="text-sm font-medium text-foreground">
{sprint.productName} {sprint.sprintGoal}
</h3>
<ResponsiveContainer width="100%" height={240}>
<LineChart data={sprint.days}>
<XAxis dataKey="day" tick={{ fontSize: 11 }} />
<YAxis allowDecimals={false} tick={{ fontSize: 11 }} />
<Tooltip />
<Legend />
<Line
dataKey="ideal"
stroke="var(--muted-foreground)"
strokeDasharray="4 4"
dot={false}
/>
<Line
dataKey="remaining"
stroke="var(--status-in-progress)"
dot={false}
/>
</LineChart>
</ResponsiveContainer>
</div>
)
}