@fundar/data-chart-telling 0.0.25 → 0.0.27

package/dist/plots/line/ValueLabels.svelte

@@ -1,30 +1,17 @@
 <script lang="ts" generics="TData extends Record<string, unknown>">
-  import { getContext } from 'svelte';
-  import { get } from 'svelte/store';
   import { SvelteMap } from 'svelte/reactivity';
-  import type { Writable } from 'svelte/store';
   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';
   import type { Series } from '../../types/plots/data/common';
-  import type { ValuesStyle } from '../../types/plots/styles/common';
+  import type { ValuesStyle } from '../../types/layout/styles';
   import type { ValueAnchor } from '../../types/plots/constants';
-
-  // svelteplot's own type for this context isn't part of its public export
-  // surface, but the context itself (keyed by this fixed string, set by its
-  // `<Plot>`) is — every axis mark already reads/writes it this way to
-  // auto-size margins around what it actually renders. Mirroring that here
-  // is what lets `margins.right: 'auto'` (the default) grow to fit these
-  // labels on its own, instead of the caller having to guess a fixed
-  // `margins.right` up front.
-  type AutoMarginStores = {
-    autoMarginTop: Writable<Map<string, number>>;
-    autoMarginLeft: Writable<Map<string, number>>;
-    autoMarginRight: Writable<Map<string, number>>;
-    autoMarginBottom: Writable<Map<string, number>>;
-  };
+  import type { LegendDisabledStyle } from '../../types/layout/legend';
+  import type { MarginOverflow } from '../utils/labelOverflow.svelte';
 
   /**
    * End-point value labels for `LinePlot` — one label per series at its last
@@ -37,9 +24,20 @@
   let {
     lastPoints,
     values,
+    onOverflow,
+    disabledFor,
+    onHoverSeries,
+    onHoverEnd,
   }: {
     lastPoints: { series: Series<TData>; lastRow: TData; seriesIndex: number }[];
     values: ValuesStyle | undefined;
+    /** 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. */
+    disabledFor?: (name: string) => LegendDisabledStyle | undefined;
+    /** Fired when the pointer enters a label — only wired when hover-isolate is enabled. */
+    onHoverSeries?: (name: string) => void;
+    onHoverEnd?: () => void;
   } = $props();
 
   const cfg = $derived(getConfiguration());
@@ -63,7 +61,7 @@
 
   const font = $derived(values?.fontStyle);
   const connector = $derived(values?.strokeStyle);
-  const fmtVal = $derived(values?.format ?? ((v: number, name: string) => `${name} - ${v}`));
+  const formatValue = $derived(values?.format ?? ((v: number, name: string) => `${name} - ${v}`));
   const valAnchor = $derived<ValueAnchor>(values?.anchor ?? 'start');
   // 'outside' is a per-point escape hatch resolved by HoverMarker; line's own
   // value labels already have their own `anchor: 'outside'` concept above,
@@ -76,54 +74,40 @@
     valAnchor === 'start' ? ('start' as const) : valAnchor === 'end' ? ('end' as const) : ('middle' as const),
   );
   const defaultLA = $derived(valAnchor === 'outside' ? ('bottom' as const) : ('middle' as const));
+  const fontSize = $derived(typeof font?.fontSize === 'number' ? font.fontSize : 12);
 
   const plot = usePlot();
 
-  // ── Auto margin ──────────────────────────────────────────────────────────
-  // Registers how far these labels (+ their leader lines) actually extend
-  // past the plot's own content box, on whichever side they grow toward, so
-  // `margins.{left,right}: 'auto'` (the default) sizes itself to fit them —
-  // the same mechanism svelteplot's own axis labels use, rather than a
-  // fixed margin the caller has to guess and hard-code up front.
-  const autoMargins = getContext<AutoMarginStores | undefined>('svelteplot/autoMargins');
-  const marginId = `line-value-labels-${Math.random().toString(36).slice(2)}`;
+  // ── Overflow measurement ─────────────────────────────────────────────────
+  // Measures how far the rendered labels extend past the plot's own content
+  // box and reports it to the caller (`Plot.svelte`), which grows its own
+  // local margin state to fit — see `labelOverflow.svelte.ts` for the actual
+  // `getBBox()` measurement. Reporting through a plain callback instead of
+  // registering directly into svelteplot's *shared* margin-auto-sizing
+  // context keeps this entirely local to one `<Plot>` instance: nothing here
+  // is shared across instances, which is what made that old approach spike
+  // CPU/memory into unresponsiveness when many instances mounted/unmounted
+  // together (e.g. a multi-story docs page → single story).
   let groupEl: SVGGElement | undefined = $state();
 
-  $effect(() => {
-    // Depend on whatever actually changes the rendered label layout —
-    // getBBox() below is a plain DOM read, not itself tracked, so without
-    // this the effect would only ever measure once.
-    void lastPoints;
-    void values;
-    const el = groupEl;
-    if (!autoMargins || !el) return;
-    const xRange = plot.scales.x?.fn?.range?.()?.map(Number);
-    if (!xRange) return;
-    const plotLeft = Math.min(xRange[0], xRange[1]);
-    const plotRight = Math.max(xRange[0], xRange[1]);
-    // getBBox() is in the <svg>'s own user-space coordinates — the same
-    // pixel space `plot.scales.*.fn()` already produces everywhere else in
-    // this file, so no viewport/DOM conversion is needed here.
-    let box: { x: number; width: number };
-    try {
-      box = el.getBBox();
-    } catch {
-      return;
-    }
-    const overflowRight = Math.ceil(Math.max(0, box.x + box.width - plotRight));
-    const overflowLeft = Math.ceil(Math.max(0, plotLeft - box.x));
-    const rightMargins = get(autoMargins.autoMarginRight);
-    const leftMargins = get(autoMargins.autoMarginLeft);
-    if (rightMargins.get(marginId) !== overflowRight) rightMargins.set(marginId, overflowRight);
-    if (leftMargins.get(marginId) !== overflowLeft) leftMargins.set(marginId, overflowLeft);
-  });
-
-  $effect(() => {
-    return () => {
-      if (!autoMargins) return;
-      get(autoMargins.autoMarginRight).delete(marginId);
-      get(autoMargins.autoMarginLeft).delete(marginId);
-    };
+  watchLabelOverflow({
+    el: () => groupEl,
+    bounds: () => {
+      // getBBox() inside isn't itself tracked — depend on whatever actually
+      // changes the rendered label layout so this re-measures.
+      void lastPoints;
+      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]),
+      };
+    },
+    onOverflow: (overflow) => onOverflow?.(overflow),
   });
 
   /**
@@ -151,7 +135,6 @@
     if (lastPoints.length < 2) return map;
     const yScale = plot.scales.y?.fn;
     if (!yScale) return map;
-    const fontSize = font?.fontSize ?? 12;
     const minGap = Math.max(16, fontSize * 1.4);
     const items = lastPoints.map(({ series: s, lastRow }) => ({
       name: s.name,
@@ -192,6 +175,12 @@
   {@const labelDx = offset?.inGroup
     ? dir * (elbowGap + (numLanes - 1) * laneStep + labelGap)
     : baseDx}
+  {@const text = formatValue(Number(yFn(lastRow)), s.name)}
+  {@const preferredTA = resolvedTextAnchor ?? defaultTA}
+  {@const preferredLA = font?.lineAnchor ?? defaultLA}
+  {@const disabled = disabledFor?.(s.name)}
+  {@const disabledStroke = disabledStrokeOverride(disabled)}
+  {@const disabledFill = disabledFillOverride(disabled)}
   {#if offset?.inGroup && plot.scales.x?.fn && plot.scales.y?.fn}
     {@const px = Number(plot.scales.x.fn(xFn(lastRow)))}
     {@const py = Number(plot.scales.y.fn(Number(yFn(lastRow))))}
@@ -202,32 +191,42 @@
       fill="none"
       stroke={connector?.stroke ?? defaultConnectorColor}
       stroke-width={connector?.strokeWidth ?? defaultConnectorWidth}
-      stroke-opacity={connector?.strokeOpacity ?? 1}
+      stroke-opacity={connector?.strokeOpacity ?? disabledStroke?.strokeOpacity ?? 1}
       stroke-dasharray={connector?.strokeDasharray}
       stroke-linecap={connector?.strokeLinecap ?? 'square'}
       stroke-linejoin={connector?.strokeLinejoin ?? 'miter'}
     />
   {/if}
-  <Text
-    data={[lastRow]}
-    x={xFn}
-    y={yFn}
-    text={() => fmtVal(Number(yFn(lastRow)), s.name)}
-    dx={labelDx}
-    dy={(font?.dy ?? defaultDy) + extraDy}
-    textAnchor={resolvedTextAnchor ?? defaultTA}
-    lineAnchor={font?.lineAnchor ?? defaultLA}
-    lineHeight={font?.lineHeight}
-    rotate={font?.rotate}
-    class={font?.class}
-    textClass={font?.textClass}
-    fill={font?.fill ?? seriesColor}
-    fontSize={font?.fontSize ?? 12}
-    fontWeight={font?.fontWeight}
-    fontStyle={font?.fontStyle}
-    stroke={font?.stroke}
-    strokeWidth={font?.strokeWidth}
-    paintOrder={font?.paintOrder}
-  />
+  <!-- svelteplot's Text mark never wires pointer handlers to its DOM node,
+       despite declaring them in its types — a wrapping <g> catches the
+       boundary crossing instead (pointerenter/leave fire on every ancestor). -->
+  <g
+    role="presentation"
+    onpointerenter={onHoverSeries && (() => onHoverSeries(s.name))}
+    onpointerleave={onHoverEnd}
+  >
+    <Text
+      data={[lastRow]}
+      x={xFn}
+      y={yFn}
+      text={() => text}
+      dx={labelDx}
+      dy={(font?.dy ?? defaultDy) + extraDy}
+      textAnchor={preferredTA}
+      lineAnchor={preferredLA}
+      lineHeight={font?.lineHeight}
+      rotate={font?.rotate}
+      class={font?.class}
+      textClass={font?.textClass}
+      fill={font?.fill ?? seriesColor}
+      fillOpacity={disabledFill?.fillOpacity}
+      {fontSize}
+      fontWeight={font?.fontWeight}
+      fontStyle={font?.fontStyle}
+      stroke={font?.stroke}
+      strokeWidth={font?.strokeWidth}
+      paintOrder={font?.paintOrder}
+    />
+  </g>
 {/each}
 </g>

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

@@ -1,5 +1,7 @@
 import type { Series } from '../../types/plots/data/common';
-import type { ValuesStyle } from '../../types/plots/styles/common';
+import type { ValuesStyle } from '../../types/layout/styles';
+import type { LegendDisabledStyle } from '../../types/layout/legend';
+import type { MarginOverflow } from '../utils/labelOverflow.svelte';
 declare function $$render<TData extends Record<string, unknown>>(): {
     props: {
         lastPoints: {
@@ -8,6 +10,13 @@ declare function $$render<TData extends Record<string, unknown>>(): {
             seriesIndex: number;
         }[];
         values: ValuesStyle | undefined;
+        /** 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. */
+        disabledFor?: (name: string) => LegendDisabledStyle | undefined;
+        /** Fired when the pointer enters a label — only wired when hover-isolate is enabled. */
+        onHoverSeries?: (name: string) => void;
+        onHoverEnd?: () => void;
     };
     exports: {};
     bindings: "";

package/dist/plots/line/buildLineMarkers.d.ts

@@ -0,0 +1,15 @@
+import type { Series } from '../../types/plots/data/common';
+import type { LineSegmentStyle } from '../../types/plots/segments/common';
+import type { VisualGroup } from '../../types/plots/segments/config';
+import type { StrokeStyle, DotStyle } from '../../types/plots/styling';
+import type { LineMarkerConfig, DotMarkerConfig } from '../../types/markers/common';
+/**
+ * Every `'line'` (+ `'dot'`, where a segment's style asks for them) marker
+ * for one LinePlot render: one `'line'` marker per visual segment, plus a
+ * `'dot'` marker right after it when that segment sets `style.dots`.
+ */
+export declare function buildLineMarkers<TData extends Record<string, unknown>>(args: {
+    groupedSeries: VisualGroup<Series<TData>, LineSegmentStyle>[];
+    disabledStrokeFor: (seriesName: string) => StrokeStyle | undefined;
+    disabledDotsFor: (seriesName: string) => DotStyle | undefined;
+}): (LineMarkerConfig | DotMarkerConfig)[];

package/dist/plots/line/buildLineMarkers.js

@@ -0,0 +1,57 @@
+import { resolveAccessor } from '../utils/accessors';
+import { paletteColor } from '../../utils/color';
+import { getConfiguration } from '../../configuration/config.svelte';
+/**
+ * Every `'line'` (+ `'dot'`, where a segment's style asks for them) marker
+ * for one LinePlot render: one `'line'` marker per visual segment, plus a
+ * `'dot'` marker right after it when that segment sets `style.dots`.
+ */
+export function buildLineMarkers(args) {
+    const { groupedSeries, disabledStrokeFor, disabledDotsFor } = args;
+    const cfg = getConfiguration();
+    const markers = [];
+    groupedSeries.forEach((group, seriesIndex) => {
+        const defaultColor = paletteColor(seriesIndex, cfg.palette);
+        const disabledStroke = disabledStrokeFor(group.series.name);
+        const disabledDots = disabledDotsFor(group.series.name);
+        const xFn = resolveAccessor(group.series.x);
+        const yFn = resolveAccessor(group.series.y);
+        for (const seg of group.visualSegments) {
+            const strokeStyle = seg.style.stroke;
+            const dotStyle = seg.style.dots;
+            markers.push({
+                type: 'line',
+                data: seg.data,
+                x: xFn,
+                y: yFn,
+                style: {
+                    stroke: disabledStroke?.stroke ?? strokeStyle?.stroke ?? defaultColor,
+                    strokeWidth: disabledStroke?.strokeWidth ?? strokeStyle?.strokeWidth ?? cfg.line.strokeWidth,
+                    strokeOpacity: disabledStroke?.strokeOpacity ?? strokeStyle?.strokeOpacity ?? 1,
+                    strokeDasharray: disabledStroke?.strokeDasharray ?? strokeStyle?.strokeDasharray,
+                    strokeLinejoin: disabledStroke?.strokeLinejoin ?? strokeStyle?.strokeLinejoin,
+                    strokeLinecap: disabledStroke?.strokeLinecap ?? strokeStyle?.strokeLinecap,
+                },
+            });
+            if (!dotStyle)
+                continue;
+            markers.push({
+                type: 'dot',
+                data: seg.data,
+                x: xFn,
+                y: yFn,
+                style: {
+                    dotRadius: disabledDots?.dotRadius ?? dotStyle.dotRadius ?? cfg.line.dotRadius,
+                    dotFill: disabledDots?.dotFill ?? dotStyle.dotFill ?? strokeStyle?.stroke ?? defaultColor,
+                    dotSymbol: disabledDots?.dotSymbol ?? dotStyle.dotSymbol ?? 'circle',
+                    dotStroke: disabledDots?.dotStroke ?? dotStyle.dotStroke ?? strokeStyle?.stroke ?? defaultColor,
+                    dotStrokeWidth: disabledDots?.dotStrokeWidth ?? dotStyle.dotStrokeWidth ?? 1,
+                    dotFillOpacity: disabledDots?.dotFillOpacity ?? dotStyle.dotFillOpacity ?? strokeStyle?.strokeOpacity ?? 1,
+                    dotStrokeOpacity: disabledDots?.dotStrokeOpacity ?? dotStyle.dotStrokeOpacity ?? strokeStyle?.strokeOpacity ?? 1,
+                    dotStrokeDasharray: disabledDots?.dotStrokeDasharray ?? dotStyle.dotStrokeDasharray,
+                },
+            });
+        }
+    });
+    return markers;
+}

package/dist/plots/pyramid/Plot.svelte

@@ -1,28 +1,24 @@
 <script lang="ts" generics="TData extends Record<string, unknown>">
-  import { SvelteMap } from 'svelte/reactivity';
-  import { BarX } from 'svelteplot';
   import { resolveAccessor } from '../utils/accessors';
   import { getConfiguration } from '../../configuration/config.svelte';
   import { paletteColor } from '../../utils/color';
   import { buildSeries } from '../../utils/grouping';
   import { getLegendInteraction } from '../../layout/legend/interaction.svelte';
   import { disabledFillOverride } from '../utils/legendDisabled';
-  import { buildGroupedSeries, validateSegments, resolveSegmentsForSeries, matchesSegmentX, getDataForSegments } from '../utils/segments';
+  import { buildPyramidBarMarkers } from './buildPyramidBarMarkers';
+  import { createLabelMarginTracker } from '../utils/labelOverflow.svelte';
+  import { buildGroupedSeries, validateSegments, buildScopedMarkerGroups } from '../utils/segments';
   import BasePlotLayout from '../../layout/plot/BasePlotLayout.svelte';
-  import AxisLayout from '../../layout/plot/AxisLayout.svelte';
-  import GridLayout from '../../layout/plot/GridLayout.svelte';
-  import RuleLayout from '../../layout/plot/RuleLayout.svelte';
-  import HoverMarker from '../../markers/HoverMarker.svelte';
   import ValueLabels from './ValueLabels.svelte';
   import { hasHoverMarker, resolveHoverStrategy, resolveHoverSync } from '../../layout/tooltip/utils';
   import type { BasePlotProps } from '../../types/plots/props';
-  import type { AxisValue } from '../../types/plots/axis';
+  import type { AxisValue, AxisBasedScalesConfig } from '../../types/layout/scales';
   import type { Series, SeriesProps, DataProps } from '../../types/plots/data/common';
-  import type { AxisBasedScalesConfig } from '../../types/plots/props';
-  import type { BasePlotStyles } from '../../types/plots/styles/common';
+  import type { BasePlotStylesConfig } from '../../types/layout/styles';
   import type { ValueAnchor } from '../../types/plots/constants';
   import type { BarSegmentStyle } from '../../types/plots/segments/common';
-  import type { Marker } from '../../types/markers/common';
+  import type { AxisBasedMarkersConfig } from '../../types/markers/common';
+  import type { LegendDisabledStyle } from '../../types/layout/legend';
 
   /**
    * A population-pyramid-style diverging bar chart: each series is mirrored
@@ -43,9 +39,9 @@
   type Props = BasePlotProps<
     SeriesProps<TData> | DataProps<TData>,
     TData,
-    BasePlotStyles,
+    BasePlotStylesConfig,
     BarSegmentStyle,
-    Marker,
+    AxisBasedMarkersConfig,
     AxisBasedScalesConfig<TData>
   >;
 
@@ -69,10 +65,27 @@
 
   const cfg = $derived(getConfiguration());
   const legendInteraction = $derived(getLegendInteraction());
+  const hoverIsolate = $derived(styles.values?.hoverIsolate ?? false);
+
+  // A value label hovered while `styles.values.hoverIsolate` is on dims
+  // every other series exactly like a legend toggle would — local to this
+  // one `<Plot>` instance (not the shared HoverStore) so the gesture can't
+  // leak into unrelated tooltip/crosshair behavior.
+  let hoverIsolatedSeries = $state<string | null>(null);
+
+  function effectiveDisabledFor(name: string): LegendDisabledStyle | undefined {
+    return (
+      legendInteraction?.disabledSeries.get(name) ??
+      (hoverIsolate && hoverIsolatedSeries && hoverIsolatedSeries !== name
+        ? { opacity: cfg.legend.disabledOpacity }
+        : undefined)
+    );
+  }
+
   const leftColor = $derived(styles.colors?.left ?? paletteColor(0, cfg.palette));
   const rightColor = $derived(styles.colors?.right ?? paletteColor(1, cfg.palette));
   const showVals = $derived(styles.values?.show ?? false);
-  const fmtVal = $derived(styles.values?.format ?? ((v: number) => `${v}`));
+  const formatValue = $derived(styles.values?.format ?? ((v: number) => `${v}`));
   const valAnchor = $derived<ValueAnchor>(styles.values?.anchor ?? 'outside');
 
   // Sort series names alphabetically; even index → left, odd → right.
@@ -123,7 +136,7 @@
           __side: s.side,
           __x: s.side === 'left' ? -v : v,
           __y: getCategory(d) as AxisValue,
-          __label: fmtVal(v, s.name),
+          __label: formatValue(v, s.name),
           __series: s.name,
         } as TaggedRow;
       });
@@ -166,17 +179,6 @@
     return vals.length ? Math.max(...vals) : 1;
   });
 
-  const seriesMarkers = $derived.by(() => {
-    const map = new SvelteMap<string, Marker[]>();
-    for (const marker of markers) {
-      if ((marker.type === 'component' || marker.type === 'hover') && marker.series) {
-        if (!map.has(marker.series)) map.set(marker.series, []);
-        map.get(marker.series)!.push(marker);
-      }
-    }
-    return map;
-  });
-
   // The single, fully-resolved scales object BasePlotLayout reads for
   // everything (ticks, grid, sort, and the real svelteplot scale) — avoids
   // keeping a second, separately-defaulted copy of `scales.x`/`scales.y`
@@ -186,117 +188,74 @@
     ...scales,
     x: {
       domain: [-maxMagnitude, maxMagnitude],
-      tickFormat: (v: unknown) => fmtVal(Math.abs(Number(v)), ''),
+      tickFormat: (v: unknown) => formatValue(Math.abs(Number(v)), ''),
       ...(scales.x ?? {}),
     },
     y: { type: 'band', padding: 0.2, domain: yDomain, ...(scales.y ?? {}) },
   });
 
-  const hoverActive = $derived(tooltip != null || hasHoverMarker(markers));
-  const hoverStrategy = $derived(resolveHoverStrategy(tooltip?.strategy, markers, 'y'));
-  const hoverSync = $derived(resolveHoverSync(tooltip?.sync, markers));
+  const hover = $derived({
+    active: tooltip != null || hasHoverMarker(markers),
+    points: hoverPoints,
+    label: labelFor,
+    strategy: resolveHoverStrategy(tooltip?.strategy, markers, 'y'),
+    sync: resolveHoverSync(tooltip?.sync, markers),
+    tooltip,
+  });
+
+  const pyramidMarkers = $derived(
+    buildPyramidBarMarkers({
+      groupedSeries,
+      valueFor: signedValue,
+      colorFor: (s) => (s.side === 'left' ? leftColor : rightColor),
+      disabledFillFor: (name) => disabledFillOverride(effectiveDisabledFor(name)),
+    }),
+  );
+
+  const scopedGroups = $derived(
+    buildScopedMarkerGroups<TData, InternalSeries, BarSegmentStyle>({
+      groupedSeries,
+      segments,
+      colorFor: (series) => (series.side === 'left' ? leftColor : rightColor),
+      segmentColorFor: (style, defaultColor) => style?.fill ?? defaultColor,
+    }),
+  );
+
+  // A pyramid bar's value label can grow past the plot's own content box —
+  // reserving real space there is what each label's own overflow
+  // measurement feeds into here, via a tracker local to this one `<Plot>`
+  // instance. See `labelOverflow.svelte.ts`.
+  const labelMargin = createLabelMarginTracker(() => margins);
 </script>
 
 <BasePlotLayout
   {width}
   {height}
+  {styles}
   data={flat}
   {getX}
   {getY}
-  {hoverPoints}
-  label={labelFor}
-  {tooltip}
-  {hoverActive}
-  {hoverStrategy}
-  {hoverSync}
+  {hover}
   scales={resolvedScales}
-  {margins}
+  margins={labelMargin.resolvedMargins}
   xTickRotate={resolvedScales?.x?.tickRotate}
+  markers={[...pyramidMarkers, ...markers]}
+  seriesData={resolvedSeries}
+  {scopedGroups}
 >
-  {#snippet children({ matchedPoints, ruleX, ruleY, impliesRuleX, impliesRuleY, numericMargins })}
-  <AxisLayout data={flat} {getX} {getY} {width} {height} {numericMargins} scales={resolvedScales} />
-  <GridLayout scales={resolvedScales} />
-  <RuleLayout {markers} seriesData={resolvedSeries} {matchedPoints} {ruleX} {ruleY} {impliesRuleX} {impliesRuleY}>
+  {#if showVals}
     {#each groupedSeries as group (group.series.name)}
-      {@const defaultColor = group.series.side === 'left' ? leftColor : rightColor}
-      {@const getCategory = resolveAccessor(group.series.x)}
-      {@const disabledFill = disabledFillOverride(legendInteraction?.disabledSeries.get(group.series.name))}
-      {#each group.visualSegments as seg, i (`${group.series.name}-${i}`)}
-        <BarX
-          data={seg.data}
-          x1={0}
-          x2={(d: TData) => signedValue(group.series, d)}
-          y={getCategory}
-          fill={disabledFill?.fill ?? seg.style.fill ?? defaultColor}
-          fillOpacity={disabledFill?.fillOpacity ?? seg.style.fillOpacity ?? 1}
-        />
-      {/each}
-
-      {#if showVals}
-        <ValueLabels {group} {valAnchor} {fmtVal} values={styles.values} axisColor={cfg.axis.color} />
-      {/if}
-
-      {#each seriesMarkers.get(group.series.name) ?? [] as marker, i (`series-${group.series.name}-${marker.type}-${i}`)}
-        {#if marker.type === 'component'}
-          {#if marker.scope === 'segment'}
-            {@const segs = resolveSegmentsForSeries(segments, group.series.name)}
-            {@const segmentDataArrays = getDataForSegments(group.series.data, getCategory, segs)}
-            {#each segmentDataArrays as segmentData, segIdx (`${group.series.name}-marker-segment-${segIdx}`)}
-              {#if segmentData.length > 0}
-                {@const segmentColor = segs[segIdx]?.style?.fill ?? defaultColor}
-                <marker.component
-                  {...marker.props}
-                  series={group.series.name}
-                  data={segmentData}
-                  seriesColor={segmentColor}
-                />
-              {/if}
-            {/each}
-          {:else}
-            {@const segs = resolveSegmentsForSeries(segments, group.series.name)}
-            {@const seriesColor = segs[0]?.style?.fill ?? defaultColor}
-            <marker.component
-              {...marker.props}
-              series={group.series.name}
-              data={group.series.data}
-              seriesColor={seriesColor}
-            />
-          {/if}
-        {:else if marker.type === 'hover'}
-          {@const seriesPoints = matchedPoints.filter((p) => p.series === group.series.name)}
-          {#if marker.scope === 'segment'}
-            {@const segs = resolveSegmentsForSeries(segments, group.series.name)}
-            {#each segs as seg, segIdx (`${group.series.name}-hover-segment-${segIdx}`)}
-              {@const segPoints = seriesPoints.filter((p) => matchesSegmentX(p.x, seg))}
-              {#if segPoints.length > 0}
-                <HoverMarker
-                  data={segPoints}
-                  ruleX={marker.ruleX !== false && (impliesRuleX || marker.ruleX === true) ? ruleX : null}
-                  ruleY={marker.ruleY !== false && (impliesRuleY || marker.ruleY === true) ? ruleY : null}
-                  showLabels={marker.showLabels}
-                  ruleStyle={marker.ruleStyle}
-                  dotStyle={marker.dotStyle}
-                  fontStyle={marker.fontStyle}
-                  seriesColor={seg.style?.fill ?? defaultColor}
-                />
-              {/if}
-            {/each}
-          {:else}
-            {@const segs = resolveSegmentsForSeries(segments, group.series.name)}
-            <HoverMarker
-              data={seriesPoints}
-              ruleX={marker.ruleX !== false && (impliesRuleX || marker.ruleX === true) ? ruleX : null}
-              ruleY={marker.ruleY !== false && (impliesRuleY || marker.ruleY === true) ? ruleY : null}
-              showLabels={marker.showLabels}
-              ruleStyle={marker.ruleStyle}
-              dotStyle={marker.dotStyle}
-              fontStyle={marker.fontStyle}
-              seriesColor={segs[0]?.style?.fill ?? defaultColor}
-            />
-          {/if}
-        {/if}
-      {/each}
+      <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}
-  </RuleLayout>
-  {/snippet}
+  {/if}
 </BasePlotLayout>

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

@@ -1,11 +1,10 @@
 import type { BasePlotProps } from '../../types/plots/props';
+import type { AxisBasedScalesConfig } from '../../types/layout/scales';
 import type { SeriesProps, DataProps } from '../../types/plots/data/common';
-import type { AxisBasedScalesConfig } from '../../types/plots/props';
-import type { BasePlotStyles } from '../../types/plots/styles/common';
-import type { BarSegmentStyle } from '../../types/plots/segments/common';
-import type { Marker } from '../../types/markers/common';
+import type { BasePlotStylesConfig } from '../../types/layout/styles';
+import type { AxisBasedMarkersConfig } from '../../types/markers/common';
 declare function $$render<TData extends Record<string, unknown>>(): {
-    props: BasePlotProps<SeriesProps<TData> | DataProps<TData>, TData, BasePlotStyles, BarSegmentStyle, Marker, AxisBasedScalesConfig<TData>>;
+    props: BasePlotProps<SeriesProps<TData> | DataProps<TData>, TData, BasePlotStylesConfig, import("../..").AreaStyle, AxisBasedMarkersConfig, AxisBasedScalesConfig<TData>>;
     exports: {};
     bindings: "";
     slots: {};