@rokkit/chart 1.3.8 → 1.3.10

package/dist/charts/ViolinPlot.svelte.d.ts

@@ -4,6 +4,7 @@ type Props = {
     x?: string;
     y?: string;
     fill?: string;
+    alpha?: number;
     width?: number;
     height?: number;
     mode?: 'light' | 'dark';

package/dist/geoms/Arc.svelte

@@ -1,19 +1,20 @@
 <script lang="ts">
 	import { getContext, onMount, onDestroy } from 'svelte'
 	import type { PlotState } from '../PlotState.svelte.js'
-	import { buildArcs } from '../lib/brewing/marks/arcs.js'
+	import { GeomState } from './lib/GeomState.svelte.js'
+	import { buildArcMarks } from './lib/marks/arc.js'
 
 	type Row = Record<string, unknown>
 
-	/**
-	 * `fill` is the primary prop name; `color` is accepted as an alias for
-	 * spec-driven usage (Plot.svelte passes `color` to all geoms generically).
-	 */
 	type Props = {
 		theta?: string
+		/** Slice interior aesthetic (field). */
 		fill?: string
+		/** Accepted as an alias for `fill`. */
 		color?: string
 		pattern?: string
+		/** Fixed slice opacity 0–1; defaults to the per-geom preset (arc = 1). */
+		alpha?: number
 		stat?: string
 		labelFn?: (data: Row) => string
 		options?: { innerRadius?: number }
@@ -25,58 +26,30 @@
 		fill,
 		color,
 		pattern,
+		alpha,
 		labelFn = undefined,
 		stat = 'identity',
 		options = {},
 		onselect = undefined
 	}: Props = $props()
 
-	const fillField = $derived(fill ?? color)
-
 	const plotState = getContext<PlotState>('plot-state')
-	let id = $state<string | null>(null)
-
-	onMount(() => {
-		id = plotState.registerGeom({
-			type: 'arc',
-			channels: { color: fillField, y: theta, pattern },
-			stat,
-			options
-		})
-	})
-	onDestroy(() => {
-		if (id) plotState.unregisterGeom(id)
-	})
 
-	$effect(() => {
-		if (id) plotState.updateGeom(id, { channels: { color: fillField, y: theta, pattern }, stat })
-	})
+	const geom = new GeomState(plotState, () => ({
+		type: 'arc',
+		channels: { y: theta, color, fill, pattern },
+		stat,
+		options: { innerRadius: options.innerRadius ?? 0 },
+		alpha,
+		build: buildArcMarks
+	}))
+	onMount(geom.register)
+	onDestroy(geom.destroy)
+	$effect(geom.sync)
 
-	const data = $derived(id ? plotState.geomData(id) : [])
-	const colors = $derived(plotState.colors)
-	const patterns = $derived(plotState.patterns)
+	const arcs = $derived(geom.marks)
 	const w = $derived(plotState.innerWidth)
 	const h = $derived(plotState.innerHeight)
-
-	const arcs = $derived.by(() => {
-		if (!data?.length) return []
-		// Guard: skip until data catches up after a fill-field change.
-		// When fillField changes, the $effect updates the geom asynchronously, but
-		// this derived runs first with stale data whose rows don't have the new
-		// field — causing all keys to be undefined (duplicate key error).
-		if (fillField && !(fillField in data[0])) return []
-		// innerRadius passed through raw — buildArcs interprets it (a fraction of the
-		// radius when <= 1, absolute pixels when > 1) and clamps it below the outer radius.
-		return buildArcs(
-			data,
-			{ color: fillField, y: theta, pattern },
-			colors,
-			w,
-			h,
-			{ innerRadius: options.innerRadius ?? 0 },
-			patterns
-		)
-	})
 </script>
 
 {#if arcs.length > 0}
@@ -86,6 +59,7 @@
 			<path
 				d={arc.d}
 				fill={arc.fill}
+				fill-opacity={arc.alpha}
 				stroke={arc.stroke}
 				stroke-width="1"
 				role={onselect ? 'button' : 'presentation'}
@@ -116,15 +90,7 @@
 						pointer-events="none"
 						data-plot-element="arc-label"
 					>
-						<rect
-							x={-lw / 2}
-							y="-9"
-							width={lw}
-							height="18"
-							rx="4"
-							fill="white"
-							fill-opacity="0.82"
-						/>
+						<rect x={-lw / 2} y="-9" width={lw} height="18" rx="4" fill="white" fill-opacity="0.82" />
 						<text
 							text-anchor="middle"
 							dominant-baseline="central"

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

@@ -1,13 +1,13 @@
 type Row = Record<string, unknown>;
-/**
- * `fill` is the primary prop name; `color` is accepted as an alias for
- * spec-driven usage (Plot.svelte passes `color` to all geoms generically).
- */
 type Props = {
     theta?: string;
+    /** Slice interior aesthetic (field). */
     fill?: string;
+    /** Accepted as an alias for `fill`. */
     color?: string;
     pattern?: string;
+    /** Fixed slice opacity 0–1; defaults to the per-geom preset (arc = 1). */
+    alpha?: number;
     stat?: string;
     labelFn?: (data: Row) => string;
     options?: {

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, plotState.place.bind(plotState))
-		}
-		return buildAreas(data, channels, xScale, yScale, colors, options.curve, patterns, plotState.place.bind(plotState))
-	})
 </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 { buildBars, buildStackedBars } 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,59 +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 }
-		// One builder, one path: express bars in (category, value) space and map to screen via
-		// place() (identity vertical, swap when flipped). `continuousCategory` keeps a linear
-		// category axis (the bar-chart race's tweened rank) so it positions/tweens smoothly.
-		const place = plotState.place.bind(plotState)
-		if (options.stack) {
-			return buildStackedBars(data, channels, xScale, yScale, colors, innerHeight, patterns, place)
-		}
-		return buildBars(
-			data,
-			channels,
-			xScale,
-			yScale,
-			colors,
-			innerHeight,
-			patterns,
-			place,
-			plotState.continuousCategory
-		)
-	})
+	const seriesField = $derived(fill ?? color)
 
 	let dimmedByKey = $state<Record<string, boolean>>({})
 
@@ -155,7 +131,7 @@
 					plotState.data.indexOf(bar.data),
 					{ x, y },
 					'bar',
-					colorChannel ? bar.data[colorChannel] : undefined,
+					seriesField ? bar.data[seriesField] : undefined,
 					event
 				)
 			)
@@ -188,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;