Project health chart on LayerChart

Project page gets a Sante chart: daily mean of per-routine health
via computeProjectHealthSeries, ending at the current health score.
Both charts share a HealthChart component built on LayerChart's
AreaChart (time x-axis, fixed 0-100 y-axis, completion dots).

5 files changed, 241 insertions, 5 deletions

diff --git a/src/lib/components/HealthChart.svelte b/src/lib/components/HealthChart.svelte
new file mode 100644
index 0000000..f1f87ed
--- /dev/null
+++ b/src/lib/components/HealthChart.svelte
@@ -0,0 +1,110 @@
+<script lang="ts">
+	import { AreaChart, Area, Points, Text } from 'layerchart';
+	import type { HealthPoint } from '$lib/shared/routine-metrics';
+
+	let {
+		series,
+		markers = [],
+		ariaLabel,
+	}: {
+		series: HealthPoint[];
+		markers?: number[];
+		ariaLabel: string;
+	} = $props();
+
+	const dateFormatter = new Intl.DateTimeFormat('fr-FR', {
+		day: 'numeric',
+		month: 'short',
+	});
+
+	const data = $derived(
+		series.map((p) => ({ date: new Date(p.at), health: p.health })),
+	);
+	const dots = $derived(
+		markers.map((t) => ({ date: new Date(t), health: 100 })),
+	);
+
+	// Up to 5 x ticks spread across the series, skipping repeats (two samples
+	// the same day would print the same label twice).
+	const xTicks = $derived.by(() => {
+		if (data.length < 2) return undefined;
+		const step = Math.max(1, Math.floor((data.length - 1) / 4));
+		const ticks: Date[] = [];
+		for (let i = 0; i < data.length; i += step) {
+			const last = i + step >= data.length;
+			const date = last ? data[data.length - 1].date : data[i].date;
+			const label = dateFormatter.format(date);
+			if (
+				ticks.length > 0 &&
+				dateFormatter.format(ticks[ticks.length - 1]) === label
+			)
+				continue;
+			ticks.push(date);
+			if (last) break;
+		}
+		return ticks;
+	});
+</script>
+
+{#if data.length >= 2}
+	<div class="health-chart" role="img" aria-label={ariaLabel}>
+		<AreaChart
+			{data}
+			x="date"
+			y="health"
+			yDomain={[0, 100]}
+			series={[{ key: 'santé', value: 'health', color: 'var(--accent)' }]}
+			axis
+			grid={{ y: true, yTicks: [25, 50, 75, 100] }}
+			rule={false}
+			props={{
+				xAxis: {
+					ticks: xTicks,
+					format: (d: Date) => dateFormatter.format(d),
+					tickLabel: xTickLabel,
+				},
+				yAxis: { ticks: [25, 50, 75, 100] },
+			}}
+			marks={chartMarks}
+		/>
+	</div>
+{:else}
+	<p class="empty">Pas encore assez d'historique pour tracer la courbe.</p>
+{/if}
+
+{#snippet xTickLabel({
+	props,
+	index,
+}: {
+	props: Record<string, unknown>;
+	index: number;
+})}
+	<Text
+		{...props}
+		textAnchor={index === 0
+			? 'start'
+			: index === (xTicks?.length ?? 0) - 1
+				? 'end'
+				: 'middle'}
+	/>
+{/snippet}
+
+{#snippet chartMarks()}
+	<Area seriesKey="santé" fillOpacity={0.2} line={{ strokeWidth: 2 }} />
+	<Points
+		data={dots}
+		x="date"
+		y="health"
+		r={4}
+		fill="var(--success)"
+		stroke="var(--white)"
+		strokeWidth={1.5}
+	/>
+{/snippet}
+
+<style>
+	.health-chart {
+		width: 100%;
+		height: 11rem;
+	}
+</style>
diff --git a/src/lib/server/services/routines.test.ts b/src/lib/server/services/routines.test.ts
index e8c4f35..04151c2 100644
--- a/src/lib/server/services/routines.test.ts
+++ b/src/lib/server/services/routines.test.ts
@@ -141,6 +141,9 @@ describe('routines service', () => {
 		expect(dashboard.routines).toHaveLength(1);
 		expect(dashboard.routines[0].status).toBe('veryLate');
 		expect(dashboard.healthScore).toBe(0);
+		const last = dashboard.healthSeries[dashboard.healthSeries.length - 1];
+		expect(last.at).toBe(now);
+		expect(last.health).toBe(dashboard.healthScore);
 	});
 
 	it('overview aggregates per-project health and a global score', async () => {
diff --git a/src/lib/server/services/routines.ts b/src/lib/server/services/routines.ts
index b314d50..ec03c50 100644
--- a/src/lib/server/services/routines.ts
+++ b/src/lib/server/services/routines.ts
@@ -6,7 +6,9 @@ import type { Routine, RoutineCompletion } from './types';
 import {
 	computeRoutineState,
 	computeHealthScore,
+	computeProjectHealthSeries,
 	type RoutineState,
+	type HealthPoint,
 } from '$lib/shared/routine-metrics';
 
 // ponytail: next routine id via MAX(id)+1, safe enough for a single-user app;
@@ -199,6 +201,7 @@ export async function complete(
 export interface ProjectDashboard {
 	routines: RoutineState[];
 	healthScore: number;
+	healthSeries: HealthPoint[];
 }
 
 export async function loadProjectDashboard(
@@ -219,7 +222,8 @@ export async function loadProjectDashboard(
 		if (!existing || r.version > existing.version) current.set(r.id, r);
 	}
 	const routines_ = [...current.values()].filter((r) => !r.archived);
-	if (routines_.length === 0) return { routines: [], healthScore: 100 };
+	if (routines_.length === 0)
+		return { routines: [], healthScore: 100, healthSeries: [] };
 
 	const completions = await db
 		.select()
@@ -232,7 +236,11 @@ export async function loadProjectDashboard(
 		);
 
 	const states = routines_.map((r) => computeRoutineState(r, completions, now));
-	return { routines: states, healthScore: computeHealthScore(states) };
+	return {
+		routines: states,
+		healthScore: computeHealthScore(states),
+		healthSeries: computeProjectHealthSeries(routines_, completions, now),
+	};
 }
 
 export interface ProjectsOverview {
diff --git a/src/lib/shared/routine-metrics.test.ts b/src/lib/shared/routine-metrics.test.ts
index ccc06ba..57b8c38 100644
--- a/src/lib/shared/routine-metrics.test.ts
+++ b/src/lib/shared/routine-metrics.test.ts
@@ -3,6 +3,7 @@ import {
 	computeRoutineState,
 	computeHealthScore,
 	computeHealthSeries,
+	computeProjectHealthSeries,
 	parseIntervalToDays,
 } from './routine-metrics';
 
@@ -125,6 +126,54 @@ describe('computeHealthSeries', () => {
 	});
 });
 
+describe('computeProjectHealthSeries', () => {
+	it('is empty with no routines', () => {
+		expect(computeProjectHealthSeries([], [], Date.parse(CREATED))).toEqual([]);
+	});
+
+	it('averages per-routine health and ends at the current score', () => {
+		const second = { ...routine, id: 2, name: 'read' };
+		const doneAt = Date.parse(CREATED) + 5 * DAY_MS;
+		const now = Date.parse(CREATED) + 8 * DAY_MS;
+		const series = computeProjectHealthSeries(
+			[routine, second],
+			[{ routineId: 2, doneAt: new Date(doneAt).toISOString() }],
+			now,
+		);
+		const states = [
+			computeRoutineState(routine, [], now),
+			computeRoutineState(
+				second,
+				[{ routineId: 2, doneAt: new Date(doneAt).toISOString() }],
+				now,
+			),
+		];
+		const last = series[series.length - 1];
+		expect(last.at).toBe(now);
+		expect(last.health).toBe(computeHealthScore(states));
+	});
+
+	it('only counts routines alive that day', () => {
+		const late = {
+			...routine,
+			id: 2,
+			name: 'latecomer',
+			createdAt: new Date(Date.parse(CREATED) + 10 * DAY_MS).toISOString(),
+		};
+		const now = Date.parse(CREATED) + 11 * DAY_MS;
+		const series = computeProjectHealthSeries([routine, late], [], now);
+		const beforeLate = series.find(
+			(p) => p.at === Date.parse(CREATED) + 5 * DAY_MS,
+		);
+		const single = computeHealthSeries(
+			routine,
+			[],
+			Date.parse(CREATED) + 5 * DAY_MS,
+		);
+		expect(beforeLate?.health).toBe(single[single.length - 1].health);
+	});
+});
+
 describe('parseIntervalToDays', () => {
 	it('converts units to days', () => {
 		expect(parseIntervalToDays('1d')).toBe(1);
diff --git a/src/lib/shared/routine-metrics.ts b/src/lib/shared/routine-metrics.ts
index 4af989d..891a0c9 100644
--- a/src/lib/shared/routine-metrics.ts
+++ b/src/lib/shared/routine-metrics.ts
@@ -103,6 +103,13 @@ export interface HealthPoint {
 	health: number;
 }
 
+/** Health at instant t given the reference anchor (creation or last completion). */
+function healthAtPoint(refMs: number, periodMs: number, t: number): number {
+	const dueMs = startOfUtcDay(refMs) + periodMs;
+	const rawRatio = (t - dueMs) / periodMs;
+	return Math.max(0, Math.round(100 - Math.max(0, rawRatio) * 100));
+}
+
 /**
  * Daily health samples from the routine's creation to now: 100 right after a
  * completion, then a linear decay to 0 once a full period is overdue (sawtooth).
@@ -139,9 +146,7 @@ export function computeHealthSeries(
 			refMs = completionMs[nextCompletion];
 			nextCompletion++;
 		}
-		const dueMs = startOfUtcDay(refMs) + periodMs;
-		const rawRatio = (t - dueMs) / periodMs;
-		return Math.max(0, Math.round(100 - Math.max(0, rawRatio) * 100));
+		return healthAtPoint(refMs, periodMs, t);
 	};
 
 	for (let t = startMs; t <= now; t += DAY_MS) {
@@ -155,6 +160,67 @@ export function computeHealthSeries(
 	return points;
 }
 
+/**
+ * Project health series: daily mean of per-routine health across the routines
+ * alive that day (createdAt <= t). Same sawtooth as the per-routine series,
+ * so the project curve ends at the current health score. Empty when no
+ * routines.
+ */
+export function computeProjectHealthSeries(
+	routines: RoutineInput[],
+	completions: CompletionInput[],
+	now: number,
+): HealthPoint[] {
+	if (routines.length === 0) return [];
+	const ids = new Set(routines.map((r) => r.id));
+	const completionsByRoutine = new Map<number, number[]>();
+	for (const c of completions) {
+		if (!ids.has(c.routineId)) continue;
+		const t = Date.parse(c.doneAt);
+		if (!Number.isFinite(t)) continue;
+		completionsByRoutine.set(c.routineId, [
+			...(completionsByRoutine.get(c.routineId) ?? []),
+			t,
+		]);
+	}
+	for (const times of completionsByRoutine.values())
+		times.sort((a, b) => a - b);
+
+	const createdOrNow = (r: RoutineInput): number => {
+		const t = Date.parse(r.createdAt);
+		return Number.isFinite(t) ? t : now;
+	};
+	// Mean per-routine health across the routines alive at t.
+	const sampleAt = (t: number): number | null => {
+		const alive = routines.filter((r) => Date.parse(r.createdAt) <= t);
+		if (alive.length === 0) return null;
+		const total = alive.reduce((sum, r) => {
+			const doneAt = (completionsByRoutine.get(r.id) ?? []).filter(
+				(d) => d <= t,
+			);
+			const anchor = doneAt.length > 0 ? Math.max(...doneAt) : createdOrNow(r);
+			return sum + healthAtPoint(anchor, r.frequencyDays * DAY_MS, t);
+		}, 0);
+		return Math.round(total / alive.length);
+	};
+
+	const startMs = Math.min(...routines.map(createdOrNow));
+	if (now <= startMs) return [{ at: now, health: 100 }];
+
+	const points: HealthPoint[] = [];
+	for (let t = startMs; t <= now; t += DAY_MS) {
+		const health = sampleAt(t);
+		if (health !== null) points.push({ at: t, health });
+	}
+	if (points.length === 0) return [{ at: now, health: 100 }];
+
+	// Final unaligned sample so the curve ends at the present instant.
+	if (points[points.length - 1].at < now) {
+		points.push({ at: now, health: sampleAt(now) ?? 100 });
+	}
+	return points;
+}
+
 export function formatFrequency(days: number): string {
 	if (days === 1) return 'chaque jour';
 	if (days === 7) return 'chaque semaine';