@pond-ts/charts 0.42.0 → 0.44.0

package/dist/tracker.js

@@ -4,6 +4,72 @@
  * themselves render as an SVG overlay in `Layers` (no cursor canvas); these
  * helpers stay pure, so they're unit-tested directly.
  */
+/**
+ * The interval in the sorted, non-overlapping `buckets` that contains `t`
+ * (`begin ≤ t < end`), or `undefined` if `t` falls in no bucket. Binary search —
+ * the `region` cursor uses it to find the bucket under the pointer.
+ */
+export function bucketAt(buckets, t) {
+    let lo = 0;
+    let hi = buckets.length - 1;
+    while (lo <= hi) {
+        const mid = (lo + hi) >> 1;
+        const b = buckets[mid];
+        if (t < b.begin())
+            hi = mid - 1;
+        else if (t >= b.end())
+            lo = mid + 1;
+        else
+            return b;
+    }
+    return undefined;
+}
+/**
+ * The `[start, end)` **span** a region cursor covers, in axis units (not pixels —
+ * the drag-release callback reports this):
+ *
+ * - **Snapping** (`buckets` non-empty, `t1` in a bucket): the bucket at `t1`, or —
+ *   with a drag anchor `t2` — the union of the `t1` and `t2` buckets, so a drag
+ *   extends **bucket by bucket** either direction. A `t2` in no bucket is ignored.
+ * - **Freeform** (`t1` in no bucket — e.g. no `cursorSequence` at all): a drag
+ *   spans the raw `[t1, t2]`; without a drag (`t2` omitted) there's nothing to
+ *   shade (the cursor renders as a plain line), so it returns `null`.
+ */
+export function regionSpan(buckets, t1, t2) {
+    const a = bucketAt(buckets, t1);
+    if (a === undefined) {
+        // Freeform: no bucket under t1. A drag spans the raw [t1, t2]; a bare hover
+        // has nothing to shade (Layers draws a line for the degenerate region cursor).
+        return t2 === undefined
+            ? null
+            : { start: Math.min(t1, t2), end: Math.max(t1, t2) };
+    }
+    if (t2 === undefined)
+        return { start: a.begin(), end: a.end() };
+    const b = bucketAt(buckets, t2);
+    if (b === undefined)
+        return { start: a.begin(), end: a.end() };
+    return {
+        start: Math.min(a.begin(), b.begin()),
+        end: Math.max(a.end(), b.end()),
+    };
+}
+/**
+ * The pixel band for the `region` cursor: the {@link regionSpan} for `t1` (and an
+ * optional drag anchor `t2`), its `[start, end)` mapped through `xScale` and
+ * clamped to `[0, plotWidth]`. Returns `null` when there's no span, or when the
+ * band has no width — including a span entirely in a **collapsed gap** on a
+ * trading-time scale (both edges map to the same pixel), so it draws nothing
+ * there rather than a zero-width sliver.
+ */
+export function bandRect(buckets, t1, xScale, plotWidth, t2) {
+    const span = regionSpan(buckets, t1, t2);
+    if (span === null)
+        return null;
+    const x0 = Math.max(0, xScale(span.start));
+    const x1 = Math.min(plotWidth, xScale(span.end));
+    return x1 > x0 ? { x0, x1 } : null;
+}
 /** Default cursor mode — the synced vertical line (cursor enabled on the
  *  container by default; pair with an off-chart readout via `onTrackerChanged`). */
 export const DEFAULT_CURSOR_MODE = 'line';
@@ -15,22 +81,27 @@ export const DEFAULT_CURSOR_MODE = 'line';
  * value flag stacked near the top of the row (drawn in `Layers`).
  */
 export function cursorParts(mode) {
+    const base = { line: false, dots: false, chip: 'none', band: false };
     switch (mode) {
         case 'line':
-            return { line: true, dots: false, chip: 'none' };
+            return { ...base, line: true };
         case 'point':
-            return { line: false, dots: true, chip: 'none' };
+            return { ...base, dots: true };
         case 'inline':
-            return { line: false, dots: true, chip: 'inline' };
+            return { ...base, dots: true, chip: 'inline' };
         case 'flag':
-            return { line: false, dots: true, chip: 'flag' };
+            return { ...base, dots: true, chip: 'flag' };
         case 'crosshair':
             // A single reticle (not per-series): `Layers` draws the dashed vertical +
             // full-width horizontal lines, the centre dot, and one value pill itself
             // (so no generic line/dots here); the x-time pill is on `<XAxis>`.
-            return { line: false, dots: false, chip: 'axis' };
+            return { ...base, chip: 'axis' };
+        case 'region':
+            // A shaded band over the bucket under the pointer — `Layers` resolves the
+            // bucket from `cursorBuckets` and draws the rect (cropped through xScale).
+            return { ...base, band: true };
         case 'none':
-            return { line: false, dots: false, chip: 'none' };
+            return { ...base };
     }
 }
 /**

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@pond-ts/charts",
-  "version": "0.42.0",
+  "version": "0.44.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.42.0",
-    "pond-ts": "^0.42.0",
+    "@pond-ts/react": "^0.44.0",
+    "pond-ts": "^0.44.0",
     "react": "^18.0.0 || ^19.0.0"
   },
   "devDependencies": {