wiki-formant 0.36.0 → 0.39.0

package/README.md

@@ -731,9 +731,14 @@ return <Stats digest={await digest(sql, { days })} days={days} />;
 `PasskeyButton` (`wiki-formant/passkey-button`) is the browser half and has its
 own subpath, because it imports the optional peer `@simplewebauthn/browser`.
 `Stats` (`wiki-formant/stats`) renders a `digest` as one page: the
-headline figures against the window before, visitors per day, every non-empty
-ranked list, and `?days=` links between windows, all time among them. Everything
-but the daily chart is server-rendered. The chart is `TimeChart` with a count
+headline figures against the window before, one of them per day, every non-empty
+ranked list, and `?days=` links between windows, all time among them. Each
+figure is a button that charts it: visitors, page views, bounce rate, visit
+length, visitors with agents and clicks to X. `digest`'s `by_day` carries every
+one of those per UTC day, a visit on the day it began, so the days add up to the
+totals. A day with no visits has no bounce rate or visit length and is left out
+of those charts rather than drawn as zero. Everything but the figures and the
+chart is server-rendered. The chart is `TimeChart` with a count
 axis from zero, so `lightweight-charts` is an optional peer that a stats page
 needs installed.
 
@@ -753,8 +758,18 @@ monthly.
 
 // A loader: asked for 'hour' (24H), '4h' (7D) or 'day' from 0 (every longer
 // range), once each.
-<TimeChart series={load} label="Price" format={formatPrice} range="30d" />
-```
+<TimeChart series={load} label="Price" format={formatPrice} range="30d" candles />
+```
+
+A price point may carry `open`, `high` and `low` (its `value` is the close)
+and `volume`. Points that carry the candle get a Line/Candles toggle, opening on
+candles with `candles`; points that carry volume get a volume pane under the
+price, a fifth of the height. Candles take `--chart-up` and `--chart-down` from
+the canvas box, else its `color`. A week of candles opens on its first, closes
+on its last, spans the highest high and lowest low, and sums its volume. A point
+with a volume of zero is a stretch nothing traded in: its candle and bar leave
+the slot empty, except the last, which is the price now. A price's line is
+straight between closes and a count's is curved.
 
 `aggregate` is how a week or month is made from its days: `last` for a price,
 `mean` for a count, so the week in progress keeps its level instead of reading

package/dist/analytics.d.ts

@@ -81,6 +81,20 @@ export interface DigestOptions {
     ownAgents?: string[];
 }
 type Ranked<K extends string, M extends string> = Array<Record<K, string> & Record<M, number>>;
+/** One UTC day of the figures a digest totals; a visit falls on the day it began. */
+export interface DigestDay {
+    date: string;
+    visitors: number;
+    pageviews: number;
+    visits: number;
+    /** Visits that saw one page. */
+    bounces: number;
+    /** Seconds from each visit's first view to its last, summed. */
+    seconds: number;
+    visitors_incl_agents: number;
+    /** Clicks on links to the site's X handle; zero without a handle. */
+    follow_clicks: number;
+}
 export interface Digest {
     visitors: number;
     pageviews: number;
@@ -100,7 +114,8 @@ export interface Digest {
     sibling_referrals: Ranked<'source', 'visitors'>;
     countries: Ranked<'country', 'visitors'>;
     devices: Ranked<'device', 'visitors'>;
-    by_day: Ranked<'date', 'visitors'>;
+    /** Every day in the window with anything in it, oldest first. */
+    by_day: DigestDay[];
     follow_clicks: {
         events: number;
         visitors: number;
@@ -112,7 +127,8 @@ export interface Digest {
  * Everything a report needs about one site's last `days` days, in one query.
  * Visitor figures count distinct visitors, so a person who comes back on
  * another day counts once for each day. Days in `ViewDay` add to the visitor,
- * page, source, country, device and per-day figures; events have no history.
+ * page, visit, source, country, device and per-day figures; events have no
+ * history, so an archived day's visitors are its visitors with agents too.
  */
 export declare function digest(sql: Sql, { site, days, handle, siblings, gaps, ownAgents }: DigestOptions): Promise<Digest>;
 /**

package/dist/analytics.js

@@ -192,7 +192,8 @@ export const SEARCH_GAPS = { event: 'Search Query', prop: 'q', where: { results:
  * Everything a report needs about one site's last `days` days, in one query.
  * Visitor figures count distinct visitors, so a person who comes back on
  * another day counts once for each day. Days in `ViewDay` add to the visitor,
- * page, source, country, device and per-day figures; events have no history.
+ * page, visit, source, country, device and per-day figures; events have no
+ * history, so an archived day's visitors are its visitors with agents too.
  */
 export async function digest(sql, { site = '', days, handle, siblings = [], gaps = [SEARCH_GAPS], ownAgents = ['-mcp-test', 'radix-studio'] }) {
     // The window is the database's clock, which stamped the rows; the app's can run behind it.
@@ -202,6 +203,9 @@ export async function digest(sql, { site = '', days, handle, siblings = [], gaps
     const list = (select, limit, order = '2 DESC, 1') => `(SELECT coalesce(json_agg(t), '[]') FROM (${select} ORDER BY ${order}${limit ? ` LIMIT ${limit}` : ''}) t)`;
     /** A ranked list from the views, plus the same breakdown from `ViewDay`. */
     const merged = (label, column, live) => `SELECT k AS ${label}, sum(n) AS visitors FROM (${live} UNION ALL SELECT key, value::int FROM a, jsonb_each_text(a."${column}")) t(k, n) GROUP BY 1`;
+    /** Clicks on links to the site's own X account, among `e`. */
+    const follows = handle && `name = 'Outbound Link: Click' AND props->>'url' ILIKE ANY(${$([`%x.com/${handle}%`, `%twitter.com/${handle}%`])}::text[])`;
+    const day = (at) => `to_char(${at} AT TIME ZONE 'UTC', 'YYYY-MM-DD')`;
     const gapSelects = gaps.map(g => {
         const prop = $(g.prop);
         return `(SELECT props->>${prop} AS query, count(*) AS events FROM e
@@ -216,11 +220,11 @@ export async function digest(sql, { site = '', days, handle, siblings = [], gaps
     ), numbered AS (
       SELECT *, sum(starts) OVER (PARTITION BY visitor ORDER BY at, id) AS visit FROM marked
     ), visits AS (
-      SELECT visitor, count(*) AS views, extract(epoch FROM max(at) - min(at)) AS seconds,
+      SELECT visitor, min(at) AS at, count(*) AS views, extract(epoch FROM max(at) - min(at)) AS seconds,
         (array_agg(path ORDER BY at, id))[1] AS entry, (array_agg(source ORDER BY at, id))[1] AS source
       FROM numbered GROUP BY visitor, visit
     ), e AS (
-      SELECT name, props, visitor FROM "Event" WHERE "siteId" = $1 AND "createdAt" >= now() - make_interval(days => $2::int)
+      SELECT name, props, visitor, "createdAt" AS at FROM "Event" WHERE "siteId" = $1 AND "createdAt" >= now() - make_interval(days => $2::int)
     ), a AS (
       SELECT * FROM "ViewDay" WHERE "siteId" = $1 AND day >= (now() AT TIME ZONE 'UTC' - make_interval(days => $2::int))::date
     ), sessions AS (
@@ -252,14 +256,15 @@ export async function digest(sql, { site = '', days, handle, siblings = [], gaps
       'sibling_referrals', ${list(`SELECT source, sum(visitors) AS visitors FROM src WHERE source = ANY(${$(siblings)}::text[]) GROUP BY 1`, 6)},
       'countries', ${list(merged('country', 'countries', 'SELECT country, count(DISTINCT visitor) FROM v WHERE country IS NOT NULL GROUP BY 1'), 10)},
       'devices', ${list(merged('device', 'devices', 'SELECT device, count(DISTINCT visitor) FROM v GROUP BY 1'))},
-      'by_day', ${list(`SELECT date, sum(n) AS visitors FROM (
-          SELECT to_char(at AT TIME ZONE 'UTC', 'YYYY-MM-DD'), count(DISTINCT visitor) FROM v GROUP BY 1
-          UNION ALL SELECT to_char(day, 'YYYY-MM-DD'), visitors FROM a
-        ) t(date, n) GROUP BY 1`, undefined, '1')},
-      'follow_clicks', ${handle
-        ? `(SELECT json_build_object('events', count(*), 'visitors', count(DISTINCT visitor)) FROM e
-              WHERE name = 'Outbound Link: Click' AND props->>'url' ILIKE ANY(${$([`%x.com/${handle}%`, `%twitter.com/${handle}%`])}::text[]))`
-        : 'NULL'},
+      'by_day', ${list(`SELECT date, sum(visitors) AS visitors, sum(pageviews) AS pageviews, sum(visits) AS visits, sum(bounces) AS bounces,
+          sum(seconds) AS seconds, sum(agents) AS visitors_incl_agents, sum(follows) AS follow_clicks FROM (
+          SELECT ${day('at')}, count(DISTINCT visitor), count(*), 0, 0, 0, 0, 0 FROM v GROUP BY 1
+          UNION ALL SELECT ${day('at')}, 0, 0, count(*), count(*) FILTER (WHERE views = 1), coalesce(sum(seconds), 0), 0, 0 FROM visits GROUP BY 1
+          UNION ALL SELECT ${day('at')}, 0, 0, 0, 0, 0, count(DISTINCT visitor), 0 FROM (SELECT at, visitor FROM v UNION ALL SELECT at, visitor FROM e) u GROUP BY 1
+          ${follows ? `UNION ALL SELECT ${day('at')}, 0, 0, 0, 0, 0, 0, count(*) FROM e WHERE ${follows} GROUP BY 1` : ''}
+          UNION ALL SELECT to_char(day, 'YYYY-MM-DD'), visitors, pageviews, visits, bounces, seconds, visitors, 0 FROM a
+        ) t(date, visitors, pageviews, visits, bounces, seconds, agents, follows) GROUP BY 1`, undefined, '1')},
+      'follow_clicks', ${follows ? `(SELECT json_build_object('events', count(*), 'visitors', count(DISTINCT visitor)) FROM e WHERE ${follows})` : 'NULL'},
       'agent_tool_calls', ${list(`SELECT coalesce(props->>'tool', '(none)') AS tool, count(*) AS events FROM e
          WHERE name = 'MCP Call' AND props->>'method' = 'tools/call'
            AND NOT coalesce(props->>'ua', '') ILIKE ANY(${$(ownAgents.map(a => `%${a}%`))}::text[])

package/dist/base.css

@@ -199,13 +199,26 @@ pre:hover > .code-copy-btn,
 .stats { display: grid; gap: 2rem; }
 .stats-ranges { display: flex; flex-wrap: wrap; gap: 1rem; }
 .stats-ranges a[aria-current] { text-decoration: underline; text-underline-offset: 0.3em; }
+/* Each figure is a button that charts it; pressed is the one drawn. */
 .stats-figures {
   display: grid;
   grid-template-columns: repeat(auto-fit, minmax(8rem, 1fr));
   gap: 1rem;
-  margin: 0;
 }
-.stats-figures dd { margin: 0; font-variant-numeric: tabular-nums; }
+.stats-figures button {
+  display: grid;
+  gap: 0.25em;
+  padding: 0;
+  font: inherit;
+  color: inherit;
+  text-align: start;
+  background: none;
+  border: 0;
+  cursor: pointer;
+  opacity: 0.6;
+}
+.stats-figures button[aria-pressed='true'] { opacity: 1; }
+.stats-figures strong { font-variant-numeric: tabular-nums; }
 .stats-lists {
   display: grid;
   grid-template-columns: repeat(auto-fit, minmax(min(100%, 18rem), 1fr));

package/dist/chart.d.ts

@@ -1,7 +1,14 @@
-/** One value at a time in Unix seconds, UTC. */
+/**
+ * One value at a time in Unix seconds, UTC. A price may carry the rest of its
+ * candle, `value` being the close, and the volume traded in it.
+ */
 export type ChartPoint = {
     time: number;
     value: number;
+    open?: number;
+    high?: number;
+    low?: number;
+    volume?: number;
 };
 export type ChartRange = '24h' | '7d' | '30d' | '90d' | '1y' | 'all';
 /** What a loader is asked for: hours for 24H, four hours for 7D, days for every longer range. */
@@ -19,8 +26,9 @@ export declare function chartSteps(span: number): {
 };
 /**
  * Points, oldest first, one per step. A price keeps the last value in each
- * step; a count takes the mean of its days, so the week in progress does not
- * read as a collapse.
+ * step, as a candle does its close: the first open, the highest high, the
+ * lowest low. A count takes the mean of its days, so the week in progress does
+ * not read as a collapse. Volume is summed.
  */
 export declare function bucketChart(points: readonly ChartPoint[], step: ChartStep, aggregate: 'last' | 'mean'): ChartPoint[];
 /** Compact from a thousand up, four significant figures below. */
@@ -40,13 +48,15 @@ export interface TimeChartProps {
     fromZero?: boolean;
     /** The value axis and crosshair label. Read on every draw, so it need not be stable. */
     format?: (n: number) => string;
+    /** Open on candles, where the points carry them. A Line/Candles toggle shows either way. */
+    candles?: boolean;
     /** In pixels. Otherwise the stylesheet's `--chart-height`, else 15rem. */
     height?: number;
     className?: string;
 }
 /**
- * A time series with its range and step buttons. The buttons are
+ * A time series with its range, step and style buttons. The buttons are
  * `.chart-controls button[aria-pressed]`, and a site's stylesheet gives them
  * and the box their look; the line and fill are the canvas box's `color`.
  */
-export declare function TimeChart({ series, label, ranges, range: initial, aggregate, fromZero, format, height, className, }: TimeChartProps): import("react").JSX.Element;
+export declare function TimeChart({ series, label, ranges, range: initial, aggregate, fromZero, format, candles: initialCandles, height, className, }: TimeChartProps): import("react").JSX.Element;

package/dist/chart.js

@@ -3,8 +3,12 @@ import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
 // chart.tsx — one time series as an area chart: the token, activity and visitor
 // charts on every site. Ranges run from 24 hours to all time, and a long range
 // steps by day, week or month, so three years do not draw as a thousand points.
-// `lightweight-charts` is loaded on mount, so the page paints without it. Every
-// colour is the canvas box's own `color`, and its axis `--chart-axis` if set.
+// A price that carries its open, high and low can be drawn as candles, and one
+// that carries volume gets a volume pane under it. `lightweight-charts` is
+// loaded on mount, so the page paints without it. Every colour is the canvas
+// box's own `color`, its axis `--chart-axis`, and a candle `--chart-up` or
+// `--chart-down`, each if set. A count's line is curved; a price's is straight,
+// since a curve between two closes draws prices nobody paid.
 import { useEffect, useMemo, useRef, useState } from 'react';
 const DAY = 86_400;
 const RANGE = {
@@ -41,23 +45,35 @@ function bucketStart(time, step) {
 }
 /**
  * Points, oldest first, one per step. A price keeps the last value in each
- * step; a count takes the mean of its days, so the week in progress does not
- * read as a collapse.
+ * step, as a candle does its close: the first open, the highest high, the
+ * lowest low. A count takes the mean of its days, so the week in progress does
+ * not read as a collapse. Volume is summed.
  */
 export function bucketChart(points, step, aggregate) {
     const out = [];
-    for (const { time, value } of points) {
-        const start = bucketStart(time, step);
+    let n = 0;
+    for (const p of points) {
+        const start = bucketStart(p.time, step);
         const last = out.at(-1);
-        if (last?.time !== start)
-            out.push({ time: start, value, n: 1 });
-        else if (aggregate === 'last')
-            last.value = value;
+        if (last?.time !== start) {
+            out.push({ ...p, time: start });
+            n = 1;
+            continue;
+        }
+        if (aggregate === 'last')
+            last.value = p.value;
         else
-            last.value += (value - last.value) / ++last.n;
+            last.value += (p.value - last.value) / ++n;
+        if (last.high !== undefined && p.high !== undefined)
+            last.high = Math.max(last.high, p.high);
+        if (last.low !== undefined && p.low !== undefined)
+            last.low = Math.min(last.low, p.low);
+        if (p.volume !== undefined)
+            last.volume = (last.volume ?? 0) + p.volume;
     }
-    return out.map(({ time, value }) => ({ time, value }));
+    return out;
 }
+const isCandle = (p) => p.open !== undefined && p.high !== undefined && p.low !== undefined;
 const compact = new Intl.NumberFormat('en', { notation: 'compact', maximumFractionDigits: 2 });
 const precise = new Intl.NumberFormat('en', { maximumSignificantDigits: 4 });
 /** Compact from a thousand up, four significant figures below. */
@@ -81,11 +97,11 @@ const fromZeroScale = (base) => {
     return info;
 };
 /**
- * A time series with its range and step buttons. The buttons are
+ * A time series with its range, step and style buttons. The buttons are
  * `.chart-controls button[aria-pressed]`, and a site's stylesheet gives them
  * and the box their look; the line and fill are the canvas box's `color`.
  */
-export function TimeChart({ series, label, ranges = typeof series === 'function' ? CHART_RANGES : DAILY_RANGES, range: initial = ranges.includes('30d') ? '30d' : ranges[0], aggregate = 'last', fromZero = false, format = formatChartValue, height, className, }) {
+export function TimeChart({ series, label, ranges = typeof series === 'function' ? CHART_RANGES : DAILY_RANGES, range: initial = ranges.includes('30d') ? '30d' : ranges[0], aggregate = 'last', fromZero = false, format = formatChartValue, candles: initialCandles = false, height, className, }) {
     const box = useRef(null);
     const chart = useRef(null);
     const formatRef = useRef(format);
@@ -93,6 +109,7 @@ export function TimeChart({ series, label, ranges = typeof series === 'function'
     const [ready, setReady] = useState(false);
     const [range, setRange] = useState(initial);
     const [step, setStep] = useState(null);
+    const [candles, setCandles] = useState(initialCandles);
     const [loaded, setLoaded] = useState(null);
     const resolution = RANGE[range].resolution;
     useEffect(() => {
@@ -100,13 +117,17 @@ export function TimeChart({ series, label, ranges = typeof series === 'function'
         if (!el)
             return;
         let disposed = false;
-        import('lightweight-charts').then(({ createChart, AreaSeries, ColorType, CrosshairMode, LineStyle, LineType }) => {
+        import('lightweight-charts').then(({ createChart, AreaSeries, CandlestickSeries, HistogramSeries, ColorType, CrosshairMode, LineStyle, LineType }) => {
             if (disposed)
                 return;
             const style = getComputedStyle(el);
             const axis = style.getPropertyValue('--chart-axis').trim();
             const ink = rgba(style.color);
+            const up = rgba(style.getPropertyValue('--chart-up').trim() || style.color);
+            const down = rgba(style.getPropertyValue('--chart-down').trim() || style.color, style.getPropertyValue('--chart-down').trim() ? 1 : 0.45);
+            const priceFormat = { type: 'custom', formatter: (n) => formatRef.current(n), minMove: 1e-12 };
             const guide = { color: rgba(style.color, 0.4), width: 1, style: LineStyle.Dotted, labelBackgroundColor: ink };
+            const grid = rgba(axis || style.color, 0.1);
             const api = createChart(el, {
                 autoSize: true,
                 layout: {
@@ -114,8 +135,10 @@ export function TimeChart({ series, label, ranges = typeof series === 'function'
                     textColor: axis ? rgba(axis) : rgba(style.color, 0.7),
                     fontFamily: style.fontFamily,
                     fontSize: parseFloat(style.fontSize) || 11,
+                    // The volume pane's border is a grid line, not the library's light-theme rule.
+                    panes: { separatorColor: grid, separatorHoverColor: 'transparent', enableResize: false },
                 },
-                grid: { vertLines: { color: rgba(axis || style.color, 0.1) }, horzLines: { color: rgba(axis || style.color, 0.1) } },
+                grid: { vertLines: { color: grid }, horzLines: { color: grid } },
                 crosshair: { mode: CrosshairMode.Magnet, vertLine: guide, horzLine: guide },
                 rightPriceScale: { borderVisible: false, scaleMargins: { top: 0.15, bottom: 0.1 } },
                 timeScale: { borderVisible: false, secondsVisible: false },
@@ -127,16 +150,33 @@ export function TimeChart({ series, label, ranges = typeof series === 'function'
                 topColor: rgba(style.color, 0.4),
                 bottomColor: rgba(style.color, 0.02),
                 lineWidth: 2,
-                lineType: LineType.Curved,
+                lineType: aggregate === 'mean' ? LineType.Curved : LineType.Simple,
                 crosshairMarkerBackgroundColor: ink,
                 crosshairMarkerBorderColor: ink,
-                priceFormat: { type: 'custom', formatter: (n) => formatRef.current(n), minMove: 1e-12 },
+                priceFormat,
                 ...(fromZero && { autoscaleInfoProvider: fromZeroScale }),
             });
+            const candle = api.addSeries(CandlestickSeries, {
+                visible: false,
+                upColor: up,
+                downColor: down,
+                borderUpColor: up,
+                borderDownColor: down,
+                wickUpColor: up,
+                wickDownColor: down,
+                priceFormat,
+            });
             // The chart cannot be scrolled or zoomed, so every size it takes shows every point,
             // the first included: data drawn before autoSize has measured the box fits nothing.
             api.timeScale().subscribeSizeChange(() => api.timeScale().fitContent());
-            chart.current = { api, area };
+            // Volume takes a pane of its own under the price, a fifth of the height.
+            const addVolume = () => {
+                const volume = api.addSeries(HistogramSeries, { priceFormat: { type: 'volume' }, priceLineVisible: false, lastValueVisible: false }, 1);
+                api.panes()[0]?.setStretchFactor(4);
+                api.panes()[1]?.setStretchFactor(1);
+                return volume;
+            };
+            chart.current = { api, area, candle, volume: null, addVolume, up, down };
             setReady(true);
         });
         return () => {
@@ -145,7 +185,7 @@ export function TimeChart({ series, label, ranges = typeof series === 'function'
             chart.current = null;
             setReady(false);
         };
-    }, [fromZero]);
+    }, [fromZero, aggregate]);
     // One request per resolution for the life of the loader: every range from 30D up reads the same days.
     const cache = useRef(new Map());
     useEffect(() => {
@@ -175,20 +215,51 @@ export function TimeChart({ series, label, ranges = typeof series === 'function'
         const end = points.at(-1).time;
         const span = RANGE[range].span;
         const windowed = span === Infinity || ranges.length < 2 ? points : points.filter(p => p.time > Date.now() / 1000 - span);
+        const drawn = (shown, steps, step) => ({
+            shown,
+            steps,
+            step,
+            ohlc: aggregate === 'last' && shown.length > 0 && shown.every(isCandle),
+            volume: shown.some(p => p.volume !== undefined),
+        });
         if (resolution !== 'day' || !windowed.length)
-            return { shown: windowed, steps: [], step: null };
+            return drawn(windowed, [], null);
         const { steps, fallback } = chartSteps(end - windowed[0].time);
         const chosen = step && steps.includes(step) ? step : fallback;
-        return { shown: chosen === 'day' ? windowed : bucketChart(windowed, chosen, aggregate), steps, step: chosen };
+        return drawn(chosen === 'day' ? windowed : bucketChart(windowed, chosen, aggregate), steps, chosen);
     }, [points, range, ranges.length, resolution, step, aggregate]);
     // While a resolution loads, the last one stays under the skeleton; an empty or failed one clears it.
     useEffect(() => {
-        if (!ready || !chart.current || !source)
+        const c = chart.current;
+        if (!ready || !c || !source)
             return;
-        chart.current.api.applyOptions({ timeScale: { timeVisible: source.resolution !== 'day' } });
-        chart.current.area.setData((view?.shown ?? []).map(p => ({ time: p.time, value: p.value })));
-        chart.current.api.timeScale().fitContent();
-    }, [ready, source, view]);
+        const shown = view?.shown ?? [];
+        const asCandles = candles && !!view?.ohlc;
+        const time = (p) => p.time;
+        // A point with no volume is a stretch nothing traded in: its candle and its bar leave the slot
+        // empty rather than draw a flat dash. The last one always draws, as the price now.
+        const idle = (p, i) => p.volume === 0 && i < shown.length - 1;
+        c.api.applyOptions({ timeScale: { timeVisible: source.resolution !== 'day' } });
+        c.area.applyOptions({ visible: !asCandles });
+        c.candle.applyOptions({ visible: asCandles });
+        c.area.setData(asCandles ? [] : shown.map(p => ({ time: time(p), value: p.value })));
+        c.candle.setData(asCandles ? shown.map((p, i) => (idle(p, i) ? { time: time(p) } : { time: time(p), open: p.open, high: p.high, low: p.low, close: p.value })) : []);
+        if (view?.volume && !c.volume)
+            c.volume = c.addVolume();
+        else if (!view?.volume && c.volume) {
+            c.api.removeSeries(c.volume);
+            c.volume = null;
+            if (c.api.panes().length > 1)
+                c.api.removePane(1);
+        }
+        c.volume?.setData(shown.map((p, i) => {
+            if (!p.volume)
+                return { time: time(p) };
+            const rising = p.value >= (p.open ?? shown[i - 1]?.value ?? p.value);
+            return { time: time(p), value: p.volume ?? 0, color: (rising ? c.up : c.down).replace(/[\d.]+\)$/, '0.5)') };
+        }));
+        c.api.timeScale().fitContent();
+    }, [ready, source, view, candles]);
     const status = source && 'error' in source ? source.error : points && !view?.shown.length ? 'No data in this range' : null;
-    return (_jsxs("figure", { className: className ? `chart ${className}` : 'chart', children: [_jsx("div", { ref: box, className: "chart-canvas", role: "img", "aria-label": label, style: height ? { height } : undefined }), (!ready || (!points && !status)) && _jsx("div", { className: "chart-status skeleton", "aria-hidden": true }), status && _jsx("p", { className: "chart-status", children: status }), (ranges.length > 1 || (view && view.steps.length > 1)) && (_jsxs("div", { className: "chart-controls", children: [ranges.length > 1 && (_jsx("div", { role: "group", "aria-label": "Range", children: ranges.map(r => (_jsx("button", { type: "button", "aria-pressed": r === range, onClick: () => { setRange(r); setStep(null); }, children: RANGE[r].label }, r))) })), view && view.steps.length > 1 && (_jsx("div", { role: "group", "aria-label": "Step", children: view.steps.map(s => (_jsx("button", { type: "button", "aria-pressed": s === view.step, onClick: () => setStep(s), title: `One point per ${s}`, children: STEP[s].label }, s))) }))] }))] }));
+    return (_jsxs("figure", { className: className ? `chart ${className}` : 'chart', children: [_jsx("div", { ref: box, className: "chart-canvas", role: "img", "aria-label": label, style: height ? { height } : undefined }), (!ready || (!points && !status)) && _jsx("div", { className: "chart-status skeleton", "aria-hidden": true }), status && _jsx("p", { className: "chart-status", children: status }), (ranges.length > 1 || (view && (view.steps.length > 1 || view.ohlc))) && (_jsxs("div", { className: "chart-controls", children: [ranges.length > 1 && (_jsx("div", { role: "group", "aria-label": "Range", children: ranges.map(r => (_jsx("button", { type: "button", "aria-pressed": r === range, onClick: () => { setRange(r); setStep(null); }, children: RANGE[r].label }, r))) })), view && view.steps.length > 1 && (_jsx("div", { role: "group", "aria-label": "Step", children: view.steps.map(s => (_jsx("button", { type: "button", "aria-pressed": s === view.step, onClick: () => setStep(s), title: `One point per ${s}`, children: STEP[s].label }, s))) })), view?.ohlc && (_jsxs("div", { role: "group", "aria-label": "Style", children: [_jsx("button", { type: "button", "aria-pressed": !candles, onClick: () => setCandles(false), children: "Line" }), _jsx("button", { type: "button", "aria-pressed": candles, onClick: () => setCandles(true), children: "Candles" })] }))] }))] }));
 }

package/dist/stats-figures.d.ts

@@ -0,0 +1,10 @@
+import type { Digest } from './analytics.js';
+/**
+ * The figures as `.stats-figures button[aria-pressed]` and the pressed one per
+ * day from `first` (a UTC day number) to today. A count's empty day is a zero;
+ * a rate's is left out, since no visits is not a bounce rate of nothing.
+ */
+export declare function StatsFigures({ digest, first }: {
+    digest: Digest;
+    first: number;
+}): import("react").JSX.Element;

package/dist/stats-figures.js

@@ -0,0 +1,58 @@
+'use client';
+import { jsx as _jsx, jsxs as _jsxs, Fragment as _Fragment } from "react/jsx-runtime";
+// stats-figures.tsx — the stats page's headline figures and the chart under
+// them. Each figure is a button that charts that figure per day, so the chart
+// is not only visitors. Its own module because it holds state; `Stats` stays a
+// server component and hands it the digest, which is plain JSON.
+import { useMemo, useState } from 'react';
+import { TimeChart } from './chart.js';
+const count = (n) => n.toLocaleString('en');
+const duration = (s) => (s < 60 ? `${Math.round(s)}s` : `${Math.floor(s / 60)}m ${Math.round(s % 60)}s`);
+const percent = (n) => `${Math.round(n)}%`;
+/** Unsigned at zero, so no change never reads as growth. */
+const change = (now, before) => {
+    if (!before)
+        return null;
+    const pct = Math.round((100 * (now - before)) / before);
+    return pct > 0 ? `+${pct}%` : `${pct}%`;
+};
+const figuresOf = (d) => [
+    { label: 'Visitors', value: count(d.visitors), delta: change(d.visitors, d.previous_visitors), day: r => r.visitors },
+    { label: 'Page views', value: count(d.pageviews), day: r => r.pageviews },
+    {
+        label: 'Bounce rate',
+        value: d.bounce_rate == null ? '–' : percent(d.bounce_rate),
+        day: r => (r.visits ? (100 * r.bounces) / r.visits : null),
+        format: percent,
+    },
+    {
+        label: 'Visit length',
+        value: d.visit_duration == null ? '–' : duration(d.visit_duration),
+        day: r => (r.visits ? r.seconds / r.visits : null),
+        format: duration,
+    },
+    { label: 'With agents', value: count(d.visitors_incl_agents), day: r => r.visitors_incl_agents },
+    ...(d.follow_clicks ? [{ label: 'Clicks to X', value: count(d.follow_clicks.events), day: (r) => r.follow_clicks }] : []),
+];
+const DAY = 86_400;
+const EMPTY = { date: '', visitors: 0, pageviews: 0, visits: 0, bounces: 0, seconds: 0, visitors_incl_agents: 0, follow_clicks: 0 };
+/**
+ * The figures as `.stats-figures button[aria-pressed]` and the pressed one per
+ * day from `first` (a UTC day number) to today. A count's empty day is a zero;
+ * a rate's is left out, since no visits is not a bounce rate of nothing.
+ */
+export function StatsFigures({ digest, first }) {
+    const figures = useMemo(() => figuresOf(digest), [digest]);
+    const [chosen, choose] = useState(0);
+    const figure = figures[chosen] ?? figures[0];
+    const byDay = useMemo(() => new Map(digest.by_day.map(r => [r.date, r])), [digest.by_day]);
+    const series = useMemo(() => {
+        const today = Math.floor(Date.now() / 1000 / DAY);
+        return Array.from({ length: today - first + 1 }, (_, i) => {
+            const time = (first + i) * DAY;
+            const value = figure.day(byDay.get(new Date(time * 1000).toISOString().slice(0, 10)) ?? EMPTY);
+            return value == null ? null : { time, value };
+        }).filter(p => p !== null);
+    }, [byDay, first, figure]);
+    return (_jsxs(_Fragment, { children: [_jsx("div", { className: "stats-figures", role: "group", "aria-label": "Chart", children: figures.map((f, i) => (_jsxs("button", { type: "button", "aria-pressed": i === chosen, onClick: () => choose(i), children: [_jsx("span", { children: f.label }), _jsxs("strong", { children: [f.value, f.delta && _jsx("small", { children: ` ${f.delta}` })] })] }, f.label))) }), _jsx(TimeChart, { series: series, label: `${figure.label} per day`, ranges: ['all'], aggregate: "mean", fromZero: true, format: figure.format, className: "stats-chart" })] }));
+}

package/dist/stats.d.ts

@@ -13,8 +13,8 @@ export declare const STATS_RANGES: readonly [1, 7, 30, 90, 365, number];
 export declare const statsDays: (param: unknown, ranges?: readonly number[], fallback?: number) => number;
 /**
  * A site's own analytics on one page: the headline figures against the window
- * before, visitors per day, and every ranked list the digest carries. Lists
- * with nothing in them are left out. The chart and the bars are
- * `currentColor` until the importing stylesheet gives them a colour.
+ * before, whichever of them is chosen per day, and every ranked list the
+ * digest carries. Lists with nothing in them are left out. The chart and the
+ * bars are `currentColor` until the importing stylesheet gives them a colour.
  */
 export declare function Stats({ digest: d, days, ranges }: StatsProps): import("react").JSX.Element;

package/dist/stats.js

@@ -1,5 +1,5 @@
 import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
-import { TimeChart } from './chart.js';
+import { StatsFigures } from './stats-figures.js';
 /** The windows the stats page offers, in days; `Infinity` is all time. */
 export const STATS_RANGES = [1, 7, 30, 90, 365, Infinity];
 /** A window as its `?days=` value. */
@@ -16,14 +16,6 @@ const country = (code) => {
         return code;
     }
 };
-const duration = (s) => (s < 60 ? `${s}s` : `${Math.floor(s / 60)}m ${s % 60}s`);
-/** Unsigned at zero, so no change never reads as growth. */
-const change = (now, before) => {
-    if (!before)
-        return null;
-    const pct = Math.round((100 * (now - before)) / before);
-    return pct > 0 ? `+${pct}%` : `${pct}%`;
-};
 function StatsList({ title, rows, label = v => v }) {
     if (!rows.length)
         return null;
@@ -32,29 +24,15 @@ function StatsList({ title, rows, label = v => v }) {
 }
 /**
  * A site's own analytics on one page: the headline figures against the window
- * before, visitors per day, and every ranked list the digest carries. Lists
- * with nothing in them are left out. The chart and the bars are
- * `currentColor` until the importing stylesheet gives them a colour.
+ * before, whichever of them is chosen per day, and every ranked list the
+ * digest carries. Lists with nothing in them are left out. The chart and the
+ * bars are `currentColor` until the importing stylesheet gives them a colour.
  */
 export function Stats({ digest: d, days, ranges = STATS_RANGES }) {
-    const byDay = new Map(d.by_day.map(r => [r.date, r.visitors]));
     // A rolling window of n days touches n + 1 UTC dates, the first of them in
     // part. All time starts at the first day anything was counted.
     const today = Math.floor(Date.now() / 86_400_000);
     const first = Number.isFinite(days) ? today - days : Math.min(today, ...d.by_day.map(r => Date.parse(r.date) / 86_400_000));
-    const series = Array.from({ length: today - first + 1 }, (_, i) => {
-        const time = (first + i) * 86_400;
-        return { time, value: byDay.get(new Date(time * 1000).toISOString().slice(0, 10)) ?? 0 };
-    });
-    const figures = [
-        ['Visitors', count(d.visitors), change(d.visitors, d.previous_visitors)],
-        ['Page views', count(d.pageviews), null],
-        ['Bounce rate', d.bounce_rate == null ? '–' : `${d.bounce_rate}%`, null],
-        ['Visit length', d.visit_duration == null ? '–' : duration(d.visit_duration), null],
-        ['With agents', count(d.visitors_incl_agents), null],
-    ];
-    if (d.follow_clicks)
-        figures.push(['Clicks to X', count(d.follow_clicks.events), null]);
     const rows = (list, k, m) => list.map(r => [r[k], r[m]]);
-    return (_jsxs("div", { className: "stats", children: [_jsx("nav", { className: "stats-ranges", "aria-label": "Window", children: ranges.map(n => (_jsx("a", { href: `?days=${daysParam(n)}`, "aria-current": n === days ? 'page' : undefined, children: n === 1 ? '24 hours' : Number.isFinite(n) ? `${n} days` : 'All time' }, n))) }), _jsx("dl", { className: "stats-figures", children: figures.map(([label, value, delta]) => (_jsxs("div", { children: [_jsx("dt", { children: label }), _jsxs("dd", { children: [value, delta && _jsx("small", { children: ` ${delta}` })] })] }, label))) }), _jsx(TimeChart, { series: series, label: "Visitors per day", ranges: ['all'], aggregate: "mean", fromZero: true, className: "stats-chart" }), _jsxs("div", { className: "stats-lists", children: [_jsx(StatsList, { title: "Pages", rows: rows(d.top_pages, 'page', 'visitors') }), _jsx(StatsList, { title: "Entry pages", rows: rows(d.entry_pages, 'page', 'visitors') }), _jsx(StatsList, { title: "Sources", rows: rows(d.top_sources, 'source', 'visitors') }), _jsx(StatsList, { title: "From X posts", rows: rows(d.from_posts, 'page', 'visitors') }), _jsx(StatsList, { title: "Sibling sites", rows: rows(d.sibling_referrals, 'source', 'visitors') }), _jsx(StatsList, { title: "Countries", rows: rows(d.countries, 'country', 'visitors'), label: country }), _jsx(StatsList, { title: "Devices", rows: rows(d.devices, 'device', 'visitors') }), _jsx(StatsList, { title: "Agent tool calls", rows: rows(d.agent_tool_calls, 'tool', 'events') }), _jsx(StatsList, { title: "Searches that found nothing", rows: rows(d.gaps, 'query', 'events') })] })] }));
+    return (_jsxs("div", { className: "stats", children: [_jsx("nav", { className: "stats-ranges", "aria-label": "Window", children: ranges.map(n => (_jsx("a", { href: `?days=${daysParam(n)}`, "aria-current": n === days ? 'page' : undefined, children: n === 1 ? '24 hours' : Number.isFinite(n) ? `${n} days` : 'All time' }, n))) }), _jsx(StatsFigures, { digest: d, first: first }), _jsxs("div", { className: "stats-lists", children: [_jsx(StatsList, { title: "Pages", rows: rows(d.top_pages, 'page', 'visitors') }), _jsx(StatsList, { title: "Entry pages", rows: rows(d.entry_pages, 'page', 'visitors') }), _jsx(StatsList, { title: "Sources", rows: rows(d.top_sources, 'source', 'visitors') }), _jsx(StatsList, { title: "From X posts", rows: rows(d.from_posts, 'page', 'visitors') }), _jsx(StatsList, { title: "Sibling sites", rows: rows(d.sibling_referrals, 'source', 'visitors') }), _jsx(StatsList, { title: "Countries", rows: rows(d.countries, 'country', 'visitors'), label: country }), _jsx(StatsList, { title: "Devices", rows: rows(d.devices, 'device', 'visitors') }), _jsx(StatsList, { title: "Agent tool calls", rows: rows(d.agent_tool_calls, 'tool', 'events') }), _jsx(StatsList, { title: "Searches that found nothing", rows: rows(d.gaps, 'query', 'events') })] })] }));
 }

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "wiki-formant",
-  "version": "0.36.0",
+  "version": "0.39.0",
   "description": "The portable half of a wiki: derived taxonomy and facet controls, a version-negotiating MCP transport, markdown twins, block rendering, a rich-text editor engine, conditional-GET plumbing, and the headers and CSP every origin sends.",
   "type": "module",
   "license": "MIT",