@fundar/data-chart-telling 1.16.0 → 1.17.0

package/dist/markers/utils/MarkerEvents.d.ts

@@ -0,0 +1,23 @@
+import type { CommonMarkerEvents, MarkEventHandler, MarkEventName } from '../../types/markers/channels/commonMarkerEvents';
+/** What svelteplot's marks are given for a marker's events. */
+export type MarkerEventProps = Partial<Record<MarkEventName, MarkEventHandler>>;
+/**
+ * The events of a marker, as the props of the svelteplot mark that draws it: the handlers it is given
+ * (`onclick`, `onpointerenter`...). Every marker takes them from `CommonMarkerConfig`, so each one only has to
+ * spread {@link MarkerEvents.props} on its mark.
+ */
+export declare class MarkerEvents {
+    #private;
+    private constructor();
+    /** The events of the marker `marker` reads. */
+    static use(marker: () => CommonMarkerEvents): MarkerEvents;
+    /** Whether the marker has a handler for any event. */
+    get any(): boolean;
+    /**
+     * The handlers as DOM listeners of the shape drawn for `row` (the `index`-th), for a marker that draws
+     * its shapes itself rather than through a svelteplot mark that wires them up.
+     */
+    forRow(row: unknown, index: number): Partial<Record<MarkEventName, (event: Event) => void>>;
+    /** The props to spread on the marker's svelteplot mark. Read in the template, so it follows the marker. */
+    get props(): MarkerEventProps;
+}

package/dist/markers/utils/MarkerEvents.js

@@ -0,0 +1,44 @@
+import { MARK_EVENTS } from '../../types/markers/channels/commonMarkerEvents';
+/**
+ * The events of a marker, as the props of the svelteplot mark that draws it: the handlers it is given
+ * (`onclick`, `onpointerenter`...). Every marker takes them from `CommonMarkerConfig`, so each one only has to
+ * spread {@link MarkerEvents.props} on its mark.
+ */
+export class MarkerEvents {
+    #marker;
+    constructor(marker) {
+        this.#marker = marker;
+    }
+    /** The events of the marker `marker` reads. */
+    static use(marker) {
+        return new MarkerEvents(marker);
+    }
+    /** Whether the marker has a handler for any event. */
+    get any() {
+        const marker = this.#marker();
+        return MARK_EVENTS.some((name) => !!marker[name]);
+    }
+    /**
+     * The handlers as DOM listeners of the shape drawn for `row` (the `index`-th), for a marker that draws
+     * its shapes itself rather than through a svelteplot mark that wires them up.
+     */
+    forRow(row, index) {
+        const marker = this.#marker();
+        const own = {};
+        for (const name of MARK_EVENTS) {
+            const handler = marker[name];
+            if (handler)
+                own[name] = (event) => handler(event, row, index);
+        }
+        return own;
+    }
+    /** The props to spread on the marker's svelteplot mark. Read in the template, so it follows the marker. */
+    get props() {
+        const marker = this.#marker();
+        const own = {};
+        for (const name of MARK_EVENTS)
+            if (marker[name])
+                own[name] = marker[name];
+        return own;
+    }
+}

package/dist/markers/utils/MarkerLabel.svelte

@@ -0,0 +1,33 @@
+<script lang="ts">
+	import TextMarker from '../text/TextMarker.svelte';
+	import { getConfiguration } from '../../configuration/config.svelte';
+	import { usePlot } from '../../layout/plot/usePlot';
+	import { BoxLabel, type Labelled } from './BoxLabel';
+	import { MARK_EVENTS } from '../../types/markers/channels/commonMarkerEvents';
+	import type { TextLabelConfig } from '../../types/markers/basic/text';
+
+	/**
+	 * The `label` of a marker that draws a box per row: a `text` marker anchored in each box and fitted to it. A marker
+	 * with a label only has to render `<MarkerLabel {marker} />` after its own shapes. Nothing is drawn without a
+	 * `label`, or when the marker does not say where its boxes are.
+	 */
+	const { marker }: { marker: Labelled & { label?: TextLabelConfig } } = $props();
+	const plot = usePlot();
+	const cfg = $derived(getConfiguration());
+
+	const labelled = $derived(
+		BoxLabel.of(marker, {
+			isHorizontal: plot.axes?.isHorizontal,
+			gap: cfg.text.label.gap,
+			scales: () => plot.svelteplot.scales as never
+		})
+	);
+	/** A label with a handler of its own listens for the pointer; one without leaves it to the shape under it. */
+	const listens = $derived(MARK_EVENTS.some((name) => !!marker.label?.[name]));
+</script>
+
+{#if labelled}
+	<g pointer-events={listens ? undefined : 'none'}>
+		<TextMarker marker={labelled.marker} box={labelled.box} />
+	</g>
+{/if}

package/dist/markers/utils/MarkerLabel.svelte.d.ts

@@ -0,0 +1,10 @@
+import { type Labelled } from './BoxLabel';
+import type { TextLabelConfig } from '../../types/markers/basic/text';
+type $$ComponentProps = {
+    marker: Labelled & {
+        label?: TextLabelConfig;
+    };
+};
+declare const MarkerLabel: import("svelte").Component<$$ComponentProps, {}, "">;
+type MarkerLabel = ReturnType<typeof MarkerLabel>;
+export default MarkerLabel;

package/dist/markers/utils/RowStroke.d.ts

@@ -1,31 +1,19 @@
-import type { StrokeStyle } from '../../types/plots/styling';
-/** A stroke channel per row: a field key of the row, or a function of it. */
-type RowChannel<T> = string | ((d: never) => T) | undefined;
+import type { PerRow, StrokeStyle } from '../../types/plots/styling';
 /**
- * The stroke of a line-like marker that takes it row by row (a `rule`, an
- * `arrow`): each of `stroke`, `strokeWidth` and `strokeOpacity` is a field of
- * the row or a function of it, else the marker's own `styles`, else a default.
- * A color and an opacity per row are drawn as they are - svelteplot would map
- * them through its own color and opacity scales.
+ * The stroke of a line-like marker that takes it row by row (a `rule`, an `arrow`): each of
+ * `stroke`, `strokeWidth` and `strokeOpacity` in the marker's `styles` is a value or a function of
+ * the row, else a default. A color and an opacity per row are drawn as they are - svelteplot would
+ * map them through its own color and opacity scales.
  */
 export declare class RowStroke {
-    #private;
-    /** The props a mark takes for `channels`, over `styles` and the given `fallback`s. */
-    static of(channels: {
-        stroke?: RowChannel<string | undefined>;
-        strokeWidth?: RowChannel<number>;
-        strokeOpacity?: RowChannel<number>;
-    }, styles: StrokeStyle | undefined, fallback: {
+    /** The props a mark takes for `styles`, over the given `fallback`s; `rows` are what a string in `styles` can name a field of. */
+    static of(styles: PerRow<StrokeStyle> | undefined, rows: readonly unknown[], fallback: {
         stroke: string;
         strokeWidth?: number;
         strokeOpacity?: number;
     }): {
-        stroke: string | {
-            value: (d: Record<string, unknown>) => string | undefined;
-            scale: null;
-        };
-        strokeWidth: number | ((d: Record<string, unknown>) => number) | undefined;
+        stroke: string;
+        strokeWidth: number | undefined;
         strokeOpacity: never;
     };
 }
-export {};

package/dist/markers/utils/RowStroke.js

@@ -1,28 +1,17 @@
+import { RowStyle } from './RowStyle';
 /**
- * The stroke of a line-like marker that takes it row by row (a `rule`, an
- * `arrow`): each of `stroke`, `strokeWidth` and `strokeOpacity` is a field of
- * the row or a function of it, else the marker's own `styles`, else a default.
- * A color and an opacity per row are drawn as they are - svelteplot would map
- * them through its own color and opacity scales.
+ * The stroke of a line-like marker that takes it row by row (a `rule`, an `arrow`): each of
+ * `stroke`, `strokeWidth` and `strokeOpacity` in the marker's `styles` is a value or a function of
+ * the row, else a default. A color and an opacity per row are drawn as they are - svelteplot would
+ * map them through its own color and opacity scales.
  */
 export class RowStroke {
-    /** A per-row channel as the function svelteplot reads. */
-    static #accessor(channel) {
-        return typeof channel === 'string'
-            ? (d) => d[channel]
-            : channel;
-    }
-    /** The props a mark takes for `channels`, over `styles` and the given `fallback`s. */
-    static of(channels, styles, fallback) {
-        const color = RowStroke.#accessor(channels.stroke);
-        const width = RowStroke.#accessor(channels.strokeWidth);
-        const opacity = RowStroke.#accessor(channels.strokeOpacity);
+    /** The props a mark takes for `styles`, over the given `fallback`s; `rows` are what a string in `styles` can name a field of. */
+    static of(styles, rows, fallback) {
         return {
-            stroke: color ? { value: color, scale: null } : (styles?.stroke ?? fallback.stroke),
-            strokeWidth: width ?? styles?.strokeWidth ?? fallback.strokeWidth,
-            strokeOpacity: (opacity
-                ? { value: opacity, scale: null }
-                : (styles?.strokeOpacity ?? fallback.strokeOpacity))
+            stroke: RowStyle.of(styles?.stroke, rows) ?? fallback.stroke,
+            strokeWidth: RowStyle.field(styles?.strokeWidth) ?? fallback.strokeWidth,
+            strokeOpacity: (RowStyle.opacity(styles?.strokeOpacity) ?? fallback.strokeOpacity)
         };
     }
 }

package/dist/markers/utils/RowStyle.d.ts

@@ -0,0 +1,26 @@
+/**
+ * A marker's style as svelteplot reads it. A style that depends on the row is handed over as the
+ * value of a channel with no scale: svelteplot would otherwise map what it gives through its own
+ * color or opacity scale, and a row's opacity of 0.55 would no longer be 0.55.
+ */
+export declare class RowStyle {
+    #private;
+    /**
+     * A color, as a prop of a mark: a function of the row is a channel with no scale; a string is the
+     * field of the rows it names (when they have one of that name), else the color itself.
+     */
+    static of<T>(style: T | ((row: never) => T) | undefined, rows?: readonly unknown[]): T | undefined;
+    /**
+     * The color each row is drawn with, as {@link of} reads `style`: a function of the row, the field of the rows a
+     * string names, else the color itself. `undefined` when there is no color to read.
+     */
+    static colorOf(style: unknown, rows?: readonly unknown[]): ((row: unknown) => string | undefined) | undefined;
+    /** An opacity: a number as it is, a string the field of the rows it names, a function of the row; the last two with no scale. */
+    static opacity(style: number | string | ((row: never) => number) | undefined): number | undefined;
+    /** Any other number (a width, a radius, an inset): a string is the field of the rows it names, a function is called with the row. */
+    static field<T>(style: T | string | ((row: never) => T) | undefined): T | undefined;
+    /** \`styles\` without its functions - for a shape that stands for no row (a hover band), where there is nothing to call them with. */
+    static flat<TStyle extends object>(styles: TStyle | undefined): {
+        [K in keyof TStyle]?: Exclude<TStyle[K], (...args: never[]) => unknown>;
+    };
+}

package/dist/markers/utils/RowStyle.js

@@ -0,0 +1,55 @@
+/**
+ * A marker's style as svelteplot reads it. A style that depends on the row is handed over as the
+ * value of a channel with no scale: svelteplot would otherwise map what it gives through its own
+ * color or opacity scale, and a row's opacity of 0.55 would no longer be 0.55.
+ */
+export class RowStyle {
+    /** The accessor that reads `key` off a row. */
+    static #read = (key) => (row) => row?.[key];
+    /**
+     * A color, as a prop of a mark: a function of the row is a channel with no scale; a string is the
+     * field of the rows it names (when they have one of that name), else the color itself.
+     */
+    static of(style, rows) {
+        if (typeof style === 'function')
+            return { value: style, scale: null };
+        if (typeof style === 'string' && RowStyle.#isField(style, rows))
+            return { value: RowStyle.#read(style), scale: null };
+        return style;
+    }
+    /**
+     * The color each row is drawn with, as {@link of} reads `style`: a function of the row, the field of the rows a
+     * string names, else the color itself. `undefined` when there is no color to read.
+     */
+    static colorOf(style, rows) {
+        if (typeof style === 'function')
+            return (row) => style(row);
+        if (typeof style !== 'string')
+            return undefined;
+        if (RowStyle.#isField(style, rows)) {
+            const read = RowStyle.#read(style);
+            return (row) => read(row);
+        }
+        return () => style;
+    }
+    /** An opacity: a number as it is, a string the field of the rows it names, a function of the row; the last two with no scale. */
+    static opacity(style) {
+        if (typeof style === 'function')
+            return { value: style, scale: null };
+        if (typeof style === 'string')
+            return { value: RowStyle.#read(style), scale: null };
+        return style;
+    }
+    /** Any other number (a width, a radius, an inset): a string is the field of the rows it names, a function is called with the row. */
+    static field(style) {
+        return (typeof style === 'string' ? RowStyle.#read(style) : style);
+    }
+    /** Whether a string names a field of the rows - at least one has it - rather than being a color. */
+    static #isField(name, rows) {
+        return !!rows?.some((row) => typeof row === 'object' && row !== null && name in row);
+    }
+    /** \`styles\` without its functions - for a shape that stands for no row (a hover band), where there is nothing to call them with. */
+    static flat(styles) {
+        return Object.fromEntries(Object.entries(styles ?? {}).filter(([, value]) => typeof value !== 'function'));
+    }
+}

package/dist/markers/vector/VectorMarker.svelte

@@ -1,4 +1,5 @@
 <script lang="ts">
+	import { MarkerEvents } from '../utils/MarkerEvents';
 	import { Vector } from 'svelteplot';
 	import type { GeoVectorMarkerConfig } from '../../types/markers/geo';
 
@@ -10,12 +11,14 @@
 	 * shape actually draws with, matching svelteplot's own convention.
 	 */
 	let { marker }: { marker: GeoVectorMarkerConfig } = $props();
+	const events = MarkerEvents.use(() => marker);
 
 	const shape = $derived(marker.shape ?? 'arrow-filled');
 	const isFilledShape = $derived(shape === 'arrow-filled');
 </script>
 
 <Vector
+	{...events.props}
 	data={marker.data}
 	x={marker.x}
 	y={marker.y}

package/dist/markers/voronoi/VoronoiMarker.svelte

@@ -1,4 +1,6 @@
 <script lang="ts">
+	import { RowStyle } from '../utils/RowStyle';
+	import { MarkerEvents } from '../utils/MarkerEvents';
 	import { Voronoi } from 'svelteplot';
 	import { MarkerChannels } from '../utils/MarkerChannels';
 	import { getConfiguration } from '../../configuration/config.svelte';
@@ -6,6 +8,7 @@
 
 	/** Renders one `'voronoi'` marker as `<Voronoi>` - one Voronoi cell per point. */
 	let { marker }: { marker: VoronoiMarkerConfig } = $props();
+	const events = MarkerEvents.use(() => marker);
 
 	const cfg = $derived(getConfiguration());
 	const data = $derived(marker.data ?? []);
@@ -13,14 +16,15 @@
 </script>
 
 <Voronoi
+	{...events.props}
 	{data}
 	x={marker.x}
 	y={marker.y}
 	z={marker.grouping}
-	fill={marker.styles?.fill}
-	fillOpacity={marker.styles?.fillOpacity}
-	stroke={marker.styles?.stroke ?? channelColor}
-	strokeWidth={marker.styles?.strokeWidth}
-	strokeOpacity={marker.styles?.strokeOpacity}
+	fill={RowStyle.of(marker.styles?.fill, data)}
+	fillOpacity={RowStyle.opacity(marker.styles?.fillOpacity)}
+	stroke={RowStyle.of(marker.styles?.stroke, data) ?? channelColor}
+	strokeWidth={RowStyle.field(marker.styles?.strokeWidth)}
+	strokeOpacity={RowStyle.opacity(marker.styles?.strokeOpacity)}
 	strokeDasharray={marker.styles?.strokeDasharray}
 />

package/dist/markers/voronoi/VoronoiMeshMarker.svelte

@@ -1,4 +1,5 @@
 <script lang="ts">
+	import { MarkerEvents } from '../utils/MarkerEvents';
 	import { VoronoiMesh } from 'svelteplot';
 	import { MarkerChannels } from '../utils/MarkerChannels';
 	import { getConfiguration } from '../../configuration/config.svelte';
@@ -6,6 +7,7 @@
 
 	/** Renders one `'voronoiMesh'` marker as `<VoronoiMesh>` - the Voronoi diagram as a single mesh. */
 	let { marker }: { marker: VoronoiMeshMarkerConfig } = $props();
+	const events = MarkerEvents.use(() => marker);
 
 	const cfg = $derived(getConfiguration());
 	const data = $derived(marker.data ?? []);
@@ -13,6 +15,7 @@
 </script>
 
 <VoronoiMesh
+	{...events.props}
 	{data}
 	x={marker.x}
 	y={marker.y}

package/dist/markers/waffle/WaffleMarker.svelte

@@ -1,4 +1,6 @@
 <script lang="ts">
+	import { RowStyle } from '../utils/RowStyle';
+	import { MarkerEvents } from '../utils/MarkerEvents';
 	import { WaffleX, WaffleY } from 'svelteplot';
 	import { usePlot } from '../../layout/plot/usePlot';
 	import { MarkerChannels } from '../utils/MarkerChannels';
@@ -7,6 +9,7 @@
 
 	/** Renders one `'waffle'` marker as `<WaffleX>` or `<WaffleY>`, picked from the way the plot runs (`usePlot().axes`). */
 	let { marker }: { marker: WaffleMarkerConfig } = $props();
+	const events = MarkerEvents.use(() => marker);
 
 	const plot = usePlot();
 	const isHorizontal = $derived(plot.axes?.isHorizontal ?? false);
@@ -19,6 +22,7 @@
 </script>
 
 <WaffleMark
+	{...events.props}
 	{data}
 	x={marker.x}
 	y={marker.y}
@@ -27,10 +31,10 @@
 	multiple={marker.multiple}
 	gap={marker.gap}
 	round={marker.round}
-	borderRadius={marker.styles?.borderRadius}
+	borderRadius={RowStyle.field(marker.styles?.borderRadius)}
 	{fill}
-	fillOpacity={marker.styles?.fillOpacity}
-	stroke={marker.styles?.stroke}
-	strokeWidth={marker.styles?.strokeWidth}
-	strokeOpacity={marker.styles?.strokeOpacity}
+	fillOpacity={RowStyle.opacity(marker.styles?.fillOpacity)}
+	stroke={RowStyle.of(marker.styles?.stroke, data)}
+	strokeWidth={RowStyle.field(marker.styles?.strokeWidth)}
+	strokeOpacity={RowStyle.opacity(marker.styles?.strokeOpacity)}
 />

package/dist/phases/Pipeline.d.ts

@@ -4,13 +4,14 @@ import type { FacetConfig } from '../types/layout/facet';
 import type { LegendState } from '../layout/legend/LegendState.svelte';
 import type { HoverStrategy } from '../types/layout/hover';
 import type { Accessor } from '../types/plots/data/common';
+import type { GroupingAccessor } from '../types/layout/mapping';
 /** The core props an axis plot kind seeds its pipeline from. */
 export type AxisPipelineProps<TData extends Record<string, unknown>> = {
     series?: unknown[];
     data?: TData[];
     x?: Accessor<TData, unknown>;
     y?: Accessor<TData, unknown>;
-    grouping?: Accessor<TData, unknown>;
+    grouping?: GroupingAccessor<TData>;
     color?: Accessor<TData, unknown>;
     opacity?: unknown;
     r?: unknown;
@@ -20,6 +21,7 @@ export type AxisPipelineProps<TData extends Record<string, unknown>> = {
     error?: Accessor<TData, unknown>;
     target?: unknown;
     ranges?: unknown[];
+    value?: Accessor<TData, unknown>;
     segments?: unknown;
     styles?: {
         gaps?: unknown;

package/dist/phases/Pipeline.js

@@ -215,6 +215,7 @@ export class Pipeline {
             error: props.error,
             target: props.target,
             ranges: props.ranges,
+            value: props.value,
             segments: props.segments ?? {},
             styles: props.styles,
             gaps: props.styles?.gaps,

package/dist/phases/data/DataPhase.js

@@ -1,5 +1,5 @@
-import { buildSeries } from '../../utils/grouping';
-import { ColorRamp } from '../../utils/color';
+import { buildSeries, Grouping } from '../../utils/grouping';
+import { ColorRamp, ColorTones } from '../../utils/color';
 import { resolveAccessor } from '../../utils/accessors';
 import { buildGroupedSeries, buildScopedMarkerGroups } from '../../plots/utils/segments';
 import { buildGapFillMaps, isGapValue } from '../../plots/utils/gaps';
@@ -26,7 +26,7 @@ export class DataPhase {
         const options = this.#options;
         const { series, data, segments, scales } = state;
         const { connect = true, color: segmentColor } = options.segments ?? {};
-        const seriesGrouping = DataPhase.#buildGrouping(state);
+        const seriesGrouping = DataPhase.#buildGrouping(state, options.nested);
         const built = series ?? buildSeries(data ?? [], state.x, state.y, seriesGrouping);
         const fullSeries = options.orderSeries ? options.orderSeries(built, state) : built;
         const axes = PlotAxes.build({
@@ -35,11 +35,18 @@ export class DataPhase {
             given: { x: state.x !== undefined, y: state.y !== undefined },
             discrete: options.discreteAxes
         });
-        const colorForSeries = ColorRamp.resolve(scales.color, (options.colorOrder ? options.colorOrder(fullSeries) : fullSeries).map((s) => s.name), ctx.cfg.palette);
+        const seriesColors = ColorRamp.resolve(scales.color, (options.colorOrder ? options.colorOrder(fullSeries) : fullSeries).map((s) => s.name), ctx.cfg.palette);
+        const colorForPath = series ? undefined : DataPhase.#buildPathColors(state, ctx);
+        // A plot that splits its series by every level colors each one by its path; a nested one by its outermost.
+        const colorForSeries = colorForPath && !options.nested
+            ? DataPhase.#byPath(state, colorForPath, seriesColors)
+            : seriesColors;
         const panelSeries = state.panels && state.panelOf && !series
             ? FacetPanels.splitSeries(fullSeries, state.panels, state.panelOf)
             : fullSeries;
-        const resolvedSeries = ctx.interaction?.legend?.withoutOmitted(panelSeries) ?? panelSeries;
+        const legend = ctx.interaction?.legend;
+        const resolvedSeries = legend?.withoutOmitted(panelSeries) ?? panelSeries;
+        const removedSeries = legend?.removed(panelSeries);
         const baseFor = BasicStyles.of(state.styles, options.segments?.base);
         const groupedSeries = buildGroupedSeries(resolvedSeries, segments, connect, baseFor);
         const scopedGroups = buildScopedMarkerGroups({
@@ -57,6 +64,7 @@ export class DataPhase {
             ...state,
             axes,
             resolvedSeries,
+            ...(removedSeries ? { removedSeries } : {}),
             seriesGrouping,
             allSeriesNames: fullSeries.map((s) => s.name),
             groupedSeries,
@@ -64,20 +72,53 @@ export class DataPhase {
             flat: resolvedSeries.flatMap((s) => s.data),
             scopedGroups,
             colorForSeries,
+            ...(colorForPath ? { colorForPath } : {}),
             ...(gapFillMaps ? { gapFillMaps } : {})
         };
         return options.extend ? options.extend(next, ctx) : next;
     };
     /**
-     * The key a plot's rows split into series by: its `grouping`, or its `color`
-     * when that names categories. A numeric `color` is a continuous value (a
-     * heatmap's cells), so it colors rows without grouping them.
+     * The color of a path of the plot's `grouping` levels, when `scales.color.depth` reaches past the outermost
+     * one: each outermost value its categorical color, and every path down to `depth` a tone of it (see
+     * {@link ColorTones.hierarchy}). `undefined` for a grouping of one level, or a depth of 1.
      */
-    static #buildGrouping(state
+    static #buildPathColors(state, ctx) {
+        const depth = state.scales.color?.depth ?? 1;
+        const rows = state.data ?? [];
+        const levels = Grouping.levels(state.grouping, rows).map((level) => resolveAccessor(level));
+        if (depth <= 1 || levels.length <= 1)
+            return undefined;
+        const paths = rows.map((row) => levels.map((read) => String(read(row))));
+        const outermost = [...new Set(paths.map((path) => path[0]))];
+        const colorOf = ColorRamp.resolve(state.scales.color, outermost, ctx.cfg.palette);
+        return ColorTones.hierarchy(paths, depth, (value) => colorOf(value));
+    }
+    /** A series' color as the color of its path - its name is the key its levels make together. */
+    static #byPath(state, colorForPath, fallback) {
+        const rows = state.data ?? [];
+        const key = resolveAccessor(Grouping.key(state.grouping, rows));
+        const levels = Grouping.levels(state.grouping, rows).map((level) => resolveAccessor(level));
+        const pathOf = new Map();
+        for (const row of rows) {
+            const name = String(key(row));
+            if (!pathOf.has(name))
+                pathOf.set(name, levels.map((read) => String(read(row))));
+        }
+        return (name) => {
+            const path = pathOf.get(name);
+            return path ? colorForPath(path) : fallback(name);
+        };
+    }
+    /**
+     * The key a plot's rows split into series by: its `grouping` (its levels together, or the outermost
+     * one alone for a `nested` kind), or its `color` when that names categories. A numeric `color` is a
+     * continuous value (a heatmap's cells), so it colors rows without grouping them.
+     */
+    static #buildGrouping(state, nested = false
     // eslint-disable-next-line @typescript-eslint/no-explicit-any
     ) {
         if (state.grouping !== undefined)
-            return state.grouping;
+            return Grouping.key(state.grouping, state.data, nested);
         const color = state.color;
         if (color === undefined || !state.data)
             return color;

package/dist/phases/hover/HoverPhase.js

@@ -52,7 +52,8 @@ export class HoverPhase {
             label: label,
             defaultStrategy: options.strategy ?? HoverSettings.strategyOf(state.axes),
             pointMatching: options.pointMatching,
-            number: NumberFormat.of(NumberFormat.displayOf(state.tooltip), ctx.cfg)
+            number: NumberFormat.of(NumberFormat.displayOf(state.tooltip), ctx.cfg),
+            context: HoverPhase.#contextOf(options.context?.(state))
         });
         const hitAreas = options.hitAreas?.(state, hover, ctx) ?? [];
         return {
@@ -94,6 +95,13 @@ export class HoverPhase {
             };
         });
     }
+    /** What the plot knows of a hovered row: its series, and whatever its kind adds. */
+    static #contextOf(kind) {
+        return (row) => {
+            const series = row[SERIES_KEY];
+            return { ...(typeof series === 'string' ? { series } : {}), ...kind?.(row) };
+        };
+    }
     /**
      * Which processed rows can be hovered: not a gap (no value where it sits, or
      * filled in by `styles.gaps`), and, while the legend narrows a continuous

package/dist/phases/mapping/MappingPhase.js

@@ -25,7 +25,8 @@ 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;

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

@@ -0,0 +1,18 @@
+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[];
+}