@fundar/data-chart-telling 1.17.0 → 1.19.0

package/dist/plots/ranking/bar/markers.js

@@ -4,7 +4,6 @@ import { GAP_KIND, GAP_VALUE, SERIES_ID_KEY } from '../../../phases/transforms/T
 import { seriesIdOf } from '../../../utils/grouping';
 import { resolveGapAreaStyle } from '../../utils/gaps';
 import { PlotAxes } from '../../../phases/data/PlotAxes';
-import { ValueLabels } from '../../../layout/styles/ValueLabels';
 const GAP_KINDS = ['start', 'middle', 'end'];
 /**
  * Where a bar plot's bars sit, read off the state its phases leave: each
@@ -46,8 +45,8 @@ export function buildBarGeometry(state, seriesPadding) {
  */
 export function buildHitAreas(state, 
 // eslint-disable-next-line @typescript-eslint/no-explicit-any
-hover, ctx) {
-    const { categoryOf, sliceOf } = buildBarGeometry(state, ctx.cfg.bar.seriesPadding);
+hover, env) {
+    const { categoryOf, sliceOf } = buildBarGeometry(state, env.cfg.bar.seriesPadding);
     const isHorizontal = state.axes?.isHorizontal ?? false;
     return hover.points.map(({ row, series }) => {
         const slice = series === undefined ? undefined : sliceOf(series);
@@ -57,7 +56,7 @@ hover, ctx) {
             isHorizontal,
             data: [row],
             category: categoryOf(row),
-            hover: hover.active,
+            hover: hover.active && 'trigger',
             ...(slice
                 ? isHorizontal
                     ? { insetTop: slice.start, insetBottom: slice.end }
@@ -72,11 +71,11 @@ hover, ctx) {
  * whatever the "statistics" phase already put in `state.markers`, and its
  * value labels on top of everything.
  */
-export function buildMarks(state, ctx) {
+export function buildMarks(state, env) {
     const { gapFillMaps, colorForSeries, processedData } = state;
     const isHorizontal = state.axes?.isHorizontal ?? false;
     const [categoryAxis, valueAxis] = isHorizontal ? ['y', 'x'] : ['x', 'y'];
-    const geometry = buildBarGeometry(state, ctx.cfg.bar.seriesPadding);
+    const geometry = buildBarGeometry(state, env.cfg.bar.seriesPadding);
     const { channels } = processedData;
     const gapDefaults = getConfiguration().bar.gap;
     // Forwarded raw when the transforms left a plain channel (a field key keeps
@@ -89,21 +88,14 @@ export function buildMarks(state, ctx) {
     // which stays a field key whenever the plot has no transforms.
     const valueOf = (channel) => (geometry.stacked || channel === undefined ? top : channel);
     const gapValue = valueOf(channels[valueAxis]);
-    // What each bar writes in itself: its value, anchored along the bar by `anchor` - past its tip
-    // (`'outside'`), just inside it (`'start'`), at its base (`'end'`) or in the middle. A stacked bar's
-    // label is always in the middle of its segment.
-    const labels = state.valueLabels?.show ? state.valueLabels : undefined;
-    const valueRead = ValueLabels.valueOf(state);
-    const turns = !!labels && !geometry.stacked && ValueLabels.followsSign(labels.anchor);
-    const labelAnchor = (negative) => ValueLabels.boxAnchor(labels?.anchor ?? 'outside', {
-        isHorizontal,
-        negative,
-        stacked: geometry.stacked
-    });
-    const labelFor = (name, slice, negative) => labels && {
-        ...labels.shapeLabel(ctx, (d) => labels.format(Number(valueRead(d)), name, d), {
+    // What each bar writes about itself: its value, in the layout of `styles.values` - by default past its tip, or
+    // in the middle of a stacked bar's segment.
+    const labels = state.valueLabels?.show && state.valueLabels.writes('value') ? state.valueLabels : undefined;
+    const labelFor = (name, slice) => labels && {
+        ...labels.label(env, (d) => labels.text(d), {
             fill: 'currentColor',
-            ...labelAnchor(negative)
+            labelled: state.labelled,
+            seriesColor: () => colorForSeries(name)
         }),
         bandSlice: slice
     };
@@ -117,6 +109,7 @@ export function buildMarks(state, ctx) {
             isHorizontal,
             data,
             styles,
+            hover: 'style',
             ...(label ? { label } : {}),
             ...(isHorizontal
                 ? { y: category, x1: from, x2: value }
@@ -138,7 +131,7 @@ export function buildMarks(state, ctx) {
         const name = group.series.name;
         const slice = geometry.sliceOf(name);
         const defaultColor = colorForSeries(name);
-        const disabledFill = ctx.interaction?.fillFor(name);
+        const disabledFill = env.interaction?.fillFor(name);
         for (const seg of group.visualSegments) {
             const fill = disabledFill?.fill ?? seg.styles.fill ?? defaultColor;
             const styles = {
@@ -154,18 +147,9 @@ export function buildMarks(state, ctx) {
             };
             const real = seg.data.filter(isReal);
             const value = valueOf(group.series[valueAxis]);
-            // A label past the tip turns with the sign of its value, so the bars below zero are a marker of their own.
-            const parts = turns
-                ? [false, true].map((negative) => ({
-                    negative,
-                    rows: real.filter((row) => Number(valueRead(row)) < 0 === negative)
-                }))
-                : [{ negative: false, rows: real }];
-            for (const { negative, rows } of parts) {
-                const marker = makeMarker(rows, slice, value, styles, labelFor(name, slice, negative));
-                if (marker)
-                    segmentMarkers.push(marker);
-            }
+            const marker = makeMarker(real, slice, value, styles, labelFor(name, slice));
+            if (marker)
+                segmentMarkers.push(marker);
         }
         const id = seriesIdOf(group.series);
         const fills = [...(gapFillMaps.get(id)?.values() ?? [])];

package/dist/plots/ranking/bullet/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 { buildBulletDefaults } from './defaults';
 	import type { BulletPlotProps, BulletPlotCoreProps } from '../../../types/plots/ranking/bullet/props';
 
@@ -25,7 +25,7 @@
 	}: BulletPlotProps<TData> = $props();
 </script>
 
-<Plot
+<AbstractPlot
 	core={core as BulletPlotCoreProps<TData>}
 	defaults={buildBulletDefaults}
 	bind:margins

package/dist/plots/ranking/bullet/Plot.svelte.d.ts

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

package/dist/plots/ranking/bullet/defaults.d.ts

@@ -1,8 +1,8 @@
 import type { AxisPlotDefaults } from '../../../types/phases';
-import type { BulletPlotState, BulletPlotCtx } from '../../../types/plots/ranking/bullet/state';
+import type { BulletPlotState, BulletPlotEnv } from '../../../types/plots/ranking/bullet/state';
 /**
  * BulletPlot on the shared pipeline: a BarPlot whose bars are drawn thinner
  * over `ranges` - bands that grade the value - with a tick at each `target`.
  * Its value axis fits them along with the bars.
  */
-export declare function buildBulletDefaults<TData extends Record<string, unknown>>(): AxisPlotDefaults<BulletPlotState<TData>, BulletPlotCtx>;
+export declare function buildBulletDefaults<TData extends Record<string, unknown>>(): AxisPlotDefaults<BulletPlotState<TData>, BulletPlotEnv>;

package/dist/plots/ranking/bullet/defaults.js

@@ -1,3 +1,5 @@
+import { ValueLabels } from '../../../layout/styles/ValueLabels';
+import { RowNumbers } from '../../utils/RowNumbers';
 import { buildBarDefaults, fitValueDomain } from '../bar/defaults';
 import { buildMarks, buildReach } from './markers';
 /**
@@ -11,13 +13,31 @@ export function buildBulletDefaults() {
         ...bar,
         scales: {
             ...bar.scales,
-            defaults: (_state, ctx) => ({
+            defaults: (_state, env) => ({
                 category: {
-                    paddingInner: ctx.cfg.bullet.paddingInner,
-                    paddingOuter: ctx.cfg.bullet.paddingOuter
+                    paddingInner: env.cfg.bullet.paddingInner,
+                    paddingOuter: env.cfg.bullet.paddingOuter
                 }
             }),
-            fit: (state, ctx) => fitValueDomain(state, buildReach(state, ctx))
+            fit: (state, env) => fitValueDomain(state, buildReach(state, env))
+        },
+        // Each bar's target and range bounds, for its tooltip, hover and value labels to read.
+        context: (state) => ((row) => ({
+            target: RowNumbers.of(state.target, row),
+            ranges: (state.ranges ?? [])
+                .map((range) => RowNumbers.of(range, row))
+                .filter((bound) => bound !== undefined)
+                .sort((a, b) => a - b)
+        })),
+        styles: {
+            ...bar.styles,
+            values: {
+                ...bar.styles?.values,
+                parts: {
+                    placements: (state) => ValueLabels.besideBand(state, ['target', 'ranges']),
+                    default: ['value']
+                }
+            }
         },
         markers: { ...bar.markers, marks: buildMarks }
     };

package/dist/plots/ranking/bullet/markers.d.ts

@@ -1,10 +1,10 @@
 import type { AxisBasedMarkersConfig } from '../../../types/markers/common';
-import type { BulletPlotState, BulletPlotCtx } from '../../../types/plots/ranking/bullet/state';
+import type { BulletPlotState, BulletPlotEnv } from '../../../types/plots/ranking/bullet/state';
 /** Every value the axis has to reach beyond the bars. */
-export declare function buildReach<TData extends Record<string, unknown>>(state: BulletPlotState<TData>, ctx: BulletPlotCtx): number[];
+export declare function buildReach<TData extends Record<string, unknown>>(state: BulletPlotState<TData>, env: BulletPlotEnv): number[];
 /**
  * BulletPlot's "markers" phase, back to front: a rule per range, the bars of a
  * bar plot - thinner, so the ranges show around them - and a tick at each
  * target.
  */
-export declare function buildMarks<TData extends Record<string, unknown>>(state: BulletPlotState<TData>, ctx: BulletPlotCtx): AxisBasedMarkersConfig[];
+export declare function buildMarks<TData extends Record<string, unknown>>(state: BulletPlotState<TData>, env: BulletPlotEnv): AxisBasedMarkersConfig[];

package/dist/plots/ranking/bullet/markers.js

@@ -1,9 +1,10 @@
+import { ValueLabels } from '../../../layout/styles/ValueLabels';
 import { buildMarks as buildBarMarks, buildBarGeometry } from '../bar/markers';
 import { GAP_VALUE } from '../../../phases/transforms/TransformsPhase';
 import { RowNumbers } from '../../utils/RowNumbers';
 /** Each category's target and range bounds, read off the rows the bars draw. */
-function buildMeasures(state, ctx) {
-    const geometry = buildBarGeometry(state, ctx.cfg.bar.seriesPadding);
+function buildMeasures(state, env) {
+    const geometry = buildBarGeometry(state, env.cfg.bar.seriesPadding);
     return (state.processedData?.data ?? [])
         .filter((row) => row[GAP_VALUE] === undefined && geometry.spanOf(row) !== undefined)
         .map((row) => ({
@@ -16,8 +17,8 @@ function buildMeasures(state, ctx) {
     }));
 }
 /** Every value the axis has to reach beyond the bars. */
-export function buildReach(state, ctx) {
-    return buildMeasures(state, ctx).flatMap(({ target, bounds }) => [
+export function buildReach(state, env) {
+    return buildMeasures(state, env).flatMap(({ target, bounds }) => [
         ...(target === undefined ? [] : [target]),
         ...bounds
     ]);
@@ -27,8 +28,8 @@ export function buildReach(state, ctx) {
  * bar plot - thinner, so the ranges show around them - and a tick at each
  * target.
  */
-export function buildMarks(state, ctx) {
-    const configured = ctx.cfg.bullet;
+export function buildMarks(state, env) {
+    const configured = env.cfg.bullet;
     const own = (state.styles ?? {});
     const rangeColors = own.ranges?.colors ?? configured.rangeColors;
     const rangeWidth = own.ranges?.width ?? configured.rangeWidth;
@@ -38,8 +39,8 @@ export function buildMarks(state, ctx) {
         length: own.target?.length ?? configured.targetLength
     };
     const isHorizontal = state.axes?.isHorizontal ?? false;
-    const baseline = buildBarGeometry(state, ctx.cfg.bar.seriesPadding).baseline;
-    const measures = buildMeasures(state, ctx);
+    const baseline = buildBarGeometry(state, env.cfg.bar.seriesPadding).baseline;
+    const measures = buildMeasures(state, env);
     // Each bound is a band from the baseline, drawn widest first so the narrower ones lie over it.
     const rows = measures.flatMap(({ category, bounds }) => bounds
         .map((bound, rank) => ({
@@ -63,7 +64,7 @@ export function buildMarks(state, ctx) {
             }
         ];
     // The bars narrowed to a thickness of their own, centered in their band.
-    const bars = buildBarMarks(state, ctx).map((marker) => marker.type === 'bar' && marker.role === 'segment'
+    const bars = buildBarMarks(state, env).map((marker) => marker.type === 'bar' && marker.role === 'segment'
         ? {
             ...marker,
             thickness: own.bar?.thickness ?? configured.barThickness
@@ -85,5 +86,10 @@ export function buildMarks(state, ctx) {
                 }
             }
         ];
-    return [...ranges, ...bars, ...ticks];
+    // Its other parts `styles.values` labels - the target, the range bounds - beside the band; the bars write the value.
+    const geometry = buildBarGeometry(state, env.cfg.bar.seriesPadding);
+    const labels = state.valueLabels?.show
+        ? state.valueLabels.partMarkers(env, (state.processedData?.data ?? []).filter((row) => row[GAP_VALUE] === undefined && geometry.spanOf(row) !== undefined), ValueLabels.bandPoint(state, geometry.categoryOf), { skip: ['value'] })
+        : [];
+    return [...ranges, ...bars, ...ticks, ...labels];
 }

package/dist/plots/ranking/cleveland/ClevelandMarkers.d.ts

@@ -1,6 +1,6 @@
 import { ValueLabels } from '../../../layout/styles/ValueLabels';
-import type { ClevelandPlotState, ClevelandPlotCtx, ClevelandOptions } from '../../../types/plots/ranking/cleveland/state';
-import type { AxisBasedMarkersConfig, TextMarkerConfig } from '../../../types/markers/common';
+import type { ClevelandPlotState, ClevelandPlotEnv, ClevelandOptions } from '../../../types/plots/ranking/cleveland/state';
+import type { AxisBasedMarkersConfig } from '../../../types/markers/common';
 import type { EdgeBox } from '../../../types/layout/box';
 /**
  * The marks of the Cleveland family of plots, which differ only by their
@@ -8,7 +8,7 @@ import type { EdgeBox } from '../../../types/layout/box';
  * highest value (from the baseline, for a lollipop) with a dot at each value.
  * A category with one dot gets a stem in that dot's series color, restyled by
  * the segment its dot belongs to; a category with several gets one neutral
- * connector. The "markers" phase takes its `marks`, `valueLabels` and `reach`.
+ * connector. The "markers" phase takes its `marks` and `reach`.
  */
 export declare class ClevelandMarkers {
     #private;
@@ -16,14 +16,7 @@ export declare class ClevelandMarkers {
     /** Forgets what was warned about; for tests. */
     static resetWarnings(): void;
     /** The plot's connectors, then its dots, which draw on top of them. */
-    marks: <TData extends Record<string, unknown>>(state: ClevelandPlotState<TData>, ctx: ClevelandPlotCtx) => AxisBasedMarkersConfig[];
-    /**
-     * The value labels of the dots `styles.values.of` picks, one `'text'` marker
-     * per place a dot can hold in its range - past the top end (above, or right
-     * of it), past the bottom end (below, or left of it) and, for the dots
-     * between, beside it - and per series, when they take their series' color.
-     */
-    valueLabels: <TData extends Record<string, unknown>>(labels: ValueLabels, state: ClevelandPlotState<TData>, ctx: ClevelandPlotCtx) => TextMarkerConfig[];
+    marks: <TData extends Record<string, unknown>>(state: ClevelandPlotState<TData>, env: ClevelandPlotEnv) => AxisBasedMarkersConfig[];
     /**
      * Room for the labels past the dots at the end of the value axis, so the
      * farthest one fits inside the figure instead of crossing its edge. Only the

package/dist/plots/ranking/cleveland/ClevelandMarkers.js

@@ -1,3 +1,4 @@
+import { isGapValue } from '../../utils/gaps';
 import { PlotAxes } from '../../../phases/data/PlotAxes';
 import { ProcessedPositions } from '../../../phases/transforms/ProcessedPositions';
 import { SERIES_KEY } from '../../../phases/transforms/TransformsPhase';
@@ -5,6 +6,7 @@ import { ValueLabels } from '../../../layout/styles/ValueLabels';
 import { ClevelandRanges } from './ClevelandRanges';
 import { ClevelandConnector } from './ClevelandConnector';
 import { BasicStyles } from '../../../layout/styles/BasicStyles';
+import { PointLayout } from '../../../markers/labels/layouts/PointLayout';
 /** The messages already warned about, so a plot that redraws warns once. */
 const warned = new Set();
 /**
@@ -13,7 +15,7 @@ const warned = new Set();
  * highest value (from the baseline, for a lollipop) with a dot at each value.
  * A category with one dot gets a stem in that dot's series color, restyled by
  * the segment its dot belongs to; a category with several gets one neutral
- * connector. The "markers" phase takes its `marks`, `valueLabels` and `reach`.
+ * connector. The "markers" phase takes its `marks` and `reach`.
  */
 export class ClevelandMarkers {
     #options;
@@ -25,8 +27,8 @@ export class ClevelandMarkers {
         warned.clear();
     }
     /** The plot's connectors, then its dots, which draw on top of them. */
-    marks = (state, ctx) => {
-        const { cfg, interaction } = ctx;
+    marks = (state, env) => {
+        const { cfg, interaction } = env;
         const style = cfg[this.#options.config];
         const { isHorizontal } = ClevelandMarkers.#geometry(state);
         const ranges = ClevelandRanges.of(state, this.#options.fromBaseline ?? false, ClevelandConnector.ends(state), this.#options.interval ?? false);
@@ -187,6 +189,7 @@ export class ClevelandMarkers {
                     type: 'dot',
                     series: name,
                     data: segment.data,
+                    hover: 'style',
                     ...(isHorizontal ? { x: value, y: category } : { x: category, y: value }),
                     r,
                     styles: {
@@ -201,12 +204,24 @@ export class ClevelandMarkers {
                 };
             });
         });
+        const values = state.valueLabels?.show ? state.valueLabels : undefined;
+        const labels = values?.writes('value') ? this.#valueLabels(values, state, env) : undefined;
+        // The other parts of a row it labels - an interval's ends - beside them; the dots write the value.
+        const processed = state.processedData;
+        const position = ProcessedPositions.of(processed, PlotAxes.valueOf(state));
+        const parts = values
+            ? values.partMarkers(env, processed.data.filter((row) => !isGapValue(position[PlotAxes.valueOf(state)](row))), ValueLabels.bandPoint(state, position[PlotAxes.categoryOf(state)]), {
+                skip: ['value'],
+                seriesColor: (row) => state.colorForSeries(String(row[SERIES_KEY]))
+            })
+            : [];
         return [
             ...rules,
             ...caps,
             ...arrows,
-            ...dots,
-            ...this.#connectorLabels(state, ctx, connector, looks, isHorizontal)
+            ...ValueLabels.onMarkers(dots, 'dot', labels),
+            ...this.#connectorLabels(state, env, connector, looks, isHorizontal),
+            ...parts
         ];
     };
     /** The dash, cap and join a connector is drawn with, leaving out what is not set. */
@@ -243,7 +258,7 @@ export class ClevelandMarkers {
         }));
     }
     /** The label on each connector, when `styles.connector.label` asks for one: written at its middle, beside it or on it. */
-    #connectorLabels(state, ctx, connector, looks, isHorizontal) {
+    #connectorLabels(state, env, connector, looks, isHorizontal) {
         const label = connector.label;
         if (!label)
             return [];
@@ -255,7 +270,7 @@ export class ClevelandMarkers {
             return [];
         const font = label.fontStyle;
         // Beside a connector: clear of half its thickest, and a few px.
-        const clear = Math.max(...data.map((row) => Number(row.strokeWidth))) / 2 + ctx.cfg.connector.labelGap;
+        const clear = Math.max(...data.map((row) => Number(row.strokeWidth))) / 2 + env.cfg.connector.labelGap;
         const inside = label.anchor === 'middle';
         const at = inside
             ? { dx: 0, dy: 0, textAnchor: 'middle', lineAnchor: 'middle' }
@@ -271,7 +286,7 @@ export class ClevelandMarkers {
                 styles: {
                     ...font,
                     fill: font?.fill ?? 'currentColor',
-                    fontSize: font?.fontSize ?? ctx.cfg.connector.labelFontSize,
+                    fontSize: font?.fontSize ?? env.cfg.connector.labelFontSize,
                     dx: font?.dx ?? at.dx,
                     dy: font?.dy ?? at.dy,
                     textAnchor: font?.textAnchor && font.textAnchor !== 'outside' ? font.textAnchor : at.textAnchor,
@@ -281,68 +296,72 @@ export class ClevelandMarkers {
         ];
     }
     /**
-     * The value labels of the dots `styles.values.of` picks, one `'text'` marker
-     * per place a dot can hold in its range - past the top end (above, or right
-     * of it), past the bottom end (below, or left of it) and, for the dots
-     * between, beside it - and per series, when they take their series' color.
+     * The value labels of the dots `styles.values` picks, placed by where each dot sits in its range - or on the
+     * `side` the author asks of them all, or around each dot's rim (`'path'`).
      */
-    valueLabels = (labels, state, ctx) => {
+    #valueLabels(labels, state, env) {
         if (!state.processedData?.data.length)
             return [];
         const { isHorizontal } = ClevelandMarkers.#geometry(state);
-        const { category, value } = ClevelandMarkers.#channels(state);
         const { font, format } = labels;
         const read = ValueLabels.valueOf(state);
         const valueOf = ProcessedPositions.of(state.processedData, PlotAxes.valueOf(state))[PlotAxes.valueOf(state)];
-        const gap = labels.offset(isHorizontal ? 'x' : 'y', ctx.cfg[this.#options.config].labelGap);
+        const gap = labels.offset(env.cfg[this.#options.config].labelGap);
         const nameOf = (d) => String(d[SERIES_KEY]);
         const picked = this.#picked(state);
-        // Where a label sits from its dot, by role: along the range (past an end) or across it (between).
-        const placement = {
-            max: isHorizontal
-                ? { dx: gap, dy: 0, textAnchor: 'start', lineAnchor: 'middle' }
-                : { dx: 0, dy: -gap, textAnchor: 'middle', lineAnchor: 'bottom' },
-            min: isHorizontal
-                ? { dx: -gap, dy: 0, textAnchor: 'end', lineAnchor: 'middle' }
-                : { dx: 0, dy: gap, textAnchor: 'middle', lineAnchor: 'top' },
-            between: isHorizontal
-                ? { dx: 0, dy: -gap, textAnchor: 'middle', lineAnchor: 'bottom' }
-                : { dx: gap, dy: 0, textAnchor: 'start', lineAnchor: 'middle' }
-        };
-        // What fills the labels of a series: the one fill all share, its own color, or the axis'.
-        const fillOf = (series) => labels.fill ??
-            (labels.color === 'series' ? state.colorForSeries(series) : undefined) ??
-            'currentColor';
-        const names = labels.color === 'series' && !labels.fill
-            ? (state.resolvedSeries ?? []).map((s) => s.name)
-            : [''];
-        return ['max', 'min', 'between'].flatMap((role) => names.flatMap((name) => {
-            const data = picked
-                .filter(({ entry, dot }) => ClevelandRanges.roleOf(entry, dot.value) === role &&
-                (name === '' || dot.series === name))
-                .map(({ dot }) => dot.row);
-            if (data.length === 0)
+        // Along the range past an end, across it between them.
+        const side = labels.placement.side;
+        const own = side && { ...PointLayout.sideOf(side, gap) };
+        const placement = own
+            ? { max: own, min: own, between: own }
+            : {
+                max: isHorizontal
+                    ? { dx: gap, dy: 0, textAnchor: 'start', lineAnchor: 'middle' }
+                    : { dx: 0, dy: -gap, textAnchor: 'middle', lineAnchor: 'bottom' },
+                min: isHorizontal
+                    ? { dx: -gap, dy: 0, textAnchor: 'end', lineAnchor: 'middle' }
+                    : { dx: 0, dy: gap, textAnchor: 'middle', lineAnchor: 'top' },
+                between: isHorizontal
+                    ? { dx: 0, dy: -gap, textAnchor: 'middle', lineAnchor: 'bottom' }
+                    : { dx: gap, dy: 0, textAnchor: 'start', lineAnchor: 'middle' }
+            };
+        const fill = labels.fill ??
+            (labels.color === 'series'
+                ? (d) => state.colorForSeries(nameOf(d))
+                : 'currentColor');
+        if (labels.layout === 'path') {
+            const text = (d) => format(Number(read(d) ?? valueOf(d)), d, nameOf(d));
+            const rim = labels.label(env, text, { fontSize: 12 });
+            return [{ ...rim, styles: { ...rim.styles, fill: font?.fill ?? fill } }];
+        }
+        const { styles: shared, ...hooks } = labels.hooks(env);
+        return ['max', 'min', 'between'].flatMap((role) => {
+            const rows = new Set(picked
+                .filter(({ entry, dot }) => ClevelandRanges.roleOf(entry, dot.value) === role)
+                .map(({ dot }) => dot.row));
+            if (rows.size === 0)
                 return [];
             const at = placement[role];
             return [
                 {
-                    type: 'text',
-                    data,
-                    ...(isHorizontal ? { x: value, y: category } : { x: category, y: value }),
-                    text: (d) => format(Number(read(d) ?? valueOf(d)), nameOf(d), d),
+                    ...hooks,
+                    layout: 'point',
+                    select: (row) => rows.has(row),
+                    text: (d) => format(Number(read(d) ?? valueOf(d)), d, nameOf(d)),
                     styles: {
+                        ...shared,
                         ...font,
-                        fill: fillOf(name),
+                        fill,
                         fontSize: font?.fontSize ?? 12,
-                        dx: font?.dx ?? at.dx,
-                        dy: font?.dy ?? at.dy,
-                        textAnchor: labels.textAnchor ?? at.textAnchor,
-                        lineAnchor: font?.lineAnchor ?? at.lineAnchor
+                        dx: at.dx,
+                        dy: at.dy,
+                        textAnchor: at.textAnchor,
+                        lineAnchor: at.lineAnchor
                     }
                 }
             ];
-        }));
-    };
+        });
+    }
     /**
      * Room for the labels past the dots at the end of the value axis, so the
      * farthest one fits inside the figure instead of crossing its edge. Only the
@@ -354,11 +373,11 @@ export class ClevelandMarkers {
         if (top.length === 0)
             return [];
         if (!state.axes?.isHorizontal) {
-            const at = { y: -labels.offset('y', gap) };
+            const at = { y: -labels.offset(gap) };
             return [labels.edgeBox('0', { x: 'middle', y: 'before' }, at, ['top'])];
         }
-        const at = { x: labels.offset('x', gap) };
-        const texts = new Set(top.map(({ dot }) => labels.format(dot.value, dot.series, dot.row)));
+        const at = { x: labels.offset(gap) };
+        const texts = new Set(top.map(({ dot }) => labels.format(dot.value, dot.row, dot.series)));
         return [...texts].map((text) => labels.edgeBox(text, { x: 'after', y: 'middle' }, at, ['right']));
     };
     /**

package/dist/plots/ranking/cleveland/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 { buildClevelandDefaults } from './defaults';
 	import type {
 		ClevelandPlotProps,
@@ -28,7 +28,7 @@
 	}: ClevelandPlotProps<TData> = $props();
 </script>
 
-<Plot
+<AbstractPlot
 	core={core as ClevelandPlotCoreProps<TData>}
 	defaults={buildClevelandDefaults}
 	bind:margins

package/dist/plots/ranking/cleveland/Plot.svelte.d.ts

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

package/dist/plots/ranking/cleveland/defaults.d.ts

@@ -1,5 +1,5 @@
 import type { AxisPlotDefaults } from '../../../types/phases';
-import type { ClevelandOptions, ClevelandPlotState, ClevelandPlotCtx } from '../../../types/plots/ranking/cleveland/state';
+import type { ClevelandOptions, ClevelandPlotState, ClevelandPlotEnv } from '../../../types/plots/ranking/cleveland/state';
 /**
  * ClevelandPlot on the shared pipeline, and the base of its wrappers: per
  * category along one category axis - `x`, or `y` for sideways rows, as the
@@ -10,4 +10,4 @@ import type { ClevelandOptions, ClevelandPlotState, ClevelandPlotCtx } from '../
  * what it checks about the series before drawing. Its plot defaults to hover
  * along the category axis.
  */
-export declare function buildClevelandDefaults<TData extends Record<string, unknown>>(options?: ClevelandOptions): AxisPlotDefaults<ClevelandPlotState<TData>, ClevelandPlotCtx>;
+export declare function buildClevelandDefaults<TData extends Record<string, unknown>>(options?: ClevelandOptions): AxisPlotDefaults<ClevelandPlotState<TData>, ClevelandPlotEnv>;

package/dist/plots/ranking/cleveland/defaults.js

@@ -1,4 +1,7 @@
+import { ValueLabels } from '../../../layout/styles/ValueLabels';
+import { RowNumbers } from '../../utils/RowNumbers';
 import { ClevelandMarkers } from './ClevelandMarkers';
+import { HoverDefaults } from '../../../layout/hover/HoverDefaults';
 import { ClevelandRanges } from './ClevelandRanges';
 import { NiceTicks } from '../../../layout/scales/NiceTicks';
 import { PlotAxes } from '../../../phases/data/PlotAxes';
@@ -53,16 +56,47 @@ export function buildClevelandDefaults(options = { name: 'ClevelandPlot', config
             fit: options.interval
                 ? (state) => fitInterval(state, options.fromBaseline ?? false)
                 : undefined,
-            defaults: (_state, ctx) => ({
+            defaults: (_state, env) => ({
                 category: {
-                    paddingInner: ctx.cfg[options.config].paddingInner,
-                    paddingOuter: ctx.cfg[options.config].paddingOuter
+                    paddingInner: env.cfg[options.config].paddingInner,
+                    paddingOuter: env.cfg[options.config].paddingOuter
                 }
             })
         },
         // A dot is labelled by what its category's dots say: the first, the highest... of each.
         transforms: { labels: { group: 'category', skip: ClevelandRanges.skipGaps } },
-        styles: { values: { reach: markers.reach } },
-        markers: { marks: markers.marks, valueLabels: markers.valueLabels }
+        // An interval's ends, for its tooltip, hover and value labels to read.
+        context: options.interval
+            ? (state) => {
+                const valueOf = ValueLabels.valueOf(state);
+                return ((row) => {
+                    const [lower, upper] = RowNumbers.interval(state, row, Number(valueOf(row)));
+                    return { lower, upper };
+                });
+            }
+            : undefined,
+        styles: {
+            values: {
+                layout: 'point',
+                layouts: { path: { side: 'outside' } },
+                // An interval's ends sit past it, each on its own side.
+                parts: options.interval
+                    ? {
+                        placements: (state) => {
+                            const sideways = state.axes?.isHorizontal;
+                            return {
+                                lower: { side: sideways ? 'before' : 'below' },
+                                upper: { side: sideways ? 'after' : 'above' }
+                            };
+                        },
+                        default: ['value']
+                    }
+                    : undefined,
+                reach: (labels, state) => (labels.layout === 'point' ? markers.reach(labels, state) : [])
+            }
+        },
+        markers: { marks: markers.marks },
+        // A rule along the value axis at the hovered dot, and a dot and a label on each one of its category.
+        hover: { marker: (state) => HoverDefaults.valueRule(PlotAxes.valueOf(state)) }
     };
 }