@fundar/data-chart-telling 1.17.0 → 1.19.0

package/dist/plots/distribution/violin/defaults.d.ts

@@ -1,5 +1,5 @@
 import type { AxisPlotDefaults } from '../../../types/phases';
-import type { ViolinPlotState, ViolinPlotCtx } from '../../../types/plots/distribution/violin/state';
+import type { ViolinPlotState, ViolinPlotEnv } from '../../../types/plots/distribution/violin/state';
 /**
  * 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
@@ -7,4 +7,4 @@ import type { ViolinPlotState, ViolinPlotCtx } from '../../../types/plots/distri
  * 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 declare function buildViolinDefaults<TData extends Record<string, unknown>>(): AxisPlotDefaults<ViolinPlotState<TData>, ViolinPlotCtx>;
+export declare function buildViolinDefaults<TData extends Record<string, unknown>>(): AxisPlotDefaults<ViolinPlotState<TData>, ViolinPlotEnv>;

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

@@ -1,9 +1,9 @@
 import { buildMarks } from './markers';
+import { HoverDefaults } from '../../../layout/hover/HoverDefaults';
 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.
  */
@@ -43,20 +43,33 @@ export function buildViolinDefaults() {
         scales: {
             bandOrder: 'data',
             fit: (state) => fitValueDomain(state),
-            defaults: (_state, ctx) => ({
+            defaults: (_state, env) => ({
                 category: {
-                    paddingInner: ctx.cfg.violin.paddingInner,
-                    paddingOuter: ctx.cfg.violin.paddingOuter
+                    paddingInner: env.cfg.violin.paddingInner,
+                    paddingOuter: env.cfg.violin.paddingOuter
                 }
             })
         },
+        // Each value's box: its quartiles and whiskers, worked out once for its tooltip and hover to read.
+        context: (state) => BoxSummaries.context(state),
+        styles: {
+            values: {
+                layout: 'point',
+                // A quartile is worked out, not read: at most two decimals, as the tooltip writes it.
+                format: (value, number) => number(Math.round(value * 100) / 100),
+                parts: {
+                    placements: (state) => BoxSummaries.partPlacements(state),
+                    default: ['median']
+                }
+            }
+        },
         markers: { marks: buildMarks },
         hover: {
+            // The hovered category's band behind its shape.
+            marker: (state) => HoverDefaults.behindBand(PlotAxes.other(PlotAxes.valueOf(state))),
             rows: BoxSummaries.of,
             position: BoxSummaries.position,
-            label: () => ((row) => String(row.median)),
-            format: (state) => BoxSummaries.format(state),
-            sort: () => TooltipState.descending((row) => row.median)
+            format: (state) => BoxSummaries.format(state)
         }
     };
 }

package/dist/plots/distribution/violin/markers.d.ts

@@ -1,4 +1,4 @@
-import type { ViolinPlotState, ViolinPlotCtx } from '../../../types/plots/distribution/violin/state';
+import type { ViolinPlotState, ViolinPlotEnv } 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
@@ -7,4 +7,4 @@ import type { AxisBasedMarkersConfig } from '../../../types/markers/common';
  * 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[];
+export declare function buildMarks<TData extends Record<string, unknown>>(state: ViolinPlotState<TData>, env: ViolinPlotEnv): AxisBasedMarkersConfig[];

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

@@ -1,3 +1,6 @@
+import { ValueLabels } from '../../../layout/styles/ValueLabels';
+import { BoxSummaries } from '../box/BoxSummaries';
+import { SERIES_KEY } from '../../../phases/transforms/TransformsPhase';
 import { ProcessedPositions } from '../../../phases/transforms/ProcessedPositions';
 import { PlotAxes } from '../../../phases/data/PlotAxes';
 import { ViolinProfiles } from '../../../markers/violin/ViolinProfiles';
@@ -8,14 +11,24 @@ import { ViolinProfiles } from '../../../markers/violin/ViolinProfiles';
  * by side. The markers the "statistics" phase already put in `state.markers`
  * come after, so they render on top.
  */
-export function buildMarks(state, ctx) {
+export function buildMarks(state, env) {
     const processed = state.processedData;
     if (!processed)
         return [];
-    const { cfg } = ctx;
+    const { cfg } = env;
     const styles = state.styles;
     const { channels } = processed;
     const groups = state.processedGroups ?? [];
+    // Series share a band side by side only where they meet in it: one series per category - grouped by the category
+    // itself - fills each band.
+    const categoryOf = ProcessedPositions.of(processed, PlotAxes.valueOf(state))[PlotAxes.categoryOf(state)];
+    const seriesIn = new Map();
+    for (const row of processed.data) {
+        const key = String(categoryOf(row));
+        seriesIn.set(key, (seriesIn.get(key) ?? new Set()).add(row[SERIES_KEY]));
+    }
+    const shared = [...seriesIn.values()].some((series) => series.size > 1);
+    const slotOf = (index) => (shared ? { index, count: groups.length } : undefined);
     let peak;
     if (styles?.scale === 'shared') {
         const valueAxis = PlotAxes.valueOf(state);
@@ -32,7 +45,7 @@ export function buildMarks(state, ctx) {
     const ink = 'currentColor';
     const violins = groups.flatMap((group, index) => {
         const name = group.series.name;
-        const disabled = ctx.interaction?.fillFor(name);
+        const disabled = env.interaction?.fillFor(name);
         return group.visualSegments.map((seg) => ({
             type: 'violin',
             series: name,
@@ -43,7 +56,7 @@ export function buildMarks(state, ctx) {
             bandwidth: styles?.bandwidth,
             trim: styles?.trim,
             peak,
-            slot: { index, count: groups.length },
+            slot: slotOf(index),
             styles: {
                 // An outline asked for without a color is the fill's.
                 ...(seg.styles.strokeWidth !== undefined
@@ -65,11 +78,22 @@ export function buildMarks(state, ctx) {
             x: channels.x,
             y: channels.y,
             thickness: boxWidth,
-            slot: { index, count: groups.length },
+            slot: slotOf(index),
             bar: { fill: ink, fillOpacity: 1 },
             rule: { stroke: ink, strokeWidth: 1.5 },
             dot: { r: 0 },
             tickMinMax: false
         })));
-    return [...violins, ...boxes];
+    // The parts of each violin's box `styles.values` labels: its median by default, beside it, in its series' slot.
+    const slots = new Map(groups.map((group, index) => [group.series.name, index]));
+    const summaries = state;
+    const labels = state.valueLabels?.show
+        ? state.valueLabels.partMarkers(env, BoxSummaries.of(summaries), 
+        // Beside the narrow box inside each violin, the violin itself as wide as its values are dense.
+        ValueLabels.bandPoint(state, 'category', boxWidth ?? 0, (row) => {
+            const index = slots.get(String(row[SERIES_KEY]));
+            return index === undefined ? undefined : slotOf(index);
+        }), { seriesColor: (row) => state.colorForSeries(String(row[SERIES_KEY])) })
+        : [];
+    return [...violins, ...boxes, ...labels];
 }

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

@@ -1,5 +1,5 @@
 <script lang="ts" generics="TData extends Record<string, unknown>">
-	import Plot from '../../../layout/plot/Plot.svelte';
+	import AbstractPlot from '../../../layout/plot/AbstractPlot.svelte';
 	import { buildAreaDefaults } from './defaults';
 	import type { AreaPlotProps, AreaPlotCoreProps } from '../../../types/plots/evolution/area/props';
 
@@ -25,7 +25,7 @@
 	}: AreaPlotProps<TData> = $props();
 </script>
 
-<Plot
+<AbstractPlot
 	core={core as AreaPlotCoreProps<TData>}
 	defaults={buildAreaDefaults}
 	bind:margins

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

@@ -1,4 +1,3 @@
-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>;

package/dist/plots/evolution/area/defaults.d.ts

@@ -1,4 +1,4 @@
 import type { AxisPlotDefaults } from '../../../types/phases';
-import type { AreaPlotState, AreaPlotCtx } from '../../../types/plots/evolution/area/state';
+import type { AreaPlotState, AreaPlotEnv } 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>;
+export declare function buildAreaDefaults<TData extends Record<string, unknown>>(): AxisPlotDefaults<AreaPlotState<TData>, AreaPlotEnv>;

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

@@ -6,20 +6,17 @@ export function buildAreaDefaults() {
         data: {
             segments: { color: (style) => style?.fill, base: { flat: 'area' } }
         },
-        statistics: { inheritPositions: true },
         scales: { zero: ['y'] },
         transforms: { labels: { select: 'last', skip: ValueLabels.skipGaps } },
         styles: {
             values: {
-                anchor: 'start',
-                format: (v, name, number) => `${name} - ${number(v)}`,
-                reach: (labels, state) => labels.reachAtSeriesEnds(state)
+                layout: 'point',
+                layouts: { point: { side: 'after' }, path: { edge: 'top', side: 'above', offset: 'end' } },
+                format: (v, number, context) => `${context.series} - ${number(v)}`,
+                reach: (labels, state) => (labels.layout === 'point' ? labels.reachAtSeriesEnds(state) : [])
             }
         },
-        markers: {
-            marks: buildMarks,
-            valueLabels: (labels, state) => labels.atSeriesEnds(state)
-        },
+        markers: { marks: buildMarks },
         timeline: { filterMode: 'upTo', interpolation: { value: 'y', key: ['grouping'] } }
     };
 }

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

@@ -1,4 +1,4 @@
-import type { AreaPlotState, AreaPlotCtx } from '../../../types/plots/evolution/area/state';
+import type { AreaPlotState, AreaPlotEnv } 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,
@@ -11,4 +11,4 @@ import type { AxisBasedMarkersConfig } from '../../../types/markers/common';
  * another series' value label, dims its own areas' fill to
  * `legend.disabledOpacity`, in place, so a stack keeps its full extent.
  */
-export declare function buildMarks<TData extends Record<string, unknown>>(state: AreaPlotState<TData>, ctx: AreaPlotCtx): AxisBasedMarkersConfig[];
+export declare function buildMarks<TData extends Record<string, unknown>>(state: AreaPlotState<TData>, env: AreaPlotEnv): AxisBasedMarkersConfig[];

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

@@ -1,3 +1,4 @@
+import { ValueLabels } from '../../../layout/styles/ValueLabels';
 import { Transforms } from '../../../phases/transforms/Transforms';
 /**
  * AreaPlot's "markers" phase: one `area` per visual segment of each series,
@@ -10,17 +11,17 @@ import { Transforms } from '../../../phases/transforms/Transforms';
  * another series' value label, dims its own areas' fill to
  * `legend.disabledOpacity`, in place, so a stack keeps its full extent.
  */
-export function buildMarks(state, ctx) {
+export function buildMarks(state, env) {
     const { resolvedSeries = [] } = state;
     const { channels, options, transforms } = state.processedData;
-    const { cfg } = ctx;
+    const { cfg } = env;
     // A fill opacity per series name, for the dim: a legend-off series fades to
     // the legend's disabled opacity, every other one keeps the area default.
     const fillOpacityOf = (name) => {
-        const off = ctx.interaction?.dimmed(name);
+        const off = env.interaction?.dimmed(name);
         return off ? (off.opacity ?? cfg.legend.disabledOpacity) : cfg.area.fillOpacity;
     };
-    const dimmed = resolvedSeries.some((s) => ctx.interaction?.dimmed(s.name));
+    const dimmed = resolvedSeries.some((s) => env.interaction?.dimmed(s.name));
     const opacityScale = {
         range: Object.fromEntries(resolvedSeries.map((s) => [s.name, fillOpacityOf(s.name)]))
     };
@@ -44,5 +45,6 @@ export function buildMarks(state, ctx) {
             ...dimByName(group.series.name)
         }, transforms);
     }));
-    return areas;
+    const labels = state.valueLabels?.show ? state.valueLabels.forSeries(state, env) : undefined;
+    return ValueLabels.onMarkers(areas, 'area', labels);
 }

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

@@ -1,5 +1,5 @@
 <script lang="ts" generics="TData extends Record<string, unknown>">
-	import Plot from '../../../layout/plot/Plot.svelte';
+	import AbstractPlot from '../../../layout/plot/AbstractPlot.svelte';
 	import { buildLineDefaults } from './defaults';
 	import type { LinePlotProps, LinePlotCoreProps } from '../../../types/plots/evolution/line/props';
 
@@ -25,7 +25,7 @@
 	}: LinePlotProps<TData> = $props();
 </script>
 
-<Plot
+<AbstractPlot
 	core={core as LinePlotCoreProps<TData>}
 	defaults={buildLineDefaults}
 	bind:margins

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

@@ -1,4 +1,3 @@
-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>;

package/dist/plots/evolution/line/defaults.d.ts

@@ -1,4 +1,4 @@
 import type { AxisPlotDefaults } from '../../../types/phases';
-import type { LinePlotState, LinePlotCtx } from '../../../types/plots/evolution/line/state';
+import type { LinePlotState, LinePlotEnv } 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>;
+export declare function buildLineDefaults<TData extends Record<string, unknown>>(): AxisPlotDefaults<LinePlotState<TData>, LinePlotEnv>;

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

@@ -22,15 +22,13 @@ export function buildLineDefaults() {
         transforms: { labels: { select: 'last', skip: ValueLabels.skipGaps } },
         styles: {
             values: {
-                anchor: 'start',
-                format: (v, name, number) => `${name} - ${number(v)}`,
-                reach: (labels, state) => labels.reachAtSeriesEnds(state)
+                layout: 'point',
+                layouts: { point: { side: 'after' }, path: { side: 'above', offset: 'end' } },
+                format: (v, number, context) => `${context.series} - ${number(v)}`,
+                reach: (labels, state) => (labels.layout === 'point' ? labels.reachAtSeriesEnds(state) : [])
             }
         },
-        markers: {
-            marks: buildMarks,
-            valueLabels: (labels, state) => labels.atSeriesEnds(state)
-        },
+        markers: { marks: buildMarks },
         timeline: { filterMode: 'upTo', interpolation: { value: 'y', key: ['grouping'] } }
     };
 }

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

@@ -4,7 +4,7 @@ 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 { LinePlotState, LinePlotEnv } from '../../../types/plots/evolution/line/state';
 import type { CurveName } from '../../../types/layout/styles/curve';
 import type { AxisBasedMarkersConfig } from '../../../types/markers/common';
 /**
@@ -49,4 +49,4 @@ export declare function buildGapMarkers<TData extends Record<string, unknown>>(a
  * whatever the "statistics" phase already put in `state.markers` - and its
  * value labels on top of everything.
  */
-export declare function buildMarks<TData extends Record<string, unknown>>(state: LinePlotState<TData>, ctx: LinePlotCtx): AxisBasedMarkersConfig[];
+export declare function buildMarks<TData extends Record<string, unknown>>(state: LinePlotState<TData>, env: LinePlotEnv): AxisBasedMarkersConfig[];

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

@@ -1,3 +1,4 @@
+import { ValueLabels } from '../../../layout/styles/ValueLabels';
 import { getConfiguration } from '../../../configuration/config.svelte';
 import { resolveGapRuns, resolveGapsForSeries } from '../../utils/gaps';
 /**
@@ -178,10 +179,10 @@ export function buildGapMarkers(args) {
  * whatever the "statistics" phase already put in `state.markers` - and its
  * value labels on top of everything.
  */
-export function buildMarks(state, ctx) {
+export function buildMarks(state, env) {
     const { colorForSeries, gaps } = state;
-    const disabledStrokeFor = (name) => ctx.interaction?.strokeFor(name);
-    const disabledDotsFor = (name) => ctx.interaction?.dotsFor(name);
+    const disabledStrokeFor = (name) => env.interaction?.strokeFor(name);
+    const disabledDotsFor = (name) => env.interaction?.dotsFor(name);
     const groups = state.processedGroups ?? [];
     const lineMarkers = buildLineMarkers({
         groupedSeries: groups,
@@ -197,5 +198,6 @@ export function buildMarks(state, ctx) {
         disabledStrokeFor,
         disabledDotsFor
     });
-    return [...lineMarkers, ...gapMarkers];
+    const labels = state.valueLabels?.show ? state.valueLabels.forSeries(state, env) : undefined;
+    return [...ValueLabels.onMarkers(lineMarkers, 'line', labels), ...gapMarkers];
 }

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

@@ -1,5 +1,5 @@
 <script lang="ts" generics="TData extends Record<string, unknown>">
-	import Plot from '../../../layout/plot/Plot.svelte';
+	import AbstractPlot from '../../../layout/plot/AbstractPlot.svelte';
 	import { buildSlopeDefaults } from './defaults';
 	import type { SlopePlotProps, SlopePlotCoreProps } from '../../../types/plots/evolution/slope/props';
 
@@ -25,7 +25,7 @@
 	}: SlopePlotProps<TData> = $props();
 </script>
 
-<Plot
+<AbstractPlot
 	core={core as SlopePlotCoreProps<TData>}
 	defaults={buildSlopeDefaults}
 	bind:margins

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

@@ -1,4 +1,3 @@
-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>;

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

@@ -1,8 +1,8 @@
 import type { AxisPlotDefaults } from '../../../types/phases';
-import type { SlopePlotState, SlopePlotCtx } from '../../../types/plots/evolution/slope/state';
+import type { SlopePlotState, SlopePlotEnv } 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>;
+export declare function buildSlopeDefaults<TData extends Record<string, unknown>>(): AxisPlotDefaults<SlopePlotState<TData>, SlopePlotEnv>;

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

@@ -1,4 +1,6 @@
-import { buildMarks, buildValueLabels } from './markers';
+import { buildMarks } from './markers';
+import { PlotAxes } from '../../../phases/data/PlotAxes';
+import { HoverDefaults } from '../../../layout/hover/HoverDefaults';
 import { ValueLabels } from '../../../layout/styles/ValueLabels';
 import { buildLineDefaults } from '../line/defaults';
 /**
@@ -15,17 +17,20 @@ export function buildSlopeDefaults() {
         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 },
+            defaults: (_state, env) => ({
+                category: { type: 'point', padding: env.cfg.slope.padding },
                 value: { axisDisplay: 'none' }
             })
         },
         styles: {
             values: {
-                anchor: 'start',
-                format: (v, name, number) => `${name} - ${number(v)}`
+                layout: 'point',
+                layouts: { point: { side: 'after' }, path: { side: 'above', offset: 'middle' } },
+                format: (v, number, context) => `${context.series} - ${number(v)}`
             }
         },
-        markers: { marks: buildMarks, valueLabels: buildValueLabels }
+        markers: { marks: buildMarks },
+        // Only two positions: a rule along the value axis at the hovered point says more than one across them.
+        hover: { ...line.hover, marker: (state) => HoverDefaults.valueRule(PlotAxes.valueOf(state)) }
     };
 }

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

@@ -1,16 +1,17 @@
-import type { ValueLabels } from '../../../layout/styles/ValueLabels';
+import { 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';
+import type { AxisBasedMarkersConfig } from '../../../types/markers/common';
+import type { MarkerLabelConfig } from '../../../types/markers/labels/common';
+import type { SlopePlotState, SlopePlotEnv } 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[];
+export declare function buildMarks<TData extends Record<string, unknown>>(state: SlopePlotState<TData>, env: SlopePlotEnv): 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[];
+export declare function buildValueLabels<TData extends Record<string, unknown>>(labels: ValueLabels, state: SlopePlotState<TData>, env: SlopePlotEnv): MarkerLabelConfig[];
 /** 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

@@ -1,9 +1,10 @@
 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;
+import { ValueLabels } from '../../../layout/styles/ValueLabels';
+/** The side of the labels at the plot's start: the mirror of the end's, so `'after'` always reads outward. */
+function startSide(side) {
+    return side === 'after' ? 'before' : side === 'before' ? 'after' : side;
 }
 /** The value a position is told apart by: a date by its time. */
 const keyOf = (value) => (value instanceof Date ? value.getTime() : value);
@@ -11,7 +12,7 @@ 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) {
+export function buildMarks(state, env) {
     const { slope } = getConfiguration();
     const groups = (state.processedGroups ?? []).map((group) => ({
         ...group,
@@ -24,13 +25,17 @@ export function buildMarks(state, ctx) {
             }
         }))
     }));
-    return buildLineMarkers({
+    const lines = buildLineMarkers({
         groupedSeries: groups,
         colorFor: state.colorForSeries,
-        disabledStrokeFor: (name) => ctx.interaction?.strokeFor(name),
-        disabledDotsFor: (name) => ctx.interaction?.dotsFor(name),
+        disabledStrokeFor: (name) => env.interaction?.strokeFor(name),
+        disabledDotsFor: (name) => env.interaction?.dotsFor(name),
         curve: state.styles?.curve
     });
+    const labels = state.valueLabels?.show
+        ? buildValueLabels(state.valueLabels, state, env)
+        : undefined;
+    return ValueLabels.onMarkers(lines, 'line', labels);
 }
 /** The rows labelled at the plot's first position and at its last, each series' own. */
 function labelledEnds(state) {
@@ -52,25 +57,27 @@ function labelledEnds(state) {
  * 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) {
+export function buildValueLabels(labels, state, env) {
     if (!state.processedData)
         return [];
+    if (labels.layout === 'path')
+        return labels.alongSeries(state, env);
     const { start, end } = labelledEnds(state);
     return [
-        ...labels.atSeriesEnds(state, {
+        ...labels.atSeriesEnds(state, env, {
             rows: start,
-            anchor: startAnchor(labels.anchor),
+            side: startSide(labels.side),
             lane: true,
             flip: false
         }),
-        ...labels.atSeriesEnds(state, { rows: end, lane: true })
+        ...labels.atSeriesEnds(state, env, { 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))
+        .reachAtSeriesEnds(state, startSide(labels.side))
         .map(({ box, edges }) => ({ box, edges: edges.filter((edge) => edge !== 'right') }));
     const after = labels
         .reachAtSeriesEnds(state)

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

@@ -1,5 +1,5 @@
 <script lang="ts" generics="TData extends Record<string, unknown>">
-	import Plot from '../../../layout/plot/Plot.svelte';
+	import AbstractPlot from '../../../layout/plot/AbstractPlot.svelte';
 	import { buildSparklineDefaults } from './defaults';
 	import type {
 		SparklinePlotProps,
@@ -28,7 +28,7 @@
 	}: SparklinePlotProps<TData> = $props();
 </script>
 
-<Plot
+<AbstractPlot
 	core={core as SparklinePlotCoreProps<TData>}
 	defaults={buildSparklineDefaults}
 	bind:margins

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

@@ -1,4 +1,3 @@
-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>;

package/dist/plots/evolution/sparkline/defaults.d.ts

@@ -1,7 +1,7 @@
 import type { AxisPlotDefaults } from '../../../types/phases';
-import type { SparklinePlotState, SparklinePlotCtx } from '../../../types/plots/evolution/sparkline/state';
+import type { SparklinePlotState, SparklinePlotEnv } 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>;
+export declare function buildSparklineDefaults<TData extends Record<string, unknown>>(): AxisPlotDefaults<SparklinePlotState<TData>, SparklinePlotEnv>;

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

@@ -1,4 +1,5 @@
 import { buildMarks } from './markers';
+import { HoverDefaults } from '../../../layout/hover/HoverDefaults';
 import { ValueLabels } from '../../../layout/styles/ValueLabels';
 import { buildLineDefaults } from '../line/defaults';
 /**
@@ -15,9 +16,11 @@ export function buildSparklineDefaults() {
             values: {
                 ...line.styles?.values,
                 show: true,
-                format: (value, _name, number) => number(value)
+                format: (value, number) => number(value)
             }
         },
-        markers: { marks: buildMarks, valueLabels: line.markers.valueLabels }
+        markers: { marks: buildMarks },
+        // Small and bare: a dot on the hovered point, and nothing else.
+        hover: { ...line.hover, marker: () => ({ back: [], front: [HoverDefaults.dot()] }) }
     };
 }

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

@@ -1,7 +1,7 @@
 import type { AxisBasedMarkersConfig } from '../../../types/markers/common';
-import type { SparklinePlotState, SparklinePlotCtx } from '../../../types/plots/evolution/sparkline/state';
+import type { SparklinePlotState, SparklinePlotEnv } from '../../../types/plots/evolution/sparkline/state';
 /**
  * SparklinePlot's "markers" phase: each series' line, thin, and a dot on its
  * last point with a value.
  */
-export declare function buildMarks<TData extends Record<string, unknown>>(state: SparklinePlotState<TData>, ctx: SparklinePlotCtx): AxisBasedMarkersConfig[];
+export declare function buildMarks<TData extends Record<string, unknown>>(state: SparklinePlotState<TData>, env: SparklinePlotEnv): AxisBasedMarkersConfig[];