@rokkit/chart 1.3.12 → 1.3.14

package/dist/Sparkline.svelte

@@ -3,6 +3,18 @@
 	import { line as d3line, area as d3area, curveCatmullRom } from 'd3-shape'
 	import PatternDef from './patterns/PatternDef.svelte'
 	import { PATTERNS } from './patterns/patterns.js'
+	import { resolveHighlight } from './lib/highlight.js'
+	import { computeTrend } from './lib/trend.js'
+
+	type HighlightSelector =
+		| 'first'
+		| 'last'
+		| 'min'
+		| 'max'
+		| number
+		| ((row: { x: number; y: number }, i: number) => boolean)
+
+	type TrendMethod = string | number | { type: string; [k: string]: unknown }
 
 	type Props = {
 		data?: number[] | Record<string, unknown>[]
@@ -15,6 +27,9 @@
 		height?: number
 		min?: number
 		max?: number
+		baseline?: number
+		highlight?: HighlightSelector | HighlightSelector[]
+		trend?: TrendMethod | TrendMethod[]
 	}
 
 	let {
@@ -27,7 +42,10 @@
 		width = 80,
 		height = 24,
 		min = undefined,
-		max = undefined
+		max = undefined,
+		baseline = undefined,
+		highlight = undefined,
+		trend = undefined
 	}: Props = $props()
 
 	const values = $derived(
@@ -36,8 +54,24 @@
 		)
 	)
 
-	const yMin = $derived(min ?? Math.min(...values))
-	const yMax = $derived(max ?? Math.max(...values))
+	// Adapter to the pure geom utilities (they operate on {x,y} rows).
+	const rows = $derived(values.map((v, i) => ({ x: i, y: v })))
+
+	const hasNegative = $derived(values.some((v) => v < 0))
+	// Bars with negative values are meaningless when measured from the pixel bottom, so a
+	// bar sparkline auto-anchors at 0 when any value is negative. Everything else is opt-in.
+	const effectiveBaseline = $derived(baseline ?? (type === 'bar' && hasNegative ? 0 : undefined))
+
+	const rawMin = $derived(Math.min(...values))
+	const rawMax = $derived(Math.max(...values))
+	// Explicit min/max win; otherwise extend the auto domain to include the baseline so it
+	// (and the full negative extent) stay on-canvas.
+	const yMin = $derived(
+		min ?? (effectiveBaseline !== undefined ? Math.min(rawMin, effectiveBaseline) : rawMin)
+	)
+	const yMax = $derived(
+		max ?? (effectiveBaseline !== undefined ? Math.max(rawMax, effectiveBaseline) : rawMax)
+	)
 
 	const xScale = $derived(
 		scaleLinear()
@@ -46,6 +80,60 @@
 	)
 	const yScale = $derived(scaleLinear().domain([yMin, yMax]).range([height, 0]))
 
+	// When no baseline is in effect, anchor at the pixel bottom — preserves the classic
+	// min-anchored sparkbar look (Math.min/abs below both collapse to the old formula).
+	const barAnchorY = $derived(effectiveBaseline !== undefined ? yScale(effectiveBaseline) : height)
+
+	const highlightSelectors = $derived(
+		Array.isArray(highlight)
+			? highlight
+			: highlight === null || highlight === undefined
+				? []
+				: [highlight]
+	)
+	const highlightIndices = $derived.by(() => {
+		const seen = new Set<number>()
+		for (const sel of highlightSelectors) {
+			for (const i of resolveHighlight(rows, sel, { y: 'y' })) seen.add(i)
+		}
+		return [...seen]
+	})
+	const highlightMarks = $derived(
+		highlightIndices
+			.map((i) => ({ i, cx: xScale(i), cy: yScale(values[i]) }))
+			.filter((m) => Number.isFinite(m.cx) && Number.isFinite(m.cy))
+	)
+
+	const trendMethods = $derived(
+		Array.isArray(trend) ? trend : trend === null || trend === undefined ? [] : [trend]
+	)
+	const typeOf = (m: TrendMethod) => {
+		const t = typeof m === 'string' ? m : typeof m === 'number' ? 'value' : (m?.type ?? '')
+		return t === 'mean' ? 'avg' : t
+	}
+	const trendPaths = $derived.by(() => {
+		const out: { d: string; type: string; i: number }[] = []
+		trendMethods.forEach((m, idx) => {
+			const res = computeTrend(rows, { x: 'x', y: 'y' }, m)
+			if (!res) return
+			if (res.kind === 'constant') {
+				const yy = yScale(res.value)
+				if (Number.isFinite(yy))
+					out.push({ d: `M0,${yy} L${width},${yy}`, type: typeOf(m), i: idx })
+			} else {
+				const pts = res.values
+					.map((v, i) => ({ vx: xScale(i), vy: yScale(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
+	})
+
 	const linePath = $derived.by(() => {
 		const gen = d3line<number>()
 			.x((_, i) => xScale(i))
@@ -100,23 +188,72 @@
 		/>
 	{:else if type === 'bar'}
 		{#each values as v, i (i)}
+			{@const vy = yScale(v)}
+			{@const top = Math.min(vy, barAnchorY)}
+			{@const barHeight = Math.abs(vy - barAnchorY)}
 			<rect
 				x={xScale(i) - barWidth / 2}
-				y={yScale(v)}
+				y={top}
 				width={barWidth}
-				height={height - yScale(v)}
+				height={barHeight}
 				fill={strokeColor}
 			/>
 			{#if patternMarks}
 				<rect
 					x={xScale(i) - barWidth / 2}
-					y={yScale(v)}
+					y={top}
 					width={barWidth}
-					height={height - yScale(v)}
+					height={barHeight}
 					fill="url(#{patternId})"
 					pointer-events="none"
 				/>
 			{/if}
 		{/each}
 	{/if}
+
+	{#if trendPaths.length}
+		<g data-plot-geom="trend">
+			{#each trendPaths as p (p.i)}
+				<path d={p.d} data-plot-trend={p.type} />
+			{/each}
+		</g>
+	{/if}
+
+	{#if effectiveBaseline !== undefined}
+		<line x1={0} y1={barAnchorY} x2={width} y2={barAnchorY} data-plot-baseline />
+	{/if}
+
+	{#if highlightMarks.length}
+		<g data-plot-geom="highlight">
+			{#each highlightMarks as m (m.i)}
+				<circle cx={m.cx} cy={m.cy} data-plot-highlight />
+			{/each}
+		</g>
+	{/if}
 </svg>
+
+<style>
+	[data-plot-baseline] {
+		stroke: var(--chart-baseline-color, currentColor);
+		stroke-width: var(--chart-baseline-width, 1);
+		stroke-dasharray: var(--chart-baseline-dash, 4 4);
+		opacity: var(--chart-baseline-opacity, 0.5);
+		pointer-events: none;
+	}
+
+	[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, 3);
+		pointer-events: none;
+	}
+
+	[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);
+		pointer-events: none;
+	}
+</style>

package/dist/Sparkline.svelte.d.ts

@@ -1,4 +1,12 @@
 import { PATTERNS } from './patterns/patterns.js';
+type HighlightSelector = 'first' | 'last' | 'min' | 'max' | number | ((row: {
+    x: number;
+    y: number;
+}, i: number) => boolean);
+type TrendMethod = string | number | {
+    type: string;
+    [k: string]: unknown;
+};
 type Props = {
     data?: number[] | Record<string, unknown>[];
     field?: string;
@@ -10,6 +18,9 @@ type Props = {
     height?: number;
     min?: number;
     max?: number;
+    baseline?: number;
+    highlight?: HighlightSelector | HighlightSelector[];
+    trend?: TrendMethod | TrendMethod[];
 };
 declare const Sparkline: import("svelte").Component<Props, {}, "">;
 type Sparkline = ReturnType<typeof Sparkline>;

package/package.json

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