@rokkit/chart 1.3.7 → 1.3.9

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,86 +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)
 
-			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
-			}
-		})
-	})
+	const candles = $derived(geom.marks)
 </script>
 
 {#if candles.length > 0}
@@ -104,11 +53,12 @@
 		{#each candles as c (c.key)}
 			<!-- Wick (high to low) -->
 			<line
-				x1={c.wickX}
-				y1={c.wickTop}
-				x2={c.wickX}
-				y2={c.wickBottom}
+				x1={c.wickX1}
+				y1={c.wickY1}
+				x2={c.wickX2}
+				y2={c.wickY2}
 				stroke={c.fill}
+				stroke-opacity={c.alpha}
 				stroke-width={wickWidth}
 				data-plot-element="wick"
 			/>
@@ -119,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;

package/dist/geoms/Hexbin.svelte

@@ -1,120 +1,39 @@
 <script lang="ts">
 	import { getContext, onMount, onDestroy } from 'svelte'
 	import type { PlotState } from '../PlotState.svelte.js'
-
-	type Row = Record<string, unknown>
-	type Scale = (value: unknown) => number | undefined
-	type Bin = { cx: number; cy: number; count: number; points: Row[] }
+	import { GeomState } from './lib/GeomState.svelte.js'
+	import { buildHexbinMarks, hexPath } from './lib/marks/hexbin.js'
 
 	type Props = {
 		x?: string
 		y?: string
 		color?: string
 		fill?: string
+		/** Fixed hex opacity 0–1; defaults to the per-geom preset (hexbin = 1). */
+		alpha?: number
 		stat?: string
 		options?: { radius?: number }
 	}
 
-	let {
-		x,
-		y,
-		color = undefined,
-		fill: fillProp = undefined,
-		stat = 'identity',
-		options = {}
-	}: Props = $props()
+	let { x, y, color, fill, alpha, stat = 'identity', options = {} }: Props = $props()
 
+	const colorField = $derived(fill ?? color)
 	const radius = $derived(options.radius ?? 20)
-
 	const plotState = getContext<PlotState>('plot-state')
-	let id = $state<string | null>(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
-	// eslint-disable-next-line max-params, complexity
-	function hexBin(
-		rows: Row[],
-		xField: string | undefined,
-		yField: string | undefined,
-		xScale: Scale,
-		yScale: Scale,
-		r: number
-	): Bin[] {
-		const dx = r * 2 * Math.sin(Math.PI / 3) // horizontal spacing
-		const dy = r * 1.5                        // vertical spacing
-		// eslint-disable-next-line svelte/prefer-svelte-reactivity
-		const bins = new Map<string, Bin>()
-
-		for (const d of rows) {
-			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}`
-
-			let bin = bins.get(key)
-			if (!bin) {
-				bin = { cx, cy, count: 0, points: [] }
-				bins.set(key, bin)
-			}
-			bin.count++
-			bin.points.push(d)
-		}
-		return [...bins.values()]
-	}
-
-	// Build hexagon path for a given radius
-	function hexPath(r: number) {
-		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 geom = new GeomState(plotState, () => ({
+		type: 'hexbin',
+		channels: { x, y, color: colorField },
+		stat,
+		options,
+		alpha,
+		build: buildHexbinMarks
+	}))
+	onMount(geom.register)
+	onDestroy(geom.destroy)
+	$effect(geom.sync)
+
+	const hexes = $derived(geom.marks)
 	const hex = $derived(hexPath(radius))
 </script>
 
@@ -125,6 +44,7 @@
 				transform="translate({h.cx},{h.cy})"
 				d={hex}
 				fill={h.fill}
+				fill-opacity={h.alpha}
 				stroke="white"
 				stroke-width="0.5"
 				data-plot-element="hex"

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

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

package/dist/geoms/Jitter.svelte

@@ -0,0 +1,67 @@
+<script lang="ts">
+	import { getContext, onMount, onDestroy } from 'svelte'
+	import type { PlotState } from '../PlotState.svelte.js'
+	import { GeomState } from './lib/GeomState.svelte.js'
+	import { buildJitterMarks } from './lib/marks/jitter.js'
+
+	type Props = {
+		x?: string
+		y?: string
+		/** Point interior aesthetic (field); defaults to `x`. */
+		fill?: string
+		/** Outline aesthetic (field); overrides the point stroke when set. */
+		color?: string
+		r?: number
+		method?: 'jitter' | 'swarm'
+		/** Confine points to one half of the band (raincloud/split plots). Default 'center'. */
+		side?: 'left' | 'right' | 'center'
+		/** Fixed point opacity 0–1; defaults to the per-geom preset (jitter = 0.8). */
+		alpha?: number
+	}
+
+	let { x, y, fill, color, r = 2, method = 'jitter', side = 'center', alpha }: Props = $props()
+
+	const plotState = getContext<PlotState>('plot-state')
+
+	// Fall back to the root Plot channels when the geom omits x/y (composes under
+	// <Plot.Root x y> without silently NaN-ing).
+	const xf = $derived(x ?? plotState.channels?.x)
+	const yf = $derived(y ?? plotState.channels?.y)
+	// fill ?? effective-x drives the color lookup
+	const fillChannel = $derived(fill ?? xf)
+
+	const geom = new GeomState(plotState, () => ({
+		type: 'jitter',
+		channels: { x: xf, y: yf, fill: fillChannel, color },
+		stat: 'identity',
+		options: { method, r, side },
+		alpha,
+		build: buildJitterMarks
+	}))
+	onMount(geom.register)
+	onDestroy(geom.destroy)
+	$effect(geom.sync)
+
+	const points = $derived(geom.marks)
+</script>
+
+{#if points.length > 0}
+	<g data-plot-geom="jitter">
+		{#each points as pt, i (`${String(pt.cx)}::${i}`)}
+			<circle
+				cx={pt.cx}
+				cy={pt.cy}
+				{r}
+				fill={pt.fill}
+				fill-opacity={pt.alpha}
+				stroke={pt.stroke}
+				stroke-width="0.5"
+				data-plot-element="jitter-point"
+				role="graphics-symbol"
+				aria-label={`(${String(pt.data[xf ?? ''])}, ${String(pt.data[yf ?? ''])})`}
+				onmouseenter={() => plotState.setHovered(pt.data)}
+				onmouseleave={() => plotState.clearHovered()}
+			/>
+		{/each}
+	</g>
+{/if}

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

@@ -0,0 +1,17 @@
+type Props = {
+    x?: string;
+    y?: string;
+    /** Point interior aesthetic (field); defaults to `x`. */
+    fill?: string;
+    /** Outline aesthetic (field); overrides the point stroke when set. */
+    color?: string;
+    r?: number;
+    method?: 'jitter' | 'swarm';
+    /** Confine points to one half of the band (raincloud/split plots). Default 'center'. */
+    side?: 'left' | 'right' | 'center';
+    /** Fixed point opacity 0–1; defaults to the per-geom preset (jitter = 0.8). */
+    alpha?: number;
+};
+declare const Jitter: import("svelte").Component<Props, {}, "">;
+type Jitter = ReturnType<typeof Jitter>;
+export default Jitter;

package/dist/geoms/Line.svelte

@@ -1,7 +1,8 @@
 <script lang="ts">
 	import { getContext, onMount, onDestroy } from 'svelte'
 	import type { PlotState } from '../PlotState.svelte.js'
-	import { buildLines } from '../lib/brewing/marks/lines.js'
+	import { GeomState } from './lib/GeomState.svelte.js'
+	import { buildLineMarks } from './lib/marks/line.js'
 	import { buildSymbolPath } from '../lib/brewing/marks/points.js'
 	import { keyboardNav } from '../lib/keyboard-nav.js'
 	import { buildSelectDetail } from '../lib/select.js'
@@ -18,8 +19,13 @@
 	type Props = {
 		x?: string
 		y?: string
+		/** Line/stroke aesthetic (field). */
 		color?: string
+		/** Accepted as an alias for `color` (a line has no interior). */
+		fill?: string
 		symbol?: string
+		/** Fixed line opacity 0–1; defaults to the per-geom preset (line = 1). */
+		alpha?: number
 		label?: boolean | string | ((data: Row) => unknown)
 		stat?: string
 		options?: Options
@@ -31,7 +37,9 @@
 		x,
 		y,
 		color,
+		fill,
 		symbol: symbolField,
+		alpha,
 		label = false,
 		stat = 'identity',
 		options = {},
@@ -47,7 +55,23 @@
 	}
 
 	const plotState = getContext<PlotState>('plot-state')
-	let id = $state<string | null>(null)
+
+	const geom = new GeomState(plotState, () => ({
+		type: 'line',
+		channels: { x, y, color, fill, symbol: symbolField },
+		stat,
+		options,
+		alpha,
+		build: buildLineMarks
+	}))
+	onMount(geom.register)
+	onDestroy(geom.destroy)
+	$effect(geom.sync)
+
+	const lines = $derived(geom.marks)
+	// Markers are a rendering detail resolved from the shared symbol scale.
+	const symbolMap = $derived(plotState.symbols)
+	const markerRadius = $derived(options.markerRadius ?? 4)
 
 	function selectPoint(
 		pt: { data: Row },
@@ -60,35 +84,6 @@
 				buildSelectDetail(pt.data, plotState.data.indexOf(pt.data), { x, y }, 'line', seg?.key, event)
 			)
 	}
-
-	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}
@@ -101,6 +96,7 @@
 				stroke-width={options.strokeWidth ?? 2}
 				stroke-linejoin="round"
 				stroke-linecap="round"
+				stroke-opacity={seg.alpha}
 				data-plot-element="line"
 			/>
 			{#if symbolField && symbolMap}

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

@@ -11,8 +11,13 @@ type Options = {
 type Props = {
     x?: string;
     y?: string;
+    /** Line/stroke aesthetic (field). */
     color?: string;
+    /** Accepted as an alias for `color` (a line has no interior). */
+    fill?: string;
     symbol?: string;
+    /** Fixed line opacity 0–1; defaults to the per-geom preset (line = 1). */
+    alpha?: number;
     label?: boolean | string | ((data: Row) => unknown);
     stat?: string;
     options?: Options;