@fundar/data-chart-telling 1.1.0 → 1.2.0

package/dist/layout/legend/LegendState.svelte.js

@@ -5,6 +5,7 @@ import { MarkerKinds } from '../../markers/MarkerKinds';
 import { LegendChannels } from './LegendChannels';
 import { LegendText } from './LegendText';
 const LEGEND_KEY = Symbol('dct-legend');
+const QUIET_KEY = Symbol('dct-legend-quiet');
 /**
  * A figure's legend, shared by every plot and legend under it: what the
  * reader turned off - each series' {@link LegendDisabledAction}, and the
@@ -29,6 +30,14 @@ export class LegendState {
         setContext(LEGEND_KEY, legend);
         return legend;
     }
+    /** Keeps the plots below out of the enclosing legend: they still follow its toggles, but add nothing to it. Call during component init. */
+    static silence() {
+        setContext(QUIET_KEY, true);
+    }
+    /** Whether the plots here are kept out of the enclosing legend (see {@link silence}). Call during component init. */
+    static isSilenced() {
+        return getContext(QUIET_KEY) ?? false;
+    }
     /** The enclosing figure's legend, or a private one for a legend drawn outside any. Call during component init. */
     static ensure() {
         return LegendState.current() ?? new LegendState();
@@ -149,19 +158,21 @@ export class LegendState {
                 const { title, domain, range, color, filled, symbol } = entry;
                 ramps.push({
                     type: 'size',
+                    channel: 'r',
                     title: title && format(title),
                     domain,
                     range,
                     color,
                     filled,
                     ...(symbol ? { symbol } : {}),
-                    ...adjust('size', title)
+                    ...adjust('r', title)
                 });
             }
             else if (entry.type === 'symbol') {
                 const { title, items: shapes, color, filled } = entry;
                 ramps.push({
                     type: 'symbol',
+                    channel: 'symbol',
                     title: title && format(title),
                     items: shapes,
                     color,
@@ -173,6 +184,7 @@ export class LegendState {
                 const { title, min, max, opacityMin, opacityMax, color } = entry;
                 ramps.push({
                     type: 'continuous',
+                    channel: 'opacity',
                     title: title && format(title),
                     min,
                     max,
@@ -185,6 +197,7 @@ export class LegendState {
                 const { title, min, max, colorMin, colorMax, scheme, pivot } = entry;
                 const section = {
                     type: 'continuous',
+                    channel: 'color',
                     title: title && format(title),
                     min,
                     max,
@@ -268,11 +281,15 @@ export class LegendState {
      */
     static entriesOf(plot) {
         const color = (name) => name !== undefined && name !== 'default' ? plot.colorForSeries?.(name) : undefined;
+        // A marker that is `legend: false` is decoration - a connector - and does not give the series its symbol.
         const mark = plot.markers
-            ?.map((marker) => MarkerKinds.of(marker.type)?.legendSymbol)
+            ?.filter((marker) => marker.legend !== false)
+            .map((marker) => MarkerKinds.of(marker.type)?.legendSymbol)
             .find((kind) => kind !== undefined);
         const dots = LegendChannels.look((plot.markers ?? []).filter((marker) => marker.type === 'dot' && !marker.legend));
-        const series = (plot.resolvedSeries ?? []).map((s) => ({
+        // A series with no rows draws nothing, so it has nothing to show.
+        const drawn = (plot.resolvedSeries ?? []).filter((s) => !Array.isArray(s.data) || s.data.length > 0);
+        const series = drawn.map((s) => ({
             type: 'series',
             name: s.name,
             color: color(s.name),

package/dist/layout/legend/SizeSection.svelte

@@ -1,7 +1,7 @@
 <script lang="ts">
 	import { ticks } from 'd3-array';
 	import type { SizeLegendSection } from '../../types/layout/legend';
-	import { SymbolPath } from '../../utils/symbol';
+	import { SymbolPath } from '../../utils/SymbolPath';
 	import { AxisNumberFormat } from './AxisNumberFormat';
 	import { getConfiguration } from '../../configuration/config.svelte';
 

package/dist/layout/margins/PlotMargins.svelte.d.ts

@@ -29,6 +29,8 @@ export type PlotMarginsInputs = {
     scales: () => Partial<Record<AxisChannelName, Pick<AxisScale, 'tickRotate'>>> | undefined;
     /** The tick labels' font size. */
     tickFontSize: () => number;
+    /** How wide the widest tick label of an axis is, where the plot measured it: a rotated axis takes room for that, not for a guessed width. */
+    tickWidth?: () => Partial<Record<AxisChannelName, number | undefined>>;
     /** Receives the margins the labels settled on - the plot's bindable `margins`. */
     settle?: (margins: MarginConfig) => void;
 };
@@ -93,9 +95,4 @@ export declare class PlotMargins {
         x: number;
         y: number;
     }, anchor: BoxAnchors): Box;
-    /**
-     * Changes whenever the labels' margins move after mount, which svelteplot
-     * only takes on a remount. The same margins read back from `settle` keep it.
-     */
-    readonly remountKey: string;
 }

package/dist/layout/margins/PlotMargins.svelte.js

@@ -161,18 +161,19 @@ export class PlotMargins {
     /**
      * How much more room (or less) each axis' rotated tick labels take across
      * it, on its side. An x label stands as tall as its text, a y label as wide;
-     * rotated, it reaches across by its turned box. A label is taken as twice
-     * as wide as its font size.
+     * rotated, it reaches across by its turned box.
      */
     #tickRoom = $derived.by(() => {
         const scales = this.#inputs.scales();
         const height = this.#inputs.tickFontSize();
-        const width = 2 * height;
+        const measured = this.#inputs.tickWidth?.();
         const room = {};
         for (const axis of ['x', 'y']) {
             const degrees = scales?.[axis]?.tickRotate;
             if (!degrees)
                 continue;
+            // A label is taken as twice as wide as its font size, unless the plot measured it.
+            const width = measured?.[axis] || 2 * height;
             const rad = (degrees * Math.PI) / 180;
             const [across, along] = axis === 'x' ? [height, width] : [width, height];
             const turned = Math.abs(Math.cos(rad)) * across + Math.abs(Math.sin(rad)) * along;
@@ -211,9 +212,4 @@ export class PlotMargins {
     place(size, point, anchor) {
         return size.placeNear(point, anchor, this.box);
     }
-    /**
-     * Changes whenever the labels' margins move after mount, which svelteplot
-     * only takes on a remount. The same margins read back from `settle` keep it.
-     */
-    remountKey = $derived.by(() => JSON.stringify(this.#labels ?? null));
 }

package/dist/layout/plot/Slice.d.ts

@@ -39,6 +39,10 @@ export declare class Slice<TRow extends Record<string, unknown>> {
      * displays its axes.
      */
     facetScales<TScales extends object>(shared: Record<string, object> | undefined, place: FacetCellContext<TRow>): TScales | undefined;
-    /** The scales a timeline alone keeps every step on - the domains all its rows span - unless it fits each step's own. */
+    /**
+     * The scales a timeline alone keeps every step on - the domains all its rows
+     * span - unless it fits each step's own: both under `'free'`, or the one axis
+     * `'free-x'`/`'free-y'` names, which leaves the other on its shared domain.
+     */
     timelineScales<TScales extends object>(shared: Record<string, object> | undefined): TScales | undefined;
 }

package/dist/layout/plot/Slice.js

@@ -1,4 +1,4 @@
-import { resolveAccessor } from '../../plots/utils/accessors';
+import { resolveAccessor } from '../../utils/accessors';
 import { merge } from '../../utils/merge';
 import { TimelineSteps } from '../timeline/TimelineSteps';
 import { TimelineTime } from '../timeline/TimelineTime';
@@ -90,11 +90,21 @@ export class Slice {
             return undefined;
         return merge(shared?.[key], this.#axes?.(place));
     }
-    /** The scales a timeline alone keeps every step on - the domains all its rows span - unless it fits each step's own. */
+    /**
+     * The scales a timeline alone keeps every step on - the domains all its rows
+     * span - unless it fits each step's own: both under `'free'`, or the one axis
+     * `'free-x'`/`'free-y'` names, which leaves the other on its shared domain.
+     */
     timelineScales(shared) {
         const { timeline, facet } = this;
-        if (!timeline || facet || timeline.scales === 'free')
+        const mode = timeline?.scales;
+        if (!timeline || facet || mode === 'free')
             return undefined;
-        return shared?.[''];
+        const all = shared?.[''];
+        if (!all || (mode !== 'free-x' && mode !== 'free-y'))
+            return all;
+        const kept = { ...all };
+        delete kept[mode === 'free-x' ? 'x' : 'y'];
+        return kept;
     }
 }

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

@@ -1,4 +1,5 @@
 import type { AxisChannelName } from '../../types/layout/mapping';
+import type { NiceOption } from '../../types/layout/scales';
 /**
  * "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
@@ -24,6 +25,8 @@ export declare class NiceTicks {
     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[];
+    /** The tolerance a scale's `nice` asks for, or `undefined` for the default. */
+    static toleranceOf(nice: NiceOption | undefined): number | undefined;
     /** How many ticks fit `span` pixels at one per `spacing`, and at least `min`. */
     static count(span: number, spacing: number, min: number): number;
     /**

package/dist/layout/scales/NiceTicks.js

@@ -44,6 +44,10 @@ export class NiceTicks {
             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));

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,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={xEdgeTicks?.ticks}
+		ticks={(xEdgeTicks?.ticks ?? tickValues?.x) as string[] | undefined}
+		{...turned}
 		tickCount={xTickCount}
 		interval={xTickInterval}
 		tickSize={scales?.x?.tickSize ?? cfg.axis.xTickSize}
@@ -234,13 +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}
+		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[];
 }