Dashboard: Color-coded charts, 3-col layout

- Three-column responsive grid (3 → 2 → 1), wider max width (1800px)
- Sticky slim header; range buttons reset chart zoom on click
- Per-repo star charts: cmdr in gold, mtp-rs in purple
- Color dots on metrics: gold for getcmdr.com, purple for mtp-rs, autumn green for veszelovszki.com
- `Chart.svelte`: added `colors`, `xMin`/`xMax` props and scroll-to-zoom

Author: vdavid

apps/analytics-dashboard/CLAUDE.md

@@ -89,6 +89,12 @@ aggregate numbers. A true funnel would require cross-site user identity tracking
 
 **Decision**: Dark mode only. **Why**: Internal tool, always viewed on a laptop. Saves effort.
 
+**Decision**: Consistent color coding across the dashboard. **Why**: Visual clarity when scanning metrics.
+- **Gold (`#ffc206`)**: getcmdr.com / vdavid/cmdr — the primary product
+- **Purple (`#a78bfa`)**: vdavid/mtp-rs — the library repo
+- **Autumn green (`#8faa3b`)**: veszelovszki.com — David's personal site
+These colors are used in metric dots, chart strokes, and chart fills. Keep them consistent when adding new UI.
+
 **Decision**: Single page, not multi-page. **Why**: Only six sections. Scroll is simpler than navigation.
 
 **Decision**: uPlot for charts. **Why**: ~45 KB, fast canvas rendering, simple API. No wrapper needed.

apps/analytics-dashboard/src/lib/components/Chart.svelte

@@ -8,33 +8,81 @@
         data: uPlot.AlignedData
         /** Series labels (excluding the timestamp series). */
         labels?: string[]
+        /** Custom stroke colors per series. Falls back to gold/grey. */
+        colors?: string[]
         /** Chart height in pixels. */
         height?: number
+        /** Default X-axis min (unix seconds). Scroll to zoom overrides this. */
+        xMin?: number | null
+        /** Default X-axis max (unix seconds). Scroll to zoom overrides this. */
+        xMax?: number | null
     }
 
-    let { data, labels = [], height = 200 }: Props = $props()
+    let { data, labels = [], colors = [], height = 200, xMin = null, xMax = null }: Props = $props()
+
+    let zoomedXMin: number | null = $state(null)
+    let zoomedXMax: number | null = $state(null)
+
+    // Reset zoom when external xMin/xMax change (e.g. range switch)
+    $effect(() => {
+        void xMin
+        void xMax
+        zoomedXMin = null
+        zoomedXMax = null
+    })
 
     let container: HTMLDivElement
     let chart: uPlot | null = null
 
+    const defaultColors = ['#ffc206', '#a1a1aa', '#8b5cf6', '#10b981']
+
+    function colorAt(i: number): string {
+        return colors[i] ?? defaultColors[i] ?? '#a1a1aa'
+    }
+
+    function handleWheel(e: WheelEvent) {
+        e.preventDefault()
+        if (data[0].length < 2) return
+        const dataXMin = data[0][0] as number
+        const dataXMax = data[0][data[0].length - 1] as number
+        const zoomFactor = e.deltaY > 0 ? 1.3 : 1 / 1.3
+        const rect = (e.currentTarget as HTMLElement).getBoundingClientRect()
+        const fraction = Math.max(0, Math.min(1, (e.clientX - rect.left) / rect.width))
+
+        const curMin = zoomedXMin ?? xMin ?? dataXMin
+        const curMax = zoomedXMax ?? xMax ?? dataXMax
+        const range = curMax - curMin
+        const center = curMin + range * fraction
+        const newRange = Math.min(range * zoomFactor, dataXMax - dataXMin)
+
+        if (newRange >= dataXMax - dataXMin) {
+            zoomedXMin = null
+            zoomedXMax = null
+        } else {
+            zoomedXMin = Math.max(dataXMin, center - newRange * fraction)
+            zoomedXMax = Math.min(dataXMax, zoomedXMin + newRange)
+        }
+    }
+
     function buildOpts(width: number): uPlot.Options {
         const series: uPlot.Series[] = [
             {}, // timestamp series (x-axis)
             ...labels.map((label, i) => ({
                 label,
-                stroke: i === 0 ? '#ffc206' : '#a1a1aa',
+                stroke: colorAt(i),
                 width: 2,
-                fill: i === 0 ? 'rgba(255, 194, 6, 0.08)' : undefined,
+                fill: colorAt(i) + '14', // ~8% opacity
             })),
         ]
 
         // If no labels provided, add a default series
         if (labels.length === 0 && data.length > 1) {
             for (let i = 1; i < data.length; i++) {
+                const c = colorAt(i - 1)
                 series.push({
-                    stroke: i === 1 ? '#ffc206' : '#a1a1aa',
+                    stroke: c,
                     width: 2,
-                    fill: i === 1 ? 'rgba(255, 194, 6, 0.08)' : undefined,
+                    fill: c + '14',
                 })
             }
         }
@@ -68,11 +116,23 @@
         }
     }
 
+    function applyXScale() {
+        if (!chart) return
+        const effMin = zoomedXMin ?? xMin
+        const effMax = zoomedXMax ?? xMax
+        if (effMin != null && effMax != null) {
+            chart.setScale('x', { min: effMin, max: effMax })
+        } else if (data[0].length > 0) {
+            chart.setScale('x', { min: data[0][0] as number, max: data[0][data[0].length - 1] as number })
+        }
+    }
+
     function createChart() {
         if (!container || data[0].length === 0) return
         chart?.destroy()
         const opts = buildOpts(container.clientWidth)
         chart = new uPlot(opts, data, container)
+        applyXScale()
     }
 
     onMount(() => {
@@ -94,10 +154,17 @@
 
     // Recreate chart when data changes
     $effect(() => {
-        // Touch data to subscribe to it
         void data
         if (container) createChart()
     })
+
+    // Apply zoom when it changes
+    $effect(() => {
+        void zoomedXMin
+        void zoomedXMax
+        applyXScale()
+    })
 </script>
 
-<div bind:this={container} class="w-full"></div>
+<!-- svelte-ignore a11y_no_static_element_interactions -->
+<div bind:this={container} class="w-full" onwheel={handleWheel}></div>

apps/analytics-dashboard/src/lib/server/sources/umami.ts

@@ -120,7 +120,7 @@ export function parseUmamiMetrics(raw: unknown): UmamiMetricItem[] {
 }
 
 export async function fetchUmamiData(env: UmamiEnv, range: TimeRange): Promise<SourceResult<UmamiData>> {
-  const cached = await cacheGet<UmamiData>('umami', range)
+  const cached = await cacheGet<UmamiData>('umami-v2', range)
   if (cached) return { ok: true, data: cached }
 
   try {
@@ -137,7 +137,7 @@ export async function fetchUmamiData(env: UmamiEnv, range: TimeRange): Promise<S
     ])
 
     const data: UmamiData = { personalSite, website, websiteReferrers, websitePages, websiteCountries, downloadEvents }
-    await cacheSet('umami', range, data)
+    await cacheSet('umami-v2', range, data)
     return { ok: true, data }
   } catch (e) {
     return { ok: false, error: `Umami: ${e instanceof Error ? e.message : String(e)}` }

apps/analytics-dashboard/src/routes/+page.svelte

@@ -81,6 +81,17 @@
     const ranges = ['24h', '7d', '30d'] as const
     const downloadSyncKey = 'dl-timelines'
 
+    // Color palette
+    const COLOR_GOLD = '#ffc206'
+    const COLOR_PURPLE = '#a78bfa'
+    const COLOR_GREEN = '#8faa3b' // autumn-y green for veszelovszki.com
+
+    /** Time range in seconds for the selected range. Used as default zoom for star charts. */
+    const rangeSeconds: Record<string, number> = { '24h': 86400, '7d': 7 * 86400, '30d': 30 * 86400 }
+    function starChartXMin(): number {
+        return Date.now() / 1000 - (rangeSeconds[data.range] ?? 7 * 86400)
+    }
+
     const regionNames = new Intl.DisplayNames(['en'], { type: 'region' })
     function formatCountry(code: string): string {
         const name = regionNames.of(code.toUpperCase())
@@ -153,23 +164,23 @@
     }
 </script>
 
-<div class="mx-auto max-w-6xl px-6 py-8">
-    <!-- Header -->
-    <header class="mb-8 flex flex-wrap items-center justify-between gap-4">
-        <h1 class="text-2xl font-bold text-text-primary">Cmdr analytics</h1>
+<div class="mx-auto max-w-[1800px] px-6 pb-8 pt-14">
+    <!-- Header (sticky) -->
+    <header class="fixed inset-x-0 top-0 z-40 flex items-center justify-between gap-4 border-b border-border bg-surface/90 px-6 py-2 backdrop-blur-sm">
+        <h1 class="text-lg font-bold text-text-primary">Cmdr analytics</h1>
 
         <div class="flex items-center gap-3">
             <div class="flex rounded-lg border border-border bg-surface p-0.5">
                 {#each ranges as r}
-                    <a
-                        href="?range={r}"
-                        class="rounded-md px-3 py-1.5 text-sm font-medium transition-colors
+                    <button
+                        onclick={() => { zoomXMin = null; zoomXMax = null; if (r !== data.range) window.location.href = `?range=${r}` }}
+                        class="rounded-md px-3 py-1 text-sm font-medium transition-colors
                             {data.range === r
                             ? 'bg-accent text-accent-contrast'
                             : 'text-text-secondary hover:text-text-primary'}"
                     >
                         {r}
-                    </a>
+                    </button>
                 {/each}
             </div>
             <span class="text-xs text-text-tertiary">
@@ -179,7 +190,7 @@
     </header>
 
     <!-- Sections -->
-    <div class="space-y-8">
+    <div class="grid grid-cols-1 gap-6 md:grid-cols-2 xl:grid-cols-3">
         <!-- 1. Awareness -->
         <section class="rounded-xl border border-border bg-surface p-6">
             <div class="mb-4">
@@ -197,8 +208,8 @@
 
                 {@render metricRow([
                     { label: 'Total page views', value: formatNumber(totalPageviews), delta },
-                    { label: 'veszelovszki.com views', value: formatNumber(umami.personalSite.pageviews.value) },
-                    { label: 'getcmdr.com views', value: formatNumber(umami.website.pageviews.value) },
+                    { label: 'veszelovszki.com views', value: formatNumber(umami.personalSite.pageviews.value), color: COLOR_GREEN },
+                    { label: 'getcmdr.com views', value: formatNumber(umami.website.pageviews.value), color: COLOR_GOLD },
                 ])}
 
                 {#if umami.websiteReferrers.length > 0}
@@ -210,23 +221,30 @@
 
                 {#if data.githubStars.ok}
                     {@const stars = data.githubStars.data}
+                    {@const repoColors: Record<string, string> = { 'vdavid/cmdr': COLOR_GOLD, 'vdavid/mtp-rs': COLOR_PURPLE }}
                     <div class="mt-4">
                         <h3 class="mb-2 text-sm font-medium text-text-secondary">GitHub stars</h3>
                         {@render metricRow(
-                            stars.repos.map((r) => ({ label: r.repo, value: formatNumber(r.totalStars) }))
+                            stars.repos.map((r) => ({ label: r.repo, value: formatNumber(r.totalStars), color: repoColors[r.repo] }))
                         )}
-                        {#if stars.combinedDaily.length > 1}
-                            <div class="mt-2">
-                                <Chart
-                                    data={[
-                                        stars.combinedDaily.map((d) => new Date(d.day).getTime() / 1000),
-                                        stars.combinedDaily.map((d) => d.cumulative),
-                                    ]}
-                                    labels={['Total stars']}
-                                    height={160}
-                                />
-                            </div>
-                        {/if}
+                        {#each stars.repos as repo}
+                            {@const c = repoColors[repo.repo] ?? COLOR_GOLD}
+                            {#if repo.daily.length > 1}
+                                <div class="mt-2">
+                                    <Chart
+                                        data={[
+                                            repo.daily.map((d) => new Date(d.day).getTime() / 1000),
+                                            repo.daily.map((d) => d.cumulative),
+                                        ]}
+                                        labels={[repo.repo]}
+                                        colors={[c]}
+                                        height={120}
+                                        xMin={starChartXMin()}
+                                        xMax={Date.now() / 1000}
+                                    />
+                                </div>
+                            {/if}
+                        {/each}
                     </div>
                 {/if}
 
@@ -605,11 +623,16 @@
     </div>
 {/snippet}
 
-{#snippet metricRow(metrics: Array<{ label: string; value: string; delta?: { text: string; positive: boolean } }>)}
+{#snippet metricRow(metrics: Array<{ label: string; value: string; delta?: { text: string; positive: boolean }; color?: string }>)}
     <div class="flex flex-wrap gap-6">
         {#each metrics as metric}
             <div>
-                <p class="text-xs text-text-tertiary">{metric.label}</p>
+                <p class="flex items-center gap-1.5 text-xs text-text-tertiary">
+                    {#if metric.color}
+                        <span class="inline-block h-2 w-2 rounded-full" style="background: {metric.color}"></span>
+                    {/if}
+                    {metric.label}
+                </p>
                 <div class="flex items-baseline gap-2">
                     <p class="text-2xl font-bold tabular-nums text-text-primary">{metric.value}</p>
                     {#if metric.delta}