@rokkit/chart 1.3.7 → 1.3.9

package/dist/geoms/Point.svelte

@@ -1,8 +1,8 @@
 <script lang="ts">
 	import { getContext, onMount, onDestroy } from 'svelte'
-	import { scaleSqrt } from 'd3-scale'
 	import type { PlotState } from '../PlotState.svelte.js'
-	import { buildPoints } from '../lib/brewing/marks/points.js'
+	import { GeomState } from './lib/GeomState.svelte.js'
+	import { buildPointMarks } from './lib/marks/point.js'
 	import { keyboardNav } from '../lib/keyboard-nav.js'
 	import { buildSelectDetail } from '../lib/select.js'
 	import LabelPill from './LabelPill.svelte'
@@ -12,7 +12,6 @@
 		minRadius?: number
 		maxRadius?: number
 		radius?: number
-		opacity?: number
 		jitter?: { width?: number; height?: number } | null
 		labelOffset?: { x?: number; y?: number }
 	}
@@ -20,9 +19,14 @@
 	type Props = {
 		x?: string
 		y?: string
+		/** Outline / point-stroke aesthetic (field). */
 		color?: string
+		/** Interior aesthetic (field); falls back to `color` when omitted. */
+		fill?: string
 		size?: string
 		symbol?: string
+		/** Fixed mark opacity 0–1; defaults to the per-geom preset (point = 0.8). */
+		alpha?: number
 		label?: boolean | string | ((data: Row) => unknown)
 		stat?: string
 		options?: Options
@@ -34,8 +38,10 @@
 		x,
 		y,
 		color,
+		fill,
 		size,
 		symbol: symbolField,
+		alpha,
 		label = false,
 		stat = 'identity',
 		options = {},
@@ -51,7 +57,24 @@
 	}
 
 	const plotState = getContext<PlotState>('plot-state')
-	let id = $state<string | null>(null)
+
+	// All plumbing (register/data/scales/colors) + mark building (geometry + fill/color/alpha)
+	// lives in GeomState + buildPointMarks. This component only renders + handles interactivity.
+	const geom = new GeomState(plotState, () => ({
+		type: 'point',
+		channels: { x, y, color, fill, size, symbol: symbolField },
+		stat,
+		options,
+		alpha,
+		build: buildPointMarks
+	}))
+	onMount(geom.register)
+	onDestroy(geom.destroy)
+	$effect(geom.sync)
+
+	const points = $derived(geom.marks)
+
+	const seriesField = $derived(fill ?? color)
 
 	function selectPoint(pt: { data: Row }, event: MouseEvent | KeyboardEvent) {
 		onselect?.(pt.data)
@@ -62,69 +85,17 @@
 					plotState.data.indexOf(pt.data),
 					{ x, y },
 					'point',
-					color ? pt.data[color] : undefined,
+					seriesField ? pt.data[seriesField] : undefined,
 					event
 				)
 			)
 	}
-
-	onMount(() => {
-		id = plotState.registerGeom({
-			type: 'point',
-			channels: { x, y, color, size, symbol: symbolField },
-			stat,
-			options
-		})
-	})
-	onDestroy(() => {
-		if (id) plotState.unregisterGeom(id)
-	})
-
-	$effect(() => {
-		if (id) plotState.updateGeom(id, { channels: { x, y, color, size, 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)
-
-	function buildSizeScale() {
-		if (!size || !data?.length) return null
-		const vals = data.map((d) => Number(d[size])).filter((v) => !isNaN(v))
-		if (!vals.length) return null
-		const minVal = Math.min(...vals)
-		const maxVal = Math.max(...vals)
-		const minRadius = options.minRadius ?? 3
-		const maxRadius = options.maxRadius ?? 20
-		return scaleSqrt().domain([minVal, maxVal]).range([minRadius, maxRadius])
-	}
-
-	const sizeScale = $derived.by(() => buildSizeScale())
-
-	const defaultRadius = $derived(options.radius ?? 4)
-
-	const points = $derived.by(() => {
-		if (!data?.length || !xScale || !yScale) return []
-		return buildPoints(
-			data,
-			{ x, y, color, size, symbol: symbolField },
-			xScale,
-			yScale,
-			colors,
-			sizeScale,
-			symbolMap,
-			defaultRadius,
-			options?.jitter ?? null
-		)
-	})
 </script>
 
 {#if points.length > 0}
 	<g data-plot-geom="point">
 		<!-- svelte-ignore a11y_no_noninteractive_tabindex -->
-		{#each points as pt, i (`${i}::${pt.data[x ?? '']}::${pt.data[y ?? '']}`)}
+		{#each points as pt (pt.key)}
 			{#if pt.symbolPath}
 				<path
 					transform="translate({pt.cx},{pt.cy})"
@@ -132,7 +103,7 @@
 					fill={pt.fill}
 					stroke={pt.stroke}
 					stroke-width="1"
-					fill-opacity={options.opacity ?? plotState.chartPreset.opacity.point}
+					fill-opacity={pt.alpha}
 					data-plot-element="point"
 					role={onselect || keyboard || plotState.interactive ? 'button' : 'graphics-symbol'}
 					tabindex={onselect || keyboard || plotState.interactive ? 0 : undefined}
@@ -154,7 +125,7 @@
 					fill={pt.fill}
 					stroke={pt.stroke}
 					stroke-width="1"
-					fill-opacity={options.opacity ?? plotState.chartPreset.opacity.point}
+					fill-opacity={pt.alpha}
 					data-plot-element="point"
 					role={onselect || keyboard || plotState.interactive ? 'button' : 'graphics-symbol'}
 					tabindex={onselect || keyboard || plotState.interactive ? 0 : undefined}

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

@@ -3,7 +3,6 @@ type Options = {
     minRadius?: number;
     maxRadius?: number;
     radius?: number;
-    opacity?: number;
     jitter?: {
         width?: number;
         height?: number;
@@ -16,9 +15,14 @@ type Options = {
 type Props = {
     x?: string;
     y?: string;
+    /** Outline / point-stroke aesthetic (field). */
     color?: string;
+    /** Interior aesthetic (field); falls back to `color` when omitted. */
+    fill?: string;
     size?: string;
     symbol?: string;
+    /** Fixed mark opacity 0–1; defaults to the per-geom preset (point = 0.8). */
+    alpha?: number;
     label?: boolean | string | ((data: Row) => unknown);
     stat?: string;
     options?: Options;

package/dist/geoms/Ribbon.svelte

@@ -1,8 +1,8 @@
 <script lang="ts">
 	import { getContext, onMount, onDestroy } from 'svelte'
 	import type { PlotState } from '../PlotState.svelte.js'
-
-	type Node = { name: string; y: number; height: number }
+	import { GeomState } from './lib/GeomState.svelte.js'
+	import { buildRibbonMarks } from './lib/marks/ribbon.js'
 
 	type Options = {
 		source?: string
@@ -15,141 +15,47 @@
 		y?: string
 		color?: string
 		fill?: string
+		/** Fixed ribbon opacity 0–1; defaults to the per-geom preset (ribbon = 0.5). */
+		alpha?: number
 		stat?: string
 		options?: Options
 	}
 
-	let {
-		x = undefined,
-		y = undefined,
-		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 sourceField = $derived(options.source ?? 'source')
 	const targetField = $derived(options.target ?? 'target')
 	const valueField = $derived(options.value ?? 'value')
-	const colorChannel = $derived(fillProp ?? color)
-
 	const plotState = getContext<PlotState>('plot-state')
-	let id = $state<string | null>(null)
-
-	onMount(() => {
-		id = plotState.registerGeom({
-			type: 'ribbon',
-			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 colors = $derived(plotState.colors)
-	const innerHeight = $derived(plotState.innerHeight)
-	const innerWidth = $derived(plotState.innerWidth)
-
-	// Compute Sankey-style layout
-	// eslint-disable-next-line max-lines-per-function, complexity
-	const ribbons = $derived.by(() => {
-		if (!data?.length) return { links: [], sourceNodes: [], targetNodes: [] }
-
-		// Aggregate flows
-		const flows = data.map((d) => ({
-			source: String(d[sourceField]),
-			target: String(d[targetField]),
-			value: Number(d[valueField]) || 0,
-			data: d
-		}))
-
-		// Compute node positions
-		// eslint-disable-next-line svelte/prefer-svelte-reactivity
-		const sourceMap = new Map<string, number>()
-		// eslint-disable-next-line svelte/prefer-svelte-reactivity
-		const targetMap = new Map<string, number>()
-		for (const f of flows) {
-			sourceMap.set(f.source, (sourceMap.get(f.source) ?? 0) + f.value)
-			targetMap.set(f.target, (targetMap.get(f.target) ?? 0) + f.value)
-		}
-
-		const totalSource = Math.max(1, [...sourceMap.values()].reduce((s, v) => s + v, 0))
-		const totalTarget = Math.max(1, [...targetMap.values()].reduce((s, v) => s + v, 0))
-		const padding = 4
-		const availHeight = innerHeight - padding * (Math.max(sourceMap.size, targetMap.size) - 1)
-
-		// Position source nodes on left
-		let sourceY = 0
-		const sourceNodes: Node[] = []
-		for (const [name, value] of sourceMap) {
-			const h = (value / totalSource) * availHeight
-			sourceNodes.push({ name, y: sourceY, height: h })
-			sourceY += h + padding
-		}
-
-		// Position target nodes on right
-		let targetY = 0
-		const targetNodes: Node[] = []
-		for (const [name, value] of targetMap) {
-			const h = (value / totalTarget) * availHeight
-			targetNodes.push({ name, y: targetY, height: h })
-			targetY += h + padding
-		}
-
-		// Build ribbon paths
-		// eslint-disable-next-line svelte/prefer-svelte-reactivity
-		const sourceOffsets = new Map(sourceNodes.map((n) => [n.name, n.y]))
-		// eslint-disable-next-line svelte/prefer-svelte-reactivity
-		const targetOffsets = new Map(targetNodes.map((n) => [n.name, n.y]))
-		const x0 = 0
-		const x1 = innerWidth
-
-		// eslint-disable-next-line complexity
-		const links = flows.map((f, i) => {
-			const sy0 = sourceOffsets.get(f.source) ?? 0
-			const ty0 = targetOffsets.get(f.target) ?? 0
-			const sourceTotal = sourceMap.get(f.source) ?? 1
-			const targetTotal = targetMap.get(f.target) ?? 1
-			const sh = (f.value / sourceTotal) * (sourceNodes.find((n) => n.name === f.source)?.height ?? 0)
-			const th = (f.value / targetTotal) * (targetNodes.find((n) => n.name === f.target)?.height ?? 0)
-
-			const path = `M${x0},${sy0} C${innerWidth * 0.4},${sy0} ${innerWidth * 0.6},${ty0} ${x1},${ty0} L${x1},${ty0 + th} C${innerWidth * 0.6},${ty0 + th} ${innerWidth * 0.4},${sy0 + sh} ${x0},${sy0 + sh} Z`
-
-			// Update offsets for stacking
-			sourceOffsets.set(f.source, sy0 + sh)
-			targetOffsets.set(f.target, ty0 + th)
-
-			const fillColor = colors?.get(f.source)?.fill ?? colors?.get(f.target)?.fill ?? '#888'
-
-			return {
-				key: `ribbon-${i}`,
-				d: path,
-				fill: fillColor,
-				data: f.data
-			}
-		})
 
-		return { links, sourceNodes, targetNodes }
-	})
+	const geom = new GeomState(plotState, () => ({
+		type: 'ribbon',
+		channels: { x, y, color: colorField },
+		stat,
+		options,
+		alpha,
+		build: buildRibbonMarks
+	}))
+	onMount(geom.register)
+	onDestroy(geom.destroy)
+	$effect(geom.sync)
+
+	// GeomState returns [] for empty data; buildRibbonMarks otherwise returns
+	// { links, sourceNodes, targetNodes } — normalize each to an array.
+	const marks = $derived(geom.marks)
+	const links = $derived(marks?.links ?? [])
+	const sourceNodes = $derived(marks?.sourceNodes ?? [])
+	const targetNodes = $derived(marks?.targetNodes ?? [])
 </script>
 
-{#if ribbons.links.length > 0}
+{#if links.length > 0}
 	<g data-plot-geom="ribbon">
-		{#each ribbons.links as link (link.key)}
+		{#each links as link (link.key)}
 			<path
 				d={link.d}
 				fill={link.fill}
-				opacity="0.5"
+				opacity={link.alpha}
 				data-plot-element="ribbon"
 				role="img"
 				onmouseenter={() => plotState.setHovered(link.data)}
@@ -159,7 +65,7 @@
 			</path>
 		{/each}
 		<!-- Source node labels -->
-		{#each ribbons.sourceNodes as node (node.name)}
+		{#each sourceNodes as node (node.name)}
 			<text
 				x="-4"
 				y={node.y + node.height / 2}
@@ -171,9 +77,9 @@
 			>{node.name}</text>
 		{/each}
 		<!-- Target node labels -->
-		{#each ribbons.targetNodes as node (node.name)}
+		{#each targetNodes as node (node.name)}
 			<text
-				x={innerWidth + 4}
+				x={plotState.innerWidth + 4}
 				y={node.y + node.height / 2}
 				text-anchor="start"
 				dominant-baseline="middle"

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

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

package/dist/geoms/Rule.svelte

@@ -0,0 +1,117 @@
+<script lang="ts">
+	import { getContext } from 'svelte'
+	import type { PlotState } from '../PlotState.svelte.js'
+
+	type RuleValue = number | string
+	type Props = {
+		/** Vertical reference line(s) at these x-axis value(s) (a value, or a band category). */
+		x?: RuleValue | RuleValue[]
+		/** Horizontal reference line(s) at these y-axis value(s). */
+		y?: RuleValue | RuleValue[]
+		/** Line color (aligns with the other geoms' `color` aesthetic). */
+		color?: string
+		/** @deprecated use `color` — kept as an alias. */
+		stroke?: string
+		/** SVG stroke-dasharray (default dashed). Pass '' for a solid line. */
+		dash?: string
+		strokeWidth?: number
+		/** Optional label drawn at the line's end. String, or a fn of the value. */
+		label?: string | ((value: RuleValue) => string)
+	}
+
+	let {
+		x,
+		y,
+		color = undefined,
+		stroke = undefined,
+		dash = '4 4',
+		strokeWidth = 1,
+		label = undefined
+	}: Props = $props()
+
+	const plotState = getContext<PlotState>('plot-state')
+	const xScale = $derived(plotState.xScale)
+	const yScale = $derived(plotState.yScale)
+
+	const toArray = (v: RuleValue | RuleValue[] | undefined): RuleValue[] =>
+		v === undefined ? [] : Array.isArray(v) ? v : [v]
+
+	// Position along an axis: band scales resolve to the band centre, linear scales map directly.
+	function axisPos(scale: { (v: unknown): number | undefined; bandwidth?: () => number }, v: unknown) {
+		const base = scale(v) ?? 0
+		return typeof scale.bandwidth === 'function' ? base + scale.bandwidth() / 2 : base
+	}
+	// The full [min, max] screen extent of a scale's range (spans the perpendicular axis).
+	function axisExtent(scale: { range: () => number[] }) {
+		const r = scale.range()
+		return [Math.min(...r), Math.max(...r)]
+	}
+
+	const labelFor = (v: RuleValue) =>
+		typeof label === 'function' ? label(v) : typeof label === 'string' ? label : null
+
+	// Each rule is expressed in (x-channel, y-channel) space and placed to screen, so it
+	// transposes under orientation flip: a y-value reference is horizontal when vertical and
+	// vertical when flipped (it stays perpendicular to the value axis).
+	const rules = $derived.by(() => {
+		if (!xScale || !yScale) return []
+		const place = plotState.place.bind(plotState)
+		const out: Array<{
+			key: string
+			x1: number
+			y1: number
+			x2: number
+			y2: number
+			value: RuleValue
+			text: string | null
+		}> = []
+		const [xLo, xHi] = axisExtent(xScale)
+		const [yLo, yHi] = axisExtent(yScale)
+
+		for (const yv of toArray(y)) {
+			const yc = axisPos(yScale, yv)
+			const a = place(xLo, yc)
+			const b = place(xHi, yc)
+			out.push({ key: `y-${yv}`, x1: a.x, y1: a.y, x2: b.x, y2: b.y, value: yv, text: labelFor(yv) })
+		}
+		for (const xv of toArray(x)) {
+			const xc = axisPos(xScale, xv)
+			const a = place(xc, yLo)
+			const b = place(xc, yHi)
+			out.push({ key: `x-${xv}`, x1: a.x, y1: a.y, x2: b.x, y2: b.y, value: xv, text: labelFor(xv) })
+		}
+		return out
+	})
+
+	const strokeColor = $derived(color ?? stroke ?? 'currentColor')
+</script>
+
+{#if rules.length > 0}
+	<g data-plot-geom="rule">
+		{#each rules as rule (rule.key)}
+			<line
+				x1={rule.x1}
+				y1={rule.y1}
+				x2={rule.x2}
+				y2={rule.y2}
+				stroke={strokeColor}
+				stroke-width={strokeWidth}
+				stroke-dasharray={dash || undefined}
+				data-plot-element="rule"
+				data-plot-value={rule.value}
+			/>
+			{#if rule.text}
+				<text
+					x={rule.x2}
+					y={rule.y2}
+					dx="-4"
+					dy="-4"
+					text-anchor="end"
+					font-size="10"
+					fill={strokeColor}
+					data-plot-element="rule-label"
+				>{rule.text}</text>
+			{/if}
+		{/each}
+	</g>
+{/if}

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

@@ -0,0 +1,19 @@
+type RuleValue = number | string;
+type Props = {
+    /** Vertical reference line(s) at these x-axis value(s) (a value, or a band category). */
+    x?: RuleValue | RuleValue[];
+    /** Horizontal reference line(s) at these y-axis value(s). */
+    y?: RuleValue | RuleValue[];
+    /** Line color (aligns with the other geoms' `color` aesthetic). */
+    color?: string;
+    /** @deprecated use `color` — kept as an alias. */
+    stroke?: string;
+    /** SVG stroke-dasharray (default dashed). Pass '' for a solid line. */
+    dash?: string;
+    strokeWidth?: number;
+    /** Optional label drawn at the line's end. String, or a fn of the value. */
+    label?: string | ((value: RuleValue) => string);
+};
+declare const Rule: import("svelte").Component<Props, {}, "">;
+type Rule = ReturnType<typeof Rule>;
+export default Rule;

package/dist/geoms/Violin.svelte

@@ -1,49 +1,50 @@
 <script lang="ts">
 	import { getContext, onMount, onDestroy } from 'svelte'
 	import type { PlotState } from '../PlotState.svelte.js'
-	import { buildViolins } from '../lib/brewing/marks/violins.js'
+	import { GeomState } from './lib/GeomState.svelte.js'
+	import { buildViolinMarks } from './lib/marks/violin.js'
 
 	type Props = {
 		x?: string
 		y?: string
+		/** Violin interior aesthetic (field); defaults to `x`. */
 		fill?: string
+		/** Outline aesthetic (field); overrides the silhouette stroke when set. */
+		color?: string
 		stat?: string
-		options?: { opacity?: number }
+		/** Half-violin: 'left'/'right' draw one side (flat edge at the band centre) for
+		 *  raincloud/split plots; 'center' (default) is the full symmetric silhouette. */
+		side?: 'left' | 'right' | 'center'
+		/** Data field driving a texture fill (from the shared pattern set) instead of a solid fill. */
+		pattern?: string
+		/** Fixed violin opacity 0–1; defaults to the per-geom preset (violin = 0.5). */
+		alpha?: number
 	}
 
-	let { x, y, fill, stat = 'boxplot', options = {} }: Props = $props()
+	let { x, y, fill, color, stat = 'boxplot', side = 'center', pattern, alpha }: Props = $props()
 
 	const plotState = getContext<PlotState>('plot-state')
-	let id = $state<string | null>(null)
 
-	// fill ?? x drives the colors map for both violin interior and outline
-	const fillChannel = $derived(fill ?? x)
+	// 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 colors map for both violin interior and outline
+	const fillChannel = $derived(fill ?? xf)
 
-	onMount(() => {
-		id = plotState.registerGeom({
-			type: 'violin',
-			channels: { x, y, color: fillChannel },
-			stat,
-			options
-		})
-	})
-	onDestroy(() => {
-		if (id) plotState.unregisterGeom(id)
-	})
+	const geom = new GeomState(plotState, () => ({
+		type: 'violin',
+		channels: { x: xf, y: yf, fill: fillChannel, color, pattern },
+		stat,
+		options: { side },
+		alpha,
+		build: buildViolinMarks
+	}))
+	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 violins = $derived.by(() => {
-		if (!data?.length || !xScale || !yScale) return []
-		return buildViolins(data, { x, fill: fillChannel }, xScale, yScale, colors)
-	})
+	const violins = $derived(geom.marks)
 </script>
 
 {#if violins.length > 0}
@@ -52,7 +53,7 @@
 			<path
 				d={v.d}
 				fill={v.fill}
-				fill-opacity={options?.opacity ?? plotState.chartPreset.opacity.violin}
+				fill-opacity={v.alpha}
 				stroke={v.stroke}
 				stroke-width="1.5"
 				data-plot-element="violin"
@@ -60,6 +61,10 @@
 				onmouseenter={() => plotState.setHovered(v.data)}
 				onmouseleave={() => plotState.clearHovered()}
 			/>
+			{#if v.patternId}
+				<!-- Texture fill overlay (matches the violin silhouette) -->
+				<path d={v.d} fill="url(#{v.patternId})" pointer-events="none" />
+			{/if}
 		{/each}
 	</g>
 {/if}

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

@@ -1,11 +1,18 @@
 type Props = {
     x?: string;
     y?: string;
+    /** Violin interior aesthetic (field); defaults to `x`. */
     fill?: string;
+    /** Outline aesthetic (field); overrides the silhouette stroke when set. */
+    color?: string;
     stat?: string;
-    options?: {
-        opacity?: number;
-    };
+    /** Half-violin: 'left'/'right' draw one side (flat edge at the band centre) for
+     *  raincloud/split plots; 'center' (default) is the full symmetric silhouette. */
+    side?: 'left' | 'right' | 'center';
+    /** Data field driving a texture fill (from the shared pattern set) instead of a solid fill. */
+    pattern?: string;
+    /** Fixed violin opacity 0–1; defaults to the per-geom preset (violin = 0.5). */
+    alpha?: number;
 };
 declare const Violin: import("svelte").Component<Props, {}, "">;
 type Violin = ReturnType<typeof Violin>;