@fundar/data-chart-telling 1.18.0 → 1.19.0

package/dist/markers/violin/ViolinMarker.svelte

@@ -16,7 +16,7 @@
 
 	const plot = usePlot();
 	const cfg = $derived(getConfiguration());
-	const isHorizontal = $derived(plot.axes?.isHorizontal ?? false);
+	const isHorizontal = $derived(marker.isHorizontal ?? plot.axes?.isHorizontal ?? false);
 	const categoryScale = $derived(
 		isHorizontal ? plot.svelteplot.scales.y : plot.svelteplot.scales.x
 	);

package/dist/markers/waffle/WaffleMarker.svelte

@@ -12,7 +12,7 @@
 	const events = MarkerEvents.use(() => marker);
 
 	const plot = usePlot();
-	const isHorizontal = $derived(plot.axes?.isHorizontal ?? false);
+	const isHorizontal = $derived(marker.isHorizontal ?? plot.axes?.isHorizontal ?? false);
 	const WaffleMark = $derived(isHorizontal ? WaffleX : WaffleY);
 
 	const cfg = $derived(getConfiguration());

package/dist/phases/context/RowContext.d.ts

@@ -19,6 +19,8 @@ export declare class RowContext {
      * for it, with the row itself. A row no plot drew reads as its series alone.
      */
     static of<TContext extends PlotRowContext = PlotRowContext>(row: unknown): TContext;
+    /** The key a row's context is kept under: no scale reads it, so a copy of a row with a new context is no new row to them. */
+    static readonly key: symbol;
     /** Keeps `context` on `row`, for {@link of} to read back. */
     static tag(row: ProcessedRow, context: PlotRowContext): void;
     /** Whether `row` carries a context already. */

package/dist/phases/context/RowContext.js

@@ -24,6 +24,8 @@ export class RowContext {
         const series = record[SERIES_KEY];
         return { ...(typeof series === 'string' ? { series } : {}), row };
     }
+    /** The key a row's context is kept under: no scale reads it, so a copy of a row with a new context is no new row to them. */
+    static key = KEY;
     /** Keeps `context` on `row`, for {@link of} to read back. */
     static tag(row, context) {
         row[KEY] = context;

package/dist/phases/markers/MarkerStyles.js

@@ -1,6 +1,7 @@
 import { MarkerChannels } from '../../markers/utils/MarkerChannels';
 import { RowStyle } from '../../markers/utils/RowStyle';
 import { CssColor } from '../../utils/color/CssColor';
+import { MarkerLabels } from '../../markers/labels/MarkerLabels';
 /**
  * A plot's markers with their styles as svelteplot reads them, before any is drawn: a named line style
  * (`strokeDasharray: 'dashed'`) is the SVG dash pattern it stands for, wherever in a marker's config it is
@@ -33,28 +34,30 @@ export class MarkerStyles {
      * that read best on the shape's old one reads best on its new one.
      */
     static restyle(marker, plot = {}) {
-        const label = marker.label;
-        const fill = label?.styles?.fill;
-        const fresh = typeof fill === 'function' && MarkerStyles.#contrasts.has(fill)
-            ? { ...marker, label: { ...label, styles: { ...label.styles, fill: undefined } } }
-            : marker;
+        const fresh = MarkerLabels.map(marker, (label) => {
+            const fill = label.styles?.fill;
+            return typeof fill === 'function' && MarkerStyles.#contrasts.has(fill)
+                ? { ...label, styles: { ...label.styles, fill: undefined } }
+                : label;
+        });
         return MarkerStyles.resolveAll([fresh], plot)[0];
     }
-    /** The marker with its label inside its shape written in the candidate that reads best on each row's color. */
+    /** Writes each label on its shape in the color that reads best on it. */
     static #contrasted(marker, plot) {
         const { cfg } = plot;
         if (!cfg || !MarkerStyles.#isPlain(marker))
             return marker;
-        const label = marker.label;
-        if (!MarkerStyles.#isPlain(label) || label.outside || label.styles?.fill !== undefined) {
+        const unset = (label) => MarkerStyles.#isPlain(label) &&
+            MarkerLabels.isOnShape(marker, label) &&
+            label.styles?.fill === undefined;
+        if (!MarkerLabels.list(marker).some(unset))
             return marker;
-        }
         const colorOf = MarkerStyles.#shapeColor(marker, marker.data ?? plot.rows ?? [], cfg);
         if (!colorOf)
             return marker;
         const candidates = cfg.text.label.contrast;
         const opacityOf = MarkerStyles.#opacity(marker.styles?.fillOpacity);
-        // What the label is read on: the shape's color, blended with the plot's background as far as it is see-through.
+        // The shape's color as seen: blended with the background by its opacity.
         const fill = (row) => {
             const color = colorOf(row);
             if (!color)
@@ -63,7 +66,7 @@ export class MarkerStyles {
             return CssColor.contrastText(seen, candidates);
         };
         MarkerStyles.#contrasts.add(fill);
-        return { ...marker, label: { ...label, styles: { ...label.styles, fill } } };
+        return MarkerLabels.map(marker, (label) => unset(label) ? { ...label, styles: { ...label.styles, fill } } : label);
     }
     /** The opacity each row's shape is drawn with: a number, the field of the rows a string names, a function of the row. */
     static #opacity(style) {

package/dist/phases/markers/MarkersPhase.d.ts

@@ -2,9 +2,8 @@ import type { AxisPlotEnv, AxisPlotState, MarkersStageOptions, PhaseStage } from
 /**
  * The shared "markers" phase: everything the plot draws, bottom to top - the
  * plot kind's own marks, then what the "statistics" phase left in
- * `state.markers` (the author's markers and the plot's statistics), then its
- * value labels when `styles.values.show` turns them on, each with what every
- * label shares ({@link ValueLabels.hooks}), and every style as svelteplot reads it ({@link MarkerStyles}).
+ * `state.markers` (the author's markers and the plot's statistics), then the
+ * `'point'` labels of all of them, and every style as svelteplot reads it ({@link MarkerStyles}).
  */
 export declare class MarkersPhase<TState extends AxisPlotState<any, any, any, any>, TEnv extends AxisPlotEnv> implements PhaseStage<TState, TEnv> {
     #private;

package/dist/phases/markers/MarkersPhase.js

@@ -1,11 +1,12 @@
 import { MarkerChannels } from '../../markers/utils/MarkerChannels';
 import { MarkerStyles } from './MarkerStyles';
+import { MarkerLabels } from '../../markers/labels/MarkerLabels';
+import { PlotAxes } from '../data/PlotAxes';
 /**
  * The shared "markers" phase: everything the plot draws, bottom to top - the
  * plot kind's own marks, then what the "statistics" phase left in
- * `state.markers` (the author's markers and the plot's statistics), then its
- * value labels when `styles.values.show` turns them on, each with what every
- * label shares ({@link ValueLabels.hooks}), and every style as svelteplot reads it ({@link MarkerStyles}).
+ * `state.markers` (the author's markers and the plot's statistics), then the
+ * `'point'` labels of all of them, and every style as svelteplot reads it ({@link MarkerStyles}).
  */
 export class MarkersPhase {
     phase = 'markers';
@@ -15,16 +16,21 @@ export class MarkersPhase {
     }
     run = (state, env) => {
         const options = this.#options;
-        const labels = state.valueLabels;
-        const valueLabels = labels?.show && options.valueLabels
-            ? options.valueLabels(labels, state, env).map((marker) => {
-                const { styles, ...hooks } = labels.hooks(env);
-                return { ...hooks, ...marker, styles: { ...styles, ...marker.styles } };
-            })
-            : [];
+        const rows = state.processedData?.data;
+        const positioned = MarkerChannels.inheritPosition(MarkerChannels.inheritAll([...options.marks(state, env), ...(state.markers ?? [])], state.scales), state.processedData);
+        // Point labels draw last, merged across markers so they declutter together.
+        const { markers, labels: pointLabels } = MarkerLabels.extractPoints(positioned, {
+            rows,
+            valueAxis: PlotAxes.valueOf(state),
+            isHorizontal: state.axes?.isHorizontal,
+            gap: env.cfg.text?.label.gap
+        });
         return {
             ...state,
-            markers: MarkerStyles.resolveAll(MarkerChannels.inheritPosition(MarkerChannels.inheritAll([...options.marks(state, env), ...(state.markers ?? []), ...valueLabels], state.scales), state.processedData), { cfg: env.cfg, rows: state.processedData?.data })
+            markers: MarkerStyles.resolveAll([...markers, ...pointLabels], {
+                cfg: env.cfg,
+                rows
+            })
         };
     };
 }

package/dist/phases/statistics/MarkerGrouping.js

@@ -1,33 +1,4 @@
-/** Marker kinds that split their rows into separate shapes per `grouping`. */
-const GROUPING_KINDS = new Set([
-    'area',
-    'density',
-    'line',
-    'hull',
-    'trail',
-    'delaunayLink',
-    'delaunayMesh',
-    'voronoi',
-    'voronoiMesh'
-]);
-/** Marker kinds whose per-row `color` resolves through the plot's own color scale. */
-const COLOR_KINDS = new Set([
-    'area',
-    'bar',
-    'cell',
-    'density',
-    'delaunayLink',
-    'delaunayMesh',
-    'dot',
-    'hull',
-    'line',
-    'rect',
-    'tick',
-    'trail',
-    'voronoi',
-    'voronoiMesh',
-    'waffle'
-]);
+import { MarkerKinds } from '../../markers/MarkerKinds';
 /** Kinds that draw only a line, so their flat color is `stroke` alone. */
 const LINE_KINDS = new Set(['line', 'regression', 'bollinger', 'delta']);
 /** Flat color style keys - when a marker sets one, it keeps that color instead of inheriting one. */
@@ -86,9 +57,11 @@ export class MarkerGrouping {
             if (grouping === undefined)
                 return MarkerGrouping.withSeriesColor(m, plot.defaultColor);
             const updates = {};
-            if (GROUPING_KINDS.has(m.type) && m.grouping === undefined)
+            if (MarkerKinds.inherits(m.type, 'grouping') && m.grouping === undefined)
                 updates.grouping = grouping;
-            if (COLOR_KINDS.has(m.type) && m.color === undefined && !MarkerGrouping.#hasFlatColor(m)) {
+            if (MarkerKinds.inherits(m.type, 'color') &&
+                m.color === undefined &&
+                !MarkerGrouping.#hasFlatColor(m)) {
                 updates.color = plot.color ?? plot.grouping;
             }
             return Object.keys(updates).length ? { ...m, ...updates } : marker;

package/dist/phases/statistics/MarkerInheritance.d.ts

@@ -0,0 +1,11 @@
+import type { InheritedChannel } from '../../types/markers/traits';
+/** How a plot's position and value channels reach the markers its author adds. */
+export declare class MarkerInheritance {
+    /**
+     * `marker` with the plot's `x`/`y` on each axis it sets no position for (`x`, `x1` or `x2`...), and the
+     * plot's other channels it sets none of, as far as its kind inherits them.
+     */
+    static inherit<T extends {
+        type: string;
+    }>(marker: T, plot: Partial<Record<InheritedChannel, unknown>>): T;
+}

package/dist/phases/statistics/MarkerInheritance.js

@@ -0,0 +1,25 @@
+import { MarkerKinds } from '../../markers/MarkerKinds';
+/** The value channels a marker takes as they are; `grouping` and `color` are `MarkerGrouping`'s. */
+const VALUES = ['opacity', 'symbol', 'r', 'length'];
+/** How a plot's position and value channels reach the markers its author adds. */
+export class MarkerInheritance {
+    /**
+     * `marker` with the plot's `x`/`y` on each axis it sets no position for (`x`, `x1` or `x2`...), and the
+     * plot's other channels it sets none of, as far as its kind inherits them.
+     */
+    static inherit(marker, plot) {
+        const own = marker;
+        const takes = (channel) => plot[channel] !== undefined && MarkerKinds.inherits(own.type, channel);
+        const taken = {};
+        for (const axis of ['x', 'y']) {
+            const unset = [axis, `${axis}1`, `${axis}2`].every((key) => own[key] === undefined);
+            if (unset && takes(axis))
+                taken[axis] = plot[axis];
+        }
+        for (const channel of VALUES) {
+            if (own[channel] === undefined && takes(channel))
+                taken[channel] = plot[channel];
+        }
+        return Object.keys(taken).length ? { ...own, ...taken } : marker;
+    }
+}

package/dist/phases/statistics/MarkerOrientation.d.ts

@@ -0,0 +1,26 @@
+type Marker = {
+    type: string;
+    isHorizontal?: boolean;
+    data?: unknown[];
+} & Record<string, unknown>;
+type AxisScales = {
+    x?: {
+        type?: string;
+    };
+    y?: {
+        type?: string;
+    };
+};
+/** Which way an oriented marker runs when its plot has no position channels to say it. */
+export declare class MarkerOrientation {
+    /** `marker` with `isHorizontal` taken from its own channels, unless it sets one or can't tell. */
+    static orient<T extends {
+        type: string;
+    }>(marker: T, rows: unknown[], scales?: AxisScales): T;
+    /**
+     * A band (`x1`/`x2` or `y1`/`y2`) runs across its own axis; two channels run as a plot's
+     * would; a single channel is the measured value.
+     */
+    static of(marker: Marker, rows: unknown[], scales?: AxisScales): boolean | undefined;
+}
+export {};

package/dist/phases/statistics/MarkerOrientation.js

@@ -0,0 +1,29 @@
+import { MarkerKinds } from '../../markers/MarkerKinds';
+import { PlotAxes } from '../data/PlotAxes';
+/** Which way an oriented marker runs when its plot has no position channels to say it. */
+export class MarkerOrientation {
+    /** `marker` with `isHorizontal` taken from its own channels, unless it sets one or can't tell. */
+    static orient(marker, rows, scales) {
+        const own = marker;
+        if (own.isHorizontal !== undefined || !MarkerKinds.of(own.type)?.oriented)
+            return marker;
+        const isHorizontal = MarkerOrientation.of(own, rows, scales);
+        return isHorizontal === undefined ? marker : { ...own, isHorizontal };
+    }
+    /**
+     * A band (`x1`/`x2` or `y1`/`y2`) runs across its own axis; two channels run as a plot's
+     * would; a single channel is the measured value.
+     */
+    static of(marker, rows, scales) {
+        const set = (...keys) => keys.some((key) => marker[key] !== undefined);
+        const [xBand, yBand] = [set('x1', 'x2'), set('y1', 'y2')];
+        if (xBand !== yBand)
+            return xBand;
+        const [x, y] = [set('x'), set('y')];
+        if (x && y) {
+            const data = marker.data ?? rows;
+            return PlotAxes.build({ series: [{ x: marker.x, y: marker.y, data }], scales }).isHorizontal;
+        }
+        return x !== y ? x : undefined;
+    }
+}

package/dist/phases/statistics/StatisticsPhase.js

@@ -1,9 +1,9 @@
 import { AuthorMarkers } from './AuthorMarkers';
 import { Statistics } from './Statistics';
+import { MarkerInheritance } from './MarkerInheritance';
+import { MarkerOrientation } from './MarkerOrientation';
 import { PANEL_KEY, FacetPanels } from '../facet/FacetPanels';
 import { PlotAxes } from '../data/PlotAxes';
-/** Marker kinds that draw from a channel pair, so they take the plot's `x`/`y` when the author leaves one out. */
-const POSITIONED_KINDS = new Set(['line', 'area', 'dot']);
 /**
  * The "statistics" phase every axis-based plot shares: seeds `state.markers`
  * with the plot-level `statistics` resolved against every series, followed by
@@ -38,23 +38,23 @@ export class StatisticsPhase {
     #resolve(state) {
         const options = this.#options;
         const { resolvedSeries = [], flat = [], colorForSeries, statistics, authorMarkers = [] } = state;
-        const { inheritGrouping = true, inheritPositions = false } = options;
+        const { inheritGrouping = true } = options;
         const defaultColor = options.defaultColor
             ? options.defaultColor(state)
             : resolvedSeries[0] && colorForSeries?.(resolvedSeries[0].name);
         const onProcessed = authorMarkers.map((marker) => AuthorMarkers.withProcessedRows(marker, state.processedData));
-        const positioned = inheritPositions
-            ? onProcessed.map((marker) => {
-                if (!POSITIONED_KINDS.has(marker.type))
-                    return marker;
-                const own = marker;
-                return {
-                    ...own,
-                    x: own.x ?? resolvedSeries[0]?.x ?? state.x,
-                    y: own.y ?? resolvedSeries[0]?.y ?? state.y
-                };
-            })
-            : onProcessed;
+        const unpositioned = !state.axes?.x && !state.axes?.y;
+        const positioned = onProcessed.map((marker) => {
+            const inherited = MarkerInheritance.inherit(marker, {
+                x: resolvedSeries[0]?.x ?? state.x,
+                y: resolvedSeries[0]?.y ?? state.y,
+                opacity: state.opacity,
+                symbol: state.symbol,
+                r: state.r,
+                length: state.length
+            });
+            return unpositioned ? MarkerOrientation.orient(inherited, flat, state.scales) : inherited;
+        });
         // A series setting no value of its own (a histogram's) measures its processed rows: its bins.
         const valueAxis = PlotAxes.valueOf(state);
         const measured = state.processedData && resolvedSeries.some((s) => s[valueAxis] === undefined)

package/dist/phases/transforms/TransformsPhase.js

@@ -1,3 +1,4 @@
+import { ValueLabels } from '../../layout/styles/ValueLabels';
 import { Transforms } from './Transforms';
 import { ValueSelection } from './ValueSelection';
 import { ProcessedPositions } from './ProcessedPositions';
@@ -129,17 +130,18 @@ export class TransformsPhase {
     #labelled(state) {
         const options = this.#options.labels;
         const values = state.values;
-        if (!options || !(values?.show ?? options.show))
+        if (!options || !ValueLabels.shows(values, options.show))
             return {};
         const processed = state.processedData;
-        const valueAxis = PlotAxes.valueOf(state);
+        const measure = options.measure?.(state);
+        const valueAxis = measure ? 'y' : PlotAxes.valueOf(state);
         const select = values?.select ?? options.select;
         const selections = ValueSelection.transforms(select, values?.series, valueAxis);
         const position = ProcessedPositions.of(processed, valueAxis);
         const skip = options.skip?.(state);
         const channels = {
             x: position.x,
-            y: position.y,
+            y: measure ?? position.y,
             group: options.group === 'category'
                 ? position[PlotAxes.categoryOf(state)]
                 : SERIES_ID_KEY

package/dist/plots/correlation/heatmap/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 { buildHeatmapDefaults } from './defaults';
 	import type {
 		HeatmapPlotProps,
@@ -44,7 +44,7 @@
 	});
 </script>
 
-<Plot
+<AbstractPlot
 	core={core as HeatmapPlotCoreProps<TData>}
 	defaults={buildHeatmapDefaults}
 	bind:margins

package/dist/plots/correlation/heatmap/Plot.svelte.d.ts

@@ -1,4 +1,3 @@
-import Plot from '../../../layout/plot/Plot.svelte';
 import type { HeatmapPlotProps } from '../../../types/plots/correlation/heatmap/props';
 declare function $$render<TData extends Record<string, unknown>>(): {
     props: HeatmapPlotProps<TData>;

package/dist/plots/correlation/heatmap/defaults.js

@@ -85,7 +85,20 @@ export function buildHeatmapDefaults() {
             defaults: () => ({ x: { labelAnchor: 'right' } }),
             extend: extendWithColorScales
         },
-        styles: { values: { show: true } },
+        transforms: {
+            // A cell's value is its color: `'min'` and `'max'` compare that.
+            labels: {
+                show: true,
+                measure: (state) => state.channels?.color.accessor
+            }
+        },
+        styles: {
+            values: {
+                show: true,
+                layout: 'box',
+                layouts: { path: { edge: 'top', side: 'inside' }, point: { anchor: 'top', side: 'above' } }
+            }
+        },
         markers: { marks: buildMarks },
         hover: {
             // A cell writes its own value: the hover only restyles the cells - the hovered one outlined.

package/dist/plots/correlation/heatmap/markers.d.ts

@@ -1,9 +1,3 @@
 import type { HeatmapPlotState, HeatmapPlotEnv } from '../../../types/plots/correlation/heatmap/state';
 import type { AxisBasedMarkersConfig } from '../../../types/markers/common';
-/**
- * HeatmapPlot's "markers" phase: one `'cell'` marker per resolved-style
- * bucket - svelteplot's opacity/numeric scale machinery requires
- * `fillOpacity`/`strokeWidth` to be constant per mark instance, unlike
- * `fill`, which stays a per-row accessor.
- */
 export declare function buildMarks<TData extends Record<string, unknown>>(state: HeatmapPlotState<TData>, env: HeatmapPlotEnv): AxisBasedMarkersConfig[];

package/dist/plots/correlation/heatmap/markers.js

@@ -8,12 +8,6 @@ function readChannel(channel) {
     return resolveAccessor(channel);
 }
 const OPACITY_STEPS = 32;
-/**
- * HeatmapPlot's "markers" phase: one `'cell'` marker per resolved-style
- * bucket - svelteplot's opacity/numeric scale machinery requires
- * `fillOpacity`/`strokeWidth` to be constant per mark instance, unlike
- * `fill`, which stays a per-row accessor.
- */
 export function buildMarks(state, env) {
     const { segments, channels, resolveColor, resolveOpacity } = state;
     const { range } = env;
@@ -111,9 +105,11 @@ export function buildMarks(state, env) {
             inset: 0.5
         },
         hover: 'style',
-        // Each cell writes its own value, in the middle of it.
-        label: labels?.shapeLabel(env, (d) => labels.format(Number(getColor(d)), d), {
-            fontWeight: 600
+        // Each cell writes its own value, in the middle of it by default.
+        label: labels?.label(env, (d) => labels.text(d), {
+            fill: 'currentColor',
+            fontWeight: 600,
+            labelled: state.labelled
         })
     }));
     return markers;

package/dist/plots/correlation/scatter/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 { buildScatterDefaults } from './defaults';
 	import type {
 		ScatterPlotProps,
@@ -27,7 +27,7 @@
 	}: ScatterPlotProps<TData> = $props();
 </script>
 
-<Plot
+<AbstractPlot
 	core={core as ScatterPlotCoreProps<TData>}
 	defaults={buildScatterDefaults}
 	bind:margins

package/dist/plots/correlation/scatter/Plot.svelte.d.ts

@@ -1,4 +1,3 @@
-import Plot from '../../../layout/plot/Plot.svelte';
 import type { ScatterPlotProps } from '../../../types/plots/correlation/scatter/props';
 declare function $$render<TData extends Record<string, unknown>>(): {
     props: ScatterPlotProps<TData>;

package/dist/plots/correlation/scatter/defaults.js

@@ -1,6 +1,6 @@
 import { ProcessedPositions } from '../../../phases/transforms/ProcessedPositions';
 import { HoverDefaults } from '../../../layout/hover/HoverDefaults';
-import { buildMarks, buildValueLabels } from './markers';
+import { buildMarks } from './markers';
 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). */
@@ -68,9 +68,15 @@ export function buildScatterDefaults() {
                 base: { flat: 'dot' }
             }
         },
-        transforms: { groups: 'runs' },
+        transforms: { groups: 'runs', labels: {} },
         scales: { fit: fitDomains },
-        markers: { marks: buildMarks, valueLabels: buildValueLabels },
+        styles: {
+            values: {
+                layout: 'point',
+                layouts: { point: { side: 'above', gap: 8 }, path: { side: 'outside' } }
+            }
+        },
+        markers: { marks: buildMarks },
         hover: {
             strategy: 'punctual',
             // A crosshair through the hovered point, and its label - the point is a dot already.

package/dist/plots/correlation/scatter/markers.d.ts

@@ -1,14 +1,5 @@
 import type { ScatterPlotState, ScatterPlotEnv } from '../../../types/plots/correlation/scatter/state';
-import type { TextMarkerConfig } from '../../../types/markers/common';
-import { ValueLabels } from '../../../layout/styles/ValueLabels';
 import type { AxisBasedMarkersConfig } from '../../../types/markers/common';
-/**
- * ScatterPlot's `styles.values` as one `'text'` marker over the same
- * processed rows its dots draw, each labelled with its own `y` value. A label
- * sits beside its point and flips to the other side where its text would
- * cross the plot's edge (`edgeAware`).
- */
-export declare function buildValueLabels<TData extends Record<string, unknown>>(labels: ValueLabels, state: ScatterPlotState<TData>): TextMarkerConfig[];
 /**
  * ScatterPlot's "markers" phase: one `'dot'` marker per visual segment of the
  * rows the "transforms" phase left, in their own order, so a reordering

package/dist/plots/correlation/scatter/markers.js

@@ -1,38 +1,28 @@
-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
- * processed rows its dots draw, each labelled with its own `y` value. A label
- * sits beside its point and flips to the other side where its text would
- * cross the plot's edge (`edgeAware`).
+ * ScatterPlot's `styles.values` as labels of its dots: each labelled row with its own value, by default on a free
+ * spot around its point (`declutter: 'around'`) - a label with none is left out - or around its rim (`'path'`).
  */
-export function buildValueLabels(labels, state) {
-    const { processedData } = state;
-    if (!processedData?.data.length)
+function buildValueLabels(labels, state, env) {
+    const rows = new Set(state.labelled ?? []);
+    if (rows.size === 0)
         return [];
-    const { font, format } = labels;
-    const position = ProcessedPositions.of(processedData);
     const nameOf = (d) => String(d[SERIES_KEY]);
-    const valueOf = ValueLabels.valueOf(state);
+    const label = labels.label(env, (d) => labels.text(d), {
+        fill: 'currentColor',
+        seriesColor: (d) => state.colorForSeries?.(nameOf(d)),
+        fontSize: 11,
+        fontWeight: 500
+    });
+    if (labels.layout !== 'point')
+        return [label];
     return [
         {
-            type: 'text',
-            data: processedData.data,
-            x: position.x,
-            y: position.y,
-            text: (d) => format(Number(valueOf(d)), d, nameOf(d)),
-            styles: {
-                ...font,
-                fill: font?.fill ?? 'currentColor',
-                fontSize: font?.fontSize ?? 11,
-                fontWeight: font?.fontWeight ?? 500,
-                dx: font?.dx ?? 8,
-                dy: font?.dy ?? 0,
-                textAnchor: labels.textAnchor ?? 'start',
-                lineAnchor: font?.lineAnchor ?? 'middle'
-            },
-            edgeAware: true
+            ...label,
+            select: (row) => rows.has(row),
+            // A label on its own dot stays there; one beside it moves around it to a free spot.
+            declutter: labels.side === 'on' ? undefined : 'around'
         }
     ];
 }
@@ -126,5 +116,8 @@ export function buildMarks(state, env) {
             });
         }
     });
-    return markers;
+    const labels = state.valueLabels?.show
+        ? buildValueLabels(state.valueLabels, state, env)
+        : undefined;
+    return ValueLabels.onMarkers(markers, 'dot', labels);
 }

package/dist/plots/distribution/box/BoxSummaries.d.ts

@@ -1,6 +1,7 @@
 import type { HoverPosition, ProcessedRow } from '../../../types/phases';
 import type { BoxPlotState, BoxSummaryRow } from '../../../types/plots/distribution/box/state';
 import type { BoxSummary } from '../../../types/plots/distribution/box/props';
+import type { PointGeometryOf } from '../../../types/markers/labels/point';
 /**
  * The boxes a box plot draws, one per series, category and facet panel - the same quartiles and whiskers
  * svelteplot's `BoxX`/`BoxY` compute, worked out once as each value's context ({@link context}), so its hover and
@@ -18,6 +19,10 @@ export declare class BoxSummaries {
      * Its own context is the box's, with the median for its value, and where it sits for `x` and `y`.
      */
     static of<TData extends Record<string, unknown>>(state: BoxPlotState<TData>): BoxSummaryRow[];
+    /** Where each part of a box its value labels can write sits: beside the box, at the height of its value. */
+    static partPlacements<TData extends Record<string, unknown>>(state: BoxPlotState<TData>): Record<string, Record<string, unknown>>;
+    /** Where a box's part label sits: at its category, level with the part's value, beside its band. */
+    static labelPoint<TData extends Record<string, unknown>>(state: BoxPlotState<TData>): (value: symbol) => PointGeometryOf;
     /** Where a box's summary sits for hover: at its category, level with its median. */
     static position<TData extends Record<string, unknown>>(state: BoxPlotState<TData>): HoverPosition;
     /**