first pass analytics redo

src/lib/components/stats/HabitLab.svelte

@@ -0,0 +1,68 @@
+<script lang="ts">
+	import Container from '$lib/components/Container.svelte';
+	import MiniLineChart from '$lib/components/charts/MiniLineChart.svelte';
+	import BarList from '$lib/components/charts/BarList.svelte';
+	import CalendarHeatmap from '$lib/components/charts/CalendarHeatmap.svelte';
+	import HeatmapGrid from '$lib/components/charts/HeatmapGrid.svelte';
+	import type { SnapshotPayload } from '$lib/types/stats';
+
+	interface Props {
+		payload: SnapshotPayload;
+	}
+	let { payload }: Props = $props();
+
+	const dayLabels = ['Sun', 'Mon', 'Tue', 'Wed', 'Thu', 'Fri', 'Sat'];
+	const hourLabels = Array.from({ length: 24 }, (_, h) => (h % 3 === 0 ? String(h) : ''));
+</script>
+
+<section class="flex flex-col gap-3">
+	<h2 class="text-lg font-bold text-gray-100">5 · Habit Lab</h2>
+
+	<div class="grid gap-3 md:grid-cols-2">
+		<Container class="p-4 w-full items-stretch text-left gap-2">
+			<p class="font-semibold text-gray-100">Streak survival</p>
+			<p class="text-xs text-gray-400">
+				If you've played N days in a row, how likely are you to play day N+1.
+			</p>
+			<MiniLineChart
+				series={[
+					{
+						name: 'Survival',
+						color: '#34d399',
+						points: payload.habit.streakSurvival.map((s) => ({ date: String(s.length), value: s.probability }))
+					}
+				]}
+				showLegend={false}
+				ySuffix="%"
+			/>
+		</Container>
+
+		<Container class="p-4 w-full items-stretch text-left gap-2">
+			<p class="font-semibold text-gray-100">Current streak lengths</p>
+			<p class="text-xs text-gray-400">Players whose current run has reached each length.</p>
+			<BarList
+				items={payload.habit.streakLengths.map((b) => ({ label: `${b.label} days`, value: b.value, color: 'rgba(251,191,36,0.5)' }))}
+			/>
+		</Container>
+	</div>
+
+	<Container class="p-4 w-full items-stretch text-left gap-2">
+		<p class="font-semibold text-gray-100">Daily finishes (last 120 days)</p>
+		<CalendarHeatmap data={payload.habit.calendar} />
+	</Container>
+
+	<Container class="p-4 w-full items-stretch text-left gap-2">
+		<p class="font-semibold text-gray-100">When people play</p>
+		<p class="text-xs text-gray-400">
+			Finishes by weekday and hour. Times are server time (UTC) and therefore approximate.
+		</p>
+		<HeatmapGrid
+			rowLabels={dayLabels}
+			colLabels={hourLabels}
+			values={payload.habit.weekdayHour}
+			color="96,165,250"
+			cellSize={16}
+			format={(v) => String(v)}
+		/>
+	</Container>
+</section>