@fundar/data-chart-telling 1.0.0 → 1.2.0

package/dist/plots/{geo → map/geo}/phases/scales.js

@@ -1,12 +1,12 @@
-import { resolveColorScale } from '../../../utils/color';
-import { resolveOpacityScale } from '../../../utils/opacity';
-import { ContinuousDomain } from '../../../utils/ContinuousDomain';
-import { resolveFeatureScales } from '../../utils/geoSegments';
+import { ColorRamp } from '../../../../utils/color';
+import { OpacityScale } from '../../../../utils/OpacityScale';
+import { ContinuousDomain } from '../../../../utils/ContinuousDomain';
+import { GeoSegments } from '../GeoSegments';
 /**
  * GeoPlot's "scales" phase: each feature's own resolved color (mirrors
  * HeatmapPlot's own), with a per-feature override for whichever segment
  * (its `grouping` bucket, or itself by id) sets its own `scales.color` -
- * see `resolveFeatureScales`. A segment ramp's domain is built from just
+ * see `GeoSegments.scales`. A segment ramp's domain is built from just
  * the features that share its own key, so e.g. two grouping buckets each
  * get a ramp scaled to their own value range, not the whole dataset's.
  */
@@ -19,14 +19,12 @@ export function buildScales(state, ctx) {
     const valueDomain = ContinuousDomain.build(scales.color?.domain, colorValues);
     const effectiveDomain = valueDomain ? ContinuousDomain.ramp(valueDomain, range) : null;
     const colorScale = effectiveDomain
-        ? resolveColorScale({ ...scales.color, domain: effectiveDomain }, effectiveDomain, [
-            cfg.continuous.min,
-            cfg.continuous.max
-        ])
+        ? ColorRamp.continuous(cfg, scales.color, effectiveDomain)
         : null;
     // Per-segment-key ramp cache - built lazily, once per distinct grouping
     // value/feature id that actually has its own `scales.color`.
     const segmentScaleCache = new Map();
+    const colorRamps = [];
     function segmentColorScaleFor(key, segScales) {
         if (segmentScaleCache.has(key))
             return segmentScaleCache.get(key);
@@ -35,9 +33,16 @@ export function buildScales(state, ctx) {
             : features.filter((g) => g.__id === key);
         const vals = peers.map((g) => color?.(g)).filter((v) => v != null);
         const scale = vals.length
-            ? resolveColorScale({ ...segScales?.color, domain: [Math.min(...vals), Math.max(...vals)] }, [Math.min(...vals), Math.max(...vals)], [cfg.continuous.min, cfg.continuous.max])
+            ? ColorRamp.continuous(cfg, segScales?.color, [Math.min(...vals), Math.max(...vals)])
             : null;
         segmentScaleCache.set(key, scale);
+        if (vals.length && segScales?.color) {
+            colorRamps.push({
+                name: key,
+                domain: [Math.min(...vals), Math.max(...vals)],
+                scale: segScales.color
+            });
+        }
         return scale;
     }
     const resolveColor = colorScale
@@ -47,7 +52,7 @@ export function buildScales(state, ctx) {
                 return undefined;
             const groupingValue = grouping?.(f);
             const featureId = f.__id ?? '';
-            const segScales = resolveFeatureScales(segments, featureId, groupingValue);
+            const segScales = GeoSegments.scales(segments, featureId, groupingValue);
             if (segScales?.color) {
                 const scale = segmentColorScaleFor(groupingValue ?? featureId, segScales);
                 if (scale)
@@ -56,6 +61,16 @@ export function buildScales(state, ctx) {
             return colorScale ? colorScale(v) : undefined;
         }
         : undefined;
+    // Every segment ramp is built up front, so the legend can draw each one.
+    if (colorScale) {
+        for (const f of features) {
+            const featureId = f.__id ?? '';
+            const groupingValue = grouping?.(f);
+            const segScales = GeoSegments.scales(segments, featureId, groupingValue);
+            if (segScales?.color)
+                segmentColorScaleFor(groupingValue ?? featureId, segScales);
+        }
+    }
     // Plot-level only - no segment-scoped opacity ramp (unlike `resolveColor`
     // above), since there's no concrete use case yet driving that complexity.
     const opacityDomain = (() => {
@@ -65,7 +80,7 @@ export function buildScales(state, ctx) {
         return vals.length ? [Math.min(...vals), Math.max(...vals)] : null;
     })();
     const opacityScale = opacityDomain
-        ? resolveOpacityScale(scales.opacity, opacityDomain, cfg.continuous.opacityRange)
+        ? OpacityScale.resolve(scales.opacity, opacityDomain, cfg.continuous.opacityRange)
         : null;
     const resolveOpacity = opacityScale
         ? (f) => {
@@ -76,6 +91,7 @@ export function buildScales(state, ctx) {
     return {
         ...state,
         colorDomain: valueDomain ?? undefined,
+        colorRamps: colorRamps.length ? colorRamps : undefined,
         opacityDomain: opacityDomain && typeof opacityDomain[0] === 'number'
             ? opacityDomain
             : undefined,

package/dist/plots/{geo → map/geo}/phases/tooltip.d.ts

@@ -1,3 +1,3 @@
-import type { GeoPlotState } from '../../../types/plots/geo/state';
+import type { GeoPlotState } from '../../../../types/plots/map/geo/state';
 /** GeoPlot's "tooltip" phase: a hovered feature reads as its id. */
 export declare function buildTooltip<TProps extends Record<string, unknown>>(state: GeoPlotState<TProps>): GeoPlotState<TProps>;

package/dist/plots/map/geo/phases/tooltip.js

@@ -0,0 +1,5 @@
+import { GeoFeatures } from '../GeoFeatures.svelte';
+/** GeoPlot's "tooltip" phase: a hovered feature reads as its id. */
+export function buildTooltip(state) {
+    return { ...state, tooltipFormat: (f) => GeoFeatures.defaultId(f) };
+}

package/dist/plots/{geo → map/geo}/slices.d.ts

@@ -1,5 +1,5 @@
-import type { FacetConfig } from '../../types/layout/facet';
-import type { TimelineConfig } from '../../types/layout/timeline';
+import type { FacetConfig } from '../../../types/layout/facet';
+import type { TimelineConfig } from '../../../types/layout/timeline';
 type Row = Record<string, unknown>;
 /**
  * What a GeoPlot hands `Plot` to slice by: one stand-in row per value

package/dist/plots/{geo → map/geo}/slices.js

@@ -1,4 +1,5 @@
-import { isFacetWrap } from '../../layout/facet/config';
+import { TimelineTime } from '../../../layout/timeline/TimelineTime';
+import { isFacetWrap } from '../../../layout/facet/config';
 const SLICE = Symbol('dct-geo-slice');
 /** A slicing field's value on a feature (from its `properties`) or on a marker's own row. */
 function readField(field, row) {
@@ -32,9 +33,11 @@ export function buildGeoSlicing(args) {
         : readField(fields[dimension], row);
     let combos = [{}];
     for (const dimension of Object.keys(fields)) {
-        const values = [
-            ...new Set(rows.map((row) => readField(fields[dimension], row)).filter((v) => v != null))
-        ];
+        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()];
         combos = combos.flatMap((combo) => values.map((value) => ({ ...combo, [dimension]: value })));
     }
     return {

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

@@ -1,7 +1,7 @@
 <script lang="ts" generics="TData extends Record<string, unknown>">
-	import Plot from '../../layout/plot/Plot.svelte';
+	import Plot from '../../../layout/plot/Plot.svelte';
 	import { buildBarDefaults } from './defaults';
-	import type { BarPlotProps, BarPlotCoreProps } from '../../types/plots/bar/props';
+	import type { BarPlotProps, BarPlotCoreProps } from '../../../types/plots/ranking/bar/props';
 
 	/**
 	 * A bar plot: vertical when its categories run along `x`, horizontal when they run along `y` (the value then on `x`, as in svelteplot's `BarX`). Draws from pre-built `series` or flat `data` rows.

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,24 +1,27 @@
+import { ProcessedPositions } from '../../../phases/transforms/ProcessedPositions';
 import { buildMarks, buildValueLabels, buildHitAreas, buildBarGeometry } from './markers';
-import { niceDomain, naturalTickCount } from '../../layout/scales/niceDomain';
-import { Margins } from '../../layout/margins/Margins';
-import { SERIES_KEY, TransformsPhase } 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) {
-    const isHorizontal = state.axes?.isHorizontal ?? false;
+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 } = TransformsPhase.processedSpan(state.processedData, axis);
+    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)
@@ -28,10 +31,9 @@ function fitValueDomain(state) {
     }
     if (hi <= lo)
         return {};
-    const spacing = isHorizontal ? 80 : 50;
-    const box = Margins.AXIS_ESTIMATE.contentBox(state.width, state.height);
-    const count = naturalTickCount(isHorizontal ? box.width : box.height, spacing, 2);
-    return { [axis]: { domain: niceDomain(lo, hi, count) } };
+    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
@@ -50,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: {
@@ -59,7 +61,7 @@ export function buildBarDefaults() {
                     if (labels.anchor !== 'outside')
                         return [];
                     const axis = PlotAxes.valueOf(state);
-                    if (TransformsPhase.processedSpan(state.processedData, axis).stacked)
+                    if (ProcessedPositions.span(state.processedData, axis).stacked)
                         return [];
                     if (!state.axes?.isHorizontal) {
                         const at = { y: -labels.offset('y') };

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,9 +1,10 @@
-import { getConfiguration } from '../../configuration/config.svelte';
-import { GAP_KIND, GAP_VALUE, SERIES_ID_KEY, TransformsPhase } 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
@@ -14,18 +15,9 @@ 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 { stacked, of: spanOf } = TransformsPhase.processedSpan(state.processedData, valueAxis, baseline);
-    const position = TransformsPhase.processedPosition(state.processedData, valueAxis);
+    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);
     const names = [...new Set((state.groupedSeries ?? []).map((g) => g.series.name))];
     // A lone series, or a stack, fills its whole band: there's nothing to set side by side.
@@ -197,7 +189,7 @@ export function buildMarks(state, ctx) {
     }
     const isReal = (row) => row[GAP_VALUE] === undefined && geometry.spanOf(row) !== undefined;
     const segmentMarkers = [];
-    TransformsPhase.buildProcessedGroups(state, false).forEach((group) => {
+    (state.processedGroups ?? []).forEach((group) => {
         const name = group.series.name;
         const slice = geometry.sliceOf(name);
         const defaultColor = colorForSeries(name);

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 {};