@fundar/data-chart-telling 1.16.0 → 1.18.0

package/dist/layout/hover/HoverShapes.d.ts

@@ -0,0 +1,44 @@
+import type { HoverShapeStyle } from '../../types/markers/common';
+import type { PlotStylesConfig } from '../../types/configuration/styling';
+type Row = Record<string, unknown>;
+type Role = 'active' | 'other';
+/** What a hover marker sets for the shapes linked to the hover. */
+type ShapeRule = {
+    active?: HoverShapeStyle;
+    others?: HoverShapeStyle;
+    series?: string;
+};
+/** What the plot tells about each row the shapes draw. */
+export type HoverShapesReach = {
+    /** How the hover reaches a row - see `PlotHover.roleOf`. */
+    roleOf: (row: Row, series?: string) => Role | null;
+    /** Whether the legend dims the row's series, which then keeps its own fill and opacities. */
+    dimmed: (row: Row) => boolean;
+    cfg: PlotStylesConfig;
+};
+/** One part of a marker: its rows that the hover styles alike, keyed by how. */
+export type HoverShapesPart<T> = {
+    key: string;
+    marker: T;
+};
+/**
+ * The look the plot's hover markers give the shapes of every marker linked to the hover (`hover: true` or
+ * `'style'`): the hovered ones take `active`, the others `others`, each over the shape's own style. A shape
+ * the legend dims keeps its own fill and opacities; one the hover cannot reach (hidden, omitted) is untouched.
+ */
+export declare class HoverShapes {
+    #private;
+    constructor(markers: readonly ({
+        type: string;
+    } & ShapeRule)[]);
+    /** Whether any hover marker restyles shapes. */
+    get any(): boolean;
+    /** Whether `marker`'s shapes take the hover's styles. */
+    static links(marker: object): boolean;
+    /**
+     * `marker` in parts, each drawing the rows the hover styles alike - the shapes it does not style first, the
+     * hovered ones last, so their outline is on top. A marker the hover does not style is one part, as it is.
+     */
+    split<T extends object>(marker: T, rows: readonly unknown[], reach: HoverShapesReach): HoverShapesPart<T>[];
+}
+export {};

package/dist/layout/hover/HoverShapes.js

@@ -0,0 +1,103 @@
+import { MarkerStyles } from '../../phases/markers/MarkerStyles';
+import { SERIES_KEY } from '../../phases/transforms/TransformsPhase';
+/**
+ * The look the plot's hover markers give the shapes of every marker linked to the hover (`hover: true` or
+ * `'style'`): the hovered ones take `active`, the others `others`, each over the shape's own style. A shape
+ * the legend dims keeps its own fill and opacities; one the hover cannot reach (hidden, omitted) is untouched.
+ */
+export class HoverShapes {
+    /** What the legend owns on a dimmed shape. */
+    static #LEGEND_KEYS = ['fill', 'fillOpacity', 'strokeOpacity'];
+    /** A shape style's field as a `dot` marker names it. */
+    static #DOT_KEYS = {
+        fill: 'dotFill',
+        fillOpacity: 'dotFillOpacity',
+        stroke: 'dotStroke',
+        strokeWidth: 'dotStrokeWidth',
+        strokeOpacity: 'dotStrokeOpacity',
+        strokeDasharray: 'dotStrokeDasharray'
+    };
+    #rules;
+    constructor(markers) {
+        this.#rules = markers.filter((m) => m.type === 'hover' && !!(m.active || m.others));
+    }
+    /** Whether any hover marker restyles shapes. */
+    get any() {
+        return this.#rules.length > 0;
+    }
+    /** Whether `marker`'s shapes take the hover's styles. */
+    static links(marker) {
+        const hover = marker.hover;
+        return hover === true || hover === 'style';
+    }
+    /**
+     * `marker` in parts, each drawing the rows the hover styles alike - the shapes it does not style first, the
+     * hovered ones last, so their outline is on top. A marker the hover does not style is one part, as it is.
+     */
+    split(marker, rows, reach) {
+        const whole = [{ key: '', marker }];
+        if (!this.any || !HoverShapes.links(marker))
+            return whole;
+        const data = (marker.data ?? rows);
+        const buckets = new Map();
+        for (const row of data) {
+            const key = this.#signature(row, reach);
+            const bucket = buckets.get(key) ?? buckets.set(key, []).get(key);
+            bucket.push(row);
+        }
+        if (buckets.size === 1 && buckets.has(''))
+            return whole;
+        const plain = (key) => !key.includes('a');
+        return [...buckets.entries()]
+            .sort(([a], [b]) => Number(plain(b)) - Number(plain(a)))
+            .map(([key, part]) => ({
+            key,
+            marker: key === '' ? { ...marker, data: part } : this.#restyled(marker, part, key, reach)
+        }));
+    }
+    /**
+     * How the hover styles `row`: for each rule, `a` (active), `o` (other) or `-` (not at all), and `~` when the
+     * legend dims it. `''` while no rule styles it.
+     */
+    #signature(row, reach) {
+        const own = row[SERIES_KEY];
+        const roles = this.#rules.map((rule) => {
+            if (rule.series !== undefined && own !== rule.series)
+                return '-';
+            const role = reach.roleOf(row, rule.series);
+            if (role === 'active')
+                return rule.active ? 'a' : '-';
+            if (role === 'other')
+                return rule.others ? 'o' : '-';
+            return '-';
+        });
+        if (roles.every((role) => role === '-'))
+            return '';
+        return roles.join('') + (reach.dimmed(row) ? '~' : '');
+    }
+    /** `marker` over `rows`, with the styles `key` stands for over its own. */
+    #restyled(marker, rows, key, reach) {
+        const dimmed = key.endsWith('~');
+        const styles = this.#rules.reduce((merged, rule, i) => {
+            const role = key[i];
+            const style = role === 'a' ? rule.active : role === 'o' ? rule.others : undefined;
+            return {
+                ...merged,
+                ...HoverShapes.#named(HoverShapes.#defined(style, dimmed), marker)
+            };
+        }, { ...marker.styles });
+        return MarkerStyles.restyle({ ...marker, data: rows, styles }, { cfg: reach.cfg, rows });
+    }
+    /** `style` as `marker` names its fields: a `dot` marker's are its `dot` ones (`dotFill`...). */
+    static #named(style, marker) {
+        if (marker.type !== 'dot')
+            return style;
+        const keys = HoverShapes.#DOT_KEYS;
+        return Object.fromEntries(Object.entries(style).map(([name, value]) => [keys[name] ?? name, value]));
+    }
+    /** `style`'s set values, without what the legend owns on a dimmed shape. */
+    static #defined(style, dimmed) {
+        return Object.fromEntries(Object.entries(style ?? {}).filter(([name, value]) => value !== undefined &&
+            !(dimmed && HoverShapes.#LEGEND_KEYS.includes(name))));
+    }
+}

package/dist/layout/hover/PlotHover.svelte.d.ts

@@ -1,6 +1,7 @@
 import { HoverState } from './HoverState.svelte';
 import type { AxisValue } from '../../types/layout/mapping';
 import type { HoverPoint } from '../../types/layout/hover';
+import type { HoverLook } from '../../types/markers/common';
 import type { HoverConfig } from '../../types/plots/props';
 /** What a plot's hover is built from, each read reactively. */
 export type PlotHoverInputs<T extends Record<string, unknown>> = {
@@ -23,6 +24,12 @@ export declare class PlotHover<T extends Record<string, unknown>> {
     #private;
     readonly state: HoverState;
     constructor(inputs: PlotHoverInputs<T>);
+    /**
+     * How the hover reaches `row`: `'active'` while it is matched, `'other'` while it can be hovered but is not,
+     * `null` while nothing is hovered here or it is no row the hover can reach (one the legend hides). A row is
+     * found by identity, else by its x, y and `series`. `series` narrows the active rows to that series.
+     */
+    roleOf(row: T, series?: string): 'active' | 'other' | null;
     /** The matched points the tooltip reads: only the tooltip's `series`, when it names some. */
     readonly matchedRows: HoverPoint<T>[];
     /** The points the hover marker highlights. */
@@ -33,6 +40,7 @@ export declare class PlotHover<T extends Record<string, unknown>> {
         series: string | undefined;
         color: string | undefined;
         areaInset: import("../../types/layout/hover").BandSlice | undefined;
+        context: import("../..").PlotRowContext | undefined;
         row: T;
     }[];
     /**
@@ -40,10 +48,20 @@ export declare class PlotHover<T extends Record<string, unknown>> {
      * among ties, the one at the hovered x and y. Crosshair rules sit on it.
      */
     readonly activePoint: HoverPoint<T> | null;
+    /**
+     * The plot kind's own hover under the strategy in force - the figure's, which a composer or a scrolly step can
+     * change while the plot is shown - for an author's `hover` marker to be laid over.
+     */
+    get look(): HoverLook;
     /** Whether a crosshair rule runs across x - the strategy's, unless the config turns them off. */
     get impliesCrosshairX(): boolean;
     /** Whether a crosshair rule runs across y. */
     get impliesCrosshairY(): boolean;
+    /** The pointer's position in the plot's box, while it is over this plot. */
+    get cursor(): {
+        x: number;
+        y: number;
+    } | null;
     /** Whether the tooltip shows: under the cursor in the owning plot, in every synced one. */
     get showTooltip(): boolean;
     /** Where the tooltip sits: the cursor, else the hovered point, else the owning plot's cursor carried over. */

package/dist/layout/hover/PlotHover.svelte.js

@@ -1,3 +1,4 @@
+import { SERIES_KEY } from '../../phases/transforms/TransformsPhase';
 import { HoverState } from './HoverState.svelte';
 /**
  * One plot's hover: the figure's {@link HoverState} (or its own, outside a
@@ -46,6 +47,46 @@ export class PlotHover {
             return [];
         return this.state.match(this.#inputs.hover().points);
     });
+    /** A row's place, as a key: its x, y and series. */
+    static #keyOf(x, y, series) {
+        const plain = (value) => (value instanceof Date ? +value : value);
+        return JSON.stringify([plain(x), plain(y), series ?? null]);
+    }
+    // The rows the hover can reach, and the matched ones: by identity, and by their place. Built whole
+    // inside this derivation and never changed after it, so they have nothing to react to.
+    #reach = $derived.by(() => {
+        const points = this.#inputs.hover().points;
+        // eslint-disable-next-line svelte/prefer-svelte-reactivity
+        const matched = new Set(this.#matched);
+        // eslint-disable-next-line svelte/prefer-svelte-reactivity
+        const byRow = new Map(points.map((p) => [p.row, p]));
+        // eslint-disable-next-line svelte/prefer-svelte-reactivity
+        const byPlace = new Map(points.map((p) => [PlotHover.#keyOf(p.x, p.y, p.series), p]));
+        return { matched, byRow, byPlace };
+    });
+    /**
+     * How the hover reaches `row`: `'active'` while it is matched, `'other'` while it can be hovered but is not,
+     * `null` while nothing is hovered here or it is no row the hover can reach (one the legend hides). A row is
+     * found by identity, else by its x, y and `series`. `series` narrows the active rows to that series.
+     */
+    roleOf(row, series) {
+        const { matched, byRow, byPlace } = this.#reach;
+        if (matched.size === 0)
+            return null;
+        const point = byRow.get(row) ?? this.#placed(byPlace, row);
+        if (!point)
+            return null;
+        return matched.has(point) && (series === undefined || point.series === series)
+            ? 'active'
+            : 'other';
+    }
+    /** The point at `row`'s place: of its own series, else of none (a heatmap's cell). */
+    #placed(byPlace, row) {
+        const x = this.#inputs.getX()(row);
+        const y = this.#inputs.getY()(row);
+        const series = row[SERIES_KEY];
+        return (byPlace.get(PlotHover.#keyOf(x, y, series)) ?? byPlace.get(PlotHover.#keyOf(x, y, undefined)));
+    }
     /** The matched points the tooltip reads: only the tooltip's `series`, when it names some. */
     matchedRows = $derived.by(() => {
         const series = this.#inputs.hover().tooltip?.series;
@@ -54,13 +95,14 @@ export class PlotHover {
         return this.#matched.filter((p) => p.series != null && series.includes(p.series));
     });
     /** The points the hover marker highlights. */
-    points = $derived(this.#matched.map(({ x, y, label, series, color, areaInset, row }) => ({
+    points = $derived(this.#matched.map(({ x, y, label, series, color, areaInset, context, row }) => ({
         x,
         y,
         label,
         series,
         color,
         areaInset,
+        context,
         row
     })));
     /**
@@ -79,6 +121,13 @@ export class PlotHover {
         return (candidates.find((p) => HoverState.same(p.x, activeX) && HoverState.same(p.y, activeY)) ??
             candidates[0]);
     });
+    /**
+     * The plot kind's own hover under the strategy in force - the figure's, which a composer or a scrolly step can
+     * change while the plot is shown - for an author's `hover` marker to be laid over.
+     */
+    get look() {
+        return this.#inputs.hover().look?.(this.state.strategy) ?? {};
+    }
     /** Whether a crosshair rule runs across x - the strategy's, unless the config turns them off. */
     get impliesCrosshairX() {
         return this.#inputs.hover().crosshair !== false && this.state.crosshairX;
@@ -87,6 +136,10 @@ export class PlotHover {
     get impliesCrosshairY() {
         return this.#inputs.hover().crosshair !== false && this.state.crosshairY;
     }
+    /** The pointer's position in the plot's box, while it is over this plot. */
+    get cursor() {
+        return this.#cursor;
+    }
     /** Whether the tooltip shows: under the cursor in the owning plot, in every synced one. */
     get showTooltip() {
         if (this.matchedRows.length === 0)

package/dist/layout/legend/DisabledStyle.d.ts

@@ -6,7 +6,7 @@ import type { DotStyle, StrokeStyle } from '../../types/plots/styling';
  * a call site slots it in as one more `??` layer ahead of its own style chain.
  */
 export declare class DisabledStyle {
-    /** The style `action` draws a mark with - `'hide'` and `'omit'` are fully transparent. */
+    /** The style `action` draws a mark with - `'hide'`, `'omit'` and `'rescale'` are fully transparent. */
     static of(action: LegendDisabledAction | undefined, fallbackOpacity: number): LegendDisabledStyle | undefined;
     /** The style a legend item draws with while off - it stays visible, so it can be turned back on. */
     static ofItem(action: LegendDisabledAction | undefined, fallbackOpacity: number): LegendDisabledStyle | undefined;

package/dist/layout/legend/DisabledStyle.js

@@ -4,7 +4,7 @@
  * a call site slots it in as one more `??` layer ahead of its own style chain.
  */
 export class DisabledStyle {
-    /** The style `action` draws a mark with - `'hide'` and `'omit'` are fully transparent. */
+    /** The style `action` draws a mark with - `'hide'`, `'omit'` and `'rescale'` are fully transparent. */
     static of(action, fallbackOpacity) {
         if (!action)
             return undefined;

package/dist/layout/legend/DiscreteBadgeItem.svelte

@@ -8,7 +8,7 @@
 	/**
 	 * The `interactive.legendStyle: 'badge'` item look: a pill with the series
 	 * color, symbol icon, label, and a toggle icon - an eye (crossed out when
-	 * `disabled`) for `'dim'` and `'hide'`, or a plus/cross pair for `'omit'`.
+	 * `disabled`) for `'dim'` and `'hide'`, or a plus/cross pair for `'omit'` and `'rescale'`.
 	 */
 	let {
 		item,

package/dist/layout/legend/DiscreteSection.svelte

@@ -161,7 +161,7 @@
 {#snippet discreteItem(item: LegendItem, i: number)}
 	{@const action = interaction.actionOf(item.name)}
 	{@const isDisabled = action != null}
-	{@const omitMode = (action ?? disabledAction).mode === 'omit'}
+	{@const omitMode = ['omit', 'rescale'].includes((action ?? disabledAction).mode)}
 	{@const disabledStyle = DisabledStyle.ofItem(action, cfg.legend.disabledOpacity)}
 	{@const color =
 		disabledStyle?.fill ??

package/dist/layout/legend/LegendState.svelte.d.ts

@@ -31,6 +31,8 @@ export declare class LegendState {
     }): boolean;
     /** Whether `series` is turned off. */
     isOff(series: string): boolean;
+    /** Whether `series` is out of the hover: turned off any way but `'dim'`, which leaves it drawn and hoverable. */
+    isUnhoverable(series: string): boolean;
     /** What turning `series` off does, while it is off. */
     actionOf(series: string): LegendDisabledAction | undefined;
     turnOff(series: string, action: LegendDisabledAction): void;
@@ -48,12 +50,22 @@ export declare class LegendState {
      * off any other way, is left alone.
      */
     setOff(targets: Map<string, LegendDisabledAction>): void;
-    /** Whether any series is off with `'omit'` - which changes the plot's own rows, not just how they draw. */
+    /** Whether any series is off with `'omit'` or `'rescale'` - which change the plot's own rows, not just how they draw. */
     get omits(): boolean;
-    /** `series` without those turned off with `'omit'`. */
+    /** `series` without those turned off with `'omit'` or `'rescale'`. */
     withoutOmitted<S extends {
         name: string;
     }>(series: S[]): S[];
+    /**
+     * The series of `series` taken out of the plot's rows, and how: `'omit'` or `'rescale'` - one mode for every
+     * series of a plot, as its legend sets it. `undefined` while none is.
+     */
+    removed<S extends {
+        name: string;
+    }>(series: S[]): {
+        mode: 'omit' | 'rescale';
+        series: S[];
+    } | undefined;
     /**
      * Records what the plot `source` draws, replacing what it recorded before.
      * A series or mark that is off keeps its entry, in its place, even when

package/dist/layout/legend/LegendState.svelte.js

@@ -52,6 +52,11 @@ export class LegendState {
     isOff(series) {
         return this.disabled.has(series);
     }
+    /** Whether `series` is out of the hover: turned off any way but `'dim'`, which leaves it drawn and hoverable. */
+    isUnhoverable(series) {
+        const action = this.disabled.get(series);
+        return action !== undefined && action.mode !== 'dim';
+    }
     /** What turning `series` off does, while it is off. */
     actionOf(series) {
         return this.disabled.get(series);
@@ -119,13 +124,27 @@ export class LegendState {
             this.#managed = new SvelteMap(targets);
         });
     }
-    /** Whether any series is off with `'omit'` - which changes the plot's own rows, not just how they draw. */
+    /** Whether any series is off with `'omit'` or `'rescale'` - which change the plot's own rows, not just how they draw. */
     get omits() {
-        return [...this.disabled.values()].some((action) => action.mode === 'omit');
+        return [...this.disabled.values()].some(LegendState.#removes);
     }
-    /** `series` without those turned off with `'omit'`. */
+    /** `series` without those turned off with `'omit'` or `'rescale'`. */
     withoutOmitted(series) {
-        return series.filter((s) => this.actionOf(s.name)?.mode !== 'omit');
+        return series.filter((s) => !LegendState.#removes(this.actionOf(s.name)));
+    }
+    /**
+     * The series of `series` taken out of the plot's rows, and how: `'omit'` or `'rescale'` - one mode for every
+     * series of a plot, as its legend sets it. `undefined` while none is.
+     */
+    removed(series) {
+        const off = series.filter((s) => LegendState.#removes(this.actionOf(s.name)));
+        if (!off.length)
+            return undefined;
+        return { mode: this.actionOf(off[0].name).mode, series: off };
+    }
+    /** Whether `action` takes a series out of the plot's rows. */
+    static #removes(action) {
+        return action?.mode === 'omit' || action?.mode === 'rescale';
     }
     /**
      * Records what the plot `source` draws, replacing what it recorded before.

package/dist/layout/legend/LegendText.d.ts

@@ -1,12 +1,15 @@
 import type { PlotStylesConfig } from '../../types/configuration/styling';
 /** How a legend shows the names it reads off the data. */
 export declare class LegendText {
+    #private;
     /** `name` as the legend shows it: as words, unless `legend.pretty` is off. */
     static of(name: string, cfg: Pick<PlotStylesConfig, 'legend'>): string;
     /**
      * A field or category name as words: `_` and camel-case humps split it,
      * all lowercase but the first letter - `gdp_per_capita` and `gdpPerCapita`
-     * both read "Gdp per capita". All-caps words (acronyms) keep their case.
+     * both read "Gdp per capita". All-caps words (acronyms) keep their case. The
+     * levels of a series grouped by several (`'Americas.Argentina'`) are made
+     * words each.
      */
     static humanize(name: string): string;
 }

package/dist/layout/legend/LegendText.js

@@ -1,3 +1,4 @@
+import { Grouping } from '../../utils/grouping';
 /** How a legend shows the names it reads off the data. */
 export class LegendText {
     /** `name` as the legend shows it: as words, unless `legend.pretty` is off. */
@@ -7,9 +8,14 @@ export class LegendText {
     /**
      * A field or category name as words: `_` and camel-case humps split it,
      * all lowercase but the first letter - `gdp_per_capita` and `gdpPerCapita`
-     * both read "Gdp per capita". All-caps words (acronyms) keep their case.
+     * both read "Gdp per capita". All-caps words (acronyms) keep their case. The
+     * levels of a series grouped by several (`'Americas.Argentina'`) are made
+     * words each.
      */
     static humanize(name) {
+        return name.split(Grouping.SEPARATOR).map(LegendText.#words).join(Grouping.SEPARATOR);
+    }
+    static #words(name) {
         const words = name
             .replace(/_+/g, ' ')
             .replace(/([a-z\d])([A-Z])/g, '$1 $2')

package/dist/layout/margins/PlotMargins.svelte.d.ts

@@ -56,7 +56,7 @@ export declare class PlotMargins {
     /**
      * Measures `el`'s rendered box once its readings settle - again whenever
      * the plot's area or `deps` change - and reports how far it reaches past
-     * that area: to `onOverflow`, and, when `grow` holds, into the room the
+     * that area: to `onoverflow`, and, when `grow` holds, into the room the
      * margins grow by. The area is where svelteplot draws the marks (see
      * {@link follow}), not the {@link contentBox}'s estimate: an `'auto'` side
      * is only its estimate until svelteplot sizes its axes, and what a label
@@ -64,7 +64,7 @@ export declare class PlotMargins {
      */
     watch(el: () => SVGGraphicsElement | undefined, options: {
         grow?: () => boolean;
-        onOverflow?: (overflow: Margins) => void;
+        onoverflow?: (overflow: Margins) => void;
         deps?: () => unknown;
     }): void;
     /** Grows the labels' room to fit what reached `overflow` px past the content box. */

package/dist/layout/margins/PlotMargins.svelte.js

@@ -57,7 +57,7 @@ export class PlotMargins {
     /**
      * Measures `el`'s rendered box once its readings settle - again whenever
      * the plot's area or `deps` change - and reports how far it reaches past
-     * that area: to `onOverflow`, and, when `grow` holds, into the room the
+     * that area: to `onoverflow`, and, when `grow` holds, into the room the
      * margins grow by. The area is where svelteplot draws the marks (see
      * {@link follow}), not the {@link contentBox}'s estimate: an `'auto'` side
      * is only its estimate until svelteplot sizes its axes, and what a label
@@ -92,7 +92,7 @@ export class PlotMargins {
                     frame = requestAnimationFrame(measure);
                     return;
                 }
-                options.onOverflow?.(overflow);
+                options.onoverflow?.(overflow);
                 if (options.grow?.())
                     this.reportOverflow(overflow);
             };

package/dist/layout/plot/Core.svelte

@@ -47,12 +47,12 @@
 
 	const cfg = $derived(getConfiguration());
 	const interaction = PlotInteraction.current(() => cfg);
-	const ctx = $derived({ cfg, interaction, range: interaction.legend?.range });
+	const env = $derived({ cfg, interaction, range: interaction.legend?.range });
 
 	const plotState = $derived(
 		pipeline!.run(
 			{ ...rest, width, height, styles, segments, markers, scales, margins },
-			ctx,
+			env,
 			panelState
 		)
 	);

package/dist/layout/plot/Plot.svelte

@@ -74,7 +74,8 @@
 		slice?: (cell: PlotCellContext<TRow, TScales>) => TCore;
 		cell?: PlotCellSnippet<TRow, TScales>;
 		margins?: MarginConfig;
-		tooltip?: TooltipProp<TRow>;
+		/** The plot's `tooltip`, whose `format` gets whatever context its kind gives. */
+		tooltip?: TooltipProp<TRow, never>;
 		/** The rows `timeline` and `facet` slice. Defaults to `core.data`. */
 		data?: TRow[];
 		width?: number;
@@ -89,7 +90,8 @@
 	const pipeline = $derived(defaults ? Pipeline.of(defaults()) : undefined);
 	const hoverSettings = $derived(
 		new HoverSettings(
-			tooltip,
+			// A kind's own context reaches `format` as the hover phase gives it.
+			tooltip as TooltipProp<TRow> | undefined,
 			markers ?? core?.markers,
 			pipeline?.hoverStrategy(core ?? {}, cfg) ?? 'x'
 		)

package/dist/layout/plot/Plot.svelte.d.ts

@@ -14,7 +14,8 @@ declare function $$render<TRow extends Record<string, unknown>, TScales extends
         slice?: (cell: PlotCellContext<TRow, TScales>) => TCore;
         cell?: PlotCellSnippet<TRow, TScales>;
         margins?: MarginConfig;
-        tooltip?: TooltipProp<TRow>;
+        /** The plot's `tooltip`, whose `format` gets whatever context its kind gives. */
+        tooltip?: TooltipProp<TRow, never>;
         /** The rows `timeline` and `facet` slice. Defaults to `core.data`. */
         data?: TRow[];
         width?: number;

package/dist/layout/plot/PublicPlotContext.d.ts

@@ -7,6 +7,7 @@ import type { PlotHover } from '../hover/PlotHover.svelte';
 import type { Margins } from '../margins/Margins';
 import type { PlotAxes } from '../../phases/data/PlotAxes';
 import type { AxisValue } from '../../types/layout/mapping';
+import type { PlotRowContext } from '../../types/layout/context';
 import type { HoverPoint, HoverStrategy } from '../../types/layout/hover';
 import type { PlayerControl, TimeInput, TimelineStep } from '../../types/layout/timeline';
 import type { LegendDisabledAction, LegendEntry, LegendRange } from '../../types/layout/legend';
@@ -126,6 +127,11 @@ export declare class PublicPlotContext<T extends Record<string, unknown> = Recor
     get axes(): PlotAxes | undefined;
     /** The rows the plot draws and hovers over. */
     get data(): T[];
+    /**
+     * What the plot knows of one of the rows it draws (or a copy of it, as a mark's accessor gets it): its series,
+     * where it sits, the value it shows and whatever the plot kind works out for it - see {@link PlotRowContext}.
+     */
+    contextOf<TContext extends PlotRowContext<T> = PlotRowContext<T>>(row: unknown): TContext;
     /** The color a series is drawn in, by its name - `undefined` for a plot with no series (a map). */
     get colorForSeries(): ((name: string) => string) | undefined;
     get width(): number;

package/dist/layout/plot/PublicPlotContext.js

@@ -2,6 +2,7 @@ import { usePlot as usePlotFromSvelteplot } from 'svelteplot';
 import { HoverState } from '../hover/HoverState.svelte';
 import { LegendState } from '../legend/LegendState.svelte';
 import { PlotContext } from './PlotContext';
+import { RowContext } from '../../phases/context/RowContext';
 import { TimelineState } from '../timeline/TimelineState.svelte';
 /** What the pointer is over, shared by every plot in a figure. Read-only. */
 export class PublicHover {
@@ -231,6 +232,13 @@ export class PublicPlotContext {
     get data() {
         return this.#context.data;
     }
+    /**
+     * What the plot knows of one of the rows it draws (or a copy of it, as a mark's accessor gets it): its series,
+     * where it sits, the value it shows and whatever the plot kind works out for it - see {@link PlotRowContext}.
+     */
+    contextOf(row) {
+        return RowContext.of(row);
+    }
     /** The color a series is drawn in, by its name - `undefined` for a plot with no series (a map). */
     get colorForSeries() {
         return this.#context.colorForSeries;

package/dist/layout/scales/ScalesLayout.svelte

@@ -371,7 +371,7 @@
 		transform="rotate(-90, {verticalYLabel.x}, {verticalYLabel.y})"
 		text-anchor={verticalYLabel.anchor}
 		font-size={yTitleFontSize}
-		fill={cfg.axis.color}
+		fill="currentColor"
 		opacity="0.8">{verticalYLabel.text}</text
 	>
 {/if}