wiki-formant 0.57.1 → 0.58.0

package/README.md

@@ -847,7 +847,8 @@ own subpath, because it imports `@simplewebauthn/browser`.
 `Stats` (`wiki-formant/stats`) renders a `digest` as one page: the
 headline figures, each with its change from the window before
 (`.stats-delta[data-better]`, a share or for the bounce rate points, for the
-site's stylesheet to colour), one of them per day, every non-empty
+site's stylesheet to colour), one of them by day, week or month (a count's
+total, a rate's mean), every non-empty
 ranked list, and `?days=` links between windows, all time among them, pinned in
 the chart's frame as its own buttons are (`TimeChart`'s `controls`). Each
 figure is a button that charts it: visitors, agents, page views, bounce rate,
@@ -897,7 +898,7 @@ that makes 200 or fewer, so a year opens weekly and five years monthly.
 
 ```tsx
 // Daily points: the chart slices and steps them itself; 30D up.
-<TimeChart series={days} label="Transactions" aggregate="mean" fromZero />
+<TimeChart series={days} label="Transactions" aggregate="sum" fromZero />
 
 // A loader: asked for 'hour' (24H), '4h' (7D) or 'day' from 0 (every longer
 // range), once each.
@@ -915,8 +916,10 @@ 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
-as a collapse. `fromZero` starts a count's axis at zero and stops it there, with
+`sum` for a count, so a week reads as the week's total, and `mean` for a rate,
+which no total makes sense of. A stepped range starts on a whole week or month,
+so its first point is not a few days of one; the week in progress is its total
+so far. `fromZero` starts a count's axis at zero and stops it there, with
 no negative ticks under it. A single range draws no range buttons and shows every point.
 `chartSteps` is exported for a chart drawn elsewhere.
 
@@ -932,7 +935,7 @@ range can make it, and `onView` hears the range and step on mount and on every
 change, for a page that keeps them in its URL:
 
 ```tsx
-<TimeChart series={days} label="Transactions" aggregate="mean" fromZero
+<TimeChart series={days} label="Transactions" aggregate="sum" fromZero
   markers={[{ time: haltAt, label: 'Halt' }]} step="month" onView={v => keep(v)} />
 ```
 `base.css` pins the buttons (`.chart-controls button[aria-pressed]`) to the

package/dist/chart.d.ts

@@ -28,6 +28,8 @@ export type ChartView = {
     range: ChartRange;
     step: ChartStep | null;
 };
+/** How a week or month is made from its days: a price's last, a count's total, a rate's mean. */
+export type ChartAggregate = 'last' | 'sum' | 'mean';
 /** Every range, shortest first. A chart fed daily points offers the ones from 30D up. */
 export declare const CHART_RANGES: readonly ChartRange[];
 /** A step is offered once it makes four points, and the default is the finest that makes 200 or fewer. */
@@ -51,8 +53,8 @@ export interface TimeChartProps {
     ranges?: readonly ChartRange[];
     /** The range shown first. */
     range?: ChartRange;
-    /** A week or month of prices keeps its last; of counts, the mean of its days. */
-    aggregate?: 'last' | 'mean';
+    /** A week or month of prices keeps its last; of counts, the total of its days; of rates, their mean. */
+    aggregate?: ChartAggregate;
     /** The value axis starts at zero, so a quiet week does not read as a collapse. */
     fromZero?: boolean;
     /**

package/dist/chart.js

@@ -48,8 +48,8 @@ function bucketStart(time, step) {
 /**
  * Points, oldest first, one per step. A price keeps the last value in each
  * 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.
+ * lowest low. A count is the total of its days; a rate, their mean. Volume is
+ * summed.
  *
  * @internal
  */
@@ -66,6 +66,8 @@ export function bucketChart(points, step, aggregate) {
         }
         if (aggregate === 'last')
             last.value = p.value;
+        else if (aggregate === 'sum')
+            last.value += p.value;
         else
             last.value += (p.value - last.value) / ++n;
         if (last.high !== undefined && p.high !== undefined)
@@ -256,7 +258,7 @@ export function TimeChart({ series, label, ranges = typeof series === 'function'
         if (!ready || !c)
             return;
         c.api.priceScale('right').applyOptions({ scaleMargins: { top: MARGIN_TOP, bottom: fromZero ? 0 : 0.1 } });
-        c.area.applyOptions({ lineType: aggregate === 'mean' ? c.curved : c.straight, autoscaleInfoProvider: fromZero ? fromZeroScale : ownScale });
+        c.area.applyOptions({ lineType: aggregate === 'last' ? c.straight : c.curved, autoscaleInfoProvider: fromZero ? fromZeroScale : ownScale });
     }, [ready, 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());
@@ -298,7 +300,11 @@ export function TimeChart({ series, label, ranges = typeof series === 'function'
             return drawn(windowed, [], null);
         const { steps, fallback } = chartSteps(end - windowed[0].time);
         const chosen = step && steps.includes(step) ? step : fallback;
-        return drawn(chosen === 'day' ? windowed : bucketChart(windowed, chosen, aggregate), steps, chosen);
+        if (chosen === 'day')
+            return drawn(windowed, steps, chosen);
+        // A stepped range starts on a whole week or month, so its first total is not a few days of one.
+        const from = bucketStart(windowed[0].time, chosen);
+        return drawn(bucketChart(points.filter(p => p.time >= from), 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(() => {

package/dist/stats-figures.js

@@ -1,7 +1,7 @@
 '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
+// them. Each figure is a button that charts that figure by day, week or month, 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';
@@ -34,6 +34,7 @@ const figuresOf = ({ previous: p, ...d }) => [
         delta: change(d.bounce_rate, p.bounce_rate, { points: true, lowerIsBetter: true }),
         day: r => (r.visits ? (100 * r.bounces) / r.visits : null),
         format: percent,
+        aggregate: 'mean',
     },
     {
         label: 'Visit length',
@@ -41,6 +42,7 @@ const figuresOf = ({ previous: p, ...d }) => [
         delta: change(d.visit_duration, p.visit_duration),
         day: r => (r.visits ? r.seconds / r.visits : null),
         format: duration,
+        aggregate: 'mean',
     },
     ...(d.follow_clicks
         ? [
@@ -74,5 +76,5 @@ export function StatsFigures({ digest, first, windows }) {
             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", { className: "stats-delta", "data-better": f.delta.better, children: f.delta.text }))] })] }, f.label))) }), _jsx(TimeChart, { series: series, label: `${figure.label} per day`, ranges: ['all'], aggregate: "mean", fromZero: true, format: figure.format, controls: windows, className: "stats-chart" })] }));
+    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", { className: "stats-delta", "data-better": f.delta.better, children: f.delta.text }))] })] }, f.label))) }), _jsx(TimeChart, { series: series, label: figure.label, ranges: ['all'], aggregate: figure.aggregate ?? 'sum', fromZero: true, format: figure.format, controls: windows, className: "stats-chart" })] }));
 }

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "wiki-formant",
-  "version": "0.57.1",
+  "version": "0.58.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",