@fundar/data-chart-telling 1.16.0 → 1.17.0

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'}

package/dist/markers/hover/HoverMarker.svelte

@@ -114,6 +114,18 @@
 	// areaX/areaY have no implied default - always off unless explicitly set.
 	const areaX = $derived(marker.areaX === true ? (activePoint?.x ?? null) : null);
 	const areaY = $derived(marker.areaY === true ? (activePoint?.y ?? null) : null);
+	/**
+	 * The part of the band an area covers: the active point's own slice (a grouped bar's series), or the whole
+	 * band while the hover matches more than one point in that category, as its dots do.
+	 */
+	const areaInsetOf = (axis: 'x' | 'y'): BandSlice | undefined => {
+		const at = activePoint?.[axis];
+		const key = (value: unknown) => (value instanceof Date ? +value : value);
+		const shared = data.filter((point) => key(point[axis]) === key(at)).length > 1;
+		return shared ? undefined : activePoint?.areaInset;
+	};
+	const areaInsetX = $derived(areaX != null ? areaInsetOf('x') : undefined);
+	const areaInsetY = $derived(areaY != null ? areaInsetOf('y') : undefined);
 	const showLabels = $derived(marker.showLabels ?? true);
 	const format = $derived(marker.format);
 	/** The hovered value as the marker's display fields ask; `undefined` while nothing does, so the plot's own label stays. */
@@ -180,9 +192,11 @@
 			isHorizontal: false,
 			data: [],
 			category: areaX,
-			insetLeft: activePoint?.areaInset?.start,
-			insetRight: activePoint?.areaInset?.end,
-			styles: areaStyle
+			styles: {
+				...areaStyle,
+				insetLeft: areaInsetX?.start,
+				insetRight: areaInsetX?.end
+			}
 		}}
 	/>
 {/if}
@@ -195,9 +209,11 @@
 			isHorizontal: true,
 			data: [],
 			category: areaY,
-			insetTop: activePoint?.areaInset?.start,
-			insetBottom: activePoint?.areaInset?.end,
-			styles: areaStyle
+			styles: {
+				...areaStyle,
+				insetTop: areaInsetY?.start,
+				insetBottom: areaInsetY?.end
+			}
 		}}
 	/>
 {/if}

package/dist/markers/hull/HullMarker.svelte

@@ -1,4 +1,5 @@
 <script lang="ts">
+	import { MarkerEvents } from '../utils/MarkerEvents';
 	import { Hull } from 'svelteplot';
 	import { MarkerChannels } from '../utils/MarkerChannels';
 	import { getConfiguration } from '../../configuration/config.svelte';
@@ -6,6 +7,7 @@
 
 	/** Renders one `'hull'` marker as `<Hull>` - the convex hull around a cluster of points. */
 	let { marker }: { marker: HullMarkerConfig } = $props();
+	const events = MarkerEvents.use(() => marker);
 
 	const cfg = $derived(getConfiguration());
 	const data = $derived(marker.data ?? []);
@@ -13,6 +15,7 @@
 </script>
 
 <Hull
+	{...events.props}
 	{data}
 	x={marker.x}
 	y={marker.y}

package/dist/markers/image/ImageMarker.svelte

@@ -1,10 +1,12 @@
 <script lang="ts">
+	import { MarkerEvents } from '../utils/MarkerEvents';
 	import { Image } from 'svelteplot';
 	import RowOffsetMarks from '../utils/RowOffsetMarks.svelte';
 	import type { ImageMarkerConfig } from '../../types/markers/common';
 
 	/** Renders one `'image'` marker as `<Image>` - an image centered on each row's `x`/`y`. */
 	let { marker }: { marker: ImageMarkerConfig } = $props();
+	const events = MarkerEvents.use(() => marker);
 
 	const data = $derived(marker.data ?? []);
 </script>
@@ -12,6 +14,7 @@
 <RowOffsetMarks {marker} rows={data}>
 	{#snippet mark(rows)}
 		<Image
+			{...events.props}
 			data={rows}
 			x={marker.x}
 			y={marker.y}

package/dist/markers/line/LineMarker.svelte

@@ -1,4 +1,5 @@
 <script lang="ts">
+	import { MarkerEvents } from '../utils/MarkerEvents';
 	import { Line } from 'svelteplot';
 	import { MarkerChannels } from '../utils/MarkerChannels';
 	import { getConfiguration } from '../../configuration/config.svelte';
@@ -10,6 +11,7 @@
 	 * its color, so each `grouping`'s line takes its group's color.
 	 */
 	let { marker }: { marker: LineMarkerConfig } = $props();
+	const events = MarkerEvents.use(() => marker);
 
 	const cfg = $derived(getConfiguration());
 	const data = $derived(marker.data ?? []);
@@ -17,6 +19,7 @@
 </script>
 
 <Line
+	{...events.props}
 	{data}
 	x={marker.x}
 	y={marker.y}

package/dist/markers/link/LinkMarker.svelte

@@ -1,4 +1,5 @@
 <script lang="ts">
+	import { MarkerEvents } from '../utils/MarkerEvents';
 	import { Geo } from 'svelteplot';
 	import { geoPath } from 'd3-geo';
 	import { resolveAccessor } from '../../utils/accessors';
@@ -14,6 +15,7 @@
 	 * projected positions.
 	 */
 	let { marker }: { marker: GeoLinkMarkerConfig } = $props();
+	const events = MarkerEvents.use(() => marker);
 
 	type Point = [number, number];
 	const STEPS = 64;
@@ -181,6 +183,7 @@
 {:else}
 	<!-- No `fill` prop: svelteplot treats any string as scale-worthy unless it's a real CSS color, so a literal `'none'` would run through the color scale instead of staying unfilled. Omitting it leaves svelteplot's own unfilled default in place. -->
 	<Geo
+		{...events.props}
 		class="link"
 		data={arcFeatures}
 		stroke={marker.styles?.stroke ?? 'currentColor'}

package/dist/markers/raster/RasterMarker.svelte

@@ -1,4 +1,5 @@
 <script lang="ts">
+	import { MarkerEvents } from '../utils/MarkerEvents';
 	import { Raster } from 'svelteplot';
 	import type { RasterMarkerConfig } from '../../types/markers/common';
 
@@ -8,11 +9,13 @@
 	 * so it is forwarded as `null` rather than an empty array.
 	 */
 	let { marker }: { marker: RasterMarkerConfig } = $props();
+	const events = MarkerEvents.use(() => marker);
 
 	const data = $derived(marker.data?.length ? marker.data : null);
 </script>
 
 <Raster
+	{...events.props}
 	{data}
 	x={marker.x}
 	y={marker.y}

package/dist/markers/rect/RectMarker.svelte

@@ -1,7 +1,9 @@
 <script lang="ts">
+	import { RowStyle } from '../utils/RowStyle';
 	import { Rect } from 'svelteplot';
 	import { MarkerChannels } from '../utils/MarkerChannels';
 	import { getConfiguration } from '../../configuration/config.svelte';
+	import { MarkerEvents } from '../utils/MarkerEvents';
 	import type { RectMarkerConfig } from '../../types/markers/common';
 
 	/** Renders one `'rect'` marker as a `<Rect>` call - an arbitrary rectangle, unlike `BarMarker`'s category-band-anchored bar. */
@@ -13,6 +15,8 @@
 	const opacityBuckets = $derived(
 		MarkerChannels.buildOpacityBuckets(data, marker.opacity, marker.scales, cfg)
 	);
+
+	const events = MarkerEvents.use(() => marker);
 </script>
 
 {#if opacityBuckets}
@@ -26,16 +30,18 @@
 			y1={marker.y1}
 			y2={marker.y2}
 			interval={marker.interval}
-			insetLeft={marker.insetLeft}
-			insetRight={marker.insetRight}
-			insetTop={marker.insetTop}
-			insetBottom={marker.insetBottom}
-			fill={channelFill ?? marker.styles?.fill}
+			insetLeft={RowStyle.field(marker.styles?.insetLeft)}
+			insetRight={RowStyle.field(marker.styles?.insetRight)}
+			insetTop={RowStyle.field(marker.styles?.insetTop)}
+			insetBottom={RowStyle.field(marker.styles?.insetBottom)}
+			fill={channelFill ?? RowStyle.of(marker.styles?.fill, data)}
 			fillOpacity={bucket.value}
-			stroke={marker.styles?.stroke}
-			strokeWidth={marker.styles?.strokeWidth}
-			strokeOpacity={marker.styles?.strokeOpacity}
+			stroke={RowStyle.of(marker.styles?.stroke, data)}
+			strokeWidth={RowStyle.field(marker.styles?.strokeWidth)}
+			strokeOpacity={RowStyle.opacity(marker.styles?.strokeOpacity)}
 			strokeDasharray={marker.styles?.strokeDasharray}
+			borderRadius={RowStyle.field(marker.styles?.borderRadius)}
+			{...events.props}
 		/>
 	{/each}
 {:else}
@@ -48,15 +54,17 @@
 		y1={marker.y1}
 		y2={marker.y2}
 		interval={marker.interval}
-		insetLeft={marker.insetLeft}
-		insetRight={marker.insetRight}
-		insetTop={marker.insetTop}
-		insetBottom={marker.insetBottom}
-		fill={channelFill ?? marker.styles?.fill}
-		fillOpacity={marker.styles?.fillOpacity ?? 1}
-		stroke={marker.styles?.stroke}
-		strokeWidth={marker.styles?.strokeWidth}
-		strokeOpacity={marker.styles?.strokeOpacity}
+		insetLeft={RowStyle.field(marker.styles?.insetLeft)}
+		insetRight={RowStyle.field(marker.styles?.insetRight)}
+		insetTop={RowStyle.field(marker.styles?.insetTop)}
+		insetBottom={RowStyle.field(marker.styles?.insetBottom)}
+		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)}
+		strokeOpacity={RowStyle.opacity(marker.styles?.strokeOpacity)}
 		strokeDasharray={marker.styles?.strokeDasharray}
+		borderRadius={RowStyle.field(marker.styles?.borderRadius)}
+		{...events.props}
 	/>
 {/if}

package/dist/markers/regression/RegressionMarker.svelte

@@ -1,4 +1,5 @@
 <script lang="ts">
+	import { MarkerEvents } from '../utils/MarkerEvents';
 	import { RegressionX, RegressionY } from 'svelteplot';
 	import { usePlot } from '../../layout/plot/usePlot';
 	import type { RegressionMarkerConfig } from '../../types/markers/common';
@@ -18,6 +19,7 @@
 	 * active, never exposed as its own style option.
 	 */
 	let { marker }: { marker: RegressionMarkerConfig } = $props();
+	const events = MarkerEvents.use(() => marker);
 
 	const plot = usePlot();
 	const isHorizontal = $derived(plot.axes?.isHorizontal ?? false);
@@ -27,6 +29,7 @@
 </script>
 
 <RegressionMark
+	{...events.props}
 	{data}
 	x={marker.x}
 	y={marker.y}

package/dist/markers/rule/RuleMarker.svelte

@@ -1,4 +1,6 @@
 <script lang="ts">
+	import { RowStyle } from '../utils/RowStyle';
+	import { MarkerEvents } from '../utils/MarkerEvents';
 	import { RuleX, RuleY } from 'svelteplot';
 	import type { AxisValue } from '../../types/layout/mapping';
 	import { RowStroke } from '../utils/RowStroke';
@@ -14,6 +16,7 @@
 	 * straight through to svelteplot's own `RuleX`/`RuleY`.
 	 */
 	const { marker }: { marker: RuleMarkerConfig } = $props();
+	const events = MarkerEvents.use(() => marker);
 
 	const axis = $derived(marker.axis);
 	const data = $derived(marker.data);
@@ -34,21 +37,28 @@
 	 */
 	const position = $derived(data ? value : (d: { v: AxisValue }) => d.v);
 
-	/** Each row's own stroke, over the marker's `styles`. */
+	/** Each row's stroke: the marker's `styles`, which can be functions of the row. */
 	const row = $derived(
-		RowStroke.of(marker, styles, { stroke: 'currentColor', strokeWidth: 1, strokeOpacity: 1 })
+		RowStroke.of(styles, rows, { stroke: 'currentColor', strokeWidth: 1, strokeOpacity: 1 })
 	);
 </script>
 
 <RuleMark
+	{...events.props}
 	data={rows}
 	{...axis === 'x'
 		? { x: position, y1: marker.y1, y2: marker.y2 }
 		: { y: position, x1: marker.x1, x2: marker.x2 }}
-	inset={marker.inset}
+	inset={RowStyle.field(marker.styles?.inset)}
 	{...axis === 'x'
-		? { insetTop: marker.insetTop, insetBottom: marker.insetBottom }
-		: { insetLeft: marker.insetLeft, insetRight: marker.insetRight }}
+		? {
+				insetTop: RowStyle.field(marker.styles?.insetTop),
+				insetBottom: RowStyle.field(marker.styles?.insetBottom)
+			}
+		: {
+				insetLeft: RowStyle.field(marker.styles?.insetLeft),
+				insetRight: RowStyle.field(marker.styles?.insetRight)
+			}}
 	stroke={row.stroke}
 	strokeWidth={row.strokeWidth}
 	strokeOpacity={row.strokeOpacity}

package/dist/markers/text/TextFit.d.ts

@@ -0,0 +1,44 @@
+/** What a label is once it is fitted: the text to write, on as many lines as it takes, and the size to write it at. */
+export type FittedText = {
+    text: string;
+    fontSize: number;
+};
+/** What a label is fitted to. */
+export type TextFitOptions = {
+    text: string;
+    /** What to write instead when `text` does not fit even cut short: a value alone, say. Hidden if that does not fit either. */
+    fallback?: string;
+    /** The room the label has, in px. */
+    width: number;
+    height: number;
+    /** The size the label is written at when it has the room for it. */
+    fontSize: number;
+    /** The smallest size it is written at, shrunk one px at a time down to it. */
+    minFontSize: number;
+    /** The height of a line, as a multiple of the font size. */
+    lineHeight: number;
+    /** How wide `text` writes at `fontSize`, in px. */
+    measure: (text: string, fontSize: number) => number;
+    /** The fewest letters of a text worth writing when it is cut short. */
+    minLetters: number;
+};
+/**
+ * How a label that may be too big for its box is written: a smaller size first; failing that the text cut short
+ * with an ellipsis on its last line, at the smallest size; failing that its `fallback`; failing that nothing.
+ */
+export declare class TextFit {
+    #private;
+    static fit(options: TextFitOptions): FittedText | undefined;
+    /**
+     * `text` on at most `room.lines` lines of `room.width`: whole words per line, a new line after each newline. With `cut`,
+     * what does not fit is cut short - the rest of the text on the last line, or a word wider than any line - with an
+     * ellipsis; without it, a text that does not fit comes to `undefined`, and so does one whose first line shows
+     * under `minLetters` letters.
+     */
+    static wrap(text: string, room: {
+        width: number;
+        lines: number;
+    }, cut: boolean, minLetters: number, measure: (text: string) => number): string[] | undefined;
+    /** `text` as it fits `width`: as it is, or cut short with an ellipsis. */
+    static cut(text: string, width: number, measure: (text: string) => number): string;
+}

package/dist/markers/text/TextFit.js

@@ -0,0 +1,86 @@
+const ELLIPSIS = '…';
+/**
+ * How a label that may be too big for its box is written: a smaller size first; failing that the text cut short
+ * with an ellipsis on its last line, at the smallest size; failing that its `fallback`; failing that nothing.
+ */
+export class TextFit {
+    static fit(options) {
+        const whole = TextFit.#shrunk(options.text, options);
+        if (whole)
+            return whole;
+        const size = options.minFontSize;
+        const lines = TextFit.wrap(options.text, TextFit.#room(options, size), true, options.minLetters, (t) => options.measure(t, size));
+        if (lines)
+            return { text: lines.join('\n'), fontSize: size };
+        return options.fallback === undefined ? undefined : TextFit.#shrunk(options.fallback, options);
+    }
+    /** `text` as it is, at the biggest size that holds it all: no cut, or `undefined` at none. */
+    static #shrunk(text, options) {
+        for (let size = options.fontSize; size >= options.minFontSize; size--) {
+            const lines = TextFit.wrap(text, TextFit.#room(options, size), false, options.minLetters, (t) => options.measure(t, size));
+            if (lines)
+                return { text: lines.join('\n'), fontSize: size };
+        }
+        return undefined;
+    }
+    /** How wide the lines are, and how many there are, at `size`. */
+    static #room(options, size) {
+        return {
+            width: options.width,
+            lines: Math.floor(options.height / (size * options.lineHeight))
+        };
+    }
+    /**
+     * `text` on at most `room.lines` lines of `room.width`: whole words per line, a new line after each newline. With `cut`,
+     * what does not fit is cut short - the rest of the text on the last line, or a word wider than any line - with an
+     * ellipsis; without it, a text that does not fit comes to `undefined`, and so does one whose first line shows
+     * under `minLetters` letters.
+     */
+    static wrap(text, room, cut, minLetters, measure) {
+        if (room.lines < 1)
+            return undefined;
+        const all = [];
+        let overlong = false;
+        for (const paragraph of text.split('\n')) {
+            let line = '';
+            for (const word of paragraph.split(/ +/).filter(Boolean)) {
+                const next = line ? `${line} ${word}` : word;
+                if (measure(next) <= room.width) {
+                    line = next;
+                    continue;
+                }
+                if (line)
+                    all.push(line);
+                // A word wider than a line goes on one of its own.
+                if (measure(word) > room.width) {
+                    overlong = true;
+                    all.push(word);
+                    line = '';
+                }
+                else {
+                    line = word;
+                }
+            }
+            if (line)
+                all.push(line);
+        }
+        if (!cut)
+            return !overlong && all.length <= room.lines ? all : undefined;
+        const lines = all.slice(0, room.lines);
+        // The rest of the text goes on the last line, to be cut short there.
+        if (all.length > room.lines)
+            lines[room.lines - 1] = all.slice(room.lines - 1).join(' ');
+        const written = lines.map((line) => TextFit.cut(line, room.width, measure));
+        const first = written[0]?.replace(ELLIPSIS, '').replace(/\s/g, '') ?? '';
+        return first.length >= minLetters ? written : undefined;
+    }
+    /** `text` as it fits `width`: as it is, or cut short with an ellipsis. */
+    static cut(text, width, measure) {
+        if (measure(text) <= width)
+            return text;
+        let end = text.length;
+        while (end > 0 && measure(`${text.slice(0, end).trimEnd()}${ELLIPSIS}`) > width)
+            end--;
+        return end > 0 ? `${text.slice(0, end).trimEnd()}${ELLIPSIS}` : '';
+    }
+}