@fundar/data-chart-telling 1.1.0 → 1.3.0

package/dist/layout/scales/ScalesLayout.svelte

@@ -9,6 +9,7 @@
 	import { DISCRETE_SCALE_TYPES } from '../../types/layout/scales';
 	import type { AxisBasedScalesConfig } from '../../types/layout/scales';
 	import type { AxisValue } from '../../types/layout/mapping';
+	import type { PlotLayoutState } from '../../types/layout/plot';
 
 	/** Axis ticks, titles and grid lines for the plot kinds with an x/y axis pair. */
 	let {
@@ -19,7 +20,9 @@
 		height,
 		numericMargins,
 		scales,
-		edgeDomains = undefined
+		edgeDomains = undefined,
+		tickValues = undefined,
+		state: plotState
 	}: {
 		data: TData[];
 		getX: (d: TData) => AxisValue;
@@ -33,8 +36,18 @@
 		 * `'extend'` resolved a collision (see `EdgeTicks`), for the plot to give its scale.
 		 */
 		edgeDomains?: Map<'x' | 'y', [number, number]>;
+		/** The labels a category axis writes, when it leaves some out for want of room. */
+		tickValues?: Partial<Record<'x' | 'y', string[]>>;
+		/** The plot's state: its fitted axes and the y channel's field, which titles a vertical y axis with no rows. */
+		state: Pick<PlotLayoutState, 'fittedAxes' | 'channels'>;
 	} = $props();
 
+	const fittedAxes = $derived(plotState.fittedAxes);
+	const yField = $derived.by(() => {
+		const source = plotState.channels?.y?.source;
+		return typeof source === 'string' ? source : undefined;
+	});
+
 	const cfg = $derived(getConfiguration());
 	const plot = usePlot().svelteplot;
 
@@ -101,6 +114,8 @@
 		if (!extent) return undefined;
 		const [lo, hi] = extent;
 		if (!Number.isInteger(lo) || !Number.isInteger(hi)) return undefined;
+		const numbers = values.filter((v): v is number => typeof v === 'number');
+		if (numbers.length === 0 || !numbers.every(Number.isInteger)) return undefined;
 		return hi - lo < NiceTicks.count(span, spacing, min) ? 1 : undefined;
 	}
 
@@ -139,7 +154,7 @@
 			scale?.ticks != null ||
 			scale?.tickSpacing != null ||
 			scale?.interval != null ||
-			scale?.domain != null
+			(scale?.domain != null && !fittedAxes?.includes(axis))
 		)
 			return undefined;
 		if (type != null && isDiscreteType(type)) return undefined;
@@ -179,6 +194,12 @@
 		});
 	});
 
+	/** A turned label is written on one line: the axis does not wrap it. */
+	const turned = $derived(scales?.x?.tickRotate ? { wordwrap: false } : {}) as Record<
+		string,
+		unknown
+	>;
+
 	const yTitleFontSize = $derived(scales?.y?.titleFontSize ?? cfg.axis.titleFontSize);
 
 	/**
@@ -187,7 +208,8 @@
 	 */
 	const verticalYLabel = $derived.by(() => {
 		if (scales?.y?.labelOrientation !== 'vertical' || scales.y.label === false) return null;
-		const text = scales.y.label || plot.scales.y.autoTitle;
+		const text =
+			scales.y.label || plot.scales.y.autoTitle || (data.length === 0 ? yField : undefined);
 		if (!text) return null;
 		const position = scales.y.labelPosition ?? 'middle';
 		const x = yTitleFontSize;
@@ -220,11 +242,75 @@
 	$effect(() => () => {
 		$autoMarginLeft.delete(marginId);
 	});
+
+	// The top y tick's label is centered on the plot's top edge, so it reaches
+	// half its height above it - more than svelteplot's own 5px `'auto'` top margin.
+	const { autoMarginTop } = getContext<{ autoMarginTop: Writable<Map<string, number>> }>(
+		'svelteplot/autoMargins'
+	);
+	const tickMarginId = `dct-y-tick-${Math.random().toString(36).slice(2)}`;
+	$effect(() => {
+		const wanted =
+			(scales?.y?.axisDisplay ?? 'visible') === 'visible'
+				? Math.ceil(cfg.axis.fontSize / 2) + 2
+				: undefined;
+		untrack(() => {
+			if (wanted === undefined) $autoMarginTop.delete(tickMarginId);
+			else if ($autoMarginTop.get(tickMarginId) !== wanted)
+				$autoMarginTop.set(tickMarginId, wanted);
+		});
+	});
+	$effect(() => () => {
+		$autoMarginTop.delete(tickMarginId);
+	});
+
+	// An x label centred on the domain's end reaches past the plot's right side; an `'auto'` right margin takes that much room.
+	let xAxisEl: SVGGElement | undefined = $state();
+	const { autoMarginRight } = getContext<{ autoMarginRight: Writable<Map<string, number>> }>(
+		'svelteplot/autoMargins'
+	);
+	const overhangId = `dct-x-tick-overhang-${Math.random().toString(36).slice(2)}`;
+	$effect(() => {
+		const el = xAxisEl;
+		// Read so a new axis, a new box or a new margin measures again.
+		void [scales?.x, xEdgeTicks, tickValues?.x, plot.options.marginLeft, plot.facetWidth];
+		if (!el) return;
+		let frame: number | undefined;
+		let cancelled = false;
+		const measure = () => {
+			if (cancelled) return;
+			const labels = el.querySelectorAll('g.tick text');
+			const last = labels.item(labels.length - 1);
+			const svg = el.ownerSVGElement;
+			const { marginLeft } = plot.options;
+			if (last && svg && Number.isFinite(marginLeft) && Number.isFinite(plot.facetWidth)) {
+				const edge = svg.getBoundingClientRect().left + Number(marginLeft) + plot.facetWidth;
+				const overhang = Math.max(0, Math.ceil(last.getBoundingClientRect().right - edge));
+				untrack(() => {
+					if (overhang === 0) $autoMarginRight.delete(overhangId);
+					else if ($autoMarginRight.get(overhangId) !== overhang)
+						$autoMarginRight.set(overhangId, overhang);
+				});
+			}
+		};
+		// Text measures right only once its fonts load.
+		(document.fonts?.ready ?? Promise.resolve()).then(() => {
+			if (!cancelled) frame = requestAnimationFrame(measure);
+		});
+		return () => {
+			cancelled = true;
+			if (frame !== undefined) cancelAnimationFrame(frame);
+		};
+	});
+	$effect(() => () => {
+		$autoMarginRight.delete(overhangId);
+	});
 </script>
 
 {#snippet axisX()}
 	<AxisX
-		ticks={xEdgeTicks?.ticks}
+		ticks={(xEdgeTicks?.ticks ?? tickValues?.x) as string[] | undefined}
+		{...turned}
 		tickCount={xTickCount}
 		interval={xTickInterval}
 		tickSize={scales?.x?.tickSize ?? cfg.axis.xTickSize}
@@ -234,13 +320,13 @@
 	/>
 {/snippet}
 {#if scales?.x?.axisDisplay === 'hidden'}
-	<g style:visibility="hidden">{@render axisX()}</g>
+	<g style:visibility="hidden" bind:this={xAxisEl}>{@render axisX()}</g>
 {:else if scales?.x?.axisDisplay !== 'none'}
-	{@render axisX()}
+	<g bind:this={xAxisEl}>{@render axisX()}</g>
 {/if}
 {#snippet axisY()}
 	<AxisY
-		ticks={yEdgeTicks?.ticks}
+		ticks={(yEdgeTicks?.ticks ?? tickValues?.y) as string[] | undefined}
 		tickCount={yTickCount}
 		interval={yTickInterval}
 		tickSize={scales?.y?.tickSize ?? cfg.axis.yTickSize}

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

@@ -1,5 +1,6 @@
 import type { AxisBasedScalesConfig } from '../../types/layout/scales';
 import type { AxisValue } from '../../types/layout/mapping';
+import type { PlotLayoutState } from '../../types/layout/plot';
 declare function $$render<TData extends Record<string, unknown>>(): {
     props: {
         data: TData[];
@@ -19,6 +20,10 @@ declare function $$render<TData extends Record<string, unknown>>(): {
          * `'extend'` resolved a collision (see `EdgeTicks`), for the plot to give its scale.
          */
         edgeDomains?: Map<"x" | "y", [number, number]>;
+        /** The labels a category axis writes, when it leaves some out for want of room. */
+        tickValues?: Partial<Record<"x" | "y", string[]>>;
+        /** The plot's state: its fitted axes and the y channel's field, which titles a vertical y axis with no rows. */
+        state: Pick<PlotLayoutState, "fittedAxes" | "channels">;
     };
     exports: {};
     bindings: "";

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

@@ -7,8 +7,8 @@ export declare class SveltePlotScale {
     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
+     * and a vertical `label`, which `ScalesLayout` draws, and a `nice` object's `tolerance`,
+     * which the "scales" phase applies (svelteplot is told plain `nice: true`) - 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

@@ -12,8 +12,8 @@ export class SveltePlotScale {
     ]);
     /**
      * 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
+     * and a vertical `label`, which `ScalesLayout` draws, and a `nice` object's `tolerance`,
+     * which the "scales" phase applies (svelteplot is told plain `nice: true`) - with a custom `sort` resolved into a
      * `domain`, and `nice: true` on an unpinned numeric axis.
      */
     static build(scale, rows, getAxisValue) {
@@ -24,24 +24,27 @@ export class SveltePlotScale {
             (scale?.type == null || SveltePlotScale.CONTINUOUS_NUMERIC_TYPES.has(scale.type)) &&
             SveltePlotScale.#isNumeric(rows, getAxisValue);
         const removesAxis = scale?.axisDisplay === 'none';
-        if (!sorted && !wantsNice && !removesAxis)
+        // svelteplot treats a categorical axis told to be `nice` as linear, and draws nothing.
+        const dropsNice = scale?.nice != null && SveltePlotScale.#isCategorical(rows, getAxisValue);
+        if (!sorted && !wantsNice && !removesAxis && !dropsNice)
             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)
+        if (dropsNice)
+            delete out.nice;
+        else if (wantsNice || typeof scale?.nice === 'object')
             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)
+        if (typeof sort !== 'function' || scale?.domain)
             return scale;
         const reps = SveltePlotScale.#uniqueRows(rows, getAxisValue);
         if (reps.length === 0 || !reps.every((r) => typeof getAxisValue(r) === 'string'))
@@ -62,6 +65,10 @@ export class SveltePlotScale {
         }
         return out;
     }
+    /** Whether the axis lays out text categories: any of its values is a string. */
+    static #isCategorical(rows, getAxisValue) {
+        return rows.some((row) => typeof getAxisValue(row) === 'string');
+    }
     /** 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;

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

@@ -0,0 +1,32 @@
+import type { PlotStylesConfig } from '../../types/configuration/styling';
+/** How a category axis lays its tick labels out: the angle they stand at, and which of them are written. */
+export type TickLayout = {
+    /** `0`, `-45` or `-90` degrees. */
+    rotate: 0 | -45 | -90;
+    /** Every how-manieth label is written: `1` writes them all. */
+    every: number;
+    /** The widest label, in px, as it is written - not wrapped, when it is rotated. */
+    width: number;
+};
+/**
+ * Where the tick labels of a category axis fit. Written flat they wrap at their
+ * spaces to the width of their band - a word is never split - and stand side by
+ * side as long as the widest line is narrower than the step between categories.
+ * Otherwise they turn: at 45 degrees a label needs a step of about one and a
+ * half lines of text, at 90 degrees of one; past that, only every few labels
+ * are written.
+ */
+export declare class TickLabels {
+    /** The gap, in px, kept between neighbouring labels. */
+    static readonly GAP = 6;
+    /**
+     * The layout of `labels` along an axis `span` px long - the categories
+     * `bandPadding` (0-1) apart - written at `fontSize`.
+     */
+    static layout(labels: readonly string[], span: number, bandPadding: number, fontSize: number, cfg: Pick<PlotStylesConfig, 'font'>): TickLayout;
+    /**
+     * The layout of a category axis running down the plot, whose labels stand
+     * flat in a row each: only how many can be written.
+     */
+    static rows(count: number, span: number, fontSize: number): number;
+}

package/dist/layout/scales/TickLabels.js

@@ -0,0 +1,55 @@
+import { Box } from '../margins/Box';
+/**
+ * Where the tick labels of a category axis fit. Written flat they wrap at their
+ * spaces to the width of their band - a word is never split - and stand side by
+ * side as long as the widest line is narrower than the step between categories.
+ * Otherwise they turn: at 45 degrees a label needs a step of about one and a
+ * half lines of text, at 90 degrees of one; past that, only every few labels
+ * are written.
+ */
+export class TickLabels {
+    /** The gap, in px, kept between neighbouring labels. */
+    static GAP = 6;
+    /**
+     * The layout of `labels` along an axis `span` px long - the categories
+     * `bandPadding` (0-1) apart - written at `fontSize`.
+     */
+    static layout(labels, span, bandPadding, fontSize, cfg) {
+        const count = labels.length;
+        const measure = (text) => Box.ofText(text, fontSize, cfg).width;
+        const lineHeight = fontSize * 1.2;
+        const whole = Math.max(0, ...labels.map(measure));
+        const flat = { rotate: 0, every: 1, width: whole };
+        if (count < 2 || span <= 0 || whole === 0)
+            return flat;
+        const step = span / count;
+        const room = step - TickLabels.GAP;
+        // What a flat label measures once wrapped to its band, as the axis does.
+        const maxLine = step * (1 - bandPadding) * 0.9;
+        const wrapped = Math.max(0, ...labels.map((label) => {
+            const text = measure(label);
+            if (text <= maxLine)
+                return text;
+            const words = Math.max(0, ...label.split(/\s+/).map(measure));
+            return Math.max(words, maxLine);
+        }));
+        if (wrapped <= room)
+            return { ...flat, width: wrapped };
+        // Turned, a label stands as wide as a line of text across its step.
+        if (room >= lineHeight / Math.sin(Math.PI / 4))
+            return { rotate: -45, every: 1, width: whole };
+        if (room >= lineHeight)
+            return { rotate: -90, every: 1, width: whole };
+        return { rotate: -90, every: Math.ceil(lineHeight / Math.max(1, room)), width: whole };
+    }
+    /**
+     * The layout of a category axis running down the plot, whose labels stand
+     * flat in a row each: only how many can be written.
+     */
+    static rows(count, span, fontSize) {
+        if (count < 2 || span <= 0)
+            return 1;
+        const row = span / count;
+        return Math.max(1, Math.ceil((fontSize * 1.2 + 2) / row));
+    }
+}

package/dist/layout/styles/StylesLayout.svelte

@@ -1,7 +1,7 @@
 <script lang="ts">
 	import { Frame } from 'svelteplot';
 	import TileLayer from './TileLayer.svelte';
-	import { geometryLonLatBounds } from '../../plots/utils/geoAccessors';
+	import { GeoGeometry } from '../../plots/map/geo/GeoGeometry';
 	import type { StylesLayoutConfig } from '../../types/layout/styles';
 
 	/**
@@ -36,7 +36,7 @@
 		let minLat = Infinity;
 		let maxLat = -Infinity;
 		for (const f of features) {
-			const b = geometryLonLatBounds(f.geometry);
+			const b = GeoGeometry.lonLatBounds(f.geometry);
 			if (!b) continue;
 			if (b[0] < minLon) minLon = b[0];
 			if (b[2] > maxLon) maxLon = b[2];

package/dist/layout/styles/ValueLabels.d.ts

@@ -8,7 +8,7 @@ import type { FontStyle, StrokeStyle } from '../../types/plots/styling';
 import type { TextAnchor, ValueAnchor } from '../../types/plots/constants';
 import type { BoxAnchors, EdgeBox } from '../../types/layout/box';
 import type { MarginSide } from '../../types/plots/props';
-import type { AxisPlotCtx, AxisPlotState, ProcessedRow } from '../../types/phases';
+import type { AxisPlotCtx, AxisPlotState, ProcessedData, ProcessedRow } from '../../types/phases';
 import type { TextMarkerConfig } from '../../types/markers/common';
 /**
  * A plot's value labels: the author's `styles.values` over the plot kind's
@@ -20,12 +20,14 @@ export declare class ValueLabels {
     #private;
     readonly show: boolean;
     readonly anchor: ValueAnchor;
-    readonly format: (value: number, seriesName: string) => string;
+    readonly format: (value: number, seriesName: string, row?: Record<string, unknown>) => string;
     readonly hoverIsolate: boolean;
     readonly font: FontStyle | undefined;
     readonly fontSize: number;
     /** The connectors of labels that had to move apart. */
     readonly strokeStyle: StrokeStyle | undefined;
+    /** `'series'` writes each label in its series' color; any other CSS color writes them all in it. */
+    readonly color: 'series' | string | undefined;
     /** How labels that would overlap move apart - the configuration's `text.declutter`. */
     readonly declutter: PlotStylesConfig['text']['declutter'];
     /** Where the labels are expected to sit: boxes around their points, on the edges those can reach. */
@@ -33,6 +35,14 @@ export declare class ValueLabels {
     constructor(values: ValuesStyle | undefined, cfg: PlotStylesConfig, options?: Omit<ValueLabelsOptions<never>, 'reach'>, reach?: (labels: ValueLabels) => EdgeBox[]);
     /** A plot's value labels: `values` over `options`, the kind's own defaults, their reach read off `state`. */
     static build<TState>(values: ValuesStyle | undefined, cfg: PlotStylesConfig, options: ValueLabelsOptions<TState>, state: TState): ValueLabels;
+    /** The configuration the labels were built under, for a plot kind's own label defaults. */
+    get config(): PlotStylesConfig;
+    /**
+     * The fill every label takes whatever its series: the author's own
+     * `fontStyle.fill`, else a literal `color`. `undefined` leaves each label to
+     * its plot's default (its series' color, or the axis').
+     */
+    get fill(): string | undefined;
     /** One line of label text's height. */
     get lineHeight(): number;
     /** The box one label's `text` takes. */
@@ -82,9 +92,27 @@ export declare class ValueLabels {
      * (`filter` + `selectLast`, per series), at its top (a stacked row's
      * `y2`), labelled with its own value and placed by `anchor`. Labels that
      * would overlap fan out into a shared column (`declutter`), colored by the
-     * segment the row falls in.
+     * segment the row falls in. A plot that labels each end of its series apart
+     * passes the `rows` and `anchor` of one end, and `lane` to route its labels
+     * out to a lane whether or not they overlap (`flip: false` keeps one on the
+     * left in the margin instead of flipping it over its points).
      */
-    atSeriesEnds<TData extends Record<string, unknown>>(state: AxisPlotState<TData, object>): TextMarkerConfig[];
+    atSeriesEnds<TData extends Record<string, unknown>>(state: AxisPlotState<TData, object>, end?: {
+        rows?: ProcessedRow[];
+        anchor?: ValueAnchor;
+        lane?: boolean | {
+            elbowGap: number;
+        };
+        flip?: boolean;
+    }): TextMarkerConfig[];
+    /** How far (px) a lane takes the label of a series' first point from it - clear of the line that leaves it. */
+    static readonly FIRST_LANE_GAP = 28;
+    /** The rows of a series-over-`x` plot that cannot be labelled: a gap, or a stack with no top. For the "transforms" phase's `labels.skip`. */
+    static skipGaps<TData extends Record<string, unknown>>(state: {
+        processedData?: ProcessedData;
+        resolvedSeries?: Series<TData>[];
+        axes?: PlotAxes;
+    }): (row: ProcessedRow) => boolean;
     /**
      * Where {@link atSeriesEnds}' labels are expected to sit: past each
      * series' last point, at the right edge (or the left, for labels set
@@ -93,5 +121,5 @@ export declare class ValueLabels {
      * domain when the scales set one, so it holds across a timeline; else off
      * every value.
      */
-    reachAtSeriesEnds<TData extends Record<string, unknown>>(state: AxisPlotState<TData, object>): EdgeBox[];
+    reachAtSeriesEnds<TData extends Record<string, unknown>>(state: AxisPlotState<TData, object>, anchor?: ValueAnchor): EdgeBox[];
 }

package/dist/layout/styles/ValueLabels.js

@@ -1,9 +1,8 @@
 import { ProcessedPositions } from '../../phases/transforms/ProcessedPositions';
 import { Box } from '../margins/Box';
-import { resolveAccessor } from '../../plots/utils/accessors';
+import { resolveAccessor } from '../../utils/accessors';
 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';
 import { PlotAxes } from '../../phases/data/PlotAxes';
 /**
@@ -21,6 +20,8 @@ export class ValueLabels {
     fontSize;
     /** The connectors of labels that had to move apart. */
     strokeStyle;
+    /** `'series'` writes each label in its series' color; any other CSS color writes them all in it. */
+    color;
     /** How labels that would overlap move apart - the configuration's `text.declutter`. */
     declutter;
     /** Where the labels are expected to sit: boxes around their points, on the edges those can reach. */
@@ -34,6 +35,7 @@ export class ValueLabels {
         this.font = values?.fontStyle;
         this.fontSize = typeof this.font?.fontSize === 'number' ? this.font.fontSize : 12;
         this.strokeStyle = values?.strokeStyle;
+        this.color = values?.color;
         this.declutter = cfg.text.declutter;
         this.#cfg = cfg;
         this.reach = (this.show && reach?.(this)) || [];
@@ -43,6 +45,18 @@ export class ValueLabels {
         const { reach } = options;
         return new ValueLabels(values, cfg, options, reach && ((labels) => reach(labels, state)));
     }
+    /** The configuration the labels were built under, for a plot kind's own label defaults. */
+    get config() {
+        return this.#cfg;
+    }
+    /**
+     * The fill every label takes whatever its series: the author's own
+     * `fontStyle.fill`, else a literal `color`. `undefined` leaves each label to
+     * its plot's default (its series' color, or the axis').
+     */
+    get fill() {
+        return this.font?.fill ?? (this.color === 'series' ? undefined : this.color);
+    }
     /** One line of label text's height. */
     get lineHeight() {
         return this.fontSize * 1.2;
@@ -133,13 +147,45 @@ export class ValueLabels {
      * (`filter` + `selectLast`, per series), at its top (a stacked row's
      * `y2`), labelled with its own value and placed by `anchor`. Labels that
      * would overlap fan out into a shared column (`declutter`), colored by the
-     * segment the row falls in.
+     * segment the row falls in. A plot that labels each end of its series apart
+     * passes the `rows` and `anchor` of one end, and `lane` to route its labels
+     * out to a lane whether or not they overlap (`flip: false` keeps one on the
+     * left in the margin instead of flipping it over its points).
      */
-    atSeriesEnds(state) {
+    atSeriesEnds(state, end = {}) {
+        if (end.rows)
+            return this.#seriesEnds(state, end);
+        // A label on a series' first point would sit on its own line: it goes out to a lane instead.
+        const firsts = ValueLabels.#firstRows(state);
+        const labelled = state.labelled ?? [];
+        return [
+            ...this.#seriesEnds(state, { rows: labelled.filter((row) => !firsts.has(row)) }),
+            ...this.#seriesEnds(state, {
+                rows: labelled.filter((row) => firsts.has(row)),
+                lane: { elbowGap: ValueLabels.FIRST_LANE_GAP }
+            })
+        ];
+    }
+    /** How far (px) a lane takes the label of a series' first point from it - clear of the line that leaves it. */
+    static FIRST_LANE_GAP = 28;
+    /** The first row of every series that has more than one. */
+    static #firstRows(state) {
+        const first = new Map();
+        const counts = new Map();
+        for (const row of state.processedData?.data ?? []) {
+            const id = String(row[SERIES_ID_KEY]);
+            if (!first.has(id))
+                first.set(id, row);
+            counts.set(id, (counts.get(id) ?? 0) + 1);
+        }
+        return new Set([...first].filter(([id]) => (counts.get(id) ?? 0) > 1).map(([, row]) => row));
+    }
+    #seriesEnds(state, end) {
         const processed = state.processedData;
         if (!processed)
             return [];
-        const { font, anchor, format } = this;
+        const { font, format } = this;
+        const anchor = end.anchor ?? this.anchor;
         const position = ProcessedPositions.of(processed);
         const topOf = (d) => position.y(d);
         const nameOf = (d) => String(d[SERIES_KEY]);
@@ -153,33 +199,39 @@ export class ValueLabels {
                 group?.color ??
                 state.colorForSeries?.(nameOf(d)));
         };
-        const marker = Transforms.resolve({
+        const marker = {
             type: 'text',
-            data: processed.data,
+            // The rows the "transforms" phase picked for the labels: by default each series' last.
+            data: end.rows ?? state.labelled ?? [],
             x: (processed.channels.x ?? position.x),
             y: (processed.channels.y2 ?? processed.channels.y ?? topOf),
             grouping: SERIES_ID_KEY,
-            transforms: [
-                {
-                    type: 'filter',
-                    filter: (d) => !isGapValue(valueOf(d)) && !isGapValue(topOf(d))
-                },
-                { type: 'selectLast' }
-            ],
             text: (d) => format(Number(valueOf(d)), nameOf(d)),
             styles: {
                 ...font,
+                ...(this.fill ? { fill: this.fill } : {}),
                 fontSize: font?.fontSize ?? 12,
                 dx: font?.dx ?? (anchor === 'start' ? 6 : anchor === 'end' ? -6 : 0),
                 dy: font?.dy ?? (anchor === 'outside' ? -8 : 0),
                 textAnchor: this.textAnchor ?? (anchor === 'start' || anchor === 'end' ? anchor : 'middle'),
                 lineAnchor: font?.lineAnchor ?? (anchor === 'outside' ? 'bottom' : 'middle')
             },
-            fill: font?.fill ? undefined : colorOf,
-            declutter: { connector: this.strokeStyle }
-        }, processed.data);
+            fill: this.fill ? undefined : colorOf,
+            declutter: {
+                connector: this.strokeStyle,
+                aligned: !!end.lane && (anchor === 'start' || anchor === 'end'),
+                elbowGap: typeof end.lane === 'object' ? end.lane.elbowGap : undefined,
+                flip: end.flip
+            }
+        };
         return marker.data?.length ? [marker] : [];
     }
+    /** The rows of a series-over-`x` plot that cannot be labelled: a gap, or a stack with no top. For the "transforms" phase's `labels.skip`. */
+    static skipGaps(state) {
+        const valueOf = ValueLabels.valueOf(state);
+        const top = ProcessedPositions.of(state.processedData).y;
+        return (row) => isGapValue(valueOf(row)) || isGapValue(top(row));
+    }
     /**
      * Where {@link atSeriesEnds}' labels are expected to sit: past each
      * series' last point, at the right edge (or the left, for labels set
@@ -188,9 +240,9 @@ export class ValueLabels {
      * domain when the scales set one, so it holds across a timeline; else off
      * every value.
      */
-    reachAtSeriesEnds(state) {
+    reachAtSeriesEnds(state, anchor = this.anchor) {
         const series = state.resolvedSeries ?? [];
-        const { anchor, font, format } = this;
+        const { font, format } = this;
         const dx = typeof font?.dx === 'number' ? font.dx : anchor === 'start' ? 6 : anchor === 'end' ? -6 : 0;
         const dy = typeof font?.dy === 'number' ? font.dy : anchor === 'outside' ? -8 : 0;
         const textAnchor = this.textAnchor ?? (anchor === 'start' ? 'start' : anchor === 'end' ? 'end' : 'middle');
@@ -203,11 +255,18 @@ export class ValueLabels {
         const { elbowGap, laneStep, labelGap } = this.declutter;
         const lanes = elbowGap + (series.length - 1) * laneStep + labelGap;
         const at = { x: series.length > 1 ? (Math.sign(dx) || 1) * lanes : dx, y: dy };
+        // Only a label that can sit at the plot's right end - any but a first point's - reaches that edge.
+        const selects = state.labelSelects ?? [];
+        const atRight = selects.length === 0 || selects.some((select) => select !== 'first');
+        // Likewise a label set before its point reaches the left edge only from a point that can sit there: any but a last one - or a last one that is also the first, of a series with a single point.
+        const atLeft = selects.length === 0 ||
+            selects.some((select) => select !== 'last') ||
+            series.some((s) => s.data.length < 2);
         const edges = [
             'top',
             'bottom',
-            ...(dx < 0 ? ['left'] : []),
-            ...(dx >= 0 || series.length > 1 ? ['right'] : [])
+            ...(dx < 0 && atLeft ? ['left'] : []),
+            ...((dx >= 0 || series.length > 1) && atRight ? ['right'] : [])
         ];
         const texts = [];
         const domain = state.scales.y?.domain;

package/dist/layout/timeline/TimelineLayout.svelte

@@ -1,6 +1,6 @@
 <script lang="ts" generics="TRow extends Record<string, unknown>">
 	import { untrack } from 'svelte';
-	import { resolveAccessor } from '../../plots/utils/accessors';
+	import { resolveAccessor } from '../../utils/accessors';
 	import TimelineFrame from './TimelineFrame.svelte';
 	import { TimelineSteps } from './TimelineSteps';
 	import { TimelineTime } from './TimelineTime';

package/dist/layout/tooltip/Tooltip.svelte

@@ -1,7 +1,7 @@
 <script lang="ts" generics="TRow extends Record<string, unknown>">
 	import type { Snippet } from 'svelte';
 	import { TooltipState } from './TooltipState.svelte';
-	import type { TooltipAnchorX, TooltipAnchorY } from '../../types/layout/tooltip';
+	import type { TooltipAnchorX, TooltipAnchorY, TooltipRow } from '../../types/layout/tooltip';
 
 	/**
 	 * A plot's floating tooltip at `(x, y)`, inside a `position: relative`
@@ -28,13 +28,13 @@
 		visible: boolean;
 		x: number;
 		y: number;
-		/** Every row the hover matched. */
-		rows: TRow[];
+		/** Every row the hover matched, with the color the plot draws it in. */
+		rows: TooltipRow<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[] }]>;
+		content?: Snippet<[{ rows: TooltipRow<TRow>[] }]>;
 		/** Box the tooltip must stay within. Defaults to its plot's box. */
 		bounds?: { width: number; height: number };
 		/** Preferred horizontal side of the point. Defaults to `'right'`. */