@fundar/data-chart-telling 1.16.0 → 1.18.0

package/dist/phases/mapping/MappingPhase.js

@@ -13,7 +13,7 @@ export class MappingPhase {
     constructor(options = {}) {
         this.#options = options;
     }
-    run = (state, ctx) => {
+    run = (state, env) => {
         const first = state.resolvedSeries?.[0];
         const identity = { accessor: (d) => d };
         const size = (value) => typeof value === 'number' ? value : MappingPhase.#channel(value);
@@ -25,10 +25,11 @@ export class MappingPhase {
             opacity: MappingPhase.#channel(state.opacity),
             symbol: MappingPhase.#channel(state.symbol),
             r: size(state.r),
-            length: size(state.length)
+            length: size(state.length),
+            value: MappingPhase.#channel(state.value)
         };
         const next = { ...state, channels };
-        return this.#options.extend ? this.#options.extend(next, ctx) : next;
+        return this.#options.extend ? this.#options.extend(next, env) : next;
     };
     /** A channel prop resolved to a row accessor, keeping it as `source`, or left out when unset. */
     // eslint-disable-next-line @typescript-eslint/no-explicit-any

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

@@ -0,0 +1,26 @@
+import type { PlotStylesConfig } from '../../types/configuration/styling';
+/**
+ * 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 declare class MarkerStyles {
+    #private;
+    /**
+     * 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<T>(markers: T[], plot?: {
+        cfg?: PlotStylesConfig;
+        rows?: unknown[];
+    }): T[];
+    /**
+     * `marker` resolved again after its styles changed (as the hover restyles a shape): a label written in the color
+     * that read best on the shape's old one reads best on its new one.
+     */
+    static restyle<T>(marker: T, plot?: {
+        cfg?: PlotStylesConfig;
+        rows?: unknown[];
+    }): T;
+}

package/dist/phases/markers/MarkerStyles.js

@@ -0,0 +1,126 @@
+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']);
+    /** The label colors this class chose for a shape's color, which a restyled shape chooses again. */
+    static #contrasts = new WeakSet();
+    /** 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));
+    }
+    /**
+     * `marker` resolved again after its styles changed (as the hover restyles a shape): a label written in the color
+     * that read best on the shape's old one reads best on its new one.
+     */
+    static restyle(marker, plot = {}) {
+        const label = marker.label;
+        const fill = label?.styles?.fill;
+        const fresh = typeof fill === 'function' && MarkerStyles.#contrasts.has(fill)
+            ? { ...marker, label: { ...label, styles: { ...label.styles, fill: undefined } } }
+            : marker;
+        return MarkerStyles.resolveAll([fresh], plot)[0];
+    }
+    /** 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);
+        };
+        MarkerStyles.#contrasts.add(fill);
+        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

@@ -1,14 +1,14 @@
-import type { AxisPlotCtx, AxisPlotState, MarkersStageOptions, PhaseStage } from '../../types/phases';
+import type { AxisPlotEnv, AxisPlotState, MarkersStageOptions, PhaseStage } from '../../types/phases';
 /**
  * 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 declare class MarkersPhase<TState extends AxisPlotState<any, any, any, any>, TCtx extends AxisPlotCtx> implements PhaseStage<TState, TCtx> {
+export declare class MarkersPhase<TState extends AxisPlotState<any, any, any, any>, TEnv extends AxisPlotEnv> implements PhaseStage<TState, TEnv> {
     #private;
     readonly phase: "markers";
-    constructor(options: MarkersStageOptions<TState, TCtx>);
-    run: (state: TState, ctx: TCtx) => TState;
+    constructor(options: MarkersStageOptions<TState, TEnv>);
+    run: (state: TState, env: TEnv) => TState;
 }

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';
@@ -12,17 +13,18 @@ export class MarkersPhase {
     constructor(options) {
         this.#options = options;
     }
-    run = (state, ctx) => {
+    run = (state, env) => {
         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, env).map((marker) => {
+                const { styles, ...hooks } = labels.hooks(env);
+                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, env), ...(state.markers ?? []), ...valueLabels], state.scales), state.processedData), { cfg: env.cfg, rows: state.processedData?.data })
         };
     };
 }

package/dist/phases/scales/ScalesPhase.d.ts

@@ -1,6 +1,6 @@
 import { PlotAxes } from '../data/PlotAxes';
 import type { AxisChannelName } from '../../types/layout/mapping';
-import type { AxisPlotState, AxisPlotCtx, PhaseStage, ScalesStageOptions } from '../../types/phases';
+import type { AxisPlotState, AxisPlotEnv, PhaseStage, ScalesStageOptions } from '../../types/phases';
 type AnyAxisState = AxisPlotState<any, any, any, any>;
 /**
  * The shared "scales" phase. Each axis the kind lays out as categories
@@ -10,10 +10,10 @@ type AnyAxisState = AxisPlotState<any, any, any, any>;
  * transforms gave the rows - from zero on the axes `zero` names. The author's
  * `scales` always win, and a kind adds its own on top (`defaults`, `fit`, `extend`).
  */
-export declare class ScalesPhase<TState extends AnyAxisState, TCtx extends AxisPlotCtx> implements PhaseStage<TState, TCtx> {
+export declare class ScalesPhase<TState extends AnyAxisState, TEnv extends AxisPlotEnv> implements PhaseStage<TState, TEnv> {
     #private;
     readonly phase: "scales";
-    constructor(options?: ScalesStageOptions<TState, TCtx>);
+    constructor(options?: ScalesStageOptions<TState, TEnv>);
     /** The axes whose marks grow from zero, in this state. */
     zeroAxes(state: {
         axes?: PlotAxes;
@@ -24,6 +24,6 @@ export declare class ScalesPhase<TState extends AnyAxisState, TCtx extends AxisP
     }): AxisChannelName[];
     /** Whether the kind keeps its categories in the order the data gives them. */
     get keepsDataOrder(): boolean;
-    run: (state: TState, ctx: TCtx) => TState;
+    run: (state: TState, env: TEnv) => TState;
 }
 export {};

package/dist/phases/scales/ScalesPhase.js

@@ -44,10 +44,10 @@ export class ScalesPhase {
     get keepsDataOrder() {
         return this.#options.bandOrder === 'data';
     }
-    run = (state, ctx) => {
+    run = (state, env) => {
         const options = this.#options;
         const { axes, processedData, markers = [] } = state;
-        const defaults = options.defaults?.(state, ctx) ?? {};
+        const defaults = options.defaults?.(state, env) ?? {};
         const symmetric = new Set(this.symmetricAxes(state));
         const zero = new Set(this.zeroAxes(state));
         const scales = { ...state.scales };
@@ -72,7 +72,7 @@ export class ScalesPhase {
                 scales[axis] = { ...scales[axis], domain: [-reach, reach] };
             }
         }
-        const fitted = options.fit?.({ ...state, scales }, ctx) ?? {};
+        const fitted = options.fit?.({ ...state, scales }, env) ?? {};
         const fittedAxes = [];
         for (const axis of AXES) {
             if (!fitted[axis])
@@ -111,7 +111,7 @@ export class ScalesPhase {
                 : { ...author, domain: [lo, hi], nice: author?.nice ?? true };
         }
         const next = { ...state, scales, ...(fittedAxes.length ? { fittedAxes } : {}) };
-        return options.extend ? options.extend(next, ctx) : next;
+        return options.extend ? options.extend(next, env) : next;
     };
     /** A category axis as a band scale: the kind's options under the author's, in the order the kind asks for. */
     #band(author, own, state, axis) {

package/dist/phases/sharedScales/SharedScalesPhase.d.ts

@@ -30,11 +30,11 @@ type SharedScalesState = FacetStageState & {
  * can't happen there. Without options, a kind still shares its domains: it just
  * has no bands and nothing that starts from zero.
  */
-export declare class SharedScalesPhase<TState extends SharedScalesState, TCtx> implements PhaseStage<TState, TCtx> {
+export declare class SharedScalesPhase<TState extends SharedScalesState, TEnv> implements PhaseStage<TState, TEnv> {
     #private;
     readonly phase: "sharedScales";
     constructor(options: SharedScalesOptions | undefined, scales?: ScalesPhase<any, any>);
-    run: (state: TState, ctx: TCtx) => TState;
+    run: (state: TState, env: TEnv) => TState;
     /**
      * One axis' domain over some slices: sorted values on a band axis, `[min, max]`
      * otherwise, or `undefined`. A numeric extent is niced here, once, so every

package/dist/phases/sharedScales/SharedScalesPhase.js

@@ -34,7 +34,7 @@ export class SharedScalesPhase {
         this.#scales = scales;
         this.#kindScales = new Pipeline([scales]);
     }
-    run = (state, ctx) => {
+    run = (state, env) => {
         const facet = state.facet;
         const panels = facet ? (state.panels ?? []) : [];
         // A symmetric axis has no domain but the one the kind's "scales" phase gives it.
@@ -54,7 +54,7 @@ export class SharedScalesPhase {
         const domainOver = (channel, members) => {
             if (fromPhase.has(channel)) {
                 const scoped = members ? FacetPanels.narrowToPanels(state, members) : state;
-                const scales = this.#kindScales.run(scoped, ctx).scales;
+                const scales = this.#kindScales.run(scoped, env).scales;
                 const domain = scales?.[channel]?.domain;
                 return domain === undefined ? undefined : { domain };
             }

package/dist/phases/statistics/MarkerGrouping.d.ts

@@ -35,14 +35,5 @@ export declare class MarkerGrouping {
         color?: unknown;
         defaultColor?: string;
     }): TMarker[];
-    /**
-     * Gives a scoped hover marker its series color through its own `dot` and
-     * `text` styles, the way `withSeriesColor` does for other markers. A style the
-     * marker sets itself keeps its own color.
-     */
-    static withHoverSeriesColor<T extends {
-        dot?: object;
-        text?: object;
-    }>(marker: T, color: string | undefined): T;
 }
 export {};

package/dist/phases/statistics/MarkerGrouping.js

@@ -94,20 +94,4 @@ export class MarkerGrouping {
             return Object.keys(updates).length ? { ...m, ...updates } : marker;
         });
     }
-    /**
-     * Gives a scoped hover marker its series color through its own `dot` and
-     * `text` styles, the way `withSeriesColor` does for other markers. A style the
-     * marker sets itself keeps its own color.
-     */
-    static withHoverSeriesColor(marker, color) {
-        if (!color)
-            return marker;
-        const dot = (marker.dot ?? {});
-        const text = (marker.text ?? {});
-        return {
-            ...marker,
-            dot: { ...dot, dotFill: dot.dotFill ?? color, dotStroke: dot.dotStroke ?? color },
-            text: { ...text, fill: text.fill ?? color }
-        };
-    }
 }

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/styles/StylesPhase.d.ts

@@ -1,13 +1,13 @@
-import type { AxisPlotState, AxisPlotCtx, PhaseStage } from '../../types/phases';
+import type { AxisPlotState, AxisPlotEnv, PhaseStage } from '../../types/phases';
 import type { StylesStageOptions } from '../../types/phases/styles/phase';
 /**
  * The shared "styles" phase: resolves the plot's `styles` against the plot
  * kind's own defaults - its value labels (`valueLabels`), with how far they
  * are expected to reach out, which its margins start from.
  */
-export declare class StylesPhase<TState extends AxisPlotState<any, any, any, any>, TCtx extends AxisPlotCtx> implements PhaseStage<TState, TCtx> {
+export declare class StylesPhase<TState extends AxisPlotState<any, any, any, any>, TEnv extends AxisPlotEnv> implements PhaseStage<TState, TEnv> {
     #private;
     readonly phase: "styles";
     constructor(options?: StylesStageOptions<TState>);
-    run: (state: TState, ctx: TCtx) => TState;
+    run: (state: TState, env: TEnv) => TState;
 }

package/dist/phases/styles/StylesPhase.js

@@ -10,8 +10,8 @@ export class StylesPhase {
     constructor(options = {}) {
         this.#options = options;
     }
-    run = (state, ctx) => ({
+    run = (state, env) => ({
         ...state,
-        valueLabels: ValueLabels.build(state.values, ctx.cfg, this.#options.values ?? {}, state)
+        valueLabels: ValueLabels.build(state.values, env.cfg, this.#options.values ?? {}, state)
     });
 }

package/dist/phases/tooltip/TooltipPhase.d.ts

@@ -1,15 +1,15 @@
-import type { AxisPlotCtx, AxisPlotState, PhaseStage } from '../../types/phases';
+import type { AxisPlotEnv, AxisPlotState, PhaseStage } from '../../types/phases';
 type AnyAxisState = AxisPlotState<any, any, any, any>;
 /**
  * The "tooltip" phase every axis-based plot shares: how a hovered row reads,
  * as `tooltipFormat` - the same default on every plot, {@link TooltipState.default} -
  * and the order its rows read in, as `tooltipSort`: highest value first, by
- * each row's own value (a stacked row's share, not its running total). The value reads as the tooltip's
+ * the value each row's context gives it (a stacked row's own, not its running total). The value reads as the tooltip's
  * `decimals`, `prefix`, `suffix` and `signDisplay` ask. It
  * runs after the scales, which say which axis holds categories.
  */
-export declare class TooltipPhase<TState extends AnyAxisState> implements PhaseStage<TState, AxisPlotCtx> {
+export declare class TooltipPhase<TState extends AnyAxisState> implements PhaseStage<TState, AxisPlotEnv> {
     readonly phase: "tooltip";
-    run: (state: TState, ctx: AxisPlotCtx) => TState;
+    run: (state: TState, env: AxisPlotEnv) => TState;
 }
 export {};

package/dist/phases/tooltip/TooltipPhase.js

@@ -1,19 +1,22 @@
 import { TooltipState } from '../../layout/tooltip/TooltipState.svelte';
-import { ValueLabels } from '../../layout/styles/ValueLabels';
+import { RowContext } from '../context/RowContext';
 import { NumberFormat } from '../../utils/NumberFormat';
 /**
  * The "tooltip" phase every axis-based plot shares: how a hovered row reads,
  * as `tooltipFormat` - the same default on every plot, {@link TooltipState.default} -
  * and the order its rows read in, as `tooltipSort`: highest value first, by
- * each row's own value (a stacked row's share, not its running total). The value reads as the tooltip's
+ * the value each row's context gives it (a stacked row's own, not its running total). The value reads as the tooltip's
  * `decimals`, `prefix`, `suffix` and `signDisplay` ask. It
  * runs after the scales, which say which axis holds categories.
  */
 export class TooltipPhase {
     phase = 'tooltip';
-    run = (state, ctx) => ({
-        ...state,
-        tooltipFormat: TooltipState.default(state, NumberFormat.maybe(NumberFormat.displayOf(state.tooltip), ctx.cfg)),
-        tooltipSort: TooltipState.descending(ValueLabels.valueOf(state))
-    });
+    run = (state, env) => {
+        const contextOf = RowContext.reader(state);
+        return {
+            ...state,
+            tooltipFormat: TooltipState.default(state, NumberFormat.maybe(NumberFormat.displayOf(state.tooltip), env.cfg)),
+            tooltipSort: TooltipState.descending((row) => contextOf(row).value)
+        };
+    };
 }

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.d.ts

@@ -18,10 +18,10 @@ export declare const GAP_KIND = "__gapKind";
  * `styles.gaps` fills is read at its interpolated value, so it takes its place
  * in a stack the way a real value would, and keeps its gap kind.
  */
-export declare class TransformsPhase<TState extends TransformsStageState, TCtx = unknown> implements PhaseStage<TState, TCtx> {
+export declare class TransformsPhase<TState extends TransformsStageState, TEnv = unknown> implements PhaseStage<TState, TEnv> {
     #private;
     readonly phase: "transforms";
     /** `connect`: whether a series' visual segments bridge into each other, as the kind's "data" phase splits them. */
-    constructor(options?: TransformsStageOptions<TState, TCtx>, connect?: boolean);
-    run: (state: TState, ctx: TCtx) => TState;
+    constructor(options?: TransformsStageOptions<TState, TEnv>, connect?: boolean);
+    run: (state: TState, env: TEnv) => TState;
 }

package/dist/phases/transforms/TransformsPhase.js

@@ -37,9 +37,14 @@ export class TransformsPhase {
         this.#options = options;
         this.#connect = connect;
     }
-    run = (state, ctx) => {
+    run = (state, env) => {
         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)
+            ? options.transforms(state, env)
             : (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;
+}