@fundar/data-chart-telling 1.1.0 → 1.2.0

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

@@ -0,0 +1,375 @@
+import { PlotAxes } from '../../../phases/data/PlotAxes';
+import { ProcessedPositions } from '../../../phases/transforms/ProcessedPositions';
+import { SERIES_KEY } from '../../../phases/transforms/TransformsPhase';
+import { ValueLabels } from '../../../layout/styles/ValueLabels';
+import { ClevelandRanges } from './ClevelandRanges';
+import { ClevelandConnector } from './ClevelandConnector';
+/** The messages already warned about, so a plot that redraws warns once. */
+const warned = new Set();
+/**
+ * The marks of the Cleveland family of plots, which differ only by their
+ * {@link ClevelandOptions}: per category, a connector from its lowest to its
+ * 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`.
+ */
+export class ClevelandMarkers {
+    #options;
+    constructor(options) {
+        this.#options = options;
+    }
+    /** Forgets what was warned about; for tests. */
+    static resetWarnings() {
+        warned.clear();
+    }
+    /** The plot's connectors, then its dots, which draw on top of them. */
+    marks = (state, ctx) => {
+        const { cfg, interaction } = ctx;
+        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);
+        this.#validate(ranges);
+        const connector = ClevelandConnector.of(state, cfg.connector, ranges.entries);
+        const groups = state.processedGroups ?? [];
+        const segmentOf = new Map();
+        for (const group of groups) {
+            for (const segment of group.visualSegments) {
+                for (const row of segment.data) {
+                    segmentOf.set(row, { series: group.series.name, styles: segment.styles });
+                }
+            }
+        }
+        // Each category's connector: a row of its own look. A lone dot's stem takes its series'
+        // color and its segment's style; the legend dims it with the series.
+        const size = state.channels?.r;
+        const dotRadius = typeof size === 'number' ? size : style.dotRadius;
+        const neutral = style.connectorColor ?? cfg.axis.color;
+        const looks = ranges.entries.map((entry) => {
+            const range = connector.rangeOf(entry);
+            const owner = range.series === undefined ? undefined : segmentOf.get(entry.dots[0].row);
+            const stem = owner?.styles.stroke;
+            const disabled = owner && interaction?.strokeFor(owner.series);
+            const strokeWidth = disabled?.strokeWidth ??
+                stem?.strokeWidth ??
+                connector.width(range, dotRadius) ??
+                (style.stemWidth === 'dots' ? dotRadius * 2 : style.stemWidth);
+            // The stretch between the `from` and `to` dots, in the connector's look...
+            const [start, end] = range.span ?? [entry.from, entry.to];
+            const category = entry.category;
+            const span = {
+                category,
+                from: start,
+                to: end,
+                mid: (start + end) / 2,
+                stroke: disabled?.stroke ??
+                    stem?.stroke ??
+                    connector.color(range) ??
+                    (owner ? state.colorForSeries(owner.series) : neutral),
+                strokeWidth,
+                strokeOpacity: disabled?.strokeOpacity ?? stem?.strokeOpacity ?? connector.opacity(range) ?? 1
+            };
+            // ...as an arrow from one dot to the other, when the connector asks for one...
+            const arrow = connector.arrow;
+            const way = arrow && entry.change && entry.change[0] !== entry.change[1] ? entry.change : undefined;
+            const drawn = way
+                ? {
+                    category,
+                    start: way[0],
+                    end: way[1],
+                    stroke: span.stroke,
+                    strokeWidth: connector.width(range, dotRadius) ?? arrow.width,
+                    strokeOpacity: span.strokeOpacity
+                }
+                : undefined;
+            // ...and what runs on past either end of it, to the other series' dots.
+            const outside = connector.outside(neutral);
+            const beyond = [
+                [entry.from, start],
+                [end, entry.to]
+            ]
+                .filter(([from, to]) => to > from)
+                .map(([from, to]) => ({
+                category,
+                from,
+                to,
+                mid: (from + to) / 2,
+                ...outside,
+                strokeWidth
+            }));
+            return {
+                range,
+                row: span,
+                // A stretch drawn as an arrow is not one of the lines.
+                rows: drawn ? beyond : [span, ...beyond],
+                arrow: drawn,
+                dash: disabled?.strokeDasharray ?? stem?.strokeDasharray
+            };
+        });
+        // One rule marker per dash pattern, which a marker takes once for all its rows.
+        const byDash = new Map();
+        for (const look of looks)
+            byDash.set(look.dash, [...(byDash.get(look.dash) ?? []), look]);
+        const rules = [...byDash].map(([dash, group]) => ({
+            type: 'rule',
+            // A connector is not what the series look like: its dots are.
+            legend: false,
+            axis: isHorizontal ? 'y' : 'x',
+            data: group.flatMap((look) => look.rows),
+            value: 'category',
+            ...(isHorizontal ? { x1: 'from', x2: 'to' } : { y1: 'from', y2: 'to' }),
+            stroke: 'stroke',
+            strokeWidth: 'strokeWidth',
+            strokeOpacity: 'strokeOpacity',
+            ...(dash ? { styles: { strokeDasharray: dash } } : {})
+        }));
+        // The arrows, one marker per dash pattern like the lines, each from its `from` dot to its `to` dot.
+        const head = connector.arrow;
+        const arrows = [...byDash].flatMap(([dash, group]) => {
+            const rows = group.flatMap((look) => (look.arrow ? [look.arrow] : []));
+            if (rows.length === 0 || !head)
+                return [];
+            return [
+                {
+                    type: 'arrow',
+                    legend: false,
+                    data: rows,
+                    ...(isHorizontal
+                        ? { x1: 'start', x2: 'end', y1: 'category', y2: 'category' }
+                        : { y1: 'start', y2: 'end', x1: 'category', x2: 'category' }),
+                    headLength: head.headLength,
+                    headAngle: head.headAngle,
+                    // The shaft starts and ends at the edge of its dots, not under them.
+                    insetStart: dotRadius,
+                    insetEnd: dotRadius,
+                    stroke: 'stroke',
+                    strokeWidth: 'strokeWidth',
+                    strokeOpacity: 'strokeOpacity',
+                    ...(dash ? { styles: { strokeDasharray: dash } } : {})
+                }
+            ];
+        });
+        // Caps: a tick across each end of a connector, in its look - one marker per look, which a marker takes once for all its ticks.
+        const capLength = connector.caps(style.caps);
+        const caps = capLength === undefined ? [] : this.#caps(ranges.entries, looks, capLength, isHorizontal);
+        const { category, value } = ClevelandMarkers.#channels(state);
+        // A number is a literal pixel radius; a field or function sizes each dot by its row.
+        const r = size === undefined || typeof size === 'number' ? size : size.accessor;
+        const dots = groups.flatMap((group) => {
+            const name = group.series.name;
+            const color = state.colorForSeries(name);
+            const disabled = interaction?.dotsFor(name);
+            return group.visualSegments.map((segment) => {
+                const stem = segment.styles.stroke;
+                const dot = segment.styles.dots;
+                return {
+                    type: 'dot',
+                    series: name,
+                    data: segment.data,
+                    ...(isHorizontal ? { x: value, y: category } : { x: category, y: value }),
+                    r,
+                    styles: {
+                        dotRadius: disabled?.dotRadius ?? dot?.dotRadius ?? style.dotRadius,
+                        dotFill: disabled?.dotFill ?? dot?.dotFill ?? stem?.stroke ?? color,
+                        dotFillOpacity: disabled?.dotFillOpacity ?? dot?.dotFillOpacity,
+                        dotSymbol: disabled?.dotSymbol ?? dot?.dotSymbol,
+                        dotStroke: disabled?.dotStroke ?? dot?.dotStroke ?? 'none',
+                        dotStrokeWidth: disabled?.dotStrokeWidth ?? dot?.dotStrokeWidth,
+                        dotStrokeOpacity: disabled?.dotStrokeOpacity ?? dot?.dotStrokeOpacity
+                    }
+                };
+            });
+        });
+        return [
+            ...rules,
+            ...caps,
+            ...arrows,
+            ...dots,
+            ...this.#connectorLabels(state, ctx, connector, looks, isHorizontal)
+        ];
+    };
+    /** The caps of the connectors: a tick at each end of those that have a length, one marker per stroke look. */
+    #caps(entries, looks, length, isHorizontal) {
+        const byLook = new Map();
+        entries.forEach((entry, index) => {
+            if (!(entry.to > entry.from))
+                return;
+            const look = looks[index].row;
+            const key = [look.stroke, look.strokeWidth, look.strokeOpacity].join('|');
+            const group = byLook.get(key) ?? { look, rows: [] };
+            group.rows.push({ category: entry.category, end: entry.from }, { category: entry.category, end: entry.to });
+            byLook.set(key, group);
+        });
+        return [...byLook.values()].map(({ look, rows }) => ({
+            type: 'tick',
+            legend: false,
+            data: rows,
+            ...(isHorizontal ? { x: 'end', y: 'category' } : { x: 'category', y: 'end' }),
+            tickLength: length,
+            styles: {
+                stroke: look.stroke,
+                strokeWidth: look.strokeWidth,
+                strokeOpacity: look.strokeOpacity
+            }
+        }));
+    }
+    /** 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) {
+        const label = connector.label;
+        if (!label)
+            return [];
+        const data = looks.flatMap(({ range, row }) => {
+            const text = connector.text(range);
+            return text === undefined ? [] : [{ ...row, text }];
+        });
+        if (data.length === 0)
+            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 inside = label.anchor === 'middle';
+        const at = inside
+            ? { dx: 0, dy: 0, textAnchor: 'middle', lineAnchor: 'middle' }
+            : isHorizontal
+                ? { dx: 0, dy: -clear, textAnchor: 'middle', lineAnchor: 'bottom' }
+                : { dx: clear, dy: 0, textAnchor: 'start', lineAnchor: 'middle' };
+        return [
+            {
+                type: 'text',
+                data,
+                ...(isHorizontal ? { x: 'mid', y: 'category' } : { x: 'category', y: 'mid' }),
+                text: 'text',
+                styles: {
+                    ...font,
+                    fill: font?.fill ?? ctx.cfg.axis.color,
+                    fontSize: font?.fontSize ?? ctx.cfg.connector.labelFontSize,
+                    dx: font?.dx ?? at.dx,
+                    dy: font?.dy ?? at.dy,
+                    textAnchor: font?.textAnchor && font.textAnchor !== 'outside' ? font.textAnchor : at.textAnchor,
+                    lineAnchor: font?.lineAnchor ?? at.lineAnchor
+                }
+            }
+        ];
+    }
+    /**
+     * 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 = (labels, state, ctx) => {
+        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 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) ??
+            ctx.cfg.axis.color;
+        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)
+                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),
+                    styles: {
+                        ...font,
+                        fill: fillOf(name),
+                        fontSize: font?.fontSize ?? 12,
+                        dx: font?.dx ?? at.dx,
+                        dy: font?.dy ?? at.dy,
+                        textAnchor: labels.textAnchor ?? at.textAnchor,
+                        lineAnchor: font?.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
+     * dots at the top end of their range reach there, and only the picked ones.
+     */
+    reach = (labels, state) => {
+        const gap = labels.config[this.#options.config].labelGap;
+        const top = this.#picked(state).filter(({ entry, dot }) => ClevelandRanges.roleOf(entry, dot.value) === 'max');
+        if (top.length === 0)
+            return [];
+        if (!state.axes?.isHorizontal) {
+            const at = { y: -labels.offset('y', 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)));
+        return [...texts].map((text) => labels.edgeBox(text, { x: 'after', y: 'middle' }, at, ['right']));
+    };
+    /**
+     * The dots `styles.values` labels, each with the category it sits in: the rows
+     * the "transforms" phase picked (`labelled`), traced back to the dots of each
+     * category by the series they belong to.
+     */
+    #picked(state) {
+        const categoryAxis = PlotAxes.categoryOf(state);
+        const position = ProcessedPositions.of(state.processedData, PlotAxes.valueOf(state));
+        const ranges = ClevelandRanges.of(state, this.#options.fromBaseline ?? false, {}, this.#options.interval ?? false);
+        const keyOf = (category, series) => `${String(category)}\u0000${series}`;
+        const chosen = new Set((state.labelled ?? []).map((row) => keyOf(position[categoryAxis](row), String(row[SERIES_KEY]))));
+        return ranges.entries.flatMap((entry) => entry.dots
+            .filter((dot) => chosen.has(keyOf(entry.category, dot.series)))
+            .map((dot) => ({ entry, dot })));
+    }
+    /** Warns, once, when the series layout is not one this plot is for. */
+    #validate(ranges) {
+        const problem = this.#options.validate?.(ranges.layout);
+        if (!problem)
+            return;
+        const message = `${this.#options.name}: ${problem}`;
+        if (warned.has(message))
+            return;
+        warned.add(message);
+        console.warn(message);
+    }
+    static #geometry(state) {
+        return { isHorizontal: state.axes?.isHorizontal ?? false };
+    }
+    /** How the plot hands its category and value to the marks: raw when the transforms left a plain channel (a field key keeps feeding svelteplot's axis-title inference), through the positions otherwise. */
+    static #channels(state) {
+        const valueAxis = PlotAxes.valueOf(state);
+        const categoryAxis = PlotAxes.categoryOf(state);
+        const { channels } = state.processedData;
+        const position = ProcessedPositions.of(state.processedData, valueAxis);
+        return {
+            category: (channels[categoryAxis] ?? position[categoryAxis]),
+            value: (channels[valueAxis] ?? position[valueAxis])
+        };
+    }
+}

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

@@ -0,0 +1,31 @@
+import { PlotAxes } from '../../../phases/data/PlotAxes';
+import type { ProcessedData, ProcessedRow } from '../../../types/phases';
+import type { ClevelandPlotState, ClevelandEntry, ClevelandLayout, ClevelandRole } from '../../../types/plots/ranking/cleveland/state';
+/**
+ * Where the dots of a Cleveland-style plot sit category by category: each
+ * category's values - across every series that has one - and the range they
+ * span, with the baseline counted as one end when the plot asks for it.
+ * Built from the rows the "transforms" phase left, so a series the legend
+ * omits is not in it.
+ */
+export declare class ClevelandRanges {
+    readonly entries: readonly ClevelandEntry[];
+    readonly layout: ClevelandLayout;
+    private constructor();
+    /**
+     * The ranges of `state`'s rows; `fromBaseline` adds the plot's baseline to each
+     * category's values. A category's difference runs from the series `ends.from`
+     * to `ends.to` - by default the first and the last one the plot draws.
+     */
+    static of<TData extends Record<string, unknown>>(state: ClevelandPlotState<TData>, fromBaseline: boolean, ends?: {
+        from?: string;
+        to?: string;
+    }, interval?: boolean): ClevelandRanges;
+    /** The rows that cannot be labelled, because they have no value: for the "transforms" phase's `labels.skip`. */
+    static skipGaps(state: {
+        processedData?: ProcessedData;
+        axes?: PlotAxes;
+    }): (row: ProcessedRow) => boolean;
+    /** Where `value` sits in its category's range: the top end when it is the largest (or the only one), the bottom end when the smallest, else between. */
+    static roleOf(entry: ClevelandEntry, value: number): ClevelandRole;
+}

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

@@ -0,0 +1,116 @@
+import { ProcessedPositions } from '../../../phases/transforms/ProcessedPositions';
+import { PlotAxes } from '../../../phases/data/PlotAxes';
+import { isGapValue } from '../../utils/gaps';
+import { RowNumbers } from '../../utils/RowNumbers';
+/**
+ * Where the dots of a Cleveland-style plot sit category by category: each
+ * category's values - across every series that has one - and the range they
+ * span, with the baseline counted as one end when the plot asks for it.
+ * Built from the rows the "transforms" phase left, so a series the legend
+ * omits is not in it.
+ */
+export class ClevelandRanges {
+    entries;
+    layout;
+    constructor(entries, layout) {
+        this.entries = entries;
+        this.layout = layout;
+    }
+    /**
+     * The ranges of `state`'s rows; `fromBaseline` adds the plot's baseline to each
+     * category's values. A category's difference runs from the series `ends.from`
+     * to `ends.to` - by default the first and the last one the plot draws.
+     */
+    static of(state, fromBaseline, ends = {}, interval = false) {
+        const valueAxis = PlotAxes.valueOf(state);
+        const categoryAxis = PlotAxes.categoryOf(state);
+        const position = ProcessedPositions.of(state.processedData, valueAxis);
+        const baseline = PlotAxes.baselineOf(state);
+        const byCategory = new Map();
+        const seriesOf = new Map();
+        const groups = state.processedGroups ?? [];
+        for (const group of groups) {
+            for (const segment of group.visualSegments) {
+                for (const row of segment.data) {
+                    const raw = position[valueAxis](row);
+                    const value = Number(raw);
+                    if (isGapValue(raw) || !Number.isFinite(value))
+                        continue;
+                    const category = position[categoryAxis](row);
+                    const key = String(category);
+                    let entry = byCategory.get(key);
+                    if (!entry) {
+                        const ends = fromBaseline ? baseline : value;
+                        entry = {
+                            category,
+                            dots: [],
+                            from: ends,
+                            to: ends,
+                            difference: undefined,
+                            span: undefined,
+                            change: undefined
+                        };
+                        byCategory.set(key, entry);
+                        seriesOf.set(key, new Set());
+                    }
+                    entry.dots.push({ row, value, series: group.series.name });
+                    // A dot that stands for an interval spans it; else only its own value.
+                    const [low, high] = interval ? RowNumbers.interval(state, row, value) : [value, value];
+                    entry.from = Math.min(entry.from, low);
+                    entry.to = Math.max(entry.to, high);
+                    seriesOf.get(key).add(group.series.name);
+                }
+            }
+        }
+        const names = groups.map((group) => group.series.name);
+        for (const entry of byCategory.values()) {
+            // An end of the difference: a series' dot, the first or last series', or the lowest or highest dot.
+            const at = (which) => {
+                if (which === 'min')
+                    return Math.min(...entry.dots.map((dot) => dot.value));
+                if (which === 'max')
+                    return Math.max(...entry.dots.map((dot) => dot.value));
+                const series = which === 'first' ? names[0] : which === 'last' ? names[names.length - 1] : which;
+                return entry.dots.find((dot) => dot.series === series)?.value;
+            };
+            const last = at(ends.to ?? 'last');
+            const first = fromBaseline ? baseline : at(ends.from ?? 'first');
+            entry.difference = last === undefined || first === undefined ? undefined : last - first;
+            entry.change = last === undefined || first === undefined ? undefined : [first, last];
+            entry.span =
+                last === undefined || first === undefined
+                    ? undefined
+                    : [Math.min(first, last), Math.max(first, last)];
+        }
+        if (interval) {
+            // What an interval says is its own width, from its lower end to its upper.
+            for (const entry of byCategory.values()) {
+                entry.difference = entry.to - entry.from;
+                entry.change = [entry.from, entry.to];
+                entry.span = [entry.from, entry.to];
+            }
+        }
+        const maxSeriesPerCategory = Math.max(0, ...[...seriesOf.values()].map((s) => s.size));
+        return new ClevelandRanges([...byCategory.values()], {
+            seriesCount: groups.length,
+            maxSeriesPerCategory
+        });
+    }
+    /** The rows that cannot be labelled, because they have no value: for the "transforms" phase's `labels.skip`. */
+    static skipGaps(state) {
+        const valueAxis = PlotAxes.valueOf(state);
+        const read = ProcessedPositions.of(state.processedData, valueAxis)[valueAxis];
+        return (row) => {
+            const raw = read(row);
+            return isGapValue(raw) || !Number.isFinite(Number(raw));
+        };
+    }
+    /** Where `value` sits in its category's range: the top end when it is the largest (or the only one), the bottom end when the smallest, else between. */
+    static roleOf(entry, value) {
+        if (value >= entry.to)
+            return 'max';
+        if (value <= entry.from)
+            return 'min';
+        return 'between';
+    }
+}

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

@@ -0,0 +1,45 @@
+<script lang="ts" generics="TData extends Record<string, unknown>">
+	import Plot from '../../../layout/plot/Plot.svelte';
+	import { buildClevelandDefaults } from './defaults';
+	import type {
+		ClevelandPlotProps,
+		ClevelandPlotCoreProps
+	} from '../../../types/plots/ranking/cleveland/props';
+
+	/**
+	 * A Cleveland dot plot: per category, one dot for each series that has a value there, joined by a connector from the lowest to the highest - the general form of `LollipopPlot` (one value) and `DumbbellPlot` (two). Upright, or sideways when the categories run along `y`. Draws from pre-built `series` or flat `data` rows.
+	 * Optional chrome (`title`, `subtitle`, `caption`, `header`, `footer`,
+	 * `legend`) frames it; `timeline` and `facet` slice its `data` rows.
+	 * `margins` is bindable: it reports the margin the plot settled on.
+	 */
+	let {
+		title,
+		subtitle,
+		caption,
+		header,
+		footer,
+		legend,
+		order,
+		timeline,
+		facet,
+		tooltip,
+		margins = $bindable(),
+		...core
+	}: ClevelandPlotProps<TData> = $props();
+</script>
+
+<Plot
+	core={core as ClevelandPlotCoreProps<TData>}
+	defaults={buildClevelandDefaults}
+	bind:margins
+	{title}
+	{subtitle}
+	{caption}
+	{header}
+	{footer}
+	{legend}
+	{order}
+	{timeline}
+	{facet}
+	{tooltip}
+/>

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

@@ -0,0 +1,26 @@
+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>;
+    exports: {};
+    bindings: "margins";
+    slots: {};
+    events: {};
+};
+declare class __sveltets_Render<TData extends Record<string, unknown>> {
+    props(): ReturnType<typeof $$render<TData>>['props'];
+    events(): ReturnType<typeof $$render<TData>>['events'];
+    slots(): ReturnType<typeof $$render<TData>>['slots'];
+    bindings(): "margins";
+    exports(): {};
+}
+interface $$IsomorphicComponent {
+    new <TData extends Record<string, unknown>>(options: import('svelte').ComponentConstructorOptions<ReturnType<__sveltets_Render<TData>['props']>>): import('svelte').SvelteComponent<ReturnType<__sveltets_Render<TData>['props']>, ReturnType<__sveltets_Render<TData>['events']>, ReturnType<__sveltets_Render<TData>['slots']>> & {
+        $$bindings?: ReturnType<__sveltets_Render<TData>['bindings']>;
+    } & ReturnType<__sveltets_Render<TData>['exports']>;
+    <TData extends Record<string, unknown>>(internal: unknown, props: ReturnType<__sveltets_Render<TData>['props']> & {}): ReturnType<__sveltets_Render<TData>['exports']>;
+    z_$$bindings?: ReturnType<__sveltets_Render<any>['bindings']>;
+}
+declare const Plot: $$IsomorphicComponent;
+type Plot<TData extends Record<string, unknown>> = InstanceType<typeof Plot<TData>>;
+export default Plot;

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

@@ -0,0 +1,13 @@
+import type { AxisPlotDefaults } from '../../../types/phases';
+import type { ClevelandOptions, ClevelandPlotState, ClevelandPlotCtx } 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
+ * "data" phase reads it off the values - one dot for each series that has a
+ * value there, joined by a connector from the lowest to the highest. The
+ * `options` set one plot of the family apart: its name, its configuration
+ * block, whether the baseline is an end of the range (a lollipop's stem), and
+ * 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>;