@fundar/data-chart-telling 1.0.0 → 1.1.0

package/dist/layout/plot/PublicPlotContext.js

@@ -104,7 +104,7 @@ export class PublicTimeline {
     }
     /** Every step it moves across, ascending. */
     get steps() {
-        return this.#state.steps;
+        return this.#state.steps.map((step) => this.#state.step(step));
     }
     /** The position across the steps, `0`-`1`. */
     get progress() {
@@ -112,7 +112,8 @@ export class PublicTimeline {
     }
     /** The step the position lands on, or `undefined` without steps. */
     get value() {
-        return this.#state.value;
+        const { value } = this.#state;
+        return value === undefined ? undefined : this.#state.step(value);
     }
     get index() {
         return this.#state.index;
@@ -139,8 +140,11 @@ export class PublicTimeline {
     seekIndex(index) {
         this.#state.seekIndex(index);
     }
+    /** Moves to the step closest to `value`. */
     seekValue(value) {
-        this.#state.seekValue(value);
+        const time = this.#state.timeOf(value);
+        if (time !== undefined)
+            this.#state.seekValue(time);
     }
     next() {
         this.#state.next();

package/dist/layout/plot/Slice.js

@@ -1,6 +1,7 @@
 import { resolveAccessor } from '../../plots/utils/accessors';
 import { merge } from '../../utils/merge';
 import { TimelineSteps } from '../timeline/TimelineSteps';
+import { TimelineTime } from '../timeline/TimelineTime';
 import { buildFacetAxesDisplay } from '../facet/axes';
 import { buildFacetPlaceKey, isFacetWrap } from '../facet/config';
 /**
@@ -55,10 +56,11 @@ export class Slice {
         };
         if (timeline && place.time !== undefined) {
             const get = resolveAccessor(timeline.accessor);
+            const reader = new TimelineTime(timeline.dateFormat);
             const time = place.time;
             tests.push((row) => {
-                const value = get(row);
-                if (value == null)
+                const value = reader.toTime(get(row));
+                if (value === undefined)
                     return true;
                 return TimelineSteps.matches(value, time, this.filterMode);
             });

package/dist/layout/scales/EdgeTicks.d.ts

@@ -0,0 +1,39 @@
+import type { AxisChannelName } from '../../types/layout/mapping';
+import type { AxisScale, EdgeTicksOptions } from '../../types/layout/scales';
+/** What {@link EdgeTicks.build} measures an axis with. */
+export type EdgeTicksInput = {
+    /** The axis measured: labels sit side by side along x, stacked along y. */
+    axis: AxisChannelName;
+    /** The axis' numeric values; their extent is the axis' domain. */
+    values: number[];
+    /** The axis' length in pixels. */
+    span: number;
+    /** The pixels between ticks the axis aims for, and the fewest ticks it takes. */
+    spacing: number;
+    min: number;
+    /** The tick labels' font size, in pixels. */
+    fontSize: number;
+    options: EdgeTicksOptions;
+};
+/**
+ * The ticks of a continuous axis: its nice ticks plus the data's first and
+ * last values, so a reader sees where the data starts and ends. When an edge
+ * tick lands too close to the nice tick next to it for both labels to fit,
+ * `options.collision` decides which gives way, or widens the axis instead.
+ */
+export declare class EdgeTicks {
+    /** The share of the font size one label character takes, on average. */
+    static readonly CHARACTER_WIDTH = 0.6;
+    /** The pixels left between two neighbouring labels. */
+    static readonly LABEL_GAP = 6;
+    /** A plot's `scales.<axis>.edgeTicks` over the configuration's `axis.edgeTicks.<axis>`. */
+    static resolve(option: AxisScale['edgeTicks'], configured: EdgeTicksOptions): EdgeTicksOptions;
+    /**
+     * The axis' ticks, and the domain it widens to when `'extend'` resolved a
+     * collision. `undefined` when edge ticks are off or the values span nothing.
+     */
+    static build({ axis, values, span, spacing, min, fontSize, options }: EdgeTicksInput): {
+        ticks: number[];
+        domain?: [number, number];
+    } | undefined;
+}

package/dist/layout/scales/EdgeTicks.js

@@ -0,0 +1,82 @@
+import { NiceTicks } from './NiceTicks';
+/**
+ * The ticks of a continuous axis: its nice ticks plus the data's first and
+ * last values, so a reader sees where the data starts and ends. When an edge
+ * tick lands too close to the nice tick next to it for both labels to fit,
+ * `options.collision` decides which gives way, or widens the axis instead.
+ */
+export class EdgeTicks {
+    /** The share of the font size one label character takes, on average. */
+    static CHARACTER_WIDTH = 0.6;
+    /** The pixels left between two neighbouring labels. */
+    static LABEL_GAP = 6;
+    /** A plot's `scales.<axis>.edgeTicks` over the configuration's `axis.edgeTicks.<axis>`. */
+    static resolve(option, configured) {
+        if (option === undefined)
+            return configured;
+        if (typeof option === 'boolean')
+            return { ...configured, enabled: option };
+        return { enabled: true, collision: option.collision ?? configured.collision };
+    }
+    /**
+     * The axis' ticks, and the domain it widens to when `'extend'` resolved a
+     * collision. `undefined` when edge ticks are off or the values span nothing.
+     */
+    static build({ axis, values, span, spacing, min, fontSize, options }) {
+        if (!options.enabled || values.length < 2)
+            return undefined;
+        const lo = Math.min(...values);
+        const hi = Math.max(...values);
+        if (!(hi > lo))
+            return undefined;
+        const count = NiceTicks.count(span, spacing, min);
+        // Whole-number values (years, counts) never get ticks between them.
+        const step = values.every(Number.isInteger)
+            ? Math.max(1, NiceTicks.step(lo, hi, count))
+            : NiceTicks.step(lo, hi, count);
+        const nice = NiceTicks.inRange(lo, hi, step);
+        if (!nice.length)
+            return { ticks: [lo, hi] };
+        const eps = step * 1e-6;
+        const pixels = (value) => ((value - lo) / (hi - lo)) * span;
+        // Side by side, two labels need half of each one's width; stacked, one line's height.
+        const labelWidth = (value) => String(value).length * fontSize * EdgeTicks.CHARACTER_WIDTH;
+        const room = (edge, neighbour) => axis === 'x' ? (labelWidth(edge) + labelWidth(neighbour)) / 2 : fontSize;
+        const crowds = (edge, neighbour) => Math.abs(pixels(edge) - pixels(neighbour)) < room(edge, neighbour) + EdgeTicks.LABEL_GAP;
+        const inner = [...nice];
+        const before = [];
+        const after = [];
+        let domainLo = lo;
+        let domainHi = hi;
+        const first = nice[0];
+        if (first - lo > eps) {
+            if (!crowds(lo, first))
+                before.push(lo);
+            else if (options.collision === 'drop-nice') {
+                before.push(lo);
+                inner.shift();
+            }
+            else if (options.collision === 'extend') {
+                domainLo = first - step;
+                before.push(domainLo);
+            }
+        }
+        const last = nice[nice.length - 1];
+        if (hi - last > eps) {
+            if (!crowds(hi, last))
+                after.push(hi);
+            else if (options.collision === 'drop-nice') {
+                after.push(hi);
+                if (inner[inner.length - 1] === last)
+                    inner.pop();
+            }
+            else if (options.collision === 'extend') {
+                domainHi = last + step;
+                after.push(domainHi);
+            }
+        }
+        const ticks = [...before, ...inner, ...after];
+        const widened = domainLo !== lo || domainHi !== hi;
+        return widened ? { ticks, domain: [domainLo, domainHi] } : { ticks };
+    }
+}

package/dist/layout/scales/NiceTicks.d.ts

@@ -0,0 +1,40 @@
+import type { AxisChannelName } from '../../types/layout/mapping';
+/**
+ * "Nice" (1/2/5×10ⁿ) tick steps and the domains they round to, compatible with
+ * d3-array's and reimplemented here to avoid depending on internals svelteplot
+ * itself pulls in (not one of our declared dependencies) - see
+ * https://d3js.org/d3-array/ticks.
+ */
+export declare class NiceTicks {
+    /**
+     * How far past a tick, as a share of the tick step, a domain still ends on
+     * it. Plain `Math.ceil`/`Math.floor` (what d3's `nice()` uses) has no
+     * tolerance: parts that add up to `100`, but come out `100.00000000000001`
+     * after summing or `100.2` after each was rounded at the source, round a
+     * full step further (`100` → `120`). 5% of the step catches that noise and
+     * lets a mark pass the last tick by a few pixels at most.
+     */
+    static readonly TOLERANCE = 0.05;
+    /** The pixels between ticks an axis aims for, along x and along y. */
+    static readonly SPACING: {
+        readonly x: 80;
+        readonly y: 50;
+    };
+    /** The step between nice ticks for an approximate `count` over `[start, stop]`. */
+    static step(start: number, stop: number, count: number): number;
+    /** Multiples of `step` covering `[start, stop]`, inclusive of either endpoint when it lands exactly on one. */
+    static inRange(start: number, stop: number, step: number): number[];
+    /** How many ticks fit `span` pixels at one per `spacing`, and at least `min`. */
+    static count(span: number, spacing: number, min: number): number;
+    /**
+     * `[lo, hi]` widened outward to the nearest nice step for about `count`
+     * ticks, like d3's `scale.nice(count)` - except a value within
+     * `tolerance × step` past a tick stays on it (see {@link NiceTicks.TOLERANCE}).
+     */
+    static domain(lo: number, hi: number, count?: number, tolerance?: number): [number, number];
+    /** {@link NiceTicks.domain} with as many ticks as fit `axis` in a plot of this size. */
+    static fit(size: {
+        width: number;
+        height: number;
+    }, axis: AxisChannelName, lo: number, hi: number, tolerance?: number): [number, number];
+}

package/dist/layout/scales/NiceTicks.js

@@ -0,0 +1,72 @@
+import { Margins } from '../margins/Margins';
+/**
+ * "Nice" (1/2/5×10ⁿ) tick steps and the domains they round to, compatible with
+ * d3-array's and reimplemented here to avoid depending on internals svelteplot
+ * itself pulls in (not one of our declared dependencies) - see
+ * https://d3js.org/d3-array/ticks.
+ */
+export class NiceTicks {
+    /**
+     * How far past a tick, as a share of the tick step, a domain still ends on
+     * it. Plain `Math.ceil`/`Math.floor` (what d3's `nice()` uses) has no
+     * tolerance: parts that add up to `100`, but come out `100.00000000000001`
+     * after summing or `100.2` after each was rounded at the source, round a
+     * full step further (`100` → `120`). 5% of the step catches that noise and
+     * lets a mark pass the last tick by a few pixels at most.
+     */
+    static TOLERANCE = 0.05;
+    /** The pixels between ticks an axis aims for, along x and along y. */
+    static SPACING = { x: 80, y: 50 };
+    /** The step between nice ticks for an approximate `count` over `[start, stop]`. */
+    static step(start, stop, count) {
+        const e10 = Math.sqrt(50);
+        const e5 = Math.sqrt(10);
+        const e2 = Math.sqrt(2);
+        const step0 = Math.abs(stop - start) / Math.max(0, count);
+        let step1 = 10 ** Math.floor(Math.log10(step0));
+        const error = step0 / step1;
+        if (error >= e10)
+            step1 *= 10;
+        else if (error >= e5)
+            step1 *= 5;
+        else if (error >= e2)
+            step1 *= 2;
+        return step1;
+    }
+    /** Multiples of `step` covering `[start, stop]`, inclusive of either endpoint when it lands exactly on one. */
+    static inRange(start, stop, step) {
+        if (!(step > 0) || !Number.isFinite(step))
+            return [];
+        const lo = Math.ceil(start / step);
+        const hi = Math.floor(stop / step);
+        const out = [];
+        for (let i = lo; i <= hi; i++)
+            out.push(i * step);
+        return out;
+    }
+    /** How many ticks fit `span` pixels at one per `spacing`, and at least `min`. */
+    static count(span, spacing, min) {
+        return Math.max(min, Math.round(span / spacing));
+    }
+    /**
+     * `[lo, hi]` widened outward to the nearest nice step for about `count`
+     * ticks, like d3's `scale.nice(count)` - except a value within
+     * `tolerance × step` past a tick stays on it (see {@link NiceTicks.TOLERANCE}).
+     */
+    static domain(lo, hi, count = 5, tolerance = NiceTicks.TOLERANCE) {
+        if (!(hi > lo))
+            return [lo, hi];
+        const step = NiceTicks.step(lo, hi, count);
+        const slack = step * tolerance;
+        const niceLo = Math.floor((lo + slack) / step) * step;
+        const niceHi = Math.ceil((hi - slack) / step) * step;
+        // `|| 0` turns a `-0` (a bound at zero, rounded toward it) into `0`, which an axis writes without a sign.
+        return [niceLo || 0, niceHi || 0];
+    }
+    /** {@link NiceTicks.domain} with as many ticks as fit `axis` in a plot of this size. */
+    static fit(size, axis, lo, hi, tolerance) {
+        const box = Margins.AXIS_ESTIMATE.contentBox(size.width, size.height);
+        const span = axis === 'x' ? box.width : box.height;
+        return NiceTicks.domain(lo, hi, NiceTicks.count(span, NiceTicks.SPACING[axis], 2), tolerance);
+    }
+}

package/dist/layout/scales/ScalesLayout.svelte

@@ -4,7 +4,8 @@
 	import { AxisX, AxisY, GridX, GridY } from 'svelteplot';
 	import { usePlot } from '../plot/usePlot';
 	import { getConfiguration } from '../../configuration/config.svelte';
-	import { tickStep, ticksInRange, naturalTickCount } from './niceDomain';
+	import { NiceTicks } from './NiceTicks';
+	import { EdgeTicks } from './EdgeTicks';
 	import { DISCRETE_SCALE_TYPES } from '../../types/layout/scales';
 	import type { AxisBasedScalesConfig } from '../../types/layout/scales';
 	import type { AxisValue } from '../../types/layout/mapping';
@@ -17,7 +18,8 @@
 		width,
 		height,
 		numericMargins,
-		scales
+		scales,
+		edgeDomains = undefined
 	}: {
 		data: TData[];
 		getX: (d: TData) => AxisValue;
@@ -26,6 +28,11 @@
 		height: number;
 		numericMargins: { top: number; right: number; bottom: number; left: number };
 		scales?: AxisBasedScalesConfig<TData>;
+		/**
+		 * Where to leave the domain an axis widens to when an edge tick's
+		 * `'extend'` resolved a collision (see `EdgeTicks`), for the plot to give its scale.
+		 */
+		edgeDomains?: Map<'x' | 'y', [number, number]>;
 	} = $props();
 
 	const cfg = $derived(getConfiguration());
@@ -50,7 +57,7 @@
 		return hi > lo ? [lo, hi] : undefined;
 	}
 
-	/** An axis paired with a discrete scale plays the "index" role for the pair, so *this* axis is the plain magnitude/value one (see `autoTickCount`, `edgeInclusiveTicks`). */
+	/** An axis paired with a discrete scale plays the "index" role for the pair, so *this* axis is the plain magnitude/value one (see `autoTickCount`, `edgeTicksOf`). */
 	const isDiscreteType = (type: string) =>
 		(DISCRETE_SCALE_TYPES as readonly string[]).includes(type);
 
@@ -75,7 +82,7 @@
 			return undefined;
 		if (oppositeType != null && isDiscreteType(oppositeType)) return undefined;
 		const uniqueCount = new Set(values.map(String)).size;
-		const natural = naturalTickCount(span, spacing, min);
+		const natural = NiceTicks.count(span, spacing, min);
 		return uniqueCount >= 2 && uniqueCount < natural ? uniqueCount : undefined;
 	}
 
@@ -94,32 +101,40 @@
 		if (!extent) return undefined;
 		const [lo, hi] = extent;
 		if (!Number.isInteger(lo) || !Number.isInteger(hi)) return undefined;
-		return hi - lo < naturalTickCount(span, spacing, min) ? 1 : undefined;
+		return hi - lo < NiceTicks.count(span, spacing, min) ? 1 : undefined;
 	}
 
 	const xSpan = $derived(Math.max(0, width - numericMargins.left - numericMargins.right));
 	const ySpan = $derived(Math.max(0, height - numericMargins.top - numericMargins.bottom));
 
-	const xTickCount = $derived(autoTickCount(plot.scales.y.type, scales?.x, xValues, xSpan, 80, 3));
-	const yTickCount = $derived(autoTickCount(plot.scales.x.type, scales?.y, yValues, ySpan, 50, 2));
+	const xTickCount = $derived(
+		autoTickCount(plot.scales.y.type, scales?.x, xValues, xSpan, NiceTicks.SPACING.x, 3)
+	);
+	const yTickCount = $derived(
+		autoTickCount(plot.scales.x.type, scales?.y, yValues, ySpan, NiceTicks.SPACING.y, 2)
+	);
 
-	const xTickInterval = $derived(integerTickInterval(scales?.x, xValues, xSpan, 80, 3));
-	const yTickInterval = $derived(integerTickInterval(scales?.y, yValues, ySpan, 50, 2));
+	const xTickInterval = $derived(
+		integerTickInterval(scales?.x, xValues, xSpan, NiceTicks.SPACING.x, 3)
+	);
+	const yTickInterval = $derived(
+		integerTickInterval(scales?.y, yValues, ySpan, NiceTicks.SPACING.y, 2)
+	);
 
 	/**
-	 * A continuous axis' nice ticks plus its domain's endpoints, when the
-	 * opposite axis is continuous too - at least a whole unit apart when every
-	 * value is a whole number. Unset when the caller sets tick density
-	 * or the domain.
+	 * A continuous axis' nice ticks plus the data's first and last values (see
+	 * {@link EdgeTicks}), when its other axis is continuous too and the author
+	 * left its density and domain to the plot. Unset otherwise.
 	 */
-	function edgeInclusiveTicks(
+	function edgeTicksOf(
+		axis: 'x' | 'y',
+		type: string | undefined,
 		oppositeType: string | undefined,
 		scale: AxisBasedScalesConfig<TData>['x'],
 		values: AxisValue[],
 		span: number,
-		spacing: number,
 		min: number
-	): number[] | undefined {
+	) {
 		if (
 			scale?.ticks != null ||
 			scale?.tickSpacing != null ||
@@ -127,25 +142,43 @@
 			scale?.domain != null
 		)
 			return undefined;
+		if (type != null && isDiscreteType(type)) return undefined;
 		if (oppositeType != null && isDiscreteType(oppositeType)) return undefined;
 		if (scale?.type != null && scale.type !== 'linear' && scale.type !== 'auto') return undefined;
-		const extent = axisExtent(scale, values);
-		if (!extent) return undefined;
-		const [lo, hi] = extent;
-		const count = naturalTickCount(span, spacing, min);
-		// Whole-number values (years, counts) never get ticks between them.
-		const integers = values.every((v) => typeof v !== 'number' || Number.isInteger(v));
-		const step = integers ? Math.max(1, tickStep(lo, hi, count)) : tickStep(lo, hi, count);
-		const base = ticksInRange(lo, hi, step);
-		const eps = step * 1e-6;
-		const withLo = base.length === 0 || base[0] - lo > eps ? [lo, ...base] : base;
-		return withLo.length === 0 || hi - withLo[withLo.length - 1] > eps ? [...withLo, hi] : withLo;
+		const present = values.filter((v) => v != null);
+		if (!present.every((v) => typeof v === 'number')) return undefined;
+		return EdgeTicks.build({
+			axis,
+			values: (present as number[]).filter(Number.isFinite),
+			span,
+			spacing: NiceTicks.SPACING[axis],
+			min,
+			fontSize: cfg.axis.fontSize,
+			options: EdgeTicks.resolve(scale?.edgeTicks, cfg.axis.edgeTicks[axis])
+		});
 	}
 
-	const xTicksExplicit = $derived(
-		edgeInclusiveTicks(plot.scales.y.type, scales?.x, xValues, xSpan, 80, 3)
+	const xEdgeTicks = $derived(
+		edgeTicksOf('x', plot.scales.x.type, plot.scales.y.type, scales?.x, xValues, xSpan, 3)
+	);
+	const yEdgeTicks = $derived(
+		edgeTicksOf('y', plot.scales.y.type, plot.scales.x.type, scales?.y, yValues, ySpan, 2)
 	);
 
+	// Hands the plot the domain an axis widens to, only when it changes.
+	$effect(() => {
+		const next = { x: xEdgeTicks?.domain, y: yEdgeTicks?.domain };
+		untrack(() => {
+			for (const axis of ['x', 'y'] as const) {
+				const domain = next[axis];
+				const current = edgeDomains?.get(axis);
+				if (domain?.[0] === current?.[0] && domain?.[1] === current?.[1]) continue;
+				if (domain) edgeDomains?.set(axis, domain);
+				else edgeDomains?.delete(axis);
+			}
+		});
+	});
+
 	const yTitleFontSize = $derived(scales?.y?.titleFontSize ?? cfg.axis.titleFontSize);
 
 	/**
@@ -191,7 +224,7 @@
 
 {#snippet axisX()}
 	<AxisX
-		ticks={xTicksExplicit}
+		ticks={xEdgeTicks?.ticks}
 		tickCount={xTickCount}
 		interval={xTickInterval}
 		tickSize={scales?.x?.tickSize ?? cfg.axis.xTickSize}
@@ -207,6 +240,7 @@
 {/if}
 {#snippet axisY()}
 	<AxisY
+		ticks={yEdgeTicks?.ticks}
 		tickCount={yTickCount}
 		interval={yTickInterval}
 		tickSize={scales?.y?.tickSize ?? cfg.axis.yTickSize}

package/dist/layout/scales/ScalesLayout.svelte.d.ts

@@ -14,6 +14,11 @@ declare function $$render<TData extends Record<string, unknown>>(): {
             left: number;
         };
         scales?: AxisBasedScalesConfig<TData>;
+        /**
+         * Where to leave the domain an axis widens to when an edge tick's
+         * `'extend'` resolved a collision (see `EdgeTicks`), for the plot to give its scale.
+         */
+        edgeDomains?: Map<"x" | "y", [number, number]>;
     };
     exports: {};
     bindings: "";

package/dist/layout/scales/SveltePlotScale.d.ts

@@ -0,0 +1,15 @@
+import type { AxisScale } from '../../types/layout/scales';
+import type { AxisValue } from '../../types/layout/mapping';
+/** An {@link AxisScale} turned into the options svelteplot's `<Plot x>`/`<Plot y>` accepts. */
+export declare class SveltePlotScale {
+    #private;
+    /** Scale types the default `nice` applies to - every other type has its own tick semantics (or isn't numeric at all). */
+    static readonly CONTINUOUS_NUMERIC_TYPES: ReadonlySet<string>;
+    /**
+     * The scale without what the package handles itself - `grid`, `axisDisplay`
+     * and a vertical `label`, which `ScalesLayout` draws, and `niceTolerance`,
+     * which the "scales" phase applies - with a custom `sort` resolved into a
+     * `domain`, and `nice: true` on an unpinned numeric axis.
+     */
+    static build<TData>(scale: AxisScale<TData> | undefined, rows: TData[], getAxisValue: (d: TData) => AxisValue): AxisScale<TData> | undefined;
+}

package/dist/layout/scales/SveltePlotScale.js

@@ -0,0 +1,79 @@
+import { SvelteSet } from 'svelte/reactivity';
+/** An {@link AxisScale} turned into the options svelteplot's `<Plot x>`/`<Plot y>` accepts. */
+export class SveltePlotScale {
+    /** Scale types the default `nice` applies to - every other type has its own tick semantics (or isn't numeric at all). */
+    static CONTINUOUS_NUMERIC_TYPES = new Set([
+        'auto',
+        'linear',
+        'pow',
+        'sqrt',
+        'log',
+        'symlog'
+    ]);
+    /**
+     * The scale without what the package handles itself - `grid`, `axisDisplay`
+     * and a vertical `label`, which `ScalesLayout` draws, and `niceTolerance`,
+     * which the "scales" phase applies - with a custom `sort` resolved into a
+     * `domain`, and `nice: true` on an unpinned numeric axis.
+     */
+    static build(scale, rows, getAxisValue) {
+        const sorted = SveltePlotScale.#sorted(scale, rows, getAxisValue);
+        const wantsNice = scale?.domain == null &&
+            scale?.ticks == null &&
+            scale?.nice == null &&
+            (scale?.type == null || SveltePlotScale.CONTINUOUS_NUMERIC_TYPES.has(scale.type)) &&
+            SveltePlotScale.#isNumeric(rows, getAxisValue);
+        const removesAxis = scale?.axisDisplay === 'none';
+        if (!sorted && !wantsNice && !removesAxis)
+            return sorted;
+        const out = { ...sorted };
+        delete out.grid;
+        delete out.axisDisplay;
+        delete out.niceTolerance;
+        if (removesAxis)
+            out.axis = false;
+        if (scale?.labelOrientation === 'vertical')
+            out.label = false;
+        if (wantsNice)
+            out.nice = true;
+        return out;
+    }
+    /** svelteplot's `sort` option only does a fixed ascending sort; a custom `scale.sort` comparator is resolved into an explicit `domain` instead, which svelteplot honors as-is. */
+    static #sorted(scale, rows, getAxisValue) {
+        const sort = scale?.sort;
+        if (!sort || scale?.domain)
+            return scale;
+        const reps = SveltePlotScale.#uniqueRows(rows, getAxisValue);
+        if (reps.length === 0 || !reps.every((r) => typeof getAxisValue(r) === 'string'))
+            return scale;
+        const domain = [...reps].sort(sort).map(getAxisValue);
+        return { ...scale, domain };
+    }
+    /** One representative row per unique axis value (first occurrence in `rows`). */
+    static #uniqueRows(rows, getAxisValue) {
+        const seen = new SvelteSet();
+        const out = [];
+        for (const row of rows) {
+            const v = getAxisValue(row);
+            if (seen.has(v))
+                continue;
+            seen.add(v);
+            out.push(row);
+        }
+        return out;
+    }
+    /** Whether the axis' values are numeric; `nice` on a categorical axis would make svelteplot treat it as linear. */
+    static #isNumeric(rows, getAxisValue) {
+        let numericSeen = 0;
+        for (const row of rows) {
+            const v = getAxisValue(row);
+            if (v == null)
+                continue;
+            if (typeof v !== 'number')
+                return false;
+            if (++numericSeen >= 2)
+                return true;
+        }
+        return numericSeen > 0;
+    }
+}

package/dist/layout/styles/ValueLabels.js

@@ -1,6 +1,7 @@
+import { ProcessedPositions } from '../../phases/transforms/ProcessedPositions';
 import { Box } from '../margins/Box';
 import { resolveAccessor } from '../../plots/utils/accessors';
-import { SERIES_ID_KEY, SERIES_KEY, TransformsPhase } from '../../phases/transforms/TransformsPhase';
+import { SERIES_ID_KEY, SERIES_KEY } from '../../phases/transforms/TransformsPhase';
 import { seriesIdOf } from '../../utils/grouping';
 import { Transforms } from '../../phases/transforms/Transforms';
 import { isGapValue } from '../../plots/utils/gaps';
@@ -139,7 +140,7 @@ export class ValueLabels {
         if (!processed)
             return [];
         const { font, anchor, format } = this;
-        const position = TransformsPhase.processedPosition(processed);
+        const position = ProcessedPositions.of(processed);
         const topOf = (d) => position.y(d);
         const nameOf = (d) => String(d[SERIES_KEY]);
         const valueOf = ValueLabels.valueOf(state);

package/dist/layout/timeline/Timeline.svelte

@@ -15,12 +15,15 @@
 		currentValue,
 		values,
 		orientation = 'vertical',
+		format = (value: TimeValue) => String(value),
 		width,
 		height
 	}: {
 		currentValue: TimeValue;
 		values: TimeValue[];
 		orientation?: Orientation;
+		/** How a step's label reads. */
+		format?: (value: TimeValue) => string;
 		width: number;
 		height: number;
 	} = $props();
@@ -72,7 +75,7 @@
 		<Text
 			data={baseValues}
 			{...isHorizontal ? { x: identity, y: 0 } : { x: 0, y: identity }}
-			text={(d: TimeValue) => `${d}`}
+			text={(d: TimeValue) => format(d)}
 			{...textOffset}
 			fontSize={rule.fontSize}
 			fill="var(--dct-timeline-axis, currentColor)"
@@ -82,7 +85,7 @@
 		<Text
 			data={[currentValue]}
 			{...isHorizontal ? { x: identity, y: 0 } : { x: 0, y: identity }}
-			text={(d: TimeValue) => `${d}`}
+			text={(d: TimeValue) => format(d)}
 			{...textOffset}
 			fontSize={rule.activeFontSize}
 			fontWeight={rule.activeFontWeight}

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

@@ -3,6 +3,8 @@ type $$ComponentProps = {
     currentValue: TimeValue;
     values: TimeValue[];
     orientation?: Orientation;
+    /** How a step's label reads. */
+    format?: (value: TimeValue) => string;
     width: number;
     height: number;
 };