@fundar/data-chart-telling 1.1.0 → 1.3.0

package/dist/layout/tooltip/Tooltip.svelte.d.ts

@@ -1,18 +1,18 @@
 import type { Snippet } from 'svelte';
-import type { TooltipAnchorX, TooltipAnchorY } from '../../types/layout/tooltip';
+import type { TooltipAnchorX, TooltipAnchorY, TooltipRow } from '../../types/layout/tooltip';
 declare function $$render<TRow extends Record<string, unknown>>(): {
     props: {
         visible: boolean;
         x: number;
         y: number;
-        /** Every row the hover matched. */
-        rows: TRow[];
+        /** Every row the hover matched, with the color the plot draws it in. */
+        rows: TooltipRow<TRow>[];
         format: (row: TRow) => string;
         /** The order the `format` text reads the rows in. Unset, as matched. */
         sort?: (a: TRow, b: TRow) => number;
         /** Custom tooltip body, given every row; replaces the `format` text and the default box. */
         content?: Snippet<[{
-            rows: TRow[];
+            rows: TooltipRow<TRow>[];
         }]>;
         /** Box the tooltip must stay within. Defaults to its plot's box. */
         bounds?: {

package/dist/layout/tooltip/TooltipState.svelte.js

@@ -1,6 +1,6 @@
 import { Box } from '../margins/Box';
 import { PlotMargins } from '../margins/PlotMargins.svelte';
-import { resolveAccessor } from '../../plots/utils/accessors';
+import { resolveAccessor } from '../../utils/accessors';
 import { SERIES_KEY } from '../../phases/transforms/TransformsPhase';
 import { ValueLabels } from '../styles/ValueLabels';
 /** A tooltip anchor as the side of the point the tooltip sits on. */

package/dist/markers/MarkerKinds.d.ts

@@ -155,6 +155,11 @@ export declare class MarkerKinds {
             clip: false;
             drawsRows: false;
         };
+        violin: {
+            clip: true;
+            drawsRows: true;
+            legendSymbol: "area";
+        };
         voronoi: {
             clip: true;
             drawsRows: true;

package/dist/markers/MarkerKinds.js

@@ -38,6 +38,7 @@ export class MarkerKinds {
         tick: { clip: true, drawsRows: true },
         trail: { clip: true, drawsRows: true, legendSymbol: 'line' },
         vector: { clip: false, drawsRows: false },
+        violin: { clip: true, drawsRows: true, legendSymbol: 'area' },
         voronoi: { clip: true, drawsRows: true },
         voronoiMesh: { clip: true, drawsRows: true },
         waffle: { clip: true, drawsRows: true }

package/dist/markers/area/AreaMarker.svelte

@@ -15,6 +15,7 @@
 
 	const plot = usePlot();
 	const isHorizontal = $derived(plot.axes?.isHorizontal ?? false);
+	const AreaMark = $derived(isHorizontal ? AreaX : AreaY);
 
 	const cfg = $derived(getConfiguration());
 	const data = $derived(marker.data ?? []);
@@ -29,82 +30,33 @@
 	const y2 = $derived(hasYBand ? marker.y2 : (marker.y ?? 0));
 	const x1 = $derived(hasXBand ? marker.x1 : 0);
 	const x2 = $derived(hasXBand ? marker.x2 : (marker.x ?? 0));
+	/** The band's two ends: along `x` when the plot runs horizontally, else along `y`. */
+	const band = $derived(isHorizontal ? { x1, x2 } : { y1, y2 });
 </script>
 
-{#if opacityBuckets}
-	{#each opacityBuckets as bucket (bucket.value)}
-		{#if isHorizontal}
-			<AreaX
-				data={bucket.data}
-				x={marker.x}
-				{x1}
-				{x2}
-				y={marker.y}
-				z={marker.grouping}
-				stack={false}
-				curve={marker.curve}
-				tension={marker.tension}
-				fill={channelFill ?? marker.styles?.fill}
-				fillOpacity={bucket.value}
-				stroke={marker.styles?.stroke}
-				strokeWidth={marker.styles?.strokeWidth}
-				strokeOpacity={marker.styles?.strokeOpacity}
-				strokeDasharray={marker.styles?.strokeDasharray}
-			/>
-		{:else}
-			<AreaY
-				data={bucket.data}
-				x={marker.x}
-				y={marker.y}
-				{y1}
-				{y2}
-				z={marker.grouping}
-				stack={false}
-				curve={marker.curve}
-				tension={marker.tension}
-				fill={channelFill ?? marker.styles?.fill}
-				fillOpacity={bucket.value}
-				stroke={marker.styles?.stroke}
-				strokeWidth={marker.styles?.strokeWidth}
-				strokeOpacity={marker.styles?.strokeOpacity}
-				strokeDasharray={marker.styles?.strokeDasharray}
-			/>
-		{/if}
-	{/each}
-{:else if isHorizontal}
-	<AreaX
-		{data}
+{#snippet area(rows: typeof data, fillOpacity: number | undefined)}
+	<AreaMark
+		data={rows}
 		x={marker.x}
-		{x1}
-		{x2}
 		y={marker.y}
+		{...band}
 		z={marker.grouping}
 		stack={false}
 		curve={marker.curve}
 		tension={marker.tension}
 		fill={channelFill ?? marker.styles?.fill}
-		fillOpacity={marker.styles?.fillOpacity ?? cfg.area.fillOpacity}
+		{fillOpacity}
 		stroke={marker.styles?.stroke}
 		strokeWidth={marker.styles?.strokeWidth}
 		strokeOpacity={marker.styles?.strokeOpacity}
 		strokeDasharray={marker.styles?.strokeDasharray}
 	/>
+{/snippet}
+
+{#if opacityBuckets}
+	{#each opacityBuckets as bucket (bucket.value)}
+		{@render area(bucket.data, bucket.value)}
+	{/each}
 {:else}
-	<AreaY
-		{data}
-		x={marker.x}
-		y={marker.y}
-		{y1}
-		{y2}
-		z={marker.grouping}
-		stack={false}
-		curve={marker.curve}
-		tension={marker.tension}
-		fill={channelFill ?? marker.styles?.fill}
-		fillOpacity={marker.styles?.fillOpacity ?? cfg.area.fillOpacity}
-		stroke={marker.styles?.stroke}
-		strokeWidth={marker.styles?.strokeWidth}
-		strokeOpacity={marker.styles?.strokeOpacity}
-		strokeDasharray={marker.styles?.strokeDasharray}
-	/>
+	{@render area(data, marker.styles?.fillOpacity ?? cfg.area.fillOpacity)}
 {/if}

package/dist/markers/arrow/ArrowMarker.svelte

@@ -1,19 +1,61 @@
 <script lang="ts">
 	import { Arrow } from 'svelteplot';
+	import { usePlot } from '../../layout/plot/usePlot';
+	import { RowStroke } from '../utils/RowStroke';
 	import type { ArrowMarkerConfig } from '../../types/markers/common';
 
-	/** Renders one `'arrow'` marker as `<Arrow>` - a point-to-point annotation. Restates svelteplot's own defaults, which an explicit `undefined` would otherwise erase. */
+	/**
+	 * Renders one `'arrow'` marker as `<Arrow>` - a point-to-point annotation.
+	 * Restates svelteplot's own defaults, which an explicit `undefined` would
+	 * otherwise erase. An arrow on a band axis ends at the middle of its band: the
+	 * `<Arrow>` mark reads its start as the band's first edge and its end as the
+	 * last, so such an arrow is placed in pixels instead.
+	 */
 	let { marker }: { marker: ArrowMarkerConfig } = $props();
 
+	const plot = usePlot().svelteplot;
 	const data = $derived(marker.data ?? []);
+	/** Each row's own stroke, over the marker's `styles`. */
+	const row = $derived(RowStroke.of(marker, marker.styles, { stroke: 'currentColor' }));
+
+	type Row = Record<string, unknown>;
+	type Channel = string | number | ((d: never) => unknown) | undefined;
+	/** A channel of a row: a field key, a function of the row, or a literal. */
+	const read = (channel: Channel, d: Row) =>
+		typeof channel === 'string'
+			? d[channel]
+			: typeof channel === 'function'
+				? (channel as (d: Row) => unknown)(d)
+				: channel;
+	/** Where `value` sits along `axis`, in pixels, at the middle of its band on a band axis. */
+	const pixel = (axis: 'x' | 'y', value: unknown) => {
+		const scale = plot.scales[axis];
+		const at = scale.fn(value as never) as number;
+		return scale.type === 'band' ? at + scale.fn.bandwidth() / 2 : at;
+	};
+	const onBand = $derived(plot.scales.x.type === 'band' || plot.scales.y.type === 'band');
+	/** The rows with their ends in pixels, when an axis is a band. */
+	const placed = $derived(
+		onBand
+			? data.map((d) => ({
+					...d,
+					__x1: pixel('x', read(marker.x1, d as Row)),
+					__x2: pixel('x', read(marker.x2, d as Row)),
+					__y1: pixel('y', read(marker.y1, d as Row)),
+					__y2: pixel('y', read(marker.y2, d as Row))
+				}))
+			: data
+	);
+	/** A pixel channel the scales leave alone. */
+	const own = (key: string) => ({ value: (d: Row) => d[key], scale: null }) as never;
 </script>
 
 <Arrow
-	{data}
-	x1={marker.x1}
-	y1={marker.y1}
-	x2={marker.x2}
-	y2={marker.y2}
+	data={placed}
+	x1={onBand ? own('__x1') : marker.x1}
+	y1={onBand ? own('__y1') : marker.y1}
+	x2={onBand ? own('__x2') : marker.x2}
+	y2={onBand ? own('__y2') : marker.y2}
 	bend={marker.bend}
 	headAngle={marker.headAngle ?? 60}
 	headLength={marker.headLength ?? 8}
@@ -21,8 +63,8 @@
 	insetStart={marker.insetStart}
 	insetEnd={marker.insetEnd}
 	sweep={marker.sweep}
-	stroke={marker.styles?.stroke ?? 'currentColor'}
-	strokeWidth={marker.styles?.strokeWidth}
-	strokeOpacity={marker.styles?.strokeOpacity}
+	stroke={row.stroke}
+	strokeWidth={row.strokeWidth}
+	strokeOpacity={row.strokeOpacity}
 	strokeDasharray={marker.styles?.strokeDasharray}
 />

package/dist/markers/bar/BarMarker.svelte

@@ -43,14 +43,17 @@
 {#if marker.role === 'segment'}
 	{@const categoryScale = categoryScaleFor(marker.isHorizontal)}
 	{@const bandwidth = categoryScale?.type === 'band' ? categoryScale.fn.bandwidth() : 0}
+	{@const centered =
+		marker.thickness != null ? Math.max(0, (bandwidth - marker.thickness) / 2) : undefined}
 	{#if marker.isHorizontal}
 		<BarX
 			{data}
 			y={marker.y}
 			x1={marker.x1}
 			x2={marker.x2}
-			insetTop={marker.insetTop != null ? marker.insetTop * bandwidth : undefined}
-			insetBottom={marker.insetBottom != null ? marker.insetBottom * bandwidth : undefined}
+			insetTop={centered ?? (marker.insetTop != null ? marker.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}
@@ -65,8 +68,9 @@
 			x={marker.x}
 			y1={marker.y1}
 			y2={marker.y2}
-			insetLeft={marker.insetLeft != null ? marker.insetLeft * bandwidth : undefined}
-			insetRight={marker.insetRight != null ? marker.insetRight * bandwidth : undefined}
+			insetLeft={centered ?? (marker.insetLeft != null ? marker.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}

package/dist/markers/bollinger/BollingerMarker.svelte

@@ -1,6 +1,10 @@
 <script lang="ts">
+	import { SvelteMap } from 'svelte/reactivity';
 	import { BollingerX, BollingerY } from 'svelteplot';
 	import { usePlot } from '../../layout/plot/usePlot';
+	import { MarkerChannels } from '../utils/MarkerChannels';
+	import { resolveAccessor } from '../../utils/accessors';
+	import { getConfiguration } from '../../configuration/config.svelte';
 	import type { BollingerMarkerConfig } from '../../types/markers/common';
 
 	/**
@@ -9,36 +13,47 @@
 	 * (`usePlot().axes`). A `stroke`-independent `fill`-style option
 	 * is deliberately not offered - confirmed empirically to have no visible
 	 * effect on svelteplot's own line (see `BollingerStatisticOptions`'s own
-	 * doc comment).
+	 * doc comment). svelteplot draws one line and one band over all its rows, so
+	 * with a `grouping` each group is drawn as a mark of its own, in the color
+	 * the plot gives that group unless `styles` sets one.
 	 */
 	let { marker }: { marker: BollingerMarkerConfig } = $props();
 
 	const plot = usePlot();
 	const isHorizontal = $derived(plot.axes?.isHorizontal ?? false);
+	const BollingerMark = $derived(isHorizontal ? BollingerX : BollingerY);
 
+	const cfg = $derived(getConfiguration());
 	const data = $derived(marker.data ?? []);
+
+	/** The rows of each group, in the order the groups first appear. */
+	const groups = $derived.by(() => {
+		if (!marker.grouping) return [{ key: 'all', rows: data }];
+		const groupOf = resolveAccessor(marker.grouping as never) as (row: unknown) => unknown;
+		const byKey = new SvelteMap<string, typeof data>();
+		for (const row of data) {
+			const key = String(groupOf(row));
+			const rows = byKey.get(key);
+			if (rows) rows.push(row);
+			else byKey.set(key, [row]);
+		}
+		return [...byKey].map(([key, rows]) => ({ key, rows }));
+	});
+
+	/** What the plot's palette gives a row's group. */
+	const groupFill = $derived(MarkerChannels.buildFill(data, marker.grouping, marker.scales, cfg));
 </script>
 
-{#if isHorizontal}
-	<BollingerX
-		{data}
-		x={marker.x}
-		y={marker.y}
-		n={marker.n}
-		k={marker.k}
-		stroke={marker.styles?.stroke}
-		strokeOpacity={marker.styles?.strokeOpacity}
-		fill={marker.styles?.bandFill}
-	/>
-{:else}
-	<BollingerY
-		{data}
+{#each groups as group (group.key)}
+	{@const color = marker.grouping ? groupFill?.(group.rows[0]) : undefined}
+	<BollingerMark
+		data={group.rows}
 		x={marker.x}
 		y={marker.y}
 		n={marker.n}
 		k={marker.k}
-		stroke={marker.styles?.stroke}
+		stroke={marker.styles?.stroke ?? color}
 		strokeOpacity={marker.styles?.strokeOpacity}
-		fill={marker.styles?.bandFill}
+		fill={marker.styles?.bandFill ?? color}
 	/>
-{/if}
+{/each}

package/dist/markers/box/BoxMarker.svelte

@@ -1,7 +1,7 @@
 <script lang="ts">
 	import { BoxX, BoxY } from 'svelteplot';
 	import { usePlot } from '../../layout/plot/usePlot';
-	import { contrastTextColor } from '../../utils/color';
+	import { CssColor } from '../../utils/color';
 	import { getConfiguration } from '../../configuration/config.svelte';
 	import type { BoxMarkerConfig } from '../../types/markers/common';
 
@@ -18,6 +18,33 @@
 
 	const plot = usePlot();
 	const isHorizontal = $derived(plot.axes?.isHorizontal ?? false);
+	const BoxMark = $derived(isHorizontal ? BoxX : BoxY);
+
+	/**
+	 * With `thickness`, the box is that many pixels across, centered on the
+	 * marker's share of its category's band (`slot`), instead of filling the band:
+	 * the bar's insets and every sub-mark's offset follow it.
+	 */
+	const thickness = $derived(marker.thickness);
+	const slotIndex = $derived(marker.slot?.index ?? 0);
+	const slotCount = $derived(marker.slot?.count ?? 1);
+	const bandwidth = $derived.by(() => {
+		const scale = isHorizontal ? plot.svelteplot.scales.y : plot.svelteplot.scales.x;
+		return scale?.type === 'band' ? scale.fn.bandwidth() : 0;
+	});
+	const placement = $derived.by(() => {
+		if (thickness == null || !bandwidth) return undefined;
+		const share = bandwidth / slotCount;
+		const offset = share * slotIndex + share / 2 - bandwidth / 2;
+		const inset = Math.max(0, (bandwidth - thickness) / 2);
+		return {
+			inset,
+			side: isHorizontal
+				? { insetTop: inset, insetBottom: inset }
+				: { insetLeft: inset, insetRight: inset },
+			shift: isHorizontal ? { dy: offset } : { dx: offset }
+		};
+	});
 
 	// eslint-disable-next-line @typescript-eslint/no-explicit-any
 	const data = $derived((marker.data ?? []) as any[]);
@@ -39,12 +66,15 @@
 			(typeof marker.bar === 'object' && marker.bar.fill != null
 				? (marker.bar.fill as string)
 				: undefined) ?? cfg.palette[0],
+		...placement?.side,
+		...placement?.shift,
 		...(typeof marker.bar === 'object' ? marker.bar : {})
 	});
 	const barFill = $derived(bar.fill as string);
 
 	/** `bar.insetLeft`/`insetRight` averaged into one symmetric value - a tick's own `inset` is a single number/percentage, not independent left/right. */
 	const tickInset = $derived.by(() => {
+		if (placement) return placement.inset;
 		const l = typeof bar.insetLeft === 'number' ? bar.insetLeft : undefined;
 		const r = typeof bar.insetRight === 'number' ? bar.insetRight : undefined;
 		if (l === undefined && r === undefined) return undefined;
@@ -77,14 +107,19 @@
 		return out;
 	}
 
-	const ruleDefault = $derived(lineStyleDefaults(barFill));
-	const dotDefault = $derived(fillStyleDefaults());
+	const ruleDefault = $derived({ ...lineStyleDefaults(barFill), ...placement?.shift });
+	const dotDefault: Record<string, unknown> = $derived({
+		...fillStyleDefaults(),
+		...placement?.shift
+	});
 	const tickMedianDefault = $derived({
-		...lineStyleDefaults(contrastTextColor(barFill)),
+		...lineStyleDefaults(CssColor.contrastText(barFill)),
+		...placement?.shift,
 		...(tickInset !== undefined ? { inset: tickInset } : {})
 	});
 	const tickMinMaxDefault = $derived({
 		...lineStyleDefaults(barFill),
+		...placement?.shift,
 		...(tickInset !== undefined ? { inset: tickInset } : {})
 	});
 
@@ -136,8 +171,4 @@
 	});
 </script>
 
-{#if isHorizontal}
-	<BoxX {data} x={marker.x} y={marker.y} sort={marker.sort} {...passthrough} />
-{:else}
-	<BoxY {data} x={marker.x} y={marker.y} sort={marker.sort} {...passthrough} />
-{/if}
+<BoxMark {data} x={marker.x} y={marker.y} sort={marker.sort} {...passthrough} />

package/dist/markers/delta/Delta.d.ts

@@ -1,5 +1,5 @@
 import type { Series } from '../../types/plots/data/common';
-import type { DeltaConfig } from '../../types/markers/axis/delta';
+import type { DeltaConfig, DeltaMarkerConfig, DeltaPointConfig } from '../../types/markers/axis/delta';
 /** A delta, measured: where it sits (`at`), its two ends and what lies between. */
 export type ResolvedDelta = {
     cfg: DeltaConfig;
@@ -16,6 +16,11 @@ export type ResolvedDelta = {
  */
 export declare class Delta {
     #private;
+    /**
+     * The deltas a marker draws: one for its `at`, or one for each position of a list, each with the
+     * `line`, `text` and `dot` its style functions give for that position.
+     */
+    static points(marker: DeltaMarkerConfig): DeltaPointConfig[];
     /** The delta `config` asks for over `allSeries`, or `undefined` while an end has no value there. */
     static build<T extends Record<string, unknown>>(axis: 'x' | 'y', allSeries: Series<T>[], config: DeltaConfig): ResolvedDelta | undefined;
 }

package/dist/markers/delta/Delta.js

@@ -1,10 +1,25 @@
-import { resolveAccessor } from '../../plots/utils/accessors';
+import { resolveAccessor } from '../../utils/accessors';
 /**
  * A delta marker's measure: the gap, at one position along `axis`, between
  * the two curves (or axis lines) it compares. A target series is read where
  * it crosses that position, interpolated linearly between its two nearest points.
  */
 export class Delta {
+    /**
+     * The deltas a marker draws: one for its `at`, or one for each position of a list, each with the
+     * `line`, `text` and `dot` its style functions give for that position.
+     */
+    static points(marker) {
+        const positions = Array.isArray(marker.at) ? marker.at : [marker.at];
+        const own = (style, at) => typeof style === 'function' ? style(at) : style;
+        return positions.map((at) => ({
+            ...marker,
+            at,
+            line: own(marker.line, at),
+            text: own(marker.text, at),
+            dot: own(marker.dot, at)
+        }));
+    }
     /** The delta `config` asks for over `allSeries`, or `undefined` while an end has no value there. */
     static build(axis, allSeries, config) {
         const at = Number(config.at);

package/dist/markers/delta/DeltaMarker.svelte

@@ -1,96 +1,18 @@
 <script lang="ts" generics="TData extends Record<string, unknown>">
-	import { Line } from 'svelteplot';
-	import DotMarker from '../dot/DotMarker.svelte';
-	import TextMarker from '../text/TextMarker.svelte';
+	import DeltaPoint from './DeltaPoint.svelte';
 	import { Delta } from './Delta';
-	import { getConfiguration } from '../../configuration/config.svelte';
 	import type { Series } from '../../types/plots/data/common';
 	import type { DeltaMarkerConfig } from '../../types/markers/axis/delta';
 
+	/**
+	 * A delta annotation: one at `marker.at`, or, when it is a list, one at each position - all with the
+	 * same ends. `line`, `text` and `dot` can be functions of the position.
+	 */
 	let { marker, data = [] }: { marker: DeltaMarkerConfig; data?: Series<TData>[] } = $props();
 
-	const resolved = $derived(Delta.build(marker.axis, data, marker));
-	const label = $derived(getConfiguration().delta.text[marker.axis]);
-	const lineAnchor = $derived(marker.text?.lineAnchor ?? label.lineAnchor);
-
-	const clampRange = $derived.by((): [number, number] | undefined => {
-		const domain = marker.axis === 'x' ? marker.yDomain : marker.xDomain;
-		if (!domain || domain.length < 2) return undefined;
-		const lo = Number(domain[0]);
-		const hi = Number(domain[domain.length - 1]);
-		return isNaN(lo) || isNaN(hi) ? undefined : [Math.min(lo, hi), Math.max(lo, hi)];
-	});
-
-	function clamp(v: number): number {
-		return clampRange ? Math.max(clampRange[0], Math.min(clampRange[1], v)) : v;
-	}
-
-	function pt(fixed: number, varying: number) {
-		return marker.axis === 'x' ? { x: fixed, y: varying } : { x: varying, y: fixed };
-	}
-
-	function textVaryCoord(fromVis: number, toVis: number) {
-		return lineAnchor === 'top'
-			? Math.max(fromVis, toVis)
-			: lineAnchor === 'bottom'
-				? Math.min(fromVis, toVis)
-				: (fromVis + toVis) / 2;
-	}
-
-	// Pre-derive all coordinates as script-level signals so prop getters read safe
-	// values during Svelte 5 teardown, before the {#if} guard finishes unmounting.
-	const coords = $derived.by(() => {
-		if (!resolved) return null;
-		const fromVis = clamp(resolved.from ?? 0);
-		const toVis = clamp(resolved.to ?? 0);
-		const at = resolved.at ?? 0;
-		return {
-			fromPt: pt(at, fromVis),
-			toPt: pt(at, toVis),
-			textPt: pt(at, textVaryCoord(fromVis, toVis)),
-			lineData: [pt(at, fromVis), pt(at, toVis)],
-			diff: resolved.diff ?? 0
-		};
-	});
-
-	const dotStyles = $derived({
-		dotRadius: 4,
-		dotFill: marker.line?.stroke,
-		dotStroke: marker.line?.stroke,
-		dotStrokeWidth: 2,
-		...marker.dot
-	});
+	const points = $derived(Delta.points(marker));
 </script>
 
-{#if coords}
-	<Line
-		data={coords.lineData}
-		x={(p) => p.x}
-		y={(p) => p.y}
-		stroke={marker.line?.stroke ?? 'currentColor'}
-		strokeWidth={marker.line?.strokeWidth ?? 2}
-		strokeOpacity={marker.line?.strokeOpacity ?? 0.8}
-		strokeDasharray={marker.line?.strokeDasharray ?? '6 6'}
-		strokeLinecap={marker.line?.strokeLinecap ?? 'round'}
-	/>
-	<DotMarker marker={{ type: 'dot', x: coords.fromPt.x, y: coords.fromPt.y, styles: dotStyles }} />
-	<DotMarker marker={{ type: 'dot', x: coords.toPt.x, y: coords.toPt.y, styles: dotStyles }} />
-	<TextMarker
-		marker={{
-			type: 'text',
-			x: coords.textPt.x,
-			y: coords.textPt.y,
-			text: (marker.formatDiff ?? ((v: number) => v.toFixed(1)))(coords.diff),
-			styles: {
-				fontWeight: 'bold',
-				fontSize: 14,
-				textAnchor: label.textAnchor,
-				fill: marker.line?.stroke ?? 'currentColor',
-				...marker.text,
-				dx: marker.text?.dx ?? label.dx,
-				dy: marker.text?.dy ?? label.dy,
-				lineAnchor
-			}
-		}}
-	/>
-{/if}
+{#each points as point (String(point.at))}
+	<DeltaPoint marker={point} {data} />
+{/each}