@rokkit/chart 1.3.15 → 1.4.1

package/dist/lib/highlight.js

@@ -1,43 +1,94 @@
 /**
- * Resolve a highlight selector to zero or more row indices.
+ * Highlight-selector resolution.
+ *
+ * One small resolver per selector kind, plus a dispatcher. The kinds share
+ * nothing but their signature, so keeping them separate means each can be read
+ * and tested on its own instead of as one branch of a 24-complexity chain.
+ */
+
+/**
+ * Indices where a predicate selector matches.
  * @param {Array<Record<string, unknown>>} rows
- * @param {'first'|'last'|'min'|'max'|number|((row:any,i:number)=>boolean)} selector
- * @param {{ y?: string }} [opts]
+ * @param {(row: any, i: number) => boolean} predicate
  * @returns {number[]}
  */
-export function resolveHighlight(rows, selector, opts = {}) {
-	if (!Array.isArray(rows) || rows.length === 0 || selector === null || selector === undefined)
-		return []
-	const { y } = opts
+function byPredicate(rows, predicate) {
+	const out = []
+	for (let i = 0; i < rows.length; i++) if (predicate(rows[i], i)) out.push(i)
+	return out
+}
 
-	if (typeof selector === 'function') {
-		const out = []
-		for (let i = 0; i < rows.length; i++) if (selector(rows[i], i)) out.push(i)
-		return out
-	}
+/**
+ * A single index. Negative values count back from the end (`-1` is the last
+ * row); anything out of range resolves to nothing.
+ * @param {Array<Record<string, unknown>>} rows
+ * @param {number} index
+ * @returns {number[]}
+ */
+function byIndex(rows, index) {
+	const i = index < 0 ? rows.length + index : index
+	return i >= 0 && i < rows.length ? [i] : []
+}
 
-	if (typeof selector === 'number') {
-		const i = selector < 0 ? rows.length + selector : selector
-		return i >= 0 && i < rows.length ? [i] : []
-	}
+/**
+ * The index of the row whose numeric `y` is smallest (`min`) or largest (`max`).
+ *
+ * Non-numeric values are dropped rather than compared — `NaN` loses every
+ * comparison, so leaving them in would make the result depend on iteration
+ * order. Ties keep the earliest row. Candidates are collected before reducing
+ * so an all-`Infinity` column still resolves to its first row, which a
+ * strict-improvement scan seeded with `Infinity` would reject.
+ *
+ * @param {Array<Record<string, unknown>>} rows
+ * @param {string | undefined} y
+ * @param {'min'|'max'} kind
+ * @returns {number[]}
+ */
+function byExtreme(rows, y, kind) {
+	if (!y) return []
+	// Searching for the smallest `sign * value` finds the max when sign is -1,
+	// which collapses two mirror-image scans into one.
+	const sign = kind === 'min' ? 1 : -1
+	const candidates = rows
+		.map((row, i) => ({ i, value: sign * Number(row[y]) }))
+		.filter(({ value }) => !Number.isNaN(value))
+	if (candidates.length === 0) return []
+	return [candidates.reduce((best, c) => (c.value < best.value ? c : best)).i]
+}
 
-	if (selector === 'first') return [0]
-	if (selector === 'last') return [rows.length - 1]
+/**
+ * Named selectors, all sharing one signature so the dispatcher can call any of
+ * them uniformly. `rows` is guaranteed non-empty by the time these run.
+ * @type {Record<string, (rows: Array<Record<string, unknown>>, y?: string) => number[]>}
+ */
+const NAMED = {
+	first: () => [0],
+	last: (rows) => [rows.length - 1],
+	min: (rows, y) => byExtreme(rows, y, 'min'),
+	max: (rows, y) => byExtreme(rows, y, 'max')
+}
 
-	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]
-	}
+/**
+ * True when the inputs cannot resolve to any row, whatever the selector means.
+ * @param {unknown} rows
+ * @param {unknown} selector
+ */
+const isUnresolvable = (rows, selector) =>
+	!Array.isArray(rows) || rows.length === 0 || selector === null || selector === undefined
 
-	return []
+/**
+ * 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 (isUnresolvable(rows, selector)) return []
+	if (typeof selector === 'function') return byPredicate(rows, selector)
+	if (typeof selector === 'number') return byIndex(rows, selector)
+	// hasOwn, not a bare lookup: `NAMED['constructor']` would otherwise resolve to
+	// Object's constructor and get called. Same guard as PATTERNS in SparkState.
+	const named = Object.hasOwn(NAMED, selector) ? NAMED[selector] : null
+	return named ? named(rows, opts.y) : []
 }

package/dist/lib/plot/scales.js

@@ -42,10 +42,10 @@ export function buildUnifiedXScale(datasets, field, width, opts = {}) {
 		const numericValues = allValues.map(Number)
 		const [minVal, maxVal] = extent(numericValues)
 		const domainMin = (opts.includeZero ?? false) ? 0 : (minVal ?? 0)
-		return scaleLinear()
-			.domain([domainMin, maxVal ?? 0])
-			.range(range)
-			.nice()
+		const s = scaleLinear().domain([domainMin, maxVal ?? 0]).range(range)
+		// Same opts.nice escape hatch as the opts.domain branch above (e.g. a spark's x-axis,
+		// which must span the full width edge-to-edge, not stop short at a rounded tick).
+		return opts.nice === false ? s : s.nice()
 	}
 
 	const domain = [...new Set(allValues)].filter((v) => v !== null && v !== undefined)
@@ -58,7 +58,10 @@ export function buildUnifiedXScale(datasets, field, width, opts = {}) {
 export function buildUnifiedYScale(datasets, field, height, opts = {}) {
 	const yrange = opts.range ?? [height, 0]
 	if (opts.domain) {
-		return scaleLinear().domain(opts.domain).range(yrange).nice()
+		const s = scaleLinear().domain(opts.domain).range(yrange)
+		// nice() pads the domain outward to round numbers — wrong for a caller (e.g. a spark)
+		// whose domain is already the exact value it wants rendered edge-to-edge.
+		return opts.nice === false ? s : s.nice()
 	}
 	const rawValues = datasets.flatMap((d) => d.map((r) => r[field])).filter((v) => v !== null && v !== undefined)
 	const isNumeric = rawValues.length > 0 && rawValues.every(

package/dist/lib/preset.d.ts

@@ -34,6 +34,7 @@ export namespace defaultPreset {
         let ribbon: number;
         let waterfall: number;
         let rule: number;
+        let radar: number;
     }
     let patterns: string[];
     let symbols: string[];

package/dist/lib/preset.js

@@ -23,7 +23,8 @@ export const defaultPreset = {
     hexbin:      1,
     ribbon:      0.5,
     waterfall:   1,
-    rule:        1
+    rule:        1,
+    radar:       0.25
   },
   patterns: ['diagonal', 'dots', 'triangles', 'hatch', 'lattice', 'swell',
              'checkerboard', 'waves', 'petals', 'brick', 'diamonds', 'tile',

package/dist/lib/select.d.ts

@@ -1,22 +1,36 @@
 /**
  * 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
+ *
+ * Takes one named bag rather than six positionals: the tail of the old
+ * signature read `…, { x, y }, 'line', seg?.key, event)` at every call site,
+ * where nothing but the argument order told you which of the trailing values
+ * was the geom and which was the series.
+ *
+ * @param {Object} args
+ * @param {Record<string, unknown>} args.datum
+ * @param {number} args.index  index within the geom's rendered data
+ * @param {{ x?: string, y?: string }} args.channels
+ * @param {'line'|'point'|'area'|'bar'|'radar'} args.geom
+ * @param {unknown} [args.series]  color/group value, or undefined
+ * @param {MouseEvent|KeyboardEvent} args.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): {
+export function buildSelectDetail({ datum, index, channels, geom, series, event }: {
+    datum: Record<string, unknown>;
+    index: number;
+    channels: {
+        x?: string;
+        y?: string;
+    };
+    geom: "line" | "point" | "area" | "bar" | "radar";
+    series?: unknown;
+    event: MouseEvent | KeyboardEvent;
+}): {
     datum: Record<string, unknown>;
     index: number;
     series: {} | undefined;
     value: unknown;
     x: unknown;
     y: unknown;
-    geom: "bar" | "line" | "area" | "point";
+    geom: "bar" | "line" | "area" | "point" | "radar";
     event: MouseEvent | KeyboardEvent;
 };

package/dist/lib/select.js

@@ -1,13 +1,20 @@
 /**
  * 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
+ *
+ * Takes one named bag rather than six positionals: the tail of the old
+ * signature read `…, { x, y }, 'line', seg?.key, event)` at every call site,
+ * where nothing but the argument order told you which of the trailing values
+ * was the geom and which was the series.
+ *
+ * @param {Object} args
+ * @param {Record<string, unknown>} args.datum
+ * @param {number} args.index  index within the geom's rendered data
+ * @param {{ x?: string, y?: string }} args.channels
+ * @param {'line'|'point'|'area'|'bar'|'radar'} args.geom
+ * @param {unknown} [args.series]  color/group value, or undefined
+ * @param {MouseEvent|KeyboardEvent} args.event
  */
-export function buildSelectDetail(datum, index, channels, geom, series, event) {
+export function buildSelectDetail({ datum, index, channels, geom, series, event }) {
 	const { x, y } = channels
 	return {
 		datum,

package/dist/lib/trend.js

@@ -58,14 +58,63 @@ export function expRegression(xs, ys) {
 	return { a: Math.exp(reg.b), b: reg.m }
 }
 
+/** `mean` is an accepted alias for `avg`. */
+const canonicalType = (type) => (type === 'mean' ? 'avg' : type)
+
+/** Accept a number, a bare type name, or a full config object; produce a config or null. */
 function normalize(method) {
 	if (typeof method === 'number') return { type: 'value', value: method }
-	if (typeof method === 'string') return { type: method === 'mean' ? 'avg' : method }
+	if (typeof method === 'string') return { type: canonicalType(method) }
 	if (method && typeof method === 'object' && method.type)
-		return { ...method, type: method.type === 'mean' ? 'avg' : method.type }
+		return { ...method, type: canonicalType(method.type) }
 	return null
 }
 
+/**
+ * Numeric series for the two channels. A non-finite x falls back to the row
+ * index, which is what makes trends work on a categorical/band axis.
+ * @param {Array<Record<string, unknown>>} rows
+ * @param {{x?: string, y?: string}} channels
+ */
+function toSeries(rows, { x, y }) {
+	return {
+		ys: rows.map((r) => Number(r[y])),
+		xs: rows.map((r, i) => {
+			const v = Number(r[x])
+			return Number.isFinite(v) ? v : i
+		})
+	}
+}
+
+/**
+ * One builder per trend type, replacing a nine-case switch. Each takes the
+ * prepared series plus the normalized config and returns a trend or null, so a
+ * new trend type is a new entry rather than another branch.
+ * @type {Record<string, (ctx: {xs: number[], ys: number[], cfg: Record<string, any>}) => object | null>}
+ */
+const BUILDERS = {
+	avg: ({ ys }) => ({ kind: 'constant', value: mean(ys) }),
+	median: ({ ys }) => ({ kind: 'constant', value: median(ys) }),
+	min: ({ ys }) => ({ kind: 'constant', value: Math.min(...ys) }),
+	max: ({ ys }) => ({ kind: 'constant', value: Math.max(...ys) }),
+	value: ({ cfg }) =>
+		typeof cfg.value === 'number' ? { kind: 'constant', value: cfg.value } : null,
+	linear: ({ xs, ys }) => {
+		const reg = linearRegression(xs, ys)
+		return reg ? { kind: 'series', values: xs.map((v) => reg.m * v + reg.b) } : null
+	},
+	ma: ({ ys, cfg }) =>
+		cfg.window ? { kind: 'series', values: movingAverage(ys, cfg.window) } : null,
+	ema: ({ ys, cfg }) => ({
+		kind: 'series',
+		values: ema(ys, { span: cfg.span, alpha: cfg.alpha })
+	}),
+	exp: ({ xs, ys }) => {
+		const reg = expRegression(xs, ys)
+		return reg ? { kind: 'series', values: xs.map((v) => reg.a * Math.exp(reg.b * v)) } : null
+	}
+}
+
 /**
  * Compute a trend for `rows` on channels {x, y}.
  * @returns {{kind:'constant', value:number} | {kind:'series', values:number[]} | null}
@@ -73,41 +122,8 @@ function normalize(method) {
 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
-	}
+	// hasOwn, not a bare lookup: an unknown type must fall through to null, and a
+	// bare `BUILDERS[cfg.type]` would resolve inherited keys like 'constructor'.
+	if (!Object.hasOwn(BUILDERS, cfg.type)) return null
+	return BUILDERS[cfg.type]({ ...toSeries(rows, channels), cfg })
 }

package/package.json

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

package/dist/examples/BarChartExample.svelte

@@ -1,78 +0,0 @@
-<script lang="ts">
-	import { Plot } from '../index.js'
-	import { dataset } from '@rokkit/data'
-
-	type Row = Record<string, unknown>
-
-	// Sample data
-	const sampleData = [
-		{ model: 'Model A', name: 'Product 1', category: 'Electronics', count: 45 },
-		{ model: 'Model B', name: 'Product 2', category: 'Clothing', count: 32 },
-		{ model: 'Model C', name: 'Product 3', category: 'Electronics', count: 62 },
-		{ model: 'Model D', name: 'Product 4', category: 'Home', count: 28 },
-		{ model: 'Model E', name: 'Product 5', category: 'Electronics', count: 53 },
-		{ model: 'Model F', name: 'Product 6', category: 'Clothing', count: 24 },
-		{ model: 'Model G', name: 'Product 7', category: 'Home', count: 35 }
-	]
-
-	// Use the dataset class to process the data
-	const data: Row[] = dataset(sampleData)
-		.groupBy('category')
-		.summarize('name', { count: (values: unknown[]) => values.length })
-		.rollup()
-		.select()
-
-	// Chart dimensions
-	const width = 600
-	const height = 400
-	const margin = { top: 20, right: 100, bottom: 60, left: 60 }
-</script>
-
-<div class="example">
-	<h2>Bar Chart Example</h2>
-
-	<div class="chart-wrapper">
-		<Plot.Root {data} x="category" y="count" color="category" {width} {height} {margin}>
-			<Plot.Grid />
-			<Plot.Axis type="x" label="Product Category" />
-			<Plot.Axis type="y" label="Number of Products" />
-			<Plot.Bar x="category" y="count" fill="category" />
-			<Plot.Legend labels={{ category: 'Categories' }} />
-		</Plot.Root>
-	</div>
-
-	<div class="code-example">
-		<h3>Example Code:</h3>
-		<pre>
-<!-- &lt;script&gt;
-  import { Plot } from '@rokkit/chart';
-  import { dataset } from '@rokkit/data';
-
-  // Sample data
-  const sampleData = [
-    { model: 'Model A', name: 'Product 1', category: 'Electronics', count: 45 },
-    { model: 'Model B', name: 'Product 2', category: 'Clothing', count: 32 },
-    { model: 'Model C', name: 'Product 3', category: 'Electronics', count: 62 },
-    { model: 'Model D', name: 'Product 4', category: 'Home', count: 28 },
-    { model: 'Model E', name: 'Product 5', category: 'Electronics', count: 53 },
-    { model: 'Model F', name: 'Product 6', category: 'Clothing', count: 24 },
-    { model: 'Model G', name: 'Product 7', category: 'Home', count: 35 },
-  ];
-
-  // Use the dataset class to process the data
-  const data = dataset(sampleData)
-    .groupBy('category')
-    .summarize('name', { count: values => values.length })
-    .rollup();
-&lt;/script&gt;
-
-&lt;Plot.Root {data} width={600} height={400} margin={{ top: 20, right: 100, bottom: 60, left: 60 }} fill="category"&gt;
-  &lt;Plot.Grid direction="y" lineStyle="dashed" /&gt;
-  &lt;Plot.Axis type="x" field="category" label="Product Category" /&gt;
-  &lt;Plot.Axis type="y" field="count" label="Number of Products" /&gt;
-  &lt;Plot.Bar x="category" y="count" fill="category" onClick={handleBarClick} /&gt;
-  &lt;Plot.Legend title="Categories" /&gt;
-&lt;/Plot.Root&gt; -->
-    </pre>
-	</div>
-</div>

package/dist/examples/BarChartExample.svelte.d.ts

@@ -1,18 +0,0 @@
-interface $$__sveltets_2_IsomorphicComponent<Props extends Record<string, any> = any, Events extends Record<string, any> = any, Slots extends Record<string, any> = any, Exports = {}, Bindings = string> {
-    new (options: import('svelte').ComponentConstructorOptions<Props>): import('svelte').SvelteComponent<Props, Events, Slots> & {
-        $$bindings?: Bindings;
-    } & Exports;
-    (internal: unknown, props: {
-        $$events?: Events;
-        $$slots?: Slots;
-    }): Exports & {
-        $set?: any;
-        $on?: any;
-    };
-    z_$$bindings?: Bindings;
-}
-declare const BarChartExample: $$__sveltets_2_IsomorphicComponent<Record<string, never>, {
-    [evt: string]: CustomEvent<any>;
-}, {}, {}, string>;
-type BarChartExample = InstanceType<typeof BarChartExample>;
-export default BarChartExample;

package/dist/lib/brewing/types.d.ts

@@ -1,162 +0,0 @@
-export type ChartMargin = {
-    /**
-     * - Top margin
-     */
-    top: number;
-    /**
-     * - Right margin
-     */
-    right: number;
-    /**
-     * - Bottom margin
-     */
-    bottom: number;
-    /**
-     * - Left margin
-     */
-    left: number;
-};
-export type ChartDimensions = {
-    /**
-     * - Total chart width
-     */
-    width: number;
-    /**
-     * - Total chart height
-     */
-    height: number;
-    /**
-     * - Chart margins
-     */
-    margin: ChartMargin;
-    /**
-     * - Chart width without margins
-     */
-    innerWidth: number;
-    /**
-     * - Chart height without margins
-     */
-    innerHeight: number;
-};
-export type ChartScales = {
-    /**
-     * - X-axis scale function
-     */
-    x: Function;
-    /**
-     * - Y-axis scale function
-     */
-    y: Function;
-    /**
-     * - Color scale function
-     */
-    color: Function;
-};
-export type ScaleFields = {
-    /**
-     * - X-axis field
-     */
-    x: string;
-    /**
-     * - Y-axis field
-     */
-    y: string;
-    /**
-     * - Color field
-     */
-    color: string;
-};
-export type TickData = {
-    /**
-     * - Tick value
-     */
-    value: any;
-    /**
-     * - Tick position in pixels
-     */
-    position: number;
-    /**
-     * - Formatted tick label
-     */
-    formattedValue: string;
-};
-export type AxisData = {
-    /**
-     * - Tick data
-     */
-    ticks: TickData[];
-    /**
-     * - Axis label
-     */
-    label: string;
-    /**
-     * - SVG transform attribute value
-     */
-    transform: string;
-    /**
-     * - SVG transform for the label
-     */
-    labelTransform: string;
-};
-export type BarData = {
-    /**
-     * - Original data point
-     */
-    data: Object;
-    /**
-     * - X position
-     */
-    x: number;
-    /**
-     * - Y position
-     */
-    y: number;
-    /**
-     * - Width of the bar
-     */
-    width: number;
-    /**
-     * - Height of the bar
-     */
-    height: number;
-    /**
-     * - Color of the bar
-     */
-    color: string;
-};
-export type LegendItem = {
-    /**
-     * - Legend item value
-     */
-    value: any;
-    /**
-     * - Item color
-     */
-    color: string;
-    /**
-     * - Y position
-     */
-    y: number;
-    /**
-     * - Shape type ('rect' or 'circle')
-     */
-    shape: string;
-    /**
-     * - Size of the marker
-     */
-    markerSize: number;
-};
-export type LegendData = {
-    /**
-     * - Legend items
-     */
-    items: LegendItem[];
-    /**
-     * - Legend title
-     */
-    title: string;
-    /**
-     * - SVG transform attribute value
-     */
-    transform: string;
-};