@fundar/data-chart-telling 0.0.46 → 0.0.47

package/dist/plots/bar/Plot.svelte

@@ -11,7 +11,10 @@
 		buildScopedMarkerGroups
 	} from '../utils/segments';
 	import { createBarLayout } from './layout.svelte';
-	import { createLabelMarginTracker } from '../utils/labelOverflow.svelte';
+	import {
+		createLabelMarginTracker,
+		halfDimensionOverflowCap
+	} from '../utils/labelOverflow.svelte';
 	import { estimateValueLabelMargin } from '../utils/valueLabelMargin';
 	import { buildHoverPoints } from './hoverPoints';
 	import { buildBarMarkers } from './buildBarMarkers';
@@ -258,6 +261,9 @@
 		return { left: 0, right: 0, top: Math.ceil(offset + fontSize * 1.2), bottom: 0 };
 	});
 
+	// See `halfDimensionOverflowCap`'s own doc comment.
+	const maxLabelOverflow = $derived(halfDimensionOverflowCap(width, height));
+
 	// A bar's value label can grow past the plot's own content box (e.g. a
 	// tall bar's `anchor: 'outside'` label pushing past the top margin) —
 	// `valueLabelFloor` covers the common case up front; each label's own
@@ -266,7 +272,8 @@
 	const labelMargin = createLabelMarginTracker(
 		() => margins,
 		() => resolvedSeries,
-		() => valueLabelFloor ?? { left: 0, right: 0, top: 0, bottom: 0 }
+		() => valueLabelFloor ?? { left: 0, right: 0, top: 0, bottom: 0 },
+		() => maxLabelOverflow
 	);
 </script>
 

package/dist/plots/line/Plot.svelte

@@ -8,7 +8,10 @@
 	import { buildLineMarkers } from './buildLineMarkers';
 	import { buildGapMarkers } from './buildGapMarkers';
 	import { isGapValue } from '../utils/gaps';
-	import { createLabelMarginTracker } from '../utils/labelOverflow.svelte';
+	import {
+		createLabelMarginTracker,
+		halfDimensionOverflowCap
+	} from '../utils/labelOverflow.svelte';
 	import { estimateLineValueLabelMargin } from './valueLabelMargin';
 	import BasePlotLayout from '../../layout/plot/BasePlotLayout.svelte';
 	import ValueLabels from './ValueLabels.svelte';
@@ -185,17 +188,8 @@
 		});
 	});
 
-	// A facet cramped enough that its own end-of-line label can never fully
-	// fit would otherwise grow `measured` without bound (see
-	// `createLabelMarginTracker`'s own doc comment) — capped at half of each
-	// dimension, so the plot's own content box never shrinks past the other
-	// half no matter how little room a label has to work with.
-	const maxLabelOverflow = $derived({
-		left: Math.max(0, width * 0.5),
-		right: Math.max(0, width * 0.5),
-		top: Math.max(0, height * 0.5),
-		bottom: Math.max(0, height * 0.5)
-	});
+	// See `halfDimensionOverflowCap`'s own doc comment.
+	const maxLabelOverflow = $derived(halfDimensionOverflowCap(width, height));
 
 	// Grows the plot's margin to fit value labels that overflow the content
 	// box. `valueLabelFloor` covers the common rightward case up front; each

package/dist/plots/pyramid/Plot.svelte

@@ -6,7 +6,10 @@
 	import { getLegendInteraction } from '../../layout/legend/interaction.svelte';
 	import { disabledFillOverride } from '../utils/legendDisabled';
 	import { buildPyramidBarMarkers } from './buildPyramidBarMarkers';
-	import { createLabelMarginTracker } from '../utils/labelOverflow.svelte';
+	import {
+		createLabelMarginTracker,
+		halfDimensionOverflowCap
+	} from '../utils/labelOverflow.svelte';
 	import { estimateValueLabelMargin } from '../utils/valueLabelMargin';
 	import {
 		buildGroupedSeries,
@@ -301,6 +304,9 @@
 		return { left, right, top: 0, bottom: 0 };
 	});
 
+	// See `halfDimensionOverflowCap`'s own doc comment.
+	const maxLabelOverflow = $derived(halfDimensionOverflowCap(width, height));
+
 	// A pyramid bar's value label can grow past the plot's own content box —
 	// `valueLabelFloor` covers the common case up front; each label's own
 	// rendered overflow still feeds `labelMargin.report` for whatever that
@@ -308,7 +314,8 @@
 	const labelMargin = createLabelMarginTracker(
 		() => margins,
 		() => resolvedSeries,
-		() => valueLabelFloor ?? { left: 0, right: 0, top: 0, bottom: 0 }
+		() => valueLabelFloor ?? { left: 0, right: 0, top: 0, bottom: 0 },
+		() => maxLabelOverflow
 	);
 </script>
 

package/dist/plots/scatter/Plot.svelte

@@ -7,7 +7,10 @@
 	import { disabledDotsOverride } from '../utils/legendDisabled';
 	import { buildScatterMarkers } from './buildScatterMarkers';
 	import { resolveRadiusPaddedDomain } from './resolveRadiusPaddedDomain';
-	import { createLabelMarginTracker } from '../utils/labelOverflow.svelte';
+	import {
+		createLabelMarginTracker,
+		halfDimensionOverflowCap
+	} from '../utils/labelOverflow.svelte';
 	import BasePlotLayout from '../../layout/plot/BasePlotLayout.svelte';
 	import ValueLabels from './ValueLabels.svelte';
 	import {
@@ -214,6 +217,11 @@
 		};
 	});
 
+	// See `halfDimensionOverflowCap`'s own doc comment — relevant here mainly
+	// for a corner point with no room in any direction even after
+	// `resolveEdgeAwareAnchor`'s own flip.
+	const maxLabelOverflow = $derived(halfDimensionOverflowCap(width, height));
+
 	// A scatter point's value label can grow past the plot's own content box
 	// (e.g. a point volcado toward a corner, past what its own edge-aware flip
 	// can fit) — reserving real space there is what each label's own overflow
@@ -223,7 +231,9 @@
 	// that frame is gone.
 	const labelMargin = createLabelMarginTracker(
 		() => margins,
-		() => resolvedSeries
+		() => resolvedSeries,
+		undefined,
+		() => maxLabelOverflow
 	);
 </script>
 

package/dist/plots/utils/labelOverflow.svelte.d.ts

@@ -6,6 +6,16 @@ export type MarginOverflow = {
     top: number;
     bottom: number;
 };
+/**
+ * A generic `maxOverflow` cap for {@link createLabelMarginTracker}: half of
+ * each dimension, so a facet cramped enough that its own value label can
+ * never fully fit still leaves the plot's own content box the other half,
+ * rather than `measured` growing without bound (see that function's own
+ * `maxOverflow` doc comment). The same backstop applies regardless of *what*
+ * overflows or *why* — every value-label-drawing plot (line/bar/pyramid/
+ * scatter) passes this, sized off its own `width`/`height`.
+ */
+export declare function halfDimensionOverflowCap(width: number, height: number): MarginOverflow;
 /**
  * Watches an SVG group's rendered bounding box against the plot's own
  * content box (`bounds`) and reports how far it overflows on each side.

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

@@ -1,5 +1,22 @@
 import { AUTO_MARGIN_ESTIMATE } from '../../layout/plot/margins';
 const NO_OVERFLOW = { left: 0, right: 0, top: 0, bottom: 0 };
+/**
+ * A generic `maxOverflow` cap for {@link createLabelMarginTracker}: half of
+ * each dimension, so a facet cramped enough that its own value label can
+ * never fully fit still leaves the plot's own content box the other half,
+ * rather than `measured` growing without bound (see that function's own
+ * `maxOverflow` doc comment). The same backstop applies regardless of *what*
+ * overflows or *why* — every value-label-drawing plot (line/bar/pyramid/
+ * scatter) passes this, sized off its own `width`/`height`.
+ */
+export function halfDimensionOverflowCap(width, height) {
+    return {
+        left: Math.max(0, width * 0.5),
+        right: Math.max(0, width * 0.5),
+        top: Math.max(0, height * 0.5),
+        bottom: Math.max(0, height * 0.5)
+    };
+}
 /**
  * Watches an SVG group's rendered bounding box against the plot's own
  * content box (`bounds`) and reports how far it overflows on each side.
@@ -145,18 +162,23 @@ maxOverflow) {
             measured = floorValue();
         }
     });
+    // Pure `Math.max` — no `maxOverflow` cap here. `measured` is a *tracked*
+    // value, not the applied margin, and must stay strictly monotonic
+    // regardless of anything else changing (see this function's own doc
+    // comment on why shrinking it back oscillates). `maxOverflow` is
+    // typically sized off the plot's own live `width`/`height` (see
+    // `halfDimensionOverflowCap`), which moves continuously during a resize
+    // — capping *here* would let a shrinking cap force `measured` down mid-
+    // resize, immediately re-exposing the overflow that grew it in the first
+    // place and re-triggering growth, over and over, fast enough to trip
+    // Svelte's `effect_update_depth_exceeded` guard. The cap is applied only
+    // where it can't feed back into `measured` itself — see `resolvedMargins`.
     function report(overflow) {
-        const cap = maxOverflow?.() ?? {
-            left: Infinity,
-            right: Infinity,
-            top: Infinity,
-            bottom: Infinity
-        };
         const next = {
-            left: Math.min(cap.left, Math.max(measured.left, overflow.left)),
-            right: Math.min(cap.right, Math.max(measured.right, overflow.right)),
-            top: Math.min(cap.top, Math.max(measured.top, overflow.top)),
-            bottom: Math.min(cap.bottom, Math.max(measured.bottom, overflow.bottom))
+            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)
         };
         if (next.left !== measured.left ||
             next.right !== measured.right ||
@@ -173,33 +195,55 @@ maxOverflow) {
     // 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.
+    //
+    // `maxOverflow`, if given, clamps `measured` down to a live cap *here*,
+    // read-only — every render re-reads the current cap and applies it fresh
+    // to the unclamped, monotonically-tracked `measured`, without ever
+    // writing the clamped value back into `measured` itself (see `report`'s
+    // own doc comment for why that distinction matters).
     const resolvedMargins = $derived.by(() => {
         const base = margins();
-        if (measured.left <= 0 && measured.right <= 0 && measured.top <= 0 && measured.bottom <= 0)
+        const cap = maxOverflow?.() ?? {
+            left: Infinity,
+            right: Infinity,
+            top: Infinity,
+            bottom: Infinity
+        };
+        const clamped = {
+            left: Math.min(measured.left, cap.left),
+            right: Math.min(measured.right, cap.right),
+            top: Math.min(measured.top, cap.top),
+            bottom: Math.min(measured.bottom, cap.bottom)
+        };
+        if (clamped.left <= 0 && clamped.right <= 0 && clamped.top <= 0 && clamped.bottom <= 0)
             return base;
         const out = { ...base };
-        if (measured.right > 0 && base?.right === undefined)
-            out.right = AUTO_MARGIN_ESTIMATE.right + measured.right;
-        if (measured.left > 0 && base?.left === undefined)
-            out.left = AUTO_MARGIN_ESTIMATE.left + measured.left;
-        if (measured.top > 0 && base?.top === undefined)
-            out.top = AUTO_MARGIN_ESTIMATE.top + measured.top;
-        if (measured.bottom > 0 && base?.bottom === undefined)
-            out.bottom = AUTO_MARGIN_ESTIMATE.bottom + measured.bottom;
+        if (clamped.right > 0 && base?.right === undefined)
+            out.right = AUTO_MARGIN_ESTIMATE.right + clamped.right;
+        if (clamped.left > 0 && base?.left === undefined)
+            out.left = AUTO_MARGIN_ESTIMATE.left + clamped.left;
+        if (clamped.top > 0 && base?.top === undefined)
+            out.top = AUTO_MARGIN_ESTIMATE.top + clamped.top;
+        if (clamped.bottom > 0 && base?.bottom === undefined)
+            out.bottom = AUTO_MARGIN_ESTIMATE.bottom + clamped.bottom;
         return out;
     });
     // Bundles `resolvedMargins` with a remount key, ready to spread straight
     // onto `<BasePlotLayout>` as its `margins`/`marginRemountKey` props (see
     // that prop's doc comment for *why* a remount key is needed here at all)
-    // — keeps the caller from re-deriving the same key by hand. Tracks both
-    // `measured` (this tracker's own auto-grown overflow) and the caller's
-    // own `margins()` — a caller that changes its explicit margins prop
-    // after mount (e.g. locking in a previously-measured value) needs that
-    // picked up just as cleanly as internal growth does; keying only on
-    // `measured` would silently miss it.
+    // — keeps the caller from re-deriving the same key by hand. Keyed off
+    // `resolvedMargins` itself (the actually-applied value) rather than raw
+    // `measured` — with a `maxOverflow` cap in play, `measured` can keep
+    // climbing past the point where it's clamped without the applied margin
+    // changing at all, and remounting for that would be pure waste. Also
+    // tracks the caller's own `margins()` — a caller that changes its
+    // explicit margins prop after mount (e.g. locking in a previously-
+    // measured value) needs that picked up just as cleanly as internal
+    // growth does; `resolvedMargins` alone already reflects that too, but
+    // spelling it out keeps the key's intent obvious.
     const plotProps = $derived.by(() => ({
         margins: resolvedMargins,
-        marginRemountKey: JSON.stringify({ base: margins(), measured })
+        marginRemountKey: JSON.stringify({ base: margins(), resolvedMargins })
     }));
     return {
         report,

package/package.json

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