@fundar/data-chart-telling 1.16.0 → 1.17.0

package/dist/plots/distribution/histogram/markers.js

@@ -1,66 +1,8 @@
 import { ProcessedPositions } from '../../../phases/transforms/ProcessedPositions';
-import { SERIES_KEY } from '../../../phases/transforms/TransformsPhase';
+import { ValueLabels } from '../../../layout/styles/ValueLabels';
 import { Transforms } from '../../../phases/transforms/Transforms';
 import { resolveAccessor } from '../../../utils/accessors';
 import { PlotAxes } from '../../../phases/data/PlotAxes';
-/**
- * HistogramPlot's `styles.values` as one `'text'` marker over its non-empty
- * bins (a `filter` on the count), each labelled with its count by `format`.
- * `anchor` places each label along its bar: past its top (`'outside'`), just
- * inside it (`'start'`), at its base (`'end'`), or centred (`'middle'`) -
- * upward, or rightward on a horizontal histogram.
- */
-export function buildValueLabels(labels, state, ctx) {
-    const { processedData: processed } = state;
-    if (!processed?.data.length)
-        return [];
-    const { font, anchor, format } = labels;
-    const nameOf = (d) => String(d[SERIES_KEY]);
-    const value = PlotAxes.valueOf(state);
-    const binned = PlotAxes.other(value);
-    const horizontal = value === 'x';
-    const position = ProcessedPositions.of(processed, value);
-    const read = (channel) => channel === undefined
-        ? undefined
-        : resolveAccessor(channel);
-    const topOf = (d) => Number(position[value](d));
-    const bottomOf = read(processed.channels[`${value}1`]) ?? (() => 0);
-    const countRead = read(processed.channels[value]);
-    const countOf = (d) => countRead ? Number(countRead(d)) : topOf(d) - Number(bottomOf(d));
-    const along = anchor === 'end'
-        ? bottomOf
-        : anchor === 'middle'
-            ? (d) => (topOf(d) + Number(bottomOf(d))) / 2
-            : topOf;
-    // Outward from the bar's top: past it, just inside it, or out from its base.
-    const outward = anchor === 'outside' ? 6 : anchor === 'start' ? -4 : anchor === 'end' ? 4 : 0;
-    const outwardAnchor = anchor === 'start' ? 'end' : anchor === 'middle' ? 'middle' : 'start';
-    const marker = Transforms.resolve({
-        type: 'text',
-        data: processed.data,
-        [binned]: position[binned],
-        [value]: along,
-        transforms: [{ type: 'filter', filter: (d) => countOf(d) > 0 }],
-        text: (d) => format(countOf(d), nameOf(d), d),
-        styles: {
-            ...font,
-            fill: font?.fill ?? ctx.cfg.axis.color,
-            fontSize: font?.fontSize ?? 12,
-            dx: font?.dx ?? (horizontal ? outward : 0),
-            dy: font?.dy ?? (horizontal ? 0 : -outward),
-            textAnchor: labels.textAnchor ?? (horizontal ? outwardAnchor : 'middle'),
-            lineAnchor: font?.lineAnchor ??
-                (horizontal
-                    ? 'middle'
-                    : anchor === 'start'
-                        ? 'top'
-                        : anchor === 'middle'
-                            ? 'middle'
-                            : 'bottom')
-        }
-    }, processed.data);
-    return marker.data?.length ? [marker] : [];
-}
 /**
  * HistogramPlot's "markers" phase: one `rect` per visual segment of each
  * series, drawing that segment's bins, dimmed with its series. The markers
@@ -70,6 +12,21 @@ export function buildValueLabels(labels, state, ctx) {
 export function buildMarks(state, ctx) {
     const { channels, options, transforms } = state.processedData;
     const fillOpacity = ctx.cfg.histogram.fillOpacity;
+    // Each bin writes its own count, along its bar: past its top (`'outside'`), against an edge, at its tip or its
+    // base - upward, or rightward on a horizontal histogram. A bin with nothing in it writes nothing.
+    const labels = state.valueLabels?.show ? state.valueLabels : undefined;
+    const value = PlotAxes.valueOf(state);
+    const position = ProcessedPositions.of(state.processedData, value);
+    const read = (channel) => channel === undefined
+        ? undefined
+        : resolveAccessor(channel);
+    const bottomOf = read(channels[`${value}1`]) ?? (() => 0);
+    const countRead = read(channels[value]);
+    const countOf = (d) => countRead ? Number(countRead(d)) : Number(position[value](d)) - Number(bottomOf(d));
+    const labelFor = (name) => labels?.shapeLabel(ctx, (d) => (countOf(d) > 0 ? labels.format(countOf(d), name, d) : ''), {
+        fill: 'currentColor',
+        ...ValueLabels.boxAnchor(labels.anchor, { isHorizontal: value === 'x' })
+    });
     const rects = (state.processedGroups ?? []).flatMap((group) => {
         const disabled = ctx.interaction?.fillFor(group.series.name);
         // A stroke the segment sets is not a reason to lose the series' fill, as the marker would take it for the color.
@@ -78,6 +35,7 @@ export function buildMarks(state, ctx) {
             type: 'rect',
             series: group.series.name,
             data: seg.data,
+            ...(labels ? { label: labelFor(group.series.name) } : {}),
             ...channels,
             ...options,
             styles: {

package/dist/plots/distribution/pyramid/defaults.js

@@ -1,6 +1,6 @@
 import { ProcessedPositions } from '../../../phases/transforms/ProcessedPositions';
 import { PlotAxes } from '../../../phases/data/PlotAxes';
-import { buildMarks, buildValueLabels } from './markers';
+import { buildMarks } from './markers';
 import { ValueLabels } from '../../../layout/styles/ValueLabels';
 import { seriesIdOf } from '../../../utils/grouping';
 import { isGapValue } from '../../utils/gaps';
@@ -48,7 +48,7 @@ export function buildPyramidDefaults() {
             values: {
                 // A label past its bar's end reaches out on its own side, the longest bar's to the edge.
                 reach: (labels, state) => {
-                    if (labels.anchor === 'middle' || labels.anchor === 'end')
+                    if (labels.anchor !== 'outside')
                         return [];
                     const axis = PlotAxes.valueOf(state);
                     const isHorizontal = state.axes?.isHorizontal ?? true;
@@ -63,7 +63,7 @@ export function buildPyramidDefaults() {
                 }
             }
         },
-        markers: { marks: buildMarks, valueLabels: buildValueLabels },
+        markers: { marks: buildMarks },
         hover: {
             // A bar sits at its signed magnitude - below or left of the baseline on the first
             // side - and its category, and reads as its magnitude.

package/dist/plots/distribution/pyramid/markers.d.ts

@@ -1,15 +1,5 @@
-import type { TextMarkerConfig } from '../../../types/markers/common';
 import type { PyramidPlotState, PyramidPlotCtx } from '../../../types/plots/distribution/pyramid/state';
-import type { ValueLabels } from '../../../layout/styles/ValueLabels';
 import type { AxisBasedMarkersConfig } from '../../../types/markers/common';
-/**
- * PyramidPlot's `styles.values` as one `'text'` marker per series, over the
- * same processed rows its bars draw (gap rows never get a label), mirrored to
- * its own side of the shared zero baseline. `anchor` places each label along
- * its bar: past its end (`'outside'`/`'start'`), at the baseline (`'end'`),
- * or centred (`'middle'`). On a vertical pyramid the sides run down and up.
- */
-export declare function buildValueLabels<TData extends Record<string, unknown>>(labels: ValueLabels, state: PyramidPlotState<TData>, ctx: PyramidPlotCtx): TextMarkerConfig[];
 /**
  * PyramidPlot's "markers" phase: one `role: 'segment'` bar per visual
  * segment, along the category axis the "data" phase read (horizontal bars for

package/dist/plots/distribution/pyramid/markers.js

@@ -1,5 +1,5 @@
+import { ValueLabels } from '../../../layout/styles/ValueLabels';
 import { resolveAccessor } from '../../../utils/accessors';
-import { SERIES_ID_KEY } from '../../../phases/transforms/TransformsPhase';
 import { seriesIdOf } from '../../../utils/grouping';
 import { PlotAxes } from '../../../phases/data/PlotAxes';
 import { getConfiguration } from '../../../configuration/config.svelte';
@@ -8,69 +8,6 @@ const GAP_KINDS = ['start', 'middle', 'end'];
 function signFor(s, magnitude) {
     return s.side === 'left' ? -magnitude : magnitude;
 }
-/**
- * PyramidPlot's `styles.values` as one `'text'` marker per series, over the
- * same processed rows its bars draw (gap rows never get a label), mirrored to
- * its own side of the shared zero baseline. `anchor` places each label along
- * its bar: past its end (`'outside'`/`'start'`), at the baseline (`'end'`),
- * or centred (`'middle'`). On a vertical pyramid the sides run down and up.
- */
-export function buildValueLabels(labels, state, ctx) {
-    const { processedData } = state;
-    if (!processedData)
-        return [];
-    const { font, anchor, format } = labels;
-    const categoryAxis = PlotAxes.categoryOf(state);
-    const valueAxis = PlotAxes.valueOf(state);
-    const isHorizontal = state.axes?.isHorizontal ?? true;
-    return (state.processedGroups ?? []).flatMap(({ series }) => {
-        const id = seriesIdOf(series);
-        const side = state.resolvedSeries.find((s) => seriesIdOf(s) === id).side;
-        const isLeft = side === 'left';
-        const getMagnitude = resolveAccessor(series[valueAxis]);
-        const magnitude = (d) => Math.abs(Number(getMagnitude(d)));
-        const signed = (d) => (isLeft ? -magnitude(d) : magnitude(d));
-        const data = processedData.data.filter((d) => d[SERIES_ID_KEY] === id && !isGapValue(getMagnitude(d)));
-        if (data.length === 0)
-            return [];
-        const outward = isLeft ? -1 : 1;
-        const at = anchor === 'middle' ? (d) => signed(d) / 2 : anchor === 'end' ? 0 : signed;
-        const shift = anchor === 'middle' ? 0 : outward * (anchor === 'end' ? 4 : 6);
-        // Away from the baseline: left/right on a horizontal pyramid, down/up on a vertical one.
-        const awayAnchor = isHorizontal
-            ? anchor === 'middle'
-                ? 'middle'
-                : isLeft
-                    ? 'end'
-                    : 'start'
-            : 'middle';
-        const awayLine = isHorizontal
-            ? 'middle'
-            : anchor === 'middle'
-                ? 'middle'
-                : isLeft
-                    ? 'top'
-                    : 'bottom';
-        return [
-            {
-                type: 'text',
-                data,
-                [valueAxis]: at,
-                [categoryAxis]: series[categoryAxis],
-                text: (d) => format(magnitude(d), series.name, d),
-                styles: {
-                    ...font,
-                    fill: font?.fill ?? ctx.cfg.axis.color,
-                    fontSize: font?.fontSize ?? 12,
-                    dx: font?.dx ?? (isHorizontal ? shift : 0),
-                    dy: font?.dy ?? (isHorizontal ? 0 : -shift),
-                    textAnchor: labels.textAnchor ?? awayAnchor,
-                    lineAnchor: font?.lineAnchor ?? awayLine
-                }
-            }
-        ];
-    });
-}
 /**
  * PyramidPlot's "markers" phase: one `role: 'segment'` bar per visual
  * segment, along the category axis the "data" phase read (horizontal bars for
@@ -85,6 +22,12 @@ export function buildMarks(state, ctx) {
     const categoryAxis = PlotAxes.categoryOf(state);
     const valueAxis = PlotAxes.valueOf(state);
     const isHorizontal = state.axes?.isHorizontal ?? true;
+    const labels = state.valueLabels?.show ? state.valueLabels : undefined;
+    /**
+     * Where a series' labels sit on its bars, which run out from the shared baseline to its own side: left and right
+     * of it on a horizontal pyramid, down and up on a vertical one.
+     */
+    const anchorOf = (side) => ValueLabels.boxAnchor(labels?.anchor ?? 'outside', { isHorizontal, negative: side === 'left' });
     /** One bar's own channels: its category, and its span from the baseline to its signed value. */
     const span = (category, to) => ({
         isHorizontal,
@@ -118,6 +61,12 @@ export function buildMarks(state, ctx) {
                 role: 'segment',
                 data: realData,
                 ...span(processedCategory, signed),
+                // Each bar writes its own magnitude, on its side of the baseline.
+                ...(labels
+                    ? {
+                        label: labels.shapeLabel(ctx, (d) => labels.format(Math.abs(Number(getMagnitude(d))), group.series.name, d), { fill: 'currentColor', ...anchorOf(group.series.side) })
+                    }
+                    : {}),
                 styles: {
                     // An outline asked for without a color is the fill's.
                     ...(seg.styles.strokeWidth !== undefined

package/dist/plots/distribution/violin/markers.js

@@ -29,7 +29,7 @@ export function buildMarks(state, ctx) {
         : typeof styles?.box === 'number'
             ? styles.box
             : cfg.violin.boxWidth;
-    const ink = cfg.axis.color;
+    const ink = 'currentColor';
     const violins = groups.flatMap((group, index) => {
         const name = group.series.name;
         const disabled = ctx.interaction?.fillFor(name);

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

@@ -1,3 +1,4 @@
+import { MarkerStyles } from '../../../../phases/markers/MarkerStyles';
 import { LegendState } from '../../../../layout/legend/LegendState.svelte';
 import { GeoSegments } from '../GeoSegments';
 import { MarkerChannels } from '../../../../markers/utils/MarkerChannels';
@@ -58,7 +59,7 @@ export function buildMarkers(state, ctx) {
         data: group.data,
         fill: (d) => group.style.fill ?? resolveBaseFill(d),
         fillOpacity: group.style.fillOpacity ?? group.opacity ?? fillOpacity ?? 1,
-        stroke: group.style.stroke ?? stroke ?? cfg.axis.color,
+        stroke: group.style.stroke ?? stroke ?? 'currentColor',
         strokeWidth: group.style.strokeWidth ?? strokeWidth ?? 0.5,
         hover: hoverable,
         onclick: onFeatureClick ? (e, d) => onFeatureClick(d, e) : undefined
@@ -66,6 +67,6 @@ export function buildMarkers(state, ctx) {
     const behindMarkers = authoredMarkers.filter(isBehindMarker);
     const frontMarkers = authoredMarkers.filter((m) => !isBehindMarker(m) && m.type !== 'geo-hover');
     const hoverMarker = authoredMarkers.find((m) => m.type === 'geo-hover');
-    const markers = MarkerChannels.inheritAll([...behindMarkers, ...featureMarkers, ...frontMarkers, ...(hoverMarker ? [hoverMarker] : [])], state.scales);
+    const markers = MarkerStyles.resolveAll(MarkerChannels.inheritAll([...behindMarkers, ...featureMarkers, ...frontMarkers, ...(hoverMarker ? [hoverMarker] : [])], state.scales), { cfg: ctx.cfg });
     return { ...state, markers, styleGroups };
 }

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

@@ -0,0 +1,47 @@
+<script lang="ts" generics="TData extends Record<string, unknown>">
+	import Plot from '../../../layout/plot/Plot.svelte';
+	import { buildTreemapDefaults } from './defaults';
+	import type {
+		TreemapPlotProps,
+		TreemapPlotCoreProps
+	} from '../../../types/plots/part-of-a-whole/treemap/props';
+
+	/**
+	 * A part-to-whole of rectangles: each row is a tile whose area is its `value`, nested by `grouping` - a field,
+	 * or the fields of several levels joined by dots (`'sector.branch'`), outermost first, whose last names the
+	 * tile. The outermost level colors the tiles and is what the legend lists; each tile is labelled with its name
+	 * and its share of the whole, cut short or left out where it does not fit (`styles.values`). Optional chrome
+	 * (`title`, `subtitle`, `caption`, `header`, `footer`, `legend`) frames it; `timeline` and `facet` slice its
+	 * `data` rows.
+	 */
+	let {
+		title,
+		subtitle,
+		caption,
+		header,
+		footer,
+		legend,
+		order,
+		timeline,
+		facet,
+		tooltip,
+		margins = $bindable(),
+		...core
+	}: TreemapPlotProps<TData> = $props();
+</script>
+
+<Plot
+	core={core as TreemapPlotCoreProps<TData>}
+	defaults={buildTreemapDefaults}
+	bind:margins
+	{title}
+	{subtitle}
+	{caption}
+	{header}
+	{footer}
+	{legend}
+	{order}
+	{timeline}
+	{facet}
+	{tooltip}
+/>

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

@@ -0,0 +1,26 @@
+import Plot from '../../../layout/plot/Plot.svelte';
+import type { TreemapPlotProps } from '../../../types/plots/part-of-a-whole/treemap/props';
+declare function $$render<TData extends Record<string, unknown>>(): {
+    props: TreemapPlotProps<TData>;
+    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/part-of-a-whole/treemap/defaults.d.ts

@@ -0,0 +1,10 @@
+import type { AxisPlotDefaults } from '../../../types/phases';
+import type { TreemapPlotState, TreemapPlotCtx } from '../../../types/plots/part-of-a-whole/treemap/state';
+/**
+ * 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 declare function buildTreemapDefaults<TData extends Record<string, unknown>>(): AxisPlotDefaults<TreemapPlotState<TData>, TreemapPlotCtx>;

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

@@ -0,0 +1,167 @@
+import { TREEMAP_ROW } from '../../../phases/transforms/methods/TreemapTransform';
+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 ?? '%' };
+}
+/** A tile's name, path and share (from `0` to `100`), as the transform left them on its row. */
+function tileOf(row) {
+    return {
+        name: String(row[TREEMAP_ROW.name] ?? ''),
+        path: row[TREEMAP_ROW.path] ?? [],
+        share: Number(row[TREEMAP_ROW.share]) * 100
+    };
+}
+/**
+ * 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 } = tileOf(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.
+ */
+function buildMarks(state, ctx) {
+    if (!state.processedData?.data.length)
+        return [];
+    const look = ctx.cfg.treemap;
+    const edges = edgesOf(state);
+    const labels = state.valueLabels?.show ? state.valueLabels : undefined;
+    const number = NumberFormat.of(shareDisplay(state.values), ctx.cfg, SHARE_DECIMALS);
+    const shareText = (row, series) => {
+        const { share } = tileOf(row);
+        return state.values?.format ? state.values.format(share, series, row, number) : number(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, series) => {
+        const shape = labels.shapeLabel(ctx, (row) => `${tileOf(row).name}
+${shareText(row, series)}`, { fontSize: look.fontSize });
+        return {
+            ...shape,
+            styles: { lineHeight: look.lineHeight, ...shape.styles },
+            fit: { padding: look.padding, fallback: (row) => shareText(row, series) }
+        };
+    };
+    return (state.processedGroups ?? []).flatMap((group) => {
+        const series = group.series.name;
+        const dimmed = ctx.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(tileOf(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, series)
+                };
+            });
+        });
+    });
+}
+/**
+ * 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 },
+        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',
+            hitAreas: (state, hover) => hover.points.map(({ row }) => ({
+                type: 'rect',
+                data: [row],
+                ...edgesOf(state),
+                styles: { fill: 'transparent' },
+                hover: hover.active
+            })),
+            format: (state) => {
+                const number = NumberFormat.of(shareDisplay(state.values), getConfiguration(), SHARE_DECIMALS);
+                return ((row) => {
+                    const tile = tileOf(row);
+                    return `${tile.name}: ${number(tile.share)}`;
+                });
+            },
+            label: () => ((row) => tileOf(row).name),
+            context: () => ((row) => ({ share: tileOf(row).share }))
+        }
+    };
+}

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

@@ -1,5 +1,5 @@
 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';
@@ -90,7 +90,7 @@ export function buildBarDefaults() {
                 }
             }
         },
-        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.

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

@@ -1,10 +1,9 @@
-import type { BarMarkerConfig, TextMarkerConfig } from '../../../types/markers/common';
+import type { BarMarkerConfig } 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
@@ -27,15 +26,6 @@ export declare function buildBarGeometry<TData extends Record<string, unknown>>(
  * 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[];
 /**
  * BarPlot's "markers" phase: visible `role: 'segment'` bars - real data plus
  * gap fills - drawing the rows the "transforms" phase left, prepended onto