add money tracker

src/lib/money-tracker/MoneyChart.svelte

@@ -0,0 +1,151 @@
+<script lang="ts">
+	import type { ChartSeries } from './charts';
+
+	let {
+		series,
+		title,
+		unit = '€'
+	}: { series: ChartSeries[]; title: string; unit?: string } = $props();
+	const width = 800;
+	const height = 260;
+	const plot = { left: 72, right: 18, top: 14, bottom: 38 };
+	let values = $derived(series.flatMap((item) => item.points.map((point) => point.value)));
+	let dates = $derived(
+		series.flatMap((item) => item.points.map((point) => Date.parse(`${point.date}T12:00:00Z`)))
+	);
+	let min = $derived(Math.min(0, ...values));
+	let max = $derived(Math.max(0, ...values));
+	let span = $derived(max - min || 1);
+	let from = $derived(Math.min(...dates));
+	let until = $derived(Math.max(...dates));
+	let dateSpan = $derived(until - from || 1);
+	const money = new Intl.NumberFormat('en-NL', { maximumFractionDigits: 0 });
+	function x(date: string) {
+		return (
+			plot.left +
+			((Date.parse(`${date}T12:00:00Z`) - from) / dateSpan) * (width - plot.left - plot.right)
+		);
+	}
+	function y(value: number) {
+		return plot.top + (1 - (value - min) / span) * (height - plot.top - plot.bottom);
+	}
+	function path(points: ChartSeries['points']) {
+		return points
+			.map(
+				(point, index) =>
+					`${index ? 'L' : 'M'}${x(point.date).toFixed(2)},${y(point.value).toFixed(2)}`
+			)
+			.join(' ');
+	}
+	function dateLabel(value: number) {
+		return new Date(value).toLocaleDateString('en-NL', {
+			month: 'short',
+			year: 'numeric',
+			timeZone: 'UTC'
+		});
+	}
+</script>
+
+<figure class="chart">
+	{#if values.length}
+		<!-- svelte-ignore a11y_no_noninteractive_tabindex: the chart viewport scrolls horizontally on narrow screens -->
+		<div class="chart-scroll" role="region" tabindex="0" aria-label={title}>
+			<svg
+				viewBox={`0 0 ${width} ${height}`}
+				role="img"
+				aria-label={title}
+				preserveAspectRatio="xMidYMid meet"
+			>
+				{#each [0, 0.5, 1] as fraction (fraction)}
+					{@const value = max - span * fraction}
+					<line
+						x1={plot.left}
+						x2={width - plot.right}
+						y1={y(value)}
+						y2={y(value)}
+						stroke="var(--site-border)"
+						stroke-width="1"
+					/>
+					<text
+						x={plot.left - 12}
+						y={y(value) + 4}
+						text-anchor="end"
+						fill="var(--site-muted)"
+						font-size="11">{unit}{money.format(value / (unit === '€' ? 100 : 1))}</text
+					>
+				{/each}
+				{#each series as item (item.label)}
+					{#if item.points.length}
+						<path
+							d={path(item.points)}
+							fill="none"
+							stroke={item.color}
+							stroke-width="2"
+							stroke-linecap="round"
+							stroke-linejoin="round"
+							vector-effect="non-scaling-stroke"
+						/>
+					{/if}
+				{/each}
+				<text x={plot.left} y={height - 8} fill="var(--site-muted)" font-size="11"
+					>{dateLabel(from)}</text
+				>
+				<text
+					x={width - plot.right}
+					y={height - 8}
+					text-anchor="end"
+					fill="var(--site-muted)"
+					font-size="11">{dateLabel(until)}</text
+				>
+			</svg>
+		</div>
+		{#if series.length > 1}
+			<figcaption class="legend">
+				{#each series as item (item.label)}
+					<span><span class="swatch" style={`background:${item.color}`}></span>{item.label}</span>
+				{/each}
+			</figcaption>
+		{/if}
+	{:else}
+		<p class="empty">Add entries to see a chart.</p>
+	{/if}
+</figure>
+
+<style>
+	.chart {
+		min-width: 0;
+	}
+	.chart-scroll {
+		overflow-x: auto;
+	}
+	svg {
+		display: block;
+		width: 100%;
+		min-width: 540px;
+		height: auto;
+	}
+	.legend {
+		display: flex;
+		flex-wrap: wrap;
+		gap: 8px 18px;
+		padding-top: 12px;
+		color: var(--site-muted);
+		font-size: 12px;
+	}
+	.legend > span {
+		display: inline-flex;
+		align-items: center;
+		gap: 7px;
+	}
+	.swatch {
+		display: inline-block;
+		width: 8px;
+		height: 8px;
+		border-radius: 50%;
+	}
+	.empty {
+		padding: 70px 0;
+		text-align: center;
+		color: var(--site-muted);
+	}
+</style>