@fundar/data-chart-telling 0.0.31 → 0.0.33

package/dist/plots/bar/Plot.svelte

@@ -225,7 +225,7 @@
   getY={plotGetY}
   {hover}
   scales={resolvedScales}
-  margins={labelMargin.resolvedMargins}
+  {...labelMargin.plotProps}
   xTickRotate={resolvedScales?.x?.tickRotate}
   markers={({ setHoverMatch, clearHoverMatch }) => [
     ...buildBarMarkers({
@@ -245,22 +245,27 @@
   seriesData={resolvedSeries}
   {scopedGroups}
 >
-  {#if showVals}
-    {#each groupedSeries as group, seriesIndex (group.series.name)}
-      <ValueLabels
-        {group}
-        {seriesIndex}
-        {barLayout}
-        {isHorizontal}
-        {valAnchor}
-        {formatValue}
-        values={styles.values}
-        axisColor={cfg.axis.color}
-        disabled={effectiveDisabledFor(group.series.name)}
-        onHoverSeries={hoverIsolate ? () => { hoverIsolatedSeries = group.series.name; } : undefined}
-        onHoverEnd={hoverIsolate ? () => { hoverIsolatedSeries = null; } : undefined}
-        onOverflow={labelMargin.report}
-      />
-    {/each}
-  {/if}
+  {#snippet children({ numericMargins })}
+    {#if showVals}
+      {#each groupedSeries as group, seriesIndex (group.series.name)}
+        <ValueLabels
+          {group}
+          {seriesIndex}
+          {barLayout}
+          {isHorizontal}
+          {valAnchor}
+          {formatValue}
+          values={styles.values}
+          axisColor={cfg.axis.color}
+          disabled={effectiveDisabledFor(group.series.name)}
+          {width}
+          {height}
+          {numericMargins}
+          onHoverSeries={hoverIsolate ? () => { hoverIsolatedSeries = group.series.name; } : undefined}
+          onHoverEnd={hoverIsolate ? () => { hoverIsolatedSeries = null; } : undefined}
+          onOverflow={labelMargin.report}
+        />
+      {/each}
+    {/if}
+  {/snippet}
 </BasePlotLayout>

package/dist/plots/bar/ValueLabels.svelte

@@ -1,5 +1,5 @@
 <script lang="ts" generics="TData extends Record<string, unknown>">
-  import { Text, usePlot } from 'svelteplot';
+  import { Text } from 'svelteplot';
   import { resolveAccessor } from '../utils/accessors';
   import { disabledFillOverride } from '../utils/legendDisabled';
   import { watchLabelOverflow } from '../utils/labelOverflow.svelte';
@@ -30,6 +30,9 @@
     values,
     axisColor,
     disabled,
+    width,
+    height,
+    numericMargins,
     onHoverSeries,
     onHoverEnd,
     onOverflow,
@@ -44,6 +47,11 @@
     axisColor: string;
     /** Resolved legend/hover-isolate dimming style for this group's series, if any. */
     disabled?: LegendDisabledStyle;
+    /** The plot's own pixel size — together with `numericMargins`, the ground truth for its content box (see `bounds()` below). */
+    width: number;
+    height: number;
+    /** `BasePlotLayout`'s resolved margins, already numeric on every side. */
+    numericMargins: { top: number; right: number; bottom: number; left: number };
     /** Fired when the pointer enters this series' label — only wired when hover-isolate is enabled. */
     onHoverSeries?: () => void;
     onHoverEnd?: () => void;
@@ -52,25 +60,26 @@
   } = $props();
 
   const fillOverride = $derived(disabledFillOverride(disabled));
-  const plot = usePlot();
   let groupEl: SVGGElement | undefined = $state();
 
   watchLabelOverflow({
     el: () => groupEl,
+    // Built from our own `width`/`height`/`numericMargins` rather than
+    // `usePlot().scales.x/y.fn.range()` — see line/ValueLabels.svelte's
+    // matching comment for why that scale's exposed range can't be trusted
+    // once a caller fixes `width`/`height` explicitly (every plot kind here
+    // does).
     bounds: () => {
       // getBBox() inside isn't itself tracked — depend on whatever actually
       // changes the rendered label layout so this re-measures.
       void group;
       void values;
       void valAnchor;
-      const xRange = plot.scales.x?.fn?.range?.()?.map(Number);
-      const yRange = plot.scales.y?.fn?.range?.()?.map(Number);
-      if (!xRange || !yRange) return undefined;
       return {
-        left: Math.min(xRange[0], xRange[1]),
-        right: Math.max(xRange[0], xRange[1]),
-        top: Math.min(yRange[0], yRange[1]),
-        bottom: Math.max(yRange[0], yRange[1]),
+        left: numericMargins.left,
+        right: width - numericMargins.right,
+        top: numericMargins.top,
+        bottom: height - numericMargins.bottom,
       };
     },
     onOverflow: (overflow) => onOverflow?.(overflow),

package/dist/plots/bar/ValueLabels.svelte.d.ts

@@ -18,6 +18,16 @@ declare function $$render<TData extends Record<string, unknown>>(): {
         axisColor: string;
         /** Resolved legend/hover-isolate dimming style for this group's series, if any. */
         disabled?: LegendDisabledStyle;
+        /** The plot's own pixel size — together with `numericMargins`, the ground truth for its content box (see `bounds()` below). */
+        width: number;
+        height: number;
+        /** `BasePlotLayout`'s resolved margins, already numeric on every side. */
+        numericMargins: {
+            top: number;
+            right: number;
+            bottom: number;
+            left: number;
+        };
         /** Fired when the pointer enters this series' label — only wired when hover-isolate is enabled. */
         onHoverSeries?: () => void;
         onHoverEnd?: () => void;

package/dist/plots/line/Plot.svelte

@@ -107,18 +107,6 @@
     }),
   );
 
-  // Last *real* data point per series (skipping any trailing gap row), with
-  // its palette index for colour.
-  const lastPoints = $derived(
-    resolvedSeries
-      .map((s, idx) => {
-        const sy = resolveAccessor(s.y);
-        const lastRow = [...s.data].reverse().find((d) => !isGapValue(sy(d)));
-        return { series: s, lastRow, seriesIndex: idx };
-      })
-      .filter((p): p is { series: Series<TData>; lastRow: TData; seriesIndex: number } => p.lastRow !== undefined),
-  );
-
   const hover = $derived({
     active: tooltip != null || hasHoverMarker(markers),
     points: hoverPoints,
@@ -153,6 +141,21 @@
     }),
   );
 
+  const lastPoints = $derived(
+    resolvedSeries
+      .map((s, idx) => {
+        const sy = resolveAccessor(s.y);
+        const lastRow = [...s.data].reverse().find((d) => !isGapValue(sy(d)));
+        if (lastRow === undefined) return undefined;
+        const group = scopedGroups.find((g) => g.name === s.name);
+        const matchedSeg = group?.segments.find((seg) => seg.match(lastRow));
+        const color =
+          matchedSeg?.color ?? group?.segments[0]?.color ?? group?.color ?? paletteColor(idx, cfg.palette);
+        return { series: s, lastRow, color };
+      })
+      .filter((p): p is { series: Series<TData>; lastRow: TData; color: string } => p !== undefined),
+  );
+
   // End-of-line labels can grow past the plot's own content box, into its
   // margin — reserving real space there (rather than padding the domain,
   // which would falsely imply data exists past the last real point) is
@@ -178,14 +181,19 @@
   seriesData={resolvedSeries}
   {scopedGroups}
 >
-  {#if showVals}
-    <ValueLabels
-      {lastPoints}
-      values={styles.values}
-      onOverflow={labelMargin.report}
-      disabledFor={effectiveDisabledFor}
-      onHoverSeries={hoverIsolate ? (name) => { hoverIsolatedSeries = name; } : undefined}
-      onHoverEnd={hoverIsolate ? () => { hoverIsolatedSeries = null; } : undefined}
-    />
-  {/if}
+  {#snippet children({ numericMargins })}
+    {#if showVals}
+      <ValueLabels
+        {lastPoints}
+        values={styles.values}
+        {width}
+        {height}
+        {numericMargins}
+        onOverflow={labelMargin.report}
+        disabledFor={effectiveDisabledFor}
+        onHoverSeries={hoverIsolate ? (name) => { hoverIsolatedSeries = name; } : undefined}
+        onHoverEnd={hoverIsolate ? () => { hoverIsolatedSeries = null; } : undefined}
+      />
+    {/if}
+  {/snippet}
 </BasePlotLayout>

package/dist/plots/line/ValueLabels.svelte

@@ -1,10 +1,8 @@
 <script lang="ts" generics="TData extends Record<string, unknown>">
-  import { untrack } from 'svelte';
   import { SvelteMap } from 'svelte/reactivity';
   import { Text, usePlot } from 'svelteplot';
   import { resolveAccessor } from '../utils/accessors';
   import { getConfiguration } from '../../configuration/config.svelte';
-  import { paletteColor } from '../../utils/color';
   import { declutter1D, laneAssignment } from '../utils/declutter';
   import { disabledFillOverride, disabledStrokeOverride } from '../utils/legendDisabled';
   import { watchLabelOverflow } from '../utils/labelOverflow.svelte';
@@ -25,13 +23,21 @@
   let {
     lastPoints,
     values,
+    width,
+    height,
+    numericMargins,
     onOverflow,
     disabledFor,
     onHoverSeries,
     onHoverEnd,
   }: {
-    lastPoints: { series: Series<TData>; lastRow: TData; seriesIndex: number }[];
+    lastPoints: { series: Series<TData>; lastRow: TData; color: string }[];
     values: ValuesStyle | undefined;
+    /** The plot's own pixel size — together with `numericMargins`, the ground truth for its content box (see `bounds()` below for why `usePlot()`'s own scale range can't be trusted for this). */
+    width: number;
+    height: number;
+    /** `BasePlotLayout`'s resolved margins, already numeric on every side. */
+    numericMargins: { top: number; right: number; bottom: number; left: number };
     /** Reports how far the rendered labels overflow the plot's own content box, in pixels, on each side (0 = no overflow). */
     onOverflow?: (overflow: MarginOverflow) => void;
     /** Resolved legend/hover-isolate dimming style for a series, if any. */
@@ -93,33 +99,31 @@
 
   watchLabelOverflow({
     el: () => groupEl,
+    // Deliberately built from our own `width`/`height`/`numericMargins`
+    // (all already correctly sized off the `width`/`height` this `<Plot>`
+    // was actually mounted with — see `BasePlotLayout`'s own `numericMargins`
+    // doc comment), not from `usePlot().scales.x/y.fn.range()`: svelteplot's
+    // `<Plot>` accepts an explicit `width`/`height` (our `fixedWidth`) for
+    // its own real layout, but the scale object it exposes through context
+    // is computed off its *internal* auto-detected size instead — normally
+    // the same number, but never reconciled with `fixedWidth` when one is
+    // given. That left `.range()` reporting a stale/placeholder boundary
+    // (svelteplot's own internal default, unrelated to this plot's actual
+    // pixel size) wherever a caller fixes `width`/`height` explicitly — which
+    // every plot kind here does — so this watcher never saw genuine
+    // right/bottom overflow past the *real* edge and never grew the margin
+    // to fit it, leaving end-point labels to render past the plot's true
+    // right edge with no space reserved for them.
     bounds: () => {
       // getBBox() inside isn't itself tracked — depend on whatever actually
       // changes the rendered label layout so this re-measures.
       void lastPoints;
       void values;
-      // The scale range itself is read `untrack`ed on purpose: this margin
-      // watcher's own report (see labelOverflow.svelte.ts) grows the plot's
-      // margin to fit the labels, which feeds back into svelteplot's own
-      // auto-margin sizing and nudges this same range — occasionally by a
-      // permanent, never-settling ±1px each render. Treating the range as a
-      // tracked dependency here reran the whole watcher every single time it
-      // twitched, which (when it never settles) never let the watcher's own
-      // "poll until stable" loop finish — an infinite effect-restart loop
-      // that tripped Svelte's effect_update_depth_exceeded guard. Reading it
-      // untracked still measures against the *current* range on every
-      // re-run triggered by `lastPoints`/`values` above; it just stops the
-      // range's own fluctuations from being what triggers those re-runs.
-      const { xRange, yRange } = untrack(() => ({
-        xRange: plot.scales.x?.fn?.range?.()?.map(Number),
-        yRange: plot.scales.y?.fn?.range?.()?.map(Number),
-      }));
-      if (!xRange || !yRange) return undefined;
       return {
-        left: Math.min(xRange[0], xRange[1]),
-        right: Math.max(xRange[0], xRange[1]),
-        top: Math.min(yRange[0], yRange[1]),
-        bottom: Math.max(yRange[0], yRange[1]),
+        left: numericMargins.left,
+        right: width - numericMargins.right,
+        top: numericMargins.top,
+        bottom: height - numericMargins.bottom,
       };
     },
     onOverflow: (overflow) => onOverflow?.(overflow),
@@ -178,10 +182,9 @@
 </script>
 
 <g bind:this={groupEl}>
-{#each lastPoints as { series: s, lastRow, seriesIndex } (s.name)}
+{#each lastPoints as { series: s, lastRow, color: seriesColor } (s.name)}
   {@const xFn = resolveAccessor(s.x)}
   {@const yFn = resolveAccessor(s.y)}
-  {@const seriesColor = paletteColor(seriesIndex, cfg.palette)}
   {@const offset = declutteredOffsets.get(s.name)}
   {@const extraDy = offset?.inGroup ? offset.extraDy : 0}
   {@const baseDx = font?.dx ?? defaultDx}

package/dist/plots/line/ValueLabels.svelte.d.ts

@@ -7,9 +7,19 @@ declare function $$render<TData extends Record<string, unknown>>(): {
         lastPoints: {
             series: Series<TData>;
             lastRow: TData;
-            seriesIndex: number;
+            color: string;
         }[];
         values: ValuesStyle | undefined;
+        /** The plot's own pixel size — together with `numericMargins`, the ground truth for its content box (see `bounds()` below for why `usePlot()`'s own scale range can't be trusted for this). */
+        width: number;
+        height: number;
+        /** `BasePlotLayout`'s resolved margins, already numeric on every side. */
+        numericMargins: {
+            top: number;
+            right: number;
+            bottom: number;
+            left: number;
+        };
         /** Reports how far the rendered labels overflow the plot's own content box, in pixels, on each side (0 = no overflow). */
         onOverflow?: (overflow: MarginOverflow) => void;
         /** Resolved legend/hover-isolate dimming style for a series, if any. */

package/dist/plots/pyramid/Plot.svelte

@@ -262,25 +262,30 @@
   {getY}
   {hover}
   scales={resolvedScales}
-  margins={labelMargin.resolvedMargins}
+  {...labelMargin.plotProps}
   xTickRotate={resolvedScales?.x?.tickRotate}
   markers={[...pyramidMarkers, ...markers]}
   seriesData={resolvedSeries}
   {scopedGroups}
 >
-  {#if showVals}
-    {#each groupedSeries as group (group.series.name)}
-      <ValueLabels
-        {group}
-        {valAnchor}
-        {formatValue}
-        values={styles.values}
-        axisColor={cfg.axis.color}
-        disabled={effectiveDisabledFor(group.series.name)}
-        onHoverSeries={hoverIsolate ? () => { hoverIsolatedSeries = group.series.name; } : undefined}
-        onHoverEnd={hoverIsolate ? () => { hoverIsolatedSeries = null; } : undefined}
-        onOverflow={labelMargin.report}
-      />
-    {/each}
-  {/if}
+  {#snippet children({ numericMargins })}
+    {#if showVals}
+      {#each groupedSeries as group (group.series.name)}
+        <ValueLabels
+          {group}
+          {valAnchor}
+          {formatValue}
+          values={styles.values}
+          axisColor={cfg.axis.color}
+          disabled={effectiveDisabledFor(group.series.name)}
+          {width}
+          {height}
+          {numericMargins}
+          onHoverSeries={hoverIsolate ? () => { hoverIsolatedSeries = group.series.name; } : undefined}
+          onHoverEnd={hoverIsolate ? () => { hoverIsolatedSeries = null; } : undefined}
+          onOverflow={labelMargin.report}
+        />
+      {/each}
+    {/if}
+  {/snippet}
 </BasePlotLayout>

package/dist/plots/pyramid/ValueLabels.svelte

@@ -1,5 +1,5 @@
 <script lang="ts" generics="TData extends Record<string, unknown>">
-  import { Text, usePlot } from 'svelteplot';
+  import { Text } from 'svelteplot';
   import { resolveAccessor } from '../utils/accessors';
   import { disabledFillOverride } from '../utils/legendDisabled';
   import { watchLabelOverflow } from '../utils/labelOverflow.svelte';
@@ -25,6 +25,9 @@
     values,
     axisColor,
     disabled,
+    width,
+    height,
+    numericMargins,
     onHoverSeries,
     onHoverEnd,
     onOverflow,
@@ -36,6 +39,11 @@
     axisColor: string;
     /** Resolved legend/hover-isolate dimming style for this group's series, if any. */
     disabled?: LegendDisabledStyle;
+    /** The plot's own pixel size — together with `numericMargins`, the ground truth for its content box (see `bounds()` below). */
+    width: number;
+    height: number;
+    /** `BasePlotLayout`'s resolved margins, already numeric on every side. */
+    numericMargins: { top: number; right: number; bottom: number; left: number };
     /** Fired when the pointer enters this series' label — only wired when hover-isolate is enabled. */
     onHoverSeries?: () => void;
     onHoverEnd?: () => void;
@@ -44,25 +52,26 @@
   } = $props();
 
   const fillOverride = $derived(disabledFillOverride(disabled));
-  const plot = usePlot();
   let groupEl: SVGGElement | undefined = $state();
 
   watchLabelOverflow({
     el: () => groupEl,
+    // Built from our own `width`/`height`/`numericMargins` rather than
+    // `usePlot().scales.x/y.fn.range()` — see line/ValueLabels.svelte's
+    // matching comment for why that scale's exposed range can't be trusted
+    // once a caller fixes `width`/`height` explicitly (every plot kind here
+    // does).
     bounds: () => {
       // getBBox() inside isn't itself tracked — depend on whatever actually
       // changes the rendered label layout so this re-measures.
       void group;
       void values;
       void valAnchor;
-      const xRange = plot.scales.x?.fn?.range?.()?.map(Number);
-      const yRange = plot.scales.y?.fn?.range?.()?.map(Number);
-      if (!xRange || !yRange) return undefined;
       return {
-        left: Math.min(xRange[0], xRange[1]),
-        right: Math.max(xRange[0], xRange[1]),
-        top: Math.min(yRange[0], yRange[1]),
-        bottom: Math.max(yRange[0], yRange[1]),
+        left: numericMargins.left,
+        right: width - numericMargins.right,
+        top: numericMargins.top,
+        bottom: height - numericMargins.bottom,
       };
     },
     onOverflow: (overflow) => onOverflow?.(overflow),

package/dist/plots/pyramid/ValueLabels.svelte.d.ts

@@ -16,6 +16,16 @@ declare function $$render<TData extends Record<string, unknown>>(): {
         axisColor: string;
         /** Resolved legend/hover-isolate dimming style for this group's series, if any. */
         disabled?: LegendDisabledStyle;
+        /** The plot's own pixel size — together with `numericMargins`, the ground truth for its content box (see `bounds()` below). */
+        width: number;
+        height: number;
+        /** `BasePlotLayout`'s resolved margins, already numeric on every side. */
+        numericMargins: {
+            top: number;
+            right: number;
+            bottom: number;
+            left: number;
+        };
         /** Fired when the pointer enters this series' label — only wired when hover-isolate is enabled. */
         onHoverSeries?: () => void;
         onHoverEnd?: () => void;

package/dist/plots/scatter/Plot.svelte

@@ -220,23 +220,28 @@
   getY={(d) => Number(yAcc(d))}
   {hover}
   scales={resolvedScales}
-  margins={labelMargin.resolvedMargins}
+  {...labelMargin.plotProps}
   markers={[...scatterMarkers, ...markers]}
   seriesData={resolvedSeries}
   {scopedGroups}
 >
-  {#if showVals}
-    {#each groupedSeries as group (group.series.name)}
-      <ValueLabels
-        {group}
-        {formatValue}
-        values={styles.values}
-        defaultColor={cfg.axis.color}
-        disabled={effectiveDisabledFor(group.series.name)}
-        onHoverSeries={hoverIsolate ? () => { hoverIsolatedSeries = group.series.name; } : undefined}
-        onHoverEnd={hoverIsolate ? () => { hoverIsolatedSeries = null; } : undefined}
-        onOverflow={labelMargin.report}
-      />
-    {/each}
-  {/if}
+  {#snippet children({ numericMargins })}
+    {#if showVals}
+      {#each groupedSeries as group (group.series.name)}
+        <ValueLabels
+          {group}
+          {formatValue}
+          values={styles.values}
+          defaultColor={cfg.axis.color}
+          disabled={effectiveDisabledFor(group.series.name)}
+          {width}
+          {height}
+          {numericMargins}
+          onHoverSeries={hoverIsolate ? () => { hoverIsolatedSeries = group.series.name; } : undefined}
+          onHoverEnd={hoverIsolate ? () => { hoverIsolatedSeries = null; } : undefined}
+          onOverflow={labelMargin.report}
+        />
+      {/each}
+    {/if}
+  {/snippet}
 </BasePlotLayout>

package/dist/plots/scatter/ValueLabels.svelte

@@ -29,6 +29,9 @@
     values,
     defaultColor,
     disabled,
+    width,
+    height,
+    numericMargins,
     onHoverSeries,
     onHoverEnd,
     onOverflow,
@@ -39,6 +42,11 @@
     defaultColor: string;
     /** Resolved legend/hover-isolate dimming style for this group's series, if any. */
     disabled?: LegendDisabledStyle;
+    /** The plot's own pixel size — together with `numericMargins`, the ground truth for its content box (see `bounds()` below). */
+    width: number;
+    height: number;
+    /** `BasePlotLayout`'s resolved margins, already numeric on every side. */
+    numericMargins: { top: number; right: number; bottom: number; left: number };
     /** Fired when the pointer enters this series' label — only wired when hover-isolate is enabled. */
     onHoverSeries?: () => void;
     onHoverEnd?: () => void;
@@ -54,19 +62,22 @@
 
   watchLabelOverflow({
     el: () => groupEl,
+    // Built from our own `width`/`height`/`numericMargins` rather than
+    // `usePlot().scales.x/y.fn.range()` — see line/ValueLabels.svelte's
+    // matching comment for why that scale's exposed range can't be trusted
+    // once a caller fixes `width`/`height` explicitly (every plot kind here
+    // does). `plot.plotWidth`/`plotHeight` (used below for edge-aware
+    // placement) don't have this problem — only the scale's own `.range()`.
     bounds: () => {
       // getBBox() inside isn't itself tracked — depend on whatever actually
       // changes the rendered label layout so this re-measures.
       void data;
       void values;
-      const xRange = plot.scales.x?.fn?.range?.()?.map(Number);
-      const yRange = plot.scales.y?.fn?.range?.()?.map(Number);
-      if (!xRange || !yRange) return undefined;
       return {
-        left: Math.min(xRange[0], xRange[1]),
-        right: Math.max(xRange[0], xRange[1]),
-        top: Math.min(yRange[0], yRange[1]),
-        bottom: Math.max(yRange[0], yRange[1]),
+        left: numericMargins.left,
+        right: width - numericMargins.right,
+        top: numericMargins.top,
+        bottom: height - numericMargins.bottom,
       };
     },
     onOverflow: (overflow) => onOverflow?.(overflow),

package/dist/plots/scatter/ValueLabels.svelte.d.ts

@@ -12,6 +12,16 @@ declare function $$render<TData extends Record<string, unknown>>(): {
         defaultColor: string;
         /** Resolved legend/hover-isolate dimming style for this group's series, if any. */
         disabled?: LegendDisabledStyle;
+        /** The plot's own pixel size — together with `numericMargins`, the ground truth for its content box (see `bounds()` below). */
+        width: number;
+        height: number;
+        /** `BasePlotLayout`'s resolved margins, already numeric on every side. */
+        numericMargins: {
+            top: number;
+            right: number;
+            bottom: number;
+            left: number;
+        };
         /** Fired when the pointer enters this series' label — only wired when hover-isolate is enabled. */
         onHoverSeries?: () => void;
         onHoverEnd?: () => void;

package/package.json

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