@fundar/data-chart-telling 1.0.0 → 1.2.0

package/dist/plots/distribution/violin/defaults.js

@@ -0,0 +1,58 @@
+import { buildMarks } from './markers';
+import { BoxSummaries } from '../box/BoxSummaries';
+import { PlotAxes } from '../../../phases/data/PlotAxes';
+import { ProcessedPositions } from '../../../phases/transforms/ProcessedPositions';
+import { NiceTicks } from '../../../layout/scales/NiceTicks';
+import { TooltipState } from '../../../layout/tooltip/TooltipState.svelte';
+/**
+ * The value axis fit to the values the violins are drawn from, when the author leaves it unpinned: no svelteplot mark reads them, so nothing else sets its domain.
+ */
+function fitValueDomain(state) {
+    const axis = PlotAxes.valueOf(state);
+    const scale = state.scales[axis];
+    if (scale?.domain != null || scale?.ticks != null || typeof scale?.nice === 'boolean')
+        return {};
+    const values = ProcessedPositions.values(state.processedData, axis)
+        .map(Number)
+        .filter(Number.isFinite);
+    const lo = Math.min(...values);
+    const hi = Math.max(...values);
+    if (!(hi > lo))
+        return {};
+    return {
+        [axis]: { domain: NiceTicks.fit(state, axis, lo, hi, NiceTicks.toleranceOf(scale?.nice)) }
+    };
+}
+/**
+ * ViolinPlot on the shared pipeline: one violin per category of each series
+ * along one category axis - `x`, or `y` for horizontal violins - 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 violin, read as a box plot's.
+ */
+export function buildViolinDefaults() {
+    return {
+        data: {
+            discreteAxes: 1,
+            segments: { color: (style) => style?.fill, connect: false }
+        },
+        scales: {
+            bandOrder: 'data',
+            fit: (state) => fitValueDomain(state),
+            defaults: (_state, ctx) => ({
+                category: {
+                    paddingInner: ctx.cfg.violin.paddingInner,
+                    paddingOuter: ctx.cfg.violin.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/distribution/violin/markers.d.ts

@@ -0,0 +1,10 @@
+import type { ViolinPlotState, ViolinPlotCtx } from '../../../types/plots/distribution/violin/state';
+import type { AxisBasedMarkersConfig } from '../../../types/markers/common';
+/**
+ * ViolinPlot's "markers" phase: one `violin` - and a narrow `box` over it - per visual
+ * segment of each series, drawing a violin per category of its rows, filled with its series'
+ * color (or its segment's own `fill`). Series share each category's band side
+ * by side. The markers the "statistics" phase already put in `state.markers`
+ * come after, so they render on top.
+ */
+export declare function buildMarks<TData extends Record<string, unknown>>(state: ViolinPlotState<TData>, ctx: ViolinPlotCtx): AxisBasedMarkersConfig[];

package/dist/plots/distribution/violin/markers.js

@@ -0,0 +1,71 @@
+import { ProcessedPositions } from '../../../phases/transforms/ProcessedPositions';
+import { PlotAxes } from '../../../phases/data/PlotAxes';
+import { ViolinProfiles } from '../../../markers/violin/ViolinProfiles';
+/**
+ * ViolinPlot's "markers" phase: one `violin` - and a narrow `box` over it - per visual
+ * segment of each series, drawing a violin per category of its rows, filled with its series'
+ * color (or its segment's own `fill`). Series share each category's band side
+ * by side. The markers the "statistics" phase already put in `state.markers`
+ * come after, so they render on top.
+ */
+export function buildMarks(state, ctx) {
+    const processed = state.processedData;
+    if (!processed)
+        return [];
+    const { cfg } = ctx;
+    const styles = state.styles;
+    const { channels } = processed;
+    const groups = state.processedGroups ?? [];
+    let peak;
+    if (styles?.scale === 'shared') {
+        const valueAxis = PlotAxes.valueOf(state);
+        const position = ProcessedPositions.of(processed, valueAxis);
+        const read = { category: position[PlotAxes.categoryOf(state)], value: position[valueAxis] };
+        const estimate = { kernel: styles.kernel, bandwidth: styles.bandwidth, trim: styles.trim };
+        peak = ViolinProfiles.peak(groups.flatMap((g) => g.visualSegments.flatMap((s) => ViolinProfiles.of(s.data, read, estimate))));
+    }
+    const boxWidth = styles?.box === false
+        ? undefined
+        : typeof styles?.box === 'number'
+            ? styles.box
+            : cfg.violin.boxWidth;
+    const ink = cfg.axis.color;
+    const violins = groups.flatMap((group, index) => {
+        const name = group.series.name;
+        const disabled = ctx.interaction?.fillFor(name);
+        return group.visualSegments.map((seg) => ({
+            type: 'violin',
+            series: name,
+            data: seg.data,
+            x: channels.x,
+            y: channels.y,
+            kernel: styles?.kernel,
+            bandwidth: styles?.bandwidth,
+            trim: styles?.trim,
+            peak,
+            slot: { index, count: groups.length },
+            styles: {
+                ...seg.styles,
+                fill: disabled?.fill ?? seg.styles.fill ?? state.colorForSeries(name),
+                fillOpacity: disabled?.fillOpacity ?? seg.styles.fillOpacity ?? cfg.violin.fillOpacity
+            }
+        }));
+    });
+    // The box inside each violin: a narrow `box` marker in the axis color, its median a tick, with no outliers or caps.
+    const boxes = boxWidth === undefined
+        ? []
+        : groups.flatMap((group, index) => group.visualSegments.map((seg) => ({
+            type: 'box',
+            series: group.series.name,
+            data: seg.data,
+            x: channels.x,
+            y: channels.y,
+            thickness: boxWidth,
+            slot: { index, count: groups.length },
+            bar: { fill: ink, fillOpacity: 1 },
+            rule: { stroke: ink, strokeWidth: 1.5 },
+            dot: { r: 0 },
+            tickMinMax: false
+        })));
+    return [...violins, ...boxes];
+}

package/dist/plots/{area → evolution/area}/Plot.svelte

@@ -1,7 +1,7 @@
 <script lang="ts" generics="TData extends Record<string, unknown>">
-	import Plot from '../../layout/plot/Plot.svelte';
+	import Plot from '../../../layout/plot/Plot.svelte';
 	import { buildAreaDefaults } from './defaults';
-	import type { AreaPlotProps, AreaPlotCoreProps } from '../../types/plots/area/props';
+	import type { AreaPlotProps, AreaPlotCoreProps } from '../../../types/plots/evolution/area/props';
 
 	/**
 	 * An area per series, filled from its own baseline. Draws from pre-built `series` or flat `data` rows.

package/dist/plots/{area → evolution/area}/Plot.svelte.d.ts

@@ -1,5 +1,5 @@
-import Plot from '../../layout/plot/Plot.svelte';
-import type { AreaPlotProps } from '../../types/plots/area/props';
+import Plot from '../../../layout/plot/Plot.svelte';
+import type { AreaPlotProps } from '../../../types/plots/evolution/area/props';
 declare function $$render<TData extends Record<string, unknown>>(): {
     props: AreaPlotProps<TData>;
     exports: {};

package/dist/plots/{area → evolution/area}/defaults.d.ts

@@ -1,4 +1,4 @@
-import type { AxisPlotDefaults } from '../../types/phases';
-import type { AreaPlotState, AreaPlotCtx } from '../../types/plots/area/state';
+import type { AxisPlotDefaults } from '../../../types/phases';
+import type { AreaPlotState, AreaPlotCtx } from '../../../types/plots/evolution/area/state';
 /** AreaPlot on the shared pipeline: areas from a zero baseline, author markers taking the plot's `x`/`y`, and its own markers. Its plot defaults to: hover along x, cumulative timeline tweening `y` per series. */
 export declare function buildAreaDefaults<TData extends Record<string, unknown>>(): AxisPlotDefaults<AreaPlotState<TData>, AreaPlotCtx>;

package/dist/plots/{area → evolution/area}/defaults.js

@@ -1,10 +1,12 @@
 import { buildMarks } from './markers';
+import { ValueLabels } from '../../../layout/styles/ValueLabels';
 /** AreaPlot on the shared pipeline: areas from a zero baseline, author markers taking the plot's `x`/`y`, and its own markers. Its plot defaults to: hover along x, cumulative timeline tweening `y` per series. */
 export function buildAreaDefaults() {
     return {
         data: { segments: { color: (style) => style?.fill } },
         statistics: { inheritPositions: true },
         scales: { zero: ['y'] },
+        transforms: { labels: { select: 'last', skip: ValueLabels.skipGaps } },
         styles: {
             values: {
                 anchor: 'start',

package/dist/plots/{area → evolution/area}/markers.d.ts

@@ -1,5 +1,5 @@
-import type { AreaPlotState, AreaPlotCtx } from '../../types/plots/area/state';
-import type { AxisBasedMarkersConfig } from '../../types/markers/common';
+import type { AreaPlotState, AreaPlotCtx } from '../../../types/plots/evolution/area/state';
+import type { AxisBasedMarkersConfig } from '../../../types/markers/common';
 /**
  * AreaPlot's "markers" phase: one `area` per visual segment of each series,
  * drawing the rows the "transforms" phase left (stacked, when the plot

package/dist/plots/{area → evolution/area}/markers.js

@@ -1,5 +1,4 @@
-import { TransformsPhase } from '../../phases/transforms/TransformsPhase';
-import { Transforms } from '../../phases/transforms/Transforms';
+import { Transforms } from '../../../phases/transforms/Transforms';
 /**
  * AreaPlot's "markers" phase: one `area` per visual segment of each series,
  * drawing the rows the "transforms" phase left (stacked, when the plot
@@ -27,7 +26,7 @@ export function buildMarks(state, ctx) {
     };
     // The dim channel: each area reads its own series name, looked up in `opacityScale`.
     const dimByName = (name) => dimmed ? { opacity: () => name, scales: { opacity: opacityScale } } : {};
-    const areas = TransformsPhase.buildProcessedGroups(state).flatMap((group) => group.visualSegments.map((seg) => Transforms.finish({
+    const areas = (state.processedGroups ?? []).flatMap((group) => group.visualSegments.map((seg) => Transforms.finish({
         type: 'area',
         series: group.series.name,
         data: seg.data,

package/dist/plots/{line → evolution/line}/Plot.svelte

@@ -1,7 +1,7 @@
 <script lang="ts" generics="TData extends Record<string, unknown>">
-	import Plot from '../../layout/plot/Plot.svelte';
+	import Plot from '../../../layout/plot/Plot.svelte';
 	import { buildLineDefaults } from './defaults';
-	import type { LinePlotProps, LinePlotCoreProps } from '../../types/plots/line/props';
+	import type { LinePlotProps, LinePlotCoreProps } from '../../../types/plots/evolution/line/props';
 
 	/**
 	 * A line per series. Draws from pre-built `series` or flat `data` rows.

package/dist/plots/{line → evolution/line}/Plot.svelte.d.ts

@@ -1,5 +1,5 @@
-import Plot from '../../layout/plot/Plot.svelte';
-import type { LinePlotProps } from '../../types/plots/line/props';
+import Plot from '../../../layout/plot/Plot.svelte';
+import type { LinePlotProps } from '../../../types/plots/evolution/line/props';
 declare function $$render<TData extends Record<string, unknown>>(): {
     props: LinePlotProps<TData>;
     exports: {};

package/dist/plots/{line → evolution/line}/defaults.d.ts

@@ -1,4 +1,4 @@
-import type { AxisPlotDefaults } from '../../types/phases';
-import type { LinePlotState, LinePlotCtx } from '../../types/plots/line/state';
+import type { AxisPlotDefaults } from '../../../types/phases';
+import type { LinePlotState, LinePlotCtx } from '../../../types/plots/evolution/line/state';
 /** LinePlot on the shared pipeline: continuous segments colored by their stroke, and its own markers. Its plot defaults to: hover along x, cumulative timeline tweening `y` per series. */
 export declare function buildLineDefaults<TData extends Record<string, unknown>>(): AxisPlotDefaults<LinePlotState<TData>, LinePlotCtx>;

package/dist/plots/{line → evolution/line}/defaults.js

@@ -1,4 +1,5 @@
 import { buildMarks } from './markers';
+import { ValueLabels } from '../../../layout/styles/ValueLabels';
 /** LinePlot on the shared pipeline: continuous segments colored by their stroke, and its own markers. Its plot defaults to: hover along x, cumulative timeline tweening `y` per series. */
 export function buildLineDefaults() {
     return {
@@ -13,6 +14,7 @@ export function buildLineDefaults() {
                 return state.resolvedSeries?.[0] && state.colorForSeries?.(state.resolvedSeries[0].name);
             }
         },
+        transforms: { labels: { select: 'last', skip: ValueLabels.skipGaps } },
         styles: {
             values: {
                 anchor: 'start',

package/dist/plots/{line → evolution/line}/markers.d.ts

@@ -1,11 +1,12 @@
-import type { Series } from '../../types/plots/data/common';
-import type { GapsConfig } from '../../types/plots/gaps';
-import type { LineSegmentStyle } from '../../types/plots/segments/common';
-import type { VisualGroup } from '../../types/plots/segments/config';
-import type { StrokeStyle, DotStyle } from '../../types/plots/styling';
-import type { LineMarkerConfig, DotMarkerConfig } from '../../types/markers/common';
-import type { LinePlotState, LinePlotCtx } from '../../types/plots/line/state';
-import type { AxisBasedMarkersConfig } from '../../types/markers/common';
+import type { Series } from '../../../types/plots/data/common';
+import type { GapsConfig } from '../../../types/plots/gaps';
+import type { LineSegmentStyle } from '../../../types/plots/segments/common';
+import type { VisualGroup } from '../../../types/plots/segments/config';
+import type { StrokeStyle, DotStyle } from '../../../types/plots/styling';
+import type { LineMarkerConfig, DotMarkerConfig } from '../../../types/markers/common';
+import type { LinePlotState, LinePlotCtx } from '../../../types/plots/evolution/line/state';
+import type { CurveName } from '../../../types/layout/styles/curve';
+import type { AxisBasedMarkersConfig } from '../../../types/markers/common';
 /**
  * Every `'line'` (+ `'dot'`, where a segment's style asks for them) marker
  * for one LinePlot render: one `'line'` marker per visual segment, plus a
@@ -16,6 +17,8 @@ export declare function buildLineMarkers<TData extends Record<string, unknown>>(
     colorFor: (seriesName: string) => string;
     disabledStrokeFor: (seriesName: string) => StrokeStyle | undefined;
     disabledDotsFor: (seriesName: string) => DotStyle | undefined;
+    /** The curve of every segment that sets none of its own; `'linear'` when left out. */
+    curve?: CurveName;
 }): (LineMarkerConfig | DotMarkerConfig)[];
 /**
  * One `'line'` (+ `'dot'`, when its zone sets `style.dots`) marker per

package/dist/plots/{line → evolution/line}/markers.js

@@ -1,13 +1,12 @@
-import { getConfiguration } from '../../configuration/config.svelte';
-import { TransformsPhase } from '../../phases/transforms/TransformsPhase';
-import { resolveGapRuns, resolveGapsForSeries } from '../utils/gaps';
+import { getConfiguration } from '../../../configuration/config.svelte';
+import { resolveGapRuns, resolveGapsForSeries } from '../../utils/gaps';
 /**
  * Every `'line'` (+ `'dot'`, where a segment's style asks for them) marker
  * for one LinePlot render: one `'line'` marker per visual segment, plus a
  * `'dot'` marker right after it when that segment sets `style.dots`.
  */
 export function buildLineMarkers(args) {
-    const { groupedSeries, colorFor, disabledStrokeFor, disabledDotsFor } = args;
+    const { groupedSeries, colorFor, disabledStrokeFor, disabledDotsFor, curve } = args;
     const cfg = getConfiguration();
     const markers = [];
     groupedSeries.forEach((group) => {
@@ -30,6 +29,7 @@ export function buildLineMarkers(args) {
                 data: seg.data,
                 x,
                 y,
+                curve: seg.styles.curve ?? curve,
                 styles: {
                     stroke: disabledStroke?.stroke ?? strokeStyle?.stroke ?? defaultColor,
                     strokeWidth: disabledStroke?.strokeWidth ?? strokeStyle?.strokeWidth ?? cfg.line.strokeWidth,
@@ -182,12 +182,13 @@ 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,
         disabledStrokeFor,
-        disabledDotsFor
+        disabledDotsFor,
+        curve: state.styles?.curve
     });
     const gapMarkers = buildGapMarkers({
         seriesList: groups.map((g) => g.series),

package/dist/plots/evolution/slope/Plot.svelte

@@ -0,0 +1,42 @@
+<script lang="ts" generics="TData extends Record<string, unknown>">
+	import Plot from '../../../layout/plot/Plot.svelte';
+	import { buildSlopeDefaults } from './defaults';
+	import type { SlopePlotProps, SlopePlotCoreProps } from '../../../types/plots/evolution/slope/props';
+
+	/**
+	 * A slope plot: a line and a dot per series between two positions on a category axis, labelled at both ends, to read how each one changed. 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
+	}: SlopePlotProps<TData> = $props();
+</script>
+
+<Plot
+	core={core as SlopePlotCoreProps<TData>}
+	defaults={buildSlopeDefaults}
+	bind:margins
+	{title}
+	{subtitle}
+	{caption}
+	{header}
+	{footer}
+	{legend}
+	{order}
+	{timeline}
+	{facet}
+	{tooltip}
+/>

package/dist/plots/evolution/slope/Plot.svelte.d.ts

@@ -0,0 +1,26 @@
+import Plot from '../../../layout/plot/Plot.svelte';
+import type { SlopePlotProps } from '../../../types/plots/evolution/slope/props';
+declare function $$render<TData extends Record<string, unknown>>(): {
+    props: SlopePlotProps<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/evolution/slope/defaults.d.ts

@@ -0,0 +1,8 @@
+import type { AxisPlotDefaults } from '../../../types/phases';
+import type { SlopePlotState, SlopePlotCtx } from '../../../types/plots/evolution/slope/state';
+/**
+ * SlopePlot on the shared pipeline: a LinePlot over a category axis of a few
+ * positions - two, for a slope - with a dot on every point and its first and
+ * last labelled, each before or after it.
+ */
+export declare function buildSlopeDefaults<TData extends Record<string, unknown>>(): AxisPlotDefaults<SlopePlotState<TData>, SlopePlotCtx>;

package/dist/plots/evolution/slope/defaults.js

@@ -0,0 +1,31 @@
+import { buildMarks, buildValueLabels } from './markers';
+import { ValueLabels } from '../../../layout/styles/ValueLabels';
+import { buildLineDefaults } from '../line/defaults';
+/**
+ * SlopePlot on the shared pipeline: a LinePlot over a category axis of a few
+ * positions - two, for a slope - with a dot on every point and its first and
+ * last labelled, each before or after it.
+ */
+export function buildSlopeDefaults() {
+    const line = buildLineDefaults();
+    return {
+        ...line,
+        data: { ...line.data, discreteAxes: 1 },
+        transforms: { labels: { select: ['first', 'last'], skip: ValueLabels.skipGaps } },
+        scales: {
+            bandOrder: 'data',
+            // The labels give the values, so the value axis stays out of their way.
+            defaults: (_state, ctx) => ({
+                category: { type: 'point', padding: ctx.cfg.slope.padding },
+                value: { axisDisplay: 'none' }
+            })
+        },
+        styles: {
+            values: {
+                anchor: 'start',
+                format: (v, name) => `${name} - ${v}`
+            }
+        },
+        markers: { marks: buildMarks, valueLabels: buildValueLabels }
+    };
+}

package/dist/plots/evolution/slope/markers.d.ts

@@ -0,0 +1,16 @@
+import type { ValueLabels } from '../../../layout/styles/ValueLabels';
+import type { EdgeBox } from '../../../types/layout/box';
+import type { AxisBasedMarkersConfig, TextMarkerConfig } from '../../../types/markers/common';
+import type { SlopePlotState, SlopePlotCtx } from '../../../types/plots/evolution/slope/state';
+/**
+ * SlopePlot's "markers" phase: each series' line, with a dot on every point
+ * (a slope has few), over the rows the "transforms" phase left.
+ */
+export declare function buildMarks<TData extends Record<string, unknown>>(state: SlopePlotState<TData>, ctx: SlopePlotCtx): AxisBasedMarkersConfig[];
+/**
+ * SlopePlot's value labels: the series' first points labelled before them and
+ * its last ones after, each end spread apart where its labels would overlap.
+ */
+export declare function buildValueLabels<TData extends Record<string, unknown>>(labels: ValueLabels, state: SlopePlotState<TData>): TextMarkerConfig[];
+/** Where SlopePlot's labels are expected to sit: past the points at both ends. */
+export declare function buildReach<TData extends Record<string, unknown>>(labels: ValueLabels, state: SlopePlotState<TData>): EdgeBox[];

package/dist/plots/evolution/slope/markers.js

@@ -0,0 +1,79 @@
+import { getConfiguration } from '../../../configuration/config.svelte';
+import { buildLineMarkers } from '../line/markers';
+import { ProcessedPositions } from '../../../phases/transforms/ProcessedPositions';
+/** The anchor of the labels at the plot's start: the mirror of the end's, so `'start'` always reads outward. */
+function startAnchor(anchor) {
+    return anchor === 'start' ? 'end' : anchor === 'end' ? 'start' : anchor;
+}
+/** The value a position is told apart by: a date by its time. */
+const keyOf = (value) => (value instanceof Date ? value.getTime() : value);
+/**
+ * SlopePlot's "markers" phase: each series' line, with a dot on every point
+ * (a slope has few), over the rows the "transforms" phase left.
+ */
+export function buildMarks(state, ctx) {
+    const { slope } = getConfiguration();
+    const groups = (state.processedGroups ?? []).map((group) => ({
+        ...group,
+        visualSegments: group.visualSegments.map((segment) => ({
+            ...segment,
+            styles: {
+                ...segment.styles,
+                stroke: { strokeWidth: slope.strokeWidth, ...segment.styles.stroke },
+                dots: { dotRadius: slope.dotRadius, ...segment.styles.dots }
+            }
+        }))
+    }));
+    return buildLineMarkers({
+        groupedSeries: groups,
+        colorFor: state.colorForSeries,
+        disabledStrokeFor: (name) => ctx.interaction?.strokeFor(name),
+        disabledDotsFor: (name) => ctx.interaction?.dotsFor(name),
+        curve: state.styles?.curve
+    });
+}
+/** The rows labelled at the plot's first position and at its last, each series' own. */
+function labelledEnds(state) {
+    const processed = state.processedData;
+    const x = ProcessedPositions.of(processed).x;
+    const domain = state.scales.x?.domain;
+    const positions = Array.isArray(domain)
+        ? domain.map(keyOf)
+        : [...new Set(processed.data.map((row) => keyOf(x(row))))];
+    const first = positions[0];
+    const last = positions[positions.length - 1];
+    const rows = state.labelled ?? [];
+    return {
+        start: rows.filter((row) => keyOf(x(row)) === first),
+        end: rows.filter((row) => keyOf(x(row)) === last && keyOf(x(row)) !== first)
+    };
+}
+/**
+ * SlopePlot's value labels: the series' first points labelled before them and
+ * its last ones after, each end spread apart where its labels would overlap.
+ */
+export function buildValueLabels(labels, state) {
+    if (!state.processedData)
+        return [];
+    const { start, end } = labelledEnds(state);
+    return [
+        ...labels.atSeriesEnds(state, {
+            rows: start,
+            anchor: startAnchor(labels.anchor),
+            lane: true,
+            flip: false
+        }),
+        ...labels.atSeriesEnds(state, { rows: end, lane: true })
+    ];
+}
+/** Where SlopePlot's labels are expected to sit: past the points at both ends. */
+export function buildReach(labels, state) {
+    // Labels before the first position reach the left edge, those after the last one the right.
+    const before = labels
+        .reachAtSeriesEnds(state, startAnchor(labels.anchor))
+        .map(({ box, edges }) => ({ box, edges: edges.filter((edge) => edge !== 'right') }));
+    const after = labels
+        .reachAtSeriesEnds(state)
+        .map(({ box, edges }) => ({ box, edges: edges.filter((edge) => edge !== 'left') }));
+    return [...before, ...after];
+}

package/dist/plots/evolution/sparkline/Plot.svelte

@@ -0,0 +1,45 @@
+<script lang="ts" generics="TData extends Record<string, unknown>">
+	import Plot from '../../../layout/plot/Plot.svelte';
+	import { buildSparklineDefaults } from './defaults';
+	import type {
+		SparklinePlotProps,
+		SparklinePlotCoreProps
+	} from '../../../types/plots/evolution/sparkline/props';
+
+	/**
+	 * A sparkline: a small line plot with no axes or legend, a dot on the last point of each series and its value beside it. Draws from pre-built `series` or flat `data` rows.
+	 * Optional chrome (`title`, `subtitle`, `caption`, `header`, `footer`,
+	 * `legend`) frames it, though none is there by default; `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 = false,
+		order,
+		timeline,
+		facet,
+		tooltip,
+		margins = $bindable({ top: 6, bottom: 6, left: 4 }),
+		...core
+	}: SparklinePlotProps<TData> = $props();
+</script>
+
+<Plot
+	core={core as SparklinePlotCoreProps<TData>}
+	defaults={buildSparklineDefaults}
+	bind:margins
+	{title}
+	{subtitle}
+	{caption}
+	{header}
+	{footer}
+	{legend}
+	{order}
+	{timeline}
+	{facet}
+	{tooltip}
+/>

package/dist/plots/evolution/sparkline/Plot.svelte.d.ts

@@ -0,0 +1,26 @@
+import Plot from '../../../layout/plot/Plot.svelte';
+import type { SparklinePlotProps } from '../../../types/plots/evolution/sparkline/props';
+declare function $$render<TData extends Record<string, unknown>>(): {
+    props: SparklinePlotProps<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/evolution/sparkline/defaults.d.ts

@@ -0,0 +1,7 @@
+import type { AxisPlotDefaults } from '../../../types/phases';
+import type { SparklinePlotState, SparklinePlotCtx } from '../../../types/plots/evolution/sparkline/state';
+/**
+ * SparklinePlot on the shared pipeline: a LinePlot with its axes left out, a
+ * thin line, and a dot and value on the last point of each series.
+ */
+export declare function buildSparklineDefaults<TData extends Record<string, unknown>>(): AxisPlotDefaults<SparklinePlotState<TData>, SparklinePlotCtx>;

package/dist/plots/evolution/sparkline/defaults.js

@@ -0,0 +1,23 @@
+import { buildMarks } from './markers';
+import { ValueLabels } from '../../../layout/styles/ValueLabels';
+import { buildLineDefaults } from '../line/defaults';
+/**
+ * SparklinePlot on the shared pipeline: a LinePlot with its axes left out, a
+ * thin line, and a dot and value on the last point of each series.
+ */
+export function buildSparklineDefaults() {
+    const line = buildLineDefaults();
+    return {
+        ...line,
+        transforms: { labels: { select: 'last', skip: ValueLabels.skipGaps, show: true } },
+        scales: { defaults: () => ({ x: { axisDisplay: 'none' }, y: { axisDisplay: 'none' } }) },
+        styles: {
+            values: {
+                ...line.styles?.values,
+                show: true,
+                format: (value) => `${value}`
+            }
+        },
+        markers: { marks: buildMarks, valueLabels: line.markers.valueLabels }
+    };
+}