@fundar/data-chart-telling 1.0.0 → 1.1.0

package/dist/plots/box/BoxSummaries.js

@@ -0,0 +1,101 @@
+import { ProcessedPositions } from '../../phases/transforms/ProcessedPositions';
+import { quantile } from 'd3-array';
+import { SERIES_ID_KEY, SERIES_KEY } from '../../phases/transforms/TransformsPhase';
+import { PANEL_KEY } from '../../phases/facet/FacetPanels';
+import { PlotAxes } from '../../phases/data/PlotAxes';
+import { TooltipState } from '../../layout/tooltip/TooltipState.svelte';
+import { isGapValue } from '../utils/gaps';
+/** The whiskers reach this many interquartile ranges past the box, as svelteplot draws them. */
+const WHISKER_IQR = 1.5;
+/** A summary value as a tooltip shows it: at most two decimals. */
+const round = (value) => String(Math.round(value * 100) / 100);
+/**
+ * The boxes a box plot draws, one summary row per series, category and facet
+ * panel - the same quartiles and whiskers svelteplot's `BoxX`/`BoxY` compute,
+ * so its hover and tooltip read a box rather than every value inside it.
+ */
+export class BoxSummaries {
+    /** One summary per box, in the order the processed rows first reach it. */
+    static of(state) {
+        const processed = state.processedData;
+        if (!processed?.data.length)
+            return [];
+        const valueAxis = PlotAxes.valueOf(state);
+        const categoryAxis = PlotAxes.categoryOf(state);
+        const position = ProcessedPositions.of(processed, valueAxis);
+        const valueOf = position[valueAxis];
+        const categoryOf = position[categoryAxis];
+        const categoryField = processed.channels[categoryAxis];
+        const boxes = new Map();
+        for (const row of processed.data) {
+            const value = valueOf(row);
+            if (isGapValue(value))
+                continue;
+            const n = Number(value);
+            if (!Number.isFinite(n))
+                continue;
+            const key = JSON.stringify([
+                row[SERIES_ID_KEY],
+                row[PANEL_KEY] ?? null,
+                String(categoryOf(row))
+            ]);
+            const box = boxes.get(key);
+            if (box)
+                box.values.push(n);
+            else
+                boxes.set(key, { first: row, values: [n] });
+        }
+        return [...boxes.values()].map(({ first, values }) => {
+            const sorted = values.sort((a, b) => a - b);
+            const p25 = quantile(sorted, 0.25);
+            const median = quantile(sorted, 0.5);
+            const p75 = quantile(sorted, 0.75);
+            const reach = (p75 - p25) * WHISKER_IQR;
+            const inside = sorted.filter((v) => v >= p25 - reach && v <= p75 + reach);
+            const category = categoryOf(first);
+            return {
+                ...(typeof categoryField === 'string' ? { [categoryField]: category } : {}),
+                [SERIES_KEY]: first[SERIES_KEY],
+                [SERIES_ID_KEY]: first[SERIES_ID_KEY],
+                ...(first[PANEL_KEY] !== undefined ? { [PANEL_KEY]: first[PANEL_KEY] } : {}),
+                category,
+                min: inside[0] ?? p25,
+                p25,
+                median,
+                p75,
+                max: inside.at(-1) ?? p75,
+                count: sorted.length,
+                outliers: sorted.filter((v) => v < p25 - reach || v > p75 + reach)
+            };
+        });
+    }
+    /** Where a box's summary sits for hover: at its category, level with its median. */
+    static position(state) {
+        const valueAxis = PlotAxes.valueOf(state);
+        const at = {
+            [valueAxis]: (row) => row.median,
+            [PlotAxes.other(valueAxis)]: (row) => row.category
+        };
+        return at;
+    }
+    /**
+     * How a hovered box reads by default: its series, when the plot groups its
+     * rows; its category; then its five numbers, highest first, and how many
+     * values fall past the whiskers.
+     */
+    static format(state) {
+        const grouped = state.channels?.grouping !== undefined;
+        return (row) => {
+            const lines = grouped ? [String(row[SERIES_KEY])] : [];
+            lines.push(TooltipState.value(row.category));
+            lines.push(`max: ${round(row.max)}`);
+            lines.push(`p75: ${round(row.p75)}`);
+            lines.push(`median: ${round(row.median)}`);
+            lines.push(`p25: ${round(row.p25)}`);
+            lines.push(`min: ${round(row.min)}`);
+            if (row.outliers.length)
+                lines.push(`outliers: ${row.outliers.length}`);
+            return lines.join('\n');
+        };
+    }
+}

package/dist/plots/box/Plot.svelte

@@ -0,0 +1,42 @@
+<script lang="ts" generics="TData extends Record<string, unknown>">
+	import Plot from '../../layout/plot/Plot.svelte';
+	import { buildBoxDefaults } from './defaults';
+	import type { BoxPlotProps, BoxPlotCoreProps } from '../../types/plots/box/props';
+
+	/**
+	 * A box plot: the distribution of each series' values per category - quartiles, whiskers and outliers - one box per category, upright, or sideways when the categories run along `y`. Draws from pre-built `series` or flat `data` rows.
+	 * Optional chrome (`title`, `subtitle`, `caption`, `header`, `footer`,
+	 * `legend`) frames it; `timeline` and `facet` slice its `data` rows.
+	 * `margins` is bindable: it reports the margin the plot settled on.
+	 */
+	let {
+		title,
+		subtitle,
+		caption,
+		header,
+		footer,
+		legend,
+		order,
+		timeline,
+		facet,
+		tooltip,
+		margins = $bindable(),
+		...core
+	}: BoxPlotProps<TData> = $props();
+</script>
+
+<Plot
+	core={core as BoxPlotCoreProps<TData>}
+	defaults={buildBoxDefaults}
+	bind:margins
+	{title}
+	{subtitle}
+	{caption}
+	{header}
+	{footer}
+	{legend}
+	{order}
+	{timeline}
+	{facet}
+	{tooltip}
+/>

package/dist/plots/box/Plot.svelte.d.ts

@@ -0,0 +1,26 @@
+import Plot from '../../layout/plot/Plot.svelte';
+import type { BoxPlotProps } from '../../types/plots/box/props';
+declare function $$render<TData extends Record<string, unknown>>(): {
+    props: BoxPlotProps<TData>;
+    exports: {};
+    bindings: "margins";
+    slots: {};
+    events: {};
+};
+declare class __sveltets_Render<TData extends Record<string, unknown>> {
+    props(): ReturnType<typeof $$render<TData>>['props'];
+    events(): ReturnType<typeof $$render<TData>>['events'];
+    slots(): ReturnType<typeof $$render<TData>>['slots'];
+    bindings(): "margins";
+    exports(): {};
+}
+interface $$IsomorphicComponent {
+    new <TData extends Record<string, unknown>>(options: import('svelte').ComponentConstructorOptions<ReturnType<__sveltets_Render<TData>['props']>>): import('svelte').SvelteComponent<ReturnType<__sveltets_Render<TData>['props']>, ReturnType<__sveltets_Render<TData>['events']>, ReturnType<__sveltets_Render<TData>['slots']>> & {
+        $$bindings?: ReturnType<__sveltets_Render<TData>['bindings']>;
+    } & ReturnType<__sveltets_Render<TData>['exports']>;
+    <TData extends Record<string, unknown>>(internal: unknown, props: ReturnType<__sveltets_Render<TData>['props']> & {}): ReturnType<__sveltets_Render<TData>['exports']>;
+    z_$$bindings?: ReturnType<__sveltets_Render<any>['bindings']>;
+}
+declare const Plot: $$IsomorphicComponent;
+type Plot<TData extends Record<string, unknown>> = InstanceType<typeof Plot<TData>>;
+export default Plot;

package/dist/plots/box/defaults.d.ts

@@ -0,0 +1,12 @@
+import type { AxisPlotDefaults } from '../../types/phases';
+import type { BoxPlotState, BoxPlotCtx } from '../../types/plots/box/state';
+/**
+ * BoxPlot on the shared pipeline: one box per category of each series along
+ * one category axis - `x`, or `y` for horizontal boxes, as the "data" phase
+ * reads it off the values, in the order the data gives them - with its own
+ * band padding and markers. The value
+ * axis fits the values, without reaching for zero. Its plot defaults to:
+ * hover along the category axis, over one summary per box rather than every
+ * value inside it.
+ */
+export declare function buildBoxDefaults<TData extends Record<string, unknown>>(): AxisPlotDefaults<BoxPlotState<TData>, BoxPlotCtx>;

package/dist/plots/box/defaults.js

@@ -0,0 +1,34 @@
+import { buildMarks } from './markers';
+import { BoxSummaries } from './BoxSummaries';
+import { TooltipState } from '../../layout/tooltip/TooltipState.svelte';
+/**
+ * BoxPlot on the shared pipeline: one box per category of each series along
+ * one category axis - `x`, or `y` for horizontal boxes, as the "data" phase
+ * reads it off the values, in the order the data gives them - with its own
+ * band padding and markers. The value
+ * axis fits the values, without reaching for zero. Its plot defaults to:
+ * hover along the category axis, over one summary per box rather than every
+ * value inside it.
+ */
+export function buildBoxDefaults() {
+    return {
+        data: {
+            discreteAxes: 1,
+            segments: { color: (style) => style?.fill, connect: false }
+        },
+        scales: {
+            bandOrder: 'data',
+            defaults: (_state, ctx) => ({
+                category: { paddingInner: ctx.cfg.box.paddingInner, paddingOuter: ctx.cfg.box.paddingOuter }
+            })
+        },
+        markers: { marks: buildMarks },
+        hover: {
+            rows: BoxSummaries.of,
+            position: BoxSummaries.position,
+            label: () => ((row) => String(row.median)),
+            format: (state) => BoxSummaries.format(state),
+            sort: () => TooltipState.descending((row) => row.median)
+        }
+    };
+}

package/dist/plots/box/markers.d.ts

@@ -0,0 +1,12 @@
+import type { BoxPlotState, BoxPlotCtx } from '../../types/plots/box/state';
+import type { AxisBasedMarkersConfig } from '../../types/markers/common';
+/**
+ * BoxPlot's "markers" phase: one `box` per visual segment of each series,
+ * one box per category of its rows, filled with its series' color (or its
+ * segment's own `fill`). The markers the "statistics" phase already put in
+ * `state.markers` come after, so they render on top.
+ *
+ * A series toggled off in the legend (style mode), or dimmed by hovering
+ * another one, takes the legend's disabled fill.
+ */
+export declare function buildMarks<TData extends Record<string, unknown>>(state: BoxPlotState<TData>, ctx: BoxPlotCtx): AxisBasedMarkersConfig[];

package/dist/plots/box/markers.js

@@ -0,0 +1,34 @@
+/**
+ * BoxPlot's "markers" phase: one `box` per visual segment of each series,
+ * one box per category of its rows, filled with its series' color (or its
+ * segment's own `fill`). The markers the "statistics" phase already put in
+ * `state.markers` come after, so they render on top.
+ *
+ * A series toggled off in the legend (style mode), or dimmed by hovering
+ * another one, takes the legend's disabled fill.
+ */
+export function buildMarks(state, ctx) {
+    const { channels } = state.processedData;
+    const { cfg } = ctx;
+    return (state.processedGroups ?? []).flatMap((group) => {
+        const name = group.series.name;
+        const disabled = ctx.interaction?.fillFor(name);
+        return group.visualSegments.map((seg) => {
+            const { stroke, strokeWidth, strokeOpacity, borderRadius } = seg.styles;
+            const outline = { stroke, strokeWidth, strokeOpacity, borderRadius };
+            return {
+                type: 'box',
+                series: name,
+                data: seg.data,
+                x: channels.x,
+                y: channels.y,
+                bar: {
+                    // The box's own outline, from its segment; unset fields stay svelteplot's.
+                    ...Object.fromEntries(Object.entries(outline).filter(([, v]) => v !== undefined)),
+                    fill: disabled?.fill ?? seg.styles.fill ?? state.colorForSeries(name),
+                    fillOpacity: disabled?.fillOpacity ?? seg.styles.fillOpacity ?? cfg.box.fillOpacity
+                }
+            };
+        });
+    });
+}

package/dist/plots/geo/phases/hover.js

@@ -1,4 +1,5 @@
-import { HoverPhase } from '../../../phases/hover/HoverPhase';
+import { LegendState } from '../../../layout/legend/LegendState.svelte';
+import { HoverSettings } from '../../../layout/hover/HoverSettings';
 /** Whether a pointer event is over an `inset` marker's panel, which has its own hover. */
 export function isOverInset(e) {
     return e.target?.closest?.('.dct-geo-inset') != null;
@@ -14,10 +15,10 @@ export function buildHover(state, ctx) {
     const features = state.features;
     const label = (f) => f.__id;
     const points = features
-        .filter((f) => !range || !color || HoverPhase.inRange(color(f), range))
+        .filter((f) => !range || !color || LegendState.inRange(color(f), range))
         .map((f) => ({ x: f.__cx, y: f.__cy, row: f, label: label(f) }));
     const hover = {
-        ...HoverPhase.buildHoverConfig({
+        ...HoverSettings.buildConfig({
             tooltip: tooltip,
             format: state.tooltipFormat,
             markers: authoredMarkers,
@@ -27,8 +28,7 @@ export function buildHover(state, ctx) {
             // Match the feature under the cursor, not the nearest centroid.
             pointMatching: 'contains'
         }),
-        // A map has no axis to draw a crosshair rule against - 'punctual' here
-        // only means "exact XY hover match", unlike heatmap's own use of it.
+        // A map has no axes for a crosshair: 'punctual' only means an exact match.
         strategy: 'punctual',
         crosshair: false,
         exclude: isOverInset

package/dist/plots/geo/phases/markers.js

@@ -1,4 +1,4 @@
-import { HoverPhase } from '../../../phases/hover/HoverPhase';
+import { LegendState } from '../../../layout/legend/LegendState.svelte';
 import { resolveFeatureStyle } from '../../utils/geoSegments';
 import { DisabledStyle } from '../../../layout/legend/DisabledStyle';
 /**
@@ -24,8 +24,7 @@ export function buildMarkers(state, ctx) {
     function rangeFilteredStyle(base, f) {
         if (range == null || !color)
             return base;
-        const v = color(f);
-        if (v == null || (v >= range.min && v <= range.max))
+        if (LegendState.inRange(color(f), range))
             return base;
         return { ...base, ...DisabledStyle.fill(range.disabledStyle) };
     }
@@ -51,7 +50,7 @@ export function buildMarkers(state, ctx) {
     }
     // What the pointer can match: the features inside the legend's range, by id.
     const hoverable = new Map(features
-        .filter((f) => !range || !color || HoverPhase.inRange(color(f), range))
+        .filter((f) => !range || !color || LegendState.inRange(color(f), range))
         .map((f) => [f.__id, f]));
     const featureMarkers = styleGroups.map((group) => ({
         type: 'geo',

package/dist/plots/geo/slices.js

@@ -1,3 +1,4 @@
+import { TimelineTime } from '../../layout/timeline/TimelineTime';
 import { isFacetWrap } from '../../layout/facet/config';
 const SLICE = Symbol('dct-geo-slice');
 /** A slicing field's value on a feature (from its `properties`) or on a marker's own row. */
@@ -32,9 +33,11 @@ export function buildGeoSlicing(args) {
         : readField(fields[dimension], row);
     let combos = [{}];
     for (const dimension of Object.keys(fields)) {
-        const values = [
-            ...new Set(rows.map((row) => readField(fields[dimension], row)).filter((v) => v != null))
-        ];
+        const read = rows.map((row) => readField(fields[dimension], row)).filter((v) => v != null);
+        // Dates on the same step are one value.
+        const time = new TimelineTime(timeline?.dateFormat);
+        const keyOf = (value) => dimension === 'time' ? String(time.toTime(value) ?? value) : value;
+        const values = [...new Map(read.map((value) => [keyOf(value), value])).values()];
         combos = combos.flatMap((combo) => values.map((value) => ({ ...combo, [dimension]: value })));
     }
     return {

package/dist/plots/heatmap/markers.js

@@ -1,3 +1,4 @@
+import { LegendState } from '../../layout/legend/LegendState.svelte';
 import { DisabledStyle } from '../../layout/legend/DisabledStyle';
 import { resolveAccessor } from '../utils/accessors';
 /** A processed channel as a per-row function. */
@@ -98,7 +99,7 @@ export function buildMarks(state, ctx) {
         return map;
     })();
     function rangeFilteredStyle(base, value) {
-        if (range == null || (value >= range.min && value <= range.max))
+        if (range == null || LegendState.inRange(value, range))
             return base;
         return { ...base, ...DisabledStyle.fill(range.disabledStyle) };
     }

package/dist/plots/histogram/defaults.js

@@ -32,7 +32,7 @@ function mergeBin(own, cfg, horizontal) {
  */
 export function buildHistogramDefaults() {
     return {
-        data: { segments: { color: (style) => style?.fill } },
+        data: { segments: { color: (style) => style?.fill, connect: false } },
         transforms: {
             transforms: (state, ctx) => mergeBin(state.transforms ?? [], ctx.cfg, state.axes?.isHorizontal ?? false)
         },

package/dist/plots/histogram/markers.js

@@ -1,4 +1,5 @@
-import { SERIES_KEY, TransformsPhase } from '../../phases/transforms/TransformsPhase';
+import { ProcessedPositions } from '../../phases/transforms/ProcessedPositions';
+import { SERIES_KEY } from '../../phases/transforms/TransformsPhase';
 import { Transforms } from '../../phases/transforms/Transforms';
 import { resolveAccessor } from '../utils/accessors';
 import { PlotAxes } from '../../phases/data/PlotAxes';
@@ -18,7 +19,7 @@ export function buildValueLabels(labels, state, ctx) {
     const value = PlotAxes.valueOf(state);
     const binned = PlotAxes.other(value);
     const horizontal = value === 'x';
-    const position = TransformsPhase.processedPosition(processed, value);
+    const position = ProcessedPositions.of(processed, value);
     const read = (channel) => channel === undefined
         ? undefined
         : resolveAccessor(channel);
@@ -69,8 +70,7 @@ export function buildValueLabels(labels, state, ctx) {
 export function buildMarks(state, ctx) {
     const { channels, options, transforms } = state.processedData;
     const fillOpacity = ctx.cfg.histogram.fillOpacity;
-    // Bins are discrete, so adjacent segments share no boundary bar to bridge.
-    const rects = TransformsPhase.buildProcessedGroups(state, false).flatMap((group) => {
+    const rects = (state.processedGroups ?? []).flatMap((group) => {
         const disabled = ctx.interaction?.fillFor(group.series.name);
         return group.visualSegments.map((seg) => Transforms.finish({
             type: 'rect',

package/dist/plots/line/markers.js

@@ -1,5 +1,4 @@
 import { getConfiguration } from '../../configuration/config.svelte';
-import { TransformsPhase } from '../../phases/transforms/TransformsPhase';
 import { resolveGapRuns, resolveGapsForSeries } from '../utils/gaps';
 /**
  * Every `'line'` (+ `'dot'`, where a segment's style asks for them) marker
@@ -182,7 +181,7 @@ export function buildMarks(state, ctx) {
     const { colorForSeries, gaps } = state;
     const disabledStrokeFor = (name) => ctx.interaction?.strokeFor(name);
     const disabledDotsFor = (name) => ctx.interaction?.dotsFor(name);
-    const groups = TransformsPhase.buildProcessedGroups(state);
+    const groups = state.processedGroups ?? [];
     const lineMarkers = buildLineMarkers({
         groupedSeries: groups,
         colorFor: colorForSeries,

package/dist/plots/pyramid/defaults.js

@@ -1,9 +1,10 @@
+import { ProcessedPositions } from '../../phases/transforms/ProcessedPositions';
 import { PlotAxes } from '../../phases/data/PlotAxes';
 import { buildMarks, buildValueLabels } from './markers';
 import { ValueLabels } from '../../layout/styles/ValueLabels';
 import { seriesIdOf } from '../../utils/grouping';
 import { isGapValue } from '../utils/gaps';
-import { SERIES_ID_KEY, TransformsPhase } from '../../phases/transforms/TransformsPhase';
+import { SERIES_ID_KEY } from '../../phases/transforms/TransformsPhase';
 const byName = (a, b) => a.name.localeCompare(b.name);
 /**
  * PyramidPlot on the shared pipeline. Its `x`/`y` are the visual axes: the one
@@ -64,7 +65,7 @@ export function buildPyramidDefaults() {
             // side - and its category, and reads as its magnitude.
             position: (state) => {
                 const value = PlotAxes.valueOf(state);
-                const place = TransformsPhase.processedPosition(state.processedData, value);
+                const place = ProcessedPositions.of(state.processedData, value);
                 const valueOf = ValueLabels.valueOf(state);
                 const sideOf = new Map((state.resolvedSeries ?? []).map((s) => [seriesIdOf(s), s.side]));
                 const signed = (row) => {

package/dist/plots/pyramid/markers.js

@@ -1,5 +1,5 @@
 import { resolveAccessor } from '../utils/accessors';
-import { SERIES_ID_KEY, TransformsPhase } from '../../phases/transforms/TransformsPhase';
+import { SERIES_ID_KEY } from '../../phases/transforms/TransformsPhase';
 import { seriesIdOf } from '../../utils/grouping';
 import { PlotAxes } from '../../phases/data/PlotAxes';
 import { getConfiguration } from '../../configuration/config.svelte';
@@ -23,7 +23,7 @@ export function buildValueLabels(labels, state, ctx) {
     const categoryAxis = PlotAxes.categoryOf(state);
     const valueAxis = PlotAxes.valueOf(state);
     const isHorizontal = state.axes?.isHorizontal ?? true;
-    return TransformsPhase.buildProcessedGroups(state, false).flatMap(({ series }) => {
+    return (state.processedGroups ?? []).flatMap(({ series }) => {
         const id = seriesIdOf(series);
         const side = state.resolvedSeries.find((s) => seriesIdOf(s) === id).side;
         const isLeft = side === 'left';
@@ -93,10 +93,7 @@ export function buildMarks(state, ctx) {
         [`${valueAxis}2`]: to
     });
     // The real bars draw the rows the "transforms" phase left, read through its channels.
-    const processedGroups = new Map(TransformsPhase.buildProcessedGroups(state, false).map((g) => [
-        seriesIdOf(g.series),
-        g
-    ]));
+    const processedGroups = new Map((state.processedGroups ?? []).map((g) => [seriesIdOf(g.series), g]));
     const markers = [];
     for (const group of groupedSeries) {
         // Forwarded raw (a field key or function, whatever the series' category is)

package/dist/plots/scatter/defaults.js

@@ -1,5 +1,5 @@
+import { ProcessedPositions } from '../../phases/transforms/ProcessedPositions';
 import { buildMarks, buildValueLabels } from './markers';
-import { TransformsPhase } from '../../phases/transforms/TransformsPhase';
 import { Margins } from '../../layout/margins/Margins';
 import { MarkerAxisValues } from '../../phases/scales/MarkerAxisValues';
 /** Stand-in max render radius for a channel-bound `r` (svelteplot's own auto sqrt scale). */
@@ -28,7 +28,7 @@ function paddedDomain(values, radiusPx, sizePx) {
 function fitDomains(state, ctx) {
     const { scales, channels, groupedSeries } = state;
     const processed = state.processedData;
-    const position = TransformsPhase.processedPosition(processed);
+    const position = ProcessedPositions.of(processed);
     const extra = {
         x: MarkerAxisValues.of(state.markers ?? [], 'x'),
         y: MarkerAxisValues.of(state.markers ?? [], 'y')
@@ -66,6 +66,7 @@ export function buildScatterDefaults() {
                 connect: false
             }
         },
+        transforms: { groups: 'runs' },
         scales: { fit: fitDomains },
         markers: { marks: buildMarks, valueLabels: buildValueLabels },
         hover: {

package/dist/plots/scatter/markers.js

@@ -1,4 +1,5 @@
-import { SERIES_KEY, TransformsPhase } from '../../phases/transforms/TransformsPhase';
+import { ProcessedPositions } from '../../phases/transforms/ProcessedPositions';
+import { SERIES_KEY } from '../../phases/transforms/TransformsPhase';
 import { ValueLabels } from '../../layout/styles/ValueLabels';
 /**
  * ScatterPlot's `styles.values` as one `'text'` marker over the same
@@ -11,7 +12,7 @@ export function buildValueLabels(labels, state, ctx) {
     if (!processedData?.data.length)
         return [];
     const { font, format } = labels;
-    const position = TransformsPhase.processedPosition(processedData);
+    const position = ProcessedPositions.of(processedData);
     const nameOf = (d) => String(d[SERIES_KEY]);
     const valueOf = ValueLabels.valueOf(state);
     return [
@@ -89,7 +90,7 @@ export function buildMarks(state, ctx) {
         }
         : undefined;
     const markers = [];
-    TransformsPhase.buildProcessedRuns(state).forEach((group) => {
+    (state.processedGroups ?? []).forEach((group) => {
         const defaultColor = colorForSeries(group.series.name);
         const disabledDots = interaction?.dotsFor(group.series.name);
         for (const seg of group.visualSegments) {

package/dist/types/configuration/styling.d.ts

@@ -1,6 +1,7 @@
 import type { StrokeStyle, DotStyle, FontStyle, AreaStyle } from '../plots/styling';
-import type { SymbolType } from '../plots/constants';
+import type { LineAnchor, SymbolType, TextAnchor } from '../plots/constants';
 import type { PlotChromeEntry } from '../plots/props';
+import type { EdgeTicksOptions } from '../layout/scales';
 export type TextStyle = {
     /** font-family */
     font: string;
@@ -139,8 +140,11 @@ export type PlotStylesConfig = {
         yTickPadding: number;
         grid: boolean;
         locale: string;
-        /** Compact units abbreviated (`'short'`, the default: `1 M`) or spelled out (`'long'`: `1 millón`). Axes and size legends. */
         compactDisplay: 'short' | 'long';
+        edgeTicks: {
+            x: EdgeTicksOptions;
+            y: EdgeTicksOptions;
+        };
     };
     tooltip: {
         background: string;
@@ -239,6 +243,15 @@ export type PlotStylesConfig = {
         /** Fill opacity of every bar, so a grouped histogram's bars behind another group's still show. */
         fillOpacity: number;
     };
+    /** Default box-plot styling. */
+    box: {
+        /** Fill opacity of every box that sets none of its own. */
+        fillOpacity: number;
+        /** Fallback gap (0-1) between the boxes of neighbouring categories, when a plot doesn't set its own `scales.x/y.paddingInner`. */
+        paddingInner: number;
+        /** Fallback gap (0-1) before the first and after the last box, when a plot doesn't set its own `scales.x/y.paddingOuter`. */
+        paddingOuter: number;
+    };
     /** Default scatter point geometry. */
     scatter: {
         dotRadius: number;
@@ -324,6 +337,15 @@ export type PlotStylesConfig = {
         font: FontStyle;
         area: AreaStyle;
     };
+    /** The `delta` marker's label offset and anchor, per axis the delta is taken on. A marker's own `text` wins. */
+    delta: {
+        text: Record<'x' | 'y', {
+            dx: number;
+            dy: number;
+            lineAnchor: LineAnchor;
+            textAnchor: TextAnchor;
+        }>;
+    };
     facet: {
         /** Position badge shown in `carousel`/`paginated` facet modes. */
         indicator: {

package/dist/types/layout/composer.d.ts

@@ -1,5 +1,5 @@
 import type { HoverStrategy } from './hover';
-import type { Orientation, PlayerConfig, TimeValue, TimelineCallbacks, TimelineType } from './timeline';
+import type { Orientation, PlayerConfig, TimeInput, TimelineCallbacks, TimelineType } from './timeline';
 /**
  * How a `PlotComposer` arranges its panels: `areas` names the grid cells
  * (one string per row, `.` for empty), else panels flow into `columns`;
@@ -20,7 +20,10 @@ export type ComposerTags = 'A' | 'a' | '1' | 'I' | 'i' | string[];
 /** One timeline for every panel: plots with a `timeline` follow its `progress` over `values`. */
 export type ComposerTimelineConfig = TimelineCallbacks & {
     progress?: number;
-    values: TimeValue[];
+    /** The steps: numbers, `Date`s or date strings. */
+    values: TimeInput[];
+    /** How a non-ISO date string in `values` reads. */
+    dateFormat?: string;
     /** How it draws. Defaults to `'player'`. */
     type?: TimelineType;
     /** The player bar's own options, when `type` is `'player'`. */

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

@@ -76,6 +76,18 @@ export type DivergingScaleType = (typeof DIVERGING_SCALE_TYPES)[number];
 /** Scale types that bucket a numeric domain into a fixed set of output values instead of interpolating. */
 export declare const BINNED_SCALE_TYPES: readonly ["threshold", "quantile", "quantize"];
 export type BinnedScaleType = (typeof BINNED_SCALE_TYPES)[number];
+/**
+ * What an axis does when the tick at the data's first or last value would
+ * crowd the nice tick next to it: `'drop-nice'` keeps the data's tick and
+ * drops the nice one, `'drop-edge'` keeps the nice tick and drops the data's,
+ * `'extend'` widens the axis to the next nice tick past the data.
+ */
+export type EdgeTickCollision = 'drop-nice' | 'drop-edge' | 'extend';
+/** Whether an axis adds ticks at the data's first and last values, and what it does when one crowds a nice tick. */
+export type EdgeTicksOptions = {
+    enabled: boolean;
+    collision: EdgeTickCollision;
+};
 /**
  * Scale overrides for one plot axis - svelteplot's `ScaleOptions` and
  * `XScaleOptions`, plus this package's own fields. `TData` is the row type
@@ -94,6 +106,10 @@ export type AxisScale<TData = Record<string, unknown>> = {
     interval?: string | number;
     clamp?: boolean;
     nice?: boolean;
+    niceTolerance?: number;
+    edgeTicks?: boolean | {
+        collision?: EdgeTickCollision;
+    };
     zero?: boolean;
     round?: boolean;
     percent?: boolean;