@fundar/data-chart-telling 1.17.0 → 1.18.0

package/dist/phases/tooltip/TooltipPhase.d.ts

@@ -1,15 +1,15 @@
-import type { AxisPlotCtx, AxisPlotState, PhaseStage } from '../../types/phases';
+import type { AxisPlotEnv, AxisPlotState, PhaseStage } from '../../types/phases';
 type AnyAxisState = AxisPlotState<any, any, any, any>;
 /**
  * The "tooltip" phase every axis-based plot shares: how a hovered row reads,
  * as `tooltipFormat` - the same default on every plot, {@link TooltipState.default} -
  * and the order its rows read in, as `tooltipSort`: highest value first, by
- * each row's own value (a stacked row's share, not its running total). The value reads as the tooltip's
+ * the value each row's context gives it (a stacked row's own, not its running total). The value reads as the tooltip's
  * `decimals`, `prefix`, `suffix` and `signDisplay` ask. It
  * runs after the scales, which say which axis holds categories.
  */
-export declare class TooltipPhase<TState extends AnyAxisState> implements PhaseStage<TState, AxisPlotCtx> {
+export declare class TooltipPhase<TState extends AnyAxisState> implements PhaseStage<TState, AxisPlotEnv> {
     readonly phase: "tooltip";
-    run: (state: TState, ctx: AxisPlotCtx) => TState;
+    run: (state: TState, env: AxisPlotEnv) => TState;
 }
 export {};

package/dist/phases/tooltip/TooltipPhase.js

@@ -1,19 +1,22 @@
 import { TooltipState } from '../../layout/tooltip/TooltipState.svelte';
-import { ValueLabels } from '../../layout/styles/ValueLabels';
+import { RowContext } from '../context/RowContext';
 import { NumberFormat } from '../../utils/NumberFormat';
 /**
  * The "tooltip" phase every axis-based plot shares: how a hovered row reads,
  * as `tooltipFormat` - the same default on every plot, {@link TooltipState.default} -
  * and the order its rows read in, as `tooltipSort`: highest value first, by
- * each row's own value (a stacked row's share, not its running total). The value reads as the tooltip's
+ * the value each row's context gives it (a stacked row's own, not its running total). The value reads as the tooltip's
  * `decimals`, `prefix`, `suffix` and `signDisplay` ask. It
  * runs after the scales, which say which axis holds categories.
  */
 export class TooltipPhase {
     phase = 'tooltip';
-    run = (state, ctx) => ({
-        ...state,
-        tooltipFormat: TooltipState.default(state, NumberFormat.maybe(NumberFormat.displayOf(state.tooltip), ctx.cfg)),
-        tooltipSort: TooltipState.descending(ValueLabels.valueOf(state))
-    });
+    run = (state, env) => {
+        const contextOf = RowContext.reader(state);
+        return {
+            ...state,
+            tooltipFormat: TooltipState.default(state, NumberFormat.maybe(NumberFormat.displayOf(state.tooltip), env.cfg)),
+            tooltipSort: TooltipState.descending((row) => contextOf(row).value)
+        };
+    };
 }

package/dist/phases/transforms/TransformsPhase.d.ts

@@ -18,10 +18,10 @@ export declare const GAP_KIND = "__gapKind";
  * `styles.gaps` fills is read at its interpolated value, so it takes its place
  * in a stack the way a real value would, and keeps its gap kind.
  */
-export declare class TransformsPhase<TState extends TransformsStageState, TCtx = unknown> implements PhaseStage<TState, TCtx> {
+export declare class TransformsPhase<TState extends TransformsStageState, TEnv = unknown> implements PhaseStage<TState, TEnv> {
     #private;
     readonly phase: "transforms";
     /** `connect`: whether a series' visual segments bridge into each other, as the kind's "data" phase splits them. */
-    constructor(options?: TransformsStageOptions<TState, TCtx>, connect?: boolean);
-    run: (state: TState, ctx: TCtx) => TState;
+    constructor(options?: TransformsStageOptions<TState, TEnv>, connect?: boolean);
+    run: (state: TState, env: TEnv) => TState;
 }

package/dist/phases/transforms/TransformsPhase.js

@@ -37,7 +37,7 @@ export class TransformsPhase {
         this.#options = options;
         this.#connect = connect;
     }
-    run = (state, ctx) => {
+    run = (state, env) => {
         const options = this.#options;
         const visible = (state.resolvedSeries ?? []);
         // An omitted part of a whole is laid out with the rest, so they keep their places; it is dropped after.
@@ -66,7 +66,7 @@ export class TransformsPhase {
             shared[valueAxis] = (row) => row[GAP_VALUE] ?? read(row);
         }
         const transforms = options.transforms
-            ? options.transforms(state, ctx)
+            ? options.transforms(state, env)
             : (state.transforms ?? []);
         const rescaled = TransformsPhase.#rescaled(state, transforms, shared, valueAxis);
         if (rescaled)

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

@@ -1,5 +1,5 @@
 import type { AxisPlotDefaults } from '../../../types/phases';
-import type { HeatmapPlotState, HeatmapPlotCtx } from '../../../types/plots/correlation/heatmap/state';
+import type { HeatmapPlotState, HeatmapPlotEnv } from '../../../types/plots/correlation/heatmap/state';
 /**
  * HeatmapPlot on the shared pipeline: both axes are categories. A heatmap's
  * `color` is each cell's numeric value, which the "data" phase reads as a
@@ -8,4 +8,4 @@ import type { HeatmapPlotState, HeatmapPlotCtx } from '../../../types/plots/corr
  * cell's tooltip names its coordinates and its value.
  * Its plot defaults to: hover one cell.
  */
-export declare function buildHeatmapDefaults<TData extends Record<string, unknown>>(): AxisPlotDefaults<HeatmapPlotState<TData>, HeatmapPlotCtx>;
+export declare function buildHeatmapDefaults<TData extends Record<string, unknown>>(): AxisPlotDefaults<HeatmapPlotState<TData>, HeatmapPlotEnv>;

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

@@ -1,15 +1,17 @@
 import { ColorRamp } from '../../../utils/color';
+import { HoverDefaults } from '../../../layout/hover/HoverDefaults';
 import { OpacityScale } from '../../../utils/OpacityScale';
 import { ContinuousDomain } from '../../../utils/ContinuousDomain';
 import { buildMarks } from './markers';
+import { RowContext } from '../../../phases/context/RowContext';
 /**
  * HeatmapPlot's own "scales" output, over the band axes the shared phase laid
  * out: the color domain over every cell's value (when `color` is set), and each
  * row's own resolved color and opacity.
  */
-function extendWithColorScales(state, ctx) {
+function extendWithColorScales(state, env) {
     const { scales, channels } = state;
-    const { range, cfg } = ctx;
+    const { range, cfg } = env;
     const { color: colorAcc } = channels;
     const rows = (state.processedData?.data ?? []);
     const valueDomain = ContinuousDomain.build(scales.color?.domain, rows.map((d) => Number(colorAcc.accessor(d))), true) ?? [0, 1];
@@ -68,6 +70,14 @@ export function buildHeatmapDefaults() {
                 }
             })
         },
+        // A cell's value is its color's, not a position's.
+        context: (state) => {
+            const color = state.channels.color.accessor;
+            return ((row) => {
+                const value = Number(color(row));
+                return { value: Number.isFinite(value) ? value : undefined };
+            });
+        },
         statistics: { inheritGrouping: false },
         sharedScales: { fromScalesPhase: ['color'] },
         scales: {
@@ -78,11 +88,16 @@ export function buildHeatmapDefaults() {
         styles: { values: { show: true } },
         markers: { marks: buildMarks },
         hover: {
-            // A hovered cell reads as its formatted value.
+            // A cell writes its own value: the hover only restyles the cells - the hovered one outlined.
+            marker: (_state, env) => HoverDefaults.shapes(env.cfg),
+            // A hovered cell reads as its value, as its value labels write it.
             label: (state) => {
-                const format = state.values?.format ?? ((v) => `${v}`);
-                const color = state.channels.color.accessor;
-                return ((row) => format(Number(color(row)), ''));
+                const format = state.values?.format;
+                const number = (v) => `${v}`;
+                return ((row) => {
+                    const context = RowContext.of(row);
+                    return format ? format(Number(context.value), number, context) : `${context.value}`;
+                });
             },
             // A cell's color is its value, not a series'.
             decorate: () => () => ({ series: undefined, color: undefined })

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

@@ -1,4 +1,4 @@
-import type { HeatmapPlotState, HeatmapPlotCtx } from '../../../types/plots/correlation/heatmap/state';
+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
@@ -6,4 +6,4 @@ import type { AxisBasedMarkersConfig } from '../../../types/markers/common';
  * `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>, ctx: HeatmapPlotCtx): AxisBasedMarkersConfig[];
+export declare function buildMarks<TData extends Record<string, unknown>>(state: HeatmapPlotState<TData>, env: HeatmapPlotEnv): AxisBasedMarkersConfig[];

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

@@ -14,9 +14,9 @@ const OPACITY_STEPS = 32;
  * `fillOpacity`/`strokeWidth` to be constant per mark instance, unlike
  * `fill`, which stays a per-row accessor.
  */
-export function buildMarks(state, ctx) {
+export function buildMarks(state, env) {
     const { segments, channels, resolveColor, resolveOpacity } = state;
-    const { range } = ctx;
+    const { range } = env;
     const labels = state.valueLabels?.show ? state.valueLabels : undefined;
     const getColor = channels.color.accessor;
     // The cells are the rows the "transforms" phase left, placed by its channels.
@@ -110,8 +110,9 @@ export function buildMarks(state, ctx) {
             borderRadius: group.styles.borderRadius,
             inset: 0.5
         },
+        hover: 'style',
         // Each cell writes its own value, in the middle of it.
-        label: labels?.shapeLabel(ctx, (d) => labels.format(Number(getColor(d)), ''), {
+        label: labels?.shapeLabel(env, (d) => labels.format(Number(getColor(d)), d), {
             fontWeight: 600
         })
     }));

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

@@ -1,4 +1,4 @@
 import type { AxisPlotDefaults } from '../../../types/phases';
-import type { ScatterPlotState, ScatterPlotCtx } from '../../../types/plots/correlation/scatter/state';
+import type { ScatterPlotState, ScatterPlotEnv } from '../../../types/plots/correlation/scatter/state';
 /** ScatterPlot on the shared pipeline: discrete dots, its own radius-padded scales, and its own markers. Its plot defaults to: hover the exact point. */
-export declare function buildScatterDefaults<TData extends Record<string, unknown>>(): AxisPlotDefaults<ScatterPlotState<TData>, ScatterPlotCtx>;
+export declare function buildScatterDefaults<TData extends Record<string, unknown>>(): AxisPlotDefaults<ScatterPlotState<TData>, ScatterPlotEnv>;

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

@@ -1,4 +1,5 @@
 import { ProcessedPositions } from '../../../phases/transforms/ProcessedPositions';
+import { HoverDefaults } from '../../../layout/hover/HoverDefaults';
 import { buildMarks, buildValueLabels } from './markers';
 import { Margins } from '../../../layout/margins/Margins';
 import { MarkerAxisValues } from '../../../phases/scales/MarkerAxisValues';
@@ -25,7 +26,7 @@ function paddedDomain(values, radiusPx, sizePx) {
  * the largest dot's radius, and grown to cover what derived markers draw
  * (a density curve's peak, a regression band).
  */
-function fitDomains(state, ctx) {
+function fitDomains(state, env) {
     const { scales, channels, groupedSeries } = state;
     const processed = state.processedData;
     const position = ProcessedPositions.of(processed);
@@ -39,10 +40,10 @@ function fitDomains(state, ctx) {
         ? r
         : r !== undefined
             ? AUTO_SCALED_RADIUS_ESTIMATE
-            : Math.max(0, ...groupedSeries.flatMap((group) => group.visualSegments.map((seg) => seg.styles.dotRadius ?? ctx.cfg.scatter.dotRadius)));
+            : Math.max(0, ...groupedSeries.flatMap((group) => group.visualSegments.map((seg) => seg.styles.dotRadius ?? env.cfg.scatter.dotRadius)));
     if (radius <= 0 && !extra.x.length && !extra.y.length)
         return {};
-    const box = Margins.resolve({ ...ctx.cfg.margins, ...state.margins }).contentBox(state.width, state.height);
+    const box = Margins.resolve({ ...env.cfg.margins, ...state.margins }).contentBox(state.width, state.height);
     const fit = {};
     for (const [axis, size] of [
         ['x', box.width],
@@ -72,6 +73,11 @@ export function buildScatterDefaults() {
         markers: { marks: buildMarks, valueLabels: buildValueLabels },
         hover: {
             strategy: 'punctual',
+            // A crosshair through the hovered point, and its label - the point is a dot already.
+            marker: () => ({
+                back: [HoverDefaults.rule('x'), HoverDefaults.rule('y')],
+                front: [HoverDefaults.text()]
+            }),
             label: (state) => {
                 const { x, y } = state.channels;
                 return (row) => `${x.accessor(row)}, ${y.accessor(row)}`;

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

@@ -1,4 +1,4 @@
-import type { ScatterPlotState, ScatterPlotCtx } from '../../../types/plots/correlation/scatter/state';
+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';
@@ -16,4 +16,4 @@ export declare function buildValueLabels<TData extends Record<string, unknown>>(
  * "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: ScatterPlotState<TData>, ctx: ScatterPlotCtx): AxisBasedMarkersConfig[];
+export declare function buildMarks<TData extends Record<string, unknown>>(state: ScatterPlotState<TData>, env: ScatterPlotEnv): AxisBasedMarkersConfig[];

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

@@ -21,7 +21,7 @@ export function buildValueLabels(labels, state) {
             data: processedData.data,
             x: position.x,
             y: position.y,
-            text: (d) => format(Number(valueOf(d)), nameOf(d), d),
+            text: (d) => format(Number(valueOf(d)), d, nameOf(d)),
             styles: {
                 ...font,
                 fill: font?.fill ?? 'currentColor',
@@ -43,9 +43,9 @@ export function buildValueLabels(labels, state) {
  * "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 { channels, colorForSeries, scales, flat } = state;
-    const { cfg, interaction } = ctx;
+    const { cfg, interaction } = env;
     const r = channels.r;
     const rFn = r === undefined || typeof r === 'number' ? r : r.accessor;
     const opacityFn = channels.opacity?.accessor;
@@ -98,6 +98,7 @@ export function buildMarks(state, ctx) {
             markers.push({
                 type: 'dot',
                 data: seg.data,
+                hover: 'style',
                 // Forwarded raw (a field key or function, whatever `series.x`/`.y`
                 // is) rather than pre-resolved into a closure - `DotMarker.svelte`
                 // and svelteplot's own `resolve()` already handle a field-key

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

@@ -1,19 +1,28 @@
-import type { HoverPosition } from '../../../types/phases';
+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';
 /**
- * The boxes a box plot draws, one summary row per series, category and facet
- * panel - the same quartiles and whiskers svelteplot's `BoxX`/`BoxY` compute,
- * so its hover and tooltip read a box rather than every value inside it.
+ * 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
+ * tooltip read a box rather than every value inside it ({@link of}).
  */
 export declare class BoxSummaries {
-    /** One summary per box, in the order the processed rows first reach it. */
+    #private;
+    /**
+     * Each value's context: the summary of the box it is in - its category, quartiles, whisker ends (the farthest
+     * values within 1.5 IQR of the box), how many values it has and the ones past the whiskers.
+     */
+    static context<TData extends Record<string, unknown>>(state: BoxPlotState<TData>): (row: ProcessedRow) => BoxSummary | undefined;
+    /**
+     * One summary row per box, in the order the processed rows first reach it, read off its first value's context.
+     * 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 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;
     /**
-     * How a hovered box reads by default: its series, when the plot groups its
-     * rows; its category; then its five numbers, highest first, and how many
-     * values fall past the whiskers.
+     * How a hovered box reads by default, from its context: its series, when the plot groups its rows; its
+     * category; then its five numbers, highest first, and how many values fall past the whiskers.
      */
     static format<TData extends Record<string, unknown>>(state: BoxPlotState<TData>): (row: BoxSummaryRow) => string;
 }

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

@@ -4,28 +4,37 @@ import { SERIES_ID_KEY, SERIES_KEY } from '../../../phases/transforms/Transforms
 import { PANEL_KEY } from '../../../phases/facet/FacetPanels';
 import { PlotAxes } from '../../../phases/data/PlotAxes';
 import { TooltipState } from '../../../layout/tooltip/TooltipState.svelte';
+import { RowContext } from '../../../phases/context/RowContext';
 import { isGapValue } from '../../utils/gaps';
 /** The whiskers reach this many interquartile ranges past the box, as svelteplot draws them. */
 const WHISKER_IQR = 1.5;
 /** A summary value as a tooltip shows it: at most two decimals. */
 const round = (value) => String(Math.round(value * 100) / 100);
 /**
- * The boxes a box plot draws, one summary row per series, category and facet
- * panel - the same quartiles and whiskers svelteplot's `BoxX`/`BoxY` compute,
- * so its hover and tooltip read a box rather than every value inside it.
+ * 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
+ * tooltip read a box rather than every value inside it ({@link of}).
  */
 export class BoxSummaries {
-    /** One summary per box, in the order the processed rows first reach it. */
-    static of(state) {
+    /** Which box a processed row is in: its series, panel and category. */
+    static #keyOf(state) {
+        const categoryAxis = PlotAxes.categoryOf(state);
+        const categoryOf = ProcessedPositions.of(state.processedData, PlotAxes.valueOf(state))[categoryAxis];
+        return (row) => JSON.stringify([row[SERIES_ID_KEY], row[PANEL_KEY] ?? null, String(categoryOf(row))]);
+    }
+    /**
+     * Each value's context: the summary of the box it is in - its category, quartiles, whisker ends (the farthest
+     * values within 1.5 IQR of the box), how many values it has and the ones past the whiskers.
+     */
+    static context(state) {
         const processed = state.processedData;
         if (!processed?.data.length)
-            return [];
+            return () => undefined;
         const valueAxis = PlotAxes.valueOf(state);
-        const categoryAxis = PlotAxes.categoryOf(state);
         const position = ProcessedPositions.of(processed, valueAxis);
         const valueOf = position[valueAxis];
-        const categoryOf = position[categoryAxis];
-        const categoryField = processed.channels[categoryAxis];
+        const categoryOf = position[PlotAxes.categoryOf(state)];
+        const keyOf = BoxSummaries.#keyOf(state);
         const boxes = new Map();
         for (const row of processed.data) {
             const value = valueOf(row);
@@ -34,39 +43,80 @@ export class BoxSummaries {
             const n = Number(value);
             if (!Number.isFinite(n))
                 continue;
-            const key = JSON.stringify([
-                row[SERIES_ID_KEY],
-                row[PANEL_KEY] ?? null,
-                String(categoryOf(row))
-            ]);
+            const key = keyOf(row);
             const box = boxes.get(key);
             if (box)
                 box.values.push(n);
             else
-                boxes.set(key, { first: row, values: [n] });
+                boxes.set(key, { category: categoryOf(row), values: [n] });
+        }
+        const summaries = new Map([...boxes].map(([key, { category, values }]) => [
+            key,
+            BoxSummaries.#summarize(category, values)
+        ]));
+        return (row) => summaries.get(keyOf(row));
+    }
+    static #summarize(category, values) {
+        const sorted = values.sort((a, b) => a - b);
+        const p25 = quantile(sorted, 0.25);
+        const median = quantile(sorted, 0.5);
+        const p75 = quantile(sorted, 0.75);
+        const reach = (p75 - p25) * WHISKER_IQR;
+        const inside = sorted.filter((v) => v >= p25 - reach && v <= p75 + reach);
+        return {
+            category,
+            min: inside[0] ?? p25,
+            p25,
+            median,
+            p75,
+            max: inside.at(-1) ?? p75,
+            count: sorted.length,
+            outliers: sorted.filter((v) => v < p25 - reach || v > p75 + reach)
+        };
+    }
+    /**
+     * One summary row per box, in the order the processed rows first reach it, read off its first value's context.
+     * Its own context is the box's, with the median for its value, and where it sits for `x` and `y`.
+     */
+    static of(state) {
+        const processed = state.processedData;
+        if (!processed?.data.length)
+            return [];
+        const valueAxis = PlotAxes.valueOf(state);
+        const categoryAxis = PlotAxes.categoryOf(state);
+        const categoryField = processed.channels[categoryAxis];
+        const keyOf = BoxSummaries.#keyOf(state);
+        const firsts = new Map();
+        for (const row of processed.data) {
+            const key = keyOf(row);
+            if (!firsts.has(key) && RowContext.of(row).median !== undefined)
+                firsts.set(key, row);
         }
-        return [...boxes.values()].map(({ first, values }) => {
-            const sorted = values.sort((a, b) => a - b);
-            const p25 = quantile(sorted, 0.25);
-            const median = quantile(sorted, 0.5);
-            const p75 = quantile(sorted, 0.75);
-            const reach = (p75 - p25) * WHISKER_IQR;
-            const inside = sorted.filter((v) => v >= p25 - reach && v <= p75 + reach);
-            const category = categoryOf(first);
-            return {
+        return [...firsts.values()].map((first) => {
+            // The box's context, not its first value's row.
+            const context = { ...RowContext.of(first), row: undefined };
+            const { category, min, p25, median, p75, max, count, outliers } = context;
+            const summary = {
                 ...(typeof categoryField === 'string' ? { [categoryField]: category } : {}),
                 [SERIES_KEY]: first[SERIES_KEY],
                 [SERIES_ID_KEY]: first[SERIES_ID_KEY],
                 ...(first[PANEL_KEY] !== undefined ? { [PANEL_KEY]: first[PANEL_KEY] } : {}),
                 category,
-                min: inside[0] ?? p25,
+                min,
                 p25,
                 median,
                 p75,
-                max: inside.at(-1) ?? p75,
-                count: sorted.length,
-                outliers: sorted.filter((v) => v < p25 - reach || v > p75 + reach)
+                max,
+                count,
+                outliers
             };
+            RowContext.tag(summary, {
+                ...context,
+                [valueAxis]: median,
+                [categoryAxis]: category,
+                value: median
+            });
+            return summary;
         });
     }
     /** Where a box's summary sits for hover: at its category, level with its median. */
@@ -79,22 +129,22 @@ export class BoxSummaries {
         return at;
     }
     /**
-     * How a hovered box reads by default: its series, when the plot groups its
-     * rows; its category; then its five numbers, highest first, and how many
-     * values fall past the whiskers.
+     * How a hovered box reads by default, from its context: its series, when the plot groups its rows; its
+     * category; then its five numbers, highest first, and how many values fall past the whiskers.
      */
     static format(state) {
         const grouped = state.channels?.grouping !== undefined;
         return (row) => {
-            const lines = grouped ? [String(row[SERIES_KEY])] : [];
-            lines.push(TooltipState.value(row.category));
-            lines.push(`max: ${round(row.max)}`);
-            lines.push(`p75: ${round(row.p75)}`);
-            lines.push(`median: ${round(row.median)}`);
-            lines.push(`p25: ${round(row.p25)}`);
-            lines.push(`min: ${round(row.min)}`);
-            if (row.outliers.length)
-                lines.push(`outliers: ${row.outliers.length}`);
+            const box = RowContext.of(row);
+            const lines = grouped ? [String(box.series)] : [];
+            lines.push(TooltipState.value(box.category));
+            lines.push(`max: ${round(box.max)}`);
+            lines.push(`p75: ${round(box.p75)}`);
+            lines.push(`median: ${round(box.median)}`);
+            lines.push(`p25: ${round(box.p25)}`);
+            lines.push(`min: ${round(box.min)}`);
+            if (box.outliers.length)
+                lines.push(`outliers: ${box.outliers.length}`);
             return lines.join('\n');
         };
     }

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

@@ -1,5 +1,5 @@
 import type { AxisPlotDefaults } from '../../../types/phases';
-import type { BoxPlotState, BoxPlotCtx } from '../../../types/plots/distribution/box/state';
+import type { BoxPlotState, BoxPlotEnv } from '../../../types/plots/distribution/box/state';
 /**
  * BoxPlot on the shared pipeline: one box per category of each series along
  * one category axis - `x`, or `y` for horizontal boxes, as the "data" phase
@@ -9,4 +9,4 @@ import type { BoxPlotState, BoxPlotCtx } from '../../../types/plots/distribution
  * hover along the category axis, over one summary per box rather than every
  * value inside it.
  */
-export declare function buildBoxDefaults<TData extends Record<string, unknown>>(): AxisPlotDefaults<BoxPlotState<TData>, BoxPlotCtx>;
+export declare function buildBoxDefaults<TData extends Record<string, unknown>>(): AxisPlotDefaults<BoxPlotState<TData>, BoxPlotEnv>;

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))
+        }
     };
 }