@fundar/data-chart-telling 1.0.0 → 1.2.0

package/dist/layout/scales/NiceTicks.js

@@ -0,0 +1,76 @@
+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;
+    }
+    /** The tolerance a scale's `nice` asks for, or `undefined` for the default. */
+    static toleranceOf(nice) {
+        return typeof nice === 'object' ? nice.tolerance : undefined;
+    }
+    /** 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,10 +4,12 @@
 	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';
+	import type { PlotLayoutState } from '../../types/layout/plot';
 
 	/** Axis ticks, titles and grid lines for the plot kinds with an x/y axis pair. */
 	let {
@@ -17,7 +19,10 @@
 		width,
 		height,
 		numericMargins,
-		scales
+		scales,
+		edgeDomains = undefined,
+		tickValues = undefined,
+		state: plotState
 	}: {
 		data: TData[];
 		getX: (d: TData) => AxisValue;
@@ -26,8 +31,23 @@
 		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]>;
+		/** 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;
 
@@ -50,7 +70,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 +95,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,58 +114,92 @@
 		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;
+		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;
 	}
 
 	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 ||
 			scale?.interval != null ||
-			scale?.domain != null
+			(scale?.domain != null && !fittedAxes?.includes(axis))
 		)
 			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);
+			}
+		});
+	});
+
+	/** 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);
 
 	/**
@@ -154,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;
@@ -187,11 +242,54 @@
 	$effect(() => () => {
 		$autoMarginLeft.delete(marginId);
 	});
+
+	// 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={xTicksExplicit}
+		ticks={(xEdgeTicks?.ticks ?? tickValues?.x) as string[] | undefined}
+		{...turned}
 		tickCount={xTickCount}
 		interval={xTickInterval}
 		tickSize={scales?.x?.tickSize ?? cfg.axis.xTickSize}
@@ -201,12 +299,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 ?? 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[];
@@ -14,6 +15,15 @@ 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]>;
+        /** 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

@@ -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 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

@@ -0,0 +1,86 @@
+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 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) {
+        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';
+        // 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;
+        if (removesAxis)
+            out.axis = false;
+        if (scale?.labelOrientation === 'vertical')
+            out.label = false;
+        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 (typeof sort !== 'function' || 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 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;
+        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/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[];
 }