@fundar/data-chart-telling 0.0.13 → 0.0.15

package/dist/plots/bar/Plot.svelte

@@ -5,22 +5,43 @@
   import { SvelteMap } from 'svelte/reactivity';
   import { paletteColor } from '../../utils/color';
   import { buildSeries } from '../../utils/grouping';
-  import { BarY, Text } from 'svelteplot';
+  import { BarX, BarY } from 'svelteplot';
   import { resolveAccessor } from '../utils/accessors';
   import { getConfiguration } from '../../configuration/config.svelte';
   import { buildGroupedSeries, validateSegments, resolveSegmentsForSeries, matchesSegmentX } from '../utils/segments';
-  import PlotLayout from '../../layout/plot/PlotLayout.svelte';
-  import HoverMarker from '../markers/HoverMarker.svelte';
-  import type { Marker } from '../../types/plots/markers';
-  import type { PlotProps } from '../../types/plots/props';
-  import type { Series, AxisValue } from '../../types/plots/common';
-  import type { BarSegmentStyle, ValueAnchor } from '../../types/plots/styles';
+  import { createBarLayout } from './layout.svelte';
+  import { buildHoverPoints } from './hoverPoints';
+  import BarSegments from './BarSegments.svelte';
+  import ValueLabels from './ValueLabels.svelte';
+  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 { hasHoverMarker, resolveHoverStrategy, resolveHoverSync } from '../../layout/tooltip/utils';
+  import type { Marker } from '../../types/markers/common';
+  import type { BasePlotProps } from '../../types/plots/props';
+  import type { AxisScale } from '../../types/plots/axis';
+  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 { ValueAnchor } from '../../types/plots/constants';
+  import type { BarSegmentStyle } from '../../types/plots/segments/common';
 
   /**
-   * A vertical bar chart. Accepts either a pre-built `series` array or flat
-   * `data/x/y/z` props — mirrors the line/heatmap plot contract so the
-   * chart-level container/timeline/facet/legend wrap it unchanged.
+   * A bar chart, vertical by default. Accepts either a pre-built `series`
+   * array or flat `data/x/y/z` props — mirrors the line/heatmap plot contract
+   * so the chart-level container/timeline/facet/legend wrap it unchanged.
    */
+  type Props = BasePlotProps<
+    SeriesProps<TData> | DataProps<TData>,
+    TData,
+    BasePlotStyles,
+    BarSegmentStyle,
+    Marker,
+    AxisBasedScalesConfig<TData>
+  >;
+
   let {
     width,
     height,
@@ -35,14 +56,16 @@
     scales = {},
     margins,
     tooltip = undefined,
-  }: PlotProps<TData, BarSegmentStyle> = $props();
+  }: Props = $props();
 
   $effect(() => { validateSegments(segments); });
 
   const cfg = $derived(getConfiguration());
   const resolvedSeries = $derived(series ?? buildSeries(data!, x!, y!, z));
   const groupedSeries = $derived(
-    buildGroupedSeries<Series<TData>, BarSegmentStyle>(resolvedSeries, segments),
+    // connect: false — bars are discrete; there's no visual gap between
+    // adjacent categories to bridge (see buildGroupedSeries's own doc).
+    buildGroupedSeries<Series<TData>, BarSegmentStyle>(resolvedSeries, segments, false),
   );
   const showVals = $derived(styles.values?.show ?? false);
   const fmtVal = $derived(styles.values?.format ?? ((v: number) => `${v}`));
@@ -59,85 +82,117 @@
     return map;
   });
 
+  // `xAcc`/`yAcc` are always data-semantic (category/value) — independent of
+  // which *visual* axis ends up drawing them, decided by `categoricalAxis`.
   const xAcc = $derived(resolveAccessor(resolvedSeries[0]?.x ?? ((d: TData) => d)));
   const yAcc = $derived(resolveAccessor(resolvedSeries[0]?.y ?? ((d: TData) => d)));
   const flat = $derived(resolvedSeries.flatMap((s) => s.data));
-  const hoverPoints = $derived(
-    resolvedSeries.flatMap((s, idx) => {
-      const sx = resolveAccessor(s.x);
-      const sy = resolveAccessor(s.y);
-      return s.data.map((d) => ({
-        x: sx(d) as AxisValue,
-        y: Number(sy(d)),
-        row: d,
-        label: String(sy(d)),
-        series: s.name,
-        color: paletteColor(idx, cfg.palette),
-      }));
-    }),
-  );
+
+  /**
+   * Which visual axis draws the category, and therefore whether this renders
+   * as vertical bars (`BarY`, category on X) or horizontal bars (`BarX`,
+   * category on Y). Mirrors how pyramid/heatmap default an `AxisScale.type`
+   * themselves: `scales.x`/`scales.y` always describe *that visual axis*
+   * regardless of which data field lands there, so marking `scales.y.type:
+   * 'categorical'` simply says "the category is drawn on Y this time" — x
+   * defaults to categorical when neither is marked.
+   */
+  const categoricalAxis = $derived.by((): 'x' | 'y' => {
+    const xCategorical = scales.x?.type === 'categorical';
+    const yCategorical = scales.y?.type === 'categorical';
+    if (xCategorical && yCategorical) {
+      console.warn(
+        "BarPlot: scales.x.type and scales.y.type can't both be 'categorical' — " +
+          'mark only one axis as the category axis. Defaulting to x.',
+      );
+      return 'x';
+    }
+    return yCategorical ? 'y' : 'x';
+  });
+  const isHorizontal = $derived(categoricalAxis === 'y');
+  const BarMark = $derived(isHorizontal ? BarX : BarY);
+
+  /**
+   * `'categorical'` is our own sentinel (BarPlot-only), not a real svelteplot
+   * scale type — svelteplot's x/y scales don't recognise it (it's valid only
+   * for `color`/`symbol`). Strip it before the scale reaches svelteplot so it
+   * auto-infers the real type (typically `point`/`band`) the same way it
+   * already does when `type` is left unset entirely.
+   */
+  function stripCategoricalType(scale?: AxisScale<TData>): AxisScale<TData> | undefined {
+    if (scale?.type !== 'categorical') return scale;
+    const rest = { ...scale };
+    delete rest.type;
+    return rest;
+  }
+  // The single, fully-resolved scales object BasePlotLayout reads for
+  // everything (ticks, grid, sort, and the real svelteplot scale) — avoids
+  // keeping a second, separately-patched copy of `scales.x`/`scales.y` in
+  // sync with the one actually forwarded.
+  const resolvedScales = $derived({
+    ...scales,
+    x: stripCategoricalType(scales.x),
+    y: stripCategoricalType(scales.y),
+  });
+
+  // The accessor feeding each *visual* channel — swapped from the
+  // data-semantic xAcc/yAcc when the category is drawn on Y.
+  const plotGetX = $derived(isHorizontal ? (d: TData) => Number(yAcc(d)) : xAcc);
+  const plotGetY = $derived(isHorizontal ? xAcc : (d: TData) => Number(yAcc(d)));
+
+  /**
+   * Series-layout geometry (grouped/stacked offsets, band-width estimate,
+   * value baseline) — the single source of truth shared by bar-segment
+   * rendering, value labels, and hover markers below. See `layout.svelte.ts`.
+   */
+  const barLayout = createBarLayout<TData>({
+    scales: () => scales,
+    isHorizontal: () => isHorizontal,
+    width: () => width,
+    height: () => height,
+    margins: () => margins,
+    flat: () => flat,
+    xAcc: () => xAcc,
+    groupedSeries: () => groupedSeries,
+  });
+
+  // `x`/`y` here are visual (matched against BasePlotLayout's own getX/getY,
+  // which drive tick/domain computation and the Pointer's hit-testing) —
+  // `row` (see BasePlotLayout/HoverPoint) is what lets the template recover the
+  // semantic category regardless of which axis it landed on.
+  const hoverPoints = $derived(buildHoverPoints(resolvedSeries, isHorizontal, barLayout, cfg.palette));
+
+  const hoverActive = $derived(tooltip != null || hasHoverMarker(markers));
+  const hoverStrategy = $derived(resolveHoverStrategy(tooltip?.strategy, markers, categoricalAxis));
+  const hoverSync = $derived(resolveHoverSync(tooltip?.sync, markers));
 </script>
 
-<PlotLayout
+<BasePlotLayout
   {width}
   {height}
-  x={scales.x}
-  y={scales.y}
   data={flat}
-  getX={xAcc}
-  getY={(d) => Number(yAcc(d))}
+  getX={plotGetX}
+  getY={plotGetY}
   {hoverPoints}
   label={(r) => String(yAcc(r))}
   {tooltip}
-  {markers}
-  seriesData={resolvedSeries}
-  {scales}
+  {hoverActive}
+  {hoverStrategy}
+  {hoverSync}
+  scales={resolvedScales}
   {margins}
-  defaultStrategy="x"
+  xTickRotate={resolvedScales?.x?.tickRotate}
 >
-  {#snippet children({ matchedPoints, ruleX, ruleY, impliesRuleX, impliesRuleY })}
+  {#snippet children({ matchedPoints, ruleX, ruleY, impliesRuleX, impliesRuleY, numericMargins })}
+  <AxisLayout data={flat} getX={plotGetX} getY={plotGetY} {width} {height} {numericMargins} scales={resolvedScales} />
+  <GridLayout scales={resolvedScales} />
+  <RuleLayout {markers} seriesData={resolvedSeries} {matchedPoints} {ruleX} {ruleY} {impliesRuleX} {impliesRuleY}>
   {#each groupedSeries as group, seriesIndex (group.series.name)}
     {@const defaultColor = paletteColor(seriesIndex, cfg.palette)}
-    {@const xFn = resolveAccessor(group.series.x)}
-    {@const yFn = resolveAccessor(group.series.y)}
-    {#each group.visualSegments as seg, i (`${group.series.name}-${i}`)}
-      <BarY
-        data={seg.data}
-        x={xFn}
-        y={yFn}
-        fill={seg.style.fill ?? defaultColor}
-        fillOpacity={seg.style.fillOpacity ?? 1}
-      />
-    {/each}
+    <BarSegments {group} {seriesIndex} {barLayout} {isHorizontal} {BarMark} {defaultColor} />
 
     {#if showVals}
-      {@const yTextFn = valAnchor === 'middle'
-        ? (d: TData) => Number(yFn(d)) / 2
-        : valAnchor === 'end'
-        ? () => 0
-        : (d: TData) => Number(yFn(d))}
-      {@const defaultDy = valAnchor === 'outside' ? -6 : valAnchor === 'start' ? 4 : valAnchor === 'end' ? -4 : 0}
-      {@const defaultLA = valAnchor === 'outside' || valAnchor === 'end'
-        ? ('bottom' as const)
-        : valAnchor === 'start'
-        ? ('top' as const)
-        : ('middle' as const)}
-      <Text
-        data={group.series.data}
-        x={xFn}
-        y={yTextFn}
-        text={(d: TData) => fmtVal(Number(yFn(d)), group.series.name)}
-        dx={styles.values?.dx ?? 0}
-        dy={styles.values?.dy ?? defaultDy}
-        textAnchor={styles.values?.textAnchor ?? 'middle'}
-        lineAnchor={styles.values?.lineAnchor ?? defaultLA}
-        lineHeight={styles.values?.lineHeight}
-        rotate={styles.values?.rotate}
-        class={styles.values?.class}
-        textClass={styles.values?.textClass}
-        fill={cfg.axis.color}
-        fontSize={12}
-      />
+      <ValueLabels {group} {seriesIndex} {barLayout} {isHorizontal} {valAnchor} {fmtVal} values={styles.values} axisColor={cfg.axis.color} />
     {/if}
 
     {#each seriesMarkers.get(group.series.name) ?? [] as marker, i (`series-${group.series.name}-hover-${i}`)}
@@ -146,7 +201,7 @@
         {#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))}
+            {@const segPoints = seriesPoints.filter((p) => matchesSegmentX(xAcc(p.row), seg))}
             {#if segPoints.length > 0}
               <HoverMarker
                 data={segPoints}
@@ -176,5 +231,6 @@
       {/if}
     {/each}
   {/each}
+  </RuleLayout>
   {/snippet}
-</PlotLayout>
+</BasePlotLayout>

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

@@ -1,7 +1,11 @@
-import type { PlotProps } from '../../types/plots/props';
-import type { BarSegmentStyle } from '../../types/plots/styles';
+import type { Marker } from '../../types/markers/common';
+import type { BasePlotProps } from '../../types/plots/props';
+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';
 declare function $$render<TData extends Record<string, unknown>>(): {
-    props: PlotProps<TData, BarSegmentStyle>;
+    props: BasePlotProps<SeriesProps<TData> | DataProps<TData>, TData, BasePlotStyles, BarSegmentStyle, Marker, AxisBasedScalesConfig<TData>>;
     exports: {};
     bindings: "";
     slots: {};

package/dist/plots/bar/ValueLabels.svelte

@@ -0,0 +1,89 @@
+<script lang="ts" generics="TData extends Record<string, unknown>">
+  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 { ValueAnchor } from '../../types/plots/constants';
+  import type { BarSegmentStyle } from '../../types/plots/segments/common';
+  import type { VisualGroup } from '../../types/plots/segments/config';
+  import type { BarLayout } from './layout.svelte';
+
+  /**
+   * Renders one series-group's value label — anchor-driven default
+   * position/offset, overridable per-field via `styles.values`. Positions
+   * account for the same grouped/stacked geometry as the bars themselves
+   * (via {@link BarLayout}), so a label lands on its own bar/segment instead
+   * of a shared default position.
+   */
+  let {
+    group,
+    seriesIndex,
+    barLayout,
+    isHorizontal,
+    valAnchor,
+    fmtVal,
+    values,
+    axisColor,
+  }: {
+    group: VisualGroup<Series<TData>, BarSegmentStyle>;
+    seriesIndex: number;
+    barLayout: BarLayout<TData>;
+    isHorizontal: boolean;
+    valAnchor: ValueAnchor;
+    fmtVal: (value: number, seriesName: string) => string;
+    values: ValuesStyle | undefined;
+    axisColor: string;
+  } = $props();
+
+  const xFn = $derived(resolveAccessor(group.series.x));
+  const yFn = $derived(resolveAccessor(group.series.y));
+
+  const valueTextFn = $derived(
+    barLayout.layout === 'stacked'
+      ? (d: TData) => barLayout.stackedBaseline(xFn(d), seriesIndex) + Number(yFn(d)) / 2
+      : valAnchor === 'middle' && !isHorizontal
+        ? (d: TData) => Number(yFn(d)) / 2
+        : valAnchor === 'end'
+          ? () => 0
+          : (d: TData) => Number(yFn(d)),
+  );
+  const defaultOffset = $derived(
+    valAnchor === 'outside' ? (isHorizontal ? 6 : -6)
+    : valAnchor === 'start' ? (isHorizontal ? -4 : 4)
+    : valAnchor === 'end' ? (isHorizontal ? 4 : -4)
+    : 0,
+  );
+  const defaultLA = $derived(
+    valAnchor === 'outside' || valAnchor === 'end' ? ('bottom' as const)
+    : valAnchor === 'start' ? ('top' as const)
+    : ('middle' as const),
+  );
+  const groupOffset = $derived(barLayout.groupOffset(seriesIndex));
+
+  // `textAnchor: 'outside'` is a per-point escape hatch resolved by
+  // HoverMarker (which knows each point's signed x) — value labels already
+  // have their own `anchor: 'outside'` concept (computed above), so if it
+  // leaks through here just fall back to the anchor-derived default.
+  const resolvedTextAnchor = $derived(values?.textAnchor === 'outside' ? undefined : values?.textAnchor);
+</script>
+
+<Text
+  data={group.series.data}
+  {...isHorizontal ? { y: xFn, x: valueTextFn } : { x: xFn, y: valueTextFn }}
+  text={(d: TData) => fmtVal(Number(yFn(d)), group.series.name)}
+  dx={values?.dx ?? (isHorizontal ? defaultOffset : groupOffset.dx)}
+  dy={values?.dy ?? (isHorizontal ? groupOffset.dy : defaultOffset)}
+  textAnchor={resolvedTextAnchor ?? (isHorizontal ? (valAnchor === 'outside' || valAnchor === 'end' ? 'start' : valAnchor === 'start' ? 'end' : 'middle') : 'middle')}
+  lineAnchor={values?.lineAnchor ?? (isHorizontal ? 'middle' : defaultLA)}
+  lineHeight={values?.lineHeight}
+  rotate={values?.rotate}
+  class={values?.class}
+  textClass={values?.textClass}
+  fill={values?.fill ?? axisColor}
+  fontSize={values?.fontSize ?? 12}
+  fontWeight={values?.fontWeight}
+  fontStyle={values?.fontStyle}
+  stroke={values?.stroke}
+  strokeWidth={values?.strokeWidth}
+  paintOrder={values?.paintOrder}
+/>

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

@@ -0,0 +1,39 @@
+import type { Series } from '../../types/plots/data/common';
+import type { ValuesStyle } from '../../types/plots/styles/common';
+import type { ValueAnchor } from '../../types/plots/constants';
+import type { BarSegmentStyle } from '../../types/plots/segments/common';
+import type { VisualGroup } from '../../types/plots/segments/config';
+import type { BarLayout } from './layout.svelte';
+declare function $$render<TData extends Record<string, unknown>>(): {
+    props: {
+        group: VisualGroup<Series<TData>, BarSegmentStyle>;
+        seriesIndex: number;
+        barLayout: BarLayout<TData>;
+        isHorizontal: boolean;
+        valAnchor: ValueAnchor;
+        fmtVal: (value: number, seriesName: string) => string;
+        values: ValuesStyle | undefined;
+        axisColor: string;
+    };
+    exports: {};
+    bindings: "";
+    slots: {};
+    events: {};
+};
+declare class __sveltets_Render<TData extends Record<string, unknown>> {
+    props(): ReturnType<typeof $$render<TData>>['props'];
+    events(): ReturnType<typeof $$render<TData>>['events'];
+    slots(): ReturnType<typeof $$render<TData>>['slots'];
+    bindings(): "";
+    exports(): {};
+}
+interface $$IsomorphicComponent {
+    new <TData extends Record<string, unknown>>(options: import('svelte').ComponentConstructorOptions<ReturnType<__sveltets_Render<TData>['props']>>): import('svelte').SvelteComponent<ReturnType<__sveltets_Render<TData>['props']>, ReturnType<__sveltets_Render<TData>['events']>, ReturnType<__sveltets_Render<TData>['slots']>> & {
+        $$bindings?: ReturnType<__sveltets_Render<TData>['bindings']>;
+    } & ReturnType<__sveltets_Render<TData>['exports']>;
+    <TData extends Record<string, unknown>>(internal: unknown, props: ReturnType<__sveltets_Render<TData>['props']> & {}): ReturnType<__sveltets_Render<TData>['exports']>;
+    z_$$bindings?: ReturnType<__sveltets_Render<any>['bindings']>;
+}
+declare const ValueLabels: $$IsomorphicComponent;
+type ValueLabels<TData extends Record<string, unknown>> = InstanceType<typeof ValueLabels<TData>>;
+export default ValueLabels;

package/dist/plots/bar/hoverPoints.d.ts

@@ -0,0 +1,15 @@
+import type { Series } from '../../types/plots/data/common';
+import type { HoverPoint } from '../../types/layout/tooltip';
+import type { BarLayout } from './layout.svelte';
+/**
+ * Builds hover-marker candidate points for every row across every series.
+ *
+ * `x`/`y` (the values matching is keyed off) stay the raw category/value so
+ * every series at the same category still matches together under the 'x'
+ * strategy; `dx`/`dy` only nudge where the matched point is *drawn* — see
+ * {@link import('../../types/layout/tooltip').HoverDisplayPoint}. For
+ * 'stacked' layout, `value` itself is adjusted to the series' cumulative
+ * height instead of `dx`/`dy`, since that offset is representable as a
+ * regular data value (unlike 'grouped''s pixel-only slice offset).
+ */
+export declare function buildHoverPoints<TData extends Record<string, unknown>>(resolvedSeries: Series<TData>[], isHorizontal: boolean, geometry: Pick<BarLayout<TData>, 'layout' | 'stackedBaseline' | 'groupOffset'>, palette: string[]): HoverPoint<TData>[];

package/dist/plots/bar/hoverPoints.js

@@ -0,0 +1,35 @@
+import { resolveAccessor } from '../utils/accessors';
+import { paletteColor } from '../../utils/color';
+/**
+ * Builds hover-marker candidate points for every row across every series.
+ *
+ * `x`/`y` (the values matching is keyed off) stay the raw category/value so
+ * every series at the same category still matches together under the 'x'
+ * strategy; `dx`/`dy` only nudge where the matched point is *drawn* — see
+ * {@link import('../../types/layout/tooltip').HoverDisplayPoint}. For
+ * 'stacked' layout, `value` itself is adjusted to the series' cumulative
+ * height instead of `dx`/`dy`, since that offset is representable as a
+ * regular data value (unlike 'grouped''s pixel-only slice offset).
+ */
+export function buildHoverPoints(resolvedSeries, isHorizontal, geometry, palette) {
+    return resolvedSeries.flatMap((s, idx) => {
+        const sx = resolveAccessor(s.x);
+        const sy = resolveAccessor(s.y);
+        return s.data.map((d) => {
+            const category = sx(d);
+            const rawValue = Number(sy(d));
+            const value = geometry.layout === 'stacked' ? geometry.stackedBaseline(category, idx) + rawValue : rawValue;
+            const { dx, dy } = geometry.groupOffset(idx);
+            return {
+                x: isHorizontal ? value : category,
+                y: isHorizontal ? category : value,
+                dx,
+                dy,
+                row: d,
+                label: String(sy(d)),
+                series: s.name,
+                color: paletteColor(idx, palette),
+            };
+        });
+    });
+}

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

@@ -0,0 +1,37 @@
+import type { AxisValue } from '../../types/plots/axis';
+import type { Series } from '../../types/plots/data/common';
+import type { AxisBasedScalesConfig } from '../../types/plots/props';
+import type { BarSegmentStyle } from '../../types/plots/segments/common';
+import type { VisualGroup } from '../../types/plots/segments/config';
+import type { MarginConfig } from '../../types/plots/props';
+export type BarSeriesLayout = 'overlap' | 'grouped' | 'stacked';
+/**
+ * Reactive geometry for BarPlot's series-layout modes — the single source of
+ * truth for "where does series N's bar actually sit," shared by bar-segment
+ * rendering, value labels, and hover markers. Centralized here after a bug
+ * where hover markers reproduced (and initially missed) the same grouped/
+ * stacked math value labels already accounted for.
+ */
+export declare function createBarLayout<TData extends Record<string, unknown>>(args: {
+    scales: () => AxisBasedScalesConfig<TData>;
+    isHorizontal: () => boolean;
+    width: () => number;
+    height: () => number;
+    margins: () => MarginConfig | undefined;
+    flat: () => TData[];
+    xAcc: () => (d: TData) => AxisValue;
+    groupedSeries: () => VisualGroup<Series<TData>, BarSegmentStyle>[];
+}): {
+    readonly layout: BarSeriesLayout;
+    readonly valueBaseline: number;
+    readonly estimatedBandwidth: number;
+    readonly seriesCount: number;
+    readonly seriesStep: number;
+    readonly seriesGap: number;
+    stackedBaseline: (category: AxisValue, seriesIndex: number) => number;
+    groupOffset: (seriesIndex: number) => {
+        dx: number;
+        dy: number;
+    };
+};
+export type BarLayout<TData extends Record<string, unknown>> = ReturnType<typeof createBarLayout<TData>>;

package/dist/plots/bar/layout.svelte.js

@@ -0,0 +1,132 @@
+import { SvelteMap, SvelteSet } from 'svelte/reactivity';
+import { getConfiguration } from '../../configuration/config.svelte';
+import { resolveAccessor } from '../utils/accessors';
+import { numericMargin } from '../../layout/plot/margins';
+/**
+ * Reactive geometry for BarPlot's series-layout modes — the single source of
+ * truth for "where does series N's bar actually sit," shared by bar-segment
+ * rendering, value labels, and hover markers. Centralized here after a bug
+ * where hover markers reproduced (and initially missed) the same grouped/
+ * stacked math value labels already accounted for.
+ */
+export function createBarLayout(args) {
+    const cfg = $derived(getConfiguration());
+    /**
+     * How series sharing the same category are arranged — see
+     * {@link import('../../types/plots/axis').AxisScale.seriesLayout}. Read
+     * off `scales.z` since it's the grouping axis, not the category axis itself.
+     */
+    const layout = $derived(args.scales().z?.seriesLayout ?? 'overlap');
+    const categoricalScale = $derived(args.isHorizontal() ? args.scales().y : args.scales().x);
+    const valueScale = $derived(args.isHorizontal() ? args.scales().x : args.scales().y);
+    /**
+     * Bars default to a 0 baseline. When the value axis's domain is set and
+     * excludes 0 (e.g. `[75, 85]`, to zoom in on a tight range), a literal 0
+     * baseline sits way outside the visible domain — the scale still maps it
+     * linearly, so the bar's "start" lands far past the plot's own edge and
+     * the bar overflows into the margin instead of appearing to end at the
+     * frame. Clamping the baseline to whichever domain bound is closest to 0
+     * makes bars cut off exactly at the visible edge instead, which is the
+     * point of setting a truncated domain in the first place. Left as 0 (no
+     * clamp) when the domain isn't set or already straddles 0 naturally.
+     */
+    const valueBaseline = $derived.by(() => {
+        const domain = valueScale?.domain;
+        if (!domain || domain.length < 2)
+            return 0;
+        const lo = Number(domain[0]);
+        const hi = Number(domain[domain.length - 1]);
+        if (Number.isNaN(lo) || Number.isNaN(hi))
+            return 0;
+        const min = Math.min(lo, hi);
+        const max = Math.max(lo, hi);
+        if (min > 0)
+            return min;
+        if (max < 0)
+            return max;
+        return 0;
+    });
+    /**
+     * Approximate per-category band size in pixels (width for vertical bars,
+     * height for horizontal ones), used only to size each series' slice in
+     * 'grouped' layout via inset props. Derived from this plot's own
+     * `width`/`height`/`margins` rather than svelteplot's actual measured
+     * scale (not part of its public API) — close enough for a grouped look,
+     * though it can be slightly off when an 'auto' margin ends up wider than
+     * the estimate (e.g. unusually long tick labels). Follows the same
+     * band-scale formula (and 0.15 default padding) svelteplot itself uses,
+     * so the category axis's own `paddingInner`/`paddingOuter` — the space
+     * *between* categories — is reflected here too, not just svelteplot's
+     * real render.
+     */
+    const estimatedBandwidth = $derived.by(() => {
+        const categoryCount = new SvelteSet(args.flat().map((d) => args.xAcc()(d))).size;
+        if (categoryCount === 0)
+            return 0;
+        const baseMargins = { ...cfg.margins, ...args.margins() };
+        const innerSize = args.isHorizontal()
+            ? Math.max(0, args.height() - numericMargin('top', baseMargins.top) - numericMargin('bottom', baseMargins.bottom))
+            : Math.max(0, args.width() - numericMargin('left', baseMargins.left) - numericMargin('right', baseMargins.right));
+        const paddingInner = categoricalScale?.paddingInner ?? categoricalScale?.padding ?? 0.15;
+        const paddingOuter = categoricalScale?.paddingOuter ?? categoricalScale?.padding ?? 0.15;
+        const step = innerSize / (categoryCount - paddingInner + 2 * paddingOuter);
+        return step * (1 - paddingInner);
+    });
+    const seriesCount = $derived(args.groupedSeries().length);
+    // Each series gets an equal slice of the band; `seriesPadding` (0–1, space
+    // *within* a group, between its series) reserves a fraction of that slice
+    // as a gap split evenly on either side of the bar.
+    const seriesStep = $derived(seriesCount > 0 ? estimatedBandwidth / seriesCount : 0);
+    const seriesGap = $derived(Math.max(0, Math.min(1, args.scales().z?.seriesPadding ?? 0)) * seriesStep);
+    /**
+     * Per-category cumulative sums for 'stacked' layout — `stackedPrefixSums.get(category)[i]`
+     * is the sum of series `0..i-1`'s value at that category, i.e. series `i`'s
+     * own segment spans `[prefix, prefix + value]`. Computed by hand (rather
+     * than svelteplot's `stackY`/`stackX` transform, which needs every series'
+     * rows in one call to line up cumulative offsets) so the same numbers can
+     * position the bar segment, its middle-anchored label, and its hover marker.
+     */
+    const stackedPrefixSums = $derived.by(() => {
+        const sums = new SvelteMap();
+        if (layout !== 'stacked')
+            return sums;
+        for (const category of new SvelteSet(args.flat().map((d) => args.xAcc()(d)))) {
+            let running = 0;
+            const prefix = [];
+            for (const group of args.groupedSeries()) {
+                prefix.push(running);
+                const seriesXFn = resolveAccessor(group.series.x);
+                const seriesYFn = resolveAccessor(group.series.y);
+                const row = group.series.data.find((d) => seriesXFn(d) === category);
+                running += row ? Number(seriesYFn(row)) : 0;
+            }
+            sums.set(category, prefix);
+        }
+        return sums;
+    });
+    function stackedBaseline(category, seriesIndex) {
+        return stackedPrefixSums.get(category)?.[seriesIndex] ?? 0;
+    }
+    /**
+     * Pixel offset for a 'grouped' series' own slice of the category band —
+     * shared by bar segments (`insetLeft`/`insetTop`), value labels
+     * (`dx`/`dy`), and hover markers, so all three stay in sync with wherever
+     * this series' bar actually renders.
+     */
+    function groupOffset(seriesIndex) {
+        if (layout !== 'grouped')
+            return { dx: 0, dy: 0 };
+        const offset = -(estimatedBandwidth / 2) + seriesIndex * seriesStep + seriesStep / 2;
+        return args.isHorizontal() ? { dx: 0, dy: offset } : { dx: offset, dy: 0 };
+    }
+    return {
+        get layout() { return layout; },
+        get valueBaseline() { return valueBaseline; },
+        get estimatedBandwidth() { return estimatedBandwidth; },
+        get seriesCount() { return seriesCount; },
+        get seriesStep() { return seriesStep; },
+        get seriesGap() { return seriesGap; },
+        stackedBaseline,
+        groupOffset,
+    };
+}