@rokkit/chart 1.0.0-next.98 → 1.0.1

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/Ribbon.svelte

@@ -0,0 +1,161 @@
+<script>
+	import { getContext, onMount, onDestroy } from 'svelte'
+
+	let {
+		x = undefined,
+		y = undefined,
+		color = undefined,
+		fill: fillProp = undefined,
+		stat = 'identity',
+		options = {}
+	} = $props()
+
+	const sourceField = $derived(options.source ?? 'source')
+	const targetField = $derived(options.target ?? 'target')
+	const valueField = $derived(options.value ?? 'value')
+	const colorChannel = $derived(fillProp ?? color)
+
+	const plotState = getContext('plot-state')
+	let id = $state(null)
+
+	onMount(() => {
+		id = plotState.registerGeom({
+			type: 'ribbon',
+			channels: { x, y, color: colorChannel },
+			stat
+		})
+	})
+	onDestroy(() => {
+		if (id) plotState.unregisterGeom(id)
+	})
+
+	$effect(() => {
+		if (id)
+			plotState.updateGeom(id, {
+				channels: { x, y, color: colorChannel },
+				stat
+			})
+	})
+
+	const data = $derived(id ? plotState.geomData(id) : [])
+	const colors = $derived(plotState.colors)
+	const innerHeight = $derived(plotState.innerHeight)
+	const innerWidth = $derived(plotState.innerWidth)
+
+	// Compute Sankey-style layout
+	const ribbons = $derived.by(() => {
+		if (!data?.length) return { links: [], sourceNodes: [], targetNodes: [] }
+
+		// Aggregate flows
+		const flows = data.map((d) => ({
+			source: String(d[sourceField]),
+			target: String(d[targetField]),
+			value: Number(d[valueField]) || 0,
+			data: d
+		}))
+
+		// Compute node positions
+		const sourceMap = new Map()
+		const targetMap = new Map()
+		for (const f of flows) {
+			sourceMap.set(f.source, (sourceMap.get(f.source) ?? 0) + f.value)
+			targetMap.set(f.target, (targetMap.get(f.target) ?? 0) + f.value)
+		}
+
+		const totalSource = Math.max(1, [...sourceMap.values()].reduce((s, v) => s + v, 0))
+		const totalTarget = Math.max(1, [...targetMap.values()].reduce((s, v) => s + v, 0))
+		const padding = 4
+		const availHeight = innerHeight - padding * (Math.max(sourceMap.size, targetMap.size) - 1)
+
+		// Position source nodes on left
+		let sourceY = 0
+		const sourceNodes = []
+		for (const [name, value] of sourceMap) {
+			const h = (value / totalSource) * availHeight
+			sourceNodes.push({ name, y: sourceY, height: h })
+			sourceY += h + padding
+		}
+
+		// Position target nodes on right
+		let targetY = 0
+		const targetNodes = []
+		for (const [name, value] of targetMap) {
+			const h = (value / totalTarget) * availHeight
+			targetNodes.push({ name, y: targetY, height: h })
+			targetY += h + padding
+		}
+
+		// Build ribbon paths
+		const sourceOffsets = new Map(sourceNodes.map((n) => [n.name, n.y]))
+		const targetOffsets = new Map(targetNodes.map((n) => [n.name, n.y]))
+		const x0 = 0
+		const x1 = innerWidth
+
+		const links = flows.map((f, i) => {
+			const sy0 = sourceOffsets.get(f.source) ?? 0
+			const ty0 = targetOffsets.get(f.target) ?? 0
+			const sourceTotal = sourceMap.get(f.source) ?? 1
+			const targetTotal = targetMap.get(f.target) ?? 1
+			const sh = (f.value / sourceTotal) * (sourceNodes.find((n) => n.name === f.source)?.height ?? 0)
+			const th = (f.value / targetTotal) * (targetNodes.find((n) => n.name === f.target)?.height ?? 0)
+
+			const path = `M${x0},${sy0} C${innerWidth * 0.4},${sy0} ${innerWidth * 0.6},${ty0} ${x1},${ty0} L${x1},${ty0 + th} C${innerWidth * 0.6},${ty0 + th} ${innerWidth * 0.4},${sy0 + sh} ${x0},${sy0 + sh} Z`
+
+			// Update offsets for stacking
+			sourceOffsets.set(f.source, sy0 + sh)
+			targetOffsets.set(f.target, ty0 + th)
+
+			const fillColor = colors?.get(f.source)?.fill ?? colors?.get(f.target)?.fill ?? '#888'
+
+			return {
+				key: `ribbon-${i}`,
+				d: path,
+				fill: fillColor,
+				data: f.data
+			}
+		})
+
+		return { links, sourceNodes, targetNodes }
+	})
+</script>
+
+{#if ribbons.links.length > 0}
+	<g data-plot-geom="ribbon">
+		{#each ribbons.links as link (link.key)}
+			<path
+				d={link.d}
+				fill={link.fill}
+				opacity="0.5"
+				data-plot-element="ribbon"
+				onmouseenter={() => plotState.setHovered(link.data)}
+				onmouseleave={() => plotState.clearHovered()}
+			>
+				<title>{link.data[sourceField]} → {link.data[targetField]}: {link.data[valueField]}</title>
+			</path>
+		{/each}
+		<!-- Source node labels -->
+		{#each ribbons.sourceNodes as node (node.name)}
+			<text
+				x="-4"
+				y={node.y + node.height / 2}
+				text-anchor="end"
+				dominant-baseline="middle"
+				font-size="11"
+				fill="currentColor"
+				data-plot-element="node-label"
+			>{node.name}</text>
+		{/each}
+		<!-- Target node labels -->
+		{#each ribbons.targetNodes as node (node.name)}
+			<text
+				x={innerWidth + 4}
+				y={node.y + node.height / 2}
+				text-anchor="start"
+				dominant-baseline="middle"
+				font-size="11"
+				fill="currentColor"
+				data-plot-element="node-label"
+			>{node.name}</text>
+		{/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/Waterfall.svelte

@@ -0,0 +1,114 @@
+<script>
+	import { getContext, onMount, onDestroy } from 'svelte'
+
+	let {
+		x,
+		y,
+		color = undefined,
+		fill: fillProp = undefined,
+		stat = 'identity',
+		options = {}
+	} = $props()
+
+	const positiveColor = $derived(options.positiveColor ?? '#22c55e')
+	const negativeColor = $derived(options.negativeColor ?? '#ef4444')
+	const totalColor = $derived(options.totalColor ?? '#3b82f6')
+	const totalField = $derived(options.totalField ?? undefined)
+	const connectorWidth = $derived(options.connectorWidth ?? 0.5)
+
+	const plotState = getContext('plot-state')
+	let id = $state(null)
+
+	onMount(() => {
+		id = plotState.registerGeom({
+			type: 'waterfall',
+			channels: { x, y, color: fillProp ?? color },
+			stat
+		})
+	})
+	onDestroy(() => {
+		if (id) plotState.unregisterGeom(id)
+	})
+
+	$effect(() => {
+		if (id)
+			plotState.updateGeom(id, {
+				channels: { x, y, color: fillProp ?? color },
+				stat
+			})
+	})
+
+	const data = $derived(id ? plotState.geomData(id) : [])
+	const xScale = $derived(plotState.xScale)
+	const yScale = $derived(plotState.yScale)
+
+	const bars = $derived.by(() => {
+		if (!data?.length || !xScale || !yScale) return []
+		const bw = typeof xScale.bandwidth === 'function' ? xScale.bandwidth() : 10
+
+		let cumulative = 0
+		return data.map((d, i) => {
+			const xVal = d[x]
+			const yVal = Number(d[y])
+			const isTotal = totalField ? Boolean(d[totalField]) : false
+			const xPos = xScale(xVal) ?? 0
+			let barTop, barBottom, fill
+
+			if (isTotal) {
+				barTop = yScale(Math.max(0, cumulative))
+				barBottom = yScale(0)
+				fill = totalColor
+			} else {
+				const start = cumulative
+				cumulative += yVal
+				barTop = yScale(Math.max(start, cumulative))
+				barBottom = yScale(Math.min(start, cumulative))
+				fill = yVal >= 0 ? positiveColor : negativeColor
+			}
+
+			return {
+				key: `${xVal}-${i}`,
+				x: xPos,
+				y: barTop,
+				width: bw,
+				height: Math.max(1, barBottom - barTop),
+				fill,
+				cumulative,
+				data: d
+			}
+		})
+	})
+</script>
+
+{#if bars.length > 0}
+	<g data-plot-geom="waterfall">
+		{#each bars as bar, i (bar.key)}
+			<rect
+				x={bar.x}
+				y={bar.y}
+				width={Math.max(0, bar.width)}
+				height={bar.height}
+				fill={bar.fill}
+				data-plot-element="waterfall-bar"
+				onmouseenter={() => plotState.setHovered(bar.data)}
+				onmouseleave={() => plotState.clearHovered()}
+			>
+				<title>{bar.data[x]}: {bar.data[y]}</title>
+			</rect>
+			<!-- Connector line to next bar -->
+			{#if i < bars.length - 1}
+				<line
+					x1={bar.x + bar.width}
+					y1={yScale(bar.cumulative)}
+					x2={bars[i + 1].x}
+					y2={yScale(bar.cumulative)}
+					stroke="currentColor"
+					stroke-width={connectorWidth}
+					stroke-dasharray="3 2"
+					opacity="0.5"
+					data-plot-element="connector"
+				/>
+			{/if}
+		{/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
+		}
+	})
+}