@fundar/data-chart-telling 0.0.37 → 0.0.39

package/dist/plots/line/ValueLabels.svelte

@@ -104,25 +104,46 @@
   /**
    * Pixel-space collision fix-up for end-point labels: resolves each
    * label's pixel Y through the live y-scale, then declutters those pixels
-   * to find how far each needs to move to clear its neighbours (`extraDy`).
-   * `rank`/`lanesUsed`/`runSize` come from `laneAssignment`, which turns the
-   * decluttered runs into lane assignments.
+   * to find how far each needs to move to clear its neighbours and stay
+   * within the plot's own top/bottom edge (`extraDy` — applies even to a
+   * lone label with no neighbours, if its own value sits close enough to
+   * the edge). `rank`/`lanesUsed`/`runSize` come from `laneAssignment`,
+   * which turns the decluttered runs into lane assignments.
    *
-   * Every label reaches out to the same shared lane column (`reach`/
-   * `laneReach`), not just the ones in its own cluster, so the whole set of
-   * end-of-line labels lines up on one horizontal line. A label that didn't
-   * need to move for collision avoidance still gets a connector to cover
-   * the resulting gap — see the `aligned` gate in the markup below.
+   * Horizontal placement (`aligned`/`reach`/`laneReach`/`dir`) is separate:
+   * every label reaches out to the same shared lane column, not just the
+   * ones in its own cluster, so the whole set of end-of-line labels lines
+   * up on one horizontal line. A label gets a connector whenever either of
+   * these moved it off its natural position — see the markup below.
+   *
+   * That shared column's direction can itself flip from `dir` to the right,
+   * but only ever away from the left: a leftward fan (`dir === -1`) runs
+   * into the Y axis's own tick labels once every point sits pinned against
+   * that same edge (e.g. a scroll/scrub caller's first visible point), with
+   * nowhere to reserve room without growing a margin purely to sit on top of
+   * them. The right has no such fixed content by default, so flipping there
+   * instead — for every aligned label at once — avoids the collision
+   * without needing any extra margin at all. The mirror case is deliberately
+   * left alone: a rightward fan's point is *always* pinned at the scale's
+   * own right edge by construction (`available` below would read ~0 for it
+   * too, same as the left), so the same check would flip the common case
+   * right back into the plot over its own lines — margin growth (see
+   * `Plot.svelte`'s `labelMargin`) is what actually handles that side.
    */
   const declutteredOffsets = $derived.by(() => {
-    const map = new SvelteMap<string, { extraDy: number; aligned: boolean; rank: number; reach: number; laneReach: number }>();
+    const map = new SvelteMap<
+      string,
+      { extraDy: number; aligned: boolean; rank: number; reach: number; laneReach: number; dir: number }
+    >();
     if (lastPoints.length < 2) return map;
     const yScale = plot.scales.y?.fn;
     if (!yScale) return map;
+    const xScale = plot.scales.x?.fn;
     const minGap = Math.max(16, fontSize * 1.4);
     const items = lastPoints.map(({ series: s, lastRow }) => ({
       name: s.name,
       pos: Number(yScale(Number(resolveAccessor(s.y)(lastRow)))),
+      px: xScale ? Number(xScale(resolveAccessor(s.x)(lastRow))) : undefined,
     }));
     const sorted = [...items].sort((a, b) => a.pos - b.pos);
     // Same content-box source as `watchLabelOverflow`'s `bounds()` above.
@@ -137,6 +158,24 @@
     const globalLanes = anyGrouped ? Math.max(...ranks.map((r) => r.lanesUsed)) : 1;
     const reach = elbowGap + (globalLanes - 1) * laneStep + labelGap;
 
+    let effectiveDir = dir;
+    if (anyGrouped && dir === -1) {
+      // -Infinity (not +Infinity) when the x-scale isn't resolved yet on an
+      // early render — defaults to flipped until proven safe not to be,
+      // rather than the other way around. Defaulting to "don't flip" here
+      // briefly rendered the full leftward fan with no available-space data
+      // at all, which `watchLabelOverflow` could catch and lock in via its
+      // own monotonic growth before a later render corrected it — flipping
+      // right is never wrong even when it turns out to be unnecessary (nothing
+      // fixed lives there to run into), so there's no equivalent risk on
+      // that side to defend against.
+      const roomsLeft = sorted
+        .filter((item): item is typeof item & { px: number } => item.px != null)
+        .map((item) => item.px - numericMargins.left);
+      const availableLeft = roomsLeft.length > 0 ? Math.min(...roomsLeft) : -Infinity;
+      if (availableLeft < reach) effectiveDir = 1;
+    }
+
     sorted.forEach((item, i) => {
       map.set(item.name, {
         extraDy: finals[i] - originals[i],
@@ -144,6 +183,7 @@
         rank: ranks[i].rank,
         reach,
         laneReach: elbowGap + ranks[i].rank * laneStep,
+        dir: effectiveDir,
       });
     });
     return map;
@@ -151,22 +191,38 @@
 </script>
 
 <g bind:this={groupEl}>
+<!-- Nothing renders before both scales resolve: `declutteredOffsets` itself
+     only needs the y-scale, so an early render with the x-scale still
+     missing would otherwise fall back to plain `baseDx`, un-flipped — for a
+     long 'end'-anchored label that's a real, if brief, overflow past the
+     edge, and `watchLabelOverflow` can catch and lock that in via its own
+     monotonic growth before a later, correctly-positioned render arrives. -->
+{#if plot.scales.x?.fn && plot.scales.y?.fn}
 {#each lastPoints as { series: s, lastRow, color: seriesColor } (s.name)}
   {@const xFn = resolveAccessor(s.x)}
   {@const yFn = resolveAccessor(s.y)}
   {@const offset = declutteredOffsets.get(s.name)}
-  {@const extraDy = offset?.aligned ? offset.extraDy : 0}
-  {@const labelDx = offset?.aligned ? dir * offset.reach : baseDx}
+  {@const extraDy = offset?.extraDy ?? 0}
+  {@const effDir = offset?.aligned ? offset.dir : dir}
+  {@const flipped = offset?.aligned && effDir !== dir}
+  {@const labelDx = offset?.aligned ? effDir * offset.reach : baseDx}
   {@const text = formatValue(Number(yFn(lastRow)), s.name)}
   {@const preferredTA = resolvedTextAnchor ?? defaultTA}
+  {@const finalTA = flipped
+    ? preferredTA === 'start'
+      ? 'end'
+      : preferredTA === 'end'
+        ? 'start'
+        : preferredTA
+    : preferredTA}
   {@const preferredLA = font?.lineAnchor ?? defaultLA}
   {@const disabled = disabledFor?.(s.name)}
   {@const disabledStroke = disabledStrokeOverride(disabled)}
   {@const disabledFill = disabledFillOverride(disabled)}
-  {#if offset?.aligned && plot.scales.x?.fn && plot.scales.y?.fn}
+  {#if offset?.aligned || extraDy !== 0}
     {@const px = Number(plot.scales.x.fn(xFn(lastRow)))}
     {@const py = Number(plot.scales.y.fn(Number(yFn(lastRow))))}
-    {@const laneX = px + dir * offset.laneReach}
+    {@const laneX = offset?.aligned ? px + effDir * offset.laneReach : px + labelDx}
     {@const targetY = py + extraDy}
     <path
       d={`M ${px} ${py} H ${laneX} V ${targetY} H ${px + labelDx}`}
@@ -192,7 +248,7 @@
       text={() => text}
       dx={labelDx}
       dy={(font?.dy ?? defaultDy) + extraDy}
-      textAnchor={preferredTA}
+      textAnchor={finalTA}
       lineAnchor={preferredLA}
       lineHeight={font?.lineHeight}
       rotate={font?.rotate}
@@ -209,4 +265,5 @@
     />
   </g>
 {/each}
+{/if}
 </g>

package/dist/plots/utils/declutter.js

@@ -103,10 +103,10 @@ function runBiasWeights(down, up, connected, [lo, hi]) {
  * it lands entirely inside `[lo, hi]`. A run's own relative spacing is
  * preserved as-is (just translated) whenever it already fits in `hi - lo`;
  * only a run wider than the available space gets uniformly scaled down
- * around its centre first. Lone, unconnected positions pass through
- * untouched — they were never pushed by `declutter1D` in the first place,
- * so clamping one to the bounds would move a label away from the data point
- * it's honestly reporting, for no collision-avoidance reason at all.
+ * around its centre first. A lone, unconnected position is simply clamped
+ * to the nearer bound instead — its own value never needed decluttering,
+ * but it can still sit close enough to the scale's own edge to overflow on
+ * its own.
  */
 function fitRunsWithinBounds(positions, connected, [lo, hi]) {
     const out = [...positions];
@@ -130,6 +130,9 @@ function fitRunsWithinBounds(positions, connected, [lo, hi]) {
                 }
             }
         }
+        else {
+            out[i] = Math.min(Math.max(out[i], lo), hi);
+        }
         i = j + 1;
     }
     return out;

package/dist/plots/utils/labelOverflow.svelte.js

@@ -1,3 +1,4 @@
+import { AUTO_MARGIN_ESTIMATE } from '../../layout/plot/margins';
 const NO_OVERFLOW = { left: 0, right: 0, top: 0, bottom: 0 };
 /**
  * Watches an SVG group's rendered bounding box against the plot's own
@@ -36,12 +37,21 @@ export function watchLabelOverflow(args) {
             catch {
                 return;
             }
-            const overflow = {
-                left: Math.ceil(Math.max(0, bounds.left - box.x)),
-                right: Math.ceil(Math.max(0, box.x + box.width - bounds.right)),
-                top: Math.ceil(Math.max(0, bounds.top - box.y)),
-                bottom: Math.ceil(Math.max(0, box.y + box.height - bounds.bottom)),
-            };
+            // An empty group (no labels currently rendered, e.g. every series is
+            // scrubbed/filtered out of view) reports getBBox() as (0,0,0,0) — the
+            // SVG origin, not "no content". Reading that literally as a box sitting
+            // at (0,0) would report overflow proportional to the *current* margins
+            // themselves, which grows them, which remounts this group against the
+            // new, larger bounds, which reports overflow again — an unbounded loop
+            // with nothing rendered to justify it.
+            const overflow = box.width === 0 && box.height === 0
+                ? NO_OVERFLOW
+                : {
+                    left: Math.ceil(Math.max(0, bounds.left - box.x)),
+                    right: Math.ceil(Math.max(0, box.x + box.width - bounds.right)),
+                    top: Math.ceil(Math.max(0, bounds.top - box.y)),
+                    bottom: Math.ceil(Math.max(0, box.y + box.height - bounds.bottom))
+                };
             attempt += 1;
             const stable = lastReading != null &&
                 lastReading.left === overflow.left &&
@@ -85,7 +95,7 @@ export function createLabelMarginTracker(margins) {
             left: Math.max(measured.left, overflow.left),
             right: Math.max(measured.right, overflow.right),
             top: Math.max(measured.top, overflow.top),
-            bottom: Math.max(measured.bottom, overflow.bottom),
+            bottom: Math.max(measured.bottom, overflow.bottom)
         };
         if (next.left !== measured.left ||
             next.right !== measured.right ||
@@ -94,19 +104,27 @@ export function createLabelMarginTracker(margins) {
             measured = next;
         }
     }
+    // `measured` is overflow *past* the current margin, not the total margin
+    // needed — grown on top of `AUTO_MARGIN_ESTIMATE` (the same fallback
+    // svelteplot's own 'auto' sizing is estimated by elsewhere), not the raw
+    // overflow alone, or growth would silently replace whatever room 'auto'
+    // would have reserved for the axis itself (tick labels, title) with a
+    // number that only accounts for the value label. `AUTO_MARGIN_ESTIMATE` is
+    // a fixed constant, not `numericMargins`' own already-grown value, so this
+    // can't compound into unbounded growth across repeated reports.
     const resolvedMargins = $derived.by(() => {
         const base = margins();
         if (measured.left <= 0 && measured.right <= 0 && measured.top <= 0 && measured.bottom <= 0)
             return base;
         const out = { ...base };
         if (measured.right > 0 && base?.right === undefined)
-            out.right = measured.right;
+            out.right = AUTO_MARGIN_ESTIMATE.right + measured.right;
         if (measured.left > 0 && base?.left === undefined)
-            out.left = measured.left;
+            out.left = AUTO_MARGIN_ESTIMATE.left + measured.left;
         if (measured.top > 0 && base?.top === undefined)
-            out.top = measured.top;
+            out.top = AUTO_MARGIN_ESTIMATE.top + measured.top;
         if (measured.bottom > 0 && base?.bottom === undefined)
-            out.bottom = measured.bottom;
+            out.bottom = AUTO_MARGIN_ESTIMATE.bottom + measured.bottom;
         return out;
     });
     // Bundles `resolvedMargins` with a remount key derived from `measured`,
@@ -117,11 +135,15 @@ export function createLabelMarginTracker(margins) {
     // must track.
     const plotProps = $derived.by(() => ({
         margins: resolvedMargins,
-        marginRemountKey: JSON.stringify(measured),
+        marginRemountKey: JSON.stringify(measured)
     }));
     return {
         report,
-        get resolvedMargins() { return resolvedMargins; },
-        get plotProps() { return plotProps; },
+        get resolvedMargins() {
+            return resolvedMargins;
+        },
+        get plotProps() {
+            return plotProps;
+        }
     };
 }

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@fundar/data-chart-telling",
-  "version": "0.0.37",
+  "version": "0.0.39",
   "type": "module",
   "files": [
     "dist"