@pond-ts/charts 0.55.0 → 0.57.0

package/dist/viewport.js

@@ -36,28 +36,64 @@ export function clampToBounds(range, bounds) {
         return [hi - span, hi];
     return [range[0], range[1]];
 }
+/**
+ * Snap a computed view range to **whole milliseconds** — the last step of every
+ * gesture that derives a range from pixels.
+ *
+ * A wheel-zoom or drag-pan turns a pixel position into a time via
+ * `xScale.invert()`, so the result is fractional *by construction*: an ordinary
+ * scroll produces `1.7e12 + 0.37`. The epoch millisecond is this model's atomic
+ * unit — a sub-millisecond view range is not a finer view, it is a number with
+ * no meaning — and downstream consumers are entitled to assume it. One of them
+ * did: `Temporal.Instant` refuses a non-integer epoch ms outright, so a
+ * `cursorSequence` over a calendar grain threw on a plain scroll and unmounted
+ * the page. Core now floors the instant, which fixes that symptom; rounding
+ * here closes the class, because nothing downstream ever sees the fraction.
+ *
+ * **Never collapses a positive span.** `[10.4, 10.6]` would otherwise round to
+ * `[10, 10]` — a zero-width view, which is a division by zero in every scale
+ * built from it. A span that survives rounding keeps its rounded width; one
+ * that doesn't is opened to the 1 ms floor. A range that arrives degenerate
+ * (`hi <= lo`) is passed through rounded, since widening it would invent a view
+ * the caller didn't ask for.
+ */
+function roundRange(lo, hi) {
+    const a = Math.round(lo);
+    const b = Math.round(hi);
+    // `Math.round` is monotonic, so `b < a` is impossible for `hi >= lo`; the only
+    // way a positive span collapses is both ends landing on the same integer.
+    return b === a && hi > lo ? [a, a + 1] : [a, b];
+}
 /**
  * Shift a range by `dt` ms (drag-pan). The caller signs `dt` from the gesture —
- * dragging the plot right reveals earlier data, i.e. a negative `dt`.
+ * dragging the plot right reveals earlier data, i.e. a negative `dt`. The result
+ * is snapped to whole milliseconds ({@link roundRange}) — `dt` comes from a pixel
+ * delta through `xScale.invert()`, so it is fractional by construction.
  */
 export function panRange(range, dt) {
-    return [range[0] + dt, range[1] + dt];
+    return roundRange(range[0] + dt, range[1] + dt);
 }
 /**
  * Zoom `range` around `pivot` (ms) by `factor` — `< 1` zooms in, `> 1` out, with
  * the pivot held fixed (the time under the cursor stays put). Clamped so the
  * duration never drops below `minDuration` (the zoom-in floor); at the floor the
  * pivot keeps its fractional position in the window.
+ *
+ * The result is snapped to whole milliseconds ({@link roundRange}). `minDuration`
+ * is applied **before** the snap, so the floor is honoured in the units the
+ * caller expressed it in; a `minDuration` below 1 ms cannot be represented and
+ * lands on the 1 ms floor the snap guarantees, which is the finest view this
+ * model has.
  */
 export function zoomRange(range, pivot, factor, minDuration = 1) {
     const lo = pivot - (pivot - range[0]) * factor;
     const hi = pivot + (range[1] - pivot) * factor;
     if (hi - lo >= minDuration)
-        return [lo, hi];
+        return roundRange(lo, hi);
     // Floor reached: hold the pivot's fractional position, set span = minDuration.
     const span = range[1] - range[0];
     const frac = span > 0 ? (pivot - range[0]) / span : 0.5;
-    return [pivot - minDuration * frac, pivot + minDuration * (1 - frac)];
+    return roundRange(pivot - minDuration * frac, pivot + minDuration * (1 - frac));
 }
 /**
  * Pan a range on a **trading-time** axis: shift both endpoints by the same

package/dist/yticks.d.ts

@@ -17,4 +17,48 @@
  * nice 1-2-5 values near it, so a larger count on a tall row is exactly right.
  */
 export declare function resolveYTickCount(height: number, explicit?: number | undefined): number;
+/** The slice of a scale {@link yTickValues} reads. */
+interface TickableScale {
+    ticks(count?: number): number[];
+    domain(): number[];
+    /** Present on d3's `scaleLog` and on no other continuous scale. */
+    base?: () => number;
+}
+/**
+ * The y tick **values** a `<YAxis>`'s labels and the row's gridlines draw —
+ * the one list, so a label and its gridline stay on the same instants.
+ *
+ * On a linear scale this is just `scale.ticks(count)`, whose 1-2-5 selection
+ * treats the count as a target. **On a log scale it cannot be**, because d3's
+ * `scaleLog.ticks(count)` is not a target at all — it is nearly a step
+ * function, and the jump is catastrophic. Measured against a real seven-decade
+ * domain (ESnet's traffic history, 1.9e10 → 2.6e17 bytes):
+ *
+ * | `count` | ticks returned |
+ * | ------- | -------------- |
+ * | 4       | 3 (every *other* decade — 1e12, 1e14, 1e16) |
+ * | 6       | 7 (every decade — the one right answer)     |
+ * | 8       | **64** (every 2,3,…9 × decade)              |
+ *
+ * Since the count is height-derived (`height / 48`), that means a 260px row
+ * silently labels 3 of 7 decades and a 400px row draws 64 gridlines and 64
+ * labels — a 40px resize flipping between them. Neither is a rendering nicety;
+ * both are unreadable.
+ *
+ * So for a log scale we pick the decades ourselves: every `k`th power of ten,
+ * with `k` the smallest step whose tick count fits the budget. That is what a
+ * log plot is conventionally gridded on, it degrades predictably as the row
+ * shrinks, and it never explodes.
+ *
+ * Below two decades of span there aren't enough powers of ten to grid with, and
+ * d3's within-decade selection (2,3,…9 × 10ⁿ) is the right answer and is well
+ * behaved — so that case defers to the scale.
+ *
+ * Log detection is structural: `base()` exists on `scaleLog` and on no other
+ * continuous scale. The alternative is threading the axis kind down to the
+ * gridline site, which has no `AxisSpec` in scope — the same localized-shape
+ * approach `resolveBarBaseline` takes to read `.domain()`.
+ */
+export declare function yTickValues(scale: TickableScale, count: number): number[];
+export {};
 //# sourceMappingURL=yticks.d.ts.map

package/dist/yticks.js

@@ -25,4 +25,59 @@ export function resolveYTickCount(height, explicit) {
         return Math.max(1, Math.floor(explicit));
     return Math.max(2, Math.floor(height / Y_TICK_PX));
 }
+/**
+ * The y tick **values** a `<YAxis>`'s labels and the row's gridlines draw —
+ * the one list, so a label and its gridline stay on the same instants.
+ *
+ * On a linear scale this is just `scale.ticks(count)`, whose 1-2-5 selection
+ * treats the count as a target. **On a log scale it cannot be**, because d3's
+ * `scaleLog.ticks(count)` is not a target at all — it is nearly a step
+ * function, and the jump is catastrophic. Measured against a real seven-decade
+ * domain (ESnet's traffic history, 1.9e10 → 2.6e17 bytes):
+ *
+ * | `count` | ticks returned |
+ * | ------- | -------------- |
+ * | 4       | 3 (every *other* decade — 1e12, 1e14, 1e16) |
+ * | 6       | 7 (every decade — the one right answer)     |
+ * | 8       | **64** (every 2,3,…9 × decade)              |
+ *
+ * Since the count is height-derived (`height / 48`), that means a 260px row
+ * silently labels 3 of 7 decades and a 400px row draws 64 gridlines and 64
+ * labels — a 40px resize flipping between them. Neither is a rendering nicety;
+ * both are unreadable.
+ *
+ * So for a log scale we pick the decades ourselves: every `k`th power of ten,
+ * with `k` the smallest step whose tick count fits the budget. That is what a
+ * log plot is conventionally gridded on, it degrades predictably as the row
+ * shrinks, and it never explodes.
+ *
+ * Below two decades of span there aren't enough powers of ten to grid with, and
+ * d3's within-decade selection (2,3,…9 × 10ⁿ) is the right answer and is well
+ * behaved — so that case defers to the scale.
+ *
+ * Log detection is structural: `base()` exists on `scaleLog` and on no other
+ * continuous scale. The alternative is threading the axis kind down to the
+ * gridline site, which has no `AxisSpec` in scope — the same localized-shape
+ * approach `resolveBarBaseline` takes to read `.domain()`.
+ */
+export function yTickValues(scale, count) {
+    if (typeof scale.base !== 'function')
+        return scale.ticks(count);
+    const domain = scale.domain();
+    const lo = Math.min(domain[0], domain[domain.length - 1]);
+    const hi = Math.max(domain[0], domain[domain.length - 1]);
+    if (!(lo > 0) || !(hi > lo))
+        return scale.ticks(count);
+    const first = Math.ceil(Math.log10(lo));
+    const last = Math.floor(Math.log10(hi));
+    const decades = last - first + 1;
+    if (decades < 2)
+        return scale.ticks(count);
+    const budget = Math.max(2, count);
+    const step = Math.max(1, Math.ceil(decades / budget));
+    const out = [];
+    for (let e = first; e <= last; e += step)
+        out.push(10 ** e);
+    return out;
+}
 //# sourceMappingURL=yticks.js.map

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@pond-ts/charts",
-  "version": "0.55.0",
+  "version": "0.57.0",
   "private": false,
   "description": "Canvas-rendered, streaming-first time-series charts for pond-ts",
   "license": "MIT",
@@ -38,8 +38,8 @@
     "perf": "PERF_BENCH=1 playwright test perf.spec.ts --workers=1"
   },
   "peerDependencies": {
-    "@pond-ts/react": "^0.55.0",
-    "pond-ts": "^0.55.0",
+    "@pond-ts/react": "^0.57.0",
+    "pond-ts": "^0.57.0",
     "react": "^18.0.0 || ^19.0.0"
   },
   "devDependencies": {