@fundar/data-chart-telling 1.0.0 → 1.1.0

package/dist/layout/timeline/TimelineLayout.svelte

@@ -3,9 +3,11 @@
 	import { resolveAccessor } from '../../plots/utils/accessors';
 	import TimelineFrame from './TimelineFrame.svelte';
 	import { TimelineSteps } from './TimelineSteps';
+	import { TimelineTime } from './TimelineTime';
 	import { Interpolation } from '../../utils/Interpolation';
 	import type {
 		Orientation,
+		TimeInput,
 		TimeValue,
 		TimelineChildSnippet,
 		TimelineInterpolation
@@ -22,6 +24,7 @@
 	let {
 		data,
 		accessor,
+		dateFormat,
 		progress,
 		values,
 		orientation = 'vertical',
@@ -35,28 +38,44 @@
 		child
 	}: {
 		data: TRow[];
-		accessor: Accessor<TRow, TimeValue>;
+		accessor: Accessor<TRow, TimeInput>;
+		/** How a non-ISO date string reads. */
+		dateFormat?: string;
 		progress: number;
-		values?: TimeValue[];
+		values?: TimeInput[];
 		orientation?: Orientation;
 		show?: boolean;
 		thickness?: number;
 		filterMode?: 'exact' | 'upTo';
 		interpolate?: TimelineInterpolation<TRow>;
-		/** Told the steps, whenever they change - for whoever else draws or drives the timeline. */
-		onsteps?: (values: TimeValue[]) => void;
+		/** Told the steps, and whether they are dates, when they change. */
+		onsteps?: (values: TimeValue[], temporal: boolean) => void;
 		width: number;
 		height: number;
 		child: TimelineChildSnippet<TRow>;
 	} = $props();
 
-	const getTime = $derived(resolveAccessor<TRow>(accessor));
+	const time = $derived(new TimelineTime(dateFormat));
+	const getRaw = $derived(resolveAccessor<TRow>(accessor) as (row: TRow) => unknown);
+	/** A row's step, or `undefined` when its value reads as none. */
+	const getTime = $derived((row: TRow) => time.toTime(getRaw(row)));
+	/** The rows with a step; one without shows at every step. */
+	const timed = $derived(data.filter((row) => getTime(row) !== undefined));
+	const untimed = $derived(data.filter((row) => getTime(row) === undefined));
 
-	const steps = $derived(TimelineSteps.of(values, data, getTime));
+	const steps = $derived(
+		TimelineSteps.of(
+			values?.map((value) => time.toTime(value)).filter((v): v is TimeValue => v !== undefined),
+			timed,
+			getTime as (row: TRow) => TimeValue
+		)
+	);
+	const temporal = $derived(time.isTemporal(values?.length ? values : timed.map(getRaw)));
 
 	$effect(() => {
 		const found = steps.values;
-		untrack(() => onsteps?.(found));
+		const dates = temporal;
+		untrack(() => onsteps?.(found, dates));
 	});
 
 	const progressEasingFn = $derived(Interpolation.buildEasing(interpolate?.progressEasing));
@@ -77,12 +96,19 @@
 			);
 			return upper;
 		}
-		return { ...upper, [accessor]: x, [valueField]: value } as TRow;
+		return {
+			...upper,
+			[accessor]: time.toValueLike(x, upper[accessor]),
+			[valueField]: value
+		} as TRow;
 	}
 
 	const filtered = $derived.by(() => {
 		const discrete = () =>
-			data.filter((d) => TimelineSteps.matches(getTime(d), selectedValue, filterMode));
+			data.filter((d) => {
+				const at = getTime(d);
+				return at === undefined || TimelineSteps.matches(at, selectedValue, filterMode);
+			});
 
 		if (!interpolate) return discrete();
 		if (!interpolate.value) {
@@ -96,14 +122,14 @@
 		const getValue = resolveAccessor<TRow>(interpolate.value) as (d: TRow) => number;
 		const create = interpolate.create ?? defaultCreate;
 
-		const groups = Map.groupBy(data, (row) => String(getKey(row)));
+		const groups = Map.groupBy(timed, (row) => String(getKey(row)));
 
-		const result: TRow[] = [];
+		const result: TRow[] = [...untimed];
 		for (const rows of groups.values()) {
 			const tweened = Interpolation.tweenSeries({
 				rows,
 				x: currentTime,
-				getTime,
+				getTime: getTime as (row: TRow) => TimeValue,
 				getValue,
 				create,
 				segmentEasing: segmentEasingFn

package/dist/layout/timeline/TimelineLayout.svelte.d.ts

@@ -1,18 +1,20 @@
-import type { Orientation, TimeValue, TimelineChildSnippet, TimelineInterpolation } from '../../types/layout/timeline';
+import type { Orientation, TimeInput, TimeValue, TimelineChildSnippet, TimelineInterpolation } from '../../types/layout/timeline';
 import type { Accessor } from '../../types/plots/data/common';
 declare function $$render<TRow extends Record<string, unknown>>(): {
     props: {
         data: TRow[];
-        accessor: Accessor<TRow, TimeValue>;
+        accessor: Accessor<TRow, TimeInput>;
+        /** How a non-ISO date string reads. */
+        dateFormat?: string;
         progress: number;
-        values?: TimeValue[];
+        values?: TimeInput[];
         orientation?: Orientation;
         show?: boolean;
         thickness?: number;
         filterMode?: "exact" | "upTo";
         interpolate?: TimelineInterpolation<TRow>;
-        /** Told the steps, whenever they change - for whoever else draws or drives the timeline. */
-        onsteps?: (values: TimeValue[]) => void;
+        /** Told the steps, and whether they are dates, when they change. */
+        onsteps?: (values: TimeValue[], temporal: boolean) => void;
         width: number;
         height: number;
         child: TimelineChildSnippet<TRow>;

package/dist/layout/timeline/TimelineRule.svelte

@@ -28,6 +28,7 @@
 			<Timeline
 				currentValue={timeline.value}
 				values={timeline.steps}
+				format={timeline.format}
 				orientation={timeline.orientation}
 				width={measuredWidth}
 				height={measuredHeight}

package/dist/layout/timeline/TimelineState.svelte.d.ts

@@ -1,10 +1,12 @@
-import type { PlayerConfig, PlayerControl, Orientation, TimeValue, TimelineCallbacks, TimelineType } from '../../types/layout/timeline';
+import type { PlayerConfig, PlayerControl, Orientation, TimeInput, TimeValue, TimelineStep, TimelineCallbacks, TimelineType } from '../../types/layout/timeline';
 /** What a {@link TimelineState} reads from the timeline's owner, each time it needs it. */
 export type TimelineSettings = TimelineCallbacks & {
     type?: TimelineType;
     player?: PlayerConfig;
     progress?: number;
-    values?: TimeValue[];
+    values?: TimeInput[];
+    /** How a non-ISO date string in `values` reads. */
+    dateFormat?: string;
     show?: boolean;
     orientation?: Orientation;
     thickness?: number;
@@ -37,8 +39,10 @@ export declare class TimelineState {
     get shown(): boolean;
     /** The steps it moves across, ascending: the owner's `values`, else those its plots report. */
     get steps(): TimeValue[];
-    /** Reports the steps the plots found in their rows. */
-    setSteps(values: TimeValue[]): void;
+    /** Whether the steps are dates. */
+    get temporal(): boolean;
+    /** Reports the steps the plots found in their rows, and whether they are dates. */
+    setSteps(values: TimeValue[], temporal?: boolean): void;
     /** The position across the steps, `0`-`1`. */
     get progress(): number;
     /** The step the position lands on, as an index; `-1` without steps. */
@@ -55,8 +59,12 @@ export declare class TimelineState {
     get speeds(): number[];
     /** Milliseconds each step lasts at speed `1`. */
     get stepDuration(): number;
-    /** How the current step reads. */
+    /** How a step reads: the player's `format`, else a date label or the number. */
     get format(): (value: TimeValue) => string;
+    /** A step as authors see it. */
+    step(value: TimeValue): TimelineStep;
+    /** An author's step as the timeline's own, or `undefined` when it reads as none. */
+    timeOf(value: TimeInput): TimeValue | undefined;
     /** Moves to `progress` (`0`-`1`), and tells the owner. */
     seek(progress: number): void;
     /** Moves to the step at `index`. */

package/dist/layout/timeline/TimelineState.svelte.js

@@ -1,6 +1,7 @@
 import { getContext, setContext, untrack } from 'svelte';
 import { getConfiguration } from '../../configuration/config.svelte';
 import { TimelineSteps } from './TimelineSteps';
+import { TimelineTime } from './TimelineTime';
 const TIMELINE_KEY = Symbol('dct-timeline');
 /** The longest a frame counts for while playing, so a hidden tab doesn't jump ahead when it comes back. */
 const MAX_FRAME_MS = 250;
@@ -17,6 +18,7 @@ const MAX_FRAME_MS = 250;
 export class TimelineState {
     #settings;
     #steps = $state([]);
+    #temporal = $state(false);
     #own = $state(null);
     #playing = $state(false);
     #loop = $state(false);
@@ -58,14 +60,33 @@ export class TimelineState {
     }
     /** The steps it moves across, ascending: the owner's `values`, else those its plots report. */
     get steps() {
-        const values = this.#settings()?.values;
-        return values?.length ? new TimelineSteps(values).values : this.#steps;
-    }
-    /** Reports the steps the plots found in their rows. */
-    setSteps(values) {
+        const values = this.#ownerValues;
+        return values ? new TimelineSteps(values).values : this.#steps;
+    }
+    /** Whether the steps are dates. */
+    get temporal() {
+        const settings = this.#settings();
+        if (!settings?.values?.length)
+            return this.#temporal;
+        return new TimelineTime(settings.dateFormat).isTemporal(settings.values);
+    }
+    /** Reports the steps the plots found in their rows, and whether they are dates. */
+    setSteps(values, temporal = false) {
         const same = values.length === this.#steps.length && values.every((v, i) => v === this.#steps[i]);
         if (!same)
             this.#steps = values;
+        if (temporal !== this.#temporal)
+            this.#temporal = temporal;
+    }
+    /** The owner's `values` as steps, or `undefined` without any. */
+    get #ownerValues() {
+        const settings = this.#settings();
+        if (!settings?.values?.length)
+            return undefined;
+        const time = new TimelineTime(settings.dateFormat);
+        return settings.values
+            .map((value) => time.toTime(value))
+            .filter((value) => value !== undefined);
     }
     /** The position across the steps, `0`-`1`. */
     get progress() {
@@ -103,9 +124,22 @@ export class TimelineState {
     get stepDuration() {
         return (this.#settings()?.player?.stepDuration ?? getConfiguration().timeline.player.stepDuration);
     }
-    /** How the current step reads. */
+    /** How a step reads: the player's `format`, else a date label or the number. */
     get format() {
-        return this.#settings()?.player?.format ?? ((value) => String(value));
+        const own = this.#settings()?.player?.format;
+        if (own)
+            return (value) => own(this.step(value));
+        if (this.temporal)
+            return TimelineTime.dateLabel(this.steps, getConfiguration().axis.locale);
+        return (value) => String(value);
+    }
+    /** A step as authors see it. */
+    step(value) {
+        return TimelineTime.toStep(value, this.temporal);
+    }
+    /** An author's step as the timeline's own, or `undefined` when it reads as none. */
+    timeOf(value) {
+        return new TimelineTime(this.#settings()?.dateFormat).toTime(value);
     }
     /** Moves to `progress` (`0`-`1`), and tells the owner. */
     seek(progress) {
@@ -196,7 +230,7 @@ export class TimelineState {
             const value = this.value;
             untrack(() => {
                 if (last !== undefined && value !== undefined && value !== last) {
-                    this.#settings()?.onvalue?.(value);
+                    this.#settings()?.onvalue?.(this.step(value));
                 }
                 last = value;
             });

package/dist/layout/timeline/TimelineTime.d.ts

@@ -0,0 +1,18 @@
+import type { TimeValue, TimelineStep } from '../../types/layout/timeline';
+/** Reads a timeline's values (numbers, `Date`s, ISO or `dateFormat` strings) as numeric steps, and back. */
+export declare class TimelineTime {
+    #private;
+    readonly dateFormat?: string | undefined;
+    /** @param dateFormat How a non-ISO date string reads, e.g. `'DD/MM/YYYY'`. */
+    constructor(dateFormat?: string | undefined);
+    /** A value as its step, or `undefined` when it reads as none. */
+    toTime(value: unknown): TimeValue | undefined;
+    /** A step as authors see it: a `Date` when `temporal`, else the number. */
+    static toStep(value: TimeValue, temporal: boolean): TimelineStep;
+    /** Whether `values` hold dates rather than plain numbers. */
+    isTemporal(values: unknown[]): boolean;
+    /** A step written back in the same form as `like`, for interpolated rows. */
+    toValueLike(time: TimeValue, like: unknown): unknown;
+    /** A date label as precise as the steps need: year, month, day or time. */
+    static dateLabel(steps: TimeValue[], locale?: string): (time: TimeValue) => string;
+}

package/dist/layout/timeline/TimelineTime.js

@@ -0,0 +1,117 @@
+/** The `dateFormat` tokens and the UTC date part each reads or writes. */
+const TOKENS = {
+    YYYY: { group: '(\\d{4})', get: (date) => date.getUTCFullYear(), width: 4 },
+    MM: { group: '(\\d{1,2})', get: (date) => date.getUTCMonth() + 1, width: 2 },
+    DD: { group: '(\\d{1,2})', get: (date) => date.getUTCDate(), width: 2 },
+    HH: { group: '(\\d{1,2})', get: (date) => date.getUTCHours(), width: 2 },
+    mm: { group: '(\\d{1,2})', get: (date) => date.getUTCMinutes(), width: 2 },
+    ss: { group: '(\\d{1,2})', get: (date) => date.getUTCSeconds(), width: 2 }
+};
+const TOKEN_PATTERN = /YYYY|MM|DD|HH|mm|ss/g;
+/** An ISO 8601 date, from a bare year to a full date-time. */
+const ISO_DATE = /^\d{4}(-\d{2}(-\d{2}([T ]\d{2}:\d{2}(:\d{2}(\.\d+)?)?(Z|[+-]\d{2}:?\d{2})?)?)?)?$/;
+const DAY = 24 * 60 * 60 * 1000;
+/** Reads a timeline's values (numbers, `Date`s, ISO or `dateFormat` strings) as numeric steps, and back. */
+export class TimelineTime {
+    dateFormat;
+    /** @param dateFormat How a non-ISO date string reads, e.g. `'DD/MM/YYYY'`. */
+    constructor(dateFormat) {
+        this.dateFormat = dateFormat;
+    }
+    /** A value as its step, or `undefined` when it reads as none. */
+    toTime(value) {
+        if (typeof value === 'number')
+            return Number.isFinite(value) ? value : undefined;
+        if (value instanceof Date) {
+            const time = value.getTime();
+            return Number.isFinite(time) ? time : undefined;
+        }
+        if (typeof value !== 'string')
+            return undefined;
+        const text = value.trim();
+        if (this.dateFormat) {
+            const parsed = TimelineTime.#parse(text, this.dateFormat);
+            if (parsed !== undefined)
+                return parsed;
+        }
+        if (text !== '' && Number.isFinite(Number(text)) && !ISO_DATE.test(text))
+            return Number(text);
+        if (ISO_DATE.test(text)) {
+            // A bare year stays a year, like a number.
+            if (/^\d{4}$/.test(text))
+                return Number(text);
+            const time = Date.parse(/^\d{4}-\d{2}$/.test(text) ? `${text}-01` : text);
+            return Number.isFinite(time) ? time : undefined;
+        }
+        return undefined;
+    }
+    /** A step as authors see it: a `Date` when `temporal`, else the number. */
+    static toStep(value, temporal) {
+        return temporal ? new Date(value) : value;
+    }
+    /** Whether `values` hold dates rather than plain numbers. */
+    isTemporal(values) {
+        return values.some((value) => {
+            if (value instanceof Date)
+                return true;
+            if (typeof value !== 'string')
+                return false;
+            const text = value.trim();
+            return !/^-?\d+(\.\d+)?$/.test(text) && this.toTime(text) !== undefined;
+        });
+    }
+    /** A step written back in the same form as `like`, for interpolated rows. */
+    toValueLike(time, like) {
+        if (like instanceof Date)
+            return new Date(time);
+        if (typeof like !== 'string')
+            return time;
+        const text = like.trim();
+        if (this.dateFormat && TimelineTime.#parse(text, this.dateFormat) !== undefined) {
+            return TimelineTime.#write(new Date(time), this.dateFormat);
+        }
+        if (ISO_DATE.test(text) && !/^\d{4}$/.test(text)) {
+            return new Date(time).toISOString().slice(0, text.length);
+        }
+        return String(time);
+    }
+    /** A date label as precise as the steps need: year, month, day or time. */
+    static dateLabel(steps, locale) {
+        const dates = steps.map((time) => new Date(time));
+        const options = dates.every((d) => d.getUTCMonth() === 0 && d.getUTCDate() === 1 && d.getTime() % DAY === 0)
+            ? { year: 'numeric' }
+            : dates.every((d) => d.getUTCDate() === 1 && d.getTime() % DAY === 0)
+                ? { month: 'short', year: 'numeric' }
+                : dates.every((d) => d.getTime() % DAY === 0)
+                    ? { day: 'numeric', month: 'short', year: 'numeric' }
+                    : { dateStyle: 'medium', timeStyle: 'short' };
+        const format = new Intl.DateTimeFormat(locale, { ...options, timeZone: 'UTC' });
+        return (time) => format.format(new Date(time));
+    }
+    /** `text` read through `format`, or `undefined` when it does not match. */
+    static #parse(text, format) {
+        const order = [];
+        const pattern = format
+            .split(TOKEN_PATTERN)
+            .map((literal) => literal.replace(/[.*+?^${}()|[\]\\]/g, '\\$&'));
+        const tokens = format.match(TOKEN_PATTERN) ?? [];
+        let source = pattern[0];
+        tokens.forEach((token, index) => {
+            order.push(token);
+            source += TOKENS[token].group + pattern[index + 1];
+        });
+        const match = new RegExp(`^${source}$`).exec(text);
+        if (!match || !order.length)
+            return undefined;
+        const parts = { YYYY: 1970, MM: 1, DD: 1, HH: 0, mm: 0, ss: 0 };
+        order.forEach((token, index) => (parts[token] = Number(match[index + 1])));
+        return Date.UTC(parts.YYYY, parts.MM - 1, parts.DD, parts.HH, parts.mm, parts.ss);
+    }
+    /** `date` written through `format`. */
+    static #write(date, format) {
+        return format.replace(TOKEN_PATTERN, (token) => {
+            const { get, width } = TOKENS[token];
+            return String(get(date)).padStart(width, '0');
+        });
+    }
+}

package/dist/layout/tooltip/Tooltip.svelte

@@ -6,8 +6,8 @@
 	/**
 	 * A plot's floating tooltip at `(x, y)`, inside a `position: relative`
 	 * parent and themed by the `--dct-tooltip-*` variables. It reads the rows
-	 * the hover matched: its own `content` snippet, given every row, or each
-	 * row's `format` text, one per line. It sits at `anchorX`/`anchorY` of the
+	 * the hover matched: its own `content` snippet, given every row as matched,
+	 * or each row's `format` text, one per line, in `sort`'s order. It sits at `anchorX`/`anchorY` of the
 	 * point (default right and below) and moves over where it would leave its
 	 * plot's box - or `bounds`, when given. See {@link TooltipState}.
 	 */
@@ -17,6 +17,7 @@
 		y,
 		rows,
 		format,
+		sort,
 		content,
 		bounds,
 		anchorX = 'right',
@@ -30,6 +31,8 @@
 		/** Every row the hover matched. */
 		rows: TRow[];
 		format: (row: TRow) => string;
+		/** The order the `format` text reads the rows in. Unset, as matched. */
+		sort?: (a: TRow, b: TRow) => number;
 		/** Custom tooltip body, given every row; replaces the `format` text and the default box. */
 		content?: Snippet<[{ rows: TRow[] }]>;
 		/** Box the tooltip must stay within. Defaults to its plot's box. */
@@ -63,7 +66,7 @@
 		{#if content}
 			{@render content({ rows })}
 		{:else}
-			{TooltipState.text(rows, format)}
+			{TooltipState.text(rows, format, sort)}
 		{/if}
 	</div>
 {/if}

package/dist/layout/tooltip/Tooltip.svelte.d.ts

@@ -8,6 +8,8 @@ declare function $$render<TRow extends Record<string, unknown>>(): {
         /** Every row the hover matched. */
         rows: TRow[];
         format: (row: TRow) => string;
+        /** The order the `format` text reads the rows in. Unset, as matched. */
+        sort?: (a: TRow, b: TRow) => number;
         /** Custom tooltip body, given every row; replaces the `format` text and the default box. */
         content?: Snippet<[{
             rows: TRow[];

package/dist/layout/tooltip/TooltipState.svelte.d.ts

@@ -35,8 +35,14 @@ export declare class TooltipState {
     constructor(inputs: TooltipInputs);
     /** Where the tooltip sits. */
     readonly box: Box;
-    /** The text `rows` read as through `format`, one line each. */
-    static text<TRow>(rows: TRow[], format: (row: TRow) => string): string;
+    /** The text `rows` read as through `format`, one line each, in `sort`'s order when given. */
+    static text<TRow>(rows: TRow[], format: (row: TRow) => string, sort?: (a: TRow, b: TRow) => number): string;
+    /**
+     * Orders rows from the highest value `valueOf` reads to the lowest. A row
+     * without a numeric value goes after every one with, and rows that tie keep
+     * the order the hover matched them in.
+     */
+    static descending<TRow>(valueOf: (row: TRow) => unknown): (a: TRow, b: TRow) => number;
     /** A value as plain text: a date as a locale date, anything else as itself. */
     static value(value: unknown): string;
     /**

package/dist/layout/tooltip/TooltipState.svelte.js

@@ -39,9 +39,28 @@ export class TooltipState {
         return (this.#plotMargins?.place(size, point, anchor) ??
             size.placeNear(point, anchor, Box.size(Infinity, Infinity)));
     });
-    /** The text `rows` read as through `format`, one line each. */
-    static text(rows, format) {
-        return rows.map(format).join('\n');
+    /** The text `rows` read as through `format`, one line each, in `sort`'s order when given. */
+    static text(rows, format, sort) {
+        return (sort ? [...rows].sort(sort) : rows).map(format).join('\n');
+    }
+    /**
+     * Orders rows from the highest value `valueOf` reads to the lowest. A row
+     * without a numeric value goes after every one with, and rows that tie keep
+     * the order the hover matched them in.
+     */
+    static descending(valueOf) {
+        const numberOf = (row) => {
+            const value = valueOf(row);
+            return typeof value === 'number' && Number.isFinite(value) ? value : undefined;
+        };
+        return (a, b) => {
+            const left = numberOf(a);
+            const right = numberOf(b);
+            if (left === undefined || right === undefined) {
+                return (left === undefined ? 1 : 0) - (right === undefined ? 1 : 0);
+            }
+            return right - left;
+        };
     }
     /** A value as plain text: a date as a locale date, anything else as itself. */
     static value(value) {

package/dist/markers/delta/DeltaMarker.svelte

@@ -3,12 +3,15 @@
 	import DotMarker from '../dot/DotMarker.svelte';
 	import TextMarker from '../text/TextMarker.svelte';
 	import { Delta } from './Delta';
+	import { getConfiguration } from '../../configuration/config.svelte';
 	import type { Series } from '../../types/plots/data/common';
 	import type { DeltaMarkerConfig } from '../../types/markers/axis/delta';
 
 	let { marker, data = [] }: { marker: DeltaMarkerConfig; data?: Series<TData>[] } = $props();
 
 	const resolved = $derived(Delta.build(marker.axis, data, marker));
+	const label = $derived(getConfiguration().delta.text[marker.axis]);
+	const lineAnchor = $derived(marker.text?.lineAnchor ?? label.lineAnchor);
 
 	const clampRange = $derived.by((): [number, number] | undefined => {
 		const domain = marker.axis === 'x' ? marker.yDomain : marker.xDomain;
@@ -27,10 +30,9 @@
 	}
 
 	function textVaryCoord(fromVis: number, toVis: number) {
-		const anchor = marker.text?.lineAnchor ?? 'middle';
-		return anchor === 'top'
+		return lineAnchor === 'top'
 			? Math.max(fromVis, toVis)
-			: anchor === 'bottom'
+			: lineAnchor === 'bottom'
 				? Math.min(fromVis, toVis)
 				: (fromVis + toVis) / 2;
 	}
@@ -82,12 +84,12 @@
 			styles: {
 				fontWeight: 'bold',
 				fontSize: 14,
-				textAnchor: 'middle',
+				textAnchor: label.textAnchor,
 				fill: marker.line?.stroke ?? 'currentColor',
 				...marker.text,
-				dx: marker.text?.dx ?? (marker.axis === 'x' ? 12 : 0),
-				dy: marker.text?.dy ?? (marker.axis === 'x' ? 0 : -10),
-				lineAnchor: marker.axis === 'x' ? (marker.text?.lineAnchor ?? 'middle') : 'bottom'
+				dx: marker.text?.dx ?? label.dx,
+				dy: marker.text?.dy ?? label.dy,
+				lineAnchor
 			}
 		}}
 	/>

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() {

package/dist/phases/data/DataPhase.d.ts

@@ -1,12 +1,12 @@
-import type { Accessor } from '../../types/plots/data/common';
 import type { AxisPlotState, AxisPlotCtx, DataStageOptions, PhaseStage } from '../../types/phases';
 type AnyAxisState = AxisPlotState<any, any, any, any>;
 /**
  * The "data" phase every axis-based plot shares: its series (from `series`,
- * or flat rows split by {@link DataPhase.buildGrouping}), what each position
- * channel is and which way the plot runs ({@link PlotAxes}), each series'
- * color, the series a legend omits dropped, each series cut into its styled
- * visual segments, and - for a discrete mark - the values its gaps fill in.
+ * or flat rows split by `seriesGrouping`: its `grouping`, or a categorical
+ * `color`), what each position channel is and which way the plot runs
+ * ({@link PlotAxes}), each series' color, the series a legend omits dropped,
+ * each series cut into its styled visual segments, and - for a discrete
+ * mark - the values its gaps fill in.
  * Colors and axes come from every series, before any is omitted or split by
  * facet panel, so they stay put and every panel agrees.
  */
@@ -15,11 +15,5 @@ export declare class DataPhase<TState extends AnyAxisState, TCtx extends AxisPlo
     readonly phase: "data";
     constructor(options?: DataStageOptions<TState, TCtx>);
     run: (state: TState, ctx: TCtx) => TState;
-    /**
-     * The key a plot's rows split into series by: its `grouping`, or its `color`
-     * when that names categories. A numeric `color` is a continuous value (a
-     * heatmap's cells), so it colors rows without grouping them.
-     */
-    static buildGrouping(state: Pick<AnyAxisState, 'grouping' | 'color' | 'data'>): Accessor<any, unknown> | undefined;
 }
 export {};