@rokkit/chart 1.3.5 → 1.3.7

package/dist/geoms/Highlight.svelte

@@ -0,0 +1,105 @@
+<script lang="ts">
+	import { getContext } from 'svelte'
+	import type { PlotState } from '../PlotState.svelte.js'
+	import { resolveHighlight } from '../lib/highlight.js'
+	import { scalePos } from '../lib/scale.js'
+
+	type Row = Record<string, unknown>
+	type Props = {
+		x?: string
+		y?: string
+		highlight?: 'first' | 'last' | 'min' | 'max' | number | ((row: Row, i: number) => boolean)
+		label?: boolean | string | ((row: Row) => unknown)
+	}
+	let { x, y, highlight = undefined, label = false }: Props = $props()
+
+	const state = getContext<PlotState>('plot-state')
+
+	const marks = $derived.by(() => {
+		const rows = state?.data ?? []
+		const xs = state?.xScale
+		const ys = state?.yScale
+		if (!xs || !ys || !x || !y) return []
+		const selectedRows = state?.selectedRows ?? []
+		const selectedSet = new Set(selectedRows)
+		const out = []
+		const seen = new Set()
+		if (highlight !== null && highlight !== undefined && rows.length) {
+			for (const i of resolveHighlight(rows, highlight, { y })) {
+				const row = rows[i]
+				out.push({
+					key: `h${i}`,
+					cx: scalePos(xs, row[x]),
+					cy: ys(Number(row[y])),
+					row,
+					// A statically-highlighted point that is also selected renders as
+					// selected — selection is the stronger, interactive state.
+					selected: selectedSet.has(row)
+				})
+				seen.add(row)
+			}
+		}
+		selectedRows.forEach((row, j) => {
+			if (seen.has(row)) return
+			out.push({
+				key: `s${j}`,
+				cx: scalePos(xs, row[x]),
+				cy: ys(Number(row[y])),
+				row,
+				selected: true
+			})
+		})
+		return out.filter((m) => Number.isFinite(m.cx) && Number.isFinite(m.cy))
+	})
+
+	function resolveLabel(row: Row): string | null {
+		if (!label) return null
+		if (label === true) return String((y ? row[y] : '') ?? '')
+		if (typeof label === 'function') return String(label(row) ?? '')
+		return String(row[label] ?? '')
+	}
+</script>
+
+{#if marks.length}
+	<g data-plot-geom="highlight">
+		{#each marks as m (m.key)}
+			<circle
+				cx={m.cx}
+				cy={m.cy}
+				data-plot-highlight
+				data-plot-selected={m.selected ? 'true' : undefined}
+			/>
+			{#if label}
+				{@const text = resolveLabel(m.row)}
+				{#if text}
+					<text x={m.cx} y={m.cy} dy="-8" text-anchor="middle" data-plot-highlight-label
+						>{text}</text
+					>
+				{/if}
+			{/if}
+		{/each}
+	</g>
+{/if}
+
+<style>
+	[data-plot-highlight] {
+		fill: var(--chart-highlight-color, rgb(var(--color-accent-500, 194 65 12)));
+		stroke: var(--chart-highlight-ring, none);
+		r: var(--chart-highlight-radius, 4);
+		/* Visual only — let clicks pass through to the data hit target beneath so the
+		   highlighted/selected observation stays selectable (and de-selectable). */
+		pointer-events: none;
+	}
+	[data-plot-highlight-label] {
+		fill: currentColor;
+		font-size: 11px;
+	}
+	[data-plot-highlight][data-plot-selected='true'] {
+		stroke: var(
+			--chart-selected-ring,
+			var(--chart-highlight-color, rgb(var(--color-accent-500, 194 65 12)))
+		);
+		stroke-width: var(--chart-selected-ring-width, 2);
+		fill: var(--chart-selected-fill, var(--color-paper, #fff));
+	}
+</style>

package/dist/geoms/Highlight.svelte.d.ts

@@ -0,0 +1,10 @@
+type Row = Record<string, unknown>;
+type Props = {
+    x?: string;
+    y?: string;
+    highlight?: 'first' | 'last' | 'min' | 'max' | number | ((row: Row, i: number) => boolean);
+    label?: boolean | string | ((row: Row) => unknown);
+};
+declare const Highlight: import("svelte").Component<Props, {}, "">;
+type Highlight = ReturnType<typeof Highlight>;
+export default Highlight;

package/dist/geoms/Line.svelte

@@ -4,6 +4,7 @@
 	import { buildLines } from '../lib/brewing/marks/lines.js'
 	import { buildSymbolPath } from '../lib/brewing/marks/points.js'
 	import { keyboardNav } from '../lib/keyboard-nav.js'
+	import { buildSelectDetail } from '../lib/select.js'
 	import LabelPill from './LabelPill.svelte'
 
 	type Row = Record<string, unknown>
@@ -48,6 +49,18 @@
 	const plotState = getContext<PlotState>('plot-state')
 	let id = $state<string | null>(null)
 
+	function selectPoint(
+		pt: { data: Row },
+		seg: { key?: unknown },
+		event: MouseEvent | KeyboardEvent
+	) {
+		onselect?.(pt.data)
+		if (plotState.interactive)
+			plotState.handleSelect(
+				buildSelectDetail(pt.data, plotState.data.indexOf(pt.data), { x, y }, 'line', seg?.key, event)
+			)
+	}
+
 	onMount(() => {
 		id = plotState.registerGeom({
 			type: 'line',
@@ -91,7 +104,7 @@
 				data-plot-element="line"
 			/>
 			{#if symbolField && symbolMap}
-				{#each seg.points as pt (`${pt.x}::${pt.y}`)}
+				{#each seg.points as pt (pt.i)}
 					<path
 						transform="translate({pt.x},{pt.y})"
 						d={buildSymbolPath(symbolMap.get(pt.data[symbolField]) ?? 'circle', markerRadius)}
@@ -103,7 +116,7 @@
 				{/each}
 			{/if}
 			{#if label}
-				{#each seg.points as pt (`label::${pt.x}::${pt.y}`)}
+				{#each seg.points as pt (`label::${pt.i}`)}
 					{@const text = resolveLabel(pt.data)}
 					{#if text}
 						<LabelPill
@@ -117,21 +130,25 @@
 			{/if}
 			<!-- Invisible hit areas for tooltip and selection -->
 			<!-- svelte-ignore a11y_no_noninteractive_tabindex -->
-			{#each seg.points as pt (`hover::${pt.x}::${pt.y}`)}
+			{#each seg.points as pt (`hover::${pt.i}`)}
 				<circle
 					cx={pt.x}
 					cy={pt.y}
 					r="8"
 					fill="transparent"
 					stroke="none"
-					role={onselect || keyboard ? 'button' : 'presentation'}
-					tabindex={onselect || keyboard ? 0 : undefined}
-					style:cursor={onselect ? 'pointer' : undefined}
+					role={onselect || keyboard || plotState.interactive ? 'button' : 'presentation'}
+					tabindex={onselect || keyboard || plotState.interactive ? 0 : undefined}
+					style:cursor={onselect || keyboard || plotState.interactive ? 'pointer' : undefined}
 					data-plot-element="line-hover"
 					onmouseenter={() => plotState.setHovered(pt.data)}
 					onmouseleave={() => plotState.clearHovered()}
-					onclick={onselect ? () => onselect(pt.data) : undefined}
-					onkeydown={onselect ? (e) => (e.key === 'Enter' || e.key === ' ') && onselect(pt.data) : undefined}
+					onclick={onselect || keyboard || plotState.interactive
+						? (e) => selectPoint(pt, seg, e)
+						: undefined}
+					onkeydown={onselect || keyboard || plotState.interactive
+						? (e) => (e.key === 'Enter' || e.key === ' ') && selectPoint(pt, seg, e)
+						: undefined}
 					use:keyboardNav={keyboard}
 				/>
 			{/each}

package/dist/geoms/Point.svelte

@@ -4,6 +4,7 @@
 	import type { PlotState } from '../PlotState.svelte.js'
 	import { buildPoints } from '../lib/brewing/marks/points.js'
 	import { keyboardNav } from '../lib/keyboard-nav.js'
+	import { buildSelectDetail } from '../lib/select.js'
 	import LabelPill from './LabelPill.svelte'
 
 	type Row = Record<string, unknown>
@@ -52,6 +53,21 @@
 	const plotState = getContext<PlotState>('plot-state')
 	let id = $state<string | null>(null)
 
+	function selectPoint(pt: { data: Row }, event: MouseEvent | KeyboardEvent) {
+		onselect?.(pt.data)
+		if (plotState.interactive)
+			plotState.handleSelect(
+				buildSelectDetail(
+					pt.data,
+					plotState.data.indexOf(pt.data),
+					{ x, y },
+					'point',
+					color ? pt.data[color] : undefined,
+					event
+				)
+			)
+	}
+
 	onMount(() => {
 		id = plotState.registerGeom({
 			type: 'point',
@@ -118,14 +134,16 @@
 					stroke-width="1"
 					fill-opacity={options.opacity ?? plotState.chartPreset.opacity.point}
 					data-plot-element="point"
-					role={onselect || keyboard ? 'button' : 'graphics-symbol'}
-					tabindex={onselect || keyboard ? 0 : undefined}
-					style:cursor={onselect ? 'pointer' : undefined}
+					role={onselect || keyboard || plotState.interactive ? 'button' : 'graphics-symbol'}
+					tabindex={onselect || keyboard || plotState.interactive ? 0 : undefined}
+					style:cursor={onselect || keyboard || plotState.interactive ? 'pointer' : undefined}
 					aria-label="{pt.data[x ?? '']}, {pt.data[y ?? '']}"
 					onmouseenter={() => plotState.setHovered(pt.data)}
 					onmouseleave={() => plotState.clearHovered()}
-					onclick={onselect ? () => onselect(pt.data) : undefined}
-					onkeydown={onselect ? (e) => (e.key === 'Enter' || e.key === ' ') && onselect(pt.data) : undefined}
+					onclick={onselect || keyboard || plotState.interactive ? (e) => selectPoint(pt, e) : undefined}
+					onkeydown={onselect || keyboard || plotState.interactive
+						? (e) => (e.key === 'Enter' || e.key === ' ') && selectPoint(pt, e)
+						: undefined}
 					use:keyboardNav={keyboard}
 				/>
 			{:else}
@@ -138,14 +156,16 @@
 					stroke-width="1"
 					fill-opacity={options.opacity ?? plotState.chartPreset.opacity.point}
 					data-plot-element="point"
-					role={onselect || keyboard ? 'button' : 'graphics-symbol'}
-					tabindex={onselect || keyboard ? 0 : undefined}
-					style:cursor={onselect ? 'pointer' : undefined}
+					role={onselect || keyboard || plotState.interactive ? 'button' : 'graphics-symbol'}
+					tabindex={onselect || keyboard || plotState.interactive ? 0 : undefined}
+					style:cursor={onselect || keyboard || plotState.interactive ? 'pointer' : undefined}
 					aria-label="{pt.data[x ?? '']}, {pt.data[y ?? '']}"
 					onmouseenter={() => plotState.setHovered(pt.data)}
 					onmouseleave={() => plotState.clearHovered()}
-					onclick={onselect ? () => onselect(pt.data) : undefined}
-					onkeydown={onselect ? (e) => (e.key === 'Enter' || e.key === ' ') && onselect(pt.data) : undefined}
+					onclick={onselect || keyboard || plotState.interactive ? (e) => selectPoint(pt, e) : undefined}
+					onkeydown={onselect || keyboard || plotState.interactive
+						? (e) => (e.key === 'Enter' || e.key === ' ') && selectPoint(pt, e)
+						: undefined}
 					use:keyboardNav={keyboard}
 				/>
 			{/if}

package/dist/geoms/Trend.svelte

@@ -0,0 +1,66 @@
+<script lang="ts">
+	import { getContext } from 'svelte'
+	import { line as d3line } from 'd3-shape'
+	import type { PlotState } from '../PlotState.svelte.js'
+	import { computeTrend } from '../lib/trend.js'
+	import { scalePos } from '../lib/scale.js'
+
+	type Method = string | number | { type: string; [k: string]: unknown }
+	type Props = { x?: string; y?: string; trend?: Method | Method[] }
+	let { x, y, trend = undefined }: Props = $props()
+
+	const state = getContext<PlotState>('plot-state')
+
+	const methods = $derived(
+		Array.isArray(trend) ? trend : trend === null || trend === undefined ? [] : [trend]
+	)
+
+	const typeOf = (m: Method) => {
+		const t = typeof m === 'string' ? m : typeof m === 'number' ? 'value' : (m?.type ?? '')
+		return t === 'mean' ? 'avg' : t
+	}
+
+	const paths = $derived.by(() => {
+		const rows = state?.data ?? []
+		const xs = state?.xScale
+		const ys = state?.yScale
+		if (!rows.length || !xs || !ys || !x || !y || !methods.length) return []
+		const out: { d: string; type: string; i: number }[] = []
+		methods.forEach((m, idx) => {
+			const res = computeTrend(rows, { x, y }, m)
+			if (!res) return
+			if (res.kind === 'constant') {
+				const yy = ys(res.value)
+				out.push({ d: `M0,${yy} L${state.innerWidth},${yy}`, type: typeOf(m), i: idx })
+			} else {
+				const pts = res.values
+					.map((v, i) => ({ vx: scalePos(xs, rows[i][x]), vy: ys(v) }))
+					.filter((p) => Number.isFinite(p.vx) && Number.isFinite(p.vy))
+				const gen = d3line<{ vx: number; vy: number }>()
+					.x((p) => p.vx)
+					.y((p) => p.vy)
+				const d = gen(pts)
+				if (d) out.push({ d, type: typeOf(m), i: idx })
+			}
+		})
+		return out
+	})
+</script>
+
+{#if paths.length}
+	<g data-plot-geom="trend">
+		{#each paths as p (p.i)}
+			<path d={p.d} data-plot-trend={p.type} />
+		{/each}
+	</g>
+{/if}
+
+<style>
+	[data-plot-trend] {
+		fill: none;
+		stroke: var(--chart-trend-color, currentColor);
+		stroke-width: var(--chart-trend-width, 1);
+		stroke-dasharray: var(--chart-trend-dash, 4 4);
+		opacity: var(--chart-trend-opacity, 0.7);
+	}
+</style>

package/dist/geoms/Trend.svelte.d.ts

@@ -0,0 +1,12 @@
+type Method = string | number | {
+    type: string;
+    [k: string]: unknown;
+};
+type Props = {
+    x?: string;
+    y?: string;
+    trend?: Method | Method[];
+};
+declare const Trend: import("svelte").Component<Props, {}, "">;
+type Trend = ReturnType<typeof Trend>;
+export default Trend;

package/dist/index.d.ts

@@ -8,6 +8,8 @@ export namespace Plot {
     export { Area };
     export { Point };
     export { Arc };
+    export { Highlight };
+    export { Trend };
 }
 export namespace PlotLayers { }
 export { default as PlotChart } from "./Plot.svelte";
@@ -28,6 +30,8 @@ export { default as GeomCandlestick } from "./geoms/Candlestick.svelte";
 export { default as GeomWaterfall } from "./geoms/Waterfall.svelte";
 export { default as GeomHexbin } from "./geoms/Hexbin.svelte";
 export { default as GeomRibbon } from "./geoms/Ribbon.svelte";
+export { default as GeomHighlight } from "./geoms/Highlight.svelte";
+export { default as GeomTrend } from "./geoms/Trend.svelte";
 export { default as Chart } from "./Chart.svelte";
 export { default as Sparkline } from "./Sparkline.svelte";
 export { default as BarChart } from "./charts/BarChart.svelte";
@@ -60,5 +64,7 @@ import Line from './Plot/Line.svelte';
 import Area from './Plot/Area.svelte';
 import Point from './Plot/Point.svelte';
 import Arc from './Plot/Arc.svelte';
+import Highlight from './geoms/Highlight.svelte';
+import Trend from './geoms/Trend.svelte';
 export { createChartPreset, defaultPreset } from "./lib/preset.js";
 export { buildSequentialScale, buildDivergingScale } from "./lib/brewing/colors.js";

package/dist/index.js

@@ -7,6 +7,8 @@ import Line from './Plot/Line.svelte'
 import Area from './Plot/Area.svelte'
 import Point from './Plot/Point.svelte'
 import Arc from './Plot/Arc.svelte'
+import Highlight from './geoms/Highlight.svelte'
+import Trend from './geoms/Trend.svelte'
 
 // Composable Plot primitives — use as <Plot.Root>, <Plot.Axis>, <Plot.Bar>, etc.
 export const Plot = {
@@ -18,7 +20,9 @@ export const Plot = {
 	Line,
 	Area,
 	Point,
-	Arc
+	Arc,
+	Highlight,
+	Trend
 }
 
 /** @deprecated Use Plot instead */
@@ -48,6 +52,8 @@ export { default as GeomCandlestick } from './geoms/Candlestick.svelte'
 export { default as GeomWaterfall } from './geoms/Waterfall.svelte'
 export { default as GeomHexbin } from './geoms/Hexbin.svelte'
 export { default as GeomRibbon } from './geoms/Ribbon.svelte'
+export { default as GeomHighlight } from './geoms/Highlight.svelte'
+export { default as GeomTrend } from './geoms/Trend.svelte'
 
 // Export standalone components
 export { default as Chart } from './Chart.svelte'

package/dist/lib/brewing/brewer.svelte.d.ts

@@ -51,6 +51,7 @@ export class ChartBrewer {
             x: number;
             y: number;
             data: Record<string, unknown>;
+            i: number;
         }[];
         key?: unknown;
     }[];

package/dist/lib/brewing/marks/lines.d.ts

@@ -5,7 +5,7 @@
  * @param {Function} yScale
  * @param {Map} colors
  * @param {'linear'|'smooth'|'step'} [curve]
- * @returns {{ d: string | null, fill: string, stroke: string, points: {x:number, y:number, data: Record<string, unknown>}[], key?: unknown }[]}
+ * @returns {{ d: string | null, fill: string, stroke: string, points: {x:number, y:number, data: Record<string, unknown>, i: number}[], key?: unknown }[]}
  */
 export function buildLines(data: Object[], channels: {
     x?: string;
@@ -19,6 +19,7 @@ export function buildLines(data: Object[], channels: {
         x: number;
         y: number;
         data: Record<string, unknown>;
+        i: number;
     }[];
     key?: unknown;
 }[];

package/dist/lib/brewing/marks/lines.js

@@ -7,7 +7,7 @@ import { line, curveCatmullRom, curveStep } from 'd3-shape'
  * @param {Function} yScale
  * @param {Map} colors
  * @param {'linear'|'smooth'|'step'} [curve]
- * @returns {{ d: string | null, fill: string, stroke: string, points: {x:number, y:number, data: Record<string, unknown>}[], key?: unknown }[]}
+ * @returns {{ d: string | null, fill: string, stroke: string, points: {x:number, y:number, data: Record<string, unknown>, i: number}[], key?: unknown }[]}
  */
 export function buildLines(data, channels, xScale, yScale, colors, curve) {
 	const { x: xf, y: yf, color: cf } = channels
@@ -15,27 +15,31 @@ export function buildLines(data, channels, xScale, yScale, colors, curve) {
 		typeof xScale.bandwidth === 'function' ? xScale(d[xf]) + xScale.bandwidth() / 2 : xScale(d[xf])
 	const makeGen = () => {
 		const gen = line()
-			.x(xPos)
-			.y((d) => yScale(d[yf]))
+			.x((d) => xPos(d.data ?? d))
+			.y((d) => yScale((d.data ?? d)[yf]))
 		if (curve === 'smooth') gen.curve(curveCatmullRom)
 		else if (curve === 'step') gen.curve(curveStep)
 		return gen
 	}
-	const toPoints = (rows) => rows.map((d) => ({ x: xPos(d), y: yScale(d[yf]), data: d }))
+	const toPoints = (rowsWithIndices) => rowsWithIndices.map(({ data: d, i }) => ({ x: xPos(d), y: yScale(d[yf]), data: d, i }))
 
-	const sortByX = (rows) => [...rows].sort((a, b) => xPos(a) - xPos(b))
+	const sortByX = (rows) => {
+		const withIndices = rows.map((d, i) => ({ data: d, i }))
+		withIndices.sort((a, b) => xPos(a.data) - xPos(b.data))
+		return withIndices
+	}
 
 	if (!cf) {
 		const sorted = sortByX(data)
 		const stroke = colors?.values().next().value?.stroke ?? '#888'
-		return [{ d: makeGen()(sorted), fill: 'none', stroke, points: toPoints(sorted) }]
+		return [{ d: makeGen()(sorted.map(d => d.data)), fill: 'none', stroke, points: toPoints(sorted) }]
 	}
 	const groups = groupBy(data, cf)
 	return [...groups.entries()].map(([key, rows]) => {
 		const sorted = sortByX(rows)
 		const colorEntry = colors?.get(key) ?? { fill: 'none', stroke: '#888' }
 		return {
-			d: makeGen()(sorted),
+			d: makeGen()(sorted.map(d => d.data)),
 			fill: 'none',
 			stroke: colorEntry.stroke,
 			points: toPoints(sorted),

package/dist/lib/highlight.d.ts

@@ -0,0 +1,10 @@
+/**
+ * Resolve a highlight selector to zero or more row indices.
+ * @param {Array<Record<string, unknown>>} rows
+ * @param {'first'|'last'|'min'|'max'|number|((row:any,i:number)=>boolean)} selector
+ * @param {{ y?: string }} [opts]
+ * @returns {number[]}
+ */
+export function resolveHighlight(rows: Array<Record<string, unknown>>, selector: "first" | "last" | "min" | "max" | number | ((row: any, i: number) => boolean), opts?: {
+    y?: string;
+}): number[];

package/dist/lib/highlight.js

@@ -0,0 +1,43 @@
+/**
+ * Resolve a highlight selector to zero or more row indices.
+ * @param {Array<Record<string, unknown>>} rows
+ * @param {'first'|'last'|'min'|'max'|number|((row:any,i:number)=>boolean)} selector
+ * @param {{ y?: string }} [opts]
+ * @returns {number[]}
+ */
+export function resolveHighlight(rows, selector, opts = {}) {
+	if (!Array.isArray(rows) || rows.length === 0 || selector === null || selector === undefined)
+		return []
+	const { y } = opts
+
+	if (typeof selector === 'function') {
+		const out = []
+		for (let i = 0; i < rows.length; i++) if (selector(rows[i], i)) out.push(i)
+		return out
+	}
+
+	if (typeof selector === 'number') {
+		const i = selector < 0 ? rows.length + selector : selector
+		return i >= 0 && i < rows.length ? [i] : []
+	}
+
+	if (selector === 'first') return [0]
+	if (selector === 'last') return [rows.length - 1]
+
+	if (selector === 'min' || selector === 'max') {
+		if (!y) return []
+		let best = -1
+		let bestVal = null
+		for (let i = 0; i < rows.length; i++) {
+			const v = Number(rows[i][y])
+			if (Number.isNaN(v)) continue
+			if (bestVal === null || (selector === 'min' ? v < bestVal : v > bestVal)) {
+				bestVal = v
+				best = i
+			}
+		}
+		return best === -1 ? [] : [best]
+	}
+
+	return []
+}

package/dist/lib/scale.d.ts

@@ -0,0 +1,10 @@
+/**
+ * Map a value through a d3 scale to its plotted position, centering on band
+ * scales (adds `bandwidth/2`). Returns `NaN` when the scale yields `undefined`
+ * (value outside the domain) so overlay callers can drop the point via
+ * `Number.isFinite`.
+ * @param {(v: unknown) => number | undefined} scale
+ * @param {unknown} v
+ * @returns {number}
+ */
+export function scalePos(scale: (v: unknown) => number | undefined, v: unknown): number;

package/dist/lib/scale.js

@@ -0,0 +1,14 @@
+/**
+ * Map a value through a d3 scale to its plotted position, centering on band
+ * scales (adds `bandwidth/2`). Returns `NaN` when the scale yields `undefined`
+ * (value outside the domain) so overlay callers can drop the point via
+ * `Number.isFinite`.
+ * @param {(v: unknown) => number | undefined} scale
+ * @param {unknown} v
+ * @returns {number}
+ */
+export function scalePos(scale, v) {
+	const p = scale(v)
+	if (p === undefined) return NaN
+	return typeof scale.bandwidth === 'function' ? p + scale.bandwidth() / 2 : p
+}

package/dist/lib/select.d.ts

@@ -0,0 +1,22 @@
+/**
+ * Assemble the SelectDetail handed to a chart's onselect callback.
+ * @param {Record<string, unknown>} datum
+ * @param {number} index  index within the geom's rendered data
+ * @param {{ x?: string, y?: string }} channels
+ * @param {'line'|'point'|'area'|'bar'} geom
+ * @param {unknown} series  color/group value, or undefined
+ * @param {MouseEvent|KeyboardEvent} event
+ */
+export function buildSelectDetail(datum: Record<string, unknown>, index: number, channels: {
+    x?: string;
+    y?: string;
+}, geom: "line" | "point" | "area" | "bar", series: unknown, event: MouseEvent | KeyboardEvent): {
+    datum: Record<string, unknown>;
+    index: number;
+    series: {} | undefined;
+    value: unknown;
+    x: unknown;
+    y: unknown;
+    geom: "bar" | "line" | "area" | "point";
+    event: MouseEvent | KeyboardEvent;
+};

package/dist/lib/select.js

@@ -0,0 +1,22 @@
+/**
+ * Assemble the SelectDetail handed to a chart's onselect callback.
+ * @param {Record<string, unknown>} datum
+ * @param {number} index  index within the geom's rendered data
+ * @param {{ x?: string, y?: string }} channels
+ * @param {'line'|'point'|'area'|'bar'} geom
+ * @param {unknown} series  color/group value, or undefined
+ * @param {MouseEvent|KeyboardEvent} event
+ */
+export function buildSelectDetail(datum, index, channels, geom, series, event) {
+	const { x, y } = channels
+	return {
+		datum,
+		index,
+		series: series ?? undefined,
+		value: y ? datum[y] : undefined,
+		x: x ? datum[x] : undefined,
+		y: y ? datum[y] : undefined,
+		geom,
+		event
+	}
+}

package/dist/lib/trend.d.ts

@@ -0,0 +1,27 @@
+export function mean(ys: any): number | null;
+export function median(ys: any): any;
+/** Least-squares line. Returns { m, b } or null (< 2 points or zero x-variance). */
+export function linearRegression(xs: any, ys: any): {
+    m: number;
+    b: number;
+} | null;
+/** Trailing simple moving average; length preserved (partial window at the head). */
+export function movingAverage(ys: any, window: any): number[];
+/** Exponential moving average; alpha = alpha ?? 2/(span+1). Length preserved. */
+export function ema(ys: any, { span, alpha }?: {}): any[];
+/** Fit y = a·e^(bx) via log-linear least squares. Null if any y ≤ 0 or < 2 points. */
+export function expRegression(xs: any, ys: any): {
+    a: number;
+    b: number;
+} | null;
+/**
+ * Compute a trend for `rows` on channels {x, y}.
+ * @returns {{kind:'constant', value:number} | {kind:'series', values:number[]} | null}
+ */
+export function computeTrend(rows: any, channels: any, method: any): {
+    kind: "constant";
+    value: number;
+} | {
+    kind: "series";
+    values: number[];
+} | null;