@fundar/data-chart-telling 1.1.0 → 1.3.0

package/dist/layout/legend/DiscreteSymbolIcon.svelte

@@ -1,23 +1,43 @@
 <script lang="ts">
+	import { getConfiguration } from '../../configuration/config.svelte';
 	import type { LegendItem } from '../../types/layout/legend';
-	import type { LineStyle } from '../../types/plots/constants';
-	import { SymbolPath } from '../../utils/symbol';
+	import type { LineStyle, SymbolType } from '../../types/plots/constants';
+	import { SymbolPath } from '../../utils/SymbolPath';
 
 	/**
 	 * The series' symbol/line-style icon, shared by both discrete item looks
 	 * (`DiscreteSwatchItem` and `DiscreteBadgeItem`) so the two stay in sync.
 	 * `color` is caller-supplied rather than read off `item` - the swatch look
 	 * fills it with the series color, the badge look with its own label color.
-	 * A shape draws as the plot's dot does, fitted to the icon.
+	 * The shape is the item's own `symbol`, or the one `legend.icon.marks` gives
+	 * the way it draws. A shape draws as the plot's dot does, fitted to the icon;
+	 * `legend.icon.rounded` softens its corners.
 	 */
 	let { item, color }: { item: LegendItem; color: string } = $props();
 
+	const cfg = $derived(getConfiguration());
+	const icon = $derived(cfg.legend.icon);
+	const shape = $derived<SymbolType>(
+		item.symbol ?? (item.mark ? icon.marks[item.mark] : undefined) ?? 'square'
+	);
+	const rounded = $derived(icon.rounded);
 	const filled = $derived(item.filled ?? true);
-	const paint = $derived(
-		filled
-			? { fill: color }
-			: { fill: 'none', stroke: color, 'stroke-width': 1.5, 'vector-effect': 'non-scaling-stroke' }
+	// A rounded filled shape grows a same-colored stroke with round joins, so it is drawn smaller by that much.
+	const paint = $derived<Record<string, string | number>>(
+		!filled
+			? {
+					fill: 'none',
+					stroke: color,
+					'stroke-width': 1.5,
+					...(rounded ? { 'stroke-linejoin': 'round' } : {}),
+					'vector-effect': 'non-scaling-stroke'
+				}
+			: rounded
+				? { fill: color, stroke: color, 'stroke-width': 1.5, 'stroke-linejoin': 'round' }
+				: { fill: color }
 	);
+	const size = $derived(filled ? (rounded ? 6.5 : 8) : 7);
+	const offset = $derived(!filled ? 1.5 : rounded ? 1.75 : 1);
 
 	function dashArray(style?: LineStyle): string | undefined {
 		switch (style) {
@@ -34,13 +54,7 @@
 </script>
 
 <svg class="dct-discrete__swatch" viewBox="0 0 15 10">
-	{#if item.symbol && item.symbol !== 'line'}
-		<path
-			d={SymbolPath.fitted(item.symbol, filled ? 8 : 7)}
-			transform={filled ? 'translate(1,1)' : 'translate(1.5,1.5)'}
-			{...paint}
-		/>
-	{:else if item.symbol === 'line'}
+	{#if shape === 'line'}
 		<line
 			x1="2"
 			y1="5"
@@ -51,8 +65,18 @@
 			stroke-linecap="round"
 			stroke-dasharray={dashArray(item.lineStyle)}
 		/>
-	{:else}
+	{:else if rounded && filled && shape === 'square'}
+		<rect x="1" y="1" width="8" height="8" rx="2" fill={color} />
+	{:else if rounded && filled && shape === 'triangle'}
+		<path
+			d="M 6 2 L 9 7.5 A 1.5 1.5 0 0 1 7.8 10 L 2.2 10 A 1.5 1.5 0 0 1 1 7.5 L 4 2 A 1.5 1.5 0 0 1 6 2"
+			fill={color}
+			transform="translate(0,-1)"
+		/>
+	{:else if shape === 'square' && filled && !rounded}
 		<rect x="1" y="1" width="8" height="8" fill={color} />
+	{:else}
+		<path d={SymbolPath.fitted(shape, size)} transform="translate({offset},{offset})" {...paint} />
 	{/if}
 </svg>
 

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,6 +18,10 @@ 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. */

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),
@@ -323,11 +340,9 @@ export class LegendState {
             ...(entry.label ? { label: entry.label } : {}),
             color: entry.color,
             ...(entry.filled === false ? { filled: false } : {}),
-            ...(entry.symbol || entry.mark === 'dot'
-                ? { symbol: entry.symbol ?? 'circle' }
-                : entry.mark === 'line'
-                    ? { symbol: 'line', lineStyle: entry.lineStyle ?? 'solid' }
-                    : {})
+            ...(entry.mark ? { mark: entry.mark } : {}),
+            ...(entry.symbol ? { symbol: entry.symbol } : {}),
+            ...(entry.mark === 'line' ? { lineStyle: entry.lineStyle ?? 'solid' } : {})
         };
     }
 }

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

@@ -148,8 +148,39 @@ export class PlotMargins {
             if (held !== undefined || grown !== undefined)
                 out[side] = Math.max(held ?? 0, grown ?? 0);
         }
+        for (const [a, b, extent] of [
+            ['left', 'right', width],
+            ['top', 'bottom', height]
+        ]) {
+            PlotMargins.#keepContent(out, [a, b], extent, author, estimate);
+        }
         return out;
     });
+    /** The share of a box's extent its margins always leave to the plot's own area. */
+    static #MIN_CONTENT = 0.25;
+    /**
+     * Cuts the growth of two opposite sides of `out`, in proportion, until they
+     * leave the plot's area its minimum share of `extent` - a negative area makes
+     * svelteplot draw marks with negative sizes. A side never goes below the
+     * estimate, and a side the author fixed is left alone.
+     */
+    static #keepContent(out, sides, extent, author, estimate) {
+        const fixed = (side) => {
+            const own = author?.[side];
+            return typeof own === 'number' ? own : estimate[side];
+        };
+        const used = (side) => out[side] ?? fixed(side);
+        const over = used(sides[0]) + used(sides[1]) - extent * (1 - PlotMargins.#MIN_CONTENT);
+        const room = sides.map((side) => out[side] === undefined ? 0 : Math.max(0, out[side] - estimate[side]));
+        const total = room[0] + room[1];
+        if (over <= 0 || total <= 0)
+            return;
+        const cut = Math.min(over, total);
+        sides.forEach((side, i) => {
+            if (out[side] !== undefined)
+                out[side] -= (cut * room[i]) / total;
+        });
+    }
     /** The author's margins, with the room labels need. */
     #labels = $derived.by(() => {
         const author = this.#inputs.author();
@@ -161,18 +192,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 +243,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

@@ -18,6 +18,7 @@
 	import { merge } from '../../utils/merge';
 	import { Pipeline } from '../../phases/Pipeline';
 	import { Slice } from './Slice';
+	import { FacetScope } from '../facet/scope';
 	import type { TooltipProp } from '../../types/layout/tooltip';
 	import type { MarginConfig, PlotChromeConfig } from '../../types/plots/props';
 	import type { PlotCellContext, PlotCellSnippet, PlotCoreBase } from '../../types/layout/plot';
@@ -153,6 +154,24 @@
 		return rest;
 	}
 
+	/**
+	 * The props of the core that draws the slice `ctx`: the kind's `slice`, or the plot's own, with the
+	 * `markers` and `segments` that name a facet left to the panels they name. The data phases already
+	 * handed them to their panels; this is for the cores that read them from their own props.
+	 */
+	function coreProps(ctx: PlotCellContext<TRow, TScales>) {
+		const props = (slice ?? buildSliceProps)(ctx) as Record<string, unknown>;
+		const { markers, segments } = props as {
+			markers?: object[];
+			segments?: Record<string, object[]>;
+		};
+		return {
+			...props,
+			...(markers ? { markers: FacetScope.scope(markers, ctx.facet) } : {}),
+			...(segments ? { segments: FacetScope.scopeSegments(segments, ctx.facet) } : {})
+		};
+	}
+
 	function buildSliceProps(ctx: PlotCellContext<TRow, TScales>) {
 		return {
 			...core,
@@ -172,9 +191,9 @@
 	{#if cell}
 		{@render cell(ctx)}
 	{:else if Core && sliced}
-		<Core {...(slice ?? buildSliceProps)(ctx)} {pipeline} />
+		<Core {...coreProps(ctx)} {pipeline} />
 	{:else if Core}
-		<Core {...withoutMargins((slice ?? buildSliceProps)(ctx))} bind:margins {pipeline} />
+		<Core {...withoutMargins(coreProps(ctx))} bind:margins {pipeline} />
 	{/if}
 {/snippet}
 
@@ -194,6 +213,7 @@
 			panel: panels
 				? FacetPanels.buildPanelState(panels, slicing.panelKey(place) ?? '')
 				: undefined,
+			facet: place,
 			keep: slicing.keep({ time, facet: place })
 		})}
 	</HoverScope>

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));