@rokkit/chart 1.3.7 → 1.3.9

package/dist/geoms/Area.svelte

@@ -1,73 +1,74 @@
 <script lang="ts">
 	import { getContext, onMount, onDestroy } from 'svelte'
 	import type { PlotState } from '../PlotState.svelte.js'
-	import { buildAreas, buildStackedAreas } from './lib/areas.js'
+	import { GeomState } from './lib/GeomState.svelte.js'
+	import { buildAreaMarks } from './lib/marks/area.js'
 	import { buildSelectDetail } from '../lib/select.js'
 
 	type Row = Record<string, unknown>
-
 	type Options = {
+		/** @deprecated use `position="stack"` — kept as an alias. */
 		stack?: boolean
 		curve?: 'linear' | 'smooth' | 'step'
-		opacity?: number
 	}
 
 	type Props = {
 		x?: string
 		y?: string
+		/** Border aesthetic (field); a border is drawn only when both fill and color are set. */
 		color?: string
+		/** Interior aesthetic (field); falls back to `color`. */
+		fill?: string
 		pattern?: string
+		/** Multi-series arrangement: 'stack' | 'fill' (100%) | 'identity' (overlap, default). */
+		position?: 'stack' | 'fill' | 'identity'
+		/** Fixed area opacity 0–1; defaults to the per-geom preset (area = 0.6). */
+		alpha?: number
 		stat?: string
 		options?: Options
 	}
 
-	let { x, y, color, pattern, stat = 'identity', options = {} }: Props = $props()
+	let { x, y, color, fill, pattern, position, alpha, stat = 'identity', options = {} }: Props =
+		$props()
+
+	// `options.stack: true` is the back-compat alias for position='stack'.
+	const resolvedPosition = $derived(position ?? (options?.stack ? 'stack' : 'identity'))
 
 	const plotState = getContext<PlotState>('plot-state')
-	let id = $state<string | null>(null)
+
+	const geom = new GeomState(plotState, () => ({
+		type: 'area',
+		channels: { x, y, color, fill, pattern },
+		stat,
+		options: { stack: options?.stack ?? false, position: resolvedPosition, curve: options?.curve },
+		alpha,
+		build: buildAreaMarks
+	}))
+	onMount(geom.register)
+	onDestroy(geom.destroy)
+	$effect(geom.sync)
+
+	const areas = $derived(geom.marks)
+	// Per-row tooltip hit-circles are rendered from the geom's rows + shared scales.
+	const rows = $derived(geom.data)
+	const xScale = $derived(plotState.xScale)
+	const yScale = $derived(plotState.yScale)
+
+	const seriesField = $derived(fill ?? color)
 
 	function selectPoint(d: Row, event: MouseEvent | KeyboardEvent) {
 		if (plotState.interactive)
 			plotState.handleSelect(
-				buildSelectDetail(d, plotState.data.indexOf(d), { x, y }, 'area', color ? d[color] : undefined, event)
+				buildSelectDetail(
+					d,
+					plotState.data.indexOf(d),
+					{ x, y },
+					'area',
+					seriesField ? d[seriesField] : undefined,
+					event
+				)
 			)
 	}
-
-	onMount(() => {
-		id = plotState.registerGeom({
-			type: 'area',
-			channels: { x, y, color, pattern },
-			stat,
-			options: { stack: options?.stack ?? false }
-		})
-	})
-	onDestroy(() => {
-		if (id) plotState.unregisterGeom(id)
-	})
-
-	$effect(() => {
-		if (id)
-			plotState.updateGeom(id, {
-				channels: { x, y, color, pattern },
-				stat,
-				options: { stack: options?.stack ?? false }
-			})
-	})
-
-	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 areas = $derived.by(() => {
-		if (!data?.length || !xScale || !yScale || !x || !y) return []
-		const channels = { x, y, color, pattern }
-		if (options.stack) {
-			return buildStackedAreas(data, channels, xScale, yScale, colors, options.curve, patterns)
-		}
-		return buildAreas(data, channels, xScale, yScale, colors, options.curve, patterns)
-	})
 </script>
 
 {#if areas.length > 0}
@@ -76,7 +77,7 @@
 			<path
 				d={seg.d}
 				fill={seg.fill}
-				fill-opacity={seg.patternId ? 1 : (options.opacity ?? plotState.chartPreset.opacity.area)}
+				fill-opacity={seg.patternId ? 1 : seg.alpha}
 				stroke={seg.stroke ?? 'none'}
 				data-plot-element="area"
 			/>
@@ -86,7 +87,7 @@
 		{/each}
 		<!-- Invisible hit circles for tooltip: one per data point -->
 		{#if x && y}
-			{#each data as d, i (`hover::${i}`)}
+			{#each rows as d, i (`hover::${i}`)}
 				{@const px = typeof xScale?.bandwidth === 'function' ? (xScale(d[x]) ?? 0) + xScale.bandwidth() / 2 : (xScale?.(d[x]) ?? 0)}
 				{@const py = yScale?.(d[y]) ?? 0}
 				<!-- svelte-ignore a11y_no_noninteractive_tabindex -->

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

@@ -1,13 +1,20 @@
 type Options = {
+    /** @deprecated use `position="stack"` — kept as an alias. */
     stack?: boolean;
     curve?: 'linear' | 'smooth' | 'step';
-    opacity?: number;
 };
 type Props = {
     x?: string;
     y?: string;
+    /** Border aesthetic (field); a border is drawn only when both fill and color are set. */
     color?: string;
+    /** Interior aesthetic (field); falls back to `color`. */
+    fill?: string;
     pattern?: string;
+    /** Multi-series arrangement: 'stack' | 'fill' (100%) | 'identity' (overlap, default). */
+    position?: 'stack' | 'fill' | 'identity';
+    /** Fixed area opacity 0–1; defaults to the per-geom preset (area = 0.6). */
+    alpha?: number;
     stat?: string;
     options?: Options;
 };

package/dist/geoms/Bar.svelte

@@ -2,7 +2,8 @@
 	import { getContext, onMount, onDestroy } from 'svelte'
 	import type { PlotState } from '../PlotState.svelte.js'
 	import type { createCrossFilter } from '../crossfilter/createCrossFilter.svelte.js'
-	import { buildGroupedBars, buildStackedBars, buildHorizontalBars } from './lib/bars.js'
+	import { GeomState } from './lib/GeomState.svelte.js'
+	import { buildBarMarks } from './lib/marks/bar.js'
 	import { keyboardNav } from '../lib/keyboard-nav.js'
 	import { buildSelectDetail } from '../lib/select.js'
 	import LabelPill from './LabelPill.svelte'
@@ -10,6 +11,7 @@
 	type Row = Record<string, unknown>
 	type CrossFilter = ReturnType<typeof createCrossFilter>
 	type Options = {
+		/** @deprecated use `position="stack"` — kept as an alias. */
 		stack?: boolean
 		orientation?: 'horizontal' | 'vertical'
 		labelInside?: boolean
@@ -19,9 +21,17 @@
 	type Props = {
 		x?: string
 		y?: string
+		/** Border/outline aesthetic (field). */
 		color?: string
+		/** Interior aesthetic (field); falls back to `color`. */
 		fill?: string
 		pattern?: string
+		/** Multi-series arrangement: 'stack' | 'dodge' (default) | 'fill' (100%) | 'identity' (overlap). */
+		position?: 'stack' | 'dodge' | 'fill' | 'identity'
+		/** Sub-series field for stack/dodge; defaults to `fill ?? color`. */
+		group?: string
+		/** Fixed bar opacity 0–1; defaults to the per-geom preset (bar = 1). */
+		alpha?: number
 		label?: boolean | string | ((data: Row) => unknown)
 		stat?: string
 		options?: Options
@@ -34,8 +44,11 @@
 		x,
 		y,
 		color,
-		fill: fillProp,
+		fill,
 		pattern,
+		position,
+		group,
+		alpha,
 		label = false,
 		stat = 'identity',
 		options = {},
@@ -44,8 +57,8 @@
 		keyboard = false
 	}: Props = $props()
 
-	// `fill` is accepted as an alias for `color` (consistent with Arc.svelte)
-	const colorChannel = $derived(fillProp ?? color)
+	// `options.stack: true` is the back-compat alias for position='stack'.
+	const resolvedPosition = $derived(position ?? (options?.stack ? 'stack' : 'dodge'))
 
 	function resolveLabel(data: Row, defaultField: string | undefined): string | null {
 		if (!label) return null
@@ -68,48 +81,22 @@
 
 	const plotState = getContext<PlotState>('plot-state')
 	const cf = getContext<CrossFilter | undefined>('crossfilter')
-	let id = $state<string | null>(null)
-
-	onMount(() => {
-		id = plotState.registerGeom({
-			type: 'bar',
-			channels: { x, y, color: colorChannel, pattern },
-			stat,
-			options: { stack: options?.stack ?? false }
-		})
-	})
-	onDestroy(() => {
-		if (id) plotState.unregisterGeom(id)
-	})
-
-	$effect(() => {
-		if (id)
-			plotState.updateGeom(id, {
-				channels: { x, y, color: colorChannel, pattern },
-				stat,
-				options: { stack: options?.stack ?? false }
-			})
-	})
 
-	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 geom = new GeomState(plotState, () => ({
+		type: 'bar',
+		channels: { x, y, color, fill, pattern, group },
+		stat,
+		options: { stack: options?.stack ?? false, position: resolvedPosition },
+		alpha,
+		build: buildBarMarks
+	}))
+	onMount(geom.register)
+	onDestroy(geom.destroy)
+	$effect(geom.sync)
+
+	const bars = $derived(geom.marks)
 	const effectiveOrientation = $derived(options.orientation ?? plotState.orientation)
-	const innerHeight = $derived(plotState.innerHeight)
-
-	const bars = $derived.by(() => {
-		if (!data?.length || !xScale || !yScale) return []
-		const channels = { x, y, color: colorChannel, pattern }
-		if (effectiveOrientation === 'horizontal') {
-			return buildHorizontalBars(data, channels, xScale, yScale, colors, innerHeight)
-		}
-		if (options.stack) {
-			return buildStackedBars(data, channels, xScale, yScale, colors, innerHeight, patterns)
-		}
-		return buildGroupedBars(data, channels, xScale, yScale, colors, innerHeight, patterns)
-	})
+	const seriesField = $derived(fill ?? color)
 
 	let dimmedByKey = $state<Record<string, boolean>>({})
 
@@ -144,7 +131,7 @@
 					plotState.data.indexOf(bar.data),
 					{ x, y },
 					'bar',
-					colorChannel ? bar.data[colorChannel] : undefined,
+					seriesField ? bar.data[seriesField] : undefined,
 					event
 				)
 			)
@@ -177,6 +164,7 @@
 				width={Math.max(0, bar.width)}
 				height={Math.max(0, bar.height)}
 				fill={bar.fill}
+				fill-opacity={bar.alpha}
 				stroke={bar.stroke ?? 'none'}
 				stroke-width={bar.stroke ? 0.5 : 0}
 				data-plot-element="bar"

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

@@ -1,5 +1,6 @@
 type Row = Record<string, unknown>;
 type Options = {
+    /** @deprecated use `position="stack"` — kept as an alias. */
     stack?: boolean;
     orientation?: 'horizontal' | 'vertical';
     labelInside?: boolean;
@@ -8,9 +9,17 @@ type Options = {
 type Props = {
     x?: string;
     y?: string;
+    /** Border/outline aesthetic (field). */
     color?: string;
+    /** Interior aesthetic (field); falls back to `color`. */
     fill?: string;
     pattern?: string;
+    /** Multi-series arrangement: 'stack' | 'dodge' (default) | 'fill' (100%) | 'identity' (overlap). */
+    position?: 'stack' | 'dodge' | 'fill' | 'identity';
+    /** Sub-series field for stack/dodge; defaults to `fill ?? color`. */
+    group?: string;
+    /** Fixed bar opacity 0–1; defaults to the per-geom preset (bar = 1). */
+    alpha?: number;
     label?: boolean | string | ((data: Row) => unknown);
     stat?: string;
     options?: Options;

package/dist/geoms/Box.svelte

@@ -1,122 +1,164 @@
 <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
-		options?: { opacity?: number }
+		/** Offset the box to one half of the band (raincloud/split plots). Default 'center'. */
+		side?: 'left' | 'right' | 'center'
+		/** Box thickness as a fraction of the (sub-)band — use a small value (e.g. 0.16) for a
+		 *  thin raincloud box. Defaults to the full box width. */
+		width?: number
+		/** Data field driving a texture fill (from the shared pattern set) instead of a solid fill. */
+		pattern?: string
+		/** Fixed box opacity 0–1; defaults to the per-geom preset (box = 0.5). */
+		alpha?: number
 	}
 
-	let { x, y, fill, stat = 'boxplot', 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)
 
-	// fill ?? x drives the colors map for both box interior and whisker strokes
-	const fillChannel = $derived(fill ?? x)
+	// 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.
+	const xf = $derived(x ?? plotState.channels?.x)
+	const yf = $derived(y ?? plotState.channels?.y)
+	// 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, y, color: fillChannel },
-			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, 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)
-	})
+	const boxes = $derived(geom.marks)
 </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}
+			<!-- 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={x0}
-				y={box.q3}
-				width={box.width}
-				height={Math.max(0, box.q1 - box.q3)}
+				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-opacity={box.alpha}
 				stroke={box.stroke}
 				stroke-width="1"
 				data-plot-element="box-body"
-				role="presentation"
+				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="url(#{box.patternId})"
+					pointer-events="none"
+				/>
+			{/if}
 			<!-- Median line: darker stroke shade -->
 			<line
-				x1={x0}
-				y1={box.median}
-				x2={x0 + box.width}
-				y2={box.median}
+				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={xMid}
-				y1={box.q1}
-				x2={xMid}
-				y2={box.iqr_min}
+				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={xMid}
-				y1={box.q3}
-				x2={xMid}
-				y2={box.iqr_max}
+				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={xCap0}
-				y1={box.iqr_min}
-				x2={xCap1}
-				y2={box.iqr_min}
+				x1={capLoA.x}
+				y1={capLoA.y}
+				x2={capLoB.x}
+				y2={capLoB.y}
 				stroke={box.stroke}
 				stroke-width="1"
 			/>
 			<!-- Upper whisker cap -->
 			<line
-				x1={xCap0}
-				y1={box.iqr_max}
-				x2={xCap1}
-				y2={box.iqr_max}
+				x1={capHiA.x}
+				y1={capHiA.y}
+				x2={capHiB.x}
+				y2={capHiB.y}
 				stroke={box.stroke}
 				stroke-width="1"
 			/>
-			<!-- Outlier rendering deferred: buildBoxes does not compute outliers yet -->
+			<!-- 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}
 	</g>
 {/if}

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

@@ -1,11 +1,20 @@
 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;
-    options?: {
-        opacity?: number;
-    };
+    /** Offset the box to one half of the band (raincloud/split plots). Default 'center'. */
+    side?: 'left' | 'right' | 'center';
+    /** Box thickness as a fraction of the (sub-)band — use a small value (e.g. 0.16) for a
+     *  thin raincloud box. Defaults to the full box width. */
+    width?: number;
+    /** Data field driving a texture fill (from the shared pattern set) instead of a solid fill. */
+    pattern?: string;
+    /** 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>;