@fundar/data-chart-telling 1.16.0 → 1.18.0

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

@@ -0,0 +1,183 @@
+import { TREEMAP_ROW } from '../../../phases/transforms/methods/TreemapTransform';
+import { HoverDefaults } from '../../../layout/hover/HoverDefaults';
+import { RowContext } from '../../../phases/context/RowContext';
+import { NumberFormat } from '../../../utils/NumberFormat';
+import { Grouping } from '../../../utils/grouping';
+import { getConfiguration } from '../../../configuration/config.svelte';
+/** A share is written with one decimal unless the author or the configuration's `numbers.decimals` says otherwise. */
+const SHARE_DECIMALS = 1;
+/** The width over the height of the box the tiles are shaped for, before the plot's own is known. */
+const DEFAULT_ASPECT = 1.6;
+/**
+ * What a treemap writes for a tile's share: `suffix` is a percent sign unless the author asks for something
+ * else, since a tile is a part of a whole.
+ */
+function shareDisplay(values) {
+    return { ...NumberFormat.displayOf(values), suffix: values?.suffix ?? '%' };
+}
+/**
+ * What a treemap knows of a tile, as the transform left it on its row: its name, path, summed value and share
+ * (from `0` to `100`). The tiles sit in a unit square, so they have no `x` or `y` to read.
+ */
+function tileOf(row) {
+    return {
+        name: String(row[TREEMAP_ROW.name] ?? ''),
+        path: row[TREEMAP_ROW.path] ?? [],
+        value: Number(row[TREEMAP_ROW.value]),
+        share: Number(row[TREEMAP_ROW.share]) * 100,
+        x: undefined,
+        y: undefined
+    };
+}
+/** A tile's context, as the "context" phase left it on its row. */
+const contextOf = (row) => RowContext.of(row);
+/**
+ * The plot's tiles: a `treemap` of its `value`, nested by the levels of its `grouping` (its `color` when unset,
+ * as every plot groups by it then) and shaped for its box,
+ * with the options of the author's own `treemap` transforms over it (`tile`...), and their other transforms
+ * after it in order.
+ */
+function buildTransforms(state) {
+    const own = state.transforms ?? [];
+    const base = {
+        type: 'treemap',
+        value: state.value,
+        levels: Grouping.levels(state.grouping ?? state.color, state.data),
+        aspect: state.width && state.height ? state.width / state.height : DEFAULT_ASPECT
+    };
+    const treemap = own
+        .filter((t) => t.type === 'treemap')
+        .reduce((merged, t) => ({ ...merged, ...t }), base);
+    return [treemap, ...own.filter((t) => t.type !== 'treemap')];
+}
+/** The edges of the tiles, as the processed rows carry them. */
+function edgesOf(state) {
+    const { x1, x2, y1, y2 } = state.processedData.channels;
+    return { x1, x2, y1, y2 };
+}
+/**
+ * The keys of the segments a tile has below its series: its path down to each deeper level
+ * (`'Tertiary.Finance'`), outermost first, so the more specific wins. The series' own are in its style already.
+ */
+function pathKeysOf(state, row) {
+    const { path } = contextOf(row);
+    return path
+        .slice(1)
+        .map((_, i) => path.slice(0, i + 2).join(Grouping.SEPARATOR))
+        .filter((key) => state.segments?.[key]);
+}
+/**
+ * The tiles as `rect` markers, each with a `label`: the name of the tile over its share, fitted to it. A series'
+ * tiles take its style - its color, under `styles.area` and the segments keyed by it (and `default`) - and the
+ * segments keyed by a tile's path restyle it, so the tiles split into one marker per style. The legend's dimming
+ * goes over all of them, and the hover marker's `active` and `others` over the tiles it reaches.
+ */
+function buildMarks(state, env) {
+    if (!state.processedData?.data.length)
+        return [];
+    const look = env.cfg.treemap;
+    const edges = edgesOf(state);
+    const labels = state.valueLabels?.show ? state.valueLabels : undefined;
+    const number = NumberFormat.of(shareDisplay(state.values), env.cfg, SHARE_DECIMALS);
+    const shareText = (row) => {
+        const context = contextOf(row);
+        return state.values?.format
+            ? state.values.format(context.share, number, context)
+            : number(context.share);
+    };
+    /** 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}
+${shareText(row)}`, { fontSize: look.fontSize });
+        return {
+            ...shape,
+            styles: { lineHeight: look.lineHeight, ...shape.styles },
+            fit: { padding: look.padding, fallback: (row) => shareText(row) }
+        };
+    };
+    return (state.processedGroups ?? []).flatMap((group) => {
+        const series = group.series.name;
+        const dimmed = env.interaction?.fillFor(series);
+        const seriesColor = state.colorForSeries(series);
+        /** A tile's color: its series', or a tone of it by its path while `scales.color.depth` asks for one. */
+        const colorOf = (row) => state.colorForPath ? state.colorForPath(contextOf(row).path) : seriesColor;
+        return group.visualSegments.flatMap((segment) => {
+            const styled = new Map();
+            for (const row of segment.data) {
+                const keys = pathKeysOf(state, row);
+                const color = colorOf(row);
+                const id = JSON.stringify([keys, color]);
+                const bucket = styled.get(id) ?? styled.set(id, { keys, color, rows: [] }).get(id);
+                bucket.rows.push(row);
+            }
+            return [...styled.values()].map(({ keys, color, rows }) => {
+                const style = Object.assign({}, segment.styles, ...keys.flatMap((key) => state.segments[key].map((own) => own.styles ?? {})));
+                return {
+                    type: 'rect',
+                    data: rows,
+                    ...edges,
+                    styles: {
+                        ...style,
+                        fill: dimmed?.fill ?? style.fill ?? color,
+                        fillOpacity: dimmed?.fillOpacity ?? style.fillOpacity,
+                        stroke: style.stroke ?? look.stroke,
+                        strokeWidth: style.strokeWidth ?? look.strokeWidth
+                    },
+                    label: labels && labelOf(labels),
+                    hover: 'style'
+                };
+            });
+        });
+    });
+}
+/**
+ * TreemapPlot on the shared pipeline: its rows are the tiles of the `treemap` transform, laid out in a unit square
+ * the plot's two continuous axes span (hidden). Its series are the outermost level of its `grouping`, which colors
+ * the tiles and fills the legend. The tiles are `rect` markers, labelled by their own `label`. Hovering a tile is
+ * hovering its row: an invisible `rect` over each one drives the plot's hover, and its tooltip names the tile and
+ * gives its share.
+ */
+export function buildTreemapDefaults() {
+    return {
+        data: {
+            discreteAxes: 0,
+            nested: true,
+            segments: { color: (style) => style?.fill, connect: false, base: { flat: 'area' } }
+        },
+        // An omitted sector keeps its tiles' room, and every other tile its share; a rescaled one does not.
+        transforms: { transforms: buildTransforms, keepsOmitted: true },
+        // A tile's name, path, value and share, for its label, its tooltip and its hover.
+        context: () => tileOf,
+        scales: {
+            defaults: () => ({
+                x: { axisDisplay: 'none', grid: false },
+                y: { axisDisplay: 'none', grid: false, reverse: true }
+            }),
+            fit: () => ({ x: { domain: [0, 1], fitted: true }, y: { domain: [0, 1], fitted: true } })
+        },
+        styles: { values: { show: true } },
+        markers: { marks: buildMarks },
+        hover: {
+            strategy: 'punctual',
+            // A tile is hovered through its own hit area, not through whichever point the pointer is nearest.
+            pointMatching: 'contains',
+            // A tile has no axes for a crosshair, and writes its own label: its hover only restyles the tiles.
+            marker: (_state, env) => HoverDefaults.shapes(env.cfg),
+            hitAreas: (state, hover) => hover.points.map(({ row }) => ({
+                type: 'rect',
+                data: [row],
+                ...edgesOf(state),
+                styles: { fill: 'transparent' },
+                hover: hover.active && 'trigger'
+            })),
+            format: (state) => {
+                const number = NumberFormat.of(shareDisplay(state.values), getConfiguration(), SHARE_DECIMALS);
+                return ((row) => {
+                    const tile = contextOf(row);
+                    return `${tile.name}: ${number(tile.share)}`;
+                });
+            },
+            label: () => ((row) => contextOf(row).name)
+        }
+    };
+}

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

@@ -1,6 +1,6 @@
 import type { AxisPlotDefaults } from '../../../types/phases';
 import type { AxisScale } from '../../../types/layout/scales';
-import type { BarPlotState, BarPlotCtx } from '../../../types/plots/ranking/bar/state';
+import type { BarPlotState, BarPlotEnv } 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
@@ -13,4 +13,4 @@ export declare function fitValueDomain<TData extends Record<string, unknown>>(st
  * 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>;
+export declare function buildBarDefaults<TData extends Record<string, unknown>>(): AxisPlotDefaults<BarPlotState<TData>, BarPlotEnv>;

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

@@ -1,8 +1,9 @@
 import { ProcessedPositions } from '../../../phases/transforms/ProcessedPositions';
-import { buildMarks, buildValueLabels, buildHitAreas, buildBarGeometry } from './markers';
+import { buildMarks, buildHitAreas, buildBarGeometry } from './markers';
 import { NiceTicks } from '../../../layout/scales/NiceTicks';
 import { SERIES_KEY } from '../../../phases/transforms/TransformsPhase';
 import { PlotAxes } from '../../../phases/data/PlotAxes';
+import { HoverDefaults } from '../../../layout/hover/HoverDefaults';
 /**
  * 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
@@ -53,8 +54,8 @@ export function buildBarDefaults() {
         },
         scales: {
             zero: ['value'],
-            defaults: (_state, ctx) => ({
-                category: { paddingInner: ctx.cfg.bar.paddingInner, paddingOuter: ctx.cfg.bar.paddingOuter }
+            defaults: (_state, env) => ({
+                category: { paddingInner: env.cfg.bar.paddingInner, paddingOuter: env.cfg.bar.paddingOuter }
             }),
             fit: (state) => fitValueDomain(state)
         },
@@ -85,23 +86,28 @@ export function buildBarDefaults() {
                     return labels
                         .extremes(state.resolvedSeries ?? [], PlotAxes.valueOf(state), 'both')
                         .map(({ series, value }) => value < 0
-                        ? labels.edgeBox(labels.format(value, series.name), { x: 'before', y: 'middle' }, { x: -offset }, ['left'])
-                        : labels.edgeBox(labels.format(value, series.name), { x: 'after', y: 'middle' }, { x: offset }, ['right']));
+                        ? labels.edgeBox(labels.format(value, undefined, series.name), { x: 'before', y: 'middle' }, { x: -offset }, ['left'])
+                        : labels.edgeBox(labels.format(value, undefined, series.name), { x: 'after', y: 'middle' }, { x: offset }, ['right']));
                 }
             }
         },
-        markers: { marks: buildMarks, valueLabels: buildValueLabels },
+        markers: { marks: buildMarks },
         hover: {
             // Each bar matched by its own band (see `buildHitAreas`); a grouped bar's dot is
             // drawn in its series' slice of the band.
             pointMatching: 'contains',
-            decorate: (state, ctx) => {
-                const { sliceOf } = buildBarGeometry(state, ctx.cfg.bar.seriesPadding);
+            decorate: (state, env) => {
+                const { sliceOf } = buildBarGeometry(state, env.cfg.bar.seriesPadding);
                 return (row) => ({
                     areaInset: sliceOf(String(row[SERIES_KEY]))
                 });
             },
-            hitAreas: buildHitAreas
+            hitAreas: buildHitAreas,
+            // The hovered category's band behind its bars - its series' slice of it, when that bar alone is hovered.
+            marker: (state) => ({
+                back: [HoverDefaults.band(state.axes?.isHorizontal ? 'y' : 'x')],
+                front: []
+            })
         },
         timeline: { interpolation: { value: 'value', key: ['category', 'grouping'] } }
     };

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

@@ -1,10 +1,9 @@
-import type { BarMarkerConfig, TextMarkerConfig } from '../../../types/markers/common';
-import type { BarPlotState, BarPlotCtx } from '../../../types/plots/ranking/bar/state';
+import type { BarMarkerConfig } from '../../../types/markers/common';
+import type { BarPlotState, BarPlotEnv } 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
@@ -26,20 +25,11 @@ export declare function buildBarGeometry<TData extends Record<string, unknown>>(
  * slice of it. The pointer needn't be over the visible bar. They drive the
  * plot's hover when it is active.
  */
-export declare function buildHitAreas<TData extends Record<string, unknown>>(state: BarPlotState<TData>, hover: HoverConfig<any>, ctx: BarPlotCtx): BarMarkerConfig[];
-/**
- * BarPlot's `styles.values` as one `'text'` marker per series, over the same
- * processed rows its bars draw (gap rows never get a label). `anchor` places
- * each label along its bar: past its top (`'outside'`), just inside it
- * (`'start'`), at its base (`'end'`), or centred (`'middle'`); a stacked bar's
- * label always sits at the middle of its own span. A grouped bar's label
- * shifts with its series' slice of the band.
- */
-export declare function buildValueLabels<TData extends Record<string, unknown>>(labels: ValueLabels, state: BarPlotState<TData>, ctx: BarPlotCtx): TextMarkerConfig[];
+export declare function buildHitAreas<TData extends Record<string, unknown>>(state: BarPlotState<TData>, hover: HoverConfig<any>, env: BarPlotEnv): BarMarkerConfig[];
 /**
  * BarPlot's "markers" phase: visible `role: 'segment'` bars - real data plus
  * gap fills - drawing the rows the "transforms" phase left, prepended onto
  * whatever the "statistics" phase already put in `state.markers`, and its
  * value labels on top of everything.
  */
-export declare function buildMarks<TData extends Record<string, unknown>>(state: BarPlotState<TData>, ctx: BarPlotCtx): AxisBasedMarkersConfig[];
+export declare function buildMarks<TData extends Record<string, unknown>>(state: BarPlotState<TData>, env: BarPlotEnv): AxisBasedMarkersConfig[];

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

@@ -46,8 +46,8 @@ export function buildBarGeometry(state, seriesPadding) {
  */
 export function buildHitAreas(state, 
 // eslint-disable-next-line @typescript-eslint/no-explicit-any
-hover, ctx) {
-    const { categoryOf, sliceOf } = buildBarGeometry(state, ctx.cfg.bar.seriesPadding);
+hover, env) {
+    const { categoryOf, sliceOf } = buildBarGeometry(state, env.cfg.bar.seriesPadding);
     const isHorizontal = state.axes?.isHorizontal ?? false;
     return hover.points.map(({ row, series }) => {
         const slice = series === undefined ? undefined : sliceOf(series);
@@ -57,7 +57,7 @@ hover, ctx) {
             isHorizontal,
             data: [row],
             category: categoryOf(row),
-            hover: hover.active,
+            hover: hover.active && 'trigger',
             ...(slice
                 ? isHorizontal
                     ? { insetTop: slice.start, insetBottom: slice.end }
@@ -66,88 +66,17 @@ hover, ctx) {
         };
     });
 }
-/**
- * BarPlot's `styles.values` as one `'text'` marker per series, over the same
- * processed rows its bars draw (gap rows never get a label). `anchor` places
- * each label along its bar: past its top (`'outside'`), just inside it
- * (`'start'`), at its base (`'end'`), or centred (`'middle'`); a stacked bar's
- * label always sits at the middle of its own span. A grouped bar's label
- * shifts with its series' slice of the band.
- */
-export function buildValueLabels(labels, state, ctx) {
-    const { processedData } = state;
-    const isHorizontal = state.axes?.isHorizontal ?? false;
-    if (!processedData)
-        return [];
-    const geometry = buildBarGeometry(state, ctx.cfg.bar.seriesPadding);
-    const { font, anchor, format } = labels;
-    const valueOf = ValueLabels.valueOf(state);
-    const spanOf = (d) => geometry.spanOf(d) ?? [0, 0];
-    const lowOf = (d) => Math.min(...spanOf(d));
-    const highOf = (d) => Math.max(...spanOf(d));
-    const below = (d) => Number(valueOf(d)) < 0;
-    const place = (negative) => {
-        const mid = (d) => (lowOf(d) + highOf(d)) / 2;
-        if (geometry.stacked)
-            return { at: mid, side: 0 };
-        if (anchor === 'middle')
-            return { at: mid, side: 0 };
-        if (anchor === 'outside')
-            return isHorizontal
-                ? { at: negative ? lowOf : highOf, side: negative ? -1 : 1 }
-                : { at: negative ? lowOf : highOf, side: negative ? 1 : -1 };
-        if (anchor === 'start')
-            return isHorizontal ? { at: lowOf, side: 1 } : { at: highOf, side: 1 };
-        return isHorizontal ? { at: highOf, side: -1 } : { at: lowOf, side: -1 };
-    };
-    const gap = anchor === 'outside' ? 6 : 4;
-    const labelled = processedData.data.filter((d) => d[GAP_VALUE] === undefined && geometry.spanOf(d) !== undefined);
-    return (state.resolvedSeries ?? []).flatMap((s) => {
-        const own = labelled.filter((d) => d[SERIES_ID_KEY] === seriesIdOf(s));
-        // Only a label beyond the tip turns with the sign of its value.
-        const turns = !geometry.stacked && anchor === 'outside';
-        return (turns ? [false, true] : [false]).flatMap((negative) => {
-            const data = turns ? own.filter((d) => below(d) === negative) : own;
-            if (data.length === 0)
-                return [];
-            const { at, side } = place(negative);
-            // A horizontal label reads away from its point to `side`; a vertical one sits on the far side of it.
-            const textAnchor = labels.textAnchor ??
-                (isHorizontal ? (side === 1 ? 'start' : side === -1 ? 'end' : 'middle') : 'middle');
-            const lineAnchor = font?.lineAnchor ??
-                (isHorizontal ? 'middle' : side === 1 ? 'top' : side === -1 ? 'bottom' : 'middle');
-            return [
-                {
-                    type: 'text',
-                    data,
-                    ...(isHorizontal ? { x: at, y: geometry.categoryOf } : { x: geometry.categoryOf, y: at }),
-                    bandSlice: geometry.sliceOf(s.name),
-                    text: (d) => format(Number(valueOf(d)), s.name, d),
-                    styles: {
-                        ...font,
-                        fill: font?.fill ?? ctx.cfg.axis.color,
-                        fontSize: font?.fontSize ?? 12,
-                        dx: font?.dx ?? (isHorizontal ? side * gap : 0),
-                        dy: font?.dy ?? (isHorizontal ? 0 : side * gap),
-                        textAnchor,
-                        lineAnchor
-                    }
-                }
-            ];
-        });
-    });
-}
 /**
  * BarPlot's "markers" phase: visible `role: 'segment'` bars - real data plus
  * gap fills - drawing the rows the "transforms" phase left, prepended onto
  * whatever the "statistics" phase already put in `state.markers`, and its
  * value labels on top of everything.
  */
-export function buildMarks(state, ctx) {
+export function buildMarks(state, env) {
     const { gapFillMaps, colorForSeries, processedData } = state;
     const isHorizontal = state.axes?.isHorizontal ?? false;
     const [categoryAxis, valueAxis] = isHorizontal ? ['y', 'x'] : ['x', 'y'];
-    const geometry = buildBarGeometry(state, ctx.cfg.bar.seriesPadding);
+    const geometry = buildBarGeometry(state, env.cfg.bar.seriesPadding);
     const { channels } = processedData;
     const gapDefaults = getConfiguration().bar.gap;
     // Forwarded raw when the transforms left a plain channel (a field key keeps
@@ -160,7 +89,25 @@ export function buildMarks(state, ctx) {
     // which stays a field key whenever the plot has no transforms.
     const valueOf = (channel) => (geometry.stacked || channel === undefined ? top : channel);
     const gapValue = valueOf(channels[valueAxis]);
-    function makeMarker(data, slice, value, styles) {
+    // 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), {
+            fill: 'currentColor',
+            ...labelAnchor(negative)
+        }),
+        bandSlice: slice
+    };
+    function makeMarker(data, slice, value, styles, label) {
         if (data.length === 0)
             return null;
         const from = (geometry.stacked ? bottom : geometry.baseline);
@@ -170,18 +117,18 @@ export function buildMarks(state, ctx) {
             isHorizontal,
             data,
             styles,
+            hover: 'style',
+            ...(label ? { label } : {}),
             ...(isHorizontal
                 ? { y: category, x1: from, x2: value }
                 : { x: category, y1: from, y2: value })
         };
         if (slice) {
             if (isHorizontal) {
-                marker.insetTop = slice.start;
-                marker.insetBottom = slice.end;
+                marker.styles = { ...marker.styles, insetTop: slice.start, insetBottom: slice.end };
             }
             else {
-                marker.insetLeft = slice.start;
-                marker.insetRight = slice.end;
+                marker.styles = { ...marker.styles, insetLeft: slice.start, insetRight: slice.end };
             }
         }
         return marker;
@@ -192,10 +139,10 @@ export function buildMarks(state, ctx) {
         const name = group.series.name;
         const slice = geometry.sliceOf(name);
         const defaultColor = colorForSeries(name);
-        const disabledFill = ctx.interaction?.fillFor(name);
+        const disabledFill = env.interaction?.fillFor(name);
         for (const seg of group.visualSegments) {
             const fill = disabledFill?.fill ?? seg.styles.fill ?? defaultColor;
-            const marker = makeMarker(seg.data.filter(isReal), slice, valueOf(group.series[valueAxis]), {
+            const styles = {
                 // An outline asked for without a color is the fill's.
                 ...(seg.styles.strokeWidth !== undefined ? { stroke: fill } : {}),
                 ...seg.styles,
@@ -205,9 +152,21 @@ export function buildMarks(state, ctx) {
                 ...(disabledFill?.fillOpacity !== undefined
                     ? { strokeOpacity: disabledFill.fillOpacity }
                     : {})
-            });
-            if (marker)
-                segmentMarkers.push(marker);
+            };
+            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 id = seriesIdOf(group.series);
         const fills = [...(gapFillMaps.get(id)?.values() ?? [])];

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

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

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

@@ -11,13 +11,13 @@ export function buildBulletDefaults() {
         ...bar,
         scales: {
             ...bar.scales,
-            defaults: (_state, ctx) => ({
+            defaults: (_state, env) => ({
                 category: {
-                    paddingInner: ctx.cfg.bullet.paddingInner,
-                    paddingOuter: ctx.cfg.bullet.paddingOuter
+                    paddingInner: env.cfg.bullet.paddingInner,
+                    paddingOuter: env.cfg.bullet.paddingOuter
                 }
             }),
-            fit: (state, ctx) => fitValueDomain(state, buildReach(state, ctx))
+            fit: (state, env) => fitValueDomain(state, buildReach(state, env))
         },
         markers: { ...bar.markers, marks: buildMarks }
     };

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

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

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

@@ -2,8 +2,8 @@ import { buildMarks as buildBarMarks, buildBarGeometry } from '../bar/markers';
 import { GAP_VALUE } from '../../../phases/transforms/TransformsPhase';
 import { RowNumbers } from '../../utils/RowNumbers';
 /** Each category's target and range bounds, read off the rows the bars draw. */
-function buildMeasures(state, ctx) {
-    const geometry = buildBarGeometry(state, ctx.cfg.bar.seriesPadding);
+function buildMeasures(state, env) {
+    const geometry = buildBarGeometry(state, env.cfg.bar.seriesPadding);
     return (state.processedData?.data ?? [])
         .filter((row) => row[GAP_VALUE] === undefined && geometry.spanOf(row) !== undefined)
         .map((row) => ({
@@ -16,8 +16,8 @@ function buildMeasures(state, ctx) {
     }));
 }
 /** Every value the axis has to reach beyond the bars. */
-export function buildReach(state, ctx) {
-    return buildMeasures(state, ctx).flatMap(({ target, bounds }) => [
+export function buildReach(state, env) {
+    return buildMeasures(state, env).flatMap(({ target, bounds }) => [
         ...(target === undefined ? [] : [target]),
         ...bounds
     ]);
@@ -27,19 +27,19 @@ export function buildReach(state, ctx) {
  * bar plot - thinner, so the ranges show around them - and a tick at each
  * target.
  */
-export function buildMarks(state, ctx) {
-    const configured = ctx.cfg.bullet;
+export function buildMarks(state, env) {
+    const configured = env.cfg.bullet;
     const own = (state.styles ?? {});
     const rangeColors = own.ranges?.colors ?? configured.rangeColors;
     const rangeWidth = own.ranges?.width ?? configured.rangeWidth;
     const target = {
-        color: own.target?.color ?? configured.targetColor ?? ctx.cfg.axis.color,
+        color: own.target?.color ?? configured.targetColor ?? 'currentColor',
         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);
+    const baseline = buildBarGeometry(state, env.cfg.bar.seriesPadding).baseline;
+    const measures = buildMeasures(state, env);
     // Each bound is a band from the baseline, drawn widest first so the narrower ones lie over it.
     const rows = measures.flatMap(({ category, bounds }) => bounds
         .map((bound, rank) => ({
@@ -59,12 +59,11 @@ export function buildMarks(state, ctx) {
                 data: rows,
                 value: 'category',
                 ...(isHorizontal ? { x1: 'from', x2: 'to' } : { y1: 'from', y2: 'to' }),
-                stroke: 'stroke',
-                styles: { strokeWidth: rangeWidth }
+                styles: { stroke: 'stroke', 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'
+    const bars = buildBarMarks(state, env).map((marker) => marker.type === 'bar' && marker.role === 'segment'
         ? {
             ...marker,
             thickness: own.bar?.thickness ?? configured.barThickness

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

@@ -1,5 +1,5 @@
 import { ValueLabels } from '../../../layout/styles/ValueLabels';
-import type { ClevelandPlotState, ClevelandPlotCtx, ClevelandOptions } from '../../../types/plots/ranking/cleveland/state';
+import type { ClevelandPlotState, ClevelandPlotEnv, ClevelandOptions } from '../../../types/plots/ranking/cleveland/state';
 import type { AxisBasedMarkersConfig, TextMarkerConfig } from '../../../types/markers/common';
 import type { EdgeBox } from '../../../types/layout/box';
 /**
@@ -16,14 +16,14 @@ export declare class ClevelandMarkers {
     /** Forgets what was warned about; for tests. */
     static resetWarnings(): void;
     /** The plot's connectors, then its dots, which draw on top of them. */
-    marks: <TData extends Record<string, unknown>>(state: ClevelandPlotState<TData>, ctx: ClevelandPlotCtx) => AxisBasedMarkersConfig[];
+    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>, ctx: ClevelandPlotCtx) => TextMarkerConfig[];
+    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