@fundar/data-chart-telling 0.0.63 → 1.0.0

package/dist/markers/HoverMarker.svelte

@@ -1,212 +0,0 @@
-<script lang="ts">
-  import { usePlot } from 'svelteplot';
-  import DotMarker from './DotMarker.svelte';
-  import TextMarker from './TextMarker.svelte';
-  import RuleMarker from './RuleMarker.svelte';
-  import BarMarker from './BarMarker.svelte';
-  import { getConfiguration } from '../configuration/config.svelte';
-  import type { MarkerProps } from '../types/markers/props';
-  import type { HoverMarkerConfig } from '../types/markers/common';
-  import type { HoverDisplayPoint } from '../types/layout/tooltip';
-
-  /**
-   * In-SVG hover highlight, rendered *inside* a `<Plot>`. Because it positions
-   * itself through the host plot's scales, it places the same coordinate
-   * correctly in every facet — that is what makes cross-facet sync work without
-   * any pixel math. Draws optional x/y crosshair rules plus a dot + value label
-   * for each matched point.
-   *
-   * Takes the raw `marker` config plus the couple of things it can't know on
-   * its own — `activePoint` (the specific matched point actually under the
-   * cursor, for the crosshair position; see `controller.svelte.ts`'s own doc
-   * comment) and whether the active hover strategy implies a crosshair on
-   * each axis by default — the same "component owns its own rendering"
-   * pattern `BarMarker`/`RuleMarker` follow. `activePoint`/
-   * `impliesCrosshairX`/`impliesCrosshairY` are all optional and default to
-   * "no crosshair".
-   *
-   * `areaX`/`areaY` are a separate, always-explicit opt-in (no implied
-   * default) for a thickened area highlight in place of the thin crosshair —
-   * see `HoverMarkerConfig`'s own doc comment. Rendered via `BarMarker`'s
-   * `role: 'highlight'`, so it renders nothing on an axis without a band
-   * scale (e.g. a line/scatter plot's continuous axis).
-   */
-  interface Props extends MarkerProps<HoverDisplayPoint> {
-    /** Narrowed to just the fields this component reads — `HoverMarkerConfig` also carries routing/scoping fields (`series`/`scope`/`strategy`/`sync`) it has no use for. */
-    marker: Pick<
-      HoverMarkerConfig,
-      'ruleX' | 'ruleY' | 'areaX' | 'areaY' | 'showLabels' | 'format' | 'ruleStyle' | 'areaStyle' | 'dotStyle' | 'fontStyle'
-    >;
-    activePoint?: HoverDisplayPoint | null;
-    impliesCrosshairX?: boolean;
-    impliesCrosshairY?: boolean;
-    /** Reports `activePoint`'s real pixel position within this facet's own box, or `null` when nothing's matched. */
-    onActivePointPixel?: (pos: { x: number; y: number } | null) => void;
-  }
-
-  let {
-    data = [],
-    marker,
-    activePoint = null,
-    impliesCrosshairX = false,
-    impliesCrosshairY = false,
-    seriesColor,
-    onActivePointPixel,
-  }: Props = $props();
-
-  const cfg = $derived(getConfiguration());
-  const plot = usePlot();
-
-  /** Scaled pixel position of `value`, centered within its band for a band scale. */
-  function scaledPixel(scale: { type?: string; fn?: (v: never) => unknown } | undefined, value: unknown): number | null {
-    if (!scale?.fn || value == null) return null;
-    const raw = Number(scale.fn(value as never));
-    if (!Number.isFinite(raw)) return null;
-    if (scale.type === 'band') {
-      const bandwidth = (scale.fn as { bandwidth?: () => number }).bandwidth?.() ?? 0;
-      return raw + bandwidth / 2;
-    }
-    return raw;
-  }
-
-  const activePixel = $derived.by((): { x: number; y: number } | null => {
-    if (!activePoint) return null;
-    const x = scaledPixel(plot.scales.x, activePoint.x);
-    const y = scaledPixel(plot.scales.y, activePoint.y);
-    if (x == null || y == null) return null;
-    return { x: x + (activePoint.dx ?? 0), y: y + (activePoint.dy ?? 0) };
-  });
-
-  $effect(() => {
-    onActivePointPixel?.(activePixel);
-  });
-
-  const showCrosshairX = $derived(marker.ruleX !== false && (impliesCrosshairX || marker.ruleX === true));
-  const showCrosshairY = $derived(marker.ruleY !== false && (impliesCrosshairY || marker.ruleY === true));
-  const ruleX = $derived(showCrosshairX ? (activePoint?.x ?? null) : null);
-  const ruleY = $derived(showCrosshairY ? (activePoint?.y ?? null) : null);
-  // areaX/areaY have no implied default — always off unless explicitly set.
-  const areaX = $derived(marker.areaX === true ? (activePoint?.x ?? null) : null);
-  const areaY = $derived(marker.areaY === true ? (activePoint?.y ?? null) : null);
-  const showLabels = $derived(marker.showLabels ?? true);
-  const format = $derived(marker.format);
-  const ruleStyle = $derived(marker.ruleStyle);
-  const areaStyle = $derived({ ...cfg.hover.area, ...marker.areaStyle });
-  const dotStyle = $derived(marker.dotStyle);
-  const fontStyle = $derived(marker.fontStyle);
-
-  /** Explicit style wins; otherwise fall back to the series color, then the point's own resolved color. */
-  const resolveColor = (explicit: string | undefined, point: HoverDisplayPoint) =>
-    explicit ?? seriesColor ?? point.color;
-
-  // Horizontal gap between the dot's edge and an 'outside'-anchored label —
-  // scales with the dot's own resolved radius so the label clears it.
-  const dotRadius = $derived(dotStyle?.dotRadius ?? cfg.hover.dot.dotRadius ?? 5);
-
-  /**
-   * Resolves `fontStyle.textAnchor: 'outside'` into a per-point anchor +
-   * offset, mirroring the value-label `'outside'` anchor's own left/right
-   * split (see pyramid/bar's own `ValueAnchor` handling): a positive `x`
-   * anchors `'start'` and nudges right, a negative `x` anchors `'end'` and
-   * nudges left — so a diverging mark's label sits on the side of the dot
-   * away from zero, on whichever side that dot itself landed. Only
-   * meaningful when the point's `x` is numeric (e.g. pyramid's magnitude
-   * axis); anything else falls through to the plain `fontStyle` unchanged.
-   *
-   * Also overrides `cfg.hover.font`'s default `dy: -18` (meant for a label
-   * floating *above* the dot) back to vertically centered, and clears the
-   * dot's own radius horizontally instead of the flat default nudge, so the
-   * label doesn't collide with the dot it's labeling.
-   */
-  function resolveFontStyle(point: HoverDisplayPoint) {
-    if (fontStyle?.textAnchor !== 'outside' || typeof point.x !== 'number') {
-      return { ...cfg.hover.font, ...fontStyle, fill: resolveColor(fontStyle?.fill, point) };
-    }
-    const outward = point.x >= 0;
-    const gap = dotRadius + 5;
-    return {
-      ...cfg.hover.font,
-      ...fontStyle,
-      fill: resolveColor(fontStyle?.fill, point),
-      textAnchor: outward ? ('start' as const) : ('end' as const),
-      lineAnchor: fontStyle?.lineAnchor ?? ('middle' as const),
-      dx: fontStyle?.dx ?? (outward ? gap : -gap),
-      dy: fontStyle?.dy ?? 0,
-    };
-  }
-</script>
-
-{#if areaX != null}
-  <BarMarker
-    marker={{
-      type: 'bar',
-      role: 'highlight',
-      isHorizontal: false,
-      data: [],
-      category: areaX,
-      insetLeft: activePoint?.areaInset?.start,
-      insetRight: activePoint?.areaInset?.end,
-      style: areaStyle,
-    }}
-  />
-{/if}
-
-{#if areaY != null}
-  <BarMarker
-    marker={{
-      type: 'bar',
-      role: 'highlight',
-      isHorizontal: true,
-      data: [],
-      category: areaY,
-      insetTop: activePoint?.areaInset?.start,
-      insetBottom: activePoint?.areaInset?.end,
-      style: areaStyle,
-    }}
-  />
-{/if}
-
-{#if ruleX != null}
-  <g transform="translate({activePoint?.dx ?? 0}, {activePoint?.dy ?? 0})">
-    <RuleMarker axis="x" value={ruleX} style={{ ...cfg.hover.rule, ...ruleStyle }} />
-  </g>
-{/if}
-
-{#if ruleY != null}
-  <g transform="translate({activePoint?.dx ?? 0}, {activePoint?.dy ?? 0})">
-    <RuleMarker axis="y" value={ruleY} style={{ ...cfg.hover.rule, ...ruleStyle }} />
-  </g>
-{/if}
-
-{#if data.length > 0}
-  {#each data as point (`${point.series ?? ''}_${point.x}_${point.y}`)}
-    <!-- Pixel nudge for plot kinds whose series position isn't fully captured
-         by x/y alone (e.g. BarPlot's 'grouped' layout) — see HoverDisplayPoint.dx/dy. -->
-    <g transform="translate({point.dx ?? 0}, {point.dy ?? 0})">
-      <DotMarker
-        data={[point]}
-        x={(d) => d.x}
-        y={(d) => d.y}
-        style={{
-          ...cfg.hover.dot,
-          ...dotStyle,
-          dotFill: resolveColor(dotStyle?.dotFill, point),
-          dotStroke: resolveColor(dotStyle?.dotStroke, point),
-        }}
-      />
-    </g>
-  {/each}
-  {#if showLabels}
-    {#each data as point (`${point.series ?? ''}_${point.x}_${point.y}`)}
-      <g transform="translate({point.dx ?? 0}, {point.dy ?? 0})">
-        <TextMarker
-          data={[point]}
-          x={(d) => d.x}
-          y={(d) => d.y}
-          text={(d) => format ? format(d) : (d.label ?? '')}
-          style={resolveFontStyle(point)}
-        />
-      </g>
-    {/each}
-  {/if}
-{/if}

package/dist/markers/LineMarker.svelte

@@ -1,19 +0,0 @@
-<script lang="ts">
-  import { Line } from 'svelteplot';
-  import type { LineMarkerConfig } from '../types/markers/common';
-
-  /** Renders one `'line'` marker as a `<Line>` call — just the stroke. Endpoint dots are a separate `'dot'` marker. */
-  let { marker }: { marker: LineMarkerConfig } = $props();
-</script>
-
-<Line
-  data={marker.data}
-  x={marker.x}
-  y={marker.y}
-  stroke={marker.style?.stroke}
-  strokeWidth={marker.style?.strokeWidth}
-  strokeOpacity={marker.style?.strokeOpacity}
-  strokeDasharray={marker.style?.strokeDasharray}
-  strokeLinejoin={marker.style?.strokeLinejoin}
-  strokeLinecap={marker.style?.strokeLinecap}
-/>

package/dist/markers/LinkMarker.svelte

@@ -1,42 +0,0 @@
-<script lang="ts">
-  import { Geo } from 'svelteplot';
-  import { resolveAccessor } from '../plots/utils/accessors';
-  import { greatCircleInterpolate } from '../plots/utils/geoAccessors';
-  import type { GeoLinkMarkerConfig } from '../types/markers/geo';
-
-  /** Renders one `'link'` marker — geodesic-aware lines between point pairs, as a synthetic `LineString` fed through `<Geo>`. */
-  let { marker }: { marker: GeoLinkMarkerConfig } = $props();
-
-  const getX1 = $derived(resolveAccessor(marker.x1));
-  const getY1 = $derived(resolveAccessor(marker.y1));
-  const getX2 = $derived(resolveAccessor(marker.x2));
-  const getY2 = $derived(resolveAccessor(marker.y2));
-
-  const linkFeatures = $derived(
-    marker.data.map((d) => ({
-      type: 'Feature' as const,
-      properties: {},
-      geometry: {
-        type: 'LineString' as const,
-        coordinates:
-          marker.curve === 'linear'
-            ? [
-                [Number(getX1(d)), Number(getY1(d))],
-                [Number(getX2(d)), Number(getY2(d))],
-              ]
-            : greatCircleInterpolate(Number(getX1(d)), Number(getY1(d)), Number(getX2(d)), Number(getY2(d))),
-      },
-    })),
-  );
-</script>
-
-<!-- No `fill` prop: svelteplot treats any string as scale-worthy unless it's a real CSS color, so a literal `'none'` would run through the color scale instead of staying unfilled. Omitting it leaves svelteplot's own unfilled default in place. -->
-<Geo
-  class="link"
-  data={linkFeatures}
-  stroke={marker.style?.stroke ?? 'currentColor'}
-  strokeWidth={marker.style?.strokeWidth ?? 1}
-  strokeOpacity={marker.style?.strokeOpacity}
-  strokeDasharray={marker.style?.strokeDasharray}
-  style="vector-effect: non-scaling-stroke"
-/>

package/dist/markers/PeakMarker.svelte

@@ -1,80 +0,0 @@
-<script lang="ts">
-  import DotMarker from './DotMarker.svelte';
-  import TextMarker from './TextMarker.svelte';
-  import type { MarkerProps } from '../types/markers/props';
-  import type { DotStyle, FontStyle } from '../types/plots/styling';
-
-  // eslint-disable-next-line @typescript-eslint/no-explicit-any
-  interface Props extends MarkerProps<Record<string, any>> {
-    yProp?: string;
-    xProp?: string;
-    mode?: 'max' | 'min';
-    label?: string;
-    dotStyle?: DotStyle;
-    textStyle?: FontStyle;
-  }
-
-  const {
-    data = [],
-    yProp = 'value',
-    xProp = 'x',
-    mode = 'max',
-    label,
-    dotStyle,
-    textStyle,
-    seriesColor,
-  }: Props = $props();
-
-  const resolvedDotFill = $derived(dotStyle?.dotFill ?? seriesColor ?? 'currentColor');
-  const resolvedDotStroke = $derived(dotStyle?.dotStroke ?? seriesColor ?? 'currentColor');
-  const resolvedTextFill = $derived(textStyle?.fill ?? seriesColor ?? 'currentColor');
-
-  const peakPoint = $derived.by(() => {
-    if (data.length === 0) return null;
-
-    return data.reduce((peak, current) => {
-      const currentY = current[yProp];
-      const peakY = peak[yProp];
-
-      if (mode === 'max') {
-        return currentY > peakY ? current : peak;
-      } else {
-        return currentY < peakY ? current : peak;
-      }
-    });
-  });
-
-  const peakX = $derived(peakPoint ? peakPoint[xProp] : null);
-  const peakY = $derived(peakPoint ? peakPoint[yProp] : null);
-
-  const resolvedDotStyle = $derived<DotStyle>({
-    ...dotStyle,
-    dotFill: resolvedDotFill,
-    dotStroke: resolvedDotStroke,
-  });
-
-  const resolvedTextStyle = $derived<FontStyle>({
-    ...textStyle,
-    fill: resolvedTextFill,
-    fontWeight: textStyle?.fontWeight ?? 'bold',
-    dy: textStyle?.dy ?? -15,
-  });
-</script>
-
-{#if peakPoint}
-  <DotMarker
-    data={[peakPoint]}
-    x={() => peakX}
-    y={() => peakY}
-    style={resolvedDotStyle}
-  />
-  {#if label}
-    <TextMarker
-      data={[peakPoint]}
-      x={() => peakX}
-      y={() => peakY}
-      text={label}
-      style={resolvedTextStyle}
-    />
-  {/if}
-{/if}

package/dist/markers/PeakMarker.svelte.d.ts

@@ -1,13 +0,0 @@
-import type { MarkerProps } from '../types/markers/props';
-import type { DotStyle, FontStyle } from '../types/plots/styling';
-interface Props extends MarkerProps<Record<string, any>> {
-    yProp?: string;
-    xProp?: string;
-    mode?: 'max' | 'min';
-    label?: string;
-    dotStyle?: DotStyle;
-    textStyle?: FontStyle;
-}
-declare const PeakMarker: import("svelte").Component<Props, {}, "">;
-type PeakMarker = ReturnType<typeof PeakMarker>;
-export default PeakMarker;

package/dist/markers/RuleMarker.svelte

@@ -1,24 +0,0 @@
-<script lang="ts">
-  import { RuleX, RuleY } from 'svelteplot';
-  import type { AxisValue } from '../types/layout/scales';
-  import type { StrokeStyle } from '../types/plots/styling';
-
-  /**
-   * A single vertical (`axis: 'x'`) or horizontal (`axis: 'y'`) reference
-   * line at `value` — shared by author-configured `'rule'` markers and
-   * `HoverMarker`'s crosshair. Falls back to `'currentColor'`/`1` when the
-   * caller supplies no style.
-   */
-  let { axis, value, style }: { axis: 'x' | 'y'; value: AxisValue; style?: StrokeStyle } = $props();
-
-  const RuleMark = $derived(axis === 'x' ? RuleX : RuleY);
-</script>
-
-<RuleMark
-  data={[{ v: value }]}
-  {...axis === 'x' ? { x: (d: { v: AxisValue }) => d.v } : { y: (d: { v: AxisValue }) => d.v }}
-  stroke={style?.stroke ?? 'currentColor'}
-  strokeWidth={style?.strokeWidth ?? 1}
-  strokeOpacity={style?.strokeOpacity ?? 1}
-  strokeDasharray={style?.strokeDasharray}
-/>

package/dist/markers/SphereMarker.svelte

@@ -1,15 +0,0 @@
-<script lang="ts">
-  import { Sphere } from 'svelteplot';
-  import type { GeoSphereMarkerConfig } from '../types/markers/geo';
-
-  /** Renders one `'sphere'` marker — the outer globe outline. */
-  let { marker }: { marker: GeoSphereMarkerConfig } = $props();
-</script>
-
-<Sphere
-  fill={marker.style?.fill}
-  fillOpacity={marker.style?.fillOpacity}
-  stroke={marker.style?.stroke ?? 'currentColor'}
-  strokeWidth={marker.style?.strokeWidth ?? 1}
-  style="vector-effect: non-scaling-stroke"
-/>

package/dist/markers/TextMarker.svelte

@@ -1,62 +0,0 @@
-<script lang="ts" generics="TData = Record<string, unknown>">
-  import { Text } from 'svelteplot';
-  import type { MarkerProps } from '../types/markers/props';
-  import type { AxisValue } from '../types/layout/scales';
-  import type { FontStyle } from '../types/plots/styling';
-
-  interface Props extends MarkerProps<TData> {
-    x?: AxisValue | ((d: TData) => AxisValue);
-    y?: AxisValue | ((d: TData) => AxisValue);
-    text?: string | ((d: TData) => string);
-    style?: FontStyle;
-  }
-
-  const {
-    data = [],
-    x,
-    y,
-    text = '',
-    style,
-  }: Props = $props();
-
-  const xAccessor = $derived(typeof x === 'function' ? x : () => x ?? 0);
-  const yAccessor = $derived(typeof y === 'function' ? y : () => y ?? 0);
-  const textAccessor = $derived(typeof text === 'function' ? text : () => text ?? '');
-  const displayData = $derived(data.length > 0 ? data : [{} as TData]);
-
-  const fill = $derived(style?.fill ?? 'currentColor');
-  const fontSize = $derived(style?.fontSize ?? 12);
-  const fontWeight = $derived(style?.fontWeight ?? 'normal');
-  const fontStyleProp = $derived(style?.fontStyle ?? 'normal');
-  // 'outside' is meant to be resolved per-point by the caller (see
-  // HoverMarker, which knows each point's signed x); a caller that passes it
-  // through unresolved falls back to 'start' rather than an invalid svelteplot value.
-  const textAnchor = $derived(style?.textAnchor === 'outside' ? 'start' : (style?.textAnchor ?? 'middle'));
-  const lineAnchor = $derived(style?.lineAnchor ?? 'middle');
-  const dx = $derived(style?.dx ?? 0);
-  const dy = $derived(style?.dy ?? 0);
-</script>
-
-{#if text}
-  <Text
-    data={displayData}
-    x={xAccessor}
-    y={yAccessor}
-    text={textAccessor}
-    {fill}
-    {fontSize}
-    {fontWeight}
-    fontStyle={fontStyleProp}
-    {textAnchor}
-    {lineAnchor}
-    lineHeight={style?.lineHeight}
-    rotate={style?.rotate}
-    stroke={style?.stroke}
-    strokeWidth={style?.strokeWidth}
-    paintOrder={style?.paintOrder}
-    {dx}
-    {dy}
-    class={style?.class}
-    textClass={style?.textClass}
-  />
-{/if}

package/dist/markers/VectorMarker.svelte

@@ -1,20 +0,0 @@
-<script lang="ts">
-  import { Vector } from 'svelteplot';
-  import type { GeoVectorMarkerConfig } from '../types/markers/geo';
-
-  /** Renders one `'vector'` marker — arrows/spikes at points. */
-  let { marker }: { marker: GeoVectorMarkerConfig } = $props();
-</script>
-
-<Vector
-  data={marker.data}
-  x={marker.x}
-  y={marker.y}
-  length={marker.length}
-  rotate={marker.rotate}
-  shape={marker.shape ?? 'arrow'}
-  anchor={marker.anchor}
-  fill={marker.style?.fill ?? 'currentColor'}
-  stroke={marker.style?.stroke}
-  strokeWidth={marker.style?.strokeWidth}
-/>

package/dist/plots/bar/ValueLabels.svelte

@@ -1,149 +0,0 @@
-<script lang="ts" generics="TData extends Record<string, unknown>">
-  import { Text } from 'svelteplot';
-  import { resolveAccessor } from '../utils/accessors';
-  import { disabledFillOverride } from '../utils/legendDisabled';
-  import { watchLabelOverflow } from '../utils/labelOverflow.svelte';
-  import { isGapValue } from '../utils/gaps';
-  import type { Series } from '../../types/plots/data/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';
-  import type { LegendDisabledStyle } from '../../types/layout/legend';
-  import type { MarginOverflow } from '../utils/labelOverflow.svelte';
-  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,
-    formatValue,
-    values,
-    axisColor,
-    disabled,
-    width,
-    height,
-    numericMargins,
-    onHoverSeries,
-    onHoverEnd,
-    onOverflow,
-  }: {
-    group: VisualGroup<Series<TData>, BarSegmentStyle>;
-    seriesIndex: number;
-    barLayout: BarLayout<TData>;
-    isHorizontal: boolean;
-    valAnchor: ValueAnchor;
-    formatValue: (value: number, seriesName: string) => string;
-    values: ValuesStyle | undefined;
-    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;
-    /** Reports how far this label overflows the plot's own content box, in pixels, on each side (0 = no overflow). */
-    onOverflow?: (overflow: MarginOverflow) => void;
-  } = $props();
-
-  const fillOverride = $derived(disabledFillOverride(disabled));
-  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;
-      return {
-        left: numericMargins.left,
-        right: width - numericMargins.right,
-        top: numericMargins.top,
-        bottom: height - numericMargins.bottom,
-      };
-    },
-    onOverflow: (overflow) => onOverflow?.(overflow),
-  });
-
-  const xFn = $derived(resolveAccessor(group.series.x));
-  const yFn = $derived(resolveAccessor(group.series.y));
-  // A gap row — missing data, whether or not `styles.gaps` fills it with a
-  // synthetic bar — never gets a value label, same as LinePlot's `lastPoints`.
-  const labelData = $derived(group.series.data.filter((d) => !isGapValue(yFn(d))));
-
-  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));
-  const font = $derived(values?.fontStyle);
-
-  // `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(font?.textAnchor === 'outside' ? undefined : font?.textAnchor);
-</script>
-
-<!-- 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 bind:this={groupEl} role="presentation" onpointerenter={onHoverSeries} onpointerleave={onHoverEnd}>
-  <Text
-    data={labelData}
-    {...isHorizontal ? { y: xFn, x: valueTextFn } : { x: xFn, y: valueTextFn }}
-    text={(d: TData) => formatValue(Number(yFn(d)), group.series.name)}
-    dx={font?.dx ?? (isHorizontal ? defaultOffset : groupOffset.dx)}
-    dy={font?.dy ?? (isHorizontal ? groupOffset.dy : defaultOffset)}
-    textAnchor={resolvedTextAnchor ?? (isHorizontal ? (valAnchor === 'outside' || valAnchor === 'end' ? 'start' : valAnchor === 'start' ? 'end' : 'middle') : 'middle')}
-    lineAnchor={font?.lineAnchor ?? (isHorizontal ? 'middle' : defaultLA)}
-    lineHeight={font?.lineHeight}
-    rotate={font?.rotate}
-    class={font?.class}
-    textClass={font?.textClass}
-    fill={font?.fill ?? axisColor}
-    fillOpacity={fillOverride?.fillOpacity}
-    fontSize={font?.fontSize ?? 12}
-    fontWeight={font?.fontWeight}
-    fontStyle={font?.fontStyle}
-    stroke={font?.stroke}
-    strokeWidth={font?.strokeWidth}
-    paintOrder={font?.paintOrder}
-  />
-</g>