@fundar/data-chart-telling 1.17.0 → 1.19.0

package/dist/plots/evolution/sparkline/markers.js

@@ -1,3 +1,4 @@
+import { ValueLabels } from '../../../layout/styles/ValueLabels';
 import { getConfiguration } from '../../../configuration/config.svelte';
 import { buildLineMarkers } from '../line/markers';
 import { resolveAccessor } from '../../../utils/accessors';
@@ -6,10 +7,10 @@ import { isGapValue } from '../../utils/gaps';
  * SparklinePlot's "markers" phase: each series' line, thin, and a dot on its
  * last point with a value.
  */
-export function buildMarks(state, ctx) {
+export function buildMarks(state, env) {
     const { sparkline } = getConfiguration();
     const groups = state.processedGroups ?? [];
-    const disabledDotsFor = (name) => ctx.interaction?.dotsFor(name);
+    const disabledDotsFor = (name) => env.interaction?.dotsFor(name);
     const lines = buildLineMarkers({
         groupedSeries: groups.map((group) => ({
             ...group,
@@ -22,7 +23,7 @@ export function buildMarks(state, ctx) {
             }))
         })),
         colorFor: state.colorForSeries,
-        disabledStrokeFor: (name) => ctx.interaction?.strokeFor(name),
+        disabledStrokeFor: (name) => env.interaction?.strokeFor(name),
         disabledDotsFor,
         curve: state.styles?.curve
     });
@@ -52,5 +53,6 @@ export function buildMarks(state, ctx) {
             }
         ];
     });
-    return [...lines, ...dots];
+    const labels = state.valueLabels?.show ? state.valueLabels.forSeries(state, env) : undefined;
+    return [...ValueLabels.onMarkers(lines, 'line', labels), ...dots];
 }

package/dist/plots/generic/Plot.svelte

@@ -0,0 +1,42 @@
+<script lang="ts" generics="TData extends Record<string, unknown>">
+	import AbstractPlot from '../../layout/plot/AbstractPlot.svelte';
+	import { buildGenericDefaults } from './defaults';
+	import type { GenericPlotProps, GenericPlotCoreProps } from '../../types/plots/generic/props';
+
+	/**
+	 * A plot of no kind: no shapes or defaults of its own, only its `markers`. `data` and the channels
+	 * are optional; markers without their own take them, and its `segments`, `transforms`, `styles`,
+	 * chrome, `timeline` and `facet` work as on any plot.
+	 * `margins` is bindable: it reports the margin the plot settled on.
+	 */
+	let {
+		title,
+		subtitle,
+		caption,
+		header,
+		footer,
+		legend,
+		order,
+		timeline,
+		facet,
+		tooltip,
+		margins = $bindable(),
+		...core
+	}: GenericPlotProps<TData> = $props();
+</script>
+
+<AbstractPlot
+	core={core as GenericPlotCoreProps<TData>}
+	defaults={buildGenericDefaults}
+	bind:margins
+	{title}
+	{subtitle}
+	{caption}
+	{header}
+	{footer}
+	{legend}
+	{order}
+	{timeline}
+	{facet}
+	{tooltip}
+/>

package/dist/plots/generic/Plot.svelte.d.ts

@@ -0,0 +1,25 @@
+import type { GenericPlotProps } from '../../types/plots/generic/props';
+declare function $$render<TData extends Record<string, unknown>>(): {
+    props: GenericPlotProps<TData>;
+    exports: {};
+    bindings: "margins";
+    slots: {};
+    events: {};
+};
+declare class __sveltets_Render<TData extends Record<string, unknown>> {
+    props(): ReturnType<typeof $$render<TData>>['props'];
+    events(): ReturnType<typeof $$render<TData>>['events'];
+    slots(): ReturnType<typeof $$render<TData>>['slots'];
+    bindings(): "margins";
+    exports(): {};
+}
+interface $$IsomorphicComponent {
+    new <TData extends Record<string, unknown>>(options: import('svelte').ComponentConstructorOptions<ReturnType<__sveltets_Render<TData>['props']>>): import('svelte').SvelteComponent<ReturnType<__sveltets_Render<TData>['props']>, ReturnType<__sveltets_Render<TData>['events']>, ReturnType<__sveltets_Render<TData>['slots']>> & {
+        $$bindings?: ReturnType<__sveltets_Render<TData>['bindings']>;
+    } & ReturnType<__sveltets_Render<TData>['exports']>;
+    <TData extends Record<string, unknown>>(internal: unknown, props: ReturnType<__sveltets_Render<TData>['props']> & {}): ReturnType<__sveltets_Render<TData>['exports']>;
+    z_$$bindings?: ReturnType<__sveltets_Render<any>['bindings']>;
+}
+declare const Plot: $$IsomorphicComponent;
+type Plot<TData extends Record<string, unknown>> = InstanceType<typeof Plot<TData>>;
+export default Plot;

package/dist/plots/generic/defaults.d.ts

@@ -0,0 +1,4 @@
+import type { AxisPlotDefaults } from '../../types/phases';
+import type { GenericPlotState, GenericPlotEnv } from '../../types/plots/generic/state';
+/** The plot with no kind: it draws only its `markers`. */
+export declare function buildGenericDefaults<TData extends Record<string, unknown>>(): AxisPlotDefaults<GenericPlotState<TData>, GenericPlotEnv>;

package/dist/plots/generic/defaults.js

@@ -0,0 +1,7 @@
+/** The plot with no kind: it draws only its `markers`. */
+export function buildGenericDefaults() {
+    return {
+        data: { segments: { color: (style) => style?.fill } },
+        markers: { marks: () => [] }
+    };
+}

package/dist/plots/map/geo/Core.svelte

@@ -7,7 +7,7 @@
 	import BasePlotLayout from '../../../layout/base/BasePlotLayout.svelte';
 	import type { GeoPlotCoreProps } from '../../../types/plots/map/geo/props';
 	import type { CoordinatesConfig } from '../../../types/layout/coordinates';
-	import type { GeoPlotState, GeoPlotCtx } from '../../../types/plots/map/geo/state';
+	import type { GeoPlotState, GeoPlotEnv } from '../../../types/plots/map/geo/state';
 
 	/**
 	 * A map from GeoJSON or TopoJSON. `segments` styles features by id,
@@ -76,7 +76,7 @@
 		y: { domain: [90, -90] }
 	});
 
-	const ctx = $derived<GeoPlotCtx<TProps>>({
+	const env = $derived<GeoPlotEnv<TProps>>({
 		cfg,
 		range,
 		fill: styles.fill,
@@ -103,7 +103,7 @@
 				height,
 				margins
 			},
-			ctx
+			env
 		) as GeoPlotState<TProps>
 	);
 

package/dist/plots/map/geo/Plot.svelte

@@ -1,6 +1,6 @@
 <script lang="ts" generics="TProps extends Record<string, unknown>">
 	import Core from './Core.svelte';
-	import Plot from '../../../layout/plot/Plot.svelte';
+	import AbstractPlot from '../../../layout/plot/AbstractPlot.svelte';
 	import { merge } from '../../../utils/merge';
 	import { buildGeoDefaults } from './defaults';
 	import { buildGeoSlicing } from './slices';
@@ -87,7 +87,7 @@
 	}
 </script>
 
-<Plot
+<AbstractPlot
 	{Core}
 	core={core as GeoPlotCoreProps<TProps>}
 	defaults={buildGeoDefaults}

package/dist/plots/map/geo/Plot.svelte.d.ts

@@ -1,4 +1,3 @@
-import Plot from '../../../layout/plot/Plot.svelte';
 import type { GeoPlotProps } from '../../../types/plots/map/geo/props';
 declare function $$render<TProps extends Record<string, unknown>>(): {
     props: GeoPlotProps<TProps>;

package/dist/plots/map/geo/defaults.d.ts

@@ -1,4 +1,4 @@
-import type { GeoPlotState, GeoPlotCtx } from '../../../types/plots/map/geo/state';
+import type { GeoPlotState, GeoPlotEnv } from '../../../types/plots/map/geo/state';
 import { Pipeline } from '../../../phases/Pipeline';
 /** GeoPlot's own pipeline (data, scales, markers, tooltip, hover), run over the state its core seeds, hovering one feature at a time. */
-export declare function buildGeoDefaults<TProps extends Record<string, unknown>>(): Pipeline<GeoPlotState<TProps>, GeoPlotCtx<TProps>>;
+export declare function buildGeoDefaults<TProps extends Record<string, unknown>>(): Pipeline<GeoPlotState<TProps>, GeoPlotEnv<TProps>>;

package/dist/plots/map/geo/phases/data.d.ts

@@ -1,6 +1,6 @@
 import type { GeoPlotState } from '../../../../types/plots/map/geo/state';
 /**
  * GeoPlot's "data" phase: every feature tagged with its resolved id/centroid,
- * then reduced by `excludeParts`. Reads no ctx.
+ * then reduced by `excludeParts`. Reads no env.
  */
 export declare function buildData<TProps extends Record<string, unknown>>(state: GeoPlotState<TProps>): GeoPlotState<TProps>;

package/dist/plots/map/geo/phases/data.js

@@ -3,7 +3,7 @@ import { GeoGeometry } from '../GeoGeometry';
 import { GeoFeatures } from '../GeoFeatures.svelte';
 /**
  * GeoPlot's "data" phase: every feature tagged with its resolved id/centroid,
- * then reduced by `excludeParts`. Reads no ctx.
+ * then reduced by `excludeParts`. Reads no env.
  */
 export function buildData(state) {
     const { rawFeatures, featureId, excludeParts } = state;

package/dist/plots/map/geo/phases/hover.d.ts

@@ -1,4 +1,4 @@
-import type { GeoPlotState, GeoPlotCtx } from '../../../../types/plots/map/geo/state';
+import type { GeoPlotState, GeoPlotEnv } from '../../../../types/plots/map/geo/state';
 /** Whether a pointer event is over an `inset` marker's panel, which has its own hover. */
 export declare function isOverInset(e: PointerEvent): boolean;
 /**
@@ -6,4 +6,4 @@ export declare function isOverInset(e: PointerEvent): boolean;
  * feature under the cursor and read as its id. A feature outside the active
  * legend range stays drawn, dimmed, but is never a candidate.
  */
-export declare function buildHover<TProps extends Record<string, unknown>>(state: GeoPlotState<TProps>, ctx: GeoPlotCtx<TProps>): GeoPlotState<TProps>;
+export declare function buildHover<TProps extends Record<string, unknown>>(state: GeoPlotState<TProps>, env: GeoPlotEnv<TProps>): GeoPlotState<TProps>;

package/dist/plots/map/geo/phases/hover.js

@@ -10,9 +10,9 @@ export function isOverInset(e) {
  * feature under the cursor and read as its id. A feature outside the active
  * legend range stays drawn, dimmed, but is never a candidate.
  */
-export function buildHover(state, ctx) {
+export function buildHover(state, env) {
     const { color, tooltip, authoredMarkers } = state;
-    const { range } = ctx;
+    const { range } = env;
     const features = state.features;
     const label = (f) => f.__id;
     const points = features
@@ -28,7 +28,7 @@ export function buildHover(state, ctx) {
             defaultStrategy: 'punctual',
             // Match the feature under the cursor, not the nearest centroid.
             pointMatching: 'contains',
-            number: NumberFormat.of(NumberFormat.displayOf(tooltip), ctx.cfg)
+            number: NumberFormat.of(NumberFormat.displayOf(tooltip), env.cfg)
         }),
         // A map has no axes for a crosshair: 'punctual' only means an exact match.
         strategy: 'punctual',

package/dist/plots/map/geo/phases/markers.d.ts

@@ -1,4 +1,4 @@
-import type { GeoPlotState, GeoPlotCtx } from '../../../../types/plots/map/geo/state';
+import type { GeoPlotState, GeoPlotEnv } from '../../../../types/plots/map/geo/state';
 /**
  * GeoPlot's "markers" phase: per-feature style resolution/grouping, the base
  * `'geo'` marker(s), and the full draw order - any authored marker with
@@ -6,4 +6,4 @@ import type { GeoPlotState, GeoPlotCtx } from '../../../../types/plots/map/geo/s
  * with any `hover` marker moved last. The base marker(s) match the pointer
  * themselves, over the features inside the legend's range.
  */
-export declare function buildMarkers<TProps extends Record<string, unknown>>(state: GeoPlotState<TProps>, ctx: GeoPlotCtx<TProps>): GeoPlotState<TProps>;
+export declare function buildMarkers<TProps extends Record<string, unknown>>(state: GeoPlotState<TProps>, env: GeoPlotEnv<TProps>): GeoPlotState<TProps>;

package/dist/plots/map/geo/phases/markers.js

@@ -19,9 +19,9 @@ function isBehindMarker(marker) {
  * with any `hover` marker moved last. The base marker(s) match the pointer
  * themselves, over the features inside the legend's range.
  */
-export function buildMarkers(state, ctx) {
+export function buildMarkers(state, env) {
     const { features, segments, authoredMarkers, color, grouping, resolveColor, resolveOpacity } = state;
-    const { range, fill, fillOpacity, stroke, strokeWidth, cfg, onFeatureClick } = ctx;
+    const { range, fill, fillOpacity, stroke, strokeWidth, cfg, onFeatureClick } = env;
     const OPACITY_STEPS = 32;
     function rangeFilteredStyle(base, f) {
         if (range == null || !color)
@@ -67,6 +67,6 @@ export function buildMarkers(state, ctx) {
     const behindMarkers = authoredMarkers.filter(isBehindMarker);
     const frontMarkers = authoredMarkers.filter((m) => !isBehindMarker(m) && m.type !== 'geo-hover');
     const hoverMarker = authoredMarkers.find((m) => m.type === 'geo-hover');
-    const markers = MarkerStyles.resolveAll(MarkerChannels.inheritAll([...behindMarkers, ...featureMarkers, ...frontMarkers, ...(hoverMarker ? [hoverMarker] : [])], state.scales), { cfg: ctx.cfg });
+    const markers = MarkerStyles.resolveAll(MarkerChannels.inheritAll([...behindMarkers, ...featureMarkers, ...frontMarkers, ...(hoverMarker ? [hoverMarker] : [])], state.scales), { cfg: env.cfg });
     return { ...state, markers, styleGroups };
 }

package/dist/plots/map/geo/phases/scales.d.ts

@@ -1,4 +1,4 @@
-import type { GeoPlotState, GeoPlotCtx } from '../../../../types/plots/map/geo/state';
+import type { GeoPlotState, GeoPlotEnv } from '../../../../types/plots/map/geo/state';
 /**
  * GeoPlot's "scales" phase: each feature's own resolved color (mirrors
  * HeatmapPlot's own), with a per-feature override for whichever segment
@@ -7,4 +7,4 @@ import type { GeoPlotState, GeoPlotCtx } from '../../../../types/plots/map/geo/s
  * the features that share its own key, so e.g. two grouping buckets each
  * get a ramp scaled to their own value range, not the whole dataset's.
  */
-export declare function buildScales<TProps extends Record<string, unknown>>(state: GeoPlotState<TProps>, ctx: GeoPlotCtx<TProps>): GeoPlotState<TProps>;
+export declare function buildScales<TProps extends Record<string, unknown>>(state: GeoPlotState<TProps>, env: GeoPlotEnv<TProps>): GeoPlotState<TProps>;

package/dist/plots/map/geo/phases/scales.js

@@ -10,9 +10,9 @@ import { GeoSegments } from '../GeoSegments';
  * the features that share its own key, so e.g. two grouping buckets each
  * get a ramp scaled to their own value range, not the whole dataset's.
  */
-export function buildScales(state, ctx) {
+export function buildScales(state, env) {
     const { scales, features, color, grouping, opacity, segments } = state;
-    const { range, cfg } = ctx;
+    const { range, cfg } = env;
     const colorValues = color
         ? features.map((f) => color(f)).filter((v) => v != null)
         : [];

package/dist/plots/part-of-a-whole/treemap/Plot.svelte

@@ -1,5 +1,5 @@
 <script lang="ts" generics="TData extends Record<string, unknown>">
-	import Plot from '../../../layout/plot/Plot.svelte';
+	import AbstractPlot from '../../../layout/plot/AbstractPlot.svelte';
 	import { buildTreemapDefaults } from './defaults';
 	import type {
 		TreemapPlotProps,
@@ -30,7 +30,7 @@
 	}: TreemapPlotProps<TData> = $props();
 </script>
 
-<Plot
+<AbstractPlot
 	core={core as TreemapPlotCoreProps<TData>}
 	defaults={buildTreemapDefaults}
 	bind:margins

package/dist/plots/part-of-a-whole/treemap/Plot.svelte.d.ts

@@ -1,4 +1,3 @@
-import Plot from '../../../layout/plot/Plot.svelte';
 import type { TreemapPlotProps } from '../../../types/plots/part-of-a-whole/treemap/props';
 declare function $$render<TData extends Record<string, unknown>>(): {
     props: TreemapPlotProps<TData>;

package/dist/plots/part-of-a-whole/treemap/defaults.d.ts

@@ -1,5 +1,5 @@
 import type { AxisPlotDefaults } from '../../../types/phases';
-import type { TreemapPlotState, TreemapPlotCtx } from '../../../types/plots/part-of-a-whole/treemap/state';
+import type { TreemapPlotState, TreemapPlotEnv } from '../../../types/plots/part-of-a-whole/treemap/state';
 /**
  * TreemapPlot on the shared pipeline: its rows are the tiles of the `treemap` transform, laid out in a unit square
  * the plot's two continuous axes span (hidden). Its series are the outermost level of its `grouping`, which colors
@@ -7,4 +7,4 @@ import type { TreemapPlotState, TreemapPlotCtx } from '../../../types/plots/part
  * hovering its row: an invisible `rect` over each one drives the plot's hover, and its tooltip names the tile and
  * gives its share.
  */
-export declare function buildTreemapDefaults<TData extends Record<string, unknown>>(): AxisPlotDefaults<TreemapPlotState<TData>, TreemapPlotCtx>;
+export declare function buildTreemapDefaults<TData extends Record<string, unknown>>(): AxisPlotDefaults<TreemapPlotState<TData>, TreemapPlotEnv>;

package/dist/plots/part-of-a-whole/treemap/defaults.js

@@ -1,4 +1,6 @@
 import { TREEMAP_ROW } from '../../../phases/transforms/methods/TreemapTransform';
+import { HoverDefaults } from '../../../layout/hover/HoverDefaults';
+import { RowContext } from '../../../phases/context/RowContext';
 import { NumberFormat } from '../../../utils/NumberFormat';
 import { Grouping } from '../../../utils/grouping';
 import { getConfiguration } from '../../../configuration/config.svelte';
@@ -13,14 +15,22 @@ const DEFAULT_ASPECT = 1.6;
 function shareDisplay(values) {
     return { ...NumberFormat.displayOf(values), suffix: values?.suffix ?? '%' };
 }
-/** A tile's name, path and share (from `0` to `100`), as the transform left them on its row. */
+/**
+ * What a treemap knows of a tile, as the transform left it on its row: its name, path, summed value and share
+ * (from `0` to `100`). The tiles sit in a unit square, so they have no `x` or `y` to read.
+ */
 function tileOf(row) {
     return {
         name: String(row[TREEMAP_ROW.name] ?? ''),
         path: row[TREEMAP_ROW.path] ?? [],
-        share: Number(row[TREEMAP_ROW.share]) * 100
+        value: Number(row[TREEMAP_ROW.value]),
+        share: Number(row[TREEMAP_ROW.share]) * 100,
+        x: undefined,
+        y: undefined
     };
 }
+/** A tile's context, as the "context" phase left it on its row. */
+const contextOf = (row) => RowContext.of(row);
 /**
  * The plot's tiles: a `treemap` of its `value`, nested by the levels of its `grouping` (its `color` when unset,
  * as every plot groups by it then) and shaped for its box,
@@ -50,7 +60,7 @@ function edgesOf(state) {
  * (`'Tertiary.Finance'`), outermost first, so the more specific wins. The series' own are in its style already.
  */
 function pathKeysOf(state, row) {
-    const { path } = tileOf(row);
+    const { path } = contextOf(row);
     return path
         .slice(1)
         .map((_, i) => path.slice(0, i + 2).join(Grouping.SEPARATOR))
@@ -60,35 +70,37 @@ function pathKeysOf(state, row) {
  * The tiles as `rect` markers, each with a `label`: the name of the tile over its share, fitted to it. A series'
  * tiles take its style - its color, under `styles.area` and the segments keyed by it (and `default`) - and the
  * segments keyed by a tile's path restyle it, so the tiles split into one marker per style. The legend's dimming
- * goes over all of them.
+ * goes over all of them, and the hover marker's `active` and `others` over the tiles it reaches.
  */
-function buildMarks(state, ctx) {
+function buildMarks(state, env) {
     if (!state.processedData?.data.length)
         return [];
-    const look = ctx.cfg.treemap;
+    const look = env.cfg.treemap;
     const edges = edgesOf(state);
     const labels = state.valueLabels?.show ? state.valueLabels : undefined;
-    const number = NumberFormat.of(shareDisplay(state.values), ctx.cfg, SHARE_DECIMALS);
-    const shareText = (row, series) => {
-        const { share } = tileOf(row);
-        return state.values?.format ? state.values.format(share, series, row, number) : number(share);
+    const number = NumberFormat.of(shareDisplay(state.values), env.cfg, SHARE_DECIMALS);
+    const shareText = (row) => {
+        const context = contextOf(row);
+        return state.values?.format
+            ? state.values.format(context.share, number, context)
+            : number(context.share);
     };
     /** The label of a series' tiles: the name over the share, fitted - or the share alone where the name does not fit. */
-    const labelOf = (labels, series) => {
-        const shape = labels.shapeLabel(ctx, (row) => `${tileOf(row).name}
-${shareText(row, series)}`, { fontSize: look.fontSize });
+    const labelOf = (labels) => {
+        const shape = labels.label(env, (row) => `${contextOf(row).name}
+${shareText(row)}`, { fontSize: look.fontSize });
         return {
             ...shape,
             styles: { lineHeight: look.lineHeight, ...shape.styles },
-            fit: { padding: look.padding, fallback: (row) => shareText(row, series) }
+            fit: { padding: look.padding, fallback: (row) => shareText(row) }
         };
     };
     return (state.processedGroups ?? []).flatMap((group) => {
         const series = group.series.name;
-        const dimmed = ctx.interaction?.fillFor(series);
+        const dimmed = env.interaction?.fillFor(series);
         const seriesColor = state.colorForSeries(series);
         /** A tile's color: its series', or a tone of it by its path while `scales.color.depth` asks for one. */
-        const colorOf = (row) => state.colorForPath ? state.colorForPath(tileOf(row).path) : seriesColor;
+        const colorOf = (row) => state.colorForPath ? state.colorForPath(contextOf(row).path) : seriesColor;
         return group.visualSegments.flatMap((segment) => {
             const styled = new Map();
             for (const row of segment.data) {
@@ -111,7 +123,8 @@ ${shareText(row, series)}`, { fontSize: look.fontSize });
                         stroke: style.stroke ?? look.stroke,
                         strokeWidth: style.strokeWidth ?? look.strokeWidth
                     },
-                    label: labels && labelOf(labels, series)
+                    label: labels && labelOf(labels),
+                    hover: 'style'
                 };
             });
         });
@@ -133,6 +146,8 @@ export function buildTreemapDefaults() {
         },
         // An omitted sector keeps its tiles' room, and every other tile its share; a rescaled one does not.
         transforms: { transforms: buildTransforms, keepsOmitted: true },
+        // A tile's name, path, value and share, for its label, its tooltip and its hover.
+        context: () => tileOf,
         scales: {
             defaults: () => ({
                 x: { axisDisplay: 'none', grid: false },
@@ -140,28 +155,29 @@ export function buildTreemapDefaults() {
             }),
             fit: () => ({ x: { domain: [0, 1], fitted: true }, y: { domain: [0, 1], fitted: true } })
         },
-        styles: { values: { show: true } },
+        styles: { values: { show: true, layout: 'box' } },
         markers: { marks: buildMarks },
         hover: {
             strategy: 'punctual',
             // A tile is hovered through its own hit area, not through whichever point the pointer is nearest.
             pointMatching: 'contains',
+            // A tile has no axes for a crosshair, and writes its own label: its hover only restyles the tiles.
+            marker: (_state, env) => HoverDefaults.shapes(env.cfg),
             hitAreas: (state, hover) => hover.points.map(({ row }) => ({
                 type: 'rect',
                 data: [row],
                 ...edgesOf(state),
                 styles: { fill: 'transparent' },
-                hover: hover.active
+                hover: hover.active && 'trigger'
             })),
             format: (state) => {
                 const number = NumberFormat.of(shareDisplay(state.values), getConfiguration(), SHARE_DECIMALS);
                 return ((row) => {
-                    const tile = tileOf(row);
+                    const tile = contextOf(row);
                     return `${tile.name}: ${number(tile.share)}`;
                 });
             },
-            label: () => ((row) => tileOf(row).name),
-            context: () => ((row) => ({ share: tileOf(row).share }))
+            label: () => ((row) => contextOf(row).name)
         }
     };
 }

package/dist/plots/ranking/bar/Plot.svelte

@@ -1,5 +1,5 @@
 <script lang="ts" generics="TData extends Record<string, unknown>">
-	import Plot from '../../../layout/plot/Plot.svelte';
+	import AbstractPlot from '../../../layout/plot/AbstractPlot.svelte';
 	import { buildBarDefaults } from './defaults';
 	import type { BarPlotProps, BarPlotCoreProps } from '../../../types/plots/ranking/bar/props';
 
@@ -24,7 +24,7 @@
 	}: BarPlotProps<TData> = $props();
 </script>
 
-<Plot
+<AbstractPlot
 	core={core as BarPlotCoreProps<TData>}
 	defaults={buildBarDefaults}
 	bind:margins

package/dist/plots/ranking/bar/Plot.svelte.d.ts

@@ -1,4 +1,3 @@
-import Plot from '../../../layout/plot/Plot.svelte';
 import type { BarPlotProps } from '../../../types/plots/ranking/bar/props';
 declare function $$render<TData extends Record<string, unknown>>(): {
     props: BarPlotProps<TData>;

package/dist/plots/ranking/bar/defaults.d.ts

@@ -1,6 +1,6 @@
 import type { AxisPlotDefaults } from '../../../types/phases';
 import type { AxisScale } from '../../../types/layout/scales';
-import type { BarPlotState, BarPlotCtx } from '../../../types/plots/ranking/bar/state';
+import type { BarPlotState, BarPlotEnv } from '../../../types/plots/ranking/bar/state';
 /**
  * The domain a bar plot fits to its own bars on its value axis: from zero to
  * the tallest span (and the `extra` values a plot draws beyond its bars), niced to as many ticks as fit the plot. Left out when the
@@ -13,4 +13,4 @@ export declare function fitValueDomain<TData extends Record<string, unknown>>(st
  * it off the values - its own scales (padding, bar layout) and markers.
  * Its plot defaults to: hover along the category axis, timeline tweens matched per category and group.
  */
-export declare function buildBarDefaults<TData extends Record<string, unknown>>(): AxisPlotDefaults<BarPlotState<TData>, BarPlotCtx>;
+export declare function buildBarDefaults<TData extends Record<string, unknown>>(): AxisPlotDefaults<BarPlotState<TData>, BarPlotEnv>;

package/dist/plots/ranking/bar/defaults.js

@@ -3,6 +3,7 @@ import { buildMarks, buildHitAreas, buildBarGeometry } from './markers';
 import { NiceTicks } from '../../../layout/scales/NiceTicks';
 import { SERIES_KEY } from '../../../phases/transforms/TransformsPhase';
 import { PlotAxes } from '../../../phases/data/PlotAxes';
+import { HoverDefaults } from '../../../layout/hover/HoverDefaults';
 /**
  * The domain a bar plot fits to its own bars on its value axis: from zero to
  * the tallest span (and the `extra` values a plot draws beyond its bars), niced to as many ticks as fit the plot. Left out when the
@@ -53,22 +54,32 @@ export function buildBarDefaults() {
         },
         scales: {
             zero: ['value'],
-            defaults: (_state, ctx) => ({
-                category: { paddingInner: ctx.cfg.bar.paddingInner, paddingOuter: ctx.cfg.bar.paddingOuter }
+            defaults: (_state, env) => ({
+                category: { paddingInner: env.cfg.bar.paddingInner, paddingOuter: env.cfg.bar.paddingOuter }
             }),
             fit: (state) => fitValueDomain(state)
         },
+        transforms: { labels: {} },
         styles: {
             values: {
+                layout: (state) => ProcessedPositions.span(state.processedData, PlotAxes.valueOf(state))
+                    .stacked
+                    ? 'box'
+                    : 'path',
+                layouts: {
+                    path: { edge: 'tip', side: 'outside' },
+                    box: { anchor: 'middle' },
+                    point: { anchor: 'top', side: 'above' }
+                },
                 // An `'outside'` label sits past its bar's end, which the tallest bar takes to the edge.
                 reach: (labels, state) => {
-                    if (labels.anchor !== 'outside')
+                    if (!labels.pastTip)
                         return [];
                     const axis = PlotAxes.valueOf(state);
                     if (ProcessedPositions.span(state.processedData, axis).stacked)
                         return [];
                     if (!state.axes?.isHorizontal) {
-                        const offset = labels.offset('y');
+                        const offset = labels.offset();
                         const boxes = [
                             labels.edgeBox('0', { x: 'middle', y: 'before' }, { y: -offset }, ['top'])
                         ];
@@ -81,12 +92,12 @@ export function buildBarDefaults() {
                         return boxes;
                     }
                     // A bar below zero reaches out to the left, with its label turned that way.
-                    const offset = labels.offset('x');
+                    const offset = labels.offset();
                     return labels
                         .extremes(state.resolvedSeries ?? [], PlotAxes.valueOf(state), 'both')
                         .map(({ series, value }) => value < 0
-                        ? labels.edgeBox(labels.format(value, series.name), { x: 'before', y: 'middle' }, { x: -offset }, ['left'])
-                        : labels.edgeBox(labels.format(value, series.name), { x: 'after', y: 'middle' }, { x: offset }, ['right']));
+                        ? labels.edgeBox(labels.format(value, undefined, series.name), { x: 'before', y: 'middle' }, { x: -offset }, ['left'])
+                        : labels.edgeBox(labels.format(value, undefined, series.name), { x: 'after', y: 'middle' }, { x: offset }, ['right']));
                 }
             }
         },
@@ -95,13 +106,18 @@ export function buildBarDefaults() {
             // Each bar matched by its own band (see `buildHitAreas`); a grouped bar's dot is
             // drawn in its series' slice of the band.
             pointMatching: 'contains',
-            decorate: (state, ctx) => {
-                const { sliceOf } = buildBarGeometry(state, ctx.cfg.bar.seriesPadding);
+            decorate: (state, env) => {
+                const { sliceOf } = buildBarGeometry(state, env.cfg.bar.seriesPadding);
                 return (row) => ({
                     areaInset: sliceOf(String(row[SERIES_KEY]))
                 });
             },
-            hitAreas: buildHitAreas
+            hitAreas: buildHitAreas,
+            // The hovered category's band behind its bars - its series' slice of it, when that bar alone is hovered.
+            marker: (state) => ({
+                back: [HoverDefaults.band(state.axes?.isHorizontal ? 'y' : 'x')],
+                front: []
+            })
         },
         timeline: { interpolation: { value: 'value', key: ['category', 'grouping'] } }
     };

package/dist/plots/ranking/bar/markers.d.ts

@@ -1,5 +1,5 @@
 import type { BarMarkerConfig } from '../../../types/markers/common';
-import type { BarPlotState, BarPlotCtx } from '../../../types/plots/ranking/bar/state';
+import type { BarPlotState, BarPlotEnv } from '../../../types/plots/ranking/bar/state';
 import type { ProcessedRow } from '../../../types/phases';
 import type { AxisValue } from '../../../types/layout/mapping';
 import type { BandSlice } from '../../../types/layout/hover';
@@ -25,11 +25,11 @@ export declare function buildBarGeometry<TData extends Record<string, unknown>>(
  * slice of it. The pointer needn't be over the visible bar. They drive the
  * plot's hover when it is active.
  */
-export declare function buildHitAreas<TData extends Record<string, unknown>>(state: BarPlotState<TData>, hover: HoverConfig<any>, ctx: BarPlotCtx): BarMarkerConfig[];
+export declare function buildHitAreas<TData extends Record<string, unknown>>(state: BarPlotState<TData>, hover: HoverConfig<any>, env: BarPlotEnv): BarMarkerConfig[];
 /**
  * BarPlot's "markers" phase: visible `role: 'segment'` bars - real data plus
  * gap fills - drawing the rows the "transforms" phase left, prepended onto
  * whatever the "statistics" phase already put in `state.markers`, and its
  * value labels on top of everything.
  */
-export declare function buildMarks<TData extends Record<string, unknown>>(state: BarPlotState<TData>, ctx: BarPlotCtx): AxisBasedMarkersConfig[];
+export declare function buildMarks<TData extends Record<string, unknown>>(state: BarPlotState<TData>, env: BarPlotEnv): AxisBasedMarkersConfig[];