From 559815f7a3e611940e7b741eb7cf3b841e4d5b61 Mon Sep 17 00:00:00 2001
From: xarmian <xarmian@gmail.com>
Date: Sat, 28 Mar 2026 14:14:32 +0000
Subject: [PATCH] Add burndown chart to phase detail pages

Create PhaseChart SVG component showing task completion over time with
an ideal burndown line, actual step chart, and today marker. Wire it
into PhaseTasks (shown when phase has start_date) and pass phaseFields
from the item detail page.
---
 .../lib/components/phases/PhaseChart.svelte   | 251 ++++++++++++++++++
 .../lib/components/phases/PhaseTasks.svelte   |   8 +-
 .../[collection]/[slug]/+page.svelte          |   2 +-
 3 files changed, 259 insertions(+), 2 deletions(-)
 create mode 100644 web/src/lib/components/phases/PhaseChart.svelte

diff --git a/web/src/lib/components/phases/PhaseChart.svelte b/web/src/lib/components/phases/PhaseChart.svelte
new file mode 100644
index 00000000..8da0c61d
--- /dev/null
+++ b/web/src/lib/components/phases/PhaseChart.svelte
@@ -0,0 +1,251 @@
+<script lang="ts">
+	import type { Item } from '$lib/types';
+	import { parseFields } from '$lib/types';
+
+	interface Props {
+		tasks: Item[];
+		startDate: string;
+		endDate?: string;
+	}
+
+	let { tasks, startDate, endDate }: Props = $props();
+
+	// Chart dimensions
+	const padding = { top: 20, right: 20, bottom: 30, left: 40 };
+	const width = 600;
+	const height = 200;
+	const chartW = width - padding.left - padding.right;
+	const chartH = height - padding.top - padding.bottom;
+
+	let chartData = $derived.by(() => {
+		const total = tasks.length;
+		if (total === 0) return null;
+
+		const start = new Date(startDate);
+		start.setHours(0, 0, 0, 0);
+
+		const now = new Date();
+		now.setHours(23, 59, 59, 999);
+
+		const end = endDate ? new Date(endDate) : now;
+		end.setHours(23, 59, 59, 999);
+
+		// Use the later of end date or today for display range
+		const displayEnd = end > now ? end : now;
+		const totalMs = displayEnd.getTime() - start.getTime();
+		if (totalMs <= 0) return null;
+
+		// Build completion events: when each done task was completed
+		const completions: { date: Date; count: number }[] = [];
+		for (const task of tasks) {
+			const f = parseFields(task);
+			if (f.status === 'done') {
+				const completedAt = new Date(task.updated_at);
+				completions.push({ date: completedAt, count: 1 });
+			}
+		}
+		completions.sort((a, b) => a.date.getTime() - b.date.getTime());
+
+		// Build actual line points (step chart)
+		const actualPoints: { x: number; y: number }[] = [];
+		let remaining = total;
+
+		// Start point
+		actualPoints.push({
+			x: 0,
+			y: (remaining / total) * chartH
+		});
+
+		for (const c of completions) {
+			const xPct = (c.date.getTime() - start.getTime()) / totalMs;
+			const x = Math.max(0, Math.min(chartW, xPct * chartW));
+
+			// Horizontal step to this date at current remaining level
+			actualPoints.push({ x, y: (remaining / total) * chartH });
+
+			remaining -= c.count;
+
+			// Vertical drop to new remaining level
+			actualPoints.push({ x, y: (remaining / total) * chartH });
+		}
+
+		// Extend to today (or end, whichever is shown)
+		const nowX = Math.max(0, Math.min(chartW, ((now.getTime() - start.getTime()) / totalMs) * chartW));
+		actualPoints.push({ x: nowX, y: (remaining / total) * chartH });
+
+		// Ideal line: straight from (start, total) to (end, 0)
+		const idealEndX = Math.max(0, Math.min(chartW, ((end.getTime() - start.getTime()) / totalMs) * chartW));
+		const idealLine = {
+			x1: 0,
+			y1: 0,
+			x2: idealEndX,
+			y2: chartH
+		};
+
+		// Today marker
+		const todayX = ((now.getTime() - start.getTime()) / totalMs) * chartW;
+
+		// Y axis ticks
+		const yTicks: { value: number; y: number }[] = [];
+		const step = total <= 5 ? 1 : total <= 20 ? Math.ceil(total / 5) : Math.ceil(total / 4);
+		for (let v = 0; v <= total; v += step) {
+			yTicks.push({ value: v, y: ((total - v) / total) * chartH });
+		}
+		if (yTicks[yTicks.length - 1]?.value !== total) {
+			yTicks.push({ value: total, y: 0 });
+		}
+
+		// X axis labels
+		const formatDate = (d: Date) => {
+			return d.toLocaleDateString('en-US', { month: 'short', day: 'numeric' });
+		};
+
+		// Build the actual line SVG path
+		const actualPath = actualPoints
+			.map((p, i) => `${i === 0 ? 'M' : 'L'}${p.x},${p.y}`)
+			.join(' ');
+
+		// Build filled area path (close to bottom)
+		const areaPath =
+			actualPath +
+			` L${actualPoints[actualPoints.length - 1].x},${chartH} L0,${chartH} Z`;
+
+		return {
+			total,
+			remaining,
+			actualPath,
+			areaPath,
+			idealLine,
+			todayX,
+			yTicks,
+			startLabel: formatDate(start),
+			endLabel: formatDate(end),
+			showTodayMarker: todayX > 0 && todayX < chartW
+		};
+	});
+</script>
+
+{#if chartData}
+	<div class="phase-chart">
+		<svg viewBox="0 0 {width} {height}" preserveAspectRatio="xMidYMid meet">
+			<g transform="translate({padding.left},{padding.top})">
+				<!-- Y axis gridlines -->
+				{#each chartData.yTicks as tick (tick.value)}
+					<line
+						x1={0}
+						y1={tick.y}
+						x2={chartW}
+						y2={tick.y}
+						stroke="var(--border)"
+						stroke-width="0.5"
+					/>
+					<text
+						x={-8}
+						y={tick.y}
+						text-anchor="end"
+						dominant-baseline="middle"
+						fill="var(--text-muted)"
+						font-size="11"
+					>
+						{tick.value}
+					</text>
+				{/each}
+
+				<!-- Ideal line (dashed, gray) -->
+				<line
+					x1={chartData.idealLine.x1}
+					y1={chartData.idealLine.y1}
+					x2={chartData.idealLine.x2}
+					y2={chartData.idealLine.y2}
+					stroke="var(--text-muted)"
+					stroke-width="1.5"
+					stroke-dasharray="6 4"
+					opacity="0.6"
+				/>
+
+				<!-- Actual area fill -->
+				<path
+					d={chartData.areaPath}
+					fill="var(--accent-green)"
+					opacity="0.1"
+				/>
+
+				<!-- Actual line -->
+				<path
+					d={chartData.actualPath}
+					fill="none"
+					stroke="var(--accent-green)"
+					stroke-width="2"
+					stroke-linejoin="round"
+				/>
+
+				<!-- Today marker -->
+				{#if chartData.showTodayMarker}
+					<line
+						x1={chartData.todayX}
+						y1={0}
+						x2={chartData.todayX}
+						y2={chartH}
+						stroke="var(--accent-blue)"
+						stroke-width="1"
+						stroke-dasharray="4 3"
+						opacity="0.7"
+					/>
+					<text
+						x={chartData.todayX}
+						y={-6}
+						text-anchor="middle"
+						fill="var(--accent-blue)"
+						font-size="10"
+						opacity="0.8"
+					>
+						today
+					</text>
+				{/if}
+
+				<!-- X axis: baseline -->
+				<line
+					x1={0}
+					y1={chartH}
+					x2={chartW}
+					y2={chartH}
+					stroke="var(--border)"
+					stroke-width="1"
+				/>
+
+				<!-- X axis labels -->
+				<text
+					x={0}
+					y={chartH + 18}
+					text-anchor="start"
+					fill="var(--text-muted)"
+					font-size="11"
+				>
+					{chartData.startLabel}
+				</text>
+				<text
+					x={chartW}
+					y={chartH + 18}
+					text-anchor="end"
+					fill="var(--text-muted)"
+					font-size="11"
+				>
+					{chartData.endLabel}
+				</text>
+			</g>
+		</svg>
+	</div>
+{/if}
+
+<style>
+	.phase-chart {
+		width: 100%;
+		margin: var(--space-3) 0;
+	}
+
+	.phase-chart svg {
+		width: 100%;
+		height: 200px;
+		display: block;
+	}
+</style>
diff --git a/web/src/lib/components/phases/PhaseTasks.svelte b/web/src/lib/components/phases/PhaseTasks.svelte
index e11edc99..66ffeafc 100644
--- a/web/src/lib/components/phases/PhaseTasks.svelte
+++ b/web/src/lib/components/phases/PhaseTasks.svelte
@@ -5,14 +5,16 @@
 	import { parseFields, formatItemRef } from '$lib/types';
 	import { dndzone, TRIGGERS, SHADOW_ITEM_MARKER_PROPERTY_NAME } from 'svelte-dnd-action';
 	import type { DndEvent } from 'svelte-dnd-action';
+	import PhaseChart from './PhaseChart.svelte';
 
 	interface Props {
 		wsSlug: string;
 		itemSlug: string;
 		itemId: string;
+		phaseFields?: Record<string, any>;
 	}
 
-	let { wsSlug, itemSlug, itemId }: Props = $props();
+	let { wsSlug, itemSlug, itemId, phaseFields }: Props = $props();
 
 	let tasks = $state<Item[]>([]);
 	let loading = $state(true);
@@ -123,6 +125,10 @@
 		<div class="progress-fill" style:width="{percentage}%"></div>
 	</div>
 
+	{#if !loading && tasks.length > 0 && phaseFields?.start_date}
+		<PhaseChart {tasks} startDate={phaseFields.start_date} endDate={phaseFields.end_date} />
+	{/if}
+
 	{#if loading}
 		<div class="loading">
 			<span class="spinner"></span>
diff --git a/web/src/routes/[workspace]/[collection]/[slug]/+page.svelte b/web/src/routes/[workspace]/[collection]/[slug]/+page.svelte
index fcf63b3a..80d00448 100644
--- a/web/src/routes/[workspace]/[collection]/[slug]/+page.svelte
+++ b/web/src/routes/[workspace]/[collection]/[slug]/+page.svelte
@@ -454,7 +454,7 @@
 
 		<!-- Phase Tasks (shown only for phases collection) -->
 		{#if collSlug === 'phases' && item}
-			<PhaseTasks {wsSlug} {itemSlug} itemId={item.id} />
+			<PhaseTasks {wsSlug} {itemSlug} itemId={item.id} phaseFields={fields} />
 		{/if}
 
 		<!-- Comments -->