@rokkit/chart 1.3.6 → 1.3.8

package/dist/lib/trend.js

@@ -0,0 +1,113 @@
+export function mean(ys) {
+	if (!ys.length) return null
+	return ys.reduce((s, v) => s + v, 0) / ys.length
+}
+
+export function median(ys) {
+	if (!ys.length) return null
+	const sorted = [...ys].sort((a, b) => a - b)
+	const mid = Math.floor(sorted.length / 2)
+	return sorted.length % 2 ? sorted[mid] : (sorted[mid - 1] + sorted[mid]) / 2
+}
+
+/** Least-squares line. Returns { m, b } or null (< 2 points or zero x-variance). */
+export function linearRegression(xs, ys) {
+	const n = xs.length
+	if (n < 2) return null
+	const mx = mean(xs)
+	const my = mean(ys)
+	let num = 0
+	let den = 0
+	for (let i = 0; i < n; i++) {
+		const dx = xs[i] - mx
+		num += dx * (ys[i] - my)
+		den += dx * dx
+	}
+	if (den === 0) return null
+	const m = num / den
+	return { m, b: my - m * mx }
+}
+
+/** Trailing simple moving average; length preserved (partial window at the head). */
+export function movingAverage(ys, window) {
+	const w = Math.max(1, Math.floor(window))
+	const out = []
+	for (let i = 0; i < ys.length; i++) {
+		const start = Math.max(0, i - w + 1)
+		const slice = ys.slice(start, i + 1)
+		out.push(slice.reduce((s, v) => s + v, 0) / slice.length)
+	}
+	return out
+}
+
+/** Exponential moving average; alpha = alpha ?? 2/(span+1). Length preserved. */
+export function ema(ys, { span, alpha } = {}) {
+	if (!ys.length) return []
+	const a = alpha ?? 2 / ((span ?? 7) + 1)
+	const out = [ys[0]]
+	for (let i = 1; i < ys.length; i++) out.push(a * ys[i] + (1 - a) * out[i - 1])
+	return out
+}
+
+/** Fit y = a·e^(bx) via log-linear least squares. Null if any y ≤ 0 or < 2 points. */
+export function expRegression(xs, ys) {
+	if (xs.length < 2) return null
+	if (ys.some((v) => v <= 0)) return null
+	const reg = linearRegression(xs, ys.map((v) => Math.log(v)))
+	if (!reg) return null
+	return { a: Math.exp(reg.b), b: reg.m }
+}
+
+function normalize(method) {
+	if (typeof method === 'number') return { type: 'value', value: method }
+	if (typeof method === 'string') return { type: method === 'mean' ? 'avg' : method }
+	if (method && typeof method === 'object' && method.type)
+		return { ...method, type: method.type === 'mean' ? 'avg' : method.type }
+	return null
+}
+
+/**
+ * Compute a trend for `rows` on channels {x, y}.
+ * @returns {{kind:'constant', value:number} | {kind:'series', values:number[]} | null}
+ */
+export function computeTrend(rows, channels, method) {
+	const cfg = normalize(method)
+	if (!cfg || !Array.isArray(rows) || rows.length === 0) return null
+	const { x, y } = channels
+	const ys = rows.map((r) => Number(r[y]))
+	const xs = rows.map((r, i) => {
+		const v = Number(r[x])
+		return Number.isFinite(v) ? v : i
+	})
+
+	switch (cfg.type) {
+		case 'avg':
+			return { kind: 'constant', value: mean(ys) }
+		case 'median':
+			return { kind: 'constant', value: median(ys) }
+		case 'min':
+			return { kind: 'constant', value: Math.min(...ys) }
+		case 'max':
+			return { kind: 'constant', value: Math.max(...ys) }
+		case 'value':
+			return typeof cfg.value === 'number' ? { kind: 'constant', value: cfg.value } : null
+		case 'linear': {
+			const reg = linearRegression(xs, ys)
+			if (!reg) return null
+			return { kind: 'series', values: xs.map((v) => reg.m * v + reg.b) }
+		}
+		case 'ma': {
+			if (!cfg.window) return null
+			return { kind: 'series', values: movingAverage(ys, cfg.window) }
+		}
+		case 'ema':
+			return { kind: 'series', values: ema(ys, { span: cfg.span, alpha: cfg.alpha }) }
+		case 'exp': {
+			const reg = expRegression(xs, ys)
+			if (!reg) return null
+			return { kind: 'series', values: xs.map((v) => reg.a * Math.exp(reg.b * v)) }
+		}
+		default:
+			return null
+	}
+}

package/dist/patterns/README.md

@@ -1,3 +1,3 @@
 # Patterns
 
-These patterns are inspired from https://superdesigner.co/tools/svg-backgrounds
+These patterns are inspired from <https://superdesigner.co/tools/svg-backgrounds>

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@rokkit/chart",
-  "version": "1.3.6",
+  "version": "1.3.8",
   "type": "module",
   "description": "Data-driven chart components",
   "repository": {

package/dist/Plot/Area.svelte

@@ -1,54 +0,0 @@
-<script lang="ts">
-	import { getContext } from 'svelte'
-	import { area as d3Area, type CurveFactory } from 'd3-shape'
-	import type { PlotState } from '../PlotState.svelte.js'
-
-	type Datum = Record<string, unknown> | number
-
-	type Props = {
-		data?: Datum[]
-		x?: string
-		y?: string
-		y0?: string
-		fill?: string
-		opacity?: number
-		curve?: CurveFactory
-	}
-
-	let {
-		data = [],
-		x = undefined,
-		y = undefined,
-		y0 = undefined,
-		fill = 'steelblue',
-		opacity = 0.7,
-		curve = undefined
-	}: Props = $props()
-
-	const state = getContext<PlotState>('plot-state')
-
-	const accessor = (d: Datum, field: string | undefined): unknown =>
-		field && typeof d === 'object' ? d[field] : d
-
-	const path = $derived.by(() => {
-		if (!state?.xScale || !state?.yScale || !data?.length) return null
-		const xScale = state.xScale
-		const yScale = state.yScale
-		const innerHeight = state.innerHeight
-		const areaGen = d3Area<Datum>()
-			.x((d) => xScale(accessor(d, x)) ?? 0)
-			.y1((d) => yScale(accessor(d, y)) ?? 0)
-			.y0((d) =>
-				y0 !== undefined
-					? (yScale((typeof d === 'object' ? d[y0] : undefined) ?? y0) ?? innerHeight)
-					: innerHeight
-			)
-			.defined((d) => d != null)
-		if (curve) areaGen.curve(curve)
-		return areaGen(data)
-	})
-</script>
-
-{#if path}
-	<path d={path} {fill} {opacity} stroke="none" data-plot-element="area" />
-{/if}

package/dist/Plot/Area.svelte.d.ts

@@ -1,14 +0,0 @@
-import { type CurveFactory } from 'd3-shape';
-type Datum = Record<string, unknown> | number;
-type Props = {
-    data?: Datum[];
-    x?: string;
-    y?: string;
-    y0?: string;
-    fill?: string;
-    opacity?: number;
-    curve?: CurveFactory;
-};
-declare const Area: import("svelte").Component<Props, {}, "">;
-type Area = ReturnType<typeof Area>;
-export default Area;

package/dist/Plot/Bar.svelte

@@ -1,69 +0,0 @@
-<script lang="ts">
-	import { getContext } from 'svelte'
-	import type { PlotState } from '../PlotState.svelte.js'
-
-	type Datum = Record<string, unknown> | number
-
-	type Props = {
-		data?: Datum[]
-		x?: string
-		y?: string
-		fill?: string
-		opacity?: number
-	}
-
-	let { data = undefined, x = undefined, y = undefined, fill = 'steelblue', opacity = 1 }: Props =
-		$props()
-
-	const state = getContext<PlotState>('plot-state')
-
-	const accessor = (d: Datum, field: string | undefined): unknown =>
-		field && typeof d === 'object' ? d[field] : d
-
-	const bars = $derived.by(() => {
-		if (!state?.xScale || !state?.yScale) return []
-		const xScale = state.xScale
-		const yScale = state.yScale
-		const innerHeight = state.innerHeight
-		const src = data ?? []
-		if (!src.length) return []
-
-		const bw = typeof xScale.bandwidth === 'function' ? xScale.bandwidth() : 20
-		const padding = typeof xScale.bandwidth === 'function' ? bw * 0.05 : 0
-
-		// Baseline at y=0 when domain spans zero (supports negative bars)
-		const yDomain = typeof yScale.bandwidth !== 'function' ? yScale.domain?.() : null
-		const baseline =
-			yDomain && yDomain[0] <= 0 && yDomain[yDomain.length - 1] >= 0
-				? (yScale(0) ?? innerHeight)
-				: innerHeight
-
-		return src.map((d) => {
-			const xVal = accessor(d, x)
-			const yVal = accessor(d, y)
-			const xPos = (xScale(xVal) ?? 0) + padding
-			const yPos = yScale(yVal) ?? baseline
-			return {
-				x: xPos,
-				y: Math.min(yPos, baseline),
-				width: bw * 0.9,
-				height: Math.abs(baseline - yPos),
-				label: `${xVal}: ${yVal}`
-			}
-		})
-	})
-</script>
-
-{#each bars as bar, i (i)}
-	<rect
-		x={bar.x}
-		y={bar.y}
-		width={bar.width}
-		height={bar.height}
-		{fill}
-		{opacity}
-		data-plot-element="bar"
-		role="graphics-symbol"
-		aria-label={bar.label}
-	/>
-{/each}

package/dist/Plot/Bar.svelte.d.ts

@@ -1,11 +0,0 @@
-type Datum = Record<string, unknown> | number;
-type Props = {
-    data?: Datum[];
-    x?: string;
-    y?: string;
-    fill?: string;
-    opacity?: number;
-};
-declare const Bar: import("svelte").Component<Props, {}, "">;
-type Bar = ReturnType<typeof Bar>;
-export default Bar;

package/dist/Plot/Line.svelte

@@ -1,54 +0,0 @@
-<script lang="ts">
-	import { getContext } from 'svelte'
-	import { line as d3Line, type CurveFactory } from 'd3-shape'
-	import type { PlotState } from '../PlotState.svelte.js'
-
-	type Datum = Record<string, unknown> | number
-
-	type Props = {
-		data?: Datum[]
-		x?: string
-		y?: string
-		stroke?: string
-		strokeWidth?: number
-		curve?: CurveFactory
-	}
-
-	let {
-		data = [],
-		x = undefined,
-		y = undefined,
-		stroke = 'steelblue',
-		strokeWidth = 2,
-		curve = undefined
-	}: Props = $props()
-
-	const state = getContext<PlotState>('plot-state')
-
-	const accessor = (d: Datum, field: string | undefined): unknown =>
-		field && typeof d === 'object' ? d[field] : d
-
-	const path = $derived.by(() => {
-		if (!state?.xScale || !state?.yScale || !data?.length) return null
-		const xScale = state.xScale
-		const yScale = state.yScale
-		const lineGen = d3Line<Datum>()
-			.x((d) => xScale(accessor(d, x)) ?? 0)
-			.y((d) => yScale(accessor(d, y)) ?? 0)
-			.defined((d) => d != null)
-		if (curve) lineGen.curve(curve)
-		return lineGen(data)
-	})
-</script>
-
-{#if path}
-	<path
-		d={path}
-		fill="none"
-		{stroke}
-		stroke-width={strokeWidth}
-		stroke-linejoin="round"
-		stroke-linecap="round"
-		data-plot-element="line"
-	/>
-{/if}

package/dist/Plot/Line.svelte.d.ts

@@ -1,13 +0,0 @@
-import { type CurveFactory } from 'd3-shape';
-type Datum = Record<string, unknown> | number;
-type Props = {
-    data?: Datum[];
-    x?: string;
-    y?: string;
-    stroke?: string;
-    strokeWidth?: number;
-    curve?: CurveFactory;
-};
-declare const Line: import("svelte").Component<Props, {}, "">;
-type Line = ReturnType<typeof Line>;
-export default Line;

package/dist/Plot/Point.svelte

@@ -1,58 +0,0 @@
-<script lang="ts">
-	import { getContext } from 'svelte'
-	import type { PlotState } from '../PlotState.svelte.js'
-
-	type Datum = Record<string, unknown> | number
-
-	type Props = {
-		data?: Datum[]
-		x?: string
-		y?: string
-		r?: number
-		fill?: string
-		stroke?: string
-		strokeWidth?: number
-	}
-
-	let {
-		data = [],
-		x = undefined,
-		y = undefined,
-		r = 4,
-		fill = 'steelblue',
-		stroke = 'white',
-		strokeWidth = 1
-	}: Props = $props()
-
-	const state = getContext<PlotState>('plot-state')
-
-	const accessor = (d: Datum, field: string | undefined): unknown =>
-		field && typeof d === 'object' ? d[field] : d
-
-	const points = $derived.by(() => {
-		if (!state?.xScale || !state?.yScale || !data?.length) return []
-		const xScale = state.xScale
-		const yScale = state.yScale
-		return data
-			.map((d) => ({
-				cx: xScale(accessor(d, x)) ?? null,
-				cy: yScale(accessor(d, y)) ?? null,
-				label: `(${accessor(d, x)}, ${accessor(d, y)})`
-			}))
-			.filter((p) => p.cx !== null && p.cy !== null)
-	})
-</script>
-
-{#each points as pt, i (i)}
-	<circle
-		cx={pt.cx}
-		cy={pt.cy}
-		{r}
-		{fill}
-		{stroke}
-		stroke-width={strokeWidth}
-		data-plot-element="point"
-		role="graphics-symbol"
-		aria-label={pt.label}
-	/>
-{/each}

package/dist/Plot/Point.svelte.d.ts

@@ -1,13 +0,0 @@
-type Datum = Record<string, unknown> | number;
-type Props = {
-    data?: Datum[];
-    x?: string;
-    y?: string;
-    r?: number;
-    fill?: string;
-    stroke?: string;
-    strokeWidth?: number;
-};
-declare const Point: import("svelte").Component<Props, {}, "">;
-type Point = ReturnType<typeof Point>;
-export default Point;