@fundar/data-chart-telling 1.16.0 → 1.17.0

package/dist/phases/markers/MarkerStyles.js

@@ -0,0 +1,111 @@
+import { MarkerChannels } from '../../markers/utils/MarkerChannels';
+import { RowStyle } from '../../markers/utils/RowStyle';
+import { CssColor } from '../../utils/color/CssColor';
+/**
+ * A plot's markers with their styles as svelteplot reads them, before any is drawn: a named line style
+ * (`strokeDasharray: 'dashed'`) is the SVG dash pattern it stands for, wherever in a marker's config it is
+ * set - its `styles`, a label's, a part's (a box's whiskers) - and a label inside its shape with no `fill` of its
+ * own is written in the color that reads best on the shape's. A marker component draws what it is given.
+ */
+export class MarkerStyles {
+    /** The SVG dash pattern each named line style stands for; a solid line has none. */
+    static #DASHES = {
+        solid: undefined,
+        dashed: '6 4',
+        dotted: '2 3',
+        dashdot: '6 3 2 3'
+    };
+    /** The style fields that take a dash pattern. */
+    static #DASH_KEYS = new Set(['strokeDasharray', 'dotStrokeDasharray']);
+    /** Fields that hold rows rather than config, which are never walked. */
+    static #ROW_KEYS = new Set(['data', 'features']);
+    /**
+     * Every marker of `markers`, resolved. A marker with nothing to resolve is kept as it is. `rows` are what a
+     * marker with no `data` of its own draws.
+     */
+    static resolveAll(markers, plot = {}) {
+        return markers.map((marker) => MarkerStyles.#contrasted(MarkerStyles.#walk(marker), plot));
+    }
+    /** The marker with its label inside its shape written in the candidate that reads best on each row's color. */
+    static #contrasted(marker, plot) {
+        const { cfg } = plot;
+        if (!cfg || !MarkerStyles.#isPlain(marker))
+            return marker;
+        const label = marker.label;
+        if (!MarkerStyles.#isPlain(label) || label.outside || label.styles?.fill !== undefined) {
+            return marker;
+        }
+        const colorOf = MarkerStyles.#shapeColor(marker, marker.data ?? plot.rows ?? [], cfg);
+        if (!colorOf)
+            return marker;
+        const candidates = cfg.text.label.contrast;
+        const opacityOf = MarkerStyles.#opacity(marker.styles?.fillOpacity);
+        // What the label is read on: the shape's color, blended with the plot's background as far as it is see-through.
+        const fill = (row) => {
+            const color = colorOf(row);
+            if (!color)
+                return undefined;
+            const seen = CssColor.composite(color, opacityOf(row), cfg.background);
+            return CssColor.contrastText(seen, candidates);
+        };
+        return { ...marker, label: { ...label, styles: { ...label.styles, fill } } };
+    }
+    /** The opacity each row's shape is drawn with: a number, the field of the rows a string names, a function of the row. */
+    static #opacity(style) {
+        const read = typeof style === 'function'
+            ? (row) => style(row)
+            : typeof style === 'string'
+                ? (row) => row?.[style]
+                : () => style;
+        return (row) => {
+            const value = Number(read(row) ?? 1);
+            return Number.isFinite(value) ? value : 1;
+        };
+    }
+    /** The color each row's shape is drawn with: the marker's `color` channel, else its `styles.fill`. */
+    static #shapeColor(marker, rows, cfg) {
+        const fill = marker.styles?.fill;
+        return (MarkerChannels.buildFill(rows, marker.color, marker.scales, cfg) ??
+            RowStyle.colorOf(fill, rows) ??
+            (marker.type === 'waffle' ? () => cfg.palette[0] : undefined));
+    }
+    /** A dash pattern for `style`: a named line style's, any other as it is; a function of the row gives each row's. */
+    static #dash(style) {
+        if (typeof style === 'function')
+            return (...args) => MarkerStyles.#pattern(style(...args)) ?? 'none';
+        return MarkerStyles.#pattern(style);
+    }
+    static #pattern(style) {
+        return typeof style === 'string' && style in MarkerStyles.#DASHES
+            ? MarkerStyles.#DASHES[style]
+            : style;
+    }
+    /** `value` with its dash styles resolved: plain objects and arrays walked, copied only where something changes. */
+    static #walk(value) {
+        if (Array.isArray(value)) {
+            const next = value.map((item) => MarkerStyles.#walk(item));
+            return next.some((item, i) => item !== value[i]) ? next : value;
+        }
+        if (!MarkerStyles.#isPlain(value))
+            return value;
+        let copy;
+        for (const [key, own] of Object.entries(value)) {
+            if (MarkerStyles.#ROW_KEYS.has(key))
+                continue;
+            const next = MarkerStyles.#DASH_KEYS.has(key)
+                ? MarkerStyles.#dash(own)
+                : MarkerStyles.#walk(own);
+            if (next === own)
+                continue;
+            copy ??= { ...value };
+            copy[key] = next;
+        }
+        return copy ?? value;
+    }
+    static #isPlain(value) {
+        if (typeof value !== 'object' || value === null)
+            return false;
+        const proto = Object.getPrototypeOf(value);
+        return proto === Object.prototype || proto === null;
+    }
+}

package/dist/phases/markers/MarkersPhase.d.ts

@@ -4,7 +4,7 @@ import type { AxisPlotCtx, AxisPlotState, MarkersStageOptions, PhaseStage } from
  * plot kind's own marks, then what the "statistics" phase left in
  * `state.markers` (the author's markers and the plot's statistics), then its
  * value labels when `styles.values.show` turns them on, each with what every
- * label shares ({@link ValueLabels.hooks}).
+ * label shares ({@link ValueLabels.hooks}), and every style as svelteplot reads it ({@link MarkerStyles}).
  */
 export declare class MarkersPhase<TState extends AxisPlotState<any, any, any, any>, TCtx extends AxisPlotCtx> implements PhaseStage<TState, TCtx> {
     #private;

package/dist/phases/markers/MarkersPhase.js

@@ -1,10 +1,11 @@
 import { MarkerChannels } from '../../markers/utils/MarkerChannels';
+import { MarkerStyles } from './MarkerStyles';
 /**
  * The shared "markers" phase: everything the plot draws, bottom to top - the
  * plot kind's own marks, then what the "statistics" phase left in
  * `state.markers` (the author's markers and the plot's statistics), then its
  * value labels when `styles.values.show` turns them on, each with what every
- * label shares ({@link ValueLabels.hooks}).
+ * label shares ({@link ValueLabels.hooks}), and every style as svelteplot reads it ({@link MarkerStyles}).
  */
 export class MarkersPhase {
     phase = 'markers';
@@ -16,13 +17,14 @@ export class MarkersPhase {
         const options = this.#options;
         const labels = state.valueLabels;
         const valueLabels = labels?.show && options.valueLabels
-            ? options
-                .valueLabels(labels, state, ctx)
-                .map((marker) => ({ ...labels.hooks(ctx), ...marker }))
+            ? options.valueLabels(labels, state, ctx).map((marker) => {
+                const { styles, ...hooks } = labels.hooks(ctx);
+                return { ...hooks, ...marker, styles: { ...styles, ...marker.styles } };
+            })
             : [];
         return {
             ...state,
-            markers: MarkerChannels.inheritPosition(MarkerChannels.inheritAll([...options.marks(state, ctx), ...(state.markers ?? []), ...valueLabels], state.scales), state.processedData)
+            markers: MarkerStyles.resolveAll(MarkerChannels.inheritPosition(MarkerChannels.inheritAll([...options.marks(state, ctx), ...(state.markers ?? []), ...valueLabels], state.scales), state.processedData), { cfg: ctx.cfg, rows: state.processedData?.data })
         };
     };
 }

package/dist/phases/statistics/StatisticsPhase.js

@@ -68,7 +68,7 @@ export class StatisticsPhase {
                 colorFor: colorForSeries
             }),
             ...Statistics.expandMarkers(AuthorMarkers.prepare(positioned, {
-                grouping: inheritGrouping ? state.grouping : undefined,
+                grouping: inheritGrouping ? state.seriesGrouping : undefined,
                 color: inheritGrouping ? state.color : undefined,
                 defaultColor,
                 flat,

package/dist/phases/transforms/Transforms.js

@@ -6,6 +6,7 @@ import { NormalizeTransform } from './methods/NormalizeTransform';
 import { PositionTransform } from './methods/PositionTransform';
 import { OrderTransform } from './methods/OrderTransform';
 import { GroupTransform } from './methods/GroupTransform';
+import { TreemapTransform } from './methods/TreemapTransform';
 /** Each transform type's adapter: its channels, how it runs, and its own fixes. */
 const ADAPTERS = {
     stackX: StackTransform.x,
@@ -47,7 +48,8 @@ const ADAPTERS = {
     groupX: GroupTransform.x,
     groupY: GroupTransform.y,
     groupZ: GroupTransform.z,
-    group: GroupTransform.grid
+    group: GroupTransform.grid,
+    treemap: TreemapTransform.adapter
 };
 /** Runs a marker's or a plot's transforms through svelteplot, one type's adapter at a time. */
 export class Transforms {

package/dist/phases/transforms/TransformsPhase.js

@@ -39,7 +39,12 @@ export class TransformsPhase {
     }
     run = (state, ctx) => {
         const options = this.#options;
-        const series = (state.resolvedSeries ?? []);
+        const visible = (state.resolvedSeries ?? []);
+        // An omitted part of a whole is laid out with the rest, so they keep their places; it is dropped after.
+        const removed = state.removedSeries;
+        const kept = options.keepsOmitted && removed?.mode === 'omit' ? removed.series : [];
+        const series = [...visible, ...kept];
+        const omittedIds = new Set(kept.map(seriesIdOf));
         // A gap `styles.gaps` fills carries its filled value and kind, and reads at that value.
         const fillsOf = (s) => state.gapFillMaps?.get(seriesIdOf(s));
         const data = series.flatMap((s) => s.data.map((row) => ({
@@ -60,13 +65,21 @@ export class TransformsPhase {
             const read = resolveAccessor(own);
             shared[valueAxis] = (row) => row[GAP_VALUE] ?? read(row);
         }
-        const { x, y } = shared;
         const transforms = options.transforms
             ? options.transforms(state, ctx)
             : (state.transforms ?? []);
+        const rescaled = TransformsPhase.#rescaled(state, transforms, shared, valueAxis);
+        if (rescaled)
+            shared[valueAxis] = rescaled;
+        const { x, y } = shared;
         if (!transforms.length) {
             const channels = Object.fromEntries(Object.entries({ x, y }).filter(([, channel]) => channel !== undefined));
-            const processedData = { data, channels, options: {}, transforms };
+            const processedData = {
+                data: data.filter((row) => !omittedIds.has(row[SERIES_ID_KEY])),
+                channels,
+                options: {},
+                transforms
+            };
             return this.#withGroups({ ...state, processedData });
         }
         const out = TransformsPhase.#runByPanel(data, (rows) => Transforms.resolve({ data: rows, x, y, grouping: SERIES_ID_KEY, transforms }, rows));
@@ -82,7 +95,7 @@ export class TransformsPhase {
         }
         // An aggregating transform (bin, group) keeps only its `z`, the series id: put the name back.
         const nameById = new Map(series.map((s) => [seriesIdOf(s), s.name]));
-        const rows = out.data;
+        const rows = out.data.filter((row) => !omittedIds.has(row[SERIES_ID_KEY]));
         for (const row of rows) {
             if (row[SERIES_KEY] === undefined && row[SERIES_ID_KEY] !== undefined) {
                 row[SERIES_KEY] = nameById.get(row[SERIES_ID_KEY]);
@@ -147,6 +160,47 @@ export class TransformsPhase {
             labelSelects: ValueSelection.selectors(select)
         };
     }
+    /**
+     * The value channel of a stack whose legend rescales some of its series: each visible row's value scaled by
+     * how much of its category's total (in its facet panel) those series took, so the visible parts make the
+     * whole the category had. `undefined` for a plot that stacks nothing on its value axis, or rescales nothing.
+     */
+    static #rescaled(state, transforms, shared, valueAxis) {
+        const removed = state.removedSeries;
+        const rescaled = removed?.mode === 'rescale' ? removed.series : [];
+        const stack = valueAxis === 'y' ? 'stackY' : 'stackX';
+        const own = shared[valueAxis];
+        const category = shared[valueAxis === 'y' ? 'x' : 'y'];
+        if (!rescaled.length || own === undefined || category === undefined)
+            return undefined;
+        if (!transforms.some((t) => t.type === stack))
+            return undefined;
+        const value = resolveAccessor(own);
+        const categoryOf = resolveAccessor(category);
+        const keyOf = (row, panel) => JSON.stringify([panel, categoryOf(row)]);
+        const totals = (series) => {
+            const sums = new Map();
+            for (const s of series) {
+                for (const row of s.data) {
+                    const amount = Number(value(row));
+                    if (!Number.isFinite(amount))
+                        continue;
+                    const key = keyOf(row, s.panel);
+                    sums.set(key, (sums.get(key) ?? 0) + amount);
+                }
+            }
+            return sums;
+        };
+        const visible = (state.resolvedSeries ?? []);
+        const shown = totals(visible);
+        const whole = totals([...visible, ...rescaled]);
+        return (row) => {
+            const amount = Number(value(row));
+            const key = keyOf(row, row[PANEL_KEY]);
+            const part = shown.get(key) ?? 0;
+            return part === 0 ? amount : (amount * (whole.get(key) ?? part)) / part;
+        };
+    }
     /** What a gap-filled row carries: its interpolated value and the kind of zone that filled it. */
     static #fillTags(fill) {
         return fill ? { [GAP_VALUE]: fill.value, [GAP_KIND]: fill.kind } : {};

package/dist/phases/transforms/methods/TreemapTransform.d.ts

@@ -0,0 +1,28 @@
+import type { Row, TransformAdapter } from '../../../types/phases/transforms/adapter';
+/** What a treemap leaves on each row it produces, and the channels it reads them back by. */
+export declare const TREEMAP_ROW: {
+    /** The tile's name: the value at its last level. */
+    readonly name: symbol;
+    /** The value at every level of the tile, outermost first. */
+    readonly path: symbol;
+    /** The tile's summed `value`. */
+    readonly value: symbol;
+    /** The tile's part of the whole, from `0` to `1`. */
+    readonly share: symbol;
+    readonly x1: symbol;
+    readonly x2: symbol;
+    readonly y1: symbol;
+    readonly y2: symbol;
+    readonly x: symbol;
+    readonly y: symbol;
+};
+/** A treemap as a transform: the layout of d3-hierarchy, in the shape every other transform returns. */
+export declare class TreemapTransform {
+    static readonly adapter: TransformAdapter;
+    /**
+     * A row per tile of `channels.data`, biggest first within its group, placed in the unit square. A row whose
+     * value is not a positive number has no area, so it makes no tile. The layout is `aspect` wide while it is
+     * computed and scaled back after, so its tiles are shaped after the box they fill.
+     */
+    static layout(channels: Row, options: Row): Row;
+}

package/dist/phases/transforms/methods/TreemapTransform.js

@@ -0,0 +1,119 @@
+import { hierarchy, treemap, treemapBinary, treemapDice, treemapSlice, treemapSliceDice, treemapSquarify } from 'd3-hierarchy';
+import { resolveAccessor } from '../../../utils/accessors';
+import { TREEMAP_CHANNEL_KEYS } from '../../../types/transforms/treemap';
+const TILES = {
+    squarify: treemapSquarify,
+    binary: treemapBinary,
+    slice: treemapSlice,
+    dice: treemapDice,
+    sliceDice: treemapSliceDice
+};
+/** What a treemap leaves on each row it produces, and the channels it reads them back by. */
+export const TREEMAP_ROW = {
+    /** The tile's name: the value at its last level. */
+    name: Symbol('treemap.name'),
+    /** The value at every level of the tile, outermost first. */
+    path: Symbol('treemap.path'),
+    /** The tile's summed `value`. */
+    value: Symbol('treemap.value'),
+    /** The tile's part of the whole, from `0` to `1`. */
+    share: Symbol('treemap.share'),
+    x1: Symbol('treemap.x1'),
+    x2: Symbol('treemap.x2'),
+    y1: Symbol('treemap.y1'),
+    y2: Symbol('treemap.y2'),
+    x: Symbol('treemap.x'),
+    y: Symbol('treemap.y')
+};
+const read = (channel) => typeof channel === 'function'
+    ? channel
+    : (row) => row[channel];
+/** A treemap as a transform: the layout of d3-hierarchy, in the shape every other transform returns. */
+export class TreemapTransform {
+    static adapter = {
+        channelKeys: TREEMAP_CHANNEL_KEYS,
+        run: (channels, options) => TreemapTransform.layout(channels, options)
+    };
+    /**
+     * A row per tile of `channels.data`, biggest first within its group, placed in the unit square. A row whose
+     * value is not a positive number has no area, so it makes no tile. The layout is `aspect` wide while it is
+     * computed and scaled back after, so its tiles are shaped after the box they fill.
+     */
+    static layout(channels, options) {
+        const { data, value, ...rest } = channels;
+        if (!data)
+            throw new Error('treemap: missing data');
+        if (value === undefined)
+            throw new Error('treemap: missing value channel');
+        const size = read(value);
+        const levels = (options.levels ?? []).map((level) => resolveAccessor(level));
+        const tile = options.tile ?? 'squarify';
+        const aspect = Number(options.aspect);
+        const width = aspect > 0 && Number.isFinite(aspect) ? aspect : 1;
+        const root = { name: '', path: [], rows: [], children: [] };
+        const nodes = new Map();
+        const nodeOf = (path) => {
+            let parent = root;
+            for (let depth = 1; depth <= path.length; depth++) {
+                const key = JSON.stringify(path.slice(0, depth));
+                let node = nodes.get(key);
+                if (!node) {
+                    node = { name: path[depth - 1], path: path.slice(0, depth), rows: [], children: [] };
+                    nodes.set(key, node);
+                    parent.children.push(node);
+                }
+                parent = node;
+            }
+            return parent;
+        };
+        for (const row of data) {
+            const area = Number(size(row));
+            if (!(Number.isFinite(area) && area > 0))
+                continue;
+            const leaf = nodeOf(levels.map((level) => String(level(row))));
+            leaf.rows.push(row);
+            leaf.value = (leaf.value ?? 0) + area;
+        }
+        const tiles = [];
+        if (root.children.length > 0 || root.value !== undefined) {
+            const tree = hierarchy(root, (node) => (node.children?.length ? node.children : null))
+                .sum((node) => node.value ?? 0)
+                .sort((a, b) => (b.value ?? 0) - (a.value ?? 0));
+            const total = tree.value ?? 0;
+            treemap().size([width, 1]).tile(TILES[tile]).round(false)(tree);
+            for (const leaf of tree.leaves()) {
+                const at = leaf;
+                const { rows, path, name } = leaf.data;
+                const sum = leaf.value ?? 0;
+                const first = rows[0];
+                const x1 = at.x0 / width;
+                const x2 = at.x1 / width;
+                tiles.push({
+                    ...first,
+                    // A string `value` names the field the tile's sum reads back from.
+                    ...(typeof value === 'string' ? { [value]: sum } : {}),
+                    [TREEMAP_ROW.name]: name,
+                    [TREEMAP_ROW.path]: path,
+                    [TREEMAP_ROW.value]: sum,
+                    [TREEMAP_ROW.share]: total > 0 ? sum / total : 0,
+                    [TREEMAP_ROW.x1]: x1,
+                    [TREEMAP_ROW.x2]: x2,
+                    [TREEMAP_ROW.y1]: at.y0,
+                    [TREEMAP_ROW.y2]: at.y1,
+                    [TREEMAP_ROW.x]: (x1 + x2) / 2,
+                    [TREEMAP_ROW.y]: (at.y0 + at.y1) / 2
+                });
+            }
+        }
+        return {
+            ...rest,
+            data: tiles,
+            x: TREEMAP_ROW.x,
+            x1: TREEMAP_ROW.x1,
+            x2: TREEMAP_ROW.x2,
+            y: TREEMAP_ROW.y,
+            y1: TREEMAP_ROW.y1,
+            y2: TREEMAP_ROW.y2
+        };
+    }
+}

package/dist/plots/correlation/heatmap/defaults.js

@@ -1,7 +1,7 @@
 import { ColorRamp } from '../../../utils/color';
 import { OpacityScale } from '../../../utils/OpacityScale';
 import { ContinuousDomain } from '../../../utils/ContinuousDomain';
-import { buildMarks, buildValueLabels } from './markers';
+import { buildMarks } from './markers';
 /**
  * HeatmapPlot's own "scales" output, over the band axes the shared phase laid
  * out: the color domain over every cell's value (when `color` is set), and each
@@ -76,7 +76,7 @@ export function buildHeatmapDefaults() {
             extend: extendWithColorScales
         },
         styles: { values: { show: true } },
-        markers: { marks: buildMarks, valueLabels: buildValueLabels },
+        markers: { marks: buildMarks },
         hover: {
             // A hovered cell reads as its formatted value.
             label: (state) => {

package/dist/plots/correlation/heatmap/markers.d.ts

@@ -1,13 +1,5 @@
-import type { TextMarkerConfig } from '../../../types/markers/common';
 import type { HeatmapPlotState, HeatmapPlotCtx } from '../../../types/plots/correlation/heatmap/state';
-import type { ValueLabels } from '../../../layout/styles/ValueLabels';
 import type { AxisBasedMarkersConfig } from '../../../types/markers/common';
-/**
- * HeatmapPlot's `styles.values` as one `'text'` marker over the same cells
- * the plot draws, each labelled with its own value and centred on it. Shown
- * by default.
- */
-export declare function buildValueLabels<TData extends Record<string, unknown>>(labels: ValueLabels, state: HeatmapPlotState<TData>, ctx: HeatmapPlotCtx): TextMarkerConfig[];
 /**
  * HeatmapPlot's "markers" phase: one `'cell'` marker per resolved-style
  * bucket - svelteplot's opacity/numeric scale machinery requires

package/dist/plots/correlation/heatmap/markers.js

@@ -8,38 +8,6 @@ function readChannel(channel) {
     return resolveAccessor(channel);
 }
 const OPACITY_STEPS = 32;
-/**
- * HeatmapPlot's `styles.values` as one `'text'` marker over the same cells
- * the plot draws, each labelled with its own value and centred on it. Shown
- * by default.
- */
-export function buildValueLabels(labels, state, ctx) {
-    const { processedData } = state;
-    if (!processedData?.data.length)
-        return [];
-    const { font, format } = labels;
-    const getColor = state.channels.color.accessor;
-    return [
-        {
-            type: 'text',
-            data: processedData.data,
-            // Read like the cells read them, so the labels add no axis title the cells don't.
-            x: readChannel(processedData.channels.x),
-            y: readChannel(processedData.channels.y),
-            text: (d) => format(Number(getColor(d)), ''),
-            styles: {
-                ...font,
-                fill: font?.fill ?? ctx.cfg.continuous.labelColor,
-                fontSize: font?.fontSize ?? 12,
-                fontWeight: font?.fontWeight ?? 600,
-                dx: font?.dx ?? 0,
-                dy: font?.dy ?? 0,
-                textAnchor: labels.textAnchor ?? 'middle',
-                lineAnchor: font?.lineAnchor ?? 'middle'
-            }
-        }
-    ];
-}
 /**
  * HeatmapPlot's "markers" phase: one `'cell'` marker per resolved-style
  * bucket - svelteplot's opacity/numeric scale machinery requires
@@ -49,6 +17,7 @@ export function buildValueLabels(labels, state, ctx) {
 export function buildMarks(state, ctx) {
     const { segments, channels, resolveColor, resolveOpacity } = state;
     const { range } = ctx;
+    const labels = state.valueLabels?.show ? state.valueLabels : undefined;
     const getColor = channels.color.accessor;
     // The cells are the rows the "transforms" phase left, placed by its channels.
     const processed = state.processedData;
@@ -131,16 +100,20 @@ export function buildMarks(state, ctx) {
         data: group.data,
         x: getX,
         y: getY,
-        fill: (d) => group.styles.fill ?? resolveColor(d),
         styles: {
+            fill: (d) => group.styles.fill ?? resolveColor(d),
             fillOpacity: group.styles.fillOpacity ?? group.opacity ?? 1,
             stroke: group.styles.stroke,
             strokeWidth: group.styles.strokeWidth ?? 0,
             strokeOpacity: group.styles.strokeOpacity,
             strokeDasharray: group.styles.strokeDasharray,
-            borderRadius: group.styles.borderRadius
+            borderRadius: group.styles.borderRadius,
+            inset: 0.5
         },
-        inset: 0.5
+        // Each cell writes its own value, in the middle of it.
+        label: labels?.shapeLabel(ctx, (d) => labels.format(Number(getColor(d)), ''), {
+            fontWeight: 600
+        })
     }));
     return markers;
 }

package/dist/plots/correlation/scatter/markers.d.ts

@@ -8,7 +8,7 @@ import type { AxisBasedMarkersConfig } from '../../../types/markers/common';
  * sits beside its point and flips to the other side where its text would
  * cross the plot's edge (`edgeAware`).
  */
-export declare function buildValueLabels<TData extends Record<string, unknown>>(labels: ValueLabels, state: ScatterPlotState<TData>, ctx: ScatterPlotCtx): TextMarkerConfig[];
+export declare function buildValueLabels<TData extends Record<string, unknown>>(labels: ValueLabels, state: ScatterPlotState<TData>): TextMarkerConfig[];
 /**
  * ScatterPlot's "markers" phase: one `'dot'` marker per visual segment of the
  * rows the "transforms" phase left, in their own order, so a reordering

package/dist/plots/correlation/scatter/markers.js

@@ -7,7 +7,7 @@ import { ValueLabels } from '../../../layout/styles/ValueLabels';
  * sits beside its point and flips to the other side where its text would
  * cross the plot's edge (`edgeAware`).
  */
-export function buildValueLabels(labels, state, ctx) {
+export function buildValueLabels(labels, state) {
     const { processedData } = state;
     if (!processedData?.data.length)
         return [];
@@ -24,7 +24,7 @@ export function buildValueLabels(labels, state, ctx) {
             text: (d) => format(Number(valueOf(d)), nameOf(d), d),
             styles: {
                 ...font,
-                fill: font?.fill ?? ctx.cfg.axis.color,
+                fill: font?.fill ?? 'currentColor',
                 fontSize: font?.fontSize ?? 11,
                 fontWeight: font?.fontWeight ?? 500,
                 dx: font?.dx ?? 8,

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

@@ -1,4 +1,4 @@
-import { buildMarks, buildValueLabels } from './markers';
+import { buildMarks } from './markers';
 import { SERIES_KEY } from '../../../phases/transforms/TransformsPhase';
 import { resolveAccessor } from '../../../utils/accessors';
 import { PlotAxes } from '../../../phases/data/PlotAxes';
@@ -63,7 +63,7 @@ export function buildHistogramDefaults() {
                 }
             }
         },
-        markers: { marks: buildMarks, valueLabels: buildValueLabels },
+        markers: { marks: buildMarks },
         hover: {
             // A hovered bin is labelled with its count, and reads as its row plus its count,
             // the edges it spans and its series.

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

@@ -1,14 +1,5 @@
 import type { HistogramPlotState, HistogramPlotCtx } from '../../../types/plots/distribution/histogram/state';
-import type { AxisBasedMarkersConfig, TextMarkerConfig } from '../../../types/markers/common';
-import type { ValueLabels } from '../../../layout/styles/ValueLabels';
-/**
- * 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 declare function buildValueLabels<TData extends Record<string, unknown>>(labels: ValueLabels, state: HistogramPlotState<TData>, ctx: HistogramPlotCtx): TextMarkerConfig[];
+import type { AxisBasedMarkersConfig } from '../../../types/markers/common';
 /**
  * HistogramPlot's "markers" phase: one `rect` per visual segment of each
  * series, drawing that segment's bins, dimmed with its series. The markers