@fundar/data-chart-telling 0.0.25 → 0.0.26

package/dist/plots/line/ValueLabels.svelte

@@ -1,31 +1,14 @@
 <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 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>>;
-  };
-
   /**
    * End-point value labels for `LinePlot` — one label per series at its last
    * data point, with automatic collision resolution whenever several series
@@ -37,9 +20,12 @@
   let {
     lastPoints,
     values,
+    onOverflow,
   }: {
     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: { left: number; right: number }) => void;
   } = $props();
 
   const cfg = $derived(getConfiguration());
@@ -76,54 +62,43 @@
     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 — real `getBBox()` measurement, same as the
+  // approach this used to register directly into svelteplot's *shared*
+  // margin-auto-sizing context. Reporting through a plain callback instead
+  // keeps this entirely local to one `<Plot>` instance: nothing here is
+  // shared across instances, which is what made the 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.
+    // getBBox() below is a plain DOM read, not itself tracked — depend on
+    // whatever actually changes the rendered label layout so this re-runs.
     void lastPoints;
     void values;
     const el = groupEl;
-    if (!autoMargins || !el) return;
+    if (!el || !onOverflow) 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);
-    };
+    onOverflow({
+      left: Math.ceil(Math.max(0, plotLeft - box.x)),
+      right: Math.ceil(Math.max(0, box.x + box.width - plotRight)),
+    });
   });
 
   /**
@@ -151,7 +126,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 +166,9 @@
   {@const labelDx = offset?.inGroup
     ? dir * (elbowGap + (numLanes - 1) * laneStep + labelGap)
     : baseDx}
+  {@const text = fmtVal(Number(yFn(lastRow)), s.name)}
+  {@const preferredTA = resolvedTextAnchor ?? defaultTA}
+  {@const preferredLA = font?.lineAnchor ?? defaultLA}
   {#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))))}
@@ -212,17 +189,17 @@
     data={[lastRow]}
     x={xFn}
     y={yFn}
-    text={() => fmtVal(Number(yFn(lastRow)), s.name)}
+    text={() => text}
     dx={labelDx}
     dy={(font?.dy ?? defaultDy) + extraDy}
-    textAnchor={resolvedTextAnchor ?? defaultTA}
-    lineAnchor={font?.lineAnchor ?? defaultLA}
+    textAnchor={preferredTA}
+    lineAnchor={preferredLA}
     lineHeight={font?.lineHeight}
     rotate={font?.rotate}
     class={font?.class}
     textClass={font?.textClass}
     fill={font?.fill ?? seriesColor}
-    fontSize={font?.fontSize ?? 12}
+    {fontSize}
     fontWeight={font?.fontWeight}
     fontStyle={font?.fontStyle}
     stroke={font?.stroke}

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

@@ -1,5 +1,5 @@
 import type { Series } from '../../types/plots/data/common';
-import type { ValuesStyle } from '../../types/plots/styles/common';
+import type { ValuesStyle } from '../../types/layout/styles';
 declare function $$render<TData extends Record<string, unknown>>(): {
     props: {
         lastPoints: {
@@ -8,6 +8,11 @@ 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: {
+            left: number;
+            right: number;
+        }) => 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,22 @@
 <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 { 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';
 
   /**
    * A population-pyramid-style diverging bar chart: each series is mirrored
@@ -43,9 +37,9 @@
   type Props = BasePlotProps<
     SeriesProps<TData> | DataProps<TData>,
     TData,
-    BasePlotStyles,
+    BasePlotStylesConfig,
     BarSegmentStyle,
-    Marker,
+    AxisBasedMarkersConfig,
     AxisBasedScalesConfig<TData>
   >;
 
@@ -166,17 +160,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`
@@ -192,111 +175,52 @@
     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(legendInteraction?.disabledSeries.get(name)),
+    }),
+  );
+
+  const scopedGroups = $derived(
+    buildScopedMarkerGroups<TData, InternalSeries, BarSegmentStyle>({
+      groupedSeries,
+      segments,
+      colorFor: (series) => (series.side === 'left' ? leftColor : rightColor),
+      segmentColorFor: (style, defaultColor) => style?.fill ?? defaultColor,
+    }),
+  );
 </script>
 
 <BasePlotLayout
   {width}
   {height}
+  {styles}
   data={flat}
   {getX}
   {getY}
-  {hoverPoints}
-  label={labelFor}
-  {tooltip}
-  {hoverActive}
-  {hoverStrategy}
-  {hoverSync}
+  {hover}
   scales={resolvedScales}
   {margins}
   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} {fmtVal} values={styles.values} axisColor={cfg.axis.color} />
     {/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: {};

package/dist/plots/pyramid/ValueLabels.svelte

@@ -2,7 +2,7 @@
   import { Text } from 'svelteplot';
   import { resolveAccessor } from '../utils/accessors';
   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';
   import type { BarSegmentStyle } from '../../types/plots/segments/common';
   import type { VisualGroup } from '../../types/plots/segments/config';

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

@@ -1,5 +1,5 @@
 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';
 import type { BarSegmentStyle } from '../../types/plots/segments/common';
 import type { VisualGroup } from '../../types/plots/segments/config';

package/dist/plots/pyramid/buildPyramidBarMarkers.d.ts

@@ -0,0 +1,19 @@
+import type { Series } from '../../types/plots/data/common';
+import type { BarSegmentStyle } from '../../types/plots/segments/common';
+import type { VisualGroup } from '../../types/plots/segments/config';
+import type { BarMarkerConfig } from '../../types/markers/common';
+/**
+ * Every `'bar'` marker for one PyramidPlot render — reuses `BarMarkerConfig`
+ * directly, always horizontal (category on y, signed magnitude on x) and
+ * with no insets. Emits no `role: 'hitArea'` markers, since PyramidPlot's
+ * hover matches nearest points rather than hit-testing category bands.
+ */
+export declare function buildPyramidBarMarkers<TData extends Record<string, unknown>, S extends Series<TData>>(args: {
+    groupedSeries: VisualGroup<S, BarSegmentStyle>[];
+    valueFor: (series: S, d: TData) => number;
+    colorFor: (series: S) => string;
+    disabledFillFor: (seriesName: string) => {
+        fill?: string;
+        fillOpacity?: number;
+    } | undefined;
+}): BarMarkerConfig[];

package/dist/plots/pyramid/buildPyramidBarMarkers.js

@@ -0,0 +1,32 @@
+import { resolveAccessor } from '../utils/accessors';
+/**
+ * Every `'bar'` marker for one PyramidPlot render — reuses `BarMarkerConfig`
+ * directly, always horizontal (category on y, signed magnitude on x) and
+ * with no insets. Emits no `role: 'hitArea'` markers, since PyramidPlot's
+ * hover matches nearest points rather than hit-testing category bands.
+ */
+export function buildPyramidBarMarkers(args) {
+    const { groupedSeries, valueFor, colorFor, disabledFillFor } = args;
+    const markers = [];
+    for (const group of groupedSeries) {
+        const getCategory = resolveAccessor(group.series.x);
+        const defaultColor = colorFor(group.series);
+        const disabledFill = disabledFillFor(group.series.name);
+        for (const seg of group.visualSegments) {
+            markers.push({
+                type: 'bar',
+                role: 'segment',
+                isHorizontal: true,
+                data: seg.data,
+                y: getCategory,
+                x1: 0,
+                x2: (d) => valueFor(group.series, d),
+                style: {
+                    fill: disabledFill?.fill ?? seg.style.fill ?? defaultColor,
+                    fillOpacity: disabledFill?.fillOpacity ?? seg.style.fillOpacity ?? 1,
+                },
+            });
+        }
+    }
+    return markers;
+}