@fundar/data-chart-telling 1.16.0 → 1.18.0

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

@@ -1,6 +1,7 @@
 import { buildMarks } from './markers';
+import { PlotAxes } from '../../../phases/data/PlotAxes';
+import { HoverDefaults } from '../../../layout/hover/HoverDefaults';
 import { BoxSummaries } from './BoxSummaries';
-import { TooltipState } from '../../../layout/tooltip/TooltipState.svelte';
 /**
  * BoxPlot on the shared pipeline: one box per category of each series along
  * one category axis - `x`, or `y` for horizontal boxes, as the "data" phase
@@ -22,17 +23,19 @@ export function buildBoxDefaults() {
         },
         scales: {
             bandOrder: 'data',
-            defaults: (_state, ctx) => ({
-                category: { paddingInner: ctx.cfg.box.paddingInner, paddingOuter: ctx.cfg.box.paddingOuter }
+            defaults: (_state, env) => ({
+                category: { paddingInner: env.cfg.box.paddingInner, paddingOuter: env.cfg.box.paddingOuter }
             })
         },
+        // Each value's box: its quartiles and whiskers, worked out once for its tooltip and hover to read.
+        context: (state) => BoxSummaries.context(state),
         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/box/markers.d.ts

@@ -1,4 +1,4 @@
-import type { BoxPlotState, BoxPlotCtx } from '../../../types/plots/distribution/box/state';
+import type { BoxPlotState, BoxPlotEnv } from '../../../types/plots/distribution/box/state';
 import type { AxisBasedMarkersConfig } from '../../../types/markers/common';
 /**
  * BoxPlot's "markers" phase: one `box` per visual segment of each series,
@@ -9,4 +9,4 @@ import type { AxisBasedMarkersConfig } from '../../../types/markers/common';
  * A series toggled off in the legend (style mode), or dimmed by hovering
  * another one, takes the legend's disabled fill.
  */
-export declare function buildMarks<TData extends Record<string, unknown>>(state: BoxPlotState<TData>, ctx: BoxPlotCtx): AxisBasedMarkersConfig[];
+export declare function buildMarks<TData extends Record<string, unknown>>(state: BoxPlotState<TData>, env: BoxPlotEnv): AxisBasedMarkersConfig[];

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

@@ -7,12 +7,12 @@
  * A series toggled off in the legend (style mode), or dimmed by hovering
  * another one, takes the legend's disabled fill.
  */
-export function buildMarks(state, ctx) {
+export function buildMarks(state, env) {
     const { channels } = state.processedData;
-    const { cfg } = ctx;
+    const { cfg } = env;
     return (state.processedGroups ?? []).flatMap((group) => {
         const name = group.series.name;
-        const disabled = ctx.interaction?.fillFor(name);
+        const disabled = env.interaction?.fillFor(name);
         return group.visualSegments.map((seg) => {
             const { stroke, strokeWidth, strokeOpacity, borderRadius } = seg.styles;
             const fill = disabled?.fill ?? seg.styles.fill ?? state.colorForSeries(name);

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

@@ -1,9 +1,9 @@
 import type { AxisPlotDefaults } from '../../../types/phases';
-import type { DensityPlotState, DensityPlotCtx } from '../../../types/plots/distribution/density/state';
+import type { DensityPlotState, DensityPlotEnv } from '../../../types/plots/distribution/density/state';
 /**
  * DensityPlot on the shared pipeline: series read one position channel - `x`,
  * or `y` for a horizontal curve - estimated by the plot's transforms merged
  * over the default density of that axis, drawn from a zero baseline as an area
  * or a line, and its own markers. Its plot defaults to: hover along the estimated axis.
  */
-export declare function buildDensityDefaults<TData extends Record<string, unknown>>(): AxisPlotDefaults<DensityPlotState<TData>, DensityPlotCtx>;
+export declare function buildDensityDefaults<TData extends Record<string, unknown>>(): AxisPlotDefaults<DensityPlotState<TData>, DensityPlotEnv>;

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

@@ -1,4 +1,10 @@
 import { buildMarks } from './markers';
+import { RowContext } from '../../../phases/context/RowContext';
+import { TooltipState } from '../../../layout/tooltip/TooltipState.svelte';
+import { NumberFormat } from '../../../utils/NumberFormat';
+import { getConfiguration } from '../../../configuration/config.svelte';
+/** A density is a small number: three decimals tell its points apart. */
+const DENSITY_DECIMALS = 3;
 /**
  * The plot's own density along its axis merged over the default one, the
  * author's props winning, and every other transform kept after it in order. A
@@ -30,6 +36,16 @@ export function buildDensityDefaults() {
             transforms: (state) => mergeDensity(state.transforms ?? [], state.axes?.isHorizontal ?? false)
         },
         scales: { zero: ['value'] },
-        markers: { marks: buildMarks }
+        markers: { marks: buildMarks },
+        hover: {
+            // A hovered point reads as its estimate, the value its context gives it - a small number, written with
+            // three decimals unless the author asks otherwise.
+            label: (state) => {
+                const number = NumberFormat.of(NumberFormat.displayOf(state.values), getConfiguration(), DENSITY_DECIMALS);
+                return ((row) => number(Number(RowContext.of(row).value)));
+            },
+            // Its tooltip writes the estimate the same way.
+            format: (state) => TooltipState.default(state, NumberFormat.of(NumberFormat.displayOf(state.tooltip), getConfiguration(), DENSITY_DECIMALS))
+        }
     };
 }

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

@@ -1,4 +1,4 @@
-import type { DensityPlotState, DensityPlotCtx } from '../../../types/plots/distribution/density/state';
+import type { DensityPlotState, DensityPlotEnv } from '../../../types/plots/distribution/density/state';
 import type { AxisBasedMarkersConfig } from '../../../types/markers/common';
 /**
  * DensityPlot's "markers" phase: one `area` - or `line`, by `styles.mark` - per
@@ -6,4 +6,4 @@ import type { AxisBasedMarkersConfig } from '../../../types/markers/common';
  * its series. The markers the "statistics" phase already put in `state.markers`
  * come after.
  */
-export declare function buildMarks<TData extends Record<string, unknown>>(state: DensityPlotState<TData>, ctx: DensityPlotCtx): AxisBasedMarkersConfig[];
+export declare function buildMarks<TData extends Record<string, unknown>>(state: DensityPlotState<TData>, env: DensityPlotEnv): AxisBasedMarkersConfig[];

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

@@ -5,15 +5,15 @@ import { Transforms } from '../../../phases/transforms/Transforms';
  * its series. The markers the "statistics" phase already put in `state.markers`
  * come after.
  */
-export function buildMarks(state, ctx) {
+export function buildMarks(state, env) {
     const { channels, options, transforms } = state.processedData;
-    const { cfg } = ctx;
+    const { cfg } = env;
     const styles = state.styles;
     const asLine = styles?.mark === 'line';
     return (state.processedGroups ?? []).flatMap((group) => {
         const name = group.series.name;
-        const disabledFill = ctx.interaction?.fillFor(name);
-        const disabledStroke = ctx.interaction?.strokeFor(name);
+        const disabledFill = env.interaction?.fillFor(name);
+        const disabledStroke = env.interaction?.strokeFor(name);
         return group.visualSegments.map((seg) => {
             const color = seg.styles.fill ?? state.colorForSeries(name);
             const style = asLine

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

@@ -1,9 +1,9 @@
 import type { AxisPlotDefaults } from '../../../types/phases';
-import type { HistogramPlotState, HistogramPlotCtx } from '../../../types/plots/distribution/histogram/state';
+import type { HistogramPlotState, HistogramPlotEnv } from '../../../types/plots/distribution/histogram/state';
 /**
  * HistogramPlot on the shared pipeline: series read one position channel -
  * `x`, or `y` for a horizontal histogram - binned by the plot's transforms
  * merged over the default bin of that axis, bars from a zero baseline, and its
  * own markers. Its plot defaults to: hover along the binned axis.
  */
-export declare function buildHistogramDefaults<TData extends Record<string, unknown>>(): AxisPlotDefaults<HistogramPlotState<TData>, HistogramPlotCtx>;
+export declare function buildHistogramDefaults<TData extends Record<string, unknown>>(): AxisPlotDefaults<HistogramPlotState<TData>, HistogramPlotEnv>;

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

@@ -1,5 +1,5 @@
-import { buildMarks, buildValueLabels } from './markers';
-import { SERIES_KEY } from '../../../phases/transforms/TransformsPhase';
+import { buildMarks } from './markers';
+import { HoverDefaults } from '../../../layout/hover/HoverDefaults';
 import { resolveAccessor } from '../../../utils/accessors';
 import { PlotAxes } from '../../../phases/data/PlotAxes';
 /** One processed channel's value on a row - `undefined` for a channel the transforms didn't set. */
@@ -40,7 +40,23 @@ export function buildHistogramDefaults() {
             }
         },
         transforms: {
-            transforms: (state, ctx) => mergeBin(state.transforms ?? [], ctx.cfg, state.axes?.isHorizontal ?? false)
+            transforms: (state, env) => mergeBin(state.transforms ?? [], env.cfg, state.axes?.isHorizontal ?? false)
+        },
+        // A bin's count and the edges it spans, for its label, its tooltip and its hover.
+        context: (state) => {
+            const { channels } = state.processedData;
+            const value = PlotAxes.valueOf(state);
+            const binned = PlotAxes.other(value);
+            const [count, from, to] = [
+                channels[value],
+                channels[`${binned}1`],
+                channels[`${binned}2`]
+            ].map(readChannel);
+            return ((row) => ({
+                count: Number(count(row)),
+                from: Number(from(row)),
+                to: Number(to(row))
+            }));
         },
         scales: { zero: ['value'] },
         styles: {
@@ -63,31 +79,10 @@ export function buildHistogramDefaults() {
                 }
             }
         },
-        markers: { marks: buildMarks, valueLabels: buildValueLabels },
+        markers: { marks: buildMarks },
         hover: {
-            // A hovered bin is labelled with its count, and reads as its row plus its count,
-            // the edges it spans and its series.
-            label: (state) => {
-                const count = readChannel(state.processedData.channels[PlotAxes.valueOf(state)]);
-                return ((row) => String(Number(count(row))));
-            },
-            row: (state) => {
-                const { channels } = state.processedData;
-                const value = PlotAxes.valueOf(state);
-                const binned = PlotAxes.other(value);
-                const [count, from, to] = [
-                    channels[value],
-                    channels[`${binned}1`],
-                    channels[`${binned}2`]
-                ].map(readChannel);
-                return ((row) => ({
-                    ...row,
-                    count: Number(count(row)),
-                    from: Number(from(row)),
-                    to: Number(to(row)),
-                    group: row[SERIES_KEY]
-                }));
-            }
+            // The hovered bin's span behind its bar, the whole height of the plot: a bin is no band of a category.
+            marker: (state) => HoverDefaults.behindSpan(PlotAxes.other(PlotAxes.valueOf(state)), 'from', 'to')
         }
     };
 }

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

@@ -1,18 +1,9 @@
-import type { HistogramPlotState, HistogramPlotCtx } from '../../../types/plots/distribution/histogram/state';
-import type { AxisBasedMarkersConfig, TextMarkerConfig } from '../../../types/markers/common';
-import type { ValueLabels } from '../../../layout/styles/ValueLabels';
-/**
- * HistogramPlot's `styles.values` as one `'text'` marker over its non-empty
- * bins (a `filter` on the count), each labelled with its count by `format`.
- * `anchor` places each label along its bar: past its top (`'outside'`), just
- * inside it (`'start'`), at its base (`'end'`), or centred (`'middle'`) -
- * upward, or rightward on a horizontal histogram.
- */
-export declare function buildValueLabels<TData extends Record<string, unknown>>(labels: ValueLabels, state: HistogramPlotState<TData>, ctx: HistogramPlotCtx): TextMarkerConfig[];
+import type { HistogramPlotState, HistogramPlotEnv } from '../../../types/plots/distribution/histogram/state';
+import type { AxisBasedMarkersConfig } from '../../../types/markers/common';
 /**
  * HistogramPlot's "markers" phase: one `rect` per visual segment of each
  * series, drawing that segment's bins, dimmed with its series. The markers
  * the "statistics" phase already put in `state.markers` come after, and its
  * value labels last.
  */
-export declare function buildMarks<TData extends Record<string, unknown>>(state: HistogramPlotState<TData>, ctx: HistogramPlotCtx): AxisBasedMarkersConfig[];
+export declare function buildMarks<TData extends Record<string, unknown>>(state: HistogramPlotState<TData>, env: HistogramPlotEnv): AxisBasedMarkersConfig[];

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

@@ -1,83 +1,42 @@
 import { ProcessedPositions } from '../../../phases/transforms/ProcessedPositions';
-import { SERIES_KEY } from '../../../phases/transforms/TransformsPhase';
+import { ValueLabels } from '../../../layout/styles/ValueLabels';
 import { Transforms } from '../../../phases/transforms/Transforms';
 import { resolveAccessor } from '../../../utils/accessors';
 import { PlotAxes } from '../../../phases/data/PlotAxes';
-/**
- * HistogramPlot's `styles.values` as one `'text'` marker over its non-empty
- * bins (a `filter` on the count), each labelled with its count by `format`.
- * `anchor` places each label along its bar: past its top (`'outside'`), just
- * inside it (`'start'`), at its base (`'end'`), or centred (`'middle'`) -
- * upward, or rightward on a horizontal histogram.
- */
-export function buildValueLabels(labels, state, ctx) {
-    const { processedData: processed } = state;
-    if (!processed?.data.length)
-        return [];
-    const { font, anchor, format } = labels;
-    const nameOf = (d) => String(d[SERIES_KEY]);
-    const value = PlotAxes.valueOf(state);
-    const binned = PlotAxes.other(value);
-    const horizontal = value === 'x';
-    const position = ProcessedPositions.of(processed, value);
-    const read = (channel) => channel === undefined
-        ? undefined
-        : resolveAccessor(channel);
-    const topOf = (d) => Number(position[value](d));
-    const bottomOf = read(processed.channels[`${value}1`]) ?? (() => 0);
-    const countRead = read(processed.channels[value]);
-    const countOf = (d) => countRead ? Number(countRead(d)) : topOf(d) - Number(bottomOf(d));
-    const along = anchor === 'end'
-        ? bottomOf
-        : anchor === 'middle'
-            ? (d) => (topOf(d) + Number(bottomOf(d))) / 2
-            : topOf;
-    // Outward from the bar's top: past it, just inside it, or out from its base.
-    const outward = anchor === 'outside' ? 6 : anchor === 'start' ? -4 : anchor === 'end' ? 4 : 0;
-    const outwardAnchor = anchor === 'start' ? 'end' : anchor === 'middle' ? 'middle' : 'start';
-    const marker = Transforms.resolve({
-        type: 'text',
-        data: processed.data,
-        [binned]: position[binned],
-        [value]: along,
-        transforms: [{ type: 'filter', filter: (d) => countOf(d) > 0 }],
-        text: (d) => format(countOf(d), nameOf(d), d),
-        styles: {
-            ...font,
-            fill: font?.fill ?? ctx.cfg.axis.color,
-            fontSize: font?.fontSize ?? 12,
-            dx: font?.dx ?? (horizontal ? outward : 0),
-            dy: font?.dy ?? (horizontal ? 0 : -outward),
-            textAnchor: labels.textAnchor ?? (horizontal ? outwardAnchor : 'middle'),
-            lineAnchor: font?.lineAnchor ??
-                (horizontal
-                    ? 'middle'
-                    : anchor === 'start'
-                        ? 'top'
-                        : anchor === 'middle'
-                            ? 'middle'
-                            : 'bottom')
-        }
-    }, processed.data);
-    return marker.data?.length ? [marker] : [];
-}
 /**
  * HistogramPlot's "markers" phase: one `rect` per visual segment of each
  * series, drawing that segment's bins, dimmed with its series. The markers
  * the "statistics" phase already put in `state.markers` come after, and its
  * value labels last.
  */
-export function buildMarks(state, ctx) {
+export function buildMarks(state, env) {
     const { channels, options, transforms } = state.processedData;
-    const fillOpacity = ctx.cfg.histogram.fillOpacity;
+    const fillOpacity = env.cfg.histogram.fillOpacity;
+    // Each bin writes its own count, along its bar: past its top (`'outside'`), against an edge, at its tip or its
+    // base - upward, or rightward on a horizontal histogram. A bin with nothing in it writes nothing.
+    const labels = state.valueLabels?.show ? state.valueLabels : undefined;
+    const value = PlotAxes.valueOf(state);
+    const position = ProcessedPositions.of(state.processedData, value);
+    const read = (channel) => channel === undefined
+        ? undefined
+        : resolveAccessor(channel);
+    const bottomOf = read(channels[`${value}1`]) ?? (() => 0);
+    const countRead = read(channels[value]);
+    const countOf = (d) => countRead ? Number(countRead(d)) : Number(position[value](d)) - Number(bottomOf(d));
+    const labelFor = (name) => labels?.shapeLabel(env, (d) => (countOf(d) > 0 ? labels.format(countOf(d), d, name) : ''), {
+        fill: 'currentColor',
+        ...ValueLabels.boxAnchor(labels.anchor, { isHorizontal: value === 'x' })
+    });
     const rects = (state.processedGroups ?? []).flatMap((group) => {
-        const disabled = ctx.interaction?.fillFor(group.series.name);
+        const disabled = env.interaction?.fillFor(group.series.name);
         // A stroke the segment sets is not a reason to lose the series' fill, as the marker would take it for the color.
         const color = state.colorForSeries(group.series.name);
         return group.visualSegments.map((seg) => Transforms.finish({
             type: 'rect',
             series: group.series.name,
             data: seg.data,
+            hover: 'style',
+            ...(labels ? { label: labelFor(group.series.name) } : {}),
             ...channels,
             ...options,
             styles: {

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

@@ -1,5 +1,5 @@
 import type { AxisPlotDefaults } from '../../../types/phases';
-import type { PyramidPlotState, PyramidPlotCtx } from '../../../types/plots/distribution/pyramid/state';
+import type { PyramidPlotState, PyramidPlotEnv } from '../../../types/plots/distribution/pyramid/state';
 /**
  * PyramidPlot on the shared pipeline. Its `x`/`y` are the visual axes: the one
  * holding categories (read off the values by the "data" phase) runs the bars,
@@ -10,4 +10,4 @@ import type { PyramidPlotState, PyramidPlotCtx } from '../../../types/plots/dist
  * category and magnitude.
  * Its plot defaults to: hover along the category axis; the tween is of the magnitude, keyed by category and side.
  */
-export declare function buildPyramidDefaults<TData extends Record<string, unknown>>(): AxisPlotDefaults<PyramidPlotState<TData>, PyramidPlotCtx>;
+export declare function buildPyramidDefaults<TData extends Record<string, unknown>>(): AxisPlotDefaults<PyramidPlotState<TData>, PyramidPlotEnv>;

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

@@ -1,6 +1,7 @@
 import { ProcessedPositions } from '../../../phases/transforms/ProcessedPositions';
+import { HoverDefaults } from '../../../layout/hover/HoverDefaults';
 import { PlotAxes } from '../../../phases/data/PlotAxes';
-import { buildMarks, buildValueLabels } from './markers';
+import { buildMarks } from './markers';
 import { ValueLabels } from '../../../layout/styles/ValueLabels';
 import { seriesIdOf } from '../../../utils/grouping';
 import { isGapValue } from '../../utils/gaps';
@@ -48,14 +49,14 @@ export function buildPyramidDefaults() {
             values: {
                 // A label past its bar's end reaches out on its own side, the longest bar's to the edge.
                 reach: (labels, state) => {
-                    if (labels.anchor === 'middle' || labels.anchor === 'end')
+                    if (labels.anchor !== 'outside')
                         return [];
                     const axis = PlotAxes.valueOf(state);
                     const isHorizontal = state.axes?.isHorizontal ?? true;
                     const offset = labels.offset(axis);
                     return labels.extremes(state.resolvedSeries ?? [], axis).map(({ series, value }) => {
                         const left = series.side === 'left';
-                        const text = labels.format(Math.abs(value), series.name);
+                        const text = labels.format(Math.abs(value), undefined, series.name);
                         return isHorizontal
                             ? labels.edgeBox(text, { x: left ? 'before' : 'after', y: 'middle' }, { x: left ? -offset : offset }, [left ? 'left' : 'right'])
                             : labels.edgeBox(text, { x: 'middle', y: left ? 'after' : 'before' }, { y: left ? offset : -offset }, [left ? 'bottom' : 'top']);
@@ -63,8 +64,10 @@ export function buildPyramidDefaults() {
                 }
             }
         },
-        markers: { marks: buildMarks, valueLabels: buildValueLabels },
+        markers: { marks: buildMarks },
         hover: {
+            // The hovered age group's band behind its bars, across both sides.
+            marker: (state) => HoverDefaults.behindBand(PlotAxes.other(PlotAxes.valueOf(state))),
             // A bar sits at its signed magnitude - below or left of the baseline on the first
             // side - and its category, and reads as its magnitude.
             position: (state) => {

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

@@ -1,15 +1,5 @@
-import type { TextMarkerConfig } from '../../../types/markers/common';
-import type { PyramidPlotState, PyramidPlotCtx } from '../../../types/plots/distribution/pyramid/state';
-import type { ValueLabels } from '../../../layout/styles/ValueLabels';
+import type { PyramidPlotState, PyramidPlotEnv } from '../../../types/plots/distribution/pyramid/state';
 import type { AxisBasedMarkersConfig } from '../../../types/markers/common';
-/**
- * PyramidPlot's `styles.values` as one `'text'` marker per series, over the
- * same processed rows its bars draw (gap rows never get a label), mirrored to
- * its own side of the shared zero baseline. `anchor` places each label along
- * its bar: past its end (`'outside'`/`'start'`), at the baseline (`'end'`),
- * or centred (`'middle'`). On a vertical pyramid the sides run down and up.
- */
-export declare function buildValueLabels<TData extends Record<string, unknown>>(labels: ValueLabels, state: PyramidPlotState<TData>, ctx: PyramidPlotCtx): TextMarkerConfig[];
 /**
  * PyramidPlot's "markers" phase: one `role: 'segment'` bar per visual
  * segment, along the category axis the "data" phase read (horizontal bars for
@@ -18,4 +8,4 @@ export declare function buildValueLabels<TData extends Record<string, unknown>>(
  * `state.markers`. Emits no `role: 'hitArea'` markers - PyramidPlot's hover
  * matches nearest points rather than hit-testing category bands.
  */
-export declare function buildMarks<TData extends Record<string, unknown>>(state: PyramidPlotState<TData>, ctx: PyramidPlotCtx): AxisBasedMarkersConfig[];
+export declare function buildMarks<TData extends Record<string, unknown>>(state: PyramidPlotState<TData>, env: PyramidPlotEnv): AxisBasedMarkersConfig[];

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

@@ -1,5 +1,5 @@
+import { ValueLabels } from '../../../layout/styles/ValueLabels';
 import { resolveAccessor } from '../../../utils/accessors';
-import { SERIES_ID_KEY } from '../../../phases/transforms/TransformsPhase';
 import { seriesIdOf } from '../../../utils/grouping';
 import { PlotAxes } from '../../../phases/data/PlotAxes';
 import { getConfiguration } from '../../../configuration/config.svelte';
@@ -8,69 +8,6 @@ const GAP_KINDS = ['start', 'middle', 'end'];
 function signFor(s, magnitude) {
     return s.side === 'left' ? -magnitude : magnitude;
 }
-/**
- * PyramidPlot's `styles.values` as one `'text'` marker per series, over the
- * same processed rows its bars draw (gap rows never get a label), mirrored to
- * its own side of the shared zero baseline. `anchor` places each label along
- * its bar: past its end (`'outside'`/`'start'`), at the baseline (`'end'`),
- * or centred (`'middle'`). On a vertical pyramid the sides run down and up.
- */
-export function buildValueLabels(labels, state, ctx) {
-    const { processedData } = state;
-    if (!processedData)
-        return [];
-    const { font, anchor, format } = labels;
-    const categoryAxis = PlotAxes.categoryOf(state);
-    const valueAxis = PlotAxes.valueOf(state);
-    const isHorizontal = state.axes?.isHorizontal ?? true;
-    return (state.processedGroups ?? []).flatMap(({ series }) => {
-        const id = seriesIdOf(series);
-        const side = state.resolvedSeries.find((s) => seriesIdOf(s) === id).side;
-        const isLeft = side === 'left';
-        const getMagnitude = resolveAccessor(series[valueAxis]);
-        const magnitude = (d) => Math.abs(Number(getMagnitude(d)));
-        const signed = (d) => (isLeft ? -magnitude(d) : magnitude(d));
-        const data = processedData.data.filter((d) => d[SERIES_ID_KEY] === id && !isGapValue(getMagnitude(d)));
-        if (data.length === 0)
-            return [];
-        const outward = isLeft ? -1 : 1;
-        const at = anchor === 'middle' ? (d) => signed(d) / 2 : anchor === 'end' ? 0 : signed;
-        const shift = anchor === 'middle' ? 0 : outward * (anchor === 'end' ? 4 : 6);
-        // Away from the baseline: left/right on a horizontal pyramid, down/up on a vertical one.
-        const awayAnchor = isHorizontal
-            ? anchor === 'middle'
-                ? 'middle'
-                : isLeft
-                    ? 'end'
-                    : 'start'
-            : 'middle';
-        const awayLine = isHorizontal
-            ? 'middle'
-            : anchor === 'middle'
-                ? 'middle'
-                : isLeft
-                    ? 'top'
-                    : 'bottom';
-        return [
-            {
-                type: 'text',
-                data,
-                [valueAxis]: at,
-                [categoryAxis]: series[categoryAxis],
-                text: (d) => format(magnitude(d), series.name, d),
-                styles: {
-                    ...font,
-                    fill: font?.fill ?? ctx.cfg.axis.color,
-                    fontSize: font?.fontSize ?? 12,
-                    dx: font?.dx ?? (isHorizontal ? shift : 0),
-                    dy: font?.dy ?? (isHorizontal ? 0 : -shift),
-                    textAnchor: labels.textAnchor ?? awayAnchor,
-                    lineAnchor: font?.lineAnchor ?? awayLine
-                }
-            }
-        ];
-    });
-}
 /**
  * PyramidPlot's "markers" phase: one `role: 'segment'` bar per visual
  * segment, along the category axis the "data" phase read (horizontal bars for
@@ -79,12 +16,18 @@ export function buildValueLabels(labels, state, ctx) {
  * `state.markers`. Emits no `role: 'hitArea'` markers - PyramidPlot's hover
  * matches nearest points rather than hit-testing category bands.
  */
-export function buildMarks(state, ctx) {
+export function buildMarks(state, env) {
     const { groupedSeries, gapFillMaps } = state;
     const gapDefaults = getConfiguration().pyramid.gap;
     const categoryAxis = PlotAxes.categoryOf(state);
     const valueAxis = PlotAxes.valueOf(state);
     const isHorizontal = state.axes?.isHorizontal ?? true;
+    const labels = state.valueLabels?.show ? state.valueLabels : undefined;
+    /**
+     * Where a series' labels sit on its bars, which run out from the shared baseline to its own side: left and right
+     * of it on a horizontal pyramid, down and up on a vertical one.
+     */
+    const anchorOf = (side) => ValueLabels.boxAnchor(labels?.anchor ?? 'outside', { isHorizontal, negative: side === 'left' });
     /** One bar's own channels: its category, and its span from the baseline to its signed value. */
     const span = (category, to) => ({
         isHorizontal,
@@ -104,7 +47,7 @@ export function buildMarks(state, ctx) {
         // practice, just not provably so to TypeScript here.
         const category = group.series[categoryAxis];
         const defaultColor = state.colorForSeries(group.series.name);
-        const disabledFill = ctx.interaction?.fillFor(group.series.name);
+        const disabledFill = env.interaction?.fillFor(group.series.name);
         const processed = processedGroups.get(seriesIdOf(group.series));
         const processedCategory = processed?.series[categoryAxis];
         const getMagnitude = resolveAccessor((processed?.series[valueAxis] ?? group.series[valueAxis]));
@@ -117,7 +60,14 @@ export function buildMarks(state, ctx) {
                 type: 'bar',
                 role: 'segment',
                 data: realData,
+                hover: 'style',
                 ...span(processedCategory, signed),
+                // Each bar writes its own magnitude, on its side of the baseline.
+                ...(labels
+                    ? {
+                        label: labels.shapeLabel(env, (d) => labels.format(Math.abs(Number(getMagnitude(d))), d, group.series.name), { fill: 'currentColor', ...anchorOf(group.series.side) })
+                    }
+                    : {}),
                 styles: {
                     // An outline asked for without a color is the fill's.
                     ...(seg.styles.strokeWidth !== undefined

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,22 @@ 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),
         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[];