@eifi1/ui-kit 0.33.1 → 0.35.0

package/src/components/series-chart.tsx

@@ -25,13 +25,19 @@
 // "area"` (and `stack`), and the abscissa may be a row of PERIODS (`x.type:
 // "category"`) or real dates (`x.type: "time"`) instead of a number the app had to
 // invent. What each of those does to the zoom is decided in one place,
-// `defaultZoomAxes` in `chart-zoom.tsx`.
+// `defaultZoomAxes` in `chart-zoom-core.tsx`.
 //
 // **An axis budget (0.15.1).** Every visible axis reserves its band, and four of them
 // leave a phone nothing to plot. A chart draws at most `maxVisibleAxes`, and — on its
 // own, when it is too narrow for the ones it has — one a side; the rest go hidden,
 // still scaling their lines, and their series say the unit the title no longer does.
 // The rule is `series-chart-budget.ts`.
+//
+// **A row budget (0.34, KS U2).** Opt-in: `maxRows` thins a long table to at most that
+// many rows before recharts sees it, by ENVELOPE — each bucket's lowest and highest row
+// of every drawn series — never by stride, which aliases a fast tone into a slow wave.
+// A zoom thins the window on show, so it draws more detail, not the same rows larger.
+// The rule is `series-chart-thin.ts`.
 import { useEffect, useLayoutEffect, useMemo, useRef, useState } from "react";
 import type { KeyboardEvent, ReactNode, RefObject } from "react";
 import {
@@ -58,21 +64,54 @@ import {
   type ZoomAxesSetting,
   type ZoomBinding,
   type ZoomFitSource,
-} from "./chart-zoom";
+} from "./chart-zoom-core";
 import { STEP_DASH, strokeDash, type LegendEntry } from "./toggle-legend";
 import { DEFAULT_SERIES_CHART_LABELS, type SeriesChartLabels } from "./series-chart-labels";
 import { categoryTicks, integerTicks, niceTicks, tickTarget, timeTicksWithUnit, type TimeTickUnit } from "./series-chart-ticks";
 // The tick module stays internal; the one type of it a public prop names is re-exported.
 export type { TimeTickUnit } from "./series-chart-ticks";
 import { autoAxisBudget, axisUnit, budgetedAxes, type SeriesChartAxisBudget } from "./series-chart-budget";
+import { thinnedRows } from "./series-chart-thin";
 // The rule stays internal, like the ticks; the one type a public prop names is re-exported.
 export type { SeriesChartAxisBudget } from "./series-chart-budget";
+import {
+  AXIS_TITLE_OFFSET,
+  MIN_TICK_GAP,
+  TIME_TICK_FORMAT,
+  anchoredBand,
+  axisBandWidth,
+  extend,
+  finite,
+  padBand,
+  resolveTicks,
+  soleSeriesColor,
+  tiltedTickBand,
+  xModel,
+  type XModel,
+} from "./series-chart-axes";
+// The pure axis and series helpers live in series-chart-axes.ts (MOD-9); their public
+// names are still this module's, so `/chart` and the barrel export them as before.
+export {
+  AXIS_TICK_WIDTH,
+  AXIS_TITLE_STRIP,
+  anchoredBand,
+  axisBandWidth,
+  mergeSeries,
+  oneAxis,
+  padBand,
+  paddedDomain,
+  seriesKey,
+  soleSeriesColor,
+  visibleSeries,
+} from "./series-chart-axes";
+export type { SeriesSource } from "./series-chart-axes";
 import { paletteFor } from "../theme/chart-palette";
 import {
   useKitChartTooltipPlacement,
   useKitLabels,
   useKitLocale,
   type ChartTooltipPlacement,
+  type LabelOverride,
 } from "../i18n/kit-labels";
 import { useBreakpoint } from "../hooks/use-breakpoint";
 import { useTextSize } from "../theme/text-size";
@@ -623,7 +662,7 @@ export interface SeriesChartProps {
   /** Supplied by `withChartZoom` and by nothing else. */
   zoom?: ZoomBinding;
   /** Per-chart strings over `<UiKitProvider labels={{ seriesChart }}>`. */
-  labels?: Partial<SeriesChartLabels>;
+  labels?: LabelOverride<SeriesChartLabels>;
   /** BCP 47 tag for the default number formats. Default: the provider's. */
   locale?: string;
   /** Onto the chart's root (`ChartContainer`) — e.g. an app's own grid ink. */
@@ -632,195 +671,35 @@ export interface SeriesChartProps {
    *  {@link SeriesChartSeries.minBarLength}. Drawing only: domain, tooltip and names
    *  keep the real value. Default: none — a zero draws nothing. */
   minBarLength?: number;
-}
-
-/** How much of an axis band the rotated title takes, in px at Normal — × the text size's
- *  scale on the chart (§3.2), since the title is text. Reserved rather than shared with
- *  the ticks: a title merely offset inside the band prints on top of a five-figure tick,
- *  and which gives way depends on the data. */
-export const AXIS_TITLE_STRIP = 16;
-
-/** Where inside its strip the rotated title sits. */
-const AXIS_TITLE_OFFSET = 10;
-
-/** The tallest band tilted x ticks reserve, in px at Normal (× the scale). A category
- *  name longer than this at its angle is clipped rather than squeezing the plot down to
- *  a strip. */
-const MAX_TILTED_TICK_BAND = 120;
-
-/** What one character of a tick label is taken to be, in px at Normal, for the tilted
- *  band — the shell's `text-xs`. An estimate: the SVG is not laid out yet when the band
- *  is decided. Both grow with the text size, as `text-xs` does (§3.2). */
-const TICK_CHAR_WIDTH = 7;
-const TICK_LINE_HEIGHT = 12;
-/** recharts' gap between the axis line and a bottom tick's text — px, at every size:
- *  recharts draws it, not the type. */
-const TICK_GAP = 8;
-/** recharts' own band under level x ticks. */
-const LEVEL_TICK_BAND = 30;
-/** The least room recharts' x ticks keep between labels, in px at Normal. */
-const MIN_TICK_GAP = 32;
-
-/**
- * The height the x axis reserves for its ticks at a text `scale`: tilted by `angle`
- * degrees, the rotated box of the longest label, from its length; level, recharts' own
- * 30 px grown with the labels. `undefined` for level ticks at Normal, where recharts'
- * default is exactly that.
- */
-function tiltedTickBand(labels: readonly string[], angle: number, scale = 1): number | undefined {
-  if (!angle) return scale === 1 ? undefined : Math.ceil(LEVEL_TICK_BAND * scale);
-  const rad = (Math.abs(angle) * Math.PI) / 180;
-  const longest = Math.max(0, ...labels.map((label) => label.length)) * TICK_CHAR_WIDTH * scale;
-  const band = Math.sin(rad) * longest + Math.cos(rad) * TICK_LINE_HEIGHT * scale + TICK_GAP;
-  return Math.min(Math.round(MAX_TILTED_TICK_BAND * scale), Math.max(Math.ceil(LEVEL_TICK_BAND * scale), Math.ceil(band)));
-}
-
-/** The width the ticks of a y axis get when a caller does not say, in px at Normal. */
-export const AXIS_TICK_WIDTH = 48;
-
-/**
- * How much air a FITTED axis leaves between the data and its frame, as a fraction of
- * the range. Recharts fits `[dataMin, dataMax]`, which draws a peak half a stroke
- * outside the plot and a curve running to its limit indistinguishable from the frame.
- */
-const AUTO_PAD = 0.04;
-
-/** The band a fitted axis draws, padded — and a real band for constant data, which is
- *  a zero-height domain recharts cannot scale into. `undefined` when nothing finite. */
-export function paddedDomain(values: Iterable<number>): [number, number] | undefined {
-  let low = Infinity;
-  let high = -Infinity;
-  for (const value of values) {
-    if (!Number.isFinite(value)) continue;
-    if (value < low) low = value;
-    if (value > high) high = value;
-  }
-  return padBand(low, high);
-}
-
-/**
- * {@link paddedDomain} for a caller that has already walked its own data — so a row
- * of charts can share one scale without building an array to find two numbers in, and
- * without a second padding rule. `low > high` means "nothing was seen": `undefined`.
- */
-export function padBand(low: number, high: number): [number, number] | undefined {
-  if (!(low <= high)) return undefined;
-  const pad = (high - low) * AUTO_PAD || Math.abs(high) * AUTO_PAD || 1;
-  return [low - pad, high + pad];
-}
-
-/**
- * The whole band a y axis occupies: its ticks, and its title when it draws one. For
- * lining a heading up over a PLOT rather than over its column.
- *
- * `scale` is the text size's (`useTextSize().scale`, §3.2, §10.10): the chart draws every
- * band — the default 48 px and a caller's own `width` alike (keksdose's
- * `MONEY_AXIS_WIDTH`) — this many times wider, because the ticks in it are `text-xs`
- * and grow with the text. A heading lined up over the plot has to pass the same scale.
- * One factor for both sides of a facing pair, so the mirrored bands stay equal.
- */
-export function axisBandWidth(tickWidth: number | undefined, titled: boolean, scale = 1): number {
-  const band = (tickWidth ?? AXIS_TICK_WIDTH) + (titled ? AXIS_TITLE_STRIP : 0);
-  return scale === 1 ? band : Math.round(band * scale);
-}
-
-/**
- * The colour an axis TITLE takes, or `undefined` for the neutral one.
- *
- * An axis measuring exactly one line is that line's, and saying so in the title lets a
- * reader find a channel's scale without counting axes. An axis measuring several is
- * nobody's — a title in the first one's colour would be claiming it. Counted off the
- * series, so toggling a second line onto an axis gives the colour up in the same render.
- */
-export function soleSeriesColor(
-  axis: Pick<SeriesChartAxisShape, "id" | "color">,
-  series: readonly Pick<SeriesChartSeries, "axis">[],
-): string | undefined {
-  const mine = series.filter((entry) => (entry.axis ?? DEFAULT_Y_AXIS) === axis.id);
-  return mine.length === 1 ? axis.color : undefined;
-}
-
-/** The single-axis case, which is most charts. `width` is what the TICKS need;
- *  `orientation` is which side they stand on. */
-export function oneAxis(
-  format: ((value: number) => string) | undefined,
-  title: string,
-  width?: number,
-  orientation?: "left" | "right",
-): SeriesChartAxis[] {
-  return [{ id: DEFAULT_Y_AXIS, format, title, width, orientation }];
-}
-
-/** One source's samples: an abscissa and the channels measured against it. */
-export interface SeriesSource {
-  x: number[];
-  channels: Record<string, number[]>;
-}
-
-/**
- * Merge sources sampled on different grids into rows the chart can draw.
- *
- * Merged ON THE ABSCISSA VALUE ITSELF, never interpolated onto a common grid: a line
- * through invented points looks exactly like one through measured ones. Where a source
- * has no sample the key is absent, and `connectNulls` bridges the hole with the same
- * straight segment an interpolation would have drawn — without claiming a measurement.
- */
-export function mergeSeries(sources: SeriesSource[]): Record<string, number>[] {
-  const byAbscissa = new Map<number, Record<string, number>>();
-  for (const source of sources) {
-    source.x.forEach((value, index) => {
-      const row = byAbscissa.get(value) ?? { x: value };
-      for (const [key, channel] of Object.entries(source.channels)) row[key] = channel[index];
-      byAbscissa.set(value, row);
-    });
-  }
-  return [...byAbscissa.values()].sort((a, b) => a.x - b.x);
-}
-
-/**
- * A series key built out of parts — as a CSS identifier.
- *
- * The chart shell paints each series through `--color-<key>`, and skips (with a
- * console warning) any key that is not `[A-Za-z_][A-Za-z0-9_-]*`. A line whose colour
- * was skipped has no stroke at all: an axis, a grid and nothing between them. So a key
- * assembled out of DATA — an id, an enum, a side — goes through here: every other
- * character becomes `_`, the parts are joined with `_`, and a key that would start with
- * a digit or a hyphen gets a leading `_`.
- */
-export function seriesKey(...parts: (string | number)[]): string {
-  const key = parts.map((part) => String(part).replace(/[^A-Za-z0-9_-]/g, "_")).join("_");
-  return /^[A-Za-z_]/.test(key) ? key : `_${key}`;
-}
-
-/**
- * The band an axis carrying bars or areas draws: the data's extent with ZERO in it,
- * padded only on the sides that are not zero — bars standing on a frame's bottom edge,
- * not floating four per cent above it on a band of air nobody asked for.
- * `undefined` when there is nothing to fit.
- */
-export function anchoredBand(extent: readonly [number, number] | undefined): [number, number] | undefined {
-  if (!extent) return undefined;
-  const low = Math.min(0, extent[0]);
-  const high = Math.max(0, extent[1]);
-  const pad = (high - low) * AUTO_PAD || 1;
-  return [low < 0 ? low - pad : 0, high > 0 ? high + pad : 0];
-}
-
-/**
- * Series with their colours settled BEFORE any are switched off.
- *
- * A series with no `color` takes `paletteFor(its position)` — and a legend toggle that
- * hands the chart a shorter list moves every later series one position up, repainting
- * it in its neighbour's colour on each click. Resolving the colours on the full list
- * and filtering after keeps each series in the colour its legend entry shows.
- */
-export function visibleSeries(
-  series: readonly SeriesChartSeries[],
-  hidden: ReadonlySet<string>,
-): SeriesChartSeries[] {
-  return series
-    .map((entry, index) => ({ ...entry, color: entry.color ?? paletteFor(index) }))
-    .filter((entry) => !hidden.has(entry.key));
+  /**
+   * The most rows the chart hands recharts (0.34, KS U2). A longer table is THINNED, by
+   * envelope: cut into buckets, and from each the row where each drawn series is lowest
+   * and the row where it is highest, plus each series' first and last sample — so every
+   * line still reaches every peak and dip the table has, and a tone faster than the
+   * buckets draws as the band it fills, never as the slow wave a stride would alias it
+   * into. Nothing is averaged or invented; every point drawn is one of `rows`. There is
+   * no stride option, on purpose.
+   *
+   * Opt-in. Default: none — every row is drawn, as before. Kurvenschmiede draws 2000 for
+   * a 200-second profile at 1 kHz; a few thousand is about what a plot's pixels can show.
+   *
+   * - **Zoom** thins the window on show (with one row past each edge), so zooming in
+   *   draws more of the samples there — all of them, once the window holds fewer than
+   *   `maxRows` — rather than the same rows larger. That needs an abscissa that never
+   *   decreases; where it doubles back (a loop against position) the whole table is
+   *   thinned once, and the abscissa is enveloped too, so the path's turning points stay.
+   * - **Fitting** is not thinned: the axes, the zoom's refit and the automatic whole
+   *   ticks read every row, so a pinned or fitted band is the same either way.
+   * - **Indices** stay the caller's: a `dot` function's `point.index` and a click's
+   *   `hit.index` are positions in `rows`, not in the rows drawn.
+   * - **A category axis** (`x.type: "category"`) is never thinned: a slot is a period, and
+   *   a period left out is a gap. Meant for lines and areas; stacked layers are each
+   *   enveloped on their own.
+   *
+   * The budget is a cap for any `maxRows` of at least 2 + 4 × the drawn series (the
+   * fewest rows an envelope can be drawn with); a smaller one is raised to that.
+   */
+  maxRows?: number;
 }
 
 /** A series' name with its unit after it: "Velocity (mm/s)" — unless the name already
@@ -892,124 +771,6 @@ function useDefaultFormat(localeProp: string | undefined): (value: number) => st
 /** The Y-axis list a chart draws when the caller gave none. */
 const ONE_UNTITLED_AXIS: SeriesChartAxis[] = [{ id: DEFAULT_Y_AXIS, title: "" }];
 
-/** Where a category or time chart keeps each row's plotted position. Not the caller's
- *  key: that one still holds their own value, which `format` and a hit hand back. */
-const PLOTTED_X = "__seriesChartX";
-
-/** A finite number, or `undefined` — the only thing a row cell counts as a sample. */
-const finite = (value: unknown): number | undefined =>
-  typeof value === "number" && Number.isFinite(value) ? value : undefined;
-
-/** A time value as epoch ms. A date-only ISO string is LOCAL midnight (see
- *  `SeriesChartX.type`); anything unreadable is `undefined`, i.e. not plotted. */
-function toTime(value: unknown): number | undefined {
-  if (value instanceof Date) return finite(value.getTime());
-  if (typeof value === "number") return finite(value);
-  if (typeof value !== "string") return undefined;
-  const day = /^(\d{4})-(\d{2})(?:-(\d{2}))?$/.exec(value);
-  if (day) return new Date(Number(day[1]), Number(day[2]) - 1, Number(day[3] ?? 1)).getTime();
-  return finite(Date.parse(value));
-}
-
-/** A category's identity, so a Date matches another Date of the same instant. */
-const categoryId = (value: unknown) =>
-  value instanceof Date ? `d:${value.getTime()}` : `${typeof value}:${String(value)}`;
-
-/**
- * The abscissa, reduced to a number line — which is all the plot, the ticks and the
- * zoom ever deal in. A number stays itself; a category becomes its slot index; a time
- * its epoch ms. Everything the caller sees (ticks, tooltip, hits) is turned back.
- */
-interface XModel {
-  kind: "number" | "category" | "time";
-  /** The caller's key, still holding their value. */
-  sourceKey: string;
-  /** The key the plot reads. The same as `sourceKey` on a number line. */
-  plotKey: string;
-  /** The rows as plotted. The caller's own on a number line. */
-  rows: readonly SeriesChartRow[];
-  /** The caller's rows, which dots and hits hand back. */
-  source: readonly SeriesChartRow[];
-  position: (value: unknown) => number | undefined;
-  valueAt: (position: number) => SeriesChartXValue;
-}
-
-function xModel(rows: readonly SeriesChartRow[], x: SeriesChartX): XModel {
-  const sourceKey = x.key ?? "x";
-  if (x.type === "category") {
-    const slots = new Map<string, number>();
-    rows.forEach((row, index) => {
-      const id = categoryId(row[sourceKey]);
-      if (!slots.has(id)) slots.set(id, index);
-    });
-    return {
-      kind: "category",
-      sourceKey,
-      plotKey: PLOTTED_X,
-      rows: rows.map((row, index) => ({ ...row, [PLOTTED_X]: index })),
-      source: rows,
-      position: (value) => slots.get(categoryId(value)),
-      valueAt: (position) => rows[Math.round(position)]?.[sourceKey] as SeriesChartXValue,
-    };
-  }
-  if (x.type === "time") {
-    return {
-      kind: "time",
-      sourceKey,
-      plotKey: PLOTTED_X,
-      rows: rows.map((row) => ({ ...row, [PLOTTED_X]: toTime(row[sourceKey]) })),
-      source: rows,
-      position: toTime,
-      valueAt: (position) => new Date(position),
-    };
-  }
-  return {
-    kind: "number",
-    sourceKey,
-    plotKey: sourceKey,
-    rows,
-    source: rows,
-    position: finite,
-    valueAt: (position) => position,
-  };
-}
-
-/** Caller ticks, as positions inside the domain on show. */
-function resolveTicks<T>(
-  values: SeriesChartTickValues<T> | undefined,
-  domain: [number, number] | undefined,
-  position: (value: T) => number | undefined,
-): number[] | undefined {
-  if (!values || !domain) return undefined;
-  const list = typeof values === "function" ? values(domain) : values;
-  if (!list) return undefined;
-  const slack = (domain[1] - domain[0]) * 1e-9;
-  return list
-    .map(position)
-    .filter((at): at is number => at !== undefined && at >= domain[0] - slack && at <= domain[1] + slack);
-}
-
-/** A low/high pair widened by some values, or `undefined` if there is still none. */
-function extend(
-  span: readonly [number, number] | undefined,
-  values: readonly (number | undefined)[],
-): [number, number] | undefined {
-  let out: [number, number] | undefined = span ? [span[0], span[1]] : undefined;
-  for (const value of values) {
-    if (value === undefined || !Number.isFinite(value)) continue;
-    out = out ? [Math.min(out[0], value), Math.max(out[1], value)] : [value, value];
-  }
-  return out;
-}
-
-/** How a time tick is written, by what one step of the ticks is. */
-const TIME_TICK_FORMAT: Record<TimeTickUnit, Intl.DateTimeFormatOptions> = {
-  hour: { hour: "2-digit", minute: "2-digit" },
-  day: { day: "numeric", month: "short" },
-  month: { month: "short", year: "2-digit" },
-  year: { year: "numeric" },
-};
-
 /** The two numbers every mark type needs to agree on for the chart to read as one. */
 const LINE_WIDTH = 2;
 const STEP_WIDTH = 1.5;
@@ -1248,6 +1009,7 @@ function SeriesPlot({
   maxVisibleAxes,
   axisBudget = "auto",
   onAxisBudget,
+  maxRows,
 }: PlotProps) {
   const labels = useKitLabels("seriesChart", DEFAULT_SERIES_CHART_LABELS, labelsProp);
   const locale = useKitLocale(localeProp);
@@ -1303,6 +1065,27 @@ function SeriesPlot({
         );
   const budgeted = [...capped, ...auto];
   const budgetKey = budgeted.join("\n");
+
+  // The rows drawn under `maxRows` (KS U2, `series-chart-thin.ts`): their indices into
+  // the caller's rows, or `undefined` for all of them. Up here, above the empty state's
+  // early return, like every hook; worked out again only when the rows, the series
+  // drawn, the budget or the x window change — not on every render of a drag.
+  const thinKeys = series.map((entry) => entry.key).join("\n");
+  const [windowFrom, windowTo] = zoom?.xDomain ?? [undefined, undefined];
+  const thin = useMemo(() => {
+    if (model.kind === "category" || maxRows === undefined) return undefined;
+    const keys = thinKeys ? thinKeys.split("\n") : [];
+    const window: [number, number] | undefined =
+      windowFrom !== undefined && windowTo !== undefined ? [windowFrom, windowTo] : undefined;
+    const kept = thinnedRows(model.rows, model.plotKey, keys, maxRows, window);
+    if (!kept) return undefined;
+    return {
+      kept,
+      plotted: kept.map((index) => model.rows[index]),
+      source: kept.map((index) => model.source[index]),
+    };
+  }, [model, thinKeys, maxRows, windowFrom, windowTo]);
+
   // Reported when the SET changes, not on every render — an inline callback is a new
   // function each time, and the guard keeps it from being called again for nothing.
   const reported = useRef("");
@@ -1328,7 +1111,7 @@ function SeriesPlot({
         {empty !== undefined ? (
           empty
         ) : (
-          <p className="text-xs text-[var(--text-muted)]">{labels.empty}</p>
+          <p className="text-xs text-muted">{labels.empty}</p>
         )}
       </div>
     );
@@ -1336,8 +1119,14 @@ function SeriesPlot({
 
   const x = xAxis;
   const xKey = model.plotKey;
-  const plotted = model.rows;
-  const rows = model.source;
+  // What is DRAWN — the thinned rows under `maxRows`, else the caller's — and what is
+  // FITTED: every row, so a band, a whole-number tick and the zoom's refit are the same
+  // with a budget as without one.
+  const plotted = thin?.plotted ?? model.rows;
+  const rows = thin?.source ?? model.source;
+  const allPlotted = model.rows;
+  /** A drawn row's position in the CALLER's rows, which dots and hits report. */
+  const origin = (index: number) => thin?.kept[index] ?? index;
   // What the budget took off the chart: an axis drawn as `hide` — and its unit, which
   // the tooltip names now that no title says it. Axes the caller hid keep their series'
   // labels as given, as they always did.
@@ -1395,7 +1184,7 @@ function SeriesPlot({
           ...(extend(
             undefined,
             [
-              ...plotted.map((row) => finite(row[xKey])),
+              ...allPlotted.map((row) => finite(row[xKey])),
               ...xRefs.map((ref) => xPos(ref.value)),
               ...(markers ?? []).map((marker) => xPos(marker.x)),
             ],
@@ -1408,7 +1197,7 @@ function SeriesPlot({
   const integerX =
     model.kind === "number" &&
     (x.integerTicks ??
-      plotted.every((row) => {
+      allPlotted.every((row) => {
         const value = finite(row[xKey]);
         return value === undefined || Number.isInteger(value);
       }));
@@ -1456,7 +1245,7 @@ function SeriesPlot({
   const tickBand = tiltedTickBand((xTicks ?? []).map((tick) => xFormat(tick)), tickAngle, scale);
 
   const source: ZoomFitSource = {
-    rows: plotted,
+    rows: allPlotted,
     series,
     axes,
     xKey,
@@ -1475,7 +1264,7 @@ function SeriesPlot({
     series
       .filter((entry) => (entry.axis ?? DEFAULT_Y_AXIS) === axis.id)
       .every((entry) =>
-        plotted.every((row) => {
+        allPlotted.every((row) => {
           const value = finite(row[entry.key]);
           return value === undefined || Number.isInteger(value);
         }),
@@ -1506,7 +1295,7 @@ function SeriesPlot({
       : model.valueAt(finite(plotted[index][xKey]) ?? NaN);
   const hitAt = (index: number, key?: string): SeriesChartHit | undefined => {
     const row = rows[index];
-    return row ? { index, row, x: xOf(index), key } : undefined;
+    return row ? { index: origin(index), row, x: xOf(index), key } : undefined;
   };
 
   // The keyboard stops of a clickable chart — every bar with a value, slot by slot; or,
@@ -1561,7 +1350,7 @@ function SeriesPlot({
       if (value === undefined || !Number.isFinite(cx) || !Number.isFinite(cy)) return <g />;
       const point: SeriesChartPoint = {
         key: entry.key,
-        index,
+        index: origin(index),
         row: rows[index],
         x: xOf(index),
         value,
@@ -1600,6 +1389,9 @@ function SeriesPlot({
     <ChartContainer
       ref={setBox}
       data-axis-budget={budgeted.length ? budgetKey.replace(/\n/g, " ") : undefined}
+      // "drawn/all" while `maxRows` thins: what a reader of the DOM (a test, a bug
+      // report) needs to know the picture is an envelope.
+      data-thinned={thin ? `${thin.kept.length}/${allPlotted.length}` : undefined}
       config={config}
       className={cn(
         "w-full",
@@ -1666,7 +1458,7 @@ function SeriesPlot({
               value={x.title}
               position="insideBottom"
               offset={-grow(12)}
-              className="fill-[var(--text-muted)] text-caption"
+              className="fill-muted text-caption"
             />
           )}
         </XAxis>
@@ -1711,7 +1503,7 @@ function SeriesPlot({
                   // and absent for a shared axis, so the class draws it.
                   style={{ textAnchor: "middle", fill: soleSeriesColor(axis, series) }}
                   offset={grow(AXIS_TITLE_OFFSET)}
-                  className="fill-[var(--text-muted)] text-caption"
+                  className="fill-muted text-caption"
                 />
               )}
             </YAxis>
@@ -1944,10 +1736,17 @@ function SeriesPlot({
 
 const ZoomablePlot = withChartZoom(SeriesPlot);
 
-/** The caller's props, with the abscissa reduced to numbers for the plot and the zoom. */
-function plotProps(props: SeriesChartProps): PlotProps {
+/**
+ * The caller's props, with the abscissa reduced to numbers for the plot and the zoom.
+ * The reduction is kept while the rows and the two settings it reads stay the same — a
+ * category or time chart otherwise re-maps every row on every render, and `maxRows`'
+ * envelope would be worked out again with it.
+ */
+function usePlotProps(props: SeriesChartProps): PlotProps {
   const x = props.x ?? {};
-  const model = xModel(props.rows, x);
+  const { rows } = props;
+  const { type, key } = x;
+  const model = useMemo(() => xModel(rows, { type, key }), [rows, type, key]);
   return { ...props, rows: model.rows, x: { key: model.plotKey }, model, xAxis: x };
 }
 
@@ -1957,7 +1756,7 @@ function plotProps(props: SeriesChartProps): PlotProps {
  * interaction.
  */
 export function StaticSeriesChart(props: SeriesChartProps) {
-  return <SeriesPlot {...plotProps(props)} />;
+  return <SeriesPlot {...usePlotProps(props)} />;
 }
 
 /**
@@ -1968,5 +1767,5 @@ export function StaticSeriesChart(props: SeriesChartProps) {
  */
 export function SeriesChart(props: SeriesChartProps) {
   // The zoom fits the PLOTTED rows — slot indices and epoch ms, not the caller's labels.
-  return <ZoomablePlot {...plotProps(props)} />;
+  return <ZoomablePlot {...usePlotProps(props)} />;
 }

package/src/components/server-wake-labels.ts

@@ -0,0 +1,11 @@
+// The English words of ./server-wake, in a module with no component code: the English
+// catalogue (src/i18n/defaults.ts) imports them without the component, so `en` loads as one
+// chunk like the other languages (0.34, KS U8). ./server-wake re-exports them.
+
+import type { ServerWakeLabels } from "./server-wake";
+
+export const DEFAULT_SERVER_WAKE_LABELS: ServerWakeLabels = {
+  slow: "Still loading — this is taking longer than usual.",
+  waking: (appName) =>
+    `The server goes to sleep when nobody is using ${appName ?? "the app"}, so the first request after a break has to start it again. That can take a moment — nothing is lost, the page fills in by itself.`,
+};