@rokkit/chart 1.0.0-next.16 → 1.0.0-next.161

package/src/geoms/Box.svelte

@@ -0,0 +1,113 @@
+<script>
+	import { getContext, onMount, onDestroy } from 'svelte'
+	import { buildBoxes } from '../lib/brewing/marks/boxes.js'
+
+	let { x, y, fill, stat = 'boxplot', options = {} } = $props()
+
+	const plotState = getContext('plot-state')
+	let id = $state(null)
+
+	// fill ?? x drives the colors map for both box interior and whisker strokes
+	const fillChannel = $derived(fill ?? x)
+
+	onMount(() => {
+		id = plotState.registerGeom({
+			type: 'box',
+			channels: { x, y, color: fillChannel },
+			stat,
+			options
+		})
+	})
+	onDestroy(() => {
+		if (id) plotState.unregisterGeom(id)
+	})
+
+	$effect(() => {
+		if (id) plotState.updateGeom(id, { channels: { x, y, color: fillChannel }, stat })
+	})
+
+	const data = $derived(id ? plotState.geomData(id) : [])
+	const xScale = $derived(plotState.xScale)
+	const yScale = $derived(plotState.yScale)
+	const colors = $derived(plotState.colors)
+
+	const boxes = $derived.by(() => {
+		if (!data?.length || !xScale || !yScale) return []
+		return buildBoxes(data, { x, fill: fillChannel }, xScale, yScale, colors)
+	})
+</script>
+
+{#if boxes.length > 0}
+	<g data-plot-geom="box">
+		{#each boxes as box, i (`${String(box.cx)}::${i}`)}
+			{@const x0 = box.cx - box.width / 2}
+			{@const xMid = box.cx}
+			{@const xCap0 = box.cx - box.whiskerWidth / 2}
+			{@const xCap1 = box.cx + box.whiskerWidth / 2}
+			<!-- Box body (IQR): lighter fill shade -->
+			<rect
+				x={x0}
+				y={box.q3}
+				width={box.width}
+				height={Math.max(0, box.q1 - box.q3)}
+				fill={box.fill}
+				fill-opacity={options?.opacity ?? plotState.chartPreset.opacity.box}
+				stroke={box.stroke}
+				stroke-width="1"
+				data-plot-element="box-body"
+				role="presentation"
+				onmouseenter={() => plotState.setHovered(box.data)}
+				onmouseleave={() => plotState.clearHovered()}
+			/>
+			<!-- Median line: darker stroke shade -->
+			<line
+				x1={x0}
+				y1={box.median}
+				x2={x0 + box.width}
+				y2={box.median}
+				stroke={box.stroke}
+				stroke-width="2"
+				data-plot-element="box-median"
+			/>
+			<!-- Lower whisker (q1 to iqr_min) -->
+			<line
+				x1={xMid}
+				y1={box.q1}
+				x2={xMid}
+				y2={box.iqr_min}
+				stroke={box.stroke}
+				stroke-width="1"
+				data-plot-element="box-whisker"
+			/>
+			<!-- Upper whisker (q3 to iqr_max) -->
+			<line
+				x1={xMid}
+				y1={box.q3}
+				x2={xMid}
+				y2={box.iqr_max}
+				stroke={box.stroke}
+				stroke-width="1"
+				data-plot-element="box-whisker"
+			/>
+			<!-- Lower whisker cap -->
+			<line
+				x1={xCap0}
+				y1={box.iqr_min}
+				x2={xCap1}
+				y2={box.iqr_min}
+				stroke={box.stroke}
+				stroke-width="1"
+			/>
+			<!-- Upper whisker cap -->
+			<line
+				x1={xCap0}
+				y1={box.iqr_max}
+				x2={xCap1}
+				y2={box.iqr_max}
+				stroke={box.stroke}
+				stroke-width="1"
+			/>
+			<!-- Outlier rendering deferred: buildBoxes does not compute outliers yet -->
+		{/each}
+	</g>
+{/if}

package/src/geoms/LabelPill.svelte

@@ -0,0 +1,17 @@
+<script>
+	/** @type {{ x: number, y: number, text: string, color?: string }} */
+	let { x, y, text, color = '#333' } = $props()
+
+	const w = $derived(Math.max(36, String(text).length * 7 + 12))
+</script>
+
+<g transform="translate({x},{y})" pointer-events="none" data-plot-element="label">
+	<rect x={-w / 2} y="-9" width={w} height="18" rx="4" fill="white" fill-opacity="0.82" />
+	<text
+		text-anchor="middle"
+		dominant-baseline="central"
+		font-size="11"
+		font-weight="600"
+		fill={color}>{text}</text
+	>
+</g>

package/src/geoms/Line.svelte

@@ -0,0 +1,123 @@
+<script>
+	import { getContext, onMount, onDestroy } from 'svelte'
+	import { buildLines } from '../lib/brewing/marks/lines.js'
+	import { buildSymbolPath } from '../lib/brewing/marks/points.js'
+	import { keyboardNav } from '../lib/keyboard-nav.js'
+	import LabelPill from './LabelPill.svelte'
+
+	let {
+		x,
+		y,
+		color,
+		symbol: symbolField,
+		label = false,
+		stat = 'identity',
+		options = {},
+		onselect = undefined,
+		keyboard = false
+	} = $props()
+
+	/**
+	 * @param {Record<string, unknown>} data
+	 * @returns {string | null}
+	 */
+	function resolveLabel(data) {
+		if (!label) return null
+		if (label === true) return String(data[y] ?? '')
+		if (typeof label === 'function') return String(label(data) ?? '')
+		return typeof label === 'string' ? String(data[label] ?? '') : null
+	}
+
+	const plotState = getContext('plot-state')
+	let id = $state(null)
+
+	onMount(() => {
+		id = plotState.registerGeom({
+			type: 'line',
+			channels: { x, y, color, symbol: symbolField },
+			stat,
+			options
+		})
+	})
+	onDestroy(() => {
+		if (id) plotState.unregisterGeom(id)
+	})
+
+	$effect(() => {
+		if (id) plotState.updateGeom(id, { channels: { x, y, color, symbol: symbolField }, stat })
+	})
+
+	const data = $derived(id ? plotState.geomData(id) : [])
+	const xScale = $derived(plotState.xScale)
+	const yScale = $derived(plotState.yScale)
+	const colors = $derived(plotState.colors)
+	const symbolMap = $derived(plotState.symbols)
+
+	const lines = $derived.by(() => {
+		if (!data?.length || !xScale || !yScale) return []
+		return buildLines(data, { x, y, color }, xScale, yScale, colors, options.curve)
+	})
+
+	const markerRadius = $derived(options.markerRadius ?? 4)
+</script>
+
+{#if lines.length > 0}
+	<g data-plot-geom="line">
+		{#each lines as seg (seg.key ?? seg.d)}
+			<path
+				d={seg.d}
+				fill="none"
+				stroke={seg.stroke}
+				stroke-width={options.strokeWidth ?? 2}
+				stroke-linejoin="round"
+				stroke-linecap="round"
+				data-plot-element="line"
+			/>
+			{#if symbolField && symbolMap}
+				{#each seg.points as pt (`${pt.x}::${pt.y}`)}
+					<path
+						transform="translate({pt.x},{pt.y})"
+						d={buildSymbolPath(symbolMap.get(pt.data[symbolField]) ?? 'circle', markerRadius)}
+						fill={seg.stroke}
+						stroke={seg.stroke}
+						stroke-width="1"
+						data-plot-element="line-marker"
+					/>
+				{/each}
+			{/if}
+			{#if label}
+				{#each seg.points as pt (`label::${pt.x}::${pt.y}`)}
+					{@const text = resolveLabel(pt.data)}
+					{#if text}
+						<LabelPill
+							x={pt.x + (options.labelOffset?.x ?? 0)}
+							y={pt.y + (options.labelOffset?.y ?? -12)}
+							{text}
+							color={seg.stroke ?? '#333'}
+						/>
+					{/if}
+				{/each}
+			{/if}
+			<!-- Invisible hit areas for tooltip and selection -->
+			<!-- svelte-ignore a11y_no_noninteractive_tabindex -->
+			{#each seg.points as pt (`hover::${pt.x}::${pt.y}`)}
+				<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}
+					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}
+					use:keyboardNav={keyboard}
+				/>
+			{/each}
+		{/each}
+	</g>
+{/if}

package/src/geoms/Point.svelte

@@ -0,0 +1,145 @@
+<script>
+	import { getContext, onMount, onDestroy } from 'svelte'
+	import { scaleSqrt } from 'd3-scale'
+	import { buildPoints } from '../lib/brewing/marks/points.js'
+	import { keyboardNav } from '../lib/keyboard-nav.js'
+	import LabelPill from './LabelPill.svelte'
+
+	let {
+		x,
+		y,
+		color,
+		size,
+		symbol: symbolField,
+		label = false,
+		stat = 'identity',
+		options = {},
+		onselect = undefined,
+		keyboard = false
+	} = $props()
+
+	/**
+	 * @param {Record<string, unknown>} data
+	 * @returns {string | null}
+	 */
+	function resolveLabel(data) {
+		if (!label) return null
+		if (label === true) return String(data[y] ?? '')
+		if (typeof label === 'function') return String(label(data) ?? '')
+		return typeof label === 'string' ? String(data[label] ?? '') : null
+	}
+
+	const plotState = getContext('plot-state')
+	let id = $state(null)
+
+	onMount(() => {
+		id = plotState.registerGeom({
+			type: 'point',
+			channels: { x, y, color, size, symbol: symbolField },
+			stat,
+			options
+		})
+	})
+	onDestroy(() => {
+		if (id) plotState.unregisterGeom(id)
+	})
+
+	$effect(() => {
+		if (id) plotState.updateGeom(id, { channels: { x, y, color, size, symbol: symbolField }, stat })
+	})
+
+	const data = $derived(id ? plotState.geomData(id) : [])
+	const xScale = $derived(plotState.xScale)
+	const yScale = $derived(plotState.yScale)
+	const colors = $derived(plotState.colors)
+	const symbolMap = $derived(plotState.symbols)
+
+	function buildSizeScale() {
+		if (!size || !data?.length) return null
+		const vals = data.map((d) => Number(d[size])).filter((v) => !isNaN(v))
+		if (!vals.length) return null
+		const minVal = Math.min(...vals)
+		const maxVal = Math.max(...vals)
+		const minRadius = options.minRadius ?? 3
+		const maxRadius = options.maxRadius ?? 20
+		return scaleSqrt().domain([minVal, maxVal]).range([minRadius, maxRadius])
+	}
+
+	const sizeScale = $derived.by(() => buildSizeScale())
+
+	const defaultRadius = $derived(options.radius ?? 4)
+
+	const points = $derived.by(() => {
+		if (!data?.length || !xScale || !yScale) return []
+		return buildPoints(
+			data,
+			{ x, y, color, size, symbol: symbolField },
+			xScale,
+			yScale,
+			colors,
+			sizeScale,
+			symbolMap,
+			defaultRadius,
+			options?.jitter ?? null
+		)
+	})
+</script>
+
+{#if points.length > 0}
+	<g data-plot-geom="point">
+		<!-- svelte-ignore a11y_no_noninteractive_tabindex -->
+		{#each points as pt, i (`${i}::${pt.data[x]}::${pt.data[y]}`)}
+			{#if pt.symbolPath}
+				<path
+					transform="translate({pt.cx},{pt.cy})"
+					d={pt.symbolPath}
+					fill={pt.fill}
+					stroke={pt.stroke}
+					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}
+					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}
+					use:keyboardNav={keyboard}
+				/>
+			{:else}
+				<circle
+					cx={pt.cx}
+					cy={pt.cy}
+					r={pt.r}
+					fill={pt.fill}
+					stroke={pt.stroke}
+					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}
+					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}
+					use:keyboardNav={keyboard}
+				/>
+			{/if}
+			{#if label}
+				{@const text = resolveLabel(pt.data)}
+				{#if text}
+					<LabelPill
+						x={pt.cx + (options.labelOffset?.x ?? 0)}
+						y={pt.cy - pt.r + (options.labelOffset?.y ?? -12)}
+						{text}
+						color={pt.stroke ?? '#333'}
+					/>
+				{/if}
+			{/if}
+		{/each}
+	</g>
+{/if}

package/src/geoms/Violin.svelte

@@ -0,0 +1,56 @@
+<script>
+	import { getContext, onMount, onDestroy } from 'svelte'
+	import { buildViolins } from '../lib/brewing/marks/violins.js'
+
+	let { x, y, fill, stat = 'boxplot', options = {} } = $props()
+
+	const plotState = getContext('plot-state')
+	let id = $state(null)
+
+	// fill ?? x drives the colors map for both violin interior and outline
+	const fillChannel = $derived(fill ?? x)
+
+	onMount(() => {
+		id = plotState.registerGeom({
+			type: 'violin',
+			channels: { x, y, color: fillChannel },
+			stat,
+			options
+		})
+	})
+	onDestroy(() => {
+		if (id) plotState.unregisterGeom(id)
+	})
+
+	$effect(() => {
+		if (id) plotState.updateGeom(id, { channels: { x, y, color: fillChannel }, stat })
+	})
+
+	const data = $derived(id ? plotState.geomData(id) : [])
+	const xScale = $derived(plotState.xScale)
+	const yScale = $derived(plotState.yScale)
+	const colors = $derived(plotState.colors)
+
+	const violins = $derived.by(() => {
+		if (!data?.length || !xScale || !yScale) return []
+		return buildViolins(data, { x, fill: fillChannel }, xScale, yScale, colors)
+	})
+</script>
+
+{#if violins.length > 0}
+	<g data-plot-geom="violin">
+		{#each violins as v, i (`${String(v.cx)}::${i}`)}
+			<path
+				d={v.d}
+				fill={v.fill}
+				fill-opacity={options?.opacity ?? plotState.chartPreset.opacity.violin}
+				stroke={v.stroke}
+				stroke-width="1.5"
+				data-plot-element="violin"
+				role="presentation"
+				onmouseenter={() => plotState.setHovered(v.data)}
+				onmouseleave={() => plotState.clearHovered()}
+			/>
+		{/each}
+	</g>
+{/if}

package/src/geoms/lib/areas.js

@@ -0,0 +1,154 @@
+import { area, stack, curveCatmullRom, curveStep } from 'd3-shape'
+import { toPatternId } from '../../lib/brewing/patterns.js'
+
+/**
+ * Builds area path geometry for multi-series area charts.
+ *
+ * @param {Object[]} data
+ * @param {{ x: string, y: string, color?: string }} channels
+ * @param {Function} xScale
+ * @param {Function} yScale
+ * @param {Map<unknown, {fill: string, stroke: string}>} colors
+ * @param {'linear'|'smooth'|'step'} [curve]
+ * @param {Map<unknown, string>} [patterns]
+ * @returns {{ d: string, fill: string, stroke: string, key: unknown, patternId: string|null }[]}
+ */
+export function buildAreas(data, channels, xScale, yScale, colors, curve, patterns) {
+	const { x: xf, y: yf, color: cf, pattern: pf } = channels
+	const baseline = yScale.range()[0] // bottom of the chart (y pixel max)
+
+	const xPos = (d) =>
+		typeof xScale.bandwidth === 'function' ? xScale(d[xf]) + xScale.bandwidth() / 2 : xScale(d[xf])
+
+	const makeGen = () => {
+		const gen = area()
+			.x(xPos)
+			.y0(baseline)
+			.y1((d) => yScale(d[yf]))
+		if (curve === 'smooth') gen.curve(curveCatmullRom)
+		else if (curve === 'step') gen.curve(curveStep)
+		return gen
+	}
+
+	// For band (categorical) x scales, sort by domain index to preserve intended ordering.
+	// For continuous scales, sort numerically so the path draws left-to-right.
+	const sortByX = (rows) => {
+		if (typeof xScale.bandwidth === 'function') {
+			const domain = xScale.domain()
+			return [...rows].sort((a, b) => domain.indexOf(a[xf]) - domain.indexOf(b[xf]))
+		}
+		return [...rows].sort((a, b) => (a[xf] < b[xf] ? -1 : a[xf] > b[xf] ? 1 : 0))
+	}
+
+	if (!cf) {
+		const entry = colors?.values().next().value ?? { fill: '#888', stroke: '#888' }
+		const patternKey = pf ? data[0]?.[pf] : null
+		const patternId =
+			patternKey !== null && patternKey !== undefined && patterns?.has(patternKey)
+				? toPatternId(String(patternKey))
+				: null
+		return [{ d: makeGen()(sortByX(data)), fill: entry.fill, stroke: 'none', key: null, patternId }]
+	}
+
+	// Group by color field
+	const groups = new Map()
+	for (const d of data) {
+		const key = d[cf]
+		if (!groups.has(key)) groups.set(key, [])
+		groups.get(key).push(d)
+	}
+	// For different-field patterns, assign positionally so each area gets a distinct pattern
+	const orderedPatternKeys = pf && pf !== cf ? [...(patterns?.keys() ?? [])] : null
+
+	return [...groups.entries()].map(([key, rows], i) => {
+		const entry = colors?.get(key) ?? { fill: '#888', stroke: '#888' }
+		// Same field or no pf: look up by colorKey. Different field: assign positionally.
+		const patternKey = !pf
+			? key
+			: pf === cf
+				? key
+				: (orderedPatternKeys?.[i % orderedPatternKeys.length] ?? null)
+		const patternId =
+			patternKey !== null && patternKey !== undefined && patterns?.has(patternKey)
+				? toPatternId(String(patternKey))
+				: null
+		return { d: makeGen()(sortByX(rows)), fill: entry.fill, stroke: 'none', key, patternId }
+	})
+}
+
+/**
+ * Builds stacked area paths using d3 stack layout.
+ *
+ * @param {Object[]} data
+ * @param {{ x: string, y: string, color: string }} channels
+ * @param {Function} xScale
+ * @param {Function} yScale
+ * @param {Map<unknown, {fill: string, stroke: string}>} colors
+ * @param {'linear'|'smooth'|'step'} [curve]
+ * @param {Map<unknown, string>} [patterns]
+ * @returns {{ d: string, fill: string, stroke: string, key: unknown, patternId: string|null }[]}
+ */
+export function buildStackedAreas(data, channels, xScale, yScale, colors, curve, patterns) {
+	const { x: xf, y: yf, color: cf, pattern: pf } = channels
+	if (!cf) return buildAreas(data, channels, xScale, yScale, colors, curve, patterns)
+
+	const xCategories = [...new Set(data.map((d) => d[xf]))].sort((a, b) =>
+		a < b ? -1 : a > b ? 1 : 0
+	)
+	const colorCategories = [...new Set(data.map((d) => d[cf]))]
+
+	// Build wide-form lookup: xVal → { colorKey: yVal }
+	const lookup = new Map()
+	for (const d of data) {
+		if (!lookup.has(d[xf])) lookup.set(d[xf], {})
+		lookup.get(d[xf])[d[cf]] = Number(d[yf])
+	}
+
+	const wide = xCategories.map((xVal) => {
+		const row = { [xf]: xVal }
+		for (const c of colorCategories) row[c] = lookup.get(xVal)?.[c] ?? 0
+		return row
+	})
+
+	const xPos = (d) =>
+		typeof xScale.bandwidth === 'function'
+			? xScale(d.data[xf]) + xScale.bandwidth() / 2
+			: xScale(d.data[xf])
+
+	const makeGen = () => {
+		const gen = area()
+			.x(xPos)
+			.y0((d) => yScale(d[0]))
+			.y1((d) => yScale(d[1]))
+		if (curve === 'smooth') gen.curve(curveCatmullRom)
+		else if (curve === 'step') gen.curve(curveStep)
+		return gen
+	}
+
+	const stackGen = stack().keys(colorCategories)
+	const layers = stackGen(wide)
+
+	const orderedPatternKeys = pf && pf !== cf ? [...(patterns?.keys() ?? [])] : null
+
+	return layers.map((layer, i) => {
+		const colorKey = layer.key
+		const entry = colors?.get(colorKey) ?? { fill: '#888', stroke: '#888' }
+		// Same field (or no pf): look up by colorKey. Different field: assign positionally.
+		const patternKey = !pf
+			? colorKey
+			: pf === cf
+				? colorKey
+				: (orderedPatternKeys?.[i % orderedPatternKeys.length] ?? null)
+		const patternId =
+			patternKey !== null && patternKey !== undefined && patterns?.has(patternKey)
+				? toPatternId(String(patternKey))
+				: null
+		return {
+			d: makeGen()(layer) ?? '',
+			fill: entry.fill,
+			stroke: 'none',
+			key: colorKey,
+			patternId
+		}
+	})
+}