@fundar/data-chart-telling 1.0.0 → 1.1.0

package/CHANGELOG.md

@@ -2,6 +2,27 @@
 
 All notable changes to this project are documented here. The format follows [Keep a Changelog](https://keepachangelog.com/en/1.1.0/) and the project adheres to [Semantic Versioning](https://semver.org/).
 
+## [1.1.0] - 2026-10-20
+
+### Added
+
+- `BoxPlot`, a new plot kind for the distribution of values per category. It draws one box per category of each series: the quartiles, the median, whiskers that reach the farthest values within 1.5 times the interquartile range, and the values past them as outlier dots.
+  - Boxes stand upright when the categories are on `x` and lie sideways when they are on `y`.
+  - `grouping` or `color` gives each group its own box and color, and `facet` compares groups in separate panels.
+  - The tooltip reads one box at a time instead of every value inside it. The hovered row carries `category`, `min`, `p25`, `median`, `p75`, `max`, `count` and `outliers` for a custom `format`.
+  - Categories keep the order the data gives them, and the value axis fits the values without reaching for zero.
+  - It takes the same props as every other plot: `segments` to restyle whole categories, the interactive legend, `markers`, `styles.frame` and the rest.
+  - New `box` block in the configuration for the box fill opacity and the spacing between boxes (`fillOpacity`, `paddingInner`, `paddingOuter`).
+
+### Fixed
+
+- Nice axis domains no longer grow a whole extra step when the data ends just past a round value (parts that sum to `100.00000000000001` stay on `100`). `niceTolerance` on a scale sets how far past a tick, as a share of the step, the data may end and still stay on it.
+- Ticks at the data's first and last values no longer crowd the nice tick next to them. `axis.edgeTicks` in the configuration (or `edgeTicks` on a scale) chooses what happens then: `collision` is `'drop-nice'`, `'drop-edge'` or `'extend'`.
+- A tooltip that lists several rows shows them highest value first.
+- The timeline accepts steps given as `Date` objects or date strings (ISO, or any pattern set with `dateFormat`), not only numbers.
+- The `delta` marker's label offset and anchor have defaults per axis in the configuration (`delta.text`).
+- Documentation and examples brought up to date with the current API.
+
 ## [1.0.0] - 2026-10-16
 
 First stable release.

package/README.md

@@ -18,24 +18,21 @@ Svelte 5 plots for data storytelling, built on [svelteplot](https://svelteplot.d
 
 It aims for a sweet spot between the flexibility of `d3`, the declarative spirit of the _grammar of graphics_ (data mapped to channels, scales and marks) and the convenience of a classic plotting library, where each plot kind is a first-class component.
 
+<!-- example: examples/LineByRegion.svelte -->
+
 ```svelte
 <script lang="ts">
 	import { LinePlot } from '@fundar/data-chart-telling';
-
-	const rows = [
-		{ year: 2020, region: 'North', value: 3.1 },
-		{ year: 2021, region: 'North', value: 3.8 },
-		{ year: 2020, region: 'South', value: 2.2 },
-		{ year: 2021, region: 'South', value: 2.9 }
-	];
+	import { REGION_VALUES } from './data';
 </script>
 
+<!-- One line per region, with a title, the automatic legend, end-of-line values and a tooltip. -->
 <LinePlot
 	width={720}
 	height={400}
-	title="Value by region"
-	data={rows}
-	x="year"
+	title="Monthly inflation by region (%)"
+	data={REGION_VALUES}
+	x="date"
 	y="value"
 	color="region"
 	tooltip
@@ -44,9 +41,13 @@ It aims for a sweet spot between the flexibility of `d3`, the declarative spirit
 />
 ```
 
-![A line plot with a title, a legend, end-of-line value labels and a tooltip](docs/images/readme-hero.png)
+<!-- /example -->
+
+![A line plot with a title, a legend, end-of-line value labels and a tooltip](docs/images/line-by-region.png)
 
-Eight plot kinds - line, area, bar, histogram, heatmap, pyramid, scatter and geographic maps - share one vocabulary: the same channels (`x`, `y`, `color`, `grouping`, `opacity`, `symbol`, `r`), the same `scales`, `styles`, `segments`, `markers`, `transforms`, `tooltip`, `legend`, `timeline` and `facet` props, and one global theme.
+Every Svelte snippet in this README is a runnable file in [examples/](examples/), and the data comes from [examples/data.ts](examples/data.ts).
+
+Nine plot kinds - line, area, bar, histogram, box, heatmap, pyramid, scatter and geographic maps - share one vocabulary: the same channels (`x`, `y`, `color`, `grouping`, `opacity`, `symbol`, `r`), the same `scales`, `styles`, `segments`, `markers`, `transforms`, `tooltip`, `legend`, `timeline` and `facet` props, and one global theme.
 
 ## Install
 
@@ -62,26 +63,64 @@ The package ships Svelte components, so the app needs the Svelte compiler (`@sve
 
 `timeline` slices the rows by a field and steps through them. It draws as a **player** by default: play and pause, the current step and a slider, in the figure's chrome.
 
+<!-- example: examples/TimelinePlayer.svelte -->
+
 ```svelte
-<BarPlot {width} {height} data={rows} x="region" y="value" timeline={{ accessor: 'year' }} />
+<script lang="ts">
+	import { BarPlot } from '@fundar/data-chart-telling';
+	import { REGION_VALUES } from './data';
+</script>
+
+<!--
+	`timeline` slices the rows by `accessor`. A timeline is a player by default:
+	play/pause, the current step and a slider in the chrome. `progress` sets where
+	it starts. `type: 'rule'` draws a guide beside the plot with no controls
+	instead (see TimelineRule). To build your own widget, read
+	`useFigure().timeline` (seek, play, pause, next, ...).
+-->
+<BarPlot
+	width={720}
+	height={400}
+	data={REGION_VALUES}
+	x="region"
+	y="value"
+	scales={{ y: { domain: [0, 30] } }}
+	timeline={{ accessor: 'date', progress: 0.25, player: { autoplay: false, loop: true } }}
+/>
 ```
 
+<!-- /example -->
+
 ![A bar plot with a player bar](docs/images/timeline-player.png)
 
 `type: 'rule'` draws a **rule** beside the plot instead, a line with the steps written along it. The page drives it through `progress` (`0` to `1`), from a slider, scroll position or anything else.
 
+<!-- example: examples/TimelineRule.svelte -->
+
 ```svelte
+<script lang="ts">
+	import { LinePlot } from '@fundar/data-chart-telling';
+	import { REGION_VALUES } from './data';
+
+	// A rule has no controls of its own: the page moves it through `progress` (0 to 1).
+	// One step per year; a line plot shows every row up to the current step.
+	let progress = $state(0.5);
+</script>
+
+<input type="range" min="0" max="1" step="0.001" bind:value={progress} />
 <LinePlot
-	{width}
-	{height}
-	data={rows}
-	x="year"
+	width={720}
+	height={400}
+	data={REGION_VALUES}
+	x="date"
 	y="value"
 	color="region"
-	timeline={{ accessor: 'year', type: 'rule', progress }}
+	timeline={{ accessor: (row) => row.date.getUTCFullYear(), type: 'rule', progress }}
 />
 ```
 
+<!-- /example -->
+
 ![A line plot revealed up to the current step, with a timeline rule](docs/images/timeline-rule.png)
 
 See [Timeline](docs/timeline.md) for both in detail.

package/dist/configuration/config.svelte.js

@@ -116,7 +116,11 @@ export const DEFAULT_CONFIG = {
         yTickPadding: 10,
         grid: false,
         locale: 'es-AR',
-        compactDisplay: 'short'
+        compactDisplay: 'short',
+        edgeTicks: {
+            x: { enabled: true, collision: 'drop-nice' },
+            y: { enabled: false, collision: 'drop-nice' }
+        }
     },
     tooltip: {
         background: '#111827',
@@ -157,6 +161,7 @@ export const DEFAULT_CONFIG = {
     pyramid: { gap: { fillOpacity: 0.5 } },
     area: { fillOpacity: 0.6 },
     histogram: { inset: 1, fillOpacity: 1 },
+    box: { fillOpacity: 0.9, paddingInner: 0.4, paddingOuter: 0.2 },
     scatter: { dotRadius: 5 },
     timeline: {
         axisColor: 'currentColor',
@@ -214,6 +219,13 @@ export const DEFAULT_CONFIG = {
         font: { fill: 'currentColor', fontSize: 12, dy: -18 },
         area: { fill: '#94a3b8', fillOpacity: 0.25 }
     },
+    // Beside a vertical delta (taken on x), above a horizontal one (on y).
+    delta: {
+        text: {
+            x: { dx: 12, dy: 0, lineAnchor: 'middle', textAnchor: 'start' },
+            y: { dx: 0, dy: -10, lineAnchor: 'middle', textAnchor: 'middle' }
+        }
+    },
     facet: {
         indicator: {
             background: '#111827',

package/dist/configuration/themes/index.d.ts

@@ -116,6 +116,16 @@ export declare const THEMES: {
             grid?: boolean | undefined;
             locale?: string | undefined;
             compactDisplay?: "short" | "long" | undefined;
+            edgeTicks?: {
+                x?: {
+                    enabled?: boolean | undefined;
+                    collision?: import("../../types/layout/scales").EdgeTickCollision | undefined;
+                } | undefined;
+                y?: {
+                    enabled?: boolean | undefined;
+                    collision?: import("../../types/layout/scales").EdgeTickCollision | undefined;
+                } | undefined;
+            } | undefined;
         } | undefined;
         tooltip?: {
             background?: string | undefined;
@@ -213,6 +223,11 @@ export declare const THEMES: {
             inset?: number | undefined;
             fillOpacity?: number | undefined;
         } | undefined;
+        box?: {
+            fillOpacity?: number | undefined;
+            paddingInner?: number | undefined;
+            paddingOuter?: number | undefined;
+        } | undefined;
         scatter?: {
             dotRadius?: number | undefined;
         } | undefined;
@@ -315,6 +330,22 @@ export declare const THEMES: {
                 borderRadius?: number | undefined;
             } | undefined;
         } | undefined;
+        delta?: {
+            text?: {
+                x?: {
+                    dx?: number | undefined;
+                    dy?: number | undefined;
+                    lineAnchor?: import("../../types/plots/constants").LineAnchor | undefined;
+                    textAnchor?: import("../../types/plots/constants").TextAnchor | undefined;
+                } | undefined;
+                y?: {
+                    dx?: number | undefined;
+                    dy?: number | undefined;
+                    lineAnchor?: import("../../types/plots/constants").LineAnchor | undefined;
+                    textAnchor?: import("../../types/plots/constants").TextAnchor | undefined;
+                } | undefined;
+            } | undefined;
+        } | undefined;
         facet?: {
             indicator?: {
                 background?: string | undefined;
@@ -442,6 +473,16 @@ export declare const THEMES: {
             grid?: boolean | undefined;
             locale?: string | undefined;
             compactDisplay?: "short" | "long" | undefined;
+            edgeTicks?: {
+                x?: {
+                    enabled?: boolean | undefined;
+                    collision?: import("../../types/layout/scales").EdgeTickCollision | undefined;
+                } | undefined;
+                y?: {
+                    enabled?: boolean | undefined;
+                    collision?: import("../../types/layout/scales").EdgeTickCollision | undefined;
+                } | undefined;
+            } | undefined;
         } | undefined;
         tooltip?: {
             background?: string | undefined;
@@ -539,6 +580,11 @@ export declare const THEMES: {
             inset?: number | undefined;
             fillOpacity?: number | undefined;
         } | undefined;
+        box?: {
+            fillOpacity?: number | undefined;
+            paddingInner?: number | undefined;
+            paddingOuter?: number | undefined;
+        } | undefined;
         scatter?: {
             dotRadius?: number | undefined;
         } | undefined;
@@ -641,6 +687,22 @@ export declare const THEMES: {
                 borderRadius?: number | undefined;
             } | undefined;
         } | undefined;
+        delta?: {
+            text?: {
+                x?: {
+                    dx?: number | undefined;
+                    dy?: number | undefined;
+                    lineAnchor?: import("../../types/plots/constants").LineAnchor | undefined;
+                    textAnchor?: import("../../types/plots/constants").TextAnchor | undefined;
+                } | undefined;
+                y?: {
+                    dx?: number | undefined;
+                    dy?: number | undefined;
+                    lineAnchor?: import("../../types/plots/constants").LineAnchor | undefined;
+                    textAnchor?: import("../../types/plots/constants").TextAnchor | undefined;
+                } | undefined;
+            } | undefined;
+        } | undefined;
         facet?: {
             indicator?: {
                 background?: string | undefined;
@@ -768,6 +830,16 @@ export declare const THEMES: {
             grid?: boolean | undefined;
             locale?: string | undefined;
             compactDisplay?: "short" | "long" | undefined;
+            edgeTicks?: {
+                x?: {
+                    enabled?: boolean | undefined;
+                    collision?: import("../../types/layout/scales").EdgeTickCollision | undefined;
+                } | undefined;
+                y?: {
+                    enabled?: boolean | undefined;
+                    collision?: import("../../types/layout/scales").EdgeTickCollision | undefined;
+                } | undefined;
+            } | undefined;
         } | undefined;
         tooltip?: {
             background?: string | undefined;
@@ -865,6 +937,11 @@ export declare const THEMES: {
             inset?: number | undefined;
             fillOpacity?: number | undefined;
         } | undefined;
+        box?: {
+            fillOpacity?: number | undefined;
+            paddingInner?: number | undefined;
+            paddingOuter?: number | undefined;
+        } | undefined;
         scatter?: {
             dotRadius?: number | undefined;
         } | undefined;
@@ -967,6 +1044,22 @@ export declare const THEMES: {
                 borderRadius?: number | undefined;
             } | undefined;
         } | undefined;
+        delta?: {
+            text?: {
+                x?: {
+                    dx?: number | undefined;
+                    dy?: number | undefined;
+                    lineAnchor?: import("../../types/plots/constants").LineAnchor | undefined;
+                    textAnchor?: import("../../types/plots/constants").TextAnchor | undefined;
+                } | undefined;
+                y?: {
+                    dx?: number | undefined;
+                    dy?: number | undefined;
+                    lineAnchor?: import("../../types/plots/constants").LineAnchor | undefined;
+                    textAnchor?: import("../../types/plots/constants").TextAnchor | undefined;
+                } | undefined;
+            } | undefined;
+        } | undefined;
         facet?: {
             indicator?: {
                 background?: string | undefined;
@@ -1094,6 +1187,16 @@ export declare const THEMES: {
             grid?: boolean | undefined;
             locale?: string | undefined;
             compactDisplay?: "short" | "long" | undefined;
+            edgeTicks?: {
+                x?: {
+                    enabled?: boolean | undefined;
+                    collision?: import("../../types/layout/scales").EdgeTickCollision | undefined;
+                } | undefined;
+                y?: {
+                    enabled?: boolean | undefined;
+                    collision?: import("../../types/layout/scales").EdgeTickCollision | undefined;
+                } | undefined;
+            } | undefined;
         } | undefined;
         tooltip?: {
             background?: string | undefined;
@@ -1191,6 +1294,11 @@ export declare const THEMES: {
             inset?: number | undefined;
             fillOpacity?: number | undefined;
         } | undefined;
+        box?: {
+            fillOpacity?: number | undefined;
+            paddingInner?: number | undefined;
+            paddingOuter?: number | undefined;
+        } | undefined;
         scatter?: {
             dotRadius?: number | undefined;
         } | undefined;
@@ -1293,6 +1401,22 @@ export declare const THEMES: {
                 borderRadius?: number | undefined;
             } | undefined;
         } | undefined;
+        delta?: {
+            text?: {
+                x?: {
+                    dx?: number | undefined;
+                    dy?: number | undefined;
+                    lineAnchor?: import("../../types/plots/constants").LineAnchor | undefined;
+                    textAnchor?: import("../../types/plots/constants").TextAnchor | undefined;
+                } | undefined;
+                y?: {
+                    dx?: number | undefined;
+                    dy?: number | undefined;
+                    lineAnchor?: import("../../types/plots/constants").LineAnchor | undefined;
+                    textAnchor?: import("../../types/plots/constants").TextAnchor | undefined;
+                } | undefined;
+            } | undefined;
+        } | undefined;
         facet?: {
             indicator?: {
                 background?: string | undefined;

package/dist/index.d.ts

@@ -1,5 +1,6 @@
 export { default as AreaPlot } from './plots/area/Plot.svelte';
 export { default as BarPlot } from './plots/bar/Plot.svelte';
+export { default as BoxPlot } from './plots/box/Plot.svelte';
 export { default as HistogramPlot } from './plots/histogram/Plot.svelte';
 export { default as HeatmapPlot } from './plots/heatmap/Plot.svelte';
 export { default as LinePlot } from './plots/line/Plot.svelte';
@@ -41,7 +42,7 @@ export type { GeoCustomProjection, GeoCustomProjectionFactory, GeoScalesConfig,
 export type { GeoCameraConfig } from './types/plots/camera';
 export type { GeoMarkersConfig } from './types/markers/geo';
 export type { SharedAxisValues } from './types/phases';
-export type { TimeValue, Orientation, TimelineConfig, TimelineType, TimelineCallbacks, PlayerConfig, PlayerControl } from './types/layout/timeline';
+export type { TimelineConfig, TimelineType, TimelineCallbacks, PlayerConfig, PlayerControl } from './types/layout/timeline';
 export type { ComposerLayout, ComposerTags, ComposerTimelineConfig, ComposerHoverConfig } from './types/layout/composer';
 export type { GridPlacement, GridInset, GridCellContext, GridCellSnippet } from './types/layout/grid';
 export type { Responsive, FacetConfig, FacetCellContext, FacetIndicatorContext, FacetIndicatorSnippet, FacetNavDirection, FacetNavContext, FacetNavSnippet } from './types/layout/facet';

package/dist/index.js

@@ -3,6 +3,7 @@
 // timeline and facets around it.
 export { default as AreaPlot } from './plots/area/Plot.svelte';
 export { default as BarPlot } from './plots/bar/Plot.svelte';
+export { default as BoxPlot } from './plots/box/Plot.svelte';
 export { default as HistogramPlot } from './plots/histogram/Plot.svelte';
 export { default as HeatmapPlot } from './plots/heatmap/Plot.svelte';
 export { default as LinePlot } from './plots/line/Plot.svelte';

package/dist/layout/base/BasePlotLayout.svelte

@@ -46,10 +46,11 @@
 	import { PlotMargins } from '../margins/PlotMargins.svelte';
 	import { LegendState } from '../legend/LegendState.svelte';
 	import { onDestroy, untrack } from 'svelte';
+	import { SvelteMap } from 'svelte/reactivity';
 	import type { ComponentProps, Snippet } from 'svelte';
 	import { Plot, Pointer, setPlotDefaults } from 'svelteplot';
 	import { getConfiguration } from '../../configuration/config.svelte';
-	import { buildScale } from '../scales/buildScale';
+	import { SveltePlotScale } from '../scales/SveltePlotScale';
 	import ScalesLayout from '../scales/ScalesLayout.svelte';
 	import GeometryLayout from '../geometry/GeometryLayout.svelte';
 	import CoordinatesLayout from '../coordinates/CoordinatesLayout.svelte';
@@ -187,9 +188,20 @@
 		size: () => ({ width, height })
 	});
 
-	// `buildScale` already left only svelteplot's own scale options.
-	const resolvedX = $derived(buildScale(scales?.x, data, getX) as SveltePlotProps['x']);
-	const resolvedY = $derived(buildScale(scales?.y, data, getY) as SveltePlotProps['y']);
+	/** The domains `ScalesLayout` widens an axis to, for an edge tick's `'extend'` (see `EdgeTicks`). */
+	const edgeDomains = new SvelteMap<'x' | 'y', [number, number]>();
+
+	// `SveltePlotScale.build` already left only svelteplot's own scale options.
+	const resolvedX = $derived.by(() => {
+		const built = SveltePlotScale.build(scales?.x, data, getX);
+		const domain = edgeDomains.get('x');
+		return (domain ? { ...built, domain, nice: false } : built) as SveltePlotProps['x'];
+	});
+	const resolvedY = $derived.by(() => {
+		const built = SveltePlotScale.build(scales?.y, data, getY);
+		const domain = edgeDomains.get('y');
+		return (domain ? { ...built, domain, nice: false } : built) as SveltePlotProps['y'];
+	});
 	/** Threaded straight into svelteplot's own `r` scale option - see `RScaleConfig`'s own doc comment for why this isn't independently resolved like `color`. */
 	const resolvedR = $derived(scales?.r as SveltePlotProps['r']);
 	/** Threaded straight into svelteplot's own `length` scale option - see `LengthScaleConfig`'s own doc comment. `GeoPlot`-only in practice (see `scales`'s own doc comment), same mechanism as `r`. */
@@ -253,7 +265,7 @@
 		<StylesLayout styles={state.styles} {width} {height} {numericMargins} />
 		<!-- Axes for every kind but GeoPlot. -->
 		{#if scales !== undefined && coordinates === undefined}
-			<ScalesLayout {data} {getX} {getY} {width} {height} {numericMargins} {scales} />
+			<ScalesLayout {data} {getX} {getY} {width} {height} {numericMargins} {scales} {edgeDomains} />
 		{/if}
 		<GeometryLayout
 			markers={resolvedMarkers}
@@ -297,6 +309,7 @@
 			y={ctrl.tooltipPosition?.y ?? 0}
 			rows={ctrl.matchedRows.map((p) => p.row)}
 			format={hover.tooltip.format}
+			sort={hover.tooltip.sort}
 			content={hover.tooltip.content}
 			anchorX={hover.tooltip.anchorX}
 			anchorY={hover.tooltip.anchorY}

package/dist/layout/hover/HoverSettings.d.ts

@@ -1,11 +1,10 @@
 import type { TooltipProp } from '../../types/layout/tooltip';
-import type { HoverStrategy } from '../../types/layout/hover';
-import type { TooltipConfig } from '../../types/plots/props';
+import type { HoverPoint, HoverStrategy } from '../../types/layout/hover';
+import { PlotAxes } from '../../phases/data/PlotAxes';
+import type { HoverConfig, PointMatchingStrategy, TooltipConfig } from '../../types/plots/props';
 /**
- * How the author set up a plot's hover, from its `tooltip` and its hover
- * marker (`'hover'`, or `'geo-hover'` on a map): whether it is on, the
- * strategy that matches points (the tooltip's, else the marker's, else the
- * plot kind's `defaultStrategy`) and whether it syncs across plots.
+ * A plot's hover as its `tooltip` and hover marker set it up: whether it is on,
+ * how it matches points and whether it syncs across plots.
  */
 export declare class HoverSettings<TRow extends Record<string, unknown>> {
     /** The tooltip, or `undefined` when off. */
@@ -17,4 +16,19 @@ export declare class HoverSettings<TRow extends Record<string, unknown>> {
     constructor(tooltip: TooltipProp<TRow> | TooltipConfig<TRow> | undefined, markers: {
         type: string;
     }[] | undefined, defaultStrategy: HoverStrategy);
+    /** The strategy a plot's axes ask for: along the unmeasured axis, or `'punctual'` when both hold categories. */
+    static strategyOf(axes: PlotAxes | undefined): HoverStrategy;
+    /** A plot's `hover` config; its tooltip reads as `format` unless it sets its own. */
+    static buildConfig<TRow extends Record<string, unknown>>(args: {
+        tooltip: TooltipConfig<TRow> | undefined;
+        format: (row: TRow) => string;
+        sort?: (a: TRow, b: TRow) => number;
+        markers: {
+            type: string;
+        }[];
+        points: HoverPoint<TRow>[];
+        label: (row: TRow) => string;
+        defaultStrategy: HoverStrategy;
+        pointMatching?: PointMatchingStrategy;
+    }): HoverConfig<TRow>;
 }

package/dist/layout/hover/HoverSettings.js

@@ -1,8 +1,7 @@
+import { PlotAxes } from '../../phases/data/PlotAxes';
 /**
- * How the author set up a plot's hover, from its `tooltip` and its hover
- * marker (`'hover'`, or `'geo-hover'` on a map): whether it is on, the
- * strategy that matches points (the tooltip's, else the marker's, else the
- * plot kind's `defaultStrategy`) and whether it syncs across plots.
+ * A plot's hover as its `tooltip` and hover marker set it up: whether it is on,
+ * how it matches points and whether it syncs across plots.
  */
 export class HoverSettings {
     /** The tooltip, or `undefined` when off. */
@@ -24,4 +23,30 @@ export class HoverSettings {
         this.strategy = this.tooltip?.strategy ?? marker?.strategy ?? defaultStrategy;
         this.sync = this.tooltip?.sync ?? marker?.sync ?? false;
     }
+    /** The strategy a plot's axes ask for: along the unmeasured axis, or `'punctual'` when both hold categories. */
+    static strategyOf(axes) {
+        if (!axes)
+            return 'x';
+        if (axes.isDiscrete('x') && axes.isDiscrete('y'))
+            return 'punctual';
+        return PlotAxes.other(PlotAxes.valueOf({ axes }));
+    }
+    /** A plot's `hover` config; its tooltip reads as `format` unless it sets its own. */
+    static buildConfig(args) {
+        const { tooltip, format, sort, markers, points, label, defaultStrategy, pointMatching } = args;
+        const settings = new HoverSettings(tooltip, markers, defaultStrategy);
+        return {
+            active: settings.active,
+            points,
+            label,
+            strategy: settings.strategy,
+            sync: settings.sync,
+            tooltip: tooltip && {
+                ...tooltip,
+                format: tooltip.format ?? format,
+                ...(sort ? { sort } : {})
+            },
+            ...(pointMatching ? { pointMatching } : {})
+        };
+    }
 }

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

@@ -20,6 +20,11 @@ export declare class LegendState {
     static provide(): LegendState;
     /** 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

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

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;