@rokkit/chart 1.0.0-next.99 → 1.0.2

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

@@ -0,0 +1,110 @@
+<script>
+	import { getContext, onMount, onDestroy } from 'svelte'
+
+	let {
+		x,
+		y: _y = undefined,
+		color = undefined,
+		fill: fillProp = undefined,
+		stat = 'identity',
+		options = {}
+	} = $props()
+
+	const open = $derived(options.open ?? 'open')
+	const high = $derived(options.high ?? 'high')
+	const low = $derived(options.low ?? 'low')
+	const close = $derived(options.close ?? 'close')
+	const upColor = $derived(options.upColor ?? '#22c55e')
+	const downColor = $derived(options.downColor ?? '#ef4444')
+	const wickWidth = $derived(options.wickWidth ?? 1)
+
+	const plotState = getContext('plot-state')
+	let id = $state(null)
+
+	onMount(() => {
+		// Register with y pointing to 'high' so the y scale covers the full range
+		id = plotState.registerGeom({
+			type: 'candlestick',
+			channels: { x, y: high, color: fillProp ?? color },
+			stat
+		})
+	})
+	onDestroy(() => {
+		if (id) plotState.unregisterGeom(id)
+	})
+
+	$effect(() => {
+		if (id)
+			plotState.updateGeom(id, {
+				channels: { x, y: high, color: fillProp ?? color },
+				stat
+			})
+	})
+
+	const data = $derived(id ? plotState.geomData(id) : [])
+	const xScale = $derived(plotState.xScale)
+	const yScale = $derived(plotState.yScale)
+
+	const candles = $derived.by(() => {
+		if (!data?.length || !xScale || !yScale) return []
+		const bw = typeof xScale.bandwidth === 'function' ? xScale.bandwidth() : 10
+		const bodyWidth = bw * 0.6
+		const bodyOffset = (bw - bodyWidth) / 2
+
+		return data.map((d, i) => {
+			const xPos = (xScale(d[x]) ?? 0) + bodyOffset
+			const openVal = Number(d[open])
+			const closeVal = Number(d[close])
+			const highVal = Number(d[high])
+			const lowVal = Number(d[low])
+			const isUp = closeVal >= openVal
+			const bodyTop = yScale(isUp ? closeVal : openVal)
+			const bodyBottom = yScale(isUp ? openVal : closeVal)
+
+			return {
+				key: `${d[x]}-${i}`,
+				// Body
+				bodyX: xPos,
+				bodyY: bodyTop,
+				bodyWidth,
+				bodyHeight: Math.max(1, bodyBottom - bodyTop),
+				fill: isUp ? upColor : downColor,
+				// Wick
+				wickX: xPos + bodyWidth / 2,
+				wickTop: yScale(highVal),
+				wickBottom: yScale(lowVal),
+				data: d
+			}
+		})
+	})
+</script>
+
+{#if candles.length > 0}
+	<g data-plot-geom="candlestick">
+		{#each candles as c (c.key)}
+			<!-- Wick (high to low) -->
+			<line
+				x1={c.wickX}
+				y1={c.wickTop}
+				x2={c.wickX}
+				y2={c.wickBottom}
+				stroke={c.fill}
+				stroke-width={wickWidth}
+				data-plot-element="wick"
+			/>
+			<!-- Body (open to close) -->
+			<rect
+				x={c.bodyX}
+				y={c.bodyY}
+				width={c.bodyWidth}
+				height={c.bodyHeight}
+				fill={c.fill}
+				data-plot-element="candle"
+				onmouseenter={() => plotState.setHovered(c.data)}
+				onmouseleave={() => plotState.clearHovered()}
+			>
+				<title>{c.data[x]}: O={c.data[open]} H={c.data[high]} L={c.data[low]} C={c.data[close]}</title>
+			</rect>
+		{/each}
+	</g>
+{/if}

package/src/geoms/Heatmap.svelte

@@ -0,0 +1,92 @@
+<script>
+	import { getContext, onMount, onDestroy } from 'svelte'
+
+	let {
+		x,
+		y,
+		color,
+		fill: fillProp,
+		stat = 'identity',
+		options = {}
+	} = $props()
+
+	const colorChannel = $derived(fillProp ?? color)
+
+	const plotState = getContext('plot-state')
+	let id = $state(null)
+
+	onMount(() => {
+		id = plotState.registerGeom({
+			type: 'heatmap',
+			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 xScale = $derived(plotState.xScale)
+	const yScale = $derived(plotState.yScale)
+	const continuousColor = $derived(plotState.continuousColorScale)
+	const categoricalColors = $derived(plotState.colors)
+	const rx = $derived(options.rounded ?? 0)
+
+	const cells = $derived.by(() => {
+		if (!data?.length || !xScale || !yScale) return []
+		const bwX = typeof xScale.bandwidth === 'function' ? xScale.bandwidth() : 0
+		const bwY = typeof yScale.bandwidth === 'function' ? yScale.bandwidth() : 0
+
+		return data.map((d, i) => {
+			const xVal = d[x]
+			const yVal = d[y]
+			const colorVal = colorChannel ? d[colorChannel] : null
+			let cellFill = '#ccc'
+
+			if (continuousColor) {
+				cellFill = continuousColor.scale(Number(colorVal))
+			} else if (categoricalColors?.has(colorVal)) {
+				cellFill = categoricalColors.get(colorVal).fill
+			}
+
+			return {
+				key: `${xVal}-${yVal}-${i}`,
+				x: xScale(xVal) ?? 0,
+				y: yScale(yVal) ?? 0,
+				width: bwX,
+				height: bwY,
+				fill: cellFill,
+				data: d
+			}
+		})
+	})
+</script>
+
+{#if cells.length > 0}
+	<g data-plot-geom="heatmap">
+		{#each cells as cell (cell.key)}
+			<rect
+				x={cell.x}
+				y={cell.y}
+				width={Math.max(0, cell.width)}
+				height={Math.max(0, cell.height)}
+				fill={cell.fill}
+				rx={rx}
+				data-plot-element="cell"
+				onmouseenter={() => plotState.setHovered(cell.data)}
+				onmouseleave={() => plotState.clearHovered()}
+			>
+				<title>{cell.data[x]}, {cell.data[y]}: {colorChannel ? cell.data[colorChannel] : ''}</title>
+			</rect>
+		{/each}
+	</g>
+{/if}

package/src/geoms/Hexbin.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 radius = $derived(options.radius ?? 20)
+
+	const plotState = getContext('plot-state')
+	let id = $state(null)
+
+	onMount(() => {
+		id = plotState.registerGeom({
+			type: 'hexbin',
+			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 continuousColor = $derived(plotState.continuousColorScale)
+
+	// Hex binning: group data points into hexagonal cells
+	function hexBin(data, xField, yField, xScale, yScale, r) {
+		const dx = r * 2 * Math.sin(Math.PI / 3) // horizontal spacing
+		const dy = r * 1.5                        // vertical spacing
+		const bins = new Map()
+
+		for (const d of data) {
+			const px = xScale(d[xField])
+			const py = yScale(d[yField])
+			if (px === null || px === undefined || py === null || py === undefined) continue
+
+			// Find nearest hex center
+			const col = Math.round(px / dx)
+			const row = Math.round(py / dy)
+			const cx = col * dx + (row % 2 ? dx / 2 : 0)
+			const cy = row * dy
+			const key = `${col},${row}`
+
+			if (!bins.has(key)) {
+				bins.set(key, { cx, cy, count: 0, points: [] })
+			}
+			const bin = bins.get(key)
+			bin.count++
+			bin.points.push(d)
+		}
+		return [...bins.values()]
+	}
+
+	// Build hexagon path for a given radius
+	function hexPath(r) {
+		const angles = [0, 1, 2, 3, 4, 5].map((i) => ((i * 60 - 30) * Math.PI) / 180)
+		return `${angles.map((a, i) => `${i === 0 ? 'M' : 'L'}${r * Math.cos(a)},${r * Math.sin(a)}`).join('')  }Z`
+	}
+
+	const hexes = $derived.by(() => {
+		if (!data?.length || !xScale || !yScale) return []
+		const bins = hexBin(data, x, y, xScale, yScale, radius)
+		const maxCount = Math.max(1, ...bins.map((b) => b.count))
+		const colorScale = continuousColor?.scale
+
+		return bins.map((bin, i) => ({
+			key: `hex-${i}`,
+			cx: bin.cx,
+			cy: bin.cy,
+			count: bin.count,
+			fill: colorScale
+				? colorScale(bin.count)
+				: `rgba(66, 133, 244, ${0.1 + 0.9 * (bin.count / maxCount)})`,
+			data: { count: bin.count, x: bin.cx, y: bin.cy }
+		}))
+	})
+
+	const hex = $derived(hexPath(radius))
+</script>
+
+{#if hexes.length > 0}
+	<g data-plot-geom="hexbin">
+		{#each hexes as h (h.key)}
+			<path
+				transform="translate({h.cx},{h.cy})"
+				d={hex}
+				fill={h.fill}
+				stroke="white"
+				stroke-width="0.5"
+				data-plot-element="hex"
+				onmouseenter={() => plotState.setHovered(h.data)}
+				onmouseleave={() => plotState.clearHovered()}
+			>
+				<title>{h.count} points</title>
+			</path>
+		{/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}