@fundar/data-chart-telling 1.15.0 → 1.17.0

package/CHANGELOG.md

@@ -2,6 +2,44 @@
 
 All notable changes to this project are documented here. The format follows [Keep a Changelog](https://keepachangelog.com/en/1.1.0/) and the project adheres to [Semantic Versioning](https://semver.org/).
 
+## [1.17.0] - 2026-11-06
+
+### Added
+
+- A `rect`, `cell`, `bar` or `waffle` marker takes a `label`: a text in the middle of each shape, with every option of a `text` marker, fitted to the shape - written smaller, down to `minFontSize`; then cut short with an ellipsis on as many lines as it holds; then as its `fallback`, a value alone, say; and left out when nothing fits. It takes no pointer from the shape, unless it has a handler of its own. `anchor` puts it against an edge or in a corner, and `outside` beyond the edge, where `fitMargins` makes room for it. A `text` marker takes the same `fit`, with a box of its own.
+- A `treemap` transform, for a `rect` marker on any plot kind: it lays the rows out as tiles in the unit square with d3-hierarchy - a tile per distinct path of `levels`, its area the sum of its rows' `value` - and gives `x1`/`x2`/`y1`/`y2` (and `x`/`y` at each tile's centre for a `text`). `tile` picks how a rectangle is split (`'squarify'`, `'binary'`, `'slice'`, `'dice'`, `'sliceDice'`) and `aspect` the shape of the box the tiles fill.
+- Every marker takes handlers for the pointer (`onclick`, `onpointerenter`, `onpointerleave`, `onpointermove`...), called with the event and the row of the shape. They are the props svelteplot documents on all its marks, passed on by every marker that draws one (not `brush`, `hover`, `inset`, `delta` or the map's `features`); svelteplot's code wires them up on `Rect`, `Bar`, `Cell`, `Area`, `Arrow`, `Dot`, `Trail`, `Vector`, `Line`, `Link`, `DelaunayLink` and `Voronoi` so far, and the rest will follow it. `rect`'s `styles.borderRadius` rounds its corners.
+- A `text` marker takes the pointer handlers every marker takes (`onclick`, `onpointerenter`...) in place of its own `onPointerEnter` and `onPointerLeave`, which are gone.
+- The `styles` of the markers that draw a shape per row - `rect`, `bar`, `cell`, `waffle`, `dot`, `tick`, `rule`, `arrow`, `voronoi` and `delaunayLink`, and `text` for `fill`, `fillOpacity`, `stroke`, `strokeWidth`, `fontWeight` and `fontStyle` - take a function of the row in place of a value: `styles: { fillOpacity: (row) => (row.selected ? 0.55 : 0.12) }`. A string names a field of the rows instead: a number such as `strokeWidth` or `fillOpacity` always, a color when the rows have a field of that name. A color or an opacity a function returns is drawn as it is.
+- `TreemapPlot`: a tile per row, its area its `value`, nested by `grouping` and laid out with `d3-hierarchy` (a `treemap` entry in `transforms` sets `tile`: `'squarify'`, `'binary'`, `'slice'`, `'dice'` or `'sliceDice'`). `grouping` is the whole path of a tile (`'sector.branch'`) (the last level names it, rows with the same path are one tile, so `grouping: 'sector'` alone is a tile per sector) and its outermost level colors the tiles and fills the legend. The tiles are the `treemap` transform drawn as `rect` markers with a `label`. `segments` can be keyed by the path of a tile (`'Tertiary.Finance'`), the most specific winning, and `tooltip.format(row, number, context)` gets the tile's `share` (0 to 100) in its `context`. A tile is labelled with its name over its share of the whole, as `styles.values` asks, and the label is fitted to the tile: at a smaller font size first, then the name cut short with an ellipsis, then the share alone, then nothing. Hovering a tile matches it alone. `treemap` in the configuration sets the line between tiles and the label's color, size and room.
+- `grouping` takes fields joined by dots (`'region.sex'`): the levels of one grouping, outermost first. A plot that nests its rows (`TreemapPlot`) nests by them; any other splits its rows by the combination of the levels, a series named `'CABA.F'`. A dotted name is a field when the rows have one by that name.
+- `DataProps` is now `DualAxisDataProps`, one of a family by the axes a plot has: `SingleAxisDataProps` (`x` or `y` alone, a histogram's or a density's) and `NonAxisDataProps` (no position channels, a treemap's), which the other two extend. Each takes the channels a plot cannot draw without as a second parameter.
+- `scales.color.depth`: with a `grouping` of several levels, the level the colors reach - each outermost value keeps its categorical color and the values under it, down to that level, take tones of it. A treemap colors its tiles so, and any other plot the series it splits by every level. `ColorTones` (`colorTones`, `hierarchicalColors`) builds the tones, for any plot of a hierarchy.
+- A legend's `disabled: { mode: 'rescale' }`: the series is removed and the parts left of a whole are the new 100% - a stack's categories are scaled back up to their totals, a treemap's tiles laid out and given their shares anew. `'omit'` now leaves a treemap's other tiles in their place and with their share of the whole.
+- The legend makes words of each level of a series grouped by several (`'Americas.Argentina'`).
+- A `value` channel: what a row amounts to as a part of a whole. `TreemapPlot` sizes its tiles by it; the other plots ignore it.
+- `tooltip.format` gets a third argument, `context`: what the plot knows of the row beyond its fields - its `series`, and what its kind adds (a treemap's `share`).
+- A marker's `strokeDasharray` takes a named line style - `'solid'`, `'dashed'`, `'dotted'`, `'dashdot'` - as well as an SVG dash pattern.
+- Every marker takes `hover: true`, which makes it a hit area of the plot's hover: the pointer over any of its shapes hovers its rows.
+- A label inside its shape (`rect`, `cell`, `bar`, `waffle`, and the value labels of every plot written in a shape) with no `fill` of its own is written in the color that reads best on the shape, as it is seen - blended with the plot's background as far as its `fillOpacity` lets it through. It picks from the configuration's new `text.label.contrast` (`['#ffffff', '#111827']`), and takes white or black instead when neither reaches WCAG AA (4.5:1).
+- `CssColor.alpha` and `CssColor.composite`: a color's opacity, and the opaque color it is seen as over a backdrop. `CssColor.contrastText` (and `contrastTextColor`) takes a `minRatio`, WCAG AA by default.
+
+### Changed
+
+- **Breaking:** `continuous.labelColor` and the `--dct-heat-text`, `--dct-heat-min` and `--dct-heat-max` CSS variables are gone: a heatmap's value labels contrast with each cell (`text.label.contrast`), and its ramp is the default continuous one, `continuous.min`/`max` or `continuous.scheme`, set with `setConfiguration`. No style read the variables.
+- The configuration's `--dct-*` CSS variables are set once on the document root (`:where(:root)`), not on each figure, so a variable set on a wrapping element overrides them, as the theming docs say. `cssVarsRule` writes them as that rule.
+- The axes, and what a plot writes in their ink (value labels outside their shape, a violin's box, a bullet's target, a Cleveland connector, a map's outlines), take `--dct-axis-color`; the timeline's current step takes `--dct-timeline-active`. Both fall back to the configuration.
+- `CssColor.contrastText` never returns a candidate under its `minRatio` (WCAG AA, 4.5:1) when white or black does better, and its luminance follows sRGB's own threshold (0.04045).
+- The value labels of `BarPlot`, `BulletPlot`, `PyramidPlot`, `HistogramPlot` and `HeatmapPlot` are the `label` of their own shapes (`bar`, `rect`, `cell`), so they fit them: a label that does not fit is written smaller, cut short, or left out. On those plots `styles.values.anchor` takes the anchors of a shape's label - `'middle'`, `'top'`, `'bottom'`, `'left'`, `'right'`, the corners (`'top-left'`...), and `'tip'` and `'base'`, the end of a bar away from zero and the one on it, on either side of zero - and `'outside'`, beyond the tip, which stays the default. `'start'` and `'end'` are gone from them (they were the top and bottom of the page, or the left and right, whatever the sign); the plots that label a point or the end of a line keep them. `fontStyle.dx` and `dy` now push a label from its anchor rather than replace its gap. A label with `hoverIsolate` still dims the other series and a dimmed series dims its labels. `LabelAnchor` is one type for the anchors of a text marker's `frameAnchor`, a shape's `label` and the plots' `anchor`.
+
+- Everything a marker is drawn with now goes in its `styles`, which takes a function of the row for any field: the `stroke`, `strokeWidth` and `strokeOpacity` of `rule` and `arrow` (they took a field key or a function beside `styles`), the `fill` and `fillOpacity` of `text` and the `fill` of `cell`, and the insets - `inset`, `insetLeft`, `insetRight`, `insetTop` and `insetBottom` of `rect`, `bar`, `cell` and `rule`, `inset`, `insetStart` and `insetEnd` of `arrow`. The field keys they took stay, now in `styles`: `styles: { stroke: 'color' }`.
+
+## [1.16.0] - 2026-11-04
+
+### Fixed
+
+- A timeline tweened with `interpolate` is at its last step once `progress` comes within `timeline.snap` (default `1e-4`, a ten-thousandth of the span; `0` turns it off) of it. A scrubber that stops a hair short of `1` - a scrolled step ends at `0.97` - drew the line all the way to the end with its easing, but left out the last row: its dot, and a marker like a `delta` placed on it.
+
 ## [1.15.0] - 2026-11-04
 
 ### Fixed

package/dist/configuration/ConfigVars.svelte

@@ -0,0 +1,14 @@
+<script lang="ts">
+	import { getConfiguration, configToCssVars, cssVarsRule } from './config.svelte';
+
+	/**
+	 * The configuration's `--dct-*` custom properties, as one rule on the document root rather than on each element
+	 * that reads them: an author's own rule - on a wrapping element too - overrides them.
+	 */
+	const rule = $derived(cssVarsRule(configToCssVars(getConfiguration())));
+</script>
+
+<svelte:head>
+	<!-- eslint-disable-next-line svelte/no-at-html-tags -->
+	{@html `<style data-dct-config>${rule}</style>`}
+</svelte:head>

package/dist/configuration/ConfigVars.svelte.d.ts

@@ -0,0 +1,3 @@
+declare const ConfigVars: import("svelte").Component<Record<string, never>, {}, "">;
+type ConfigVars = ReturnType<typeof ConfigVars>;
+export default ConfigVars;

package/dist/configuration/config.svelte.d.ts

@@ -8,5 +8,10 @@ export declare function setConfiguration(patch: PlotStylesConfigInput): PlotStyl
 export declare function resetConfiguration(): void;
 /** Flatten a config into the `--dct-*` custom properties used by the styles. */
 export declare function configToCssVars(c: PlotStylesConfig): Record<string, string>;
+/**
+ * A CSS-vars record as one rule on the document root, with no specificity (`:where(:root)`): every element inherits
+ * them, and any rule of the author's that sets one - on a wrapping element too - wins over it.
+ */
+export declare function cssVarsRule(vars: Record<string, string>): string;
 /** Serialize a CSS-vars record into a `style` attribute string. */
 export declare function cssVarsStyle(vars: Record<string, string>): string;

package/dist/configuration/config.svelte.js

@@ -61,7 +61,7 @@ export const DEFAULT_CONFIG = {
     palette: Palette.resolve('tableau10'),
     symbols: ['circle', 'square', 'triangle', 'diamond', 'star', 'cross'],
     // A light tint of the palette's first color up to the color itself.
-    continuous: { min: '#eaf0f6', max: '#4e79a7', labelColor: '#111827', opacityRange: [0.2, 1] },
+    continuous: { min: '#eaf0f6', max: '#4e79a7', opacityRange: [0.2, 1] },
     margins: { top: 'auto', right: 'auto', bottom: 'auto', left: 'auto' },
     frameClip: { tolerance: 2 },
     // ── Features ────────────────────────────────────────────────────────────────
@@ -179,11 +179,19 @@ export const DEFAULT_CONFIG = {
             disabledOpacity: 0.3
         }
     },
+    treemap: {
+        stroke: '#ffffff',
+        strokeWidth: 1.5,
+        fontSize: 12,
+        padding: 4,
+        lineHeight: 1.2
+    },
     timeline: {
         axisColor: 'currentColor',
         activeColor: '#4e79a7',
         thickness: 60,
         gap: '12px',
+        snap: 1e-4,
         rule: {
             fontSize: 12,
             activeFontSize: 20,
@@ -247,6 +255,7 @@ export const DEFAULT_CONFIG = {
         }
     },
     text: {
+        label: { gap: 4, padding: 4, minFontSize: 8, minLetters: 3, contrast: ['#ffffff', '#111827'] },
         declutter: {
             elbowGap: 10,
             laneStep: 7,
@@ -362,9 +371,6 @@ export function configToCssVars(c) {
         '--dct-divider-style': c.divider.style,
         '--dct-divider-margin': c.divider.margin,
         '--dct-row-gap': c.chrome.rowGap,
-        '--dct-heat-min': c.continuous.min,
-        '--dct-heat-max': c.continuous.max,
-        '--dct-heat-text': c.continuous.labelColor,
         '--dct-axis-color': c.axis.color,
         '--dct-legend-font': c.legend.font,
         '--dct-legend-size': c.legend.size,
@@ -439,6 +445,14 @@ export function configToCssVars(c) {
         '--dct-player-toggle-pad': c.timeline.player.toggle.padding
     };
 }
+/**
+ * A CSS-vars record as one rule on the document root, with no specificity (`:where(:root)`): every element inherits
+ * them, and any rule of the author's that sets one - on a wrapping element too - wins over it.
+ */
+export function cssVarsRule(vars) {
+    // A value never closes the `<style>` it is written in.
+    return `:where(:root){${cssVarsStyle(vars).replace(/</g, '')}}`;
+}
 /** Serialize a CSS-vars record into a `style` attribute string. */
 export function cssVarsStyle(vars) {
     return Object.entries(vars)

package/dist/configuration/themes/dark.js

@@ -9,7 +9,7 @@ export const DARK_THEME = {
     caption: { color: '#94a3b8' },
     legend: { gap: '0.5rem 1.5rem', swatchSize: '1rem' },
     palette: ['#38bdf8', '#f472b6', '#a3e635', '#fbbf24', '#c084fc'],
-    continuous: { min: '#1e293b', max: '#38bdf8', labelColor: '#e5e7eb' },
+    continuous: { min: '#1e293b', max: '#38bdf8' },
     axis: { color: '#94a3b8', fontSize: 13, xTickSize: 6, yTickSize: 6 },
     tooltip: { background: '#e5e7eb', color: '#0f172a' },
     facet: {

package/dist/configuration/themes/editorial.js

@@ -6,7 +6,7 @@ export const EDITORIAL_THEME = {
     subtitle: { color: '#8a6d3b', size: '1.05rem' },
     caption: { color: '#8a6d3b' },
     palette: ['#9b2226', '#606c38', '#6a4c93', '#ee9b00', '#005f73'],
-    continuous: { min: '#fff3e0', max: '#bb3e03', labelColor: '#2b2118' },
+    continuous: { min: '#fff3e0', max: '#bb3e03' },
     axis: { color: '#8a6d3b', fontSize: 13, xTickSize: 6, yTickSize: 6 },
     line: { strokeWidth: 5, dotRadius: 5 },
     timeline: { activeColor: '#bb3e03', axisColor: '#8a6d3b', thickness: 60 },

package/dist/index.d.ts

@@ -15,6 +15,7 @@ export { default as PyramidPlot } from './plots/distribution/pyramid/Plot.svelte
 export { default as ScatterPlot } from './plots/correlation/scatter/Plot.svelte';
 export { default as SlopePlot } from './plots/evolution/slope/Plot.svelte';
 export { default as SparklinePlot } from './plots/evolution/sparkline/Plot.svelte';
+export { default as TreemapPlot } from './plots/part-of-a-whole/treemap/Plot.svelte';
 export { default as ViolinPlot } from './plots/distribution/violin/Plot.svelte';
 export { default as PlotComposer } from './layout/composer/PlotComposer.svelte';
 export { default as GridCell } from './layout/grid/GridCell.svelte';
@@ -23,7 +24,7 @@ export { default as BasePlotLayout } from './layout/base/BasePlotLayout.svelte';
 export { usePlot, useFigure } from './layout/plot/usePlot';
 export type { PublicPlotContext, PublicFigureContext, PublicHover, PublicPlotHover, PublicLegend, PublicTimeline } from './layout/plot/PublicPlotContext';
 export { argentinaBicontinental } from './layout/coordinates/projections/argentina';
-export { setConfiguration, getConfiguration, resetConfiguration, configToCssVars, cssVarsStyle, DEFAULT_CONFIG } from './configuration/config.svelte';
+export { setConfiguration, getConfiguration, resetConfiguration, configToCssVars, cssVarsStyle, cssVarsRule, DEFAULT_CONFIG } from './configuration/config.svelte';
 export { THEMES } from './configuration/themes';
 export { SYSTEM_FONT } from './configuration/fonts';
 export type { ThemeName } from './configuration/themes';
@@ -33,10 +34,12 @@ export { Margins } from './layout/margins/Margins';
 export { resolveOpacityScale } from './utils/OpacityScale';
 export { resolveSymbolScale } from './utils/SymbolScale';
 export { Statistics } from './phases/statistics/Statistics';
-export type { AxisValue, ChannelValue, ChannelName, AxisChannelName, IndependentChannelName, SizeChannelName, ChannelAccessors } from './types/layout/mapping';
+export type { AxisValue, ChannelValue, ChannelName, AxisChannelName, IndependentChannelName, SizeChannelName, ChannelAccessors, GroupingAccessor } from './types/layout/mapping';
 export type { AxisScale, AxisBasedScalesConfig, ChannelScalesConfig } from './types/layout/scales';
 export type { NumberDisplay } from './types/layout/numbers';
-export type { Accessor, Series, SeriesProps, DataProps } from './types/plots/data/common';
+export type { TreemapPlotProps, TreemapTooltipContext } from './types/plots/part-of-a-whole/treemap/props';
+export type { TreemapTile } from './types/transforms/treemap';
+export type { Accessor, Series, SeriesProps, NonAxisDataProps, SingleAxisDataProps, DualAxisDataProps } from './types/plots/data/common';
 export type { BasePlotProps, PlotCoreProps, PlotChromeProps, FigureBoxProps, SegmentsConfig, ScalesConfig, MarginConfig, TooltipConfig, HoverConfig } from './types/plots/props';
 export type { AxisBasedStylesConfig, ConnectorBasedStylesConfig, BulletStylesConfig, GapsAwarePlotStylesConfig, CurveAwarePlotStylesConfig, GeoStylesConfig, GeoTileLayerConfig } from './types/layout/styles';
 export type { GapsConfig } from './types/plots/gaps';

package/dist/index.js

@@ -18,6 +18,7 @@ export { default as PyramidPlot } from './plots/distribution/pyramid/Plot.svelte
 export { default as ScatterPlot } from './plots/correlation/scatter/Plot.svelte';
 export { default as SlopePlot } from './plots/evolution/slope/Plot.svelte';
 export { default as SparklinePlot } from './plots/evolution/sparkline/Plot.svelte';
+export { default as TreemapPlot } from './plots/part-of-a-whole/treemap/Plot.svelte';
 export { default as ViolinPlot } from './plots/distribution/violin/Plot.svelte';
 // ── Composition ─────────────────────────────────────────────────────────────
 // Separate plots combined into one figure, with chrome of its own.
@@ -29,7 +30,7 @@ export { default as BasePlotLayout } from './layout/base/BasePlotLayout.svelte';
 export { usePlot, useFigure } from './layout/plot/usePlot';
 // Custom geo projections - usable as `scales.projection.type`.
 export { argentinaBicontinental } from './layout/coordinates/projections/argentina';
-export { setConfiguration, getConfiguration, resetConfiguration, configToCssVars, cssVarsStyle, DEFAULT_CONFIG } from './configuration/config.svelte';
+export { setConfiguration, getConfiguration, resetConfiguration, configToCssVars, cssVarsStyle, cssVarsRule, DEFAULT_CONFIG } from './configuration/config.svelte';
 export { THEMES } from './configuration/themes';
 export { SYSTEM_FONT } from './configuration/fonts';
 // ── Utils ─────────────────────────────────────────────────────────────────────

package/dist/layout/base/BasePlotLayout.svelte

@@ -317,7 +317,7 @@
 <div
 	class="dct-plot"
 	bind:this={containerEl}
-	style:color={cfg.axis.color}
+	style:color={`var(--dct-axis-color, ${cfg.axis.color})`}
 	style:touch-action={touchAction}
 	onpointermove={hover.active ? onMove : undefined}
 	onpointerleave={hover.active ? ctrl.onLeave : undefined}

package/dist/layout/figure/Figure.svelte

@@ -6,11 +6,8 @@
 	import TimelineRule from '../timeline/TimelineRule.svelte';
 	import { TimelineState } from '../timeline/TimelineState.svelte';
 	import { GridCellsRegistry } from '../grid/GridCellsRegistry.svelte';
-	import {
-		getConfiguration,
-		configToCssVars,
-		cssVarsStyle
-	} from '../../configuration/config.svelte';
+	import ConfigVars from '../../configuration/ConfigVars.svelte';
+	import { getConfiguration } from '../../configuration/config.svelte';
 	import { HoverState } from '../hover/HoverState.svelte';
 	import { LegendState } from '../legend/LegendState.svelte';
 	import { LegendLabels } from '../legend/LegendLabels';
@@ -165,18 +162,14 @@
 			plot={body}
 		/>
 	{:else}
-		<!-- No chrome means no container to stamp the `--dct-*` vars that facet and timeline chrome read. -->
-		<div
-			style={cssVarsStyle(configToCssVars(cfg))}
-			style:font-family="var(--dct-font, inherit)"
-			style:width="{w}px"
-			style:height="{h}px"
-		>
+		<div style:font-family="var(--dct-font, inherit)" style:width="{w}px" style:height="{h}px">
 			{@render body({ width: w, height: h })}
 		</div>
 	{/if}
 {/snippet}
 
+<ConfigVars />
+
 {#if grid}
 	<GridCell class="dct-grid-cell--figure" {area} {inset}>
 		{#snippet children(cell)}

package/dist/layout/figure/FigureChrome.svelte

@@ -2,11 +2,7 @@
 	import type { Snippet } from 'svelte';
 	import type { PlotBoxSnippet } from '../../types/layout/figure';
 	import type { PlotChromeEntry, PlotChromeItem } from '../../types/plots/props';
-	import {
-		getConfiguration,
-		configToCssVars,
-		cssVarsStyle
-	} from '../../configuration/config.svelte';
+	import { getConfiguration } from '../../configuration/config.svelte';
 
 	/**
 	 * A figure's chrome - a plot's or a composer's - drawn by its `Figure`. It owns the fixed footprint (`width`/`height`),
@@ -175,10 +171,6 @@
 
 	let bodyWidth = $state(0);
 	let bodyHeight = $state(0);
-
-	// Stamp every `--dct-*` custom property on the root so the scoped styles below
-	// (and any nested plot/legend/timeline) resolve them from the live config.
-	const themeStyle = $derived(cssVarsStyle(configToCssVars(getConfiguration())));
 </script>
 
 {#snippet cell(block: Cell)}
@@ -217,7 +209,7 @@
 	{/if}
 {/snippet}
 
-<div class="dct-figure-chrome" style={themeStyle} style:width="{width}px" style:height="{height}px">
+<div class="dct-figure-chrome" style:width="{width}px" style:height="{height}px">
 	{#each blocks as block (block.key)}
 		{#if block.type === 'divider'}
 			<hr class="dct-figure-chrome__divider" />

package/dist/layout/geometry/GeometryLayout.svelte

@@ -39,6 +39,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,6 +47,7 @@
 	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';
@@ -127,6 +129,32 @@
 		if (marker.type === 'bar') return `bar-${marker.role}-${i}`;
 		return `${marker.type}-${i}`;
 	}
+
+	/**
+	 * A marker with `hover: true`, with the plot's hover added to its own pointer handlers: entering or moving
+	 * over any of its shapes hovers its rows - as they are drawn now, should the plot have been laid out again
+	 * under a resting pointer - and leaving it ends the hover.
+	 */
+	function withHover(marker: MarkerConfig, rows: TData[] | TSeries[]): MarkerConfig {
+		if (!('hover' in marker) || marker.hover !== true) return marker;
+		const own = marker as CommonMarkerEvents & { data?: unknown[] };
+		const hovered = (own.data ?? rows) as TData[];
+		return {
+			...marker,
+			onpointerenter: (event: Event, row: unknown, index: number) => {
+				own.onpointerenter?.(event, row, index);
+				ctrl.onPointer(hovered);
+			},
+			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);
+			}
+		} as MarkerConfig;
+	}
 </script>
 
 {#snippet drawMarker(marker: MarkerConfig, rows: TData[] | TSeries[])}
@@ -237,7 +265,7 @@
 
 {#snippet renderMarker(marker: MarkerConfig, rows: TData[] | TSeries[])}
 	<MarkerOffset {marker}>
-		{@render drawMarker(marker, rows)}
+		{@render drawMarker(withHover(marker, rows), rows)}
 	</MarkerOffset>
 {/snippet}
 
@@ -299,3 +327,16 @@
 		{@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))}
+		<MarkerOffset {marker}>
+			<MarkerLabel marker={{ ...marker, data: marker.data ?? data }} />
+		</MarkerOffset>
+	{/if}
+{/each}

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

@@ -1,4 +1,4 @@
-import type { TooltipProp } from '../../types/layout/tooltip';
+import type { TooltipContext, TooltipProp } from '../../types/layout/tooltip';
 import type { HoverPoint, HoverStrategy } from '../../types/layout/hover';
 import { PlotAxes } from '../../phases/data/PlotAxes';
 import type { HoverConfig, PointMatchingStrategy, TooltipConfig } from '../../types/plots/props';
@@ -31,5 +31,7 @@ export declare class HoverSettings<TRow extends Record<string, unknown>> {
         defaultStrategy: HoverStrategy;
         pointMatching?: PointMatchingStrategy;
         number?: (value: number) => string;
+        /** What the plot knows of a row, the third argument of the author's own `format` - see {@link TooltipContext}. */
+        context?: (row: TRow) => TooltipContext;
     }): HoverConfig<TRow>;
 }

package/dist/layout/hover/HoverSettings.js

@@ -33,7 +33,7 @@ export class HoverSettings {
     }
     /** A plot's `hover` config; its tooltip reads as `format` unless it sets its own. */
     static buildConfig(args) {
-        const { tooltip, format, sort, markers, points, label, defaultStrategy, pointMatching } = args;
+        const { tooltip, format, sort, markers, points, label, defaultStrategy, pointMatching, context } = args;
         const number = args.number ?? String;
         const settings = new HoverSettings(tooltip, markers, defaultStrategy);
         return {
@@ -44,7 +44,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, context?.(row) ?? {})
+                    : format,
                 ...(sort ? { sort } : {})
             },
             ...(pointMatching ? { pointMatching } : {})

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

@@ -48,12 +48,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

@@ -119,13 +119,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/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/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}