@fundar/data-chart-telling 1.16.0 → 1.18.0

package/dist/markers/bar/BarMarker.svelte

@@ -1,30 +1,25 @@
 <script lang="ts">
+	import { RowStyle } from '../utils/RowStyle';
+	import { MarkerEvents } from '../utils/MarkerEvents';
 	import { BarX, BarY } from 'svelteplot';
 	import { usePlot } from '../../layout/plot/usePlot';
-	import { PlotContext } from '../../layout/plot/PlotContext';
 	import { MarkerChannels } from '../utils/MarkerChannels';
 	import { getConfiguration } from '../../configuration/config.svelte';
 	import type { BarMarkerConfig } from '../../types/markers/common';
 
 	/**
 	 * Renders one `'bar'` marker: `role: 'segment'` (visible bar via
-	 * `<BarX>`/`<BarY>`), `role: 'hitArea'` (invisible hover hit region for
-	 * one segment), or `role: 'highlight'` (visible area highlight).
+	 * `<BarX>`/`<BarY>`) or `role: 'hitArea'` (invisible hover hit region for
+	 * one segment).
 	 */
 	let { marker }: { marker: BarMarkerConfig } = $props();
+	const events = MarkerEvents.use(() => marker);
 
 	const cfg = $derived(getConfiguration());
 	const data = $derived(marker.data ?? []);
 	const channelFill = $derived(MarkerChannels.buildFill(data, marker.color, marker.scales, cfg));
 
 	const plot = usePlot().svelteplot;
-	const hover = PlotContext.current()?.hover;
-	const enter = $derived(
-		marker.hover
-			? () => hover?.onPointer((marker.data ?? []) as Record<string, unknown>[])
-			: undefined
-	);
-	const leave = $derived(marker.hover ? hover?.onLeave : undefined);
 	function categoryScaleFor(isHorizontal: boolean) {
 		return isHorizontal ? plot.scales.y : plot.scales.x;
 	}
@@ -47,37 +42,41 @@
 		marker.thickness != null ? Math.max(0, (bandwidth - marker.thickness) / 2) : undefined}
 	{#if marker.isHorizontal}
 		<BarX
+			{...events.props}
 			{data}
 			y={marker.y}
 			x1={marker.x1}
 			x2={marker.x2}
-			insetTop={centered ?? (marker.insetTop != null ? marker.insetTop * bandwidth : undefined)}
+			insetTop={centered ??
+				(marker.styles?.insetTop != null ? marker.styles?.insetTop * bandwidth : undefined)}
 			insetBottom={centered ??
-				(marker.insetBottom != null ? marker.insetBottom * bandwidth : undefined)}
-			fill={channelFill ?? marker.styles?.fill}
-			fillOpacity={marker.styles?.fillOpacity}
-			stroke={marker.styles?.stroke}
-			strokeWidth={marker.styles?.strokeWidth}
-			strokeOpacity={marker.styles?.strokeOpacity}
+				(marker.styles?.insetBottom != null ? marker.styles?.insetBottom * bandwidth : undefined)}
+			fill={channelFill ?? RowStyle.of(marker.styles?.fill, data)}
+			fillOpacity={RowStyle.opacity(marker.styles?.fillOpacity)}
+			stroke={RowStyle.of(marker.styles?.stroke, data)}
+			strokeWidth={RowStyle.field(marker.styles?.strokeWidth)}
+			strokeOpacity={RowStyle.opacity(marker.styles?.strokeOpacity)}
 			strokeDasharray={marker.styles?.strokeDasharray}
-			borderRadius={marker.styles?.borderRadius}
+			borderRadius={RowStyle.field(marker.styles?.borderRadius)}
 		/>
 	{:else}
 		<BarY
+			{...events.props}
 			{data}
 			x={marker.x}
 			y1={marker.y1}
 			y2={marker.y2}
-			insetLeft={centered ?? (marker.insetLeft != null ? marker.insetLeft * bandwidth : undefined)}
+			insetLeft={centered ??
+				(marker.styles?.insetLeft != null ? marker.styles?.insetLeft * bandwidth : undefined)}
 			insetRight={centered ??
-				(marker.insetRight != null ? marker.insetRight * bandwidth : undefined)}
-			fill={channelFill ?? marker.styles?.fill}
-			fillOpacity={marker.styles?.fillOpacity}
-			stroke={marker.styles?.stroke}
-			strokeWidth={marker.styles?.strokeWidth}
-			strokeOpacity={marker.styles?.strokeOpacity}
+				(marker.styles?.insetRight != null ? marker.styles?.insetRight * bandwidth : undefined)}
+			fill={channelFill ?? RowStyle.of(marker.styles?.fill, data)}
+			fillOpacity={RowStyle.opacity(marker.styles?.fillOpacity)}
+			stroke={RowStyle.of(marker.styles?.stroke, data)}
+			strokeWidth={RowStyle.field(marker.styles?.strokeWidth)}
+			strokeOpacity={RowStyle.opacity(marker.styles?.strokeOpacity)}
 			strokeDasharray={marker.styles?.strokeDasharray}
-			borderRadius={marker.styles?.borderRadius}
+			borderRadius={RowStyle.field(marker.styles?.borderRadius)}
 		/>
 	{/if}
 {:else}
@@ -85,77 +84,32 @@
 	{#if categoryScale?.type === 'band'}
 		{@const bandwidth = categoryScale.fn.bandwidth()}
 		{@const bandStart = Number(categoryScale.fn(marker.category as never) ?? 0)}
-		{@const insetLeft = (marker.insetLeft ?? 0) * bandwidth}
-		{@const insetRight = (marker.insetRight ?? 0) * bandwidth}
-		{@const insetTop = (marker.insetTop ?? 0) * bandwidth}
-		{@const insetBottom = (marker.insetBottom ?? 0) * bandwidth}
-		{#if marker.role === 'hitArea'}
-			<!-- The band runs the plot's whole value axis, so the pointer needn't be over the bar. -->
-			{@const [rangeMin, rangeMax] = valueExtentFor(marker.isHorizontal)}
-			{#if marker.isHorizontal}
-				<!-- svelte-ignore a11y_no_static_element_interactions -->
-				<rect
-					class="dct-hit-area"
-					x={rangeMin + insetLeft}
-					y={bandStart + insetBottom}
-					width={Math.max(0, rangeMax - rangeMin - insetLeft - insetRight)}
-					height={Math.max(0, bandwidth - insetTop - insetBottom)}
-					fill="transparent"
-					onpointerenter={enter}
-					onpointerleave={leave}
-				/>
-			{:else}
-				<!-- svelte-ignore a11y_no_static_element_interactions -->
-				<rect
-					class="dct-hit-area"
-					x={bandStart + insetLeft}
-					y={rangeMin + insetBottom}
-					width={Math.max(0, bandwidth - insetLeft - insetRight)}
-					height={Math.max(0, rangeMax - rangeMin - insetTop - insetBottom)}
-					fill="transparent"
-					onpointerenter={enter}
-					onpointerleave={leave}
-				/>
-			{/if}
+		{@const insetLeft = (marker.styles?.insetLeft ?? 0) * bandwidth}
+		{@const insetRight = (marker.styles?.insetRight ?? 0) * bandwidth}
+		{@const insetTop = (marker.styles?.insetTop ?? 0) * bandwidth}
+		{@const insetBottom = (marker.styles?.insetBottom ?? 0) * bandwidth}
+		<!-- The band runs the plot's whole value axis, so the pointer needn't be over the bar. -->
+		{@const [rangeMin, rangeMax] = valueExtentFor(marker.isHorizontal)}
+		{#if marker.isHorizontal}
+			<rect
+				class="dct-hit-area"
+				x={rangeMin + insetLeft}
+				y={bandStart + insetBottom}
+				width={Math.max(0, rangeMax - rangeMin - insetLeft - insetRight)}
+				height={Math.max(0, bandwidth - insetTop - insetBottom)}
+				fill="transparent"
+				{...events.forRow(data[0], 0)}
+			/>
 		{:else}
-			{@const [valueMin, valueMax] = valueExtentFor(marker.isHorizontal)}
-			{#if marker.isHorizontal}
-				{@const thickness = Math.max(0, bandwidth - insetTop - insetBottom) + 2}
-				{@const center = bandStart + insetBottom + (bandwidth - insetTop - insetBottom) / 2}
-				<rect
-					class="hover-area"
-					x={valueMin}
-					y={center - thickness / 2}
-					width={Math.max(0, valueMax - valueMin)}
-					height={thickness}
-					fill={marker.styles?.fill}
-					fill-opacity={marker.styles?.fillOpacity}
-					stroke={marker.styles?.stroke}
-					stroke-width={marker.styles?.strokeWidth}
-					stroke-opacity={marker.styles?.strokeOpacity}
-					stroke-dasharray={marker.styles?.strokeDasharray}
-					rx={marker.styles?.borderRadius}
-					pointer-events="none"
-				/>
-			{:else}
-				{@const thickness = Math.max(0, bandwidth - insetLeft - insetRight) + 2}
-				{@const center = bandStart + insetLeft + (bandwidth - insetLeft - insetRight) / 2}
-				<rect
-					class="hover-area"
-					x={center - thickness / 2}
-					y={valueMin}
-					width={thickness}
-					height={Math.max(0, valueMax - valueMin)}
-					fill={marker.styles?.fill}
-					fill-opacity={marker.styles?.fillOpacity}
-					stroke={marker.styles?.stroke}
-					stroke-width={marker.styles?.strokeWidth}
-					stroke-opacity={marker.styles?.strokeOpacity}
-					stroke-dasharray={marker.styles?.strokeDasharray}
-					ry={marker.styles?.borderRadius}
-					pointer-events="none"
-				/>
-			{/if}
+			<rect
+				class="dct-hit-area"
+				x={bandStart + insetLeft}
+				y={rangeMin + insetBottom}
+				width={Math.max(0, bandwidth - insetLeft - insetRight)}
+				height={Math.max(0, rangeMax - rangeMin - insetTop - insetBottom)}
+				fill="transparent"
+				{...events.forRow(data[0], 0)}
+			/>
 		{/if}
 	{/if}
 {/if}

package/dist/markers/bollinger/BollingerMarker.svelte

@@ -1,4 +1,5 @@
 <script lang="ts">
+	import { MarkerEvents } from '../utils/MarkerEvents';
 	import { SvelteMap } from 'svelte/reactivity';
 	import { BollingerX, BollingerY } from 'svelteplot';
 	import { usePlot } from '../../layout/plot/usePlot';
@@ -18,6 +19,7 @@
 	 * the plot gives that group unless `styles` sets one.
 	 */
 	let { marker }: { marker: BollingerMarkerConfig } = $props();
+	const events = MarkerEvents.use(() => marker);
 
 	const plot = usePlot();
 	const isHorizontal = $derived(plot.axes?.isHorizontal ?? false);
@@ -47,6 +49,7 @@
 {#each groups as group (group.key)}
 	{@const color = marker.grouping ? groupFill?.(group.rows[0]) : undefined}
 	<BollingerMark
+		{...events.props}
 		data={group.rows}
 		x={marker.x}
 		y={marker.y}

package/dist/markers/box/BoxMarker.svelte

@@ -1,4 +1,5 @@
 <script lang="ts">
+	import { MarkerEvents } from '../utils/MarkerEvents';
 	import { BoxX, BoxY } from 'svelteplot';
 	import { usePlot } from '../../layout/plot/usePlot';
 	import { CssColor } from '../../utils/color';
@@ -15,6 +16,7 @@
 	 * from `bar`.
 	 */
 	let { marker }: { marker: BoxMarkerConfig } = $props();
+	const events = MarkerEvents.use(() => marker);
 
 	const plot = usePlot();
 	const isHorizontal = $derived(plot.axes?.isHorizontal ?? false);
@@ -171,4 +173,4 @@
 	});
 </script>
 
-<BoxMark {data} x={marker.x} y={marker.y} sort={marker.sort} {...passthrough} />
+<BoxMark {...events.props} {data} x={marker.x} y={marker.y} sort={marker.sort} {...passthrough} />

package/dist/markers/cell/CellMarker.svelte

@@ -1,4 +1,6 @@
 <script lang="ts">
+	import { RowStyle } from '../utils/RowStyle';
+	import { MarkerEvents } from '../utils/MarkerEvents';
 	import { Cell } from 'svelteplot';
 	import { MarkerChannels } from '../utils/MarkerChannels';
 	import { getConfiguration } from '../../configuration/config.svelte';
@@ -6,6 +8,7 @@
 
 	/** Renders one `'cell'` marker as a `<Cell>` call. */
 	let { marker }: { marker: CellMarkerConfig } = $props();
+	const events = MarkerEvents.use(() => marker);
 
 	const cfg = $derived(getConfiguration());
 	const data = $derived(marker.data ?? []);
@@ -13,15 +16,16 @@
 </script>
 
 <Cell
+	{...events.props}
 	{data}
 	x={marker.x}
 	y={marker.y}
-	fill={channelFill ?? marker.fill}
-	fillOpacity={marker.styles?.fillOpacity ?? 1}
-	stroke={marker.styles?.stroke}
-	strokeWidth={marker.styles?.strokeWidth ?? 0}
-	strokeOpacity={marker.styles?.strokeOpacity}
+	fill={channelFill ?? RowStyle.of(marker.styles?.fill, data)}
+	fillOpacity={RowStyle.opacity(marker.styles?.fillOpacity) ?? 1}
+	stroke={RowStyle.of(marker.styles?.stroke, data)}
+	strokeWidth={RowStyle.field(marker.styles?.strokeWidth) ?? 0}
+	strokeOpacity={RowStyle.opacity(marker.styles?.strokeOpacity)}
 	strokeDasharray={marker.styles?.strokeDasharray}
-	borderRadius={marker.styles?.borderRadius}
-	inset={marker.inset ?? 0.5}
+	borderRadius={RowStyle.field(marker.styles?.borderRadius)}
+	inset={RowStyle.field(marker.styles?.inset) ?? 0.5}
 />

package/dist/markers/contour/ContourMarker.svelte

@@ -1,4 +1,5 @@
 <script lang="ts">
+	import { MarkerEvents } from '../utils/MarkerEvents';
 	import { Contour } from 'svelteplot';
 	import type { GeoContourMarkerConfig } from '../../types/markers/geo';
 
@@ -8,10 +9,12 @@
 	 * - this component only draws the contour itself.
 	 */
 	let { marker }: { marker: GeoContourMarkerConfig } = $props();
+	const events = MarkerEvents.use(() => marker);
 </script>
 
 <!-- No `?? 'none'` fallback: an unset `fill` should leave svelteplot's own default (`fill="none"`) in place, not run the literal string `'none'` through the color scale. -->
 <Contour
+	{...events.props}
 	class="contour"
 	data={marker.data}
 	x={marker.x}

package/dist/markers/delaunay/DelaunayLinkMarker.svelte

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

package/dist/markers/delaunay/DelaunayMeshMarker.svelte

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

package/dist/markers/density/DensityMarker.svelte

@@ -1,4 +1,5 @@
 <script lang="ts">
+	import { MarkerEvents } from '../utils/MarkerEvents';
 	import { Density } from 'svelteplot';
 	import { SvelteMap } from 'svelte/reactivity';
 	import { MarkerChannels } from '../utils/MarkerChannels';
@@ -17,6 +18,7 @@
 	 * class-based scoping every other marker kind gets from svelteplot itself.
 	 */
 	let { marker }: { marker: DensityMarkerConfig } = $props();
+	const events = MarkerEvents.use(() => marker);
 
 	const data = $derived(marker.data ?? []);
 	const cfg = $derived(getConfiguration());
@@ -47,6 +49,7 @@
 
 {#each groups as group, i (i)}
 	<Density
+		{...events.props}
 		data={group.rows}
 		class="density"
 		x={marker.x}

package/dist/markers/difference/DifferenceMarker.svelte

@@ -1,4 +1,5 @@
 <script lang="ts">
+	import { MarkerEvents } from '../utils/MarkerEvents';
 	import { DifferenceY } from 'svelteplot';
 	import type { DifferenceMarkerConfig } from '../../types/markers/common';
 
@@ -9,11 +10,13 @@
 	 * would erase them - each default is restated here instead.
 	 */
 	let { marker }: { marker: DifferenceMarkerConfig } = $props();
+	const events = MarkerEvents.use(() => marker);
 
 	const data = $derived(marker.data ?? []);
 </script>
 
 <DifferenceY
+	{...events.props}
 	{data}
 	x={marker.x}
 	x1={marker.x1}

package/dist/markers/dot/DotMarker.svelte

@@ -1,4 +1,6 @@
 <script lang="ts" generics="TData = Record<string, unknown>">
+	import { RowStyle } from '../utils/RowStyle';
+	import { MarkerEvents } from '../utils/MarkerEvents';
 	import { Dot } from 'svelteplot';
 	import { MarkerChannels } from '../utils/MarkerChannels';
 	import { getConfiguration } from '../../configuration/config.svelte';
@@ -12,12 +14,12 @@
 	 * `DeltaMarker` that place a dot at a computed point.
 	 */
 	const { marker }: { marker: DotMarkerConfig } = $props();
+	const events = MarkerEvents.use(() => marker);
 
 	const data = $derived((marker.data ?? []) as TData[]);
 	const x = $derived(marker.x);
 	const y = $derived(marker.y);
 	const rProp = $derived(marker.r);
-	const fillProp = $derived(marker.fill);
 	const color = $derived(marker.color ? resolveAccessor(marker.color) : undefined);
 	const opacityProp = $derived(marker.opacity ? resolveAccessor(marker.opacity) : undefined);
 	const symbolProp = $derived(marker.symbol ? resolveAccessor(marker.symbol) : undefined);
@@ -61,12 +63,14 @@
 	 * `'none'` is handed over as unset, which svelteplot draws as no paint.
 	 */
 	const paint = <T,>(value: T): T | undefined => (value === 'none' ? undefined : value);
-	const fill = $derived(paint(resolvedFill ?? fillProp ?? styles?.dotFill ?? 'currentColor'));
-	const flatFillOpacity = $derived(styles?.dotFillOpacity ?? 1);
+	const fill = $derived(
+		paint(resolvedFill ?? RowStyle.of(styles?.dotFill, displayData) ?? 'currentColor')
+	);
+	const flatFillOpacity = $derived(RowStyle.opacity(styles?.dotFillOpacity) ?? 1);
 	const symbol = $derived(resolvedSymbolFn ?? styles?.dotSymbol ?? 'circle');
-	const stroke = $derived(paint(styles?.dotStroke ?? 'currentColor'));
-	const strokeWidth = $derived(styles?.dotStrokeWidth ?? 1);
-	const strokeOpacity = $derived(styles?.dotStrokeOpacity ?? 1);
+	const stroke = $derived(paint(RowStyle.of(styles?.dotStroke, displayData) ?? 'currentColor'));
+	const strokeWidth = $derived(RowStyle.field(styles?.dotStrokeWidth) ?? 1);
+	const strokeOpacity = $derived(RowStyle.opacity(styles?.dotStrokeOpacity) ?? 1);
 	const strokeDasharray = $derived(styles?.dotStrokeDasharray);
 </script>
 
@@ -74,6 +78,7 @@
 	<RowOffsetMarks {marker} {rows}>
 		{#snippet mark(own)}
 			<Dot
+				{...events.props}
 				data={own}
 				x={x ?? 0}
 				y={y ?? 0}

package/dist/markers/geo/GraticuleMarker.svelte

@@ -1,12 +1,15 @@
 <script lang="ts">
+	import { MarkerEvents } from '../utils/MarkerEvents';
 	import { Graticule } from 'svelteplot';
 	import type { GeoGraticuleMarkerConfig } from '../../types/markers/geo';
 
 	/** Renders one `'graticule'` marker - longitude/latitude gridlines. */
 	let { marker }: { marker: GeoGraticuleMarkerConfig } = $props();
+	const events = MarkerEvents.use(() => marker);
 </script>
 
 <Graticule
+	{...events.props}
 	step={marker.step}
 	stepX={marker.stepX}
 	stepY={marker.stepY}

package/dist/markers/geo/SphereMarker.svelte

@@ -1,12 +1,15 @@
 <script lang="ts">
+	import { MarkerEvents } from '../utils/MarkerEvents';
 	import { Sphere } from 'svelteplot';
 	import type { GeoSphereMarkerConfig } from '../../types/markers/geo';
 
 	/** Renders one `'sphere'` marker - the outer globe outline. */
 	let { marker }: { marker: GeoSphereMarkerConfig } = $props();
+	const events = MarkerEvents.use(() => marker);
 </script>
 
 <Sphere
+	{...events.props}
 	fill={marker.styles?.fill}
 	fillOpacity={marker.styles?.fillOpacity}
 	stroke={marker.styles?.stroke ?? 'currentColor'}