@fundar/data-chart-telling 1.16.0 → 1.18.0

package/dist/layout/geometry/GeometryLayout.svelte

@@ -28,6 +28,7 @@
 	import DotMarker from '../../markers/dot/DotMarker.svelte';
 	import TextMarker from '../../markers/text/TextMarker.svelte';
 	import RuleMarker from '../../markers/rule/RuleMarker.svelte';
+	import BandMarker from '../../markers/band/BandMarker.svelte';
 	import HoverMarker from '../../markers/hover/HoverMarker.svelte';
 	import GeoHoverMarker from '../../markers/geo/GeoHoverMarker.svelte';
 	import DeltaMarker from '../../markers/delta/DeltaMarker.svelte';
@@ -39,6 +40,7 @@
 	import ContourMarker from '../../markers/contour/ContourMarker.svelte';
 	import ContourClipMarker from '../../markers/contour/ContourClipMarker.svelte';
 	import InsetMarker from '../../markers/inset/InsetMarker.svelte';
+	import MarkerLabel from '../../markers/utils/MarkerLabel.svelte';
 	import FrameClip from './FrameClip.svelte';
 	import MarkerOffset from './MarkerOffset.svelte';
 	import { getConfiguration } from '../../configuration/config.svelte';
@@ -46,12 +48,21 @@
 	import { PlotMargins } from '../margins/PlotMargins.svelte';
 	import type { Series } from '../../types/plots/data/common';
 	import type { MarkerConfig } from '../../types/markers/all';
+	import type { CommonMarkerEvents } from '../../types/markers/channels/commonMarkerEvents';
 	import type { TooltipAnchorX, TooltipAnchorY } from '../../types/layout/tooltip';
 	import type { PlotHover } from '../hover/PlotHover.svelte';
 	import type { ScopedMarkerGroup } from '../../types/layout/geometry';
 	import type { GeoFeature } from '../../types/plots/data/geo';
 	import { MarkerGrouping } from '../../phases/statistics/MarkerGrouping';
 	import { FrameClipping } from './FrameClipping';
+	import { HoverShapes, type HoverShapesReach } from '../hover/HoverShapes';
+	import { PlotInteraction } from '../interaction/PlotInteraction.svelte';
+	import { SERIES_KEY } from '../../phases/transforms/TransformsPhase';
+	import { HoverLayers, type HoverPointGroup } from '../hover/HoverLayers';
+	import { BandNudge } from '../../markers/utils/BandNudge';
+	import { PointPixel } from '../../markers/utils/PointPixel';
+	import { HoverDefaults } from '../hover/HoverDefaults';
+	import type { HoverMarkerConfig } from '../../types/markers/common';
 
 	/**
 	 * Renders every marker in `markers`, in array order, each delegated to the
@@ -105,9 +116,137 @@
 	} = $props();
 
 	const cfg = $derived(getConfiguration());
+	const interaction = PlotInteraction.current(() => cfg);
+
+	/**
+	 * The markers, each `hover` one laid over the plot kind's own hover under the strategy in force - read as they
+	 * are drawn, so a strategy changed while the plot is shown changes what the hover draws.
+	 */
+	const drawn = $derived.by(() => {
+		const look = ctrl.look;
+		return markers.map((marker) =>
+			marker.type === 'hover'
+				? (HoverDefaults.merge(look, marker as HoverMarkerConfig) as MarkerConfig)
+				: marker
+		);
+	});
+
+	/** The look the hover markers give the shapes linked to the hover. */
+	const shapes = $derived(new HoverShapes(drawn));
+	const reach: HoverShapesReach = {
+		roleOf: (row, series) => ctrl.roleOf(row as TData, series),
+		dimmed: (row) => {
+			const series = row[SERIES_KEY];
+			return typeof series === 'string' && interaction.fillFor(series) !== undefined;
+		},
+		get cfg() {
+			return cfg;
+		}
+	};
 
 	// Mounted inside svelteplot's `<Plot>`, the one place the margins it settles on can be read.
-	PlotMargins.current()?.follow(usePlot().svelteplot);
+	const svelteplot = usePlot().svelteplot;
+	PlotMargins.current()?.follow(svelteplot);
+
+	/**
+	 * The points a hover marker draws over: every matched one; with `series`, that series' only, in its color -
+	 * or with `scope: 'segment'`, each segment's, in the segment's. The first is the active one of a series.
+	 */
+	function hoverGroupsOf(marker: HoverMarkerConfig): HoverPointGroup[] {
+		const points = ctrl.points;
+		if (points.length === 0) return [];
+		const nearest = JSON.parse(nearestKey || '{}') as {
+			all?: number;
+			bySeries?: Record<string, number>;
+		};
+		const scope = marker.series;
+		if (!scope) {
+			const active = nearest.all !== undefined ? points[nearest.all] : undefined;
+			return [{ key: '', points, active: active ?? ctrl.activePoint }];
+		}
+		const under = nearest.bySeries?.[scope];
+		const activeOf = (list: typeof points) =>
+			(under !== undefined && list.find((p) => p.row === points[under].row)) || list[0] || null;
+		const group = groupByName.get(scope);
+		if (!group) return [];
+		const own = points.filter((p) => p.series === scope);
+		const colored = (list: typeof own, color: string | undefined) =>
+			color ? list.map((p) => ({ ...p, color })) : list;
+		if (marker.scope !== 'segment') {
+			const seriesPoints = colored(own, group.segments[0]?.color ?? group.color);
+			return [{ key: scope, points: seriesPoints, active: activeOf(seriesPoints) }];
+		}
+		return group.segments.map((seg, i) => {
+			// p.row (TData) is always a superset of TSeries in practice, not provable across two independent generics.
+			const segPoints = colored(
+				own.filter((p) => seg.match(p.row as unknown as TSeries)),
+				seg.color
+			);
+			return { key: `${scope}-${i}`, points: segPoints, active: activeOf(segPoints) };
+		});
+	}
+
+	/**
+	 * The hovered point under the pointer: of all of them, and of each series - the nearest to the pointer, not the
+	 * first the strategy matched, so a crosshair at it follows the pointer across the series of a category. Kept as
+	 * text, so the hover's markers are built again only when it changes, not at every move of the pointer.
+	 */
+	const nearestKey = $derived.by(() => {
+		const cursor = ctrl.cursor;
+		const points = ctrl.points;
+		if (!cursor || points.length === 0) return '';
+		const all = PointPixel.nearest(svelteplot.scales, points, cursor);
+		const bySeries: Record<string, number> = {};
+		for (const series of new Set(points.map((p) => p.series))) {
+			if (series == null) continue;
+			const indexes = points.flatMap((p, i) => (p.series === series ? [i] : []));
+			const nearest = PointPixel.nearest(
+				svelteplot.scales,
+				indexes.map((i) => points[i]),
+				cursor
+			);
+			if (nearest >= 0) bySeries[series] = indexes[nearest];
+		}
+		return JSON.stringify({ all: all >= 0 ? all : undefined, bySeries });
+	});
+
+	/** The markers `marker`'s `layer` draws, over each group of the points it draws over. */
+	function hoverPartsOf(marker: HoverMarkerConfig, layer: 'back' | 'front', index: number) {
+		return hoverGroupsOf(marker).flatMap((group) =>
+			HoverLayers.parts(
+				marker,
+				layer,
+				{
+					...group,
+					points: HoverLayers.labelled(group.points, marker, cfg),
+					active: group.active && HoverLayers.labelled([group.active], marker, cfg)[0]
+				},
+				cfg
+			).map((part) => ({ ...part, key: `${index}-${part.key}` }))
+		);
+	}
+
+	/**
+	 * What each hover marker draws, behind and in front, built once per hover - not as it is drawn, where reading
+	 * the scales would build its markers anew whenever svelteplot settles them, and settle them again.
+	 */
+	const hoverLayers = $derived(
+		new Map(
+			drawn.flatMap((marker, index) =>
+				marker.type === 'hover'
+					? [
+							[
+								index,
+								{
+									back: hoverPartsOf(marker as HoverMarkerConfig, 'back', index),
+									front: hoverPartsOf(marker as HoverMarkerConfig, 'front', index)
+								}
+							] as const
+						]
+					: []
+			)
+		)
+	);
 
 	const scopedSeriesOf = (marker: MarkerConfig): string | undefined =>
 		'series' in marker && typeof marker.series === 'string' && marker.series
@@ -127,6 +266,33 @@
 		if (marker.type === 'bar') return `bar-${marker.role}-${i}`;
 		return `${marker.type}-${i}`;
 	}
+
+	/**
+	 * A marker with `hover: true` or `'trigger'`, with the plot's hover added to its own pointer handlers: entering or
+	 * moving over one of its shapes hovers that shape's row, and leaving it ends the hover.
+	 */
+	function withHover(marker: MarkerConfig, rows: TData[] | TSeries[]): MarkerConfig {
+		if (!('hover' in marker) || (marker.hover !== true && marker.hover !== 'trigger'))
+			return marker;
+		const own = marker as CommonMarkerEvents & { data?: unknown[] };
+		// The row of the shape under the pointer - a copy svelteplot hands over, which the hover finds by its place.
+		const hovered = (row: unknown) => [(row ?? (own.data ?? rows)[0]) as TData];
+		return {
+			...marker,
+			onpointerenter: (event: Event, row: unknown, index: number) => {
+				own.onpointerenter?.(event, row, index);
+				ctrl.onPointer(hovered(row));
+			},
+			onpointerleave: (event: Event, row: unknown, index: number) => {
+				own.onpointerleave?.(event, row, index);
+				ctrl.onLeave();
+			},
+			onpointermove: (event: Event, row: unknown, index: number) => {
+				own.onpointermove?.(event, row, index);
+				ctrl.onPointer(hovered(row));
+			}
+		} as MarkerConfig;
+	}
 </script>
 
 {#snippet drawMarker(marker: MarkerConfig, rows: TData[] | TSeries[])}
@@ -182,6 +348,8 @@
 		<TextMarker marker={{ ...marker, data: marker.data ?? rows }} />
 	{:else if marker.type === 'rule'}
 		<RuleMarker {marker} />
+	{:else if marker.type === 'band'}
+		<BandMarker {marker} />
 	{:else if marker.type === 'geo'}
 		<GeoFeaturesMarker {marker} />
 	{:else if marker.type === 'graticule'}
@@ -219,15 +387,6 @@
 		<marker.component {...marker.props} data={marker.data ?? seriesData} />
 	{:else if marker.type === 'geo-component'}
 		<marker.component {...marker.props} data={marker.data ?? rows} />
-	{:else if marker.type === 'hover'}
-		<HoverMarker
-			{marker}
-			data={ctrl.points}
-			activePoint={ctrl.activePoint}
-			impliesCrosshairX={ctrl.impliesCrosshairX}
-			impliesCrosshairY={ctrl.impliesCrosshairY}
-			onActivePointPixel={ctrl.reportActivePointPixel}
-		/>
 	{:else if marker.type === 'geo-hover'}
 		<GeoHoverMarker {marker} data={ctrl.points} />
 	{:else if marker.type === 'delta'}
@@ -236,41 +395,16 @@
 {/snippet}
 
 {#snippet renderMarker(marker: MarkerConfig, rows: TData[] | TSeries[])}
-	<MarkerOffset {marker}>
-		{@render drawMarker(marker, rows)}
-	</MarkerOffset>
+	<!-- In parts the hover styles alike, while it restyles the marker's shapes. -->
+	{#each shapes.split(withHover(marker, rows), rows, reach) as part (part.key)}
+		<MarkerOffset marker={part.marker}>
+			{@render drawMarker(part.marker, rows)}
+		</MarkerOffset>
+	{/each}
 {/snippet}
 
 {#snippet renderScoped(marker: MarkerConfig, group: ScopedMarkerGroup<TSeries>)}
-	{#if marker.type === 'hover'}
-		{@const seriesPoints = ctrl.points.filter((p) => p.series === group.name)}
-		{#if marker.scope === 'segment'}
-			{#each group.segments as seg, segIdx (`${group.name}-hover-segment-${segIdx}`)}
-				<!-- p.row (TData) is always a superset of TSeries in practice, not provable across two independent generics. -->
-				{@const segPoints = seriesPoints.filter((p) => seg.match(p.row as unknown as TSeries))}
-				{#if segPoints.length > 0}
-					<HoverMarker
-						marker={MarkerGrouping.withHoverSeriesColor(marker, seg.color)}
-						data={segPoints}
-						activePoint={segPoints[0] ?? null}
-						impliesCrosshairX={ctrl.impliesCrosshairX}
-						impliesCrosshairY={ctrl.impliesCrosshairY}
-					/>
-				{/if}
-			{/each}
-		{:else}
-			<HoverMarker
-				marker={MarkerGrouping.withHoverSeriesColor(
-					marker,
-					group.segments[0]?.color ?? group.color
-				)}
-				data={seriesPoints}
-				activePoint={seriesPoints[0] ?? null}
-				impliesCrosshairX={ctrl.impliesCrosshairX}
-				impliesCrosshairY={ctrl.impliesCrosshairY}
-			/>
-		{/if}
-	{:else if marker.type === 'component'}
+	{#if marker.type === 'component'}
 		{#if marker.scope === 'segment'}
 			{#each group.segments as seg, segIdx (`${group.name}-component-segment-${segIdx}`)}
 				{@const segmentData = group.data.filter((row) => seg.match(row))}
@@ -288,10 +422,35 @@
 	{/if}
 {/snippet}
 
-<!-- Every marker in array order, so a later one always draws on top. -->
+{#snippet renderHoverLayer(index: number, layer: 'back' | 'front')}
+	{#each hoverLayers.get(index)?.[layer] ?? [] as part (part.key)}
+		<!-- A point in a slice of its band (a grouped bar's series) is drawn in the middle of it. -->
+		{@const nudge = BandNudge.of(svelteplot.scales, part.slice)}
+		<g transform="translate({nudge.dx}, {nudge.dy})">
+			<FrameClip clip={FrameClipping.isClipped(part.marker)}>
+				{@render renderMarker(part.marker as MarkerConfig, data)}
+			</FrameClip>
+		</g>
+	{/each}
+{/snippet}
+
+<!-- What the hover draws behind the plot's shapes, before any of them. -->
+{#each [...hoverLayers.keys()] as index (index)}
+	{@render renderHoverLayer(index, 'back')}
+{/each}
+
+<!-- Every marker in array order, so a later one always draws on top; a hover marker draws its front markers. -->
 {#each markers as marker, i (markerKey(marker, i))}
 	{@const scope = scopedSeriesOf(marker)}
-	{#if scope === undefined}
+	{#if marker.type === 'hover'}
+		{#if scope === undefined}
+			<HoverMarker
+				activePoint={ctrl.activePoint}
+				onActivePointPixel={ctrl.reportActivePointPixel}
+			/>
+		{/if}
+		{@render renderHoverLayer(i, 'front')}
+	{:else if scope === undefined}
 		<FrameClip clip={FrameClipping.isClipped(marker)}>
 			{@render renderMarker(marker, data)}
 		</FrameClip>
@@ -299,3 +458,19 @@
 		{@render renderScoped(marker, groupByName.get(scope)!)}
 	{/if}
 {/each}
+
+<!--
+	The labels the shapes write in themselves, after every marker - the hover's hit areas too, which are the last of them -
+	so a label that listens for the pointer is not covered, and one outside its shape is not clipped with it.
+-->
+{#each markers as marker, i (markerKey(marker, i))}
+	{@const scope = scopedSeriesOf(marker)}
+	{#if 'label' in marker && marker.label && (scope === undefined || groupByName.has(scope))}
+		<!-- Split as the shapes are, so a label reads on its shape's color under the hover. -->
+		{#each shapes.split(marker, data, reach) as part (part.key)}
+			<MarkerOffset marker={part.marker}>
+				<MarkerLabel marker={{ ...part.marker, data: part.marker.data ?? data }} />
+			</MarkerOffset>
+		{/each}
+	{/if}
+{/each}

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

@@ -0,0 +1,52 @@
+import type { HoverDisplayPoint, HoverStrategy } from '../../types/layout/hover';
+import type { HoverLayerMarker, HoverLook, HoverMarkerConfig } from '../../types/markers/common';
+import type { PlotStylesConfig } from '../../types/configuration/styling';
+/** An end of a span: a field of the hovered point's context (else of its row), or a function of the point. */
+type SpanEnd = string | ((point: HoverDisplayPoint) => unknown);
+/**
+ * The hover a plot kind draws, and how an author's `hover` marker is laid over it. Its parts - a crosshair rule, a
+ * band, a dot, a label - are the markers a kind composes its own hover from; each takes the configuration's
+ * `hover` look as it is drawn (see `HoverLayers`).
+ */
+export declare class HoverDefaults {
+    /** A crosshair along `axis`, at the point under the pointer. */
+    static rule(axis: 'x' | 'y'): HoverLayerMarker;
+    /** The band of each hovered category along `axis`, or its series' slice of it when it alone is hovered there. */
+    static band(axis: 'x' | 'y'): HoverLayerMarker;
+    /**
+     * The span of the point under the pointer along `axis`, from `from` to `to`, across the whole of the other axis -
+     * where a band is no category's: a histogram's bin, an interval on a continuous axis. Each end is a field of the
+     * point's context (a bin's `from` and `to`) - else of its row - or a function of the point.
+     */
+    static span(axis: 'x' | 'y', from: SpanEnd, to: SpanEnd): HoverLayerMarker;
+    /** A dot on each hovered point, in its series' color. */
+    static dot(): HoverLayerMarker;
+    /** Each hovered point's label, in its series' color. */
+    static text(): HoverLayerMarker;
+    /**
+     * A hover that only restyles the shapes, with `active` and `others`: a treemap's tiles, a heatmap's cells. The
+     * hovered one is outlined, in the configuration's `hover.active`.
+     */
+    static shapes(cfg: PlotStylesConfig): HoverLook;
+    /** The hovered category's band along `axis`, behind the plot's shapes: a bar's, a box's, a violin's. */
+    static behindBand(axis: 'x' | 'y'): HoverLook;
+    /** The span of the point under the pointer along `axis`, behind the plot's shapes: a histogram's bin. */
+    static behindSpan(axis: 'x' | 'y', from: SpanEnd, to: SpanEnd): HoverLook;
+    /**
+     * A rule along the value axis at the point under the pointer, and a dot and a label on each point - for a plot
+     * whose other axis holds a few positions or categories, where a crosshair along it says little (a slope's, a
+     * Cleveland plot's).
+     */
+    static valueRule(valueAxis: 'x' | 'y'): HoverLook;
+    /**
+     * The hover every plot kind starts from: a crosshair along each axis its `strategy` matches along (unless
+     * `crosshair` is off), and a dot and a label on each hovered point.
+     */
+    static of(strategy: HoverStrategy, crosshair?: boolean | undefined): HoverLook;
+    /**
+     * An author's `hover` marker over its kind's `look`: `active` and `others` field by field, `back` and `front`
+     * the author's when set (an empty list draws nothing), the kind's otherwise.
+     */
+    static merge(look: HoverLook, marker: HoverMarkerConfig): HoverMarkerConfig;
+}
+export {};

package/dist/layout/hover/HoverDefaults.js

@@ -0,0 +1,96 @@
+/**
+ * The hover a plot kind draws, and how an author's `hover` marker is laid over it. Its parts - a crosshair rule, a
+ * band, a dot, a label - are the markers a kind composes its own hover from; each takes the configuration's
+ * `hover` look as it is drawn (see `HoverLayers`).
+ */
+export class HoverDefaults {
+    /** A crosshair along `axis`, at the point under the pointer. */
+    static rule(axis) {
+        return { type: 'rule', axis, points: 'active' };
+    }
+    /** The band of each hovered category along `axis`, or its series' slice of it when it alone is hovered there. */
+    static band(axis) {
+        return { type: 'band', axis };
+    }
+    /**
+     * The span of the point under the pointer along `axis`, from `from` to `to`, across the whole of the other axis -
+     * where a band is no category's: a histogram's bin, an interval on a continuous axis. Each end is a field of the
+     * point's context (a bin's `from` and `to`) - else of its row - or a function of the point.
+     */
+    static span(axis, from, to) {
+        const end = (side) => typeof side === 'function'
+            ? side
+            : (point) => point.context?.[side] ?? point.row?.[side];
+        return {
+            type: 'rect',
+            [`${axis}1`]: end(from),
+            [`${axis}2`]: end(to),
+            points: 'active'
+        };
+    }
+    /** A dot on each hovered point, in its series' color. */
+    static dot() {
+        return { type: 'dot' };
+    }
+    /** Each hovered point's label, in its series' color. */
+    static text() {
+        return { type: 'text' };
+    }
+    /**
+     * A hover that only restyles the shapes, with `active` and `others`: a treemap's tiles, a heatmap's cells. The
+     * hovered one is outlined, in the configuration's `hover.active`.
+     */
+    static shapes(cfg) {
+        return { back: [], front: [], active: { ...cfg.hover.active } };
+    }
+    /** The hovered category's band along `axis`, behind the plot's shapes: a bar's, a box's, a violin's. */
+    static behindBand(axis) {
+        return { back: [HoverDefaults.band(axis)], front: [] };
+    }
+    /** The span of the point under the pointer along `axis`, behind the plot's shapes: a histogram's bin. */
+    static behindSpan(axis, from, to) {
+        return { back: [HoverDefaults.span(axis, from, to)], front: [] };
+    }
+    /**
+     * A rule along the value axis at the point under the pointer, and a dot and a label on each point - for a plot
+     * whose other axis holds a few positions or categories, where a crosshair along it says little (a slope's, a
+     * Cleveland plot's).
+     */
+    static valueRule(valueAxis) {
+        return {
+            back: [HoverDefaults.rule(valueAxis)],
+            front: [HoverDefaults.dot(), HoverDefaults.text()]
+        };
+    }
+    /**
+     * The hover every plot kind starts from: a crosshair along each axis its `strategy` matches along (unless
+     * `crosshair` is off), and a dot and a label on each hovered point.
+     */
+    static of(strategy, crosshair = true) {
+        const axes = strategy === 'x'
+            ? ['x']
+            : strategy === 'y'
+                ? ['y']
+                : strategy === 'punctual'
+                    ? ['x', 'y']
+                    : [];
+        return {
+            back: crosshair === false ? [] : axes.map((axis) => HoverDefaults.rule(axis)),
+            front: [HoverDefaults.dot(), HoverDefaults.text()]
+        };
+    }
+    /**
+     * An author's `hover` marker over its kind's `look`: `active` and `others` field by field, `back` and `front`
+     * the author's when set (an empty list draws nothing), the kind's otherwise.
+     */
+    static merge(look, marker) {
+        const styles = (own, base) => own || base ? { ...base, ...own } : undefined;
+        return {
+            ...marker,
+            active: styles(marker.active, look.active),
+            others: styles(marker.others, look.others),
+            back: marker.back ?? look.back ?? [],
+            front: marker.front ?? look.front ?? []
+        };
+    }
+}

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

@@ -0,0 +1,35 @@
+import type { BandSlice, HoverDisplayPoint } from '../../types/layout/hover';
+import type { HoverLayerMarker, HoverMarkerConfig } from '../../types/markers/common';
+import type { PlotStylesConfig } from '../../types/configuration/styling';
+type Point = HoverDisplayPoint & {
+    row?: unknown;
+};
+/** One marker a hover layer draws, keyed so it keeps its place while the hover moves, and the slice it is moved into. */
+export type HoverLayerPart = {
+    key: string;
+    marker: HoverLayerMarker;
+    slice?: BandSlice;
+};
+/** Some hovered points: of the whole plot, of one series, or of one segment of it, with the one under the pointer. */
+export type HoverPointGroup = {
+    key: string;
+    points: Point[];
+    active: Point | null;
+};
+/**
+ * The markers a `hover` marker draws in its `back` and `front` layers, over the hovered points: each with the
+ * points as its rows, unless it has `data` of its own, placed at them, and split by the slice of the band a point
+ * sits in (a grouped bar's series), to be moved into it - all but a `band`, which takes the slice itself.
+ */
+export declare class HoverLayers {
+    #private;
+    /** `points` with their label written as `marker`'s number fields, or its `format`, ask. */
+    static labelled<T extends Point>(points: readonly T[], marker: HoverMarkerConfig, cfg: PlotStylesConfig): T[];
+    /**
+     * The markers of `marker`'s `layer` over a group of points. A marker over points that sit in a slice of their
+     * band is one part per slice, which `slice` names, to be moved into it as it is drawn - the move is in pixels,
+     * so it is left to the drawing, which knows the band's width.
+     */
+    static parts(marker: HoverMarkerConfig, layer: 'back' | 'front', group: HoverPointGroup, cfg: PlotStylesConfig): HoverLayerPart[];
+}
+export {};

package/dist/layout/hover/HoverLayers.js

@@ -0,0 +1,122 @@
+import { NumberFormat } from '../../utils/NumberFormat';
+/**
+ * The markers a `hover` marker draws in its `back` and `front` layers, over the hovered points: each with the
+ * points as its rows, unless it has `data` of its own, placed at them, and split by the slice of the band a point
+ * sits in (a grouped bar's series), to be moved into it - all but a `band`, which takes the slice itself.
+ */
+export class HoverLayers {
+    /** The kinds placed by `x` and `y`, which default to the point's. */
+    static #PLACED = new Set(['dot', 'text', 'tick', 'image', 'line', 'trail']);
+    /** `points` with their label written as `marker`'s number fields, or its `format`, ask. */
+    static labelled(points, marker, cfg) {
+        const numberOf = NumberFormat.maybe(NumberFormat.displayOf(marker), cfg);
+        const number = numberOf ?? NumberFormat.of(undefined, cfg);
+        const { format } = marker;
+        if (!format && !numberOf)
+            return [...points];
+        return points.map((point) => {
+            if (format)
+                return { ...point, label: format(point, number) };
+            const value = Number(point.label);
+            const written = point.label !== undefined && point.label !== '' && Number.isFinite(value)
+                ? numberOf(value)
+                : point.label;
+            return { ...point, label: written ?? '' };
+        });
+    }
+    /**
+     * The markers of `marker`'s `layer` over a group of points. A marker over points that sit in a slice of their
+     * band is one part per slice, which `slice` names, to be moved into it as it is drawn - the move is in pixels,
+     * so it is left to the drawing, which knows the band's width.
+     */
+    static parts(marker, layer, group, cfg) {
+        if (group.points.length === 0)
+            return [];
+        return (marker[layer] ?? []).flatMap((nested, i) => {
+            const key = `${layer}-${group.key}-${i}`;
+            const { points: which, ...own } = nested;
+            if (own.data)
+                return [{ key, marker: own }];
+            const rows = HoverLayers.#pointsOf(which, group);
+            if (rows.length === 0)
+                return [];
+            const placed = HoverLayers.#placed(HoverLayers.#inHover(own, cfg));
+            if (own.type === 'band')
+                return [{ key, marker: { ...placed, data: rows } }];
+            return HoverLayers.#bySlice(rows).map(({ slice, points }) => ({
+                key: `${key}-${slice ? `${slice.start},${slice.end}` : ''}`,
+                marker: { ...placed, data: points },
+                slice
+            }));
+        });
+    }
+    /** The points a nested marker draws: all of them, the one under the pointer, or those a function keeps. */
+    static #pointsOf(which, group) {
+        if (which === 'active')
+            return group.active ? [group.active] : [];
+        if (typeof which === 'function')
+            return group.points.filter(which);
+        return group.points;
+    }
+    /**
+     * `marker` with what it leaves unset taken from the hover: a `rule` at each point along its axis and a `band`
+     * around it, in its slice; a `text` writes the point's label; each in the configuration's `hover` look (a `rect`
+     * too, in its `area` one), and a `dot` and a `text` in the point's series color.
+     */
+    static #inHover(marker, cfg) {
+        const own = marker;
+        const color = (point) => point.color ?? 'currentColor';
+        switch (marker.type) {
+            case 'rule':
+                return {
+                    ...marker,
+                    value: own.value ?? ((point) => point[marker.axis]),
+                    styles: { ...cfg.hover.rule, ...own.styles }
+                };
+            case 'band':
+                return {
+                    ...marker,
+                    value: own.value ?? ((point) => point[marker.axis]),
+                    slice: own.slice ?? ((point) => point.areaInset),
+                    styles: { ...cfg.hover.area, ...own.styles }
+                };
+            case 'rect':
+                return { ...marker, styles: { ...cfg.hover.area, ...own.styles } };
+            case 'dot':
+                return {
+                    ...marker,
+                    styles: { ...cfg.hover.dot, dotFill: color, dotStroke: color, ...own.styles }
+                };
+            case 'text':
+                return {
+                    ...marker,
+                    text: own.text ?? ((point) => point.label),
+                    styles: { ...cfg.hover.font, fill: color, ...own.styles }
+                };
+            default:
+                return marker;
+        }
+    }
+    /** `marker` placed at the points: its own `x` and `y`, else the point's. */
+    static #placed(marker) {
+        if (!HoverLayers.#PLACED.has(marker.type))
+            return marker;
+        const own = marker;
+        return {
+            ...marker,
+            x: own.x ?? ((point) => point.x),
+            y: own.y ?? ((point) => point.y)
+        };
+    }
+    /** `points` split by the slice of the band each one sits in, in the order they come. */
+    static #bySlice(points) {
+        const groups = new Map();
+        for (const point of points) {
+            const slice = point.areaInset;
+            const id = slice ? `${slice.start},${slice.end}` : '';
+            const group = groups.get(id) ?? groups.set(id, { slice, points: [] }).get(id);
+            group.points.push(point);
+        }
+        return [...groups.values()];
+    }
+}

package/dist/layout/hover/HoverSettings.js

@@ -1,3 +1,4 @@
+import { RowContext } from '../../phases/context/RowContext';
 import { PlotAxes } from '../../phases/data/PlotAxes';
 /**
  * A plot's hover as its `tooltip` and hover marker set it up: whether it is on,
@@ -44,7 +45,9 @@ export class HoverSettings {
             sync: settings.sync,
             tooltip: tooltip && {
                 ...tooltip,
-                format: tooltip.format ? (row) => tooltip.format(row, number) : format,
+                format: tooltip.format
+                    ? (row) => tooltip.format(row, number, RowContext.of(row))
+                    : format,
                 ...(sort ? { sort } : {})
             },
             ...(pointMatching ? { pointMatching } : {})