@harshankur/viewcounter 3.1.0 → 3.2.0

package/admin/js/charts.js

@@ -1,23 +1,31 @@
 /**
- * Charts for the insights panel: stat tiles, a views-over-time line, a world
- * map, and breakdown bars. Hand-drawn SVG, no library, no HTML parsing.
+ * Charts for the Overview: stat tiles with sparklines, a trend line for any
+ * headline number, ranked tables with bars, a world map, a weekday-by-hour
+ * heatmap, and a per-minute column chart. Hand-drawn SVG, no library, no
+ * HTML parsing.
  *
  * Built to the data-viz method the project follows:
- *  - single-series marks in one hue (--chart-series), so no legend box;
- *  - the map is a one-hue sequential scale (--map-1..--map-5) with a separate
- *    "no views" neutral, validated for monotone lightness in both themes;
+ *  - one series per chart, in one hue (--chart-series), so no legend box: the
+ *    card title names the series;
+ *  - magnitude on the map and the heatmap is a one-hue sequential ramp
+ *    (--map-1..--map-5), validated for monotone lightness in both themes,
+ *    with a separate "none" neutral (--map-0);
  *  - thin marks, 2px lines, >= 8px markers with a surface ring, hairline grid;
- *  - every value is readable without hovering (direct labels, a ranked list
- *    beside the map, a table view of the trend), and hover and keyboard focus
- *    show the same tooltip.
+ *  - every value is readable without hovering (ranked tables, a table view
+ *    for the trend and the heatmap, a list beside the map), and hover and
+ *    keyboard focus show the same tooltip.
  */
 
+import { clampText } from './clamp.js';
 import { el, replaceChildren } from './dom.js';
-import { formatNumber, formatPercent, formatCompact, formatPeriod } from './format.js';
+import { formatNumber, formatPercent, formatPeriod } from './format.js';
+import { icon } from './icons.js';
 import { t, tOr, currentLocale } from './i18n.js';
 import { CHART, KEY } from './constants.js';
 
 const SVG_NS = 'http://www.w3.org/2000/svg';
+const MINUTE_MS = 60 * 1000;
+const HOUR_MS = 60 * MINUTE_MS;
 
 /** An SVG element with attributes and children. */
 function svg(tag, attrs = {}, children = []) {
@@ -29,11 +37,14 @@ function svg(tag, attrs = {}, children = []) {
     return node;
 }
 
+const text = (value) => document.createTextNode(value);
+const present = (value) => value !== null && value !== undefined && !Number.isNaN(value);
+
 // ---- Tooltip -----------------------------------------------------------------
 
 /**
- * One tooltip per chart card. Values lead, labels follow; rows are keyed with
- * a short stroke of the mark's colour, never a filled box.
+ * One tooltip per chart. Values lead, labels follow; the row for the charted
+ * series is keyed with a short stroke of the mark's colour, never a box.
  */
 export function createTooltip(host) {
     const node = el('div', { className: 'chart-tooltip', attrs: { role: 'status', 'aria-live': 'polite' } });
@@ -83,95 +94,188 @@ function anchorOf(host, target) {
 // ---- Stat tiles --------------------------------------------------------------
 
 /**
- * A KPI row: label, then value. Proportional figures, compact above a
- * thousand, with the exact number in the title.
- * @param {Array<{ label: string, value: number, format?: 'number'|'percent', hint?: string }>} tiles
+ * A tiny line of a series, for a stat tile. Decoration: the tile's number and
+ * the trend chart carry the values. Gaps (no data) break the line.
+ * @param {Array<number|null>} values
+ */
+export function sparkline(values) {
+    const { WIDTH, HEIGHT, PAD } = CHART.SPARK;
+    const root = svg('svg', {
+        class: 'sparkline', viewBox: `0 0 ${WIDTH} ${HEIGHT}`, preserveAspectRatio: 'none',
+        'aria-hidden': 'true', focusable: 'false',
+    });
+    const known = values.filter(present);
+    if (known.length < 2) return root;
+    const max = Math.max(...known);
+    const min = Math.min(0, ...known);
+    const x = (index) => (index / (values.length - 1)) * WIDTH;
+    const y = (value) => PAD + (HEIGHT - 2 * PAD) * (1 - (max === min ? 0.5 : (value - min) / (max - min)));
+    let d = '';
+    let drawing = false;
+    values.forEach((value, index) => {
+        if (!present(value)) {
+            drawing = false;
+            return;
+        }
+        d += `${drawing ? 'L' : 'M'}${x(index).toFixed(1)},${y(value).toFixed(1)}`;
+        drawing = true;
+    });
+    root.append(svg('path', { class: 'sparkline-line', d, 'vector-effect': 'non-scaling-stroke' }));
+    return root;
+}
+
+/**
+ * The headline numbers: label, value, change against the period before, and
+ * a sparkline of the period. With `onSelect`, each tile is a toggle button
+ * that picks the metric the trend chart shows.
+ *
+ * @param {Array<{ key: string, label: string, value: string, exact?: string,
+ *   delta?: { text: string, direction: 'up'|'down'|'flat', tone: 'good'|'bad'|'neutral', period: string } | null,
+ *   note?: string, spark: Array<number|null> }>} tiles
+ * @param {{ selected?: string, onSelect?: (key: string) => void, label?: string }} [options]
  */
-export function statTiles(tiles) {
-    return el('div', { className: 'stat-tiles' }, tiles.map((tile) => {
-        const exact = tile.format === 'percent' ? formatPercent(tile.value) : formatNumber(tile.value);
-        const shown = tile.format === 'percent' ? exact : formatCompact(tile.value);
-        return el('div', { className: 'stat-tile' }, [
-            el('div', { className: 'stat-label', text: tile.label }),
-            el('div', { className: 'stat-value', text: shown, attrs: shown === exact ? {} : { title: exact } }),
-            tile.hint ? el('div', { className: 'stat-hint', text: tile.hint }) : null,
-        ]);
+export function statTiles(tiles, { selected, onSelect, label } = {}) {
+    return el('div', { className: 'stat-tiles', attrs: { role: 'group', 'aria-label': label ?? null } }, tiles.map((tile) => {
+        const direction = { up: 'arrowUp', down: 'arrowDown' }[tile.delta?.direction];
+        const content = [
+            el('span', { className: 'stat-label', text: tile.label }),
+            el('span', {
+                className: 'stat-value',
+                text: tile.value,
+                attrs: tile.exact && tile.exact !== tile.value ? { title: tile.exact } : {},
+            }),
+            tile.delta
+                ? el('span', { className: `stat-delta tone-${tile.delta.tone}` }, [
+                    direction ? icon(direction) : null,
+                    el('span', { className: 'stat-delta-value', text: tile.delta.text }),
+                    el('span', { className: 'stat-delta-period', text: tile.delta.period }),
+                ])
+                : el('span', { className: 'stat-delta stat-note', text: tile.note ?? '' }),
+            sparkline(tile.spark),
+        ];
+        if (!onSelect) return el('div', { className: 'stat-tile', dataset: { metric: tile.key } }, content);
+        const active = tile.key === selected;
+        return el('button', {
+            className: `stat-tile selectable${active ? ' active' : ''}`,
+            attrs: { type: 'button', 'aria-pressed': String(active) },
+            dataset: { metric: tile.key },
+            on: { click: () => onSelect(tile.key) },
+        }, content);
     }));
 }
 
 // ---- Nice axis ---------------------------------------------------------------
 
-/** A clean upper bound and tick step for a count axis. */
-function niceScale(max, ticks = CHART.Y_TICKS) {
-    if (max <= 0) return { top: ticks, step: 1 };
-    const rough = max / ticks;
+/**
+ * A clean upper bound and tick step for an axis from zero.
+ * @param {number} max
+ * @param {{ integer?: boolean }} [options] integer keeps steps whole (counts, milliseconds)
+ */
+export function niceScale(max, { integer = true } = {}) {
+    if (!(max > 0)) return integer ? { top: CHART.Y_TICKS, step: 1 } : { top: 1, step: 1 / CHART.Y_TICKS };
+    const rough = max / CHART.Y_TICKS;
     const magnitude = 10 ** Math.floor(Math.log10(rough));
-    const step = [1, 2, 2.5, 5, 10].map((m) => m * magnitude).find((candidate) => candidate >= rough);
-    const whole = Math.max(1, Math.round(step));
-    return { top: Math.ceil(max / whole) * whole, step: whole };
+    let step = [1, 2, 2.5, 5, 10].map((m) => m * magnitude).find((candidate) => candidate >= rough);
+    if (integer) step = Math.max(1, Math.round(step));
+    return { top: Math.ceil(max / step - 1e-9) * step, step };
 }
 
-// ---- Views over time ---------------------------------------------------------
+// ---- Over time -----------------------------------------------------------------
 
 /**
- * A single-series line with a soft area wash, a crosshair that snaps to the
- * nearest period, and the same readout from the keyboard (arrow keys).
+ * One metric over time: a line (with a soft wash under counts), a crosshair
+ * that snaps to the nearest period, and the same readout from the keyboard
+ * (arrow keys, Home, End). A period with nothing to average is a gap, not a
+ * zero.
  *
- * @param {{ points: Array<{ period: string, views: number, uniqueViews: number }>, bucket: string }} data
- * @returns {HTMLElement}
+ * @param {{ points: object[], bucket: string, lastInProgress?: boolean,
+ *   metric: { label: string, value: (point: object) => number|null, format: (value: number) => string,
+ *     tick?: (value: number) => string, integer?: boolean, area?: boolean } }} data
  */
-export function trendChart({ points, bucket, lastInProgress = false }) {
+export function trendChart({ points, bucket, metric, lastInProgress = false }) {
     const card = el('div', { className: 'chart-body' });
     const tooltip = createTooltip(card);
-    if (points.length === 0) {
-        card.append(el('p', { className: 'chart-empty', text: t('insights.noData') }));
+    const values = points.map((point) => {
+        const value = metric.value(point);
+        return present(value) ? value : null;
+    });
+    const known = values.filter(present);
+    if (known.length === 0) {
+        card.append(el('p', { className: 'chart-empty', text: t('charts.noData') }));
         return card;
     }
 
     const { WIDTH, HEIGHT, MARGIN } = CHART.TREND;
     const plotW = WIDTH - MARGIN.left - MARGIN.right;
     const plotH = HEIGHT - MARGIN.top - MARGIN.bottom;
-    const max = Math.max(...points.map((point) => point.views));
-    const { top, step } = niceScale(max);
+    const max = Math.max(...known);
+    const { top, step } = niceScale(max, { integer: metric.integer !== false });
+    const tick = metric.tick ?? metric.format;
     const x = (index) => MARGIN.left + (points.length === 1 ? plotW / 2 : (index / (points.length - 1)) * plotW);
     const y = (value) => MARGIN.top + plotH - (value / top) * plotH;
 
     const grid = [];
-    for (let value = 0; value <= top; value += step) {
-        grid.push(svg('line', { class: value === 0 ? 'chart-baseline' : 'chart-grid', x1: MARGIN.left, x2: WIDTH - MARGIN.right, y1: y(value), y2: y(value) }));
-        grid.push(svg('text', { class: 'chart-tick', x: MARGIN.left - CHART.TICK_GAP, y: y(value), 'text-anchor': 'end', 'dominant-baseline': 'middle' }, [document.createTextNode(formatCompact(value))]));
+    for (let index = 0; index * step <= top + step / 2; index++) {
+        const value = index * step;
+        grid.push(svg('line', { class: index === 0 ? 'chart-baseline' : 'chart-grid', x1: MARGIN.left, x2: WIDTH - MARGIN.right, y1: y(value), y2: y(value) }));
+        grid.push(svg('text', {
+            class: 'chart-tick', x: MARGIN.left - CHART.TICK_GAP, y: y(value), 'text-anchor': 'end', 'dominant-baseline': 'middle',
+        }, [text(tick(value))]));
     }
 
-    const labelIndexes = [...new Set([0, Math.floor((points.length - 1) / 2), points.length - 1])];
+    const last = points.length - 1;
+    const labelIndexes = [...new Set([0, Math.floor(last / 2), last])];
     const xLabels = labelIndexes.map((index) => svg('text', {
         class: 'chart-tick',
         x: x(index),
         y: HEIGHT - MARGIN.bottom + CHART.X_LABEL_GAP,
-        'text-anchor': index === 0 ? 'start' : index === points.length - 1 ? 'end' : 'middle',
-    }, [document.createTextNode(formatPeriod(points[index].period, bucket))]));
-
-    const line = points.map((point, index) => `${index === 0 ? 'M' : 'L'}${x(index).toFixed(1)},${y(point.views).toFixed(1)}`).join('');
-    const area = `${line}L${x(points.length - 1).toFixed(1)},${y(0)}L${x(0).toFixed(1)},${y(0)}Z`;
-    const last = points.length - 1;
+        'text-anchor': index === 0 ? 'start' : index === last ? 'end' : 'middle',
+    }, [text(formatPeriod(points[index].period, bucket))]));
+
+    // Segments between gaps; a lone value between two gaps is a dot.
+    let line = '';
+    let drawing = false;
+    const lonely = [];
+    values.forEach((value, index) => {
+        if (value === null) {
+            drawing = false;
+            return;
+        }
+        line += `${drawing ? 'L' : 'M'}${x(index).toFixed(1)},${y(value).toFixed(1)}`;
+        if (!drawing && values[index + 1] === null) lonely.push(index);
+        if (!drawing && index === last) lonely.push(index);
+        drawing = true;
+    });
+    const gapless = known.length === values.length;
+    const area = gapless && metric.area !== false
+        ? `${line}L${x(last).toFixed(1)},${y(0)}L${x(0).toFixed(1)},${y(0)}Z`
+        : null;
+    const lastKnown = values.findLastIndex(present);
 
     const crosshair = svg('line', { class: 'chart-crosshair', y1: MARGIN.top, y2: MARGIN.top + plotH, visibility: 'hidden' });
     const focusDot = svg('circle', { class: 'chart-dot', r: CHART.DOT_RADIUS, visibility: 'hidden' });
+    const peak = values.indexOf(max);
 
     const plot = svg('svg', {
         class: 'trend-svg',
         viewBox: `0 0 ${WIDTH} ${HEIGHT}`,
         role: 'img',
         tabindex: 0,
-        'aria-label': t('insights.trendLabel', {
+        'aria-label': t('charts.trendLabel', {
+            metric: metric.label,
             from: formatPeriod(points[0].period, bucket),
             to: formatPeriod(points[last].period, bucket),
-            peak: formatNumber(max),
+            peak: metric.format(max),
+            peakAt: formatPeriod(points[peak].period, bucket, { long: true }),
         }),
     }, [
         ...grid,
-        svg('path', { class: 'chart-area', d: area }),
+        area ? svg('path', { class: 'chart-area', d: area }) : null,
         svg('path', { class: 'chart-line', d: line }),
-        svg('circle', { class: 'chart-dot', cx: x(last), cy: y(points[last].views), r: CHART.DOT_RADIUS }),
+        ...lonely.filter((index) => index !== lastKnown).map((index) => svg('circle', {
+            class: 'chart-dot', cx: x(index), cy: y(values[index]), r: CHART.DOT_RADIUS,
+        })),
+        svg('circle', { class: 'chart-dot', cx: x(lastKnown), cy: y(values[lastKnown]), r: CHART.DOT_RADIUS }),
         ...xLabels,
         crosshair,
         focusDot,
@@ -180,23 +284,18 @@ export function trendChart({ points, bucket, lastInProgress = false }) {
     let activeIndex = -1;
     function highlight(index, at) {
         activeIndex = index;
-        const point = points[index];
+        const value = values[index];
         crosshair.setAttribute('x1', x(index));
         crosshair.setAttribute('x2', x(index));
         crosshair.setAttribute('visibility', 'visible');
         focusDot.setAttribute('cx', x(index));
-        focusDot.setAttribute('cy', y(point.views));
-        focusDot.setAttribute('visibility', 'visible');
-        const inProgress = lastInProgress && index === last;
+        focusDot.setAttribute('cy', y(value ?? 0));
+        focusDot.setAttribute('visibility', value === null ? 'hidden' : 'visible');
+        const period = formatPeriod(points[index].period, bucket, { long: true });
         tooltip.show({
-            title: inProgress
-                ? t('insights.inProgress', { period: formatPeriod(point.period, bucket, { long: true }) })
-                : formatPeriod(point.period, bucket, { long: true }),
-            rows: [
-                { value: formatNumber(point.views), label: t('insights.views'), key: true },
-                { value: formatNumber(point.uniqueViews), label: t('insights.uniqueViews') },
-            ],
-        }, at ?? anchorOf(card, focusDot));
+            title: lastInProgress && index === last ? t('charts.inProgress', { period }) : period,
+            rows: [{ value: value === null ? t('common.none') : metric.format(value), label: metric.label, key: true }],
+        }, at ?? anchorOf(card, crosshair));
     }
     function reset() {
         activeIndex = -1;
@@ -209,14 +308,14 @@ export function trendChart({ points, bucket, lastInProgress = false }) {
         const box = plot.getBoundingClientRect();
         const svgX = ((event.clientX - box.left) / box.width) * WIDTH;
         const ratio = (svgX - MARGIN.left) / plotW;
-        const index = Math.min(points.length - 1, Math.max(0, Math.round(ratio * (points.length - 1))));
+        const index = Math.min(last, Math.max(0, Math.round(ratio * last)));
         highlight(index, pointIn(card, event));
     });
     plot.addEventListener('pointerleave', reset);
     plot.addEventListener('blur', reset);
     plot.addEventListener('keydown', (event) => {
         const moves = {
-            [KEY.ARROW_RIGHT]: Math.min(points.length - 1, activeIndex + 1),
+            [KEY.ARROW_RIGHT]: Math.min(last, activeIndex + 1),
             [KEY.ARROW_LEFT]: Math.max(0, activeIndex < 0 ? last : activeIndex - 1),
             [KEY.HOME]: 0,
             [KEY.END]: last,
@@ -233,68 +332,75 @@ export function trendChart({ points, bucket, lastInProgress = false }) {
     return card;
 }
 
-/** The trend as a table: the accessible twin of the chart. */
-export function trendTable({ points, bucket }) {
+/**
+ * Every metric per period, as a table: the accessible twin of the trend
+ * chart, and the place to read all of them side by side.
+ * @param {{ points: object[], bucket: string, metrics: Array<{ label: string,
+ *   value: (point: object) => number|null, format: (value: number) => string }> }} data
+ */
+export function trendTable({ points, bucket, metrics }) {
     return el('table', { className: 'chart-table' }, [
         el('thead', {}, [el('tr', {}, [
-            el('th', { text: t('insights.period'), attrs: { scope: 'col' } }),
-            el('th', { text: t('insights.views'), attrs: { scope: 'col' } }),
-            el('th', { text: t('insights.uniqueViews'), attrs: { scope: 'col' } }),
+            el('th', { text: t('charts.period'), attrs: { scope: 'col' } }),
+            ...metrics.map((metric) => el('th', { text: metric.label, attrs: { scope: 'col' } })),
         ])]),
-        el('tbody', {}, points.map((point) => el('tr', {}, [
-            el('td', { text: formatPeriod(point.period, bucket, { long: true }) }),
-            el('td', { text: formatNumber(point.views) }),
-            el('td', { text: formatNumber(point.uniqueViews) }),
+        el('tbody', {}, [...points].reverse().map((point) => el('tr', {}, [
+            el('th', { text: formatPeriod(point.period, bucket, { long: true }), attrs: { scope: 'row' } }),
+            ...metrics.map((metric) => {
+                const value = metric.value(point);
+                return el('td', { text: present(value) ? metric.format(value) : t('common.none') });
+            }),
         ]))),
     ]);
 }
 
-// ---- Breakdown bars ----------------------------------------------------------
+// ---- Ranked tables -------------------------------------------------------------
 
 /**
- * Ranked horizontal bars for one nominal dimension: one hue, value at the
- * tip, the tail folded into "Other".
+ * A ranked breakdown: each label with a bar behind it scaled to the leading
+ * row, then one column per measure, all visible. A row with `onSelect` is a
+ * button that narrows everything to that value.
  *
- * @param {{ entries: Array<{ value: string|null, views: number }>, total: number,
- *   labelFor: (value: string|null) => string }} data
+ * @param {{ labelHeader: string, columns: Array<{ label: string, value: (row: object) => number|null,
+ *   format: (value: number) => string, className?: string }>,
+ *   rows: Array<{ label: string, detail?: string, bar: number, muted?: boolean,
+ *     onSelect?: () => void, selectLabel?: string }>, empty?: string }} data
  */
-export function barList({ entries, total, labelFor }) {
-    const body = el('div', { className: 'chart-body bar-list' });
-    const tooltip = createTooltip(body);
-    const shown = entries.reduce((sum, entry) => sum + entry.views, 0);
-    const rows = [...entries.map((entry) => ({ label: labelFor(entry.value), views: entry.views }))];
-    if (total > shown) rows.push({ label: t('insights.other'), views: total - shown, other: true });
-    if (rows.length === 0) {
-        body.append(el('p', { className: 'chart-empty', text: t('insights.noData') }));
-        return body;
-    }
-    const max = Math.max(...rows.map((row) => row.views));
-
-    for (const row of rows) {
-        const share = total > 0 ? row.views / total : 0;
-        const bar = el('div', {
-            className: `bar-row${row.other ? ' bar-other' : ''}`,
-            attrs: { tabindex: 0 },
-        }, [
-            el('span', { className: 'bar-label clamp clamp-1', text: row.label, attrs: { title: row.label } }),
-            el('span', { className: 'bar-track' }, [el('span', { className: 'bar-fill' })]),
-            el('span', { className: 'bar-value', text: formatNumber(row.views) }),
-        ]);
-        bar.querySelector('.bar-fill').style.width = `${(row.views / max) * 100}%`;
-        const show = (at) => tooltip.show({
-            title: row.label,
-            rows: [
-                { value: formatNumber(row.views), label: t('insights.views'), key: true },
-                { value: formatPercent(share), label: t('insights.share') },
-            ],
-        }, at);
-        bar.addEventListener('pointermove', (event) => show(pointIn(body, event)));
-        bar.addEventListener('pointerleave', () => tooltip.hide());
-        bar.addEventListener('focus', () => show(anchorOf(body, bar)));
-        bar.addEventListener('blur', () => tooltip.hide());
-        body.append(bar);
-    }
-    return body;
+export function rankTable({ labelHeader, columns, rows, empty }) {
+    if (rows.length === 0) return el('p', { className: 'chart-empty', text: empty ?? t('charts.noData') });
+    return el('table', { className: 'rank-table' }, [
+        el('thead', {}, [el('tr', {}, [
+            el('th', { className: 'rank-label-head', text: labelHeader, attrs: { scope: 'col' } }),
+            ...columns.map((column) => el('th', {
+                className: `rank-num ${column.className ?? ''}`.trim(), text: column.label, attrs: { scope: 'col' },
+            })),
+        ])]),
+        el('tbody', {}, rows.map((row) => {
+            const bar = el('span', { className: 'rank-bar', attrs: { 'aria-hidden': 'true' } });
+            bar.style.width = `${Math.max(0, Math.min(1, row.bar)) * 100}%`;
+            const labelText = [
+                clampText(row.label, { className: 'rank-text' }),
+                row.detail ? clampText(row.detail, { className: 'rank-detail' }) : null,
+            ];
+            const label = row.onSelect
+                ? el('button', {
+                    className: 'rank-select',
+                    attrs: { type: 'button', title: row.selectLabel ?? null, 'aria-label': row.selectLabel ?? null },
+                    on: { click: row.onSelect },
+                }, [bar, ...labelText, icon('filter', { className: 'rank-filter-icon' })])
+                : el('span', { className: 'rank-static' }, [bar, ...labelText]);
+            return el('tr', { className: row.muted ? 'rank-muted' : '' }, [
+                el('th', { className: 'rank-label', attrs: { scope: 'row' } }, [label]),
+                ...columns.map((column) => {
+                    const value = column.value(row);
+                    return el('td', {
+                        className: `rank-num ${column.className ?? ''}`.trim(),
+                        text: present(value) ? column.format(value) : t('common.none'),
+                    });
+                }),
+            ]);
+        })),
+    ]);
 }
 
 // ---- World map ---------------------------------------------------------------
@@ -334,62 +440,72 @@ function classOf(value, breaks) {
     return 1 + Math.round((position / Math.max(1, breaks.length - 1)) * (CHART.MAP_CLASSES - 1));
 }
 
+/** The scale's legend: "none", then each class with its range. */
+function scaleLegend(breaks, noneLabel) {
+    const items = [el('span', { className: 'legend-item' }, [
+        el('span', { className: 'legend-swatch map-0', attrs: { 'aria-hidden': 'true' } }),
+        el('span', { text: noneLabel }),
+    ])];
+    breaks.forEach((bound, index) => {
+        const from = index === 0 ? 1 : breaks[index - 1] + 1;
+        items.push(el('span', { className: 'legend-item' }, [
+            el('span', { className: `legend-swatch map-${classOf(bound, breaks)}`, attrs: { 'aria-hidden': 'true' } }),
+            el('span', { text: from === bound ? formatNumber(bound) : `${formatNumber(from)}–${formatNumber(bound)}` }),
+        ]));
+    });
+    return el('div', { className: 'map-legend' }, items);
+}
+
+/** A region's name in the UI's language, or its code. */
+export function regionName(code) {
+    try {
+        return new Intl.DisplayNames([currentLocale()], { type: 'region' }).of(code) ?? code;
+    } catch {
+        return code;
+    }
+}
+
 /**
- * A choropleth of views by country, for one event type or all of them, with a
- * ranked list beside it that is both the legend's companion and its table view.
+ * A choropleth of views by country, with a ranked list beside it that is both
+ * the legend's companion and its table view. Clicking a country in the list
+ * (with `onSelect`) narrows everything to it.
  *
  * @param {{ countries: Array<{ country: string, eventType: string|null, views: number }>,
- *   type: string|null, total: number }} data type null means every type
+ *   onSelect?: (code: string) => void }} data
  */
-export function worldMap({ countries, type }) {
+export function worldMap({ countries, onSelect }) {
     const body = el('div', { className: 'chart-body map-layout' });
     const mapHost = el('div', { className: 'map-host' });
     const tooltip = createTooltip(mapHost);
-    const list = el('ol', { className: 'country-list', attrs: { 'aria-label': t('insights.topCountries') } });
-    const legend = el('div', { className: 'map-legend' });
-    body.append(el('div', { className: 'map-column' }, [mapHost, legend]), list);
-
-    const regionName = (() => {
-        try {
-            const names = new Intl.DisplayNames([currentLocale()], { type: 'region' });
-            return (code) => names.of(code) ?? code;
-        } catch {
-            return (code) => code;
-        }
-    })();
+    const list = el('ol', { className: 'country-list', attrs: { 'aria-label': t('charts.topCountries') } });
 
-    // Totals per country for the selected type, and the per-type split for tooltips.
+    // Totals per country, and the per-type split for tooltips.
     const byCountry = new Map();
     for (const entry of countries) {
-        const record = byCountry.get(entry.country) || { total: 0, selected: 0, types: [] };
+        const record = byCountry.get(entry.country) || { total: 0, types: [] };
         record.total += entry.views;
-        if (type === null || entry.eventType === type) record.selected += entry.views;
         record.types.push(entry);
         byCountry.set(entry.country, record);
     }
-    const selectedTotal = [...byCountry.values()].reduce((sum, record) => sum + record.selected, 0);
-    const breaks = classBreaks([...byCountry.values()].map((record) => record.selected));
+    const total = [...byCountry.values()].reduce((sum, record) => sum + record.total, 0);
+    const breaks = classBreaks([...byCountry.values()].map((record) => record.total));
 
     function tooltipFor(code) {
         const record = byCountry.get(code);
-        const views = record?.selected ?? 0;
-        const rows = [{ value: formatNumber(views), label: type === null ? t('insights.views') : tOr(`eventTypes.${type}`, type), key: true }];
-        if (record && type === null) {
-            for (const entry of [...record.types].sort((a, b) => b.views - a.views).slice(0, CHART.TOOLTIP_TYPES)) {
-                rows.push({
-                    value: formatNumber(entry.views),
-                    label: entry.eventType === null ? t('insights.otherTypes') : tOr(`eventTypes.${entry.eventType}`, entry.eventType),
-                });
-            }
+        const views = record?.total ?? 0;
+        const rows = [{ value: formatNumber(views), label: t('charts.views'), key: true }];
+        for (const entry of [...(record?.types ?? [])].sort((a, b) => b.views - a.views).slice(0, CHART.TOOLTIP_TYPES)) {
+            rows.push({
+                value: formatNumber(entry.views),
+                label: entry.eventType === null ? t('charts.otherTypes') : tOr(`eventTypes.${entry.eventType}`, entry.eventType),
+            });
         }
-        if (selectedTotal > 0 && views > 0) rows.push({ value: formatPercent(views / selectedTotal), label: t('insights.share') });
+        if (total > 0 && views > 0) rows.push({ value: formatPercent(views / total), label: t('charts.share') });
         return { title: regionName(code), rows };
     }
 
-    const ranked = [...byCountry.entries()]
-        .filter(([, record]) => record.selected > 0)
-        .sort((a, b) => b[1].selected - a[1].selected);
-    const listMax = ranked[0]?.[1].selected ?? 0;
+    const ranked = [...byCountry.entries()].filter(([, record]) => record.total > 0).sort((a, b) => b[1].total - a[1].total);
+    const listMax = ranked[0]?.[1].total ?? 0;
 
     const marks = new Map();
     function setActive(code, on) {
@@ -397,12 +513,11 @@ export function worldMap({ countries, type }) {
     }
 
     loadMapAsset().then((asset) => {
-        const paths = asset.shapes.map((shape) => {
-            const value = byCountry.get(shape.code)?.selected ?? 0;
-            return svg('path', { d: shape.d, class: `country map-${classOf(value, breaks)}`, 'data-code': shape.code });
-        });
+        const paths = asset.shapes.map((shape) => svg('path', {
+            d: shape.d, class: `country map-${classOf(byCountry.get(shape.code)?.total ?? 0, breaks)}`, 'data-code': shape.code,
+        }));
         const dots = asset.points.map((point) => {
-            const value = byCountry.get(point.code)?.selected ?? 0;
+            const value = byCountry.get(point.code)?.total ?? 0;
             if (!value) return null;
             return svg('circle', {
                 cx: point.x, cy: point.y, r: CHART.DOT_RADIUS,
@@ -413,7 +528,7 @@ export function worldMap({ countries, type }) {
             class: 'map-svg',
             viewBox: `0 0 ${asset.width} ${asset.height}`,
             role: 'img',
-            'aria-label': t('insights.mapLabel', { countries: formatNumber(ranked.length) }),
+            'aria-label': t('charts.mapLabel', { countries: formatNumber(ranked.length) }),
         }, [...paths, ...dots]);
 
         for (const mark of map.querySelectorAll('[data-code]')) {
@@ -427,33 +542,23 @@ export function worldMap({ countries, type }) {
                 setActive(code, false);
                 tooltip.hide();
             });
+            if (onSelect && byCountry.has(code)) {
+                mark.classList.add('selectable');
+                mark.addEventListener('click', () => onSelect(code));
+            }
         }
         replaceChildren(mapHost, [map, mapHost.querySelector('.chart-tooltip')]);
     }).catch(() => {
-        replaceChildren(mapHost, [el('p', { className: 'chart-empty', text: t('insights.mapUnavailable') })]);
-    });
-
-    // Scale legend: "no views", then each class with its range.
-    const legendItems = [el('span', { className: 'legend-item' }, [
-        el('span', { className: 'legend-swatch map-0', attrs: { 'aria-hidden': 'true' } }),
-        el('span', { text: t('insights.noViews') }),
-    ])];
-    breaks.forEach((bound, index) => {
-        const from = index === 0 ? 1 : breaks[index - 1] + 1;
-        legendItems.push(el('span', { className: 'legend-item' }, [
-            el('span', { className: `legend-swatch map-${classOf(bound, breaks)}`, attrs: { 'aria-hidden': 'true' } }),
-            el('span', { text: from === bound ? formatNumber(bound) : `${formatNumber(from)}–${formatNumber(bound)}` }),
-        ]));
+        replaceChildren(mapHost, [el('p', { className: 'chart-empty', text: t('charts.mapUnavailable') })]);
     });
-    replaceChildren(legend, legendItems);
 
-    // The ranked list: every country with views, as a table would be. The top
-    // ten show by default; the rest are one button away.
+    // The ranked list: every country with views, as a table would be. The
+    // top ten show by default; the rest are one button away.
     let expanded = false;
     const renderList = () => {
         replaceChildren(list, []);
         if (ranked.length === 0) {
-            list.append(el('li', { className: 'chart-empty', text: t('insights.noData') }));
+            list.append(el('li', { className: 'chart-empty', text: t('charts.noData') }));
             return;
         }
         const visible = expanded ? ranked : ranked.slice(0, CHART.COUNTRY_LIST_LIMIT);
@@ -462,8 +567,8 @@ export function worldMap({ countries, type }) {
             list.append(el('li', { className: 'country-more' }, [el('button', {
                 className: 'btn btn-ghost btn-small',
                 text: expanded
-                    ? t('insights.fewerCountries')
-                    : t('insights.moreCountries', { count: ranked.length - CHART.COUNTRY_LIST_LIMIT }),
+                    ? t('charts.fewerCountries')
+                    : t('charts.moreCountries', { count: ranked.length - CHART.COUNTRY_LIST_LIMIT }),
                 attrs: { type: 'button', 'aria-expanded': String(expanded) },
                 on: { click: () => {
                     expanded = !expanded;
@@ -475,12 +580,22 @@ export function worldMap({ countries, type }) {
     };
 
     function countryRow(code, record) {
-        const item = el('li', { className: 'country-row', attrs: { tabindex: 0 } }, [
+        const fill = el('span', { className: 'bar-fill' });
+        fill.style.width = `${(record.total / listMax) * 100}%`;
+        const content = [
             el('span', { className: 'country-name clamp clamp-1', text: regionName(code) }),
-            el('span', { className: 'bar-track' }, [el('span', { className: 'bar-fill' })]),
-            el('span', { className: 'bar-value', text: formatNumber(record.selected) }),
-        ]);
-        item.querySelector('.bar-fill').style.width = `${(record.selected / listMax) * 100}%`;
+            el('span', { className: 'bar-track' }, [fill]),
+            el('span', { className: 'bar-value', text: formatNumber(record.total) }),
+        ];
+        const item = onSelect
+            ? el('li', {}, [el('button', {
+                className: 'country-row',
+                attrs: { type: 'button', 'aria-label': t('overview.filterBy', { dimension: t('overview.dims.country'), value: regionName(code) }) },
+                dataset: { code },
+                on: { click: () => onSelect(code) },
+            }, content)])
+            : el('li', { className: 'country-row', attrs: { tabindex: 0 }, dataset: { code } }, content);
+        const target = item.querySelector('.country-row') ?? item;
         const on = () => {
             setActive(code, true);
             const mark = marks.get(code)?.[0];
@@ -490,13 +605,238 @@ export function worldMap({ countries, type }) {
             setActive(code, false);
             tooltip.hide();
         };
-        item.addEventListener('pointerenter', on);
-        item.addEventListener('pointerleave', off);
-        item.addEventListener('focus', on);
-        item.addEventListener('blur', off);
+        target.addEventListener('pointerenter', on);
+        target.addEventListener('pointerleave', off);
+        target.addEventListener('focus', on);
+        target.addEventListener('blur', off);
         return item;
     }
     renderList();
 
+    body.append(el('div', { className: 'map-column' }, [mapHost, scaleLegend(breaks, t('charts.noViews'))]), list);
+    return body;
+}
+
+// ---- Weekday by hour -----------------------------------------------------------
+
+/** Monday first, in the UI's language. */
+function weekdayNames(style) {
+    const format = new Intl.DateTimeFormat(currentLocale(), { weekday: style, timeZone: 'UTC' });
+    // 2024-01-01 was a Monday.
+    return Array.from({ length: 7 }, (_, day) => format.format(new Date(Date.UTC(2024, 0, 1 + day))));
+}
+
+function hourName(hour) {
+    return new Intl.DateTimeFormat(currentLocale(), { hour: 'numeric', timeZone: 'UTC' }).format(new Date(Date.UTC(2024, 0, 1, hour)));
+}
+
+/**
+ * Views per weekday and hour of day, in the viewer's time zone, from the
+ * server's hourly counts (hours since the epoch, UTC).
+ * @param {Array<{ hour: number, views: number }>} hours
+ * @returns {number[][]} [weekday Monday..Sunday][hour 0..23]
+ */
+export function weekHours(hours) {
+    const grid = Array.from({ length: 7 }, () => new Array(24).fill(0));
+    for (const { hour, views } of hours) {
+        const date = new Date(hour * HOUR_MS);
+        grid[(date.getDay() + 6) % 7][date.getHours()] += views;
+    }
+    return grid;
+}
+
+/**
+ * A weekday-by-hour heatmap on the sequential ramp. The grid is one focus
+ * stop; arrow keys move a highlighted cell and read it out.
+ * @param {{ hours: Array<{ hour: number, views: number }> }} data
+ */
+export function heatmap({ hours }) {
+    const grid = weekHours(hours);
+    const body = el('div', { className: 'chart-body heatmap-body' });
+    const tooltip = createTooltip(body);
+    const values = grid.flat();
+    const breaks = classBreaks(values);
+    const days = weekdayNames('short');
+    const longDays = weekdayNames('long');
+    const peak = Math.max(...values);
+    const peakIndex = values.indexOf(peak);
+
+    const cells = [];
+    const matrix = el('div', {
+        className: 'heatmap',
+        attrs: {
+            role: 'img',
+            tabindex: 0,
+            'aria-label': t('charts.heatmapLabel', {
+                day: longDays[Math.floor(peakIndex / 24)],
+                hour: hourName(peakIndex % 24),
+                views: formatNumber(peak),
+            }),
+        },
+    });
+    matrix.append(el('span', { className: 'heatmap-corner', attrs: { 'aria-hidden': 'true' } }));
+    for (let hour = 0; hour < 24; hour++) {
+        matrix.append(el('span', {
+            className: 'heatmap-hour',
+            text: hour % CHART.HEATMAP_HOUR_LABEL_EVERY === 0 ? hourName(hour) : '',
+            attrs: { 'aria-hidden': 'true' },
+        }));
+    }
+    grid.forEach((row, day) => {
+        matrix.append(el('span', { className: 'heatmap-day', text: days[day], attrs: { 'aria-hidden': 'true' } }));
+        row.forEach((views, hour) => {
+            const cell = el('span', {
+                className: `heatmap-cell map-${classOf(views, breaks)}`,
+                attrs: { 'aria-hidden': 'true' },
+                dataset: { day: String(day), hour: String(hour) },
+            });
+            cells.push(cell);
+            matrix.append(cell);
+        });
+    });
+
+    let active = -1;
+    function show(index, at) {
+        if (active >= 0) cells[active].classList.remove('active');
+        active = index;
+        cells[index].classList.add('active');
+        const day = Math.floor(index / 24);
+        const hour = index % 24;
+        tooltip.show({
+            title: t('charts.heatmapCell', { day: longDays[day], from: hourName(hour), to: hourName((hour + 1) % 24) }),
+            rows: [{ value: formatNumber(grid[day][hour]), label: t('charts.views'), key: true }],
+        }, at ?? anchorOf(body, cells[index]));
+    }
+    function reset() {
+        if (active >= 0) cells[active].classList.remove('active');
+        active = -1;
+        tooltip.hide();
+    }
+
+    matrix.addEventListener('pointermove', (event) => {
+        const cell = event.target.closest?.('.heatmap-cell');
+        if (!cell) return;
+        show(Number(cell.dataset.day) * 24 + Number(cell.dataset.hour), pointIn(body, event));
+    });
+    matrix.addEventListener('pointerleave', reset);
+    matrix.addEventListener('blur', reset);
+    matrix.addEventListener('keydown', (event) => {
+        const from = active < 0 ? peakIndex : active;
+        const moves = {
+            [KEY.ARROW_RIGHT]: Math.min(167, from + 1),
+            [KEY.ARROW_LEFT]: Math.max(0, from - 1),
+            [KEY.ARROW_DOWN]: Math.min(167, from + 24),
+            [KEY.ARROW_UP]: Math.max(0, from - 24),
+            [KEY.HOME]: Math.floor(from / 24) * 24,
+            [KEY.END]: Math.floor(from / 24) * 24 + 23,
+        };
+        if (event.key in moves) {
+            event.preventDefault();
+            show(active < 0 ? peakIndex : moves[event.key]);
+        } else if (event.key === KEY.ESCAPE) {
+            reset();
+        }
+    });
+
+    body.append(matrix, scaleLegend(breaks, t('charts.noViews')));
+    return body;
+}
+
+/** The heatmap as a table: hours down, weekdays across. */
+export function heatmapTable({ hours }) {
+    const grid = weekHours(hours);
+    const days = weekdayNames('short');
+    return el('table', { className: 'chart-table' }, [
+        el('thead', {}, [el('tr', {}, [
+            el('th', { text: t('charts.hour'), attrs: { scope: 'col' } }),
+            ...days.map((day) => el('th', { text: day, attrs: { scope: 'col' } })),
+        ])]),
+        el('tbody', {}, Array.from({ length: 24 }, (_, hour) => el('tr', {}, [
+            el('th', { text: hourName(hour), attrs: { scope: 'row' } }),
+            ...grid.map((row) => el('td', { text: formatNumber(row[hour]) })),
+        ]))),
+    ]);
+}
+
+// ---- Right now -----------------------------------------------------------------
+
+/**
+ * Views per minute over the last half hour, oldest on the left. One focus
+ * stop; arrow keys read each minute.
+ * @param {{ minutes: Array<{ minute: number, views: number }>, nowMinute: number }} data
+ *   minutes since the epoch
+ */
+export function minuteChart({ minutes, nowMinute }) {
+    const body = el('div', { className: 'chart-body minute-body' });
+    const tooltip = createTooltip(body);
+    const { WIDTH, HEIGHT, GAP, SPAN } = CHART.MINUTES;
+    const counts = new Map(minutes.map((entry) => [entry.minute, entry.views]));
+    const series = Array.from({ length: SPAN }, (_, index) => {
+        const minute = nowMinute - (SPAN - 1) + index;
+        return { minute, views: counts.get(minute) ?? 0 };
+    });
+    const max = Math.max(1, ...series.map((entry) => entry.views));
+    const barW = WIDTH / SPAN - GAP;
+    const time = new Intl.DateTimeFormat(currentLocale(), { hour: 'numeric', minute: '2-digit' });
+    const total = series.reduce((sum, entry) => sum + entry.views, 0);
+
+    const bars = series.map((entry, index) => {
+        const h = entry.views ? Math.max(2, (entry.views / max) * (HEIGHT - 2)) : 0;
+        return svg('rect', {
+            class: 'minute-bar', x: index * (barW + GAP), y: HEIGHT - h, width: barW, height: h, rx: 1.5,
+        });
+    });
+    const hit = svg('rect', { class: 'minute-hit', x: 0, y: 0, width: WIDTH, height: HEIGHT, fill: 'transparent' });
+    const plot = svg('svg', {
+        class: 'minute-svg',
+        viewBox: `0 0 ${WIDTH} ${HEIGHT}`,
+        preserveAspectRatio: 'none',
+        role: 'img',
+        tabindex: 0,
+        'aria-label': t('charts.minutesLabel', { count: SPAN, views: formatNumber(total) }),
+    }, [svg('line', { class: 'chart-baseline', x1: 0, x2: WIDTH, y1: HEIGHT, y2: HEIGHT }), ...bars, hit]);
+
+    let active = -1;
+    function show(index, at) {
+        if (active >= 0) bars[active].classList.remove('active');
+        active = index;
+        bars[index].classList.add('active');
+        const entry = series[index];
+        tooltip.show({
+            title: time.format(new Date(entry.minute * MINUTE_MS)),
+            rows: [{ value: formatNumber(entry.views), label: t('charts.views'), key: true }],
+        }, at ?? { x: ((index + 0.5) / SPAN) * body.clientWidth, y: 0 });
+    }
+    function reset() {
+        if (active >= 0) bars[active].classList.remove('active');
+        active = -1;
+        tooltip.hide();
+    }
+    plot.addEventListener('pointermove', (event) => {
+        const box = plot.getBoundingClientRect();
+        const index = Math.min(SPAN - 1, Math.max(0, Math.floor(((event.clientX - box.left) / box.width) * SPAN)));
+        show(index, pointIn(body, event));
+    });
+    plot.addEventListener('pointerleave', reset);
+    plot.addEventListener('blur', reset);
+    plot.addEventListener('keydown', (event) => {
+        const moves = {
+            [KEY.ARROW_RIGHT]: Math.min(SPAN - 1, active + 1),
+            [KEY.ARROW_LEFT]: Math.max(0, active < 0 ? SPAN - 1 : active - 1),
+            [KEY.HOME]: 0,
+            [KEY.END]: SPAN - 1,
+        };
+        if (event.key in moves) {
+            event.preventDefault();
+            show(moves[event.key]);
+        } else if (event.key === KEY.ESCAPE) {
+            reset();
+        }
+    });
+
+    body.append(plot, el('div', { className: 'minute-axis', attrs: { 'aria-hidden': 'true' } }, [
+        el('span', { text: t('charts.minutesAgo', { count: SPAN }) }),
+        el('span', { text: t('charts.now') }),
+    ]));
     return body;
 }