@fundar/data-chart-telling 1.18.0 → 1.20.0

package/dist/plots/map/geo/slices.js

@@ -12,8 +12,13 @@ function readField(field, row) {
 }
 /**
  * What a GeoPlot hands `Plot` to slice by: one stand-in row per value
- * combination found in the features and markers' rows, and timeline/facet
- * accessors that read a stand-in or a real row.
+ * combination, and timeline/facet accessors that read a stand-in or a real
+ * row. A dimension's values are the ones the timeline or facet names
+ * (`timeline.values`, `facet.values`, `rowValues`, `colValues`), in
+ * their order, then any more found in the features and markers' rows - so
+ * the slices exist even when no feature carries the field. Each combination
+ * is also returned as a `slices` entry: its place and the context its
+ * features are read in.
  */
 export function buildGeoSlicing(args) {
     const { rows, timeline, facet } = args;
@@ -31,17 +36,47 @@ export function buildGeoSlicing(args) {
     const reader = (dimension) => (row) => SLICE in row
         ? row[SLICE][dimension]
         : readField(fields[dimension], row);
+    /** The values the timeline or facet names for a dimension, ahead of the ones found. */
+    const named = {
+        time: timeline?.values,
+        by: facet && isFacetWrap(facet) ? facet.values : undefined,
+        rows: facet && !isFacetWrap(facet) ? facet.rowValues : undefined,
+        cols: facet && !isFacetWrap(facet) ? facet.colValues : undefined
+    };
+    const time = new TimelineTime(timeline?.dateFormat);
     let combos = [{}];
     for (const dimension of Object.keys(fields)) {
         const read = rows.map((row) => readField(fields[dimension], row)).filter((v) => v != null);
         // Dates on the same step are one value.
-        const time = new TimelineTime(timeline?.dateFormat);
-        const keyOf = (value) => dimension === 'time' ? String(time.toTime(value) ?? value) : value;
-        const values = [...new Map(read.map((value) => [keyOf(value), value])).values()];
+        const keyOf = (value) => dimension === 'time' ? String(time.toTime(value) ?? value) : String(value);
+        const values = [
+            ...new Map([...(named[dimension] ?? []), ...read].map((value) => [keyOf(value), value])).values()
+        ];
         combos = combos.flatMap((combo) => values.map((value) => ({ ...combo, [dimension]: value })));
     }
+    const slices = combos.map((combo) => {
+        const tick = combo.time === undefined ? undefined : time.toTime(combo.time);
+        const by = combo.by === undefined ? undefined : String(combo.by);
+        const row = combo.rows === undefined ? undefined : String(combo.rows);
+        const col = combo.cols === undefined ? undefined : String(combo.cols);
+        const value = by ?? (row !== undefined && col !== undefined ? `${row} · ${col}` : (row ?? col));
+        const place = {
+            ...(tick === undefined ? {} : { time: tick }),
+            ...(value === undefined
+                ? {}
+                : {
+                    facet: {
+                        facetValue: value,
+                        ...(row === undefined ? {} : { row }),
+                        ...(col === undefined ? {} : { col })
+                    }
+                })
+        };
+        return { place, context: GeoSlices.contextOf(place) };
+    });
     return {
         rows: combos.map((combo) => ({ [SLICE]: combo })),
+        slices,
         timeline: timeline && {
             ...timeline,
             accessor: reader('time'),
@@ -57,3 +92,21 @@ export function buildGeoSlicing(args) {
                 })
     };
 }
+export const GeoSlices = {
+    /** The context a callback reads a feature in, for the slice at `place`: empty when there is none. */
+    contextOf(place) {
+        const { time, facet } = place;
+        return {
+            ...(facet
+                ? {
+                    facet: {
+                        value: facet.facetValue,
+                        ...(facet.row === undefined ? {} : { row: facet.row }),
+                        ...(facet.col === undefined ? {} : { col: facet.col })
+                    }
+                }
+                : {}),
+            ...(time === undefined ? {} : { time })
+        };
+    }
+};

package/dist/plots/part-of-a-whole/treemap/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 { buildTreemapDefaults } from './defaults';
 	import type {
 		TreemapPlotProps,
@@ -30,7 +30,7 @@
 	}: TreemapPlotProps<TData> = $props();
 </script>
 
-<Plot
+<AbstractPlot
 	core={core as TreemapPlotCoreProps<TData>}
 	defaults={buildTreemapDefaults}
 	bind:margins

package/dist/plots/part-of-a-whole/treemap/Plot.svelte.d.ts

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

package/dist/plots/part-of-a-whole/treemap/defaults.js

@@ -87,7 +87,7 @@ function buildMarks(state, env) {
     };
     /** The label of a series' tiles: the name over the share, fitted - or the share alone where the name does not fit. */
     const labelOf = (labels) => {
-        const shape = labels.shapeLabel(env, (row) => `${contextOf(row).name}
+        const shape = labels.label(env, (row) => `${contextOf(row).name}
 ${shareText(row)}`, { fontSize: look.fontSize });
         return {
             ...shape,
@@ -155,7 +155,7 @@ export function buildTreemapDefaults() {
             }),
             fit: () => ({ x: { domain: [0, 1], fitted: true }, y: { domain: [0, 1], fitted: true } })
         },
-        styles: { values: { show: true } },
+        styles: { values: { show: true, layout: 'box' } },
         markers: { marks: buildMarks },
         hover: {
             strategy: 'punctual',

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

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

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

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

@@ -59,17 +59,27 @@ export function buildBarDefaults() {
             }),
             fit: (state) => fitValueDomain(state)
         },
+        transforms: { labels: {} },
         styles: {
             values: {
+                layout: (state) => ProcessedPositions.span(state.processedData, PlotAxes.valueOf(state))
+                    .stacked
+                    ? 'box'
+                    : 'path',
+                layouts: {
+                    path: { edge: 'tip', side: 'outside' },
+                    box: { anchor: 'middle' },
+                    point: { anchor: 'top', side: 'above' }
+                },
                 // An `'outside'` label sits past its bar's end, which the tallest bar takes to the edge.
                 reach: (labels, state) => {
-                    if (labels.anchor !== 'outside')
+                    if (!labels.pastTip)
                         return [];
                     const axis = PlotAxes.valueOf(state);
                     if (ProcessedPositions.span(state.processedData, axis).stacked)
                         return [];
                     if (!state.axes?.isHorizontal) {
-                        const offset = labels.offset('y');
+                        const offset = labels.offset();
                         const boxes = [
                             labels.edgeBox('0', { x: 'middle', y: 'before' }, { y: -offset }, ['top'])
                         ];
@@ -82,7 +92,7 @@ export function buildBarDefaults() {
                         return boxes;
                     }
                     // A bar below zero reaches out to the left, with its label turned that way.
-                    const offset = labels.offset('x');
+                    const offset = labels.offset();
                     return labels
                         .extremes(state.resolvedSeries ?? [], PlotAxes.valueOf(state), 'both')
                         .map(({ series, value }) => value < 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
@@ -58,11 +57,11 @@ hover, env) {
             data: [row],
             category: categoryOf(row),
             hover: hover.active && 'trigger',
-            ...(slice
+            styles: (slice
                 ? isHorizontal
                     ? { insetTop: slice.start, insetBottom: slice.end }
                     : { insetLeft: slice.start, insetRight: slice.end }
-                : {})
+                : undefined)
         };
     });
 }
@@ -89,21 +88,14 @@ export function buildMarks(state, env) {
     // 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(env, (d) => labels.format(Number(valueRead(d)), d, name), {
+    // 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
     };
@@ -155,18 +147,9 @@ export function buildMarks(state, env) {
             };
             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.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';
 /**
@@ -19,6 +21,24 @@ export function buildBulletDefaults() {
             }),
             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.js

@@ -1,3 +1,4 @@
+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';
@@ -85,5 +86,10 @@ export function buildMarks(state, env) {
                 }
             }
         ];
-    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, ClevelandPlotEnv, ClevelandOptions } from '../../../types/plots/ranking/cleveland/state';
-import type { AxisBasedMarkersConfig, TextMarkerConfig } from '../../../types/markers/common';
+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;
@@ -17,13 +17,6 @@ export declare class ClevelandMarkers {
     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>, env: ClevelandPlotEnv) => 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>, env: ClevelandPlotEnv) => TextMarkerConfig[];
     /**
      * 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;
@@ -202,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, env, 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. */
@@ -282,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, env) => {
+    #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', env.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 }),
+                    ...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
@@ -355,10 +373,10 @@ 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 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.js

@@ -1,3 +1,5 @@
+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';
@@ -63,8 +65,37 @@ export function buildClevelandDefaults(options = { name: 'ClevelandPlot', config
         },
         // 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)) }
     };

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

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

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