@fundar/data-chart-telling 0.0.64 → 1.1.0

package/dist/markers/MarkerKinds.d.ts

@@ -0,0 +1,173 @@
+import type { MarkerTraits } from '../types/markers/traits';
+/**
+ * Every marker kind's traits, in one row each. Typed over every kind, so a
+ * new kind can't be added without declaring all of its traits here.
+ */
+export declare class MarkerKinds {
+    static readonly traits: {
+        area: {
+            clip: true;
+            drawsRows: true;
+            legendSymbol: "area";
+        };
+        arrow: {
+            clip: false;
+            drawsRows: true;
+        };
+        bar: {
+            clip: true;
+            drawsRows: true;
+            legendSymbol: "bar";
+        };
+        bollinger: {
+            clip: true;
+            drawsRows: true;
+            legendSymbol: "line";
+        };
+        brush: {
+            clip: false;
+            drawsRows: false;
+        };
+        box: {
+            clip: true;
+            drawsRows: true;
+            legendSymbol: "bar";
+        };
+        cell: {
+            clip: true;
+            drawsRows: true;
+            legendSymbol: "cell";
+        };
+        component: {
+            clip: false;
+            drawsRows: false;
+        };
+        contour: {
+            clip: false;
+            drawsRows: false;
+        };
+        delaunayLink: {
+            clip: true;
+            drawsRows: true;
+        };
+        delaunayMesh: {
+            clip: true;
+            drawsRows: true;
+        };
+        delta: {
+            clip: false;
+            drawsRows: false;
+        };
+        density: {
+            clip: true;
+            drawsRows: true;
+            legendSymbol: "area";
+        };
+        difference: {
+            clip: true;
+            drawsRows: true;
+            legendSymbol: "area";
+        };
+        dot: {
+            clip: false;
+            drawsRows: true;
+            legendSymbol: "dot";
+        };
+        geo: {
+            clip: false;
+            drawsRows: false;
+        };
+        'geo-component': {
+            clip: false;
+            drawsRows: true;
+        };
+        'geo-hover': {
+            clip: false;
+            drawsRows: false;
+        };
+        graticule: {
+            clip: false;
+            drawsRows: false;
+        };
+        hover: {
+            clip: false;
+            drawsRows: false;
+        };
+        hull: {
+            clip: true;
+            drawsRows: true;
+            legendSymbol: "area";
+        };
+        image: {
+            clip: false;
+            drawsRows: true;
+        };
+        inset: {
+            clip: false;
+            drawsRows: false;
+        };
+        line: {
+            clip: true;
+            drawsRows: true;
+            legendSymbol: "line";
+        };
+        link: {
+            clip: false;
+            drawsRows: false;
+        };
+        raster: {
+            clip: true;
+            drawsRows: true;
+        };
+        rect: {
+            clip: true;
+            drawsRows: true;
+            legendSymbol: "rect";
+        };
+        regression: {
+            clip: true;
+            drawsRows: true;
+            legendSymbol: "line";
+        };
+        rule: {
+            clip: true;
+            drawsRows: false;
+            legendSymbol: "line";
+        };
+        sphere: {
+            clip: false;
+            drawsRows: false;
+        };
+        text: {
+            clip: false;
+            drawsRows: true;
+        };
+        tick: {
+            clip: true;
+            drawsRows: true;
+        };
+        trail: {
+            clip: true;
+            drawsRows: true;
+            legendSymbol: "line";
+        };
+        vector: {
+            clip: false;
+            drawsRows: false;
+        };
+        voronoi: {
+            clip: true;
+            drawsRows: true;
+        };
+        voronoiMesh: {
+            clip: true;
+            drawsRows: true;
+        };
+        waffle: {
+            clip: true;
+            drawsRows: true;
+        };
+    };
+    /** The traits of a marker kind, or `undefined` for a type no kind declares. */
+    static of(type: string | undefined): MarkerTraits | undefined;
+}

package/dist/markers/MarkerKinds.js

@@ -0,0 +1,51 @@
+/**
+ * Every marker kind's traits, in one row each. Typed over every kind, so a
+ * new kind can't be added without declaring all of its traits here.
+ */
+export class MarkerKinds {
+    static traits = {
+        area: { clip: true, drawsRows: true, legendSymbol: 'area' },
+        arrow: { clip: false, drawsRows: true },
+        bar: { clip: true, drawsRows: true, legendSymbol: 'bar' },
+        bollinger: { clip: true, drawsRows: true, legendSymbol: 'line' },
+        brush: { clip: false, drawsRows: false },
+        box: { clip: true, drawsRows: true, legendSymbol: 'bar' },
+        cell: { clip: true, drawsRows: true, legendSymbol: 'cell' },
+        component: { clip: false, drawsRows: false },
+        contour: { clip: false, drawsRows: false },
+        delaunayLink: { clip: true, drawsRows: true },
+        delaunayMesh: { clip: true, drawsRows: true },
+        delta: { clip: false, drawsRows: false },
+        density: { clip: true, drawsRows: true, legendSymbol: 'area' },
+        difference: { clip: true, drawsRows: true, legendSymbol: 'area' },
+        dot: { clip: false, drawsRows: true, legendSymbol: 'dot' },
+        geo: { clip: false, drawsRows: false },
+        'geo-component': { clip: false, drawsRows: true },
+        'geo-hover': { clip: false, drawsRows: false },
+        graticule: { clip: false, drawsRows: false },
+        hover: { clip: false, drawsRows: false },
+        hull: { clip: true, drawsRows: true, legendSymbol: 'area' },
+        image: { clip: false, drawsRows: true },
+        inset: { clip: false, drawsRows: false },
+        line: { clip: true, drawsRows: true, legendSymbol: 'line' },
+        link: { clip: false, drawsRows: false },
+        raster: { clip: true, drawsRows: true },
+        rect: { clip: true, drawsRows: true, legendSymbol: 'rect' },
+        regression: { clip: true, drawsRows: true, legendSymbol: 'line' },
+        rule: { clip: true, drawsRows: false, legendSymbol: 'line' },
+        sphere: { clip: false, drawsRows: false },
+        text: { clip: false, drawsRows: true },
+        tick: { clip: true, drawsRows: true },
+        trail: { clip: true, drawsRows: true, legendSymbol: 'line' },
+        vector: { clip: false, drawsRows: false },
+        voronoi: { clip: true, drawsRows: true },
+        voronoiMesh: { clip: true, drawsRows: true },
+        waffle: { clip: true, drawsRows: true }
+    };
+    /** The traits of a marker kind, or `undefined` for a type no kind declares. */
+    static of(type) {
+        return type !== undefined && type in MarkerKinds.traits
+            ? MarkerKinds.traits[type]
+            : undefined;
+    }
+}

package/dist/markers/area/AreaMarker.svelte

@@ -0,0 +1,110 @@
+<script lang="ts">
+	import { AreaX, AreaY } from 'svelteplot';
+	import { usePlot } from '../../layout/plot/usePlot';
+	import { MarkerChannels } from '../utils/MarkerChannels';
+	import { getConfiguration } from '../../configuration/config.svelte';
+	import type { AreaMarkerConfig } from '../../types/markers/common';
+
+	/**
+	 * Renders one `'area'` marker as `<AreaX>` or `<AreaY>`, picked from the way the plot
+	 * runs (`usePlot().axes`). Never stacked by svelteplot itself: stacking is the
+	 * `stackY`/`stackX` transform's job, which supplies the band it draws. Without
+	 * a band, the area runs from zero up to its own value.
+	 */
+	let { marker }: { marker: AreaMarkerConfig } = $props();
+
+	const plot = usePlot();
+	const isHorizontal = $derived(plot.axes?.isHorizontal ?? false);
+
+	const cfg = $derived(getConfiguration());
+	const data = $derived(marker.data ?? []);
+	const channelFill = $derived(MarkerChannels.buildFill(data, marker.color, marker.scales, cfg));
+	const opacityBuckets = $derived(
+		MarkerChannels.buildOpacityBuckets(data, marker.opacity, marker.scales, cfg)
+	);
+
+	const hasYBand = $derived(marker.y1 !== undefined || marker.y2 !== undefined);
+	const hasXBand = $derived(marker.x1 !== undefined || marker.x2 !== undefined);
+	const y1 = $derived(hasYBand ? marker.y1 : 0);
+	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));
+</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}
+		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={marker.styles?.fillOpacity ?? cfg.area.fillOpacity}
+		stroke={marker.styles?.stroke}
+		strokeWidth={marker.styles?.strokeWidth}
+		strokeOpacity={marker.styles?.strokeOpacity}
+		strokeDasharray={marker.styles?.strokeDasharray}
+	/>
+{: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}
+	/>
+{/if}

package/dist/markers/area/AreaMarker.svelte.d.ts

@@ -0,0 +1,7 @@
+import type { AreaMarkerConfig } from '../../types/markers/common';
+type $$ComponentProps = {
+    marker: AreaMarkerConfig;
+};
+declare const AreaMarker: import("svelte").Component<$$ComponentProps, {}, "">;
+type AreaMarker = ReturnType<typeof AreaMarker>;
+export default AreaMarker;

package/dist/markers/arrow/ArrowMarker.svelte

@@ -0,0 +1,28 @@
+<script lang="ts">
+	import { Arrow } from 'svelteplot';
+	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. */
+	let { marker }: { marker: ArrowMarkerConfig } = $props();
+
+	const data = $derived(marker.data ?? []);
+</script>
+
+<Arrow
+	{data}
+	x1={marker.x1}
+	y1={marker.y1}
+	x2={marker.x2}
+	y2={marker.y2}
+	bend={marker.bend}
+	headAngle={marker.headAngle ?? 60}
+	headLength={marker.headLength ?? 8}
+	inset={marker.inset ?? 0}
+	insetStart={marker.insetStart}
+	insetEnd={marker.insetEnd}
+	sweep={marker.sweep}
+	stroke={marker.styles?.stroke ?? 'currentColor'}
+	strokeWidth={marker.styles?.strokeWidth}
+	strokeOpacity={marker.styles?.strokeOpacity}
+	strokeDasharray={marker.styles?.strokeDasharray}
+/>

package/dist/markers/arrow/ArrowMarker.svelte.d.ts

@@ -0,0 +1,7 @@
+import type { ArrowMarkerConfig } from '../../types/markers/common';
+type $$ComponentProps = {
+    marker: ArrowMarkerConfig;
+};
+declare const ArrowMarker: import("svelte").Component<$$ComponentProps, {}, "">;
+type ArrowMarker = ReturnType<typeof ArrowMarker>;
+export default ArrowMarker;

package/dist/markers/{BarMarker.svelte → bar/BarMarker.svelte}

@@ -1,6 +1,10 @@
 <script lang="ts">
-	import { BarX, BarY, usePlot } from 'svelteplot';
-	import type { BarMarkerConfig } from '../types/markers/common';
+	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
@@ -9,7 +13,18 @@
 	 */
 	let { marker }: { marker: BarMarkerConfig } = $props();
 
-	const plot = usePlot();
+	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;
 	}
@@ -23,18 +38,6 @@
 		const b = Number(range[range.length - 1]);
 		return [Math.min(a, b), Math.max(a, b)];
 	}
-	// A `'hitArea'` marker's own value-axis slice, mapped to pixels.
-	function hitAreaValueRangeFor(
-		isHorizontal: boolean,
-		from: unknown,
-		to: unknown
-	): [number, number] {
-		if (typeof from !== 'number' || typeof to !== 'number') return valueExtentFor(isHorizontal);
-		const scale = valueScaleFor(isHorizontal);
-		const a = Number(scale?.fn?.(from) ?? 0);
-		const b = Number(scale?.fn?.(to) ?? 0);
-		return [Math.min(a, b), Math.max(a, b)];
-	}
 </script>
 
 {#if marker.role === 'segment'}
@@ -42,35 +45,35 @@
 	{@const bandwidth = categoryScale?.type === 'band' ? categoryScale.fn.bandwidth() : 0}
 	{#if marker.isHorizontal}
 		<BarX
-			data={marker.data}
+			{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}
-			fill={marker.style?.fill}
-			fillOpacity={marker.style?.fillOpacity}
-			stroke={marker.style?.stroke}
-			strokeWidth={marker.style?.strokeWidth}
-			strokeOpacity={marker.style?.strokeOpacity}
-			strokeDasharray={marker.style?.strokeDasharray}
-			borderRadius={marker.style?.borderRadius}
+			fill={channelFill ?? marker.styles?.fill}
+			fillOpacity={marker.styles?.fillOpacity}
+			stroke={marker.styles?.stroke}
+			strokeWidth={marker.styles?.strokeWidth}
+			strokeOpacity={marker.styles?.strokeOpacity}
+			strokeDasharray={marker.styles?.strokeDasharray}
+			borderRadius={marker.styles?.borderRadius}
 		/>
 	{:else}
 		<BarY
-			data={marker.data}
+			{data}
 			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}
-			fill={marker.style?.fill}
-			fillOpacity={marker.style?.fillOpacity}
-			stroke={marker.style?.stroke}
-			strokeWidth={marker.style?.strokeWidth}
-			strokeOpacity={marker.style?.strokeOpacity}
-			strokeDasharray={marker.style?.strokeDasharray}
-			borderRadius={marker.style?.borderRadius}
+			fill={channelFill ?? marker.styles?.fill}
+			fillOpacity={marker.styles?.fillOpacity}
+			stroke={marker.styles?.stroke}
+			strokeWidth={marker.styles?.strokeWidth}
+			strokeOpacity={marker.styles?.strokeOpacity}
+			strokeDasharray={marker.styles?.strokeDasharray}
+			borderRadius={marker.styles?.borderRadius}
 		/>
 	{/if}
 {:else}
@@ -83,9 +86,8 @@
 		{@const insetTop = (marker.insetTop ?? 0) * bandwidth}
 		{@const insetBottom = (marker.insetBottom ?? 0) * bandwidth}
 		{#if marker.role === 'hitArea'}
-			{@const [rangeMin, rangeMax] = marker.isHorizontal
-				? hitAreaValueRangeFor(marker.isHorizontal, marker.x1, marker.x2)
-				: hitAreaValueRangeFor(marker.isHorizontal, marker.y1, marker.y2)}
+			<!-- 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
@@ -95,8 +97,8 @@
 					width={Math.max(0, rangeMax - rangeMin - insetLeft - insetRight)}
 					height={Math.max(0, bandwidth - insetTop - insetBottom)}
 					fill="transparent"
-					onpointerenter={marker.onpointerenter}
-					onpointerleave={marker.onpointerleave}
+					onpointerenter={enter}
+					onpointerleave={leave}
 				/>
 			{:else}
 				<!-- svelte-ignore a11y_no_static_element_interactions -->
@@ -107,8 +109,8 @@
 					width={Math.max(0, bandwidth - insetLeft - insetRight)}
 					height={Math.max(0, rangeMax - rangeMin - insetTop - insetBottom)}
 					fill="transparent"
-					onpointerenter={marker.onpointerenter}
-					onpointerleave={marker.onpointerleave}
+					onpointerenter={enter}
+					onpointerleave={leave}
 				/>
 			{/if}
 		{:else}
@@ -122,13 +124,13 @@
 					y={center - thickness / 2}
 					width={Math.max(0, valueMax - valueMin)}
 					height={thickness}
-					fill={marker.style?.fill}
-					fill-opacity={marker.style?.fillOpacity}
-					stroke={marker.style?.stroke}
-					stroke-width={marker.style?.strokeWidth}
-					stroke-opacity={marker.style?.strokeOpacity}
-					stroke-dasharray={marker.style?.strokeDasharray}
-					rx={marker.style?.borderRadius}
+					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}
@@ -140,13 +142,13 @@
 					y={valueMin}
 					width={thickness}
 					height={Math.max(0, valueMax - valueMin)}
-					fill={marker.style?.fill}
-					fill-opacity={marker.style?.fillOpacity}
-					stroke={marker.style?.stroke}
-					stroke-width={marker.style?.strokeWidth}
-					stroke-opacity={marker.style?.strokeOpacity}
-					stroke-dasharray={marker.style?.strokeDasharray}
-					ry={marker.style?.borderRadius}
+					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}

package/dist/markers/{BarMarker.svelte.d.ts → bar/BarMarker.svelte.d.ts}

@@ -1,4 +1,4 @@
-import type { BarMarkerConfig } from '../types/markers/common';
+import type { BarMarkerConfig } from '../../types/markers/common';
 type $$ComponentProps = {
     marker: BarMarkerConfig;
 };

package/dist/markers/bollinger/BollingerMarker.svelte

@@ -0,0 +1,44 @@
+<script lang="ts">
+	import { BollingerX, BollingerY } from 'svelteplot';
+	import { usePlot } from '../../layout/plot/usePlot';
+	import type { BollingerMarkerConfig } from '../../types/markers/common';
+
+	/**
+	 * Renders one `'bollinger'` marker - a moving-average band (svelteplot's
+	 * `BollingerX`/`BollingerY`, picked from the way the plot runs
+	 * (`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).
+	 */
+	let { marker }: { marker: BollingerMarkerConfig } = $props();
+
+	const plot = usePlot();
+	const isHorizontal = $derived(plot.axes?.isHorizontal ?? false);
+
+	const data = $derived(marker.data ?? []);
+</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}
+		x={marker.x}
+		y={marker.y}
+		n={marker.n}
+		k={marker.k}
+		stroke={marker.styles?.stroke}
+		strokeOpacity={marker.styles?.strokeOpacity}
+		fill={marker.styles?.bandFill}
+	/>
+{/if}

package/dist/markers/bollinger/BollingerMarker.svelte.d.ts

@@ -0,0 +1,7 @@
+import type { BollingerMarkerConfig } from '../../types/markers/common';
+type $$ComponentProps = {
+    marker: BollingerMarkerConfig;
+};
+declare const BollingerMarker: import("svelte").Component<$$ComponentProps, {}, "">;
+type BollingerMarker = ReturnType<typeof BollingerMarker>;
+export default BollingerMarker;