@rokkit/chart 1.3.8 → 1.3.9

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

@@ -1,23 +1,27 @@
 <script lang="ts">
 	import { getContext, onMount, onDestroy } from 'svelte'
 	import type { PlotState } from '../PlotState.svelte.js'
-	import { buildSwarm } from '../lib/brewing/marks/swarm.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'
-		options?: { opacity?: number }
+		/** Fixed point opacity 0–1; defaults to the per-geom preset (jitter = 0.8). */
+		alpha?: number
 	}
 
-	let { x, y, fill, r = 2, method = 'jitter', side = 'center', options = {} }: Props = $props()
+	let { x, y, fill, color, r = 2, method = 'jitter', side = 'center', 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 omits x/y (composes under
 	// <Plot.Root x y> without silently NaN-ing).
@@ -26,38 +30,19 @@
 	// fill ?? effective-x drives the color lookup
 	const fillChannel = $derived(fill ?? xf)
 
-	onMount(() => {
-		id = plotState.registerGeom({
-			type: 'jitter',
-			channels: { x: xf, y: yf, color: fillChannel },
-			stat: 'identity',
-			options
-		})
-	})
-	onDestroy(() => {
-		if (id) plotState.unregisterGeom(id)
-	})
+	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)
 
-	$effect(() => {
-		if (id) plotState.updateGeom(id, { channels: { x: xf, y: yf, color: fillChannel }, stat: 'identity' })
-	})
-
-	const data = $derived(id ? plotState.geomData(id) : [])
-	const xScale = $derived(plotState.xScale)
-	const yScale = $derived(plotState.yScale)
-	const colors = $derived(plotState.colors)
-
-	const points = $derived.by(() => {
-		if (!data?.length || !xScale || !yScale) return []
-		const raw = buildSwarm(data, { x: xf, y: yf, fill: fillChannel }, xScale, yScale, colors, { method, r, side })
-		if (!plotState.isFlipped) return raw
-		// Horizontal: the band axis (swarm spread) stands up on screen-Y and the value
-		// axis runs along screen-X — swap the computed coords through place().
-		return raw.map((p) => {
-			const s = plotState.place(p.cx, p.cy)
-			return { ...p, cx: s.x, cy: s.y }
-		})
-	})
+	const points = $derived(geom.marks)
 </script>
 
 {#if points.length > 0}
@@ -68,7 +53,7 @@
 				cy={pt.cy}
 				{r}
 				fill={pt.fill}
-				fill-opacity={options?.opacity ?? plotState.chartPreset.opacity.point}
+				fill-opacity={pt.alpha}
 				stroke={pt.stroke}
 				stroke-width="0.5"
 				data-plot-element="jitter-point"

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

@@ -1,14 +1,16 @@
 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';
-    options?: {
-        opacity?: number;
-    };
+    /** 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>;

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, plotState.place.bind(plotState))
-	})
-
-	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;

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,75 +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 []
-		const raw = buildPoints(
-			data,
-			{ x, y, color, size, symbol: symbolField },
-			xScale,
-			yScale,
-			colors,
-			sizeScale,
-			symbolMap,
-			defaultRadius,
-			options?.jitter ?? null
-		)
-		if (!plotState.isFlipped) return raw
-		// Horizontal: swap each point's screen coords (value → screen-X, category → screen-Y).
-		return raw.map((p) => {
-			const s = plotState.place(p.cx, p.cy)
-			return { ...p, cx: s.x, cy: s.y }
-		})
-	})
 </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})"
@@ -138,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}
@@ -160,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;