@fundar/data-chart-telling 1.1.0 → 1.2.0

package/dist/plots/{bar → ranking/bar}/Plot.svelte.d.ts

@@ -1,5 +1,5 @@
-import Plot from '../../layout/plot/Plot.svelte';
-import type { BarPlotProps } from '../../types/plots/bar/props';
+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>;
     exports: {};

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

@@ -0,0 +1,16 @@
+import type { AxisPlotDefaults } from '../../../types/phases';
+import type { AxisScale } from '../../../types/layout/scales';
+import type { BarPlotState, BarPlotCtx } from '../../../types/plots/ranking/bar/state';
+/**
+ * The domain a bar plot fits to its own bars on its value axis: from zero to
+ * the tallest span (and the `extra` values a plot draws beyond its bars), niced to as many ticks as fit the plot. Left out when the
+ * author pins the axis, and when there is no span to fit.
+ */
+export declare function fitValueDomain<TData extends Record<string, unknown>>(state: BarPlotState<TData>, extra?: readonly number[]): Partial<Record<'x' | 'y', Partial<AxisScale<TData>>>>;
+/**
+ * BarPlot on the shared pipeline: discrete bars with gap fills along one
+ * category axis - `x`, or `y` for horizontal bars, as the "data" phase reads
+ * it off the values - its own scales (padding, bar layout) and markers.
+ * Its plot defaults to: hover along the category axis, timeline tweens matched per category and group.
+ */
+export declare function buildBarDefaults<TData extends Record<string, unknown>>(): AxisPlotDefaults<BarPlotState<TData>, BarPlotCtx>;

package/dist/plots/{bar → ranking/bar}/defaults.js

@@ -1,23 +1,27 @@
-import { ProcessedPositions } from '../../phases/transforms/ProcessedPositions';
+import { ProcessedPositions } from '../../../phases/transforms/ProcessedPositions';
 import { buildMarks, buildValueLabels, buildHitAreas, buildBarGeometry } from './markers';
-import { NiceTicks } from '../../layout/scales/NiceTicks';
-import { SERIES_KEY } from '../../phases/transforms/TransformsPhase';
-import { PlotAxes } from '../../phases/data/PlotAxes';
+import { NiceTicks } from '../../../layout/scales/NiceTicks';
+import { SERIES_KEY } from '../../../phases/transforms/TransformsPhase';
+import { PlotAxes } from '../../../phases/data/PlotAxes';
 /**
  * The domain a bar plot fits to its own bars on its value axis: from zero to
- * the tallest span, niced to as many ticks as fit the plot. Left out when the
+ * the tallest span (and the `extra` values a plot draws beyond its bars), niced to as many ticks as fit the plot. Left out when the
  * author pins the axis, and when there is no span to fit.
  */
-function fitValueDomain(state) {
+export function fitValueDomain(state, extra = []) {
     const axis = PlotAxes.valueOf(state);
     const scale = state.scales[axis];
-    if (scale?.domain != null || scale?.ticks != null || scale?.nice != null)
+    if (scale?.domain != null || scale?.ticks != null || typeof scale?.nice === 'boolean')
         return {};
     // Every bar's span, as the "transforms" phase left it - its baseline is
     // unknown until the domain is, so a plain bar reads as reaching from zero.
     const { of: spanOf } = ProcessedPositions.span(state.processedData, axis);
     let lo = 0;
     let hi = 0;
+    for (const value of extra) {
+        lo = Math.min(lo, value);
+        hi = Math.max(hi, value);
+    }
     for (const row of state.processedData?.data ?? []) {
         const span = spanOf(row);
         if (!span)
@@ -27,7 +31,9 @@ function fitValueDomain(state) {
     }
     if (hi <= lo)
         return {};
-    return { [axis]: { domain: NiceTicks.fit(state, axis, lo, hi, scale?.niceTolerance) } };
+    return {
+        [axis]: { domain: NiceTicks.fit(state, axis, lo, hi, NiceTicks.toleranceOf(scale?.nice)) }
+    };
 }
 /**
  * BarPlot on the shared pipeline: discrete bars with gap fills along one
@@ -46,7 +52,7 @@ export function buildBarDefaults() {
             defaults: (_state, ctx) => ({
                 category: { paddingInner: ctx.cfg.bar.paddingInner, paddingOuter: ctx.cfg.bar.paddingOuter }
             }),
-            fit: fitValueDomain
+            fit: (state) => fitValueDomain(state)
         },
         styles: {
             values: {

package/dist/plots/{bar → ranking/bar}/markers.d.ts

@@ -1,11 +1,11 @@
-import type { BarMarkerConfig, TextMarkerConfig } from '../../types/markers/common';
-import type { BarPlotState, BarPlotCtx } from '../../types/plots/bar/state';
-import type { ProcessedRow } from '../../types/phases';
-import type { AxisValue } from '../../types/layout/mapping';
-import type { BandSlice } from '../../types/layout/hover';
-import type { HoverConfig } from '../../types/plots/props';
-import { ValueLabels } from '../../layout/styles/ValueLabels';
-import type { AxisBasedMarkersConfig } from '../../types/markers/common';
+import type { BarMarkerConfig, TextMarkerConfig } from '../../../types/markers/common';
+import type { BarPlotState, BarPlotCtx } from '../../../types/plots/ranking/bar/state';
+import type { ProcessedRow } from '../../../types/phases';
+import type { AxisValue } from '../../../types/layout/mapping';
+import type { BandSlice } from '../../../types/layout/hover';
+import type { HoverConfig } from '../../../types/plots/props';
+import { ValueLabels } from '../../../layout/styles/ValueLabels';
+import type { AxisBasedMarkersConfig } from '../../../types/markers/common';
 /**
  * Where a bar plot's bars sit, read off the state its phases leave: each
  * processed row's category and span along the value axis, whether the series

package/dist/plots/{bar → ranking/bar}/markers.js

@@ -1,10 +1,10 @@
-import { ProcessedPositions } from '../../phases/transforms/ProcessedPositions';
-import { getConfiguration } from '../../configuration/config.svelte';
-import { GAP_KIND, GAP_VALUE, SERIES_ID_KEY } from '../../phases/transforms/TransformsPhase';
-import { seriesIdOf } from '../../utils/grouping';
-import { resolveGapAreaStyle } from '../utils/gaps';
-import { PlotAxes } from '../../phases/data/PlotAxes';
-import { ValueLabels } from '../../layout/styles/ValueLabels';
+import { ProcessedPositions } from '../../../phases/transforms/ProcessedPositions';
+import { getConfiguration } from '../../../configuration/config.svelte';
+import { GAP_KIND, GAP_VALUE, SERIES_ID_KEY } from '../../../phases/transforms/TransformsPhase';
+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
@@ -15,16 +15,7 @@ const GAP_KINDS = ['start', 'middle', 'end'];
 export function buildBarGeometry(state, seriesPadding) {
     const valueAxis = PlotAxes.valueOf(state);
     const categoryAxis = PlotAxes.categoryOf(state);
-    const domain = state.scales[valueAxis]?.domain;
-    // Bars rise from zero, or from the nearest end of a domain that leaves it out.
-    const baseline = (() => {
-        const lo = Number(domain?.[0]);
-        const hi = Number(domain?.[(domain?.length ?? 1) - 1]);
-        if (!domain || domain.length < 2 || Number.isNaN(lo) || Number.isNaN(hi))
-            return 0;
-        const [min, max] = [Math.min(lo, hi), Math.max(lo, hi)];
-        return min > 0 ? min : max < 0 ? max : 0;
-    })();
+    const baseline = PlotAxes.baselineOf(state);
     const { stacked, of: spanOf } = ProcessedPositions.span(state.processedData, valueAxis, baseline);
     const position = ProcessedPositions.of(state.processedData, valueAxis);
     const categoryOf = (row) => position[categoryAxis](row);

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

@@ -0,0 +1,42 @@
+<script lang="ts" generics="TData extends Record<string, unknown>">
+	import Plot from '../../../layout/plot/Plot.svelte';
+	import { buildBulletDefaults } from './defaults';
+	import type { BulletPlotProps, BulletPlotCoreProps } from '../../../types/plots/ranking/bullet/props';
+
+	/**
+	 * A bullet plot: per category, a bar for its value over bands - `ranges` - that grade it, with a tick marking its `target`, 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
+	}: BulletPlotProps<TData> = $props();
+</script>
+
+<Plot
+	core={core as BulletPlotCoreProps<TData>}
+	defaults={buildBulletDefaults}
+	bind:margins
+	{title}
+	{subtitle}
+	{caption}
+	{header}
+	{footer}
+	{legend}
+	{order}
+	{timeline}
+	{facet}
+	{tooltip}
+/>

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

@@ -0,0 +1,26 @@
+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>;
+    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/bullet/defaults.d.ts

@@ -0,0 +1,8 @@
+import type { AxisPlotDefaults } from '../../../types/phases';
+import type { BulletPlotState, BulletPlotCtx } 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>;

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

@@ -0,0 +1,24 @@
+import { buildBarDefaults, fitValueDomain } from '../bar/defaults';
+import { buildMarks, buildReach } from './markers';
+/**
+ * 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 function buildBulletDefaults() {
+    const bar = buildBarDefaults();
+    return {
+        ...bar,
+        scales: {
+            ...bar.scales,
+            defaults: (_state, ctx) => ({
+                category: {
+                    paddingInner: ctx.cfg.bullet.paddingInner,
+                    paddingOuter: ctx.cfg.bullet.paddingOuter
+                }
+            }),
+            fit: (state, ctx) => fitValueDomain(state, buildReach(state, ctx))
+        },
+        markers: { ...bar.markers, marks: buildMarks }
+    };
+}

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

@@ -0,0 +1,10 @@
+import type { AxisBasedMarkersConfig } from '../../../types/markers/common';
+import type { BulletPlotState, BulletPlotCtx } 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[];
+/**
+ * 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[];

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

@@ -0,0 +1,90 @@
+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);
+    return (state.processedData?.data ?? [])
+        .filter((row) => row[GAP_VALUE] === undefined && geometry.spanOf(row) !== undefined)
+        .map((row) => ({
+        category: geometry.categoryOf(row),
+        target: RowNumbers.of(state.target, row),
+        bounds: (state.ranges ?? [])
+            .map((range) => RowNumbers.of(range, row))
+            .filter((bound) => bound !== undefined)
+            .sort((a, b) => a - b)
+    }));
+}
+/** Every value the axis has to reach beyond the bars. */
+export function buildReach(state, ctx) {
+    return buildMeasures(state, ctx).flatMap(({ target, bounds }) => [
+        ...(target === undefined ? [] : [target]),
+        ...bounds
+    ]);
+}
+/**
+ * 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 function buildMarks(state, ctx) {
+    const configured = ctx.cfg.bullet;
+    const own = (state.styles ?? {});
+    const rangeColors = own.ranges?.colors ?? configured.rangeColors;
+    const rangeWidth = own.ranges?.width ?? configured.rangeWidth;
+    const target = {
+        color: own.target?.color ?? configured.targetColor ?? ctx.cfg.axis.color,
+        width: own.target?.width ?? configured.targetWidth,
+        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);
+    // 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) => ({
+        category,
+        from: baseline,
+        to: bound,
+        stroke: rangeColors[Math.min(rank, rangeColors.length - 1)]
+    }))
+        .reverse());
+    const ranges = rows.length === 0
+        ? []
+        : [
+            {
+                type: 'rule',
+                legend: false,
+                axis: isHorizontal ? 'y' : 'x',
+                data: rows,
+                value: 'category',
+                ...(isHorizontal ? { x1: 'from', x2: 'to' } : { y1: 'from', y2: 'to' }),
+                stroke: 'stroke',
+                styles: { strokeWidth: rangeWidth }
+            }
+        ];
+    // 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'
+        ? {
+            ...marker,
+            thickness: own.bar?.thickness ?? configured.barThickness
+        }
+        : marker);
+    const targets = measures.flatMap(({ category, target }) => target === undefined ? [] : [{ category, end: target }]);
+    const ticks = targets.length === 0
+        ? []
+        : [
+            {
+                type: 'tick',
+                legend: false,
+                data: targets,
+                ...(isHorizontal ? { x: 'end', y: 'category' } : { x: 'category', y: 'end' }),
+                tickLength: target.length,
+                styles: {
+                    stroke: target.color,
+                    strokeWidth: target.width
+                }
+            }
+        ];
+    return [...ranges, ...bars, ...ticks];
+}

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

@@ -0,0 +1,48 @@
+import type { ClevelandEntry, ClevelandPlotState } from '../../../types/plots/ranking/cleveland/state';
+import type { PlotStylesConfig } from '../../../types/configuration/styling';
+import type { ConnectorLabel, ConnectorRange, ConnectorStyle } from '../../../types/layout/styles';
+/** What a connector falls back to - the configuration's `connector` block. */
+type ConnectorDefaults = PlotStylesConfig['connector'];
+/**
+ * The connectors of a Cleveland-style plot as `styles.connector` styles them:
+ * what each one measures, its color, its thickness and its label. The plot's
+ * marks read each category's connector through it.
+ */
+export declare class ClevelandConnector {
+    #private;
+    readonly style: ConnectorStyle;
+    constructor(style: ConnectorStyle | undefined, defaults: ConnectorDefaults, entries: readonly ClevelandEntry[]);
+    /** The series a plot's differences run between, from `styles.connector`. */
+    static ends<TData extends Record<string, unknown>>(state: ClevelandPlotState<TData>): {
+        from?: string;
+        to?: string;
+    };
+    /** `styles.connector` of a plot's state, over the configuration's defaults and what `entries` measure. */
+    static of<TData extends Record<string, unknown>>(state: ClevelandPlotState<TData>, defaults: ConnectorDefaults, entries: readonly ClevelandEntry[]): ClevelandConnector;
+    /** What `entry`'s connector measures, which every other setting reads. */
+    rangeOf(entry: ClevelandEntry): ConnectorRange;
+    /** The color the author asks for `range`'s connector, if they do. */
+    color(range: ConnectorRange): string | undefined;
+    /** The thickness the author asks for `range`'s connector, if they do, given the dots' radius. */
+    width(range: ConnectorRange, dotRadius: number): number | undefined;
+    /** The opacity the author asks for `range`'s connector, if they do. */
+    opacity(range: ConnectorRange): number | undefined;
+    /** How the part of a connector outside the `from`-`to` stretch looks, over the plot's neutral `fallback` color. */
+    outside(fallback: string): {
+        stroke: string;
+        strokeOpacity: number;
+    };
+    /** The head of the arrow a connector is drawn as, `undefined` when it is a line. */
+    get arrow(): {
+        width: number;
+        headLength: number;
+        headAngle: number;
+    } | undefined;
+    /** The length (px) of the caps a connector draws at its ends, `undefined` when it draws none, given whether the plot draws them unless told otherwise. */
+    caps(byDefault: boolean | undefined): number | undefined;
+    /** The label options: `undefined` without a label. */
+    get label(): ConnectorLabel | undefined;
+    /** What the label of `range`'s connector says, `undefined` when it has nothing to say (no difference). */
+    text(range: ConnectorRange): string | undefined;
+}
+export {};

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

@@ -0,0 +1,140 @@
+import { ColorRamp } from '../../../utils/color';
+/**
+ * The connectors of a Cleveland-style plot as `styles.connector` styles them:
+ * what each one measures, its color, its thickness and its label. The plot's
+ * marks read each category's connector through it.
+ */
+export class ClevelandConnector {
+    style;
+    #defaults;
+    #colorOf;
+    constructor(style, defaults, entries) {
+        this.style = style ?? {};
+        this.#defaults = defaults;
+        this.#colorOf = ClevelandConnector.#colors(this.style.color, defaults, entries);
+    }
+    /** The series a plot's differences run between, from `styles.connector`. */
+    static ends(state) {
+        const { from, to } = state.styles?.connector ?? {};
+        return { from, to };
+    }
+    /** `styles.connector` of a plot's state, over the configuration's defaults and what `entries` measure. */
+    static of(state, defaults, entries) {
+        const style = state.styles?.connector;
+        return new ClevelandConnector(style, defaults, entries);
+    }
+    /** What `entry`'s connector measures, which every other setting reads. */
+    rangeOf(entry) {
+        return {
+            category: entry.category,
+            from: entry.from,
+            to: entry.to,
+            length: entry.to - entry.from,
+            difference: entry.difference,
+            span: entry.span,
+            series: entry.dots.length === 1 ? entry.dots[0].series : undefined
+        };
+    }
+    /** The color the author asks for `range`'s connector, if they do. */
+    color(range) {
+        return this.#colorOf?.(range);
+    }
+    /** The thickness the author asks for `range`'s connector, if they do, given the dots' radius. */
+    width(range, dotRadius) {
+        const { width } = this.style;
+        if (width === undefined)
+            return undefined;
+        if (width === 'dots')
+            return dotRadius * 2;
+        return typeof width === 'function' ? width(range) : width;
+    }
+    /** The opacity the author asks for `range`'s connector, if they do. */
+    opacity(range) {
+        const { opacity } = this.style;
+        return typeof opacity === 'function' ? opacity(range) : opacity;
+    }
+    /** How the part of a connector outside the `from`-`to` stretch looks, over the plot's neutral `fallback` color. */
+    outside(fallback) {
+        const { outside } = this.style;
+        const own = typeof outside === 'string' ? { color: outside } : (outside ?? {});
+        return {
+            stroke: own.color ?? fallback,
+            strokeOpacity: own.opacity ?? this.#defaults.outsideOpacity
+        };
+    }
+    /** The head of the arrow a connector is drawn as, `undefined` when it is a line. */
+    get arrow() {
+        const { arrow } = this.style;
+        if (!arrow)
+            return undefined;
+        const own = arrow === true ? {} : arrow;
+        return { ...this.#defaults.arrow, ...own };
+    }
+    /** The length (px) of the caps a connector draws at its ends, `undefined` when it draws none, given whether the plot draws them unless told otherwise. */
+    caps(byDefault) {
+        const { caps } = this.style;
+        const on = caps === undefined ? (byDefault ?? false) : caps !== false;
+        if (!on)
+            return undefined;
+        return (typeof caps === 'object' ? caps.length : undefined) ?? this.#defaults.capLength;
+    }
+    /** The label options: `undefined` without a label. */
+    get label() {
+        const { label } = this.style;
+        return label === undefined || label === false ? undefined : label === true ? {} : label;
+    }
+    /** What the label of `range`'s connector says, `undefined` when it has nothing to say (no difference). */
+    text(range) {
+        const label = this.label ?? {};
+        const what = label.text ?? 'difference';
+        if (typeof what === 'function')
+            return what(range);
+        const value = what === 'length' ? range.length : range.difference;
+        if (value === undefined || !Number.isFinite(value))
+            return undefined;
+        if (label.format)
+            return label.format(value, range);
+        const rounded = Math.round(value * 100) / 100;
+        return what === 'difference' && rounded > 0 ? `+${rounded}` : String(rounded);
+    }
+    /** The color function for `by`, over what `entries` measure, or `undefined` when no color is asked for. */
+    static #colors(color, defaults, entries) {
+        if (color === undefined)
+            return undefined;
+        if (typeof color === 'string')
+            return () => color;
+        if (typeof color === 'function')
+            return color;
+        if (color.by === 'sign') {
+            const { positive, negative, zero } = { ...defaults.sign, ...color };
+            return ({ difference }) => difference === undefined
+                ? zero
+                : difference > 0
+                    ? positive
+                    : difference < 0
+                        ? negative
+                        : zero;
+        }
+        const { by, ...config } = color;
+        const read = (range) => (by === 'length' ? range.length : range.difference);
+        const values = entries
+            .map((entry) => (by === 'length' ? entry.to - entry.from : entry.difference))
+            .filter((value) => value !== undefined && Number.isFinite(value));
+        if (values.length === 0)
+            return undefined;
+        const lo = Math.min(...values);
+        const hi = Math.max(...values);
+        const diverging = by === 'difference' && config.scheme === undefined;
+        const scale = ColorRamp.resolve({
+            ...(diverging ? { scheme: defaults.differenceScheme, pivot: 0 } : {}),
+            ...(by === 'length' && config.scheme === undefined
+                ? { scheme: defaults.lengthScheme }
+                : {}),
+            ...config
+        }, by === 'difference' ? [Math.min(lo, 0), Math.max(hi, 0)] : [lo, hi], by === 'length' ? defaults.lengthScheme : defaults.differenceScheme);
+        return (range) => {
+            const value = read(range);
+            return value === undefined ? undefined : scale(value);
+        };
+    }
+}

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

@@ -0,0 +1,33 @@
+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 { EdgeBox } from '../../../types/layout/box';
+/**
+ * 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 declare class ClevelandMarkers {
+    #private;
+    constructor(options: ClevelandOptions);
+    /** 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[];
+    /**
+     * 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: <TData extends Record<string, unknown>>(labels: ValueLabels, state: ClevelandPlotState<TData>) => EdgeBox[];
+}