@rokkit/chart 1.3.8 → 1.3.10

package/dist/geoms/Box.svelte

@@ -1,12 +1,16 @@
 <script lang="ts">
 	import { getContext, onMount, onDestroy } from 'svelte'
 	import type { PlotState } from '../PlotState.svelte.js'
-	import { buildBoxes } from '../lib/brewing/marks/boxes.js'
+	import { GeomState } from './lib/GeomState.svelte.js'
+	import { buildBoxMarks } from './lib/marks/box.js'
 
 	type Props = {
 		x?: string
 		y?: string
+		/** Box interior aesthetic (field); defaults to `x`. */
 		fill?: string
+		/** Outline aesthetic (field); overrides whisker/median/border stroke when set. */
+		color?: string
 		stat?: string
 		/** Offset the box to one half of the band (raincloud/split plots). Default 'center'. */
 		side?: 'left' | 'right' | 'center'
@@ -15,13 +19,14 @@
 		width?: number
 		/** Data field driving a texture fill (from the shared pattern set) instead of a solid fill. */
 		pattern?: string
-		options?: { opacity?: number }
+		/** Fixed box opacity 0–1; defaults to the per-geom preset (box = 0.5). */
+		alpha?: number
 	}
 
-	let { x, y, fill, stat = 'boxplot', side = 'center', width, pattern, options = {} }: Props = $props()
+	let { x, y, fill, color, stat = 'boxplot', side = 'center', width, pattern, alpha }: Props =
+		$props()
 
 	const plotState = getContext<PlotState>('plot-state')
-	let id = $state<string | null>(null)
 
 	// Fall back to the root Plot channels when the geom's own x/y are omitted, so
 	// <Plot.Box> composes under <Plot.Root x y> without silently NaN-ing.
@@ -30,148 +35,130 @@
 	// fill ?? effective-x drives the colors map for both box interior and whisker strokes
 	const fillChannel = $derived(fill ?? xf)
 
-	onMount(() => {
-		id = plotState.registerGeom({
-			type: 'box',
-			channels: { x: xf, y: yf, color: fillChannel, pattern },
-			stat,
-			options
-		})
-	})
-	onDestroy(() => {
-		if (id) plotState.unregisterGeom(id)
-	})
+	const geom = new GeomState(plotState, () => ({
+		type: 'box',
+		channels: { x: xf, y: yf, fill: fillChannel, color, pattern },
+		stat,
+		options: { side, width },
+		alpha,
+		build: buildBoxMarks
+	}))
+	onMount(geom.register)
+	onDestroy(geom.destroy)
+	$effect(geom.sync)
 
-	$effect(() => {
-		if (id)
-			plotState.updateGeom(id, { channels: { x: xf, y: yf, color: fillChannel, pattern }, stat })
-	})
-
-	const data = $derived(id ? plotState.geomData(id) : [])
-	const xScale = $derived(plotState.xScale)
-	const yScale = $derived(plotState.yScale)
-	const colors = $derived(plotState.colors)
-	const patterns = $derived(plotState.patterns)
-
-	const boxes = $derived.by(() => {
-		if (!data?.length || !xScale || !yScale) return []
-		return buildBoxes(data, { x: xf, fill: fillChannel, pattern }, xScale, yScale, colors, {
-			side,
-			width,
-			patterns
-		})
-	})
+	const boxes = $derived(geom.marks)
 </script>
 
 {#if boxes.length > 0}
 	<g data-plot-geom="box">
-			{#each boxes as box, i (`${String(box.cx)}::${i}`)}
-				<!-- Each primitive is placed through plotState.place(band, value) so the whole
-				     box transposes correctly under orientation='horizontal' (flip). -->
-				{@const c1 = plotState.place(box.cx - box.width / 2, box.q3)}
-				{@const c2 = plotState.place(box.cx + box.width / 2, box.q1)}
-				{@const mA = plotState.place(box.cx - box.width / 2, box.median)}
-				{@const mB = plotState.place(box.cx + box.width / 2, box.median)}
-				{@const wLoA = plotState.place(box.cx, box.q1)}
-				{@const wLoB = plotState.place(box.cx, box.iqr_min)}
-				{@const wHiA = plotState.place(box.cx, box.q3)}
-				{@const wHiB = plotState.place(box.cx, box.iqr_max)}
-				{@const capLoA = plotState.place(box.cx - box.whiskerWidth / 2, box.iqr_min)}
-				{@const capLoB = plotState.place(box.cx + box.whiskerWidth / 2, box.iqr_min)}
-				{@const capHiA = plotState.place(box.cx - box.whiskerWidth / 2, box.iqr_max)}
-				{@const capHiB = plotState.place(box.cx + box.whiskerWidth / 2, box.iqr_max)}
-				<!-- Box body (IQR): lighter fill shade -->
+		{#each boxes as box, i (`${String(box.cx)}::${i}`)}
+			<!-- Each primitive is placed through plotState.place(band, value) so the whole
+			     box transposes correctly under orientation='horizontal' (flip). -->
+			{@const c1 = plotState.place(box.cx - box.width / 2, box.q3)}
+			{@const c2 = plotState.place(box.cx + box.width / 2, box.q1)}
+			{@const mA = plotState.place(box.cx - box.width / 2, box.median)}
+			{@const mB = plotState.place(box.cx + box.width / 2, box.median)}
+			{@const wLoA = plotState.place(box.cx, box.q1)}
+			{@const wLoB = plotState.place(box.cx, box.iqr_min)}
+			{@const wHiA = plotState.place(box.cx, box.q3)}
+			{@const wHiB = plotState.place(box.cx, box.iqr_max)}
+			{@const capLoA = plotState.place(box.cx - box.whiskerWidth / 2, box.iqr_min)}
+			{@const capLoB = plotState.place(box.cx + box.whiskerWidth / 2, box.iqr_min)}
+			{@const capHiA = plotState.place(box.cx - box.whiskerWidth / 2, box.iqr_max)}
+			{@const capHiB = plotState.place(box.cx + box.whiskerWidth / 2, box.iqr_max)}
+			<!-- Box body (IQR): lighter fill shade -->
+			<rect
+				x={Math.min(c1.x, c2.x)}
+				y={Math.min(c1.y, c2.y)}
+				width={Math.abs(c2.x - c1.x)}
+				height={Math.abs(c2.y - c1.y)}
+				fill={box.fill}
+				fill-opacity={box.alpha}
+				stroke={box.stroke}
+				stroke-width="1"
+				data-plot-element="box-body"
+				role="graphics-symbol"
+				aria-label={`${String(box.data[xf ?? ''] ?? 'box')}: median ${box.data.median}, IQR ${box.data.q1}–${box.data.q3}`}
+				onmouseenter={() => plotState.setHovered(box.data)}
+				onmouseleave={() => plotState.clearHovered()}
+			/>
+			{#if box.patternId}
+				<!-- Texture fill overlay (matches the box body) -->
 				<rect
 					x={Math.min(c1.x, c2.x)}
 					y={Math.min(c1.y, c2.y)}
 					width={Math.abs(c2.x - c1.x)}
 					height={Math.abs(c2.y - c1.y)}
-					fill={box.fill}
-					fill-opacity={options?.opacity ?? plotState.chartPreset.opacity.box}
+					fill="url(#{box.patternId})"
+					pointer-events="none"
+				/>
+			{/if}
+			<!-- Median line: darker stroke shade -->
+			<line
+				x1={mA.x}
+				y1={mA.y}
+				x2={mB.x}
+				y2={mB.y}
+				stroke={box.stroke}
+				stroke-width="2"
+				data-plot-element="box-median"
+			/>
+			<!-- Lower whisker (q1 to iqr_min) -->
+			<line
+				x1={wLoA.x}
+				y1={wLoA.y}
+				x2={wLoB.x}
+				y2={wLoB.y}
+				stroke={box.stroke}
+				stroke-width="1"
+				data-plot-element="box-whisker"
+			/>
+			<!-- Upper whisker (q3 to iqr_max) -->
+			<line
+				x1={wHiA.x}
+				y1={wHiA.y}
+				x2={wHiB.x}
+				y2={wHiB.y}
+				stroke={box.stroke}
+				stroke-width="1"
+				data-plot-element="box-whisker"
+			/>
+			<!-- Lower whisker cap -->
+			<line
+				x1={capLoA.x}
+				y1={capLoA.y}
+				x2={capLoB.x}
+				y2={capLoB.y}
+				stroke={box.stroke}
+				stroke-width="1"
+			/>
+			<!-- Upper whisker cap -->
+			<line
+				x1={capHiA.x}
+				y1={capHiA.y}
+				x2={capHiB.x}
+				y2={capHiB.y}
+				stroke={box.stroke}
+				stroke-width="1"
+			/>
+			<!-- Outliers: individual points beyond the 1.5·IQR fence -->
+			{#each box.outliers as o, oi (`${i}-outlier-${oi}`)}
+				{@const op = plotState.place(box.cx, o.cy)}
+				<circle
+					cx={op.x}
+					cy={op.y}
+					r="2"
+					fill="none"
 					stroke={box.stroke}
 					stroke-width="1"
-					data-plot-element="box-body"
+					data-plot-element="box-outlier"
 					role="graphics-symbol"
-					aria-label={`${String(box.data[xf ?? ''] ?? 'box')}: median ${box.data.median}, IQR ${box.data.q1}–${box.data.q3}`}
-					onmouseenter={() => plotState.setHovered(box.data)}
+					aria-label={`outlier: ${o.value}`}
+					onmouseenter={() => plotState.setHovered({ ...box.data, value: o.value })}
 					onmouseleave={() => plotState.clearHovered()}
 				/>
-				{#if box.patternId}
-					<!-- Texture fill overlay (matches the box body) -->
-					<rect
-						x={Math.min(c1.x, c2.x)}
-						y={Math.min(c1.y, c2.y)}
-						width={Math.abs(c2.x - c1.x)}
-						height={Math.abs(c2.y - c1.y)}
-						fill="url(#{box.patternId})"
-						pointer-events="none"
-					/>
-				{/if}
-				<!-- Median line: darker stroke shade -->
-				<line
-					x1={mA.x}
-					y1={mA.y}
-					x2={mB.x}
-					y2={mB.y}
-					stroke={box.stroke}
-					stroke-width="2"
-					data-plot-element="box-median"
-				/>
-				<!-- Lower whisker (q1 to iqr_min) -->
-				<line
-					x1={wLoA.x}
-					y1={wLoA.y}
-					x2={wLoB.x}
-					y2={wLoB.y}
-					stroke={box.stroke}
-					stroke-width="1"
-					data-plot-element="box-whisker"
-				/>
-				<!-- Upper whisker (q3 to iqr_max) -->
-				<line
-					x1={wHiA.x}
-					y1={wHiA.y}
-					x2={wHiB.x}
-					y2={wHiB.y}
-					stroke={box.stroke}
-					stroke-width="1"
-					data-plot-element="box-whisker"
-				/>
-				<!-- Lower whisker cap -->
-				<line
-					x1={capLoA.x}
-					y1={capLoA.y}
-					x2={capLoB.x}
-					y2={capLoB.y}
-					stroke={box.stroke}
-					stroke-width="1"
-				/>
-				<!-- Upper whisker cap -->
-				<line
-					x1={capHiA.x}
-					y1={capHiA.y}
-					x2={capHiB.x}
-					y2={capHiB.y}
-					stroke={box.stroke}
-					stroke-width="1"
-				/>
-				<!-- Outliers: individual points beyond the 1.5·IQR fence -->
-				{#each box.outliers as o, oi (`${i}-outlier-${oi}`)}
-					{@const op = plotState.place(box.cx, o.cy)}
-					<circle
-						cx={op.x}
-						cy={op.y}
-						r="2"
-						fill="none"
-						stroke={box.stroke}
-						stroke-width="1"
-						data-plot-element="box-outlier"
-						role="graphics-symbol"
-						aria-label={`outlier: ${o.value}`}
-						onmouseenter={() => plotState.setHovered({ ...box.data, value: o.value })}
-						onmouseleave={() => plotState.clearHovered()}
-					/>
-				{/each}
 			{/each}
+		{/each}
 	</g>
 {/if}

package/dist/geoms/Box.svelte.d.ts

@@ -1,7 +1,10 @@
 type Props = {
     x?: string;
     y?: string;
+    /** Box interior aesthetic (field); defaults to `x`. */
     fill?: string;
+    /** Outline aesthetic (field); overrides whisker/median/border stroke when set. */
+    color?: string;
     stat?: string;
     /** Offset the box to one half of the band (raincloud/split plots). Default 'center'. */
     side?: 'left' | 'right' | 'center';
@@ -10,9 +13,8 @@ type Props = {
     width?: number;
     /** Data field driving a texture fill (from the shared pattern set) instead of a solid fill. */
     pattern?: string;
-    options?: {
-        opacity?: number;
-    };
+    /** Fixed box opacity 0–1; defaults to the per-geom preset (box = 0.5). */
+    alpha?: number;
 };
 declare const Box: import("svelte").Component<Props, {}, "">;
 type Box = ReturnType<typeof Box>;

package/dist/geoms/Candlestick.svelte

@@ -1,6 +1,8 @@
 <script lang="ts">
 	import { getContext, onMount, onDestroy } from 'svelte'
 	import type { PlotState } from '../PlotState.svelte.js'
+	import { GeomState } from './lib/GeomState.svelte.js'
+	import { buildCandleMarks } from './lib/marks/candlestick.js'
 
 	type Options = {
 		open?: string
@@ -17,92 +19,33 @@
 		y?: string
 		color?: string
 		fill?: string
+		/** Fixed opacity 0–1; defaults to the per-geom preset (candlestick = 1). */
+		alpha?: number
 		stat?: string
 		options?: Options
 	}
 
-	let {
-		x,
-		y: _y = undefined,
-		color = undefined,
-		fill: fillProp = undefined,
-		stat = 'identity',
-		options = {}
-	}: Props = $props()
+	let { x, y: _y = undefined, color, fill, alpha, stat = 'identity', options = {} }: Props = $props()
 
-	const open = $derived(options.open ?? 'open')
+	const colorField = $derived(fill ?? color)
 	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<PlotState>('plot-state')
-	let id = $state<string | null>(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)
+	// Register with y pointing to 'high' so the y scale covers the full range.
+	const geom = new GeomState(plotState, () => ({
+		type: 'candlestick',
+		channels: { x, y: high, color: colorField },
+		stat,
+		options,
+		alpha,
+		build: buildCandleMarks
+	}))
+	onMount(geom.register)
+	onDestroy(geom.destroy)
+	$effect(geom.sync)
 
-			// Place (band, value) points so the candle transposes under orientation flip.
-			const b1 = plotState.place(xPos, bodyTop)
-			const b2 = plotState.place(xPos + bodyWidth, bodyBottom)
-			const wa = plotState.place(xPos + bodyWidth / 2, yScale(highVal))
-			const wb = plotState.place(xPos + bodyWidth / 2, yScale(lowVal))
-			return {
-				key: `${d[x ?? '']}-${i}`,
-				// Body
-				bodyX: Math.min(b1.x, b2.x),
-				bodyY: Math.min(b1.y, b2.y),
-				bodyWidth: Math.abs(b2.x - b1.x),
-				bodyHeight: Math.max(1, Math.abs(b2.y - b1.y)),
-				fill: isUp ? upColor : downColor,
-				// Wick
-				wickX1: wa.x,
-				wickY1: wa.y,
-				wickX2: wb.x,
-				wickY2: wb.y,
-				data: d
-			}
-		})
-	})
+	const candles = $derived(geom.marks)
 </script>
 
 {#if candles.length > 0}
@@ -115,6 +58,7 @@
 				x2={c.wickX2}
 				y2={c.wickY2}
 				stroke={c.fill}
+				stroke-opacity={c.alpha}
 				stroke-width={wickWidth}
 				data-plot-element="wick"
 			/>
@@ -125,12 +69,13 @@
 				width={c.bodyWidth}
 				height={c.bodyHeight}
 				fill={c.fill}
+				fill-opacity={c.alpha}
 				data-plot-element="candle"
 				role="img"
 				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>
+				<title>{c.data[x ?? '']}: O={c.data[options.open ?? 'open']} H={c.data[options.high ?? 'high']} L={c.data[options.low ?? 'low']} C={c.data[options.close ?? 'close']}</title>
 			</rect>
 		{/each}
 	</g>

package/dist/geoms/Candlestick.svelte.d.ts

@@ -12,6 +12,8 @@ type Props = {
     y?: string;
     color?: string;
     fill?: string;
+    /** Fixed opacity 0–1; defaults to the per-geom preset (candlestick = 1). */
+    alpha?: number;
     stat?: string;
     options?: Options;
 };

package/dist/geoms/Heatmap.svelte

@@ -1,85 +1,39 @@
 <script lang="ts">
 	import { getContext, onMount, onDestroy } from 'svelte'
 	import type { PlotState } from '../PlotState.svelte.js'
+	import { GeomState } from './lib/GeomState.svelte.js'
+	import { buildHeatmapMarks } from './lib/marks/heatmap.js'
 
 	type Props = {
 		x?: string
 		y?: string
 		color?: string
 		fill?: string
+		/** Fixed cell opacity 0–1; defaults to the per-geom preset (heatmap = 1). */
+		alpha?: number
 		stat?: string
 		options?: { rounded?: number }
 	}
 
-	let {
-		x,
-		y,
-		color,
-		fill: fillProp,
-		stat = 'identity',
-		options = {}
-	}: Props = $props()
-
-	const colorChannel = $derived(fillProp ?? color)
+	let { x, y, color, fill, alpha, stat = 'identity', options = {} }: Props = $props()
 
+	const colorField = $derived(fill ?? color)
 	const plotState = getContext<PlotState>('plot-state')
-	let id = $state<string | null>(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 geom = new GeomState(plotState, () => ({
+		type: 'heatmap',
+		channels: { x, y, color: colorField },
+		stat,
+		options,
+		alpha,
+		build: buildHeatmapMarks
+	}))
+	onMount(geom.register)
+	onDestroy(geom.destroy)
+	$effect(geom.sync)
+
+	const cells = $derived(geom.marks)
 	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 {
-				const entry = categoricalColors?.get(colorVal)
-				if (entry) cellFill = entry.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}
@@ -91,13 +45,14 @@
 				width={Math.max(0, cell.width)}
 				height={Math.max(0, cell.height)}
 				fill={cell.fill}
+				fill-opacity={cell.alpha}
 				rx={rx}
 				data-plot-element="cell"
 				role="img"
 				onmouseenter={() => plotState.setHovered(cell.data)}
 				onmouseleave={() => plotState.clearHovered()}
 			>
-				<title>{cell.data[x ?? '']}, {cell.data[y ?? '']}: {colorChannel ? cell.data[colorChannel] : ''}</title>
+				<title>{cell.data[x ?? '']}, {cell.data[y ?? '']}: {colorField ? cell.data[colorField] : ''}</title>
 			</rect>
 		{/each}
 	</g>

package/dist/geoms/Heatmap.svelte.d.ts

@@ -3,6 +3,8 @@ type Props = {
     y?: string;
     color?: string;
     fill?: string;
+    /** Fixed cell opacity 0–1; defaults to the per-geom preset (heatmap = 1). */
+    alpha?: number;
     stat?: string;
     options?: {
         rounded?: number;