From e04fcaa338acee2d44f175c253e8d1561877a3ad Mon Sep 17 00:00:00 2001
From: Ewan Croft <contact@ewancroft.uk>
Date: Thu, 13 Aug 2026 15:36:51 +0100
Subject: [PATCH] feat(tourmaline): add cumulative top-artists line chart
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

Running cumulative scrobble total per month for the top 10 artists by
play count, one line per artist, 10-color fixed palette. Registers
LineController in chart.ts (bar/radar were registered, line wasn't).

Built by a background subagent (worktree-isolated), merged in by hand:
the agent's worktree branched before monthlyArtistPlays was exposed on
ListenerProfile, so it independently re-added the same field — only
the LineController registration, the new component, and the +page.svelte
wiring were taken; the duplicate field/wiring re-addition was dropped
since it already existed on main.
---
 packages/tourmaline/src/lib/chart.ts          |   2 +
 .../src/routes/profile/[did]/+page.svelte     |  14 +++
 .../profile/[did]/CumulativeItemsChart.svelte | 115 ++++++++++++++++++
 3 files changed, 131 insertions(+)
 create mode 100644 packages/tourmaline/src/routes/profile/[did]/CumulativeItemsChart.svelte

diff --git a/packages/tourmaline/src/lib/chart.ts b/packages/tourmaline/src/lib/chart.ts
index d1a9e24..4eb4338 100644
--- a/packages/tourmaline/src/lib/chart.ts
+++ b/packages/tourmaline/src/lib/chart.ts
@@ -11,6 +11,7 @@ import {
   BarController,
   BarElement,
   RadarController,
+  LineController,
   PointElement,
   LineElement,
   RadialLinearScale,
@@ -25,6 +26,7 @@ Chart.register(
   BarController,
   BarElement,
   RadarController,
+  LineController,
   PointElement,
   LineElement,
   RadialLinearScale,
diff --git a/packages/tourmaline/src/routes/profile/[did]/+page.svelte b/packages/tourmaline/src/routes/profile/[did]/+page.svelte
index 9c22d09..7502593 100644
--- a/packages/tourmaline/src/routes/profile/[did]/+page.svelte
+++ b/packages/tourmaline/src/routes/profile/[did]/+page.svelte
@@ -24,6 +24,7 @@
 	import ServiceOrigins from './ServiceOrigins.svelte';
 	import MinutesListened from './MinutesListened.svelte';
 	import MusicEvolution from './MusicEvolution.svelte';
+	import CumulativeItemsChart from './CumulativeItemsChart.svelte';
 	import RemarkableDays from './RemarkableDays.svelte';
 	import Discovery from './Discovery.svelte';
 	import Milestones from './Milestones.svelte';
@@ -421,6 +422,19 @@
 				</div>
 			{/if}
 
+			{#if profile.monthlyArtistPlays.length >= 3 && profile.topArtists.length > 0}
+				<div class="mb-6 rounded border border-[var(--border)] bg-[var(--surface)] p-3 sm:mb-8 sm:p-4">
+					<h2 class="mb-1 text-base font-semibold sm:text-lg">Cumulative Top Artists</h2>
+					<p class="mb-3 text-xs text-[var(--text-dim)]">
+						Running scrobble totals for your top 10 artists, month over month
+					</p>
+					<CumulativeItemsChart
+						monthlyArtistPlays={profile.monthlyArtistPlays}
+						topArtists={profile.topArtists}
+					/>
+				</div>
+			{/if}
+
 			{#if profile.phases.length >= 2}
 				<div class="mb-6 sm:mb-8">
 					<ListeningPhases phases={profile.phases} />
diff --git a/packages/tourmaline/src/routes/profile/[did]/CumulativeItemsChart.svelte b/packages/tourmaline/src/routes/profile/[did]/CumulativeItemsChart.svelte
new file mode 100644
index 0000000..46021b1
--- /dev/null
+++ b/packages/tourmaline/src/routes/profile/[did]/CumulativeItemsChart.svelte
@@ -0,0 +1,115 @@
+<script lang="ts">
+	import { Chart } from '$lib/chart';
+	import type { ListenerProfile } from '$lib/types';
+
+	let {
+		monthlyArtistPlays = [],
+		topArtists = []
+	}: {
+		monthlyArtistPlays: ListenerProfile['monthlyArtistPlays'];
+		topArtists: ListenerProfile['topArtists'];
+	} = $props();
+
+	let canvas: HTMLCanvasElement;
+	let chart: Chart | null = null;
+
+	// Small fixed palette, cycled — spread across hues at a brightness similar
+	// to the existing #4ade80 accent green used elsewhere in this codebase.
+	const PALETTE = [
+		'#4ade80', // green
+		'#60a5fa', // blue
+		'#f472b6', // pink
+		'#fb923c', // orange
+		'#a78bfa', // violet
+		'#34d399', // emerald
+		'#facc15', // yellow
+		'#f87171', // red
+		'#22d3ee', // cyan
+		'#c084fc' // purple
+	];
+
+	/**
+	 * For the top 10 artists (by total play count), compute their running
+	 * cumulative scrobble total across the full monthly timeline.
+	 */
+	const series = $derived.by(() => {
+		const months = [...monthlyArtistPlays].sort((a, b) => a[0].localeCompare(b[0]));
+		const labels = months.map(([month]) => month);
+
+		const top10 = topArtists.slice(0, 10);
+		const datasets = top10.map((artist, i) => {
+			let running = 0;
+			const data = months.map(([, plays]) => {
+				const entry = plays.find(([name]) => name === artist.name);
+				running += entry ? entry[1] : 0;
+				return running;
+			});
+			const colour = PALETTE[i % PALETTE.length];
+			return { name: artist.name, data, colour };
+		});
+
+		return { labels, datasets };
+	});
+
+	$effect(() => {
+		if (!canvas || series.labels.length === 0 || series.datasets.length === 0) return;
+
+		const chartDatasets = series.datasets.map((d) => ({
+			label: d.name,
+			data: d.data,
+			borderColor: d.colour,
+			backgroundColor: d.colour,
+			pointRadius: 0,
+			borderWidth: 2,
+			tension: 0.15
+		}));
+
+		if (chart) {
+			chart.data.labels = series.labels;
+			chart.data.datasets = chartDatasets;
+			chart.update('none');
+			return;
+		}
+
+		chart = new Chart(canvas, {
+			type: 'line',
+			data: {
+				labels: series.labels,
+				datasets: chartDatasets
+			},
+			options: {
+				responsive: true,
+				maintainAspectRatio: false,
+				animation: false,
+				interaction: { mode: 'nearest', axis: 'x', intersect: false },
+				plugins: {
+					legend: {
+						display: true,
+						labels: { color: '#9ca3af', font: { size: 10 }, boxWidth: 12 }
+					},
+					tooltip: { mode: 'nearest', axis: 'x', intersect: false }
+				},
+				scales: {
+					x: {
+						ticks: { color: '#9ca3af', font: { size: 10 }, maxRotation: 0, autoSkip: true },
+						grid: { display: false }
+					},
+					y: {
+						ticks: { color: '#9ca3af', font: { size: 10 } },
+						grid: { color: 'rgba(255,255,255,0.05)' },
+						title: {
+							display: true,
+							text: 'Cumulative scrobbles',
+							color: '#6b7280',
+							font: { size: 11 }
+						}
+					}
+				}
+			}
+		});
+	});
+</script>
+
+<div class="h-64 sm:h-80">
+	<canvas bind:this={canvas}></canvas>
+</div>
-- 
2.51.2