@fundar/data-chart-telling 1.0.0 → 1.2.0

package/dist/layout/legend/LegendChannels.js

@@ -1,11 +1,11 @@
-import { resolveAccessor } from '../../plots/utils/accessors';
+import { resolveAccessor } from '../../utils/accessors';
 import { getConfiguration } from '../../configuration/config.svelte';
 import { ChannelName } from '../../plots/utils/ChannelName';
 import { MarkerKinds } from '../../markers/MarkerKinds';
 import { ContinuousDomain } from '../../utils/ContinuousDomain';
-import { resolveColorScale } from '../../utils/color';
-import { resolveOpacityScale } from '../../utils/opacity';
-import { resolveSymbolScale } from '../../utils/symbol';
+import { ColorRamp } from '../../utils/color';
+import { OpacityScale } from '../../utils/OpacityScale';
+import { SymbolScale } from '../../utils/SymbolScale';
 /**
  * What a plot's value channels - `color`, `opacity`, `r` and `symbol` - draw
  * with, as legend entries: the plot's own (a heatmap's cells, a map's
@@ -17,6 +17,7 @@ export class LegendChannels {
         const taken = new Set((plot.resolvedSeries ?? []).map((s) => s.name));
         return [
             ...LegendChannels.#plotColor(plot),
+            ...LegendChannels.#segmentColors(plot),
             ...markers.flatMap((marker) => LegendChannels.#markerColor(marker, taken)),
             ...LegendChannels.#plotOpacity(plot),
             ...markers.flatMap((marker) => LegendChannels.#markerOpacity(marker, plot)),
@@ -45,6 +46,15 @@ export class LegendChannels {
     static #title(channel, property) {
         return typeof channel === 'string' ? channel : ChannelName.of(channel, property);
     }
+    /** The domain svelteplot sizes with: the configured one or the values' own, taken down to 0 unless `zero` is off. */
+    static #sizeDomain(scale, values) {
+        const [low, high] = scale?.domain ?? [Math.min(...values), Math.max(...values)];
+        return scale?.zero === false ? [low, high] : [Math.min(0, low), Math.max(0, high)];
+    }
+    /** A plot channel's name: its field key, or the name of the function that computes it. */
+    static #sourceTitle(source, property) {
+        return typeof source === 'string' ? source : ChannelName.of(source, property);
+    }
     /** `marker`'s rows read through `channel` (a field or a function), without the missing and non-finite ones. */
     static #values(marker, channel) {
         if (channel === undefined || channel === null || typeof channel === 'number')
@@ -102,6 +112,11 @@ export class LegendChannels {
             LegendChannels.#scaleEntry(typeof source === 'string' ? source : undefined, domain, scale)
         ];
     }
+    /** One continuous ramp per segment that sets its own, over the values of just its own features. */
+    static #segmentColors(plot) {
+        const source = plot.channels?.color?.source;
+        return (plot.colorRamps ?? []).map(({ name, domain, scale }) => LegendChannels.#scaleEntry(typeof source === 'string' ? `${source} (${name})` : name, domain, scale));
+    }
     /**
      * A marker's `color` channel: a continuous scale for numbers; for
      * categories, one item each in the color the marker draws it, unless a
@@ -118,7 +133,7 @@ export class LegendChannels {
             return domain ? [LegendChannels.#scaleEntry(title, domain, scale)] : [];
         }
         const categories = [...new Set(values.map(String))];
-        const colorOf = resolveColorScale(scale, categories, getConfiguration().palette);
+        const colorOf = ColorRamp.resolve(scale, categories, getConfiguration().palette);
         const mark = MarkerKinds.of(marker.type)?.legendSymbol;
         return categories
             .filter((name) => !taken.has(name))
@@ -127,7 +142,7 @@ export class LegendChannels {
     static #opacityEntry(title, domain, scale, color) {
         if (scale?.range !== undefined && !Array.isArray(scale.range))
             return [];
-        const read = resolveOpacityScale(scale, domain, getConfiguration().continuous.opacityRange);
+        const read = OpacityScale.resolve(scale, domain, getConfiguration().continuous.opacityRange);
         return [
             {
                 type: 'opacity',
@@ -141,13 +156,20 @@ export class LegendChannels {
             }
         ];
     }
-    /** The plot's own numeric `opacity` channel, over the `opacityDomain` it hands over. */
+    /**
+     * The plot's own numeric `opacity` channel, over the `opacityDomain` it hands
+     * over, in its series' color - unless a `color` channel colors the marks, and
+     * no one color stands for them.
+     */
     static #plotOpacity(plot) {
         if (!plot.opacityDomain)
             return [];
         const source = plot.channels?.opacity?.source;
         const name = plot.resolvedSeries?.[0]?.name;
-        const color = name !== undefined && name !== 'default' ? plot.colorForSeries?.(name) : undefined;
+        const colored = plot.channels?.color?.source !== undefined || !!plot.colorDomain;
+        const color = !colored && name !== undefined && name !== 'default'
+            ? plot.colorForSeries?.(name)
+            : undefined;
         return LegendChannels.#opacityEntry(typeof source === 'string' ? source : undefined, plot.opacityDomain, plot.scales?.opacity, color);
     }
     /** A marker's numeric `opacity` channel, in the color the marker draws. */
@@ -176,13 +198,14 @@ export class LegendChannels {
         if (values.length === 0)
             return [];
         const { filled, color, symbol } = LegendChannels.look(sized);
-        const source = plot.channels?.r?.source ?? LegendChannels.#title(sized[0].r, 'r');
+        const source = LegendChannels.#sourceTitle(plot.channels?.r?.source, 'r') ??
+            LegendChannels.#title(sized[0].r, 'r');
         return [
             {
                 type: 'size',
                 channel: 'r',
                 ...(typeof source === 'string' ? { title: source } : {}),
-                domain: plot.scales?.r?.domain ?? [0, Math.max(...values)],
+                domain: LegendChannels.#sizeDomain(plot.scales?.r, values),
                 range: plot.scales?.r?.range ?? [0, 10],
                 ...(color ? { color } : {}),
                 filled,
@@ -204,9 +227,10 @@ export class LegendChannels {
             shaped.flatMap((marker) => LegendChannels.#values(marker, marker.symbol).map(String))).filter((value, i, all) => all.indexOf(value) === i);
         if (domain.length === 0)
             return [];
-        const shapeOf = resolveSymbolScale(config, domain, getConfiguration().symbols);
+        const shapeOf = SymbolScale.resolve(config, domain, getConfiguration().symbols);
         const { filled, color } = LegendChannels.look(shaped);
-        const source = plot.channels?.symbol?.source ?? LegendChannels.#title(shaped[0].symbol, 'symbol');
+        const source = LegendChannels.#sourceTitle(plot.channels?.symbol?.source, 'symbol') ??
+            LegendChannels.#title(shaped[0].symbol, 'symbol');
         return [
             {
                 type: 'symbol',

package/dist/layout/legend/LegendLayout.svelte

@@ -15,10 +15,18 @@
 	const defaultItemsLayout = $derived<LegendItemsLayout>(
 		sections.length === 1 ? { type: 'horizontal' } : { type: 'vertical' }
 	);
+
+	// Sections of different channels can share a title, so a key leads with its channel; a repeat takes its position.
+	const keys = $derived.by(() => {
+		const bases = sections.map(
+			(section) => `${'channel' in section ? section.channel : section.type}:${section.title ?? ''}`
+		);
+		return bases.map((base, i) => (bases.indexOf(base) === i ? base : `${base}:${i}`));
+	});
 </script>
 
 <div class="dct-legend">
-	{#each sections as section, i (section.title ?? i)}
+	{#each sections as section, i (keys[i])}
 		<div class="dct-legend__section">
 			{#if section.title}
 				<div class="dct-legend__title">{section.title}</div>

package/dist/layout/legend/LegendState.svelte.d.ts

@@ -18,8 +18,17 @@ export declare class LegendState {
     static current(): LegendState | null;
     /** A new legend, shared with everything below. Call during component init. */
     static provide(): LegendState;
+    /** 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(): void;
+    /** Whether the plots here are kept out of the enclosing legend (see {@link silence}). Call during component init. */
+    static isSilenced(): boolean;
     /** The enclosing figure's legend, or a private one for a legend drawn outside any. Call during component init. */
     static ensure(): LegendState;
+    /** Whether `value` lies within `range`; a missing value always does. */
+    static inRange(value: number | null | undefined, range: {
+        min: number;
+        max: number;
+    }): boolean;
     /** Whether `series` is turned off. */
     isOff(series: string): boolean;
     /** What turning `series` off does, while it is off. */

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,10 +30,22 @@ 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();
     }
+    /** Whether `value` lies within `range`; a missing value always does. */
+    static inRange(value, range) {
+        return value == null || (value >= range.min && value <= range.max);
+    }
     /** Whether `series` is turned off. */
     isOff(series) {
         return this.disabled.has(series);
@@ -145,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,
@@ -169,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,
@@ -181,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,
@@ -264,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/Plot.svelte

@@ -14,7 +14,7 @@
 	import { HoverState } from '../hover/HoverState.svelte';
 	import { HoverSettings } from '../hover/HoverSettings';
 	import { Interpolation } from '../../utils/Interpolation';
-	import { FacetPhase } from '../../phases/facet/FacetPhase';
+	import { FacetPanels } from '../../phases/facet/FacetPanels';
 	import { merge } from '../../utils/merge';
 	import { Pipeline } from '../../phases/Pipeline';
 	import { Slice } from './Slice';
@@ -191,7 +191,9 @@
 			margins: place.margins,
 			tooltip: tooltipConfig,
 			scales: slicing.facetScales<TScales>(sharedScales, place),
-			panel: panels ? FacetPhase.buildPanelState(panels, slicing.panelKey(place) ?? '') : undefined,
+			panel: panels
+				? FacetPanels.buildPanelState(panels, slicing.panelKey(place) ?? '')
+				: undefined,
 			keep: slicing.keep({ time, facet: place })
 		})}
 	</HoverScope>
@@ -246,9 +248,10 @@
 		<TimelineLayout
 			data={rows}
 			accessor={timeline.accessor}
+			dateFormat={timeline.dateFormat}
 			progress={timelineState?.progress ?? timeline.progress ?? 0}
 			values={sharedTimeline ? sharedTimeline.steps : timeline.values}
-			onsteps={ownTimeline ? (found) => ownTimeline.setSteps(found) : undefined}
+			onsteps={ownTimeline ? (found, temporal) => ownTimeline.setSteps(found, temporal) : undefined}
 			orientation={timeline.orientation}
 			show={false}
 			filterMode={slicing.filterMode}

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

@@ -8,7 +8,7 @@ import type { Margins } from '../margins/Margins';
 import type { PlotAxes } from '../../phases/data/PlotAxes';
 import type { AxisValue } from '../../types/layout/mapping';
 import type { HoverPoint, HoverStrategy } from '../../types/layout/hover';
-import type { PlayerControl, TimeValue } from '../../types/layout/timeline';
+import type { PlayerControl, TimeInput, TimelineStep } from '../../types/layout/timeline';
 import type { LegendDisabledAction, LegendEntry, LegendRange } from '../../types/layout/legend';
 /** What the pointer is over, shared by every plot in a figure. Read-only. */
 export declare class PublicHover {
@@ -69,11 +69,11 @@ export declare class PublicTimeline {
     /** Whether the figure has a timeline at all. */
     get enabled(): boolean;
     /** Every step it moves across, ascending. */
-    get steps(): TimeValue[];
+    get steps(): TimelineStep[];
     /** The position across the steps, `0`-`1`. */
     get progress(): number;
     /** The step the position lands on, or `undefined` without steps. */
-    get value(): TimeValue | undefined;
+    get value(): TimelineStep | undefined;
     get index(): number;
     get playing(): boolean;
     get loop(): boolean;
@@ -83,7 +83,8 @@ export declare class PublicTimeline {
     get controls(): PlayerControl[];
     seek(progress: number): void;
     seekIndex(index: number): void;
-    seekValue(value: TimeValue): void;
+    /** Moves to the step closest to `value`. */
+    seekValue(value: TimeInput): void;
     next(): void;
     previous(): void;
     play(): void;

package/dist/layout/plot/PublicPlotContext.js

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

package/dist/layout/plot/Slice.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,6 +1,7 @@
-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';
 import { buildFacetAxesDisplay } from '../facet/axes';
 import { buildFacetPlaceKey, isFacetWrap } from '../facet/config';
 /**
@@ -55,10 +56,11 @@ export class Slice {
         };
         if (timeline && place.time !== undefined) {
             const get = resolveAccessor(timeline.accessor);
+            const reader = new TimelineTime(timeline.dateFormat);
             const time = place.time;
             tests.push((row) => {
-                const value = get(row);
-                if (value == null)
+                const value = reader.toTime(get(row));
+                if (value === undefined)
                     return true;
                 return TimelineSteps.matches(value, time, this.filterMode);
             });
@@ -88,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/EdgeTicks.d.ts

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

package/dist/layout/scales/EdgeTicks.js

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

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

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