@fundar/data-chart-telling 1.0.0 → 1.2.0

package/dist/markers/tick/TickMarker.svelte

@@ -10,35 +10,37 @@
 
 	const plot = usePlot();
 	const isHorizontal = $derived(plot.axes?.isHorizontal ?? false);
+	const TickMark = $derived(isHorizontal ? TickX : TickY);
 
 	const cfg = $derived(getConfiguration());
 	const data = $derived(marker.data ?? []);
 	const channelStroke = $derived(MarkerChannels.buildFill(data, marker.color, marker.scales, cfg));
 	const stroke = $derived(channelStroke ?? marker.styles?.stroke ?? 'currentColor');
+
+	/**
+	 * A tick across a band axis spans the whole band, whatever `tickLength` says -
+	 * svelteplot reads it only off a band-less axis. A fixed `tickLength` there is
+	 * made true by insetting the tick from both edges of its band.
+	 */
+	const inset = $derived.by(() => {
+		const length = marker.tickLength;
+		const across = plot.svelteplot.scales[isHorizontal ? 'y' : 'x'];
+		if (typeof length !== 'number' || across.type !== 'band') return undefined;
+		return Math.max(0, (across.fn.bandwidth() - length) / 2);
+	});
+	/** svelteplot's tick marks read `inset` though their types do not list it. */
+	const insetProps = $derived((inset === undefined ? {} : { inset }) as Record<string, unknown>);
 </script>
 
-{#if isHorizontal}
-	<TickX
-		{data}
-		x={marker.x}
-		y={marker.y}
-		tickLength={marker.tickLength}
-		{stroke}
-		strokeWidth={marker.styles?.strokeWidth}
-		strokeOpacity={marker.styles?.strokeOpacity}
-		strokeDasharray={marker.styles?.strokeDasharray}
-		strokeLinecap={marker.styles?.strokeLinecap}
-	/>
-{:else}
-	<TickY
-		{data}
-		x={marker.x}
-		y={marker.y}
-		tickLength={marker.tickLength}
-		{stroke}
-		strokeWidth={marker.styles?.strokeWidth}
-		strokeOpacity={marker.styles?.strokeOpacity}
-		strokeDasharray={marker.styles?.strokeDasharray}
-		strokeLinecap={marker.styles?.strokeLinecap}
-	/>
-{/if}
+<TickMark
+	{data}
+	x={marker.x}
+	y={marker.y}
+	tickLength={marker.tickLength}
+	{...insetProps}
+	{stroke}
+	strokeWidth={marker.styles?.strokeWidth}
+	strokeOpacity={marker.styles?.strokeOpacity}
+	strokeDasharray={marker.styles?.strokeDasharray}
+	strokeLinecap={marker.styles?.strokeLinecap}
+/>

package/dist/markers/utils/MarkerChannels.d.ts

@@ -1,4 +1,5 @@
 import type { ChannelScalesConfig } from '../../types/layout/scales';
+import type { ProcessedData } from '../../types/phases';
 import type { SymbolType } from '../../types/plots/constants';
 import type { PlotStylesConfig } from '../../types/configuration/styling';
 /** One resolved opacity bucket: every row in `data` renders at exactly `value`. */
@@ -11,6 +12,29 @@ export type OpacityBucket<TData> = {
  * over its rows, shared by every marker kind that intersects `CommonMarkerConfig`.
  */
 export declare class MarkerChannels {
+    /**
+     * The scales a marker with none of its own draws with: the plot's, except
+     * a numeric color `domain` - it spans the plot's own values, so the
+     * marker's own values would all land at one end of it. The scheme (and
+     * pivot) carry over; the domain is read from the marker's own rows.
+     */
+    static inheritScales(own: ChannelScalesConfig | undefined, plot: ChannelScalesConfig | undefined): ChannelScalesConfig | undefined;
+    /** `markers`, each `dot` with no scales of its own carrying the plot's ({@link inheritScales}). */
+    static inheritAll<TMarker extends {
+        type: string;
+        scales?: ChannelScalesConfig;
+    }>(markers: TMarker[], plot: ChannelScalesConfig | undefined): TMarker[];
+    /**
+     * `markers`, each `bollinger` that draws the plot's own rows (it sets no `data`)
+     * and no `x` or `y` of its own, reading the plot's: they are the same rows, so
+     * the same channels place them.
+     */
+    static inheritPosition<TMarker extends {
+        type: string;
+        data?: unknown;
+        x?: unknown;
+        y?: unknown;
+    }>(markers: TMarker[], processed: ProcessedData | undefined): TMarker[];
     /**
      * Resolves a `CommonMarkerConfig` pair into a per-row fill accessor, or
      * `undefined` when `color` is unset (caller falls back to its own flat

package/dist/markers/utils/MarkerChannels.js

@@ -1,11 +1,45 @@
-import { resolveColorScale } from '../../utils/color';
-import { resolveOpacityScale } from '../../utils/opacity';
-import { resolveSymbolScale } from '../../utils/symbol';
+import { resolveAccessor } from '../../utils/accessors';
+import { ColorRamp } from '../../utils/color';
+import { OpacityScale } from '../../utils/OpacityScale';
+import { SymbolScale } from '../../utils/SymbolScale';
 /**
  * What a marker's own `color`, `symbol` and `opacity` channels resolve to,
  * over its rows, shared by every marker kind that intersects `CommonMarkerConfig`.
  */
 export class MarkerChannels {
+    /**
+     * The scales a marker with none of its own draws with: the plot's, except
+     * a numeric color `domain` - it spans the plot's own values, so the
+     * marker's own values would all land at one end of it. The scheme (and
+     * pivot) carry over; the domain is read from the marker's own rows.
+     */
+    static inheritScales(own, plot) {
+        if (own || !plot?.color)
+            return own ?? plot;
+        const { domain, ...color } = plot.color;
+        const numeric = Array.isArray(domain) && domain.every((v) => typeof v === 'number');
+        return { ...plot, color: numeric ? color : plot.color };
+    }
+    /** `markers`, each `dot` with no scales of its own carrying the plot's ({@link inheritScales}). */
+    static inheritAll(markers, plot) {
+        return markers.map((marker) => marker.type === 'dot' && !marker.scales
+            ? { ...marker, scales: MarkerChannels.inheritScales(undefined, plot) }
+            : marker);
+    }
+    /**
+     * `markers`, each `bollinger` that draws the plot's own rows (it sets no `data`)
+     * and no `x` or `y` of its own, reading the plot's: they are the same rows, so
+     * the same channels place them.
+     */
+    static inheritPosition(markers, processed) {
+        if (!processed)
+            return markers;
+        const read = (channel) => channel === undefined ? undefined : resolveAccessor(channel);
+        const plot = { x: read(processed.channels.x), y: read(processed.channels.y) };
+        return markers.map((marker) => marker.type === 'bollinger' && marker.data === undefined
+            ? { ...marker, x: marker.x ?? plot.x, y: marker.y ?? plot.y }
+            : marker);
+    }
     /**
      * Resolves a `CommonMarkerConfig` pair into a per-row fill accessor, or
      * `undefined` when `color` is unset (caller falls back to its own flat
@@ -29,8 +63,9 @@ export class MarkerChannels {
         const domain = allNumeric
             ? [Math.min(...rawVals.map(Number)), Math.max(...rawVals.map(Number))]
             : [...new Set(rawVals.map(String))];
-        const defaultScheme = allNumeric ? [cfg.continuous.min, cfg.continuous.max] : cfg.palette;
-        const colorScale = resolveColorScale(scales?.color, domain, defaultScheme);
+        const colorScale = allNumeric
+            ? ColorRamp.continuous(cfg, scales?.color, domain)
+            : ColorRamp.resolve(scales?.color, domain, cfg.palette);
         return (d) => colorScale(colorFn(d));
     }
     /**
@@ -51,7 +86,7 @@ export class MarkerChannels {
         ];
         if (!domain.length)
             return undefined;
-        const scale = resolveSymbolScale(scales?.symbol, domain, cfg.symbols);
+        const scale = SymbolScale.resolve(scales?.symbol, domain, cfg.symbols);
         return (d) => scale(symbolFn(d));
     }
     /**
@@ -83,7 +118,7 @@ export class MarkerChannels {
         const domain = allNumeric
             ? [Math.min(...rawVals.map(Number)), Math.max(...rawVals.map(Number))]
             : [...new Set(rawVals.map(String))];
-        const scale = resolveOpacityScale(scales?.opacity, domain, cfg.continuous.opacityRange);
+        const scale = OpacityScale.resolve(scales?.opacity, domain, cfg.continuous.opacityRange);
         const buckets = new Map();
         for (const d of data) {
             const resolved = scale(opacityFn(d));

package/dist/markers/utils/RowOffset.d.ts

@@ -0,0 +1,23 @@
+import type { RowOffset as RowOffsetConfig } from '../../types/markers/channels/commonMarkerConfigWithRowOffset';
+type Offsets = {
+    dx?: RowOffsetConfig;
+    dy?: RowOffsetConfig;
+};
+type Pixels = {
+    dx: number;
+    dy: number;
+};
+/**
+ * A marker's `dx`/`dy`: numbers move the whole marker (drawn once by
+ * `MarkerOffset`), functions move each row (drawn by the marker itself, with
+ * `RowOffsetMarks`), so no part is applied twice.
+ */
+export declare class RowOffset {
+    /** The numeric part, for the whole marker; a part left unset takes `fallback`, a function counts as none. */
+    static whole(marker: Offsets, fallback?: Pixels): Pixels;
+    /** Whether any part of the offset is a function of the row. */
+    static isPerRow(marker: Offsets): boolean;
+    /** The functional part, for one row. */
+    static ofRow(marker: Offsets, row: unknown): Pixels;
+}
+export {};

package/dist/markers/utils/RowOffset.js

@@ -0,0 +1,23 @@
+/**
+ * A marker's `dx`/`dy`: numbers move the whole marker (drawn once by
+ * `MarkerOffset`), functions move each row (drawn by the marker itself, with
+ * `RowOffsetMarks`), so no part is applied twice.
+ */
+export class RowOffset {
+    /** The numeric part, for the whole marker; a part left unset takes `fallback`, a function counts as none. */
+    static whole(marker, fallback = { dx: 0, dy: 0 }) {
+        const part = (own, otherwise) => typeof own === 'function' ? 0 : (own ?? otherwise);
+        return { dx: part(marker.dx, fallback.dx), dy: part(marker.dy, fallback.dy) };
+    }
+    /** Whether any part of the offset is a function of the row. */
+    static isPerRow(marker) {
+        return typeof marker.dx === 'function' || typeof marker.dy === 'function';
+    }
+    /** The functional part, for one row. */
+    static ofRow(marker, row) {
+        return {
+            dx: typeof marker.dx === 'function' ? (marker.dx(row) ?? 0) : 0,
+            dy: typeof marker.dy === 'function' ? (marker.dy(row) ?? 0) : 0
+        };
+    }
+}

package/dist/markers/utils/RowOffsetMarks.svelte

@@ -0,0 +1,30 @@
+<script lang="ts" generics="TRow">
+	import type { Snippet } from 'svelte';
+	import { RowOffset } from './RowOffset';
+	import type { RowOffset as RowOffsetConfig } from '../../types/markers/channels/commonMarkerConfigWithRowOffset';
+
+	/**
+	 * Draws a marker's rows through `mark`, each moved by the marker's per-row
+	 * `dx`/`dy` (a function of the row). A fixed offset is not applied here -
+	 * `MarkerOffset` moves the whole marker. With no function offset, the rows
+	 * are drawn together as they are.
+	 */
+	let {
+		marker,
+		rows,
+		mark
+	}: {
+		marker: { dx?: RowOffsetConfig; dy?: RowOffsetConfig };
+		rows: TRow[];
+		mark: Snippet<[TRow[]]>;
+	} = $props();
+</script>
+
+{#if RowOffset.isPerRow(marker)}
+	{#each rows as row, index (index)}
+		{@const { dx, dy } = RowOffset.ofRow(marker, row)}
+		<g transform="translate({dx},{dy})">{@render mark([row])}</g>
+	{/each}
+{:else}
+	{@render mark(rows)}
+{/if}

package/dist/markers/utils/RowOffsetMarks.svelte.d.ts

@@ -0,0 +1,33 @@
+import type { Snippet } from 'svelte';
+import type { RowOffset as RowOffsetConfig } from '../../types/markers/channels/commonMarkerConfigWithRowOffset';
+declare function $$render<TRow>(): {
+    props: {
+        marker: {
+            dx?: RowOffsetConfig;
+            dy?: RowOffsetConfig;
+        };
+        rows: TRow[];
+        mark: Snippet<[TRow[]]>;
+    };
+    exports: {};
+    bindings: "";
+    slots: {};
+    events: {};
+};
+declare class __sveltets_Render<TRow> {
+    props(): ReturnType<typeof $$render<TRow>>['props'];
+    events(): ReturnType<typeof $$render<TRow>>['events'];
+    slots(): ReturnType<typeof $$render<TRow>>['slots'];
+    bindings(): "";
+    exports(): {};
+}
+interface $$IsomorphicComponent {
+    new <TRow>(options: import('svelte').ComponentConstructorOptions<ReturnType<__sveltets_Render<TRow>['props']>>): import('svelte').SvelteComponent<ReturnType<__sveltets_Render<TRow>['props']>, ReturnType<__sveltets_Render<TRow>['events']>, ReturnType<__sveltets_Render<TRow>['slots']>> & {
+        $$bindings?: ReturnType<__sveltets_Render<TRow>['bindings']>;
+    } & ReturnType<__sveltets_Render<TRow>['exports']>;
+    <TRow>(internal: unknown, props: ReturnType<__sveltets_Render<TRow>['props']> & {}): ReturnType<__sveltets_Render<TRow>['exports']>;
+    z_$$bindings?: ReturnType<__sveltets_Render<any>['bindings']>;
+}
+declare const RowOffsetMarks: $$IsomorphicComponent;
+type RowOffsetMarks<TRow> = InstanceType<typeof RowOffsetMarks<TRow>>;
+export default RowOffsetMarks;

package/dist/markers/utils/RowStroke.d.ts

@@ -0,0 +1,31 @@
+import type { StrokeStyle } from '../../types/plots/styling';
+/** A stroke channel per row: a field key of the row, or a function of it. */
+type RowChannel<T> = string | ((d: never) => T) | undefined;
+/**
+ * The stroke of a line-like marker that takes it row by row (a `rule`, an
+ * `arrow`): each of `stroke`, `strokeWidth` and `strokeOpacity` is a field of
+ * the row or a function of it, else the marker's own `styles`, else a default.
+ * A color and an opacity per row are drawn as they are - svelteplot would map
+ * them through its own color and opacity scales.
+ */
+export declare class RowStroke {
+    #private;
+    /** The props a mark takes for `channels`, over `styles` and the given `fallback`s. */
+    static of(channels: {
+        stroke?: RowChannel<string | undefined>;
+        strokeWidth?: RowChannel<number>;
+        strokeOpacity?: RowChannel<number>;
+    }, styles: StrokeStyle | undefined, fallback: {
+        stroke: string;
+        strokeWidth?: number;
+        strokeOpacity?: number;
+    }): {
+        stroke: string | {
+            value: (d: Record<string, unknown>) => string | undefined;
+            scale: null;
+        };
+        strokeWidth: number | ((d: Record<string, unknown>) => number) | undefined;
+        strokeOpacity: never;
+    };
+}
+export {};

package/dist/markers/utils/RowStroke.js

@@ -0,0 +1,28 @@
+/**
+ * The stroke of a line-like marker that takes it row by row (a `rule`, an
+ * `arrow`): each of `stroke`, `strokeWidth` and `strokeOpacity` is a field of
+ * the row or a function of it, else the marker's own `styles`, else a default.
+ * A color and an opacity per row are drawn as they are - svelteplot would map
+ * them through its own color and opacity scales.
+ */
+export class RowStroke {
+    /** A per-row channel as the function svelteplot reads. */
+    static #accessor(channel) {
+        return typeof channel === 'string'
+            ? (d) => d[channel]
+            : channel;
+    }
+    /** The props a mark takes for `channels`, over `styles` and the given `fallback`s. */
+    static of(channels, styles, fallback) {
+        const color = RowStroke.#accessor(channels.stroke);
+        const width = RowStroke.#accessor(channels.strokeWidth);
+        const opacity = RowStroke.#accessor(channels.strokeOpacity);
+        return {
+            stroke: color ? { value: color, scale: null } : (styles?.stroke ?? fallback.stroke),
+            strokeWidth: width ?? styles?.strokeWidth ?? fallback.strokeWidth,
+            strokeOpacity: (opacity
+                ? { value: opacity, scale: null }
+                : (styles?.strokeOpacity ?? fallback.strokeOpacity))
+        };
+    }
+}

package/dist/markers/violin/ViolinMarker.svelte

@@ -0,0 +1,75 @@
+<script lang="ts">
+	import { usePlot } from '../../layout/plot/usePlot';
+	import { getConfiguration } from '../../configuration/config.svelte';
+	import { resolveAccessor } from '../../utils/accessors';
+	import { ViolinProfiles } from './ViolinProfiles';
+	import type { ViolinMarkerConfig } from '../../types/markers/common';
+	import type { ProcessedRow } from '../../types/phases';
+
+	/**
+	 * Renders one `'violin'` marker: for each category of its rows, the density
+	 * curve mirrored around the middle of the category's band, or of the share of
+	 * it the marker's `slot` takes. The curve is drawn on the plot's own scales;
+	 * the plot's axes say which of `x`/`y` holds the category.
+	 */
+	let { marker }: { marker: ViolinMarkerConfig } = $props();
+
+	const plot = usePlot();
+	const cfg = $derived(getConfiguration());
+	const isHorizontal = $derived(plot.axes?.isHorizontal ?? false);
+	const categoryScale = $derived(
+		isHorizontal ? plot.svelteplot.scales.y : plot.svelteplot.scales.x
+	);
+	const valueScale = $derived(isHorizontal ? plot.svelteplot.scales.x : plot.svelteplot.scales.y);
+
+	const data = $derived((marker.data ?? []) as ProcessedRow[]);
+	const profiles = $derived(
+		ViolinProfiles.of(
+			data,
+			{
+				category: resolveAccessor((isHorizontal ? marker.y : marker.x) as never),
+				value: resolveAccessor((isHorizontal ? marker.x : marker.y) as never)
+			},
+			{ kernel: marker.kernel, bandwidth: marker.bandwidth, trim: marker.trim }
+		)
+	);
+
+	const slotIndex = $derived(marker.slot?.index ?? 0);
+	const slotCount = $derived(marker.slot?.count ?? 1);
+	const bandwidth = $derived(categoryScale?.type === 'band' ? categoryScale.fn.bandwidth() : 0);
+	const share = $derived(bandwidth / slotCount);
+
+	/** The pixel point at `along` the value axis and `across` the category axis. */
+	const point = (across: number, along: number): [number, number] =>
+		isHorizontal ? [along, across] : [across, along];
+	const at = (value: number) => Number(valueScale?.fn?.(value as never));
+
+	const shapes = $derived.by(() => {
+		if (categoryScale?.type !== 'band' || !valueScale?.fn) return [];
+		return profiles.flatMap((profile) => {
+			const start = Number(categoryScale.fn(profile.category as never));
+			if (!Number.isFinite(start)) return [];
+			const center = start + share * slotIndex + share / 2;
+			const full = marker.peak ?? Math.max(...profile.curve.map((p) => p.density));
+			const half = (density: number) => (full > 0 ? (density / full) * (share / 2) : 0);
+			const side = (sign: 1 | -1) =>
+				profile.curve.map((p) => point(center + sign * half(p.density), at(p.value)));
+			const outline = [...side(-1), ...side(1).reverse()];
+			return [outline.map(([x, y], i) => `${i ? 'L' : 'M'}${x},${y}`).join('') + 'Z'];
+		});
+	});
+</script>
+
+<g class="dct-violin">
+	{#each shapes as d, i (i)}
+		<path
+			{d}
+			fill={marker.styles?.fill}
+			fill-opacity={marker.styles?.fillOpacity ?? cfg.violin.fillOpacity}
+			stroke={marker.styles?.stroke}
+			stroke-width={marker.styles?.strokeWidth}
+			stroke-opacity={marker.styles?.strokeOpacity}
+			stroke-dasharray={marker.styles?.strokeDasharray}
+		/>
+	{/each}
+</g>

package/dist/markers/violin/ViolinMarker.svelte.d.ts

@@ -0,0 +1,7 @@
+import type { ViolinMarkerConfig } from '../../types/markers/common';
+type $$ComponentProps = {
+    marker: ViolinMarkerConfig;
+};
+declare const ViolinMarker: import("svelte").Component<$$ComponentProps, {}, "">;
+type ViolinMarker = ReturnType<typeof ViolinMarker>;
+export default ViolinMarker;

package/dist/markers/violin/ViolinProfiles.d.ts

@@ -0,0 +1,29 @@
+import type { ProcessedRow } from '../../types/phases';
+import type { DensityKernel } from '../../types/transforms/density';
+/** One violin: a category's density curve. */
+export type ViolinProfile = {
+    category: unknown;
+    /** The density estimate, in order along the value axis. */
+    curve: {
+        value: number;
+        density: number;
+    }[];
+};
+/** How the density of each category is estimated. */
+export type ViolinEstimate = {
+    kernel?: DensityKernel;
+    bandwidth?: number;
+    /** Keeps each curve within its values' own extent. Defaults to `true`. */
+    trim?: boolean;
+};
+/** The violins of a set of rows, one per category. */
+export declare class ViolinProfiles {
+    #private;
+    /** One profile per category of `rows` with at least two values, in the order the rows first reach it. */
+    static of(rows: ProcessedRow[], read: {
+        category: (row: ProcessedRow) => unknown;
+        value: (row: ProcessedRow) => unknown;
+    }, estimate?: ViolinEstimate): ViolinProfile[];
+    /** The densest point of any of `profiles`, for violins that share one density scale. */
+    static peak(profiles: ViolinProfile[]): number;
+}

package/dist/markers/violin/ViolinProfiles.js

@@ -0,0 +1,55 @@
+import { Transforms } from '../../phases/transforms/Transforms';
+import { resolveAccessor } from '../../utils/accessors';
+import { isGapValue } from '../../plots/utils/gaps';
+/** The violins of a set of rows, one per category. */
+export class ViolinProfiles {
+    /** One profile per category of `rows` with at least two values, in the order the rows first reach it. */
+    static of(rows, read, estimate = {}) {
+        const groups = new Map();
+        for (const row of rows) {
+            const raw = read.value(row);
+            if (isGapValue(raw))
+                continue;
+            const value = Number(raw);
+            if (!Number.isFinite(value))
+                continue;
+            const category = read.category(row);
+            const key = String(category);
+            const group = groups.get(key);
+            if (group) {
+                group.rows.push(row);
+                group.values.push(value);
+            }
+            else
+                groups.set(key, { category, rows: [row], values: [value] });
+        }
+        return [...groups.values()].flatMap(({ category, rows: own, values }) => {
+            if (values.length < 2)
+                return [];
+            const extent = [Math.min(...values), Math.max(...values)];
+            const curve = ViolinProfiles.#curve(own, read.value, estimate, extent);
+            return curve.length < 2 ? [] : [{ category, curve }];
+        });
+    }
+    /** The densest point of any of `profiles`, for violins that share one density scale. */
+    static peak(profiles) {
+        return Math.max(0, ...profiles.flatMap((p) => p.curve.map((point) => point.density)));
+    }
+    static #curve(rows, value, estimate, extent) {
+        const trim = estimate.trim ?? true;
+        const result = Transforms.run({
+            type: 'densityY',
+            data: rows,
+            y: value,
+            kernel: estimate.kernel,
+            bandwidth: estimate.bandwidth,
+            trim
+        });
+        const along = resolveAccessor(result.y);
+        const density = resolveAccessor(result.x);
+        return result.data
+            .map((row) => ({ value: Number(along(row)), density: Number(density(row)) }))
+            .map((p) => (trim ? { ...p, value: Math.min(Math.max(p.value, extent[0]), extent[1]) } : p))
+            .filter((p) => Number.isFinite(p.value) && Number.isFinite(p.density));
+    }
+}

package/dist/markers/waffle/WaffleMarker.svelte

@@ -10,6 +10,7 @@
 
 	const plot = usePlot();
 	const isHorizontal = $derived(plot.axes?.isHorizontal ?? false);
+	const WaffleMark = $derived(isHorizontal ? WaffleX : WaffleY);
 
 	const cfg = $derived(getConfiguration());
 	const data = $derived(marker.data ?? []);
@@ -17,40 +18,19 @@
 	const fill = $derived(channelFill ?? marker.styles?.fill ?? cfg.palette[0]);
 </script>
 
-{#if isHorizontal}
-	<WaffleX
-		{data}
-		x={marker.x}
-		x1={marker.x1}
-		x2={marker.x2}
-		y={marker.y}
-		unit={marker.unit}
-		multiple={marker.multiple}
-		gap={marker.gap}
-		round={marker.round}
-		borderRadius={marker.styles?.borderRadius}
-		{fill}
-		fillOpacity={marker.styles?.fillOpacity}
-		stroke={marker.styles?.stroke}
-		strokeWidth={marker.styles?.strokeWidth}
-		strokeOpacity={marker.styles?.strokeOpacity}
-	/>
-{:else}
-	<WaffleY
-		{data}
-		x={marker.x}
-		y={marker.y}
-		y1={marker.y1}
-		y2={marker.y2}
-		unit={marker.unit}
-		multiple={marker.multiple}
-		gap={marker.gap}
-		round={marker.round}
-		borderRadius={marker.styles?.borderRadius}
-		{fill}
-		fillOpacity={marker.styles?.fillOpacity}
-		stroke={marker.styles?.stroke}
-		strokeWidth={marker.styles?.strokeWidth}
-		strokeOpacity={marker.styles?.strokeOpacity}
-	/>
-{/if}
+<WaffleMark
+	{data}
+	x={marker.x}
+	y={marker.y}
+	{...isHorizontal ? { x1: marker.x1, x2: marker.x2 } : { y1: marker.y1, y2: marker.y2 }}
+	unit={marker.unit}
+	multiple={marker.multiple}
+	gap={marker.gap}
+	round={marker.round}
+	borderRadius={marker.styles?.borderRadius}
+	{fill}
+	fillOpacity={marker.styles?.fillOpacity}
+	stroke={marker.styles?.stroke}
+	strokeWidth={marker.styles?.strokeWidth}
+	strokeOpacity={marker.styles?.strokeOpacity}
+/>

package/dist/phases/Pipeline.d.ts

@@ -15,6 +15,11 @@ export type AxisPipelineProps<TData extends Record<string, unknown>> = {
     opacity?: unknown;
     r?: unknown;
     symbol?: unknown;
+    lower?: Accessor<TData, unknown>;
+    upper?: Accessor<TData, unknown>;
+    error?: Accessor<TData, unknown>;
+    target?: unknown;
+    ranges?: unknown[];
     segments?: unknown;
     styles?: {
         gaps?: unknown;

package/dist/phases/Pipeline.js

@@ -9,6 +9,7 @@ import { StylesPhase } from './styles/StylesPhase';
 import { MarkersPhase } from './markers/MarkersPhase';
 import { TooltipPhase } from './tooltip/TooltipPhase';
 import { HoverPhase } from './hover/HoverPhase';
+import { HoverSettings } from '../layout/hover/HoverSettings';
 import { PlotInteraction } from '../layout/interaction/PlotInteraction.svelte';
 import { DEFAULT_CONFIG } from '../configuration/config.svelte';
 /**
@@ -77,7 +78,7 @@ export class Pipeline {
             new FacetPhase(),
             new DataPhase(kind.data),
             new MappingPhase(kind.mapping),
-            new TransformsPhase(kind.transforms),
+            new TransformsPhase(kind.transforms, kind.data?.segments?.connect),
             new StatisticsPhase(kind.statistics),
             new SharedScalesPhase(kind.sharedScales, scales),
             scales,
@@ -143,7 +144,7 @@ export class Pipeline {
             return fixed;
         const upToData = this.stages.filter((s) => s.phase === 'data');
         const state = Pipeline.#through(upToData, this.#seed(props), Pipeline.#ctxFor(cfg, null));
-        return HoverPhase.strategyOf(state);
+        return HoverSettings.strategyOf(state.axes);
     }
     /** The plot's default `timeline.filterMode`. */
     get filterMode() {
@@ -209,6 +210,11 @@ export class Pipeline {
             opacity: props.opacity,
             r: props.r,
             symbol: props.symbol,
+            lower: props.lower,
+            upper: props.upper,
+            error: props.error,
+            target: props.target,
+            ranges: props.ranges,
             segments: props.segments ?? {},
             styles: props.styles,
             gaps: props.styles?.gaps,