From 93d937e39d3841c5c996115bea1961c085795d7d Mon Sep 17 00:00:00 2001
From: janpeter visser <janpetervisser2@gmail.com>
Date: Fri, 1 May 2026 15:47:06 +0200
Subject: [PATCH] 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>
---
 .../insights/components/burndown-chart.tsx    | 49 +++++++++++++++++++
 1 file changed, 49 insertions(+)
 create mode 100644 app/(app)/insights/components/burndown-chart.tsx

diff --git a/app/(app)/insights/components/burndown-chart.tsx b/app/(app)/insights/components/burndown-chart.tsx
new file mode 100644
index 0000000..14d355e
--- /dev/null
+++ b/app/(app)/insights/components/burndown-chart.tsx
@@ -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>
+  )
+}