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:
parent
d90172f346
commit
93d937e39d
1 changed files with 49 additions and 0 deletions
49
app/(app)/insights/components/burndown-chart.tsx
Normal file
49
app/(app)/insights/components/burndown-chart.tsx
Normal 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>
|
||||
)
|
||||
}
|
||||
Loading…
Add table
Add a link
Reference in a new issue