@rokkit/chart 1.3.7 → 1.3.9

package/dist/charts/BoxPlot.svelte

@@ -9,11 +9,13 @@
 		x?: string
 		y?: string
 		fill?: string
+		alpha?: number
 		width?: number
 		height?: number
 		mode?: 'light' | 'dark'
 		grid?: boolean
 		legend?: boolean
+		tooltip?: boolean | ((data: Row) => string)
 		yFormat?: (v: unknown) => string
 		yTicks?: number
 		minorTicks?: boolean
@@ -24,17 +26,19 @@
 		x = undefined,
 		y = undefined,
 		fill = undefined,
+		alpha = undefined,
 		width = 600,
 		height = 400,
-		mode = 'light',
+		mode = undefined,
 		grid = true,
 		legend = false,
+		tooltip = false,
 		yFormat = undefined,
 		yTicks = undefined,
 		minorTicks = false
 	}: Props = $props()
 </script>
 
-<Plot {data} {width} {height} {mode} {grid} {legend} {yFormat} {yTicks} {minorTicks}>
-	<Box {x} {y} {fill} />
+<Plot {data} {width} {height} {mode} {grid} {legend} {tooltip} {yFormat} {yTicks} {minorTicks}>
+	<Box {x} {y} {fill} {alpha} />
 </Plot>

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

@@ -4,11 +4,13 @@ type Props = {
     x?: string;
     y?: string;
     fill?: string;
+    alpha?: number;
     width?: number;
     height?: number;
     mode?: 'light' | 'dark';
     grid?: boolean;
     legend?: boolean;
+    tooltip?: boolean | ((data: Row) => string);
     yFormat?: (v: unknown) => string;
     yTicks?: number;
     minorTicks?: boolean;

package/dist/charts/BubbleChart.svelte

@@ -4,6 +4,7 @@
 
 	type Row = Record<string, unknown>
 	type Format = (v: unknown) => string
+	type Method = string | number | { type: string; [k: string]: unknown }
 
 	type Props = {
 		data?: Row[]
@@ -12,16 +13,23 @@
 		color?: string
 		symbol?: string
 		size?: string
+		alpha?: number
 		width?: number
 		height?: number
 		mode?: 'light' | 'dark'
 		grid?: boolean
 		legend?: boolean
+		tooltip?: boolean | ((data: Row) => string)
+		highlight?: 'first' | 'last' | 'min' | 'max' | number | ((row: Row, i: number) => boolean)
+		trend?: Method | Method[]
 		xFormat?: Format
 		yFormat?: Format
 		xTicks?: number
 		yTicks?: number
 		minorTicks?: boolean
+		onselect?: (detail: unknown) => void
+		selectable?: boolean
+		selected?: Row[]
 	}
 
 	let {
@@ -31,19 +39,44 @@
 		color = undefined,
 		symbol: _symbol = undefined,
 		size, // required: field name for bubble radius
+		alpha = undefined,
 		width = 600,
 		height = 400,
-		mode = 'light',
+		mode = undefined,
 		grid = true,
 		legend = false,
+		tooltip = false,
+		highlight = undefined,
+		trend = undefined,
 		xFormat = undefined,
 		yFormat = undefined,
 		xTicks = undefined,
 		yTicks = undefined,
-		minorTicks = false
+		minorTicks = false,
+		onselect = undefined,
+		selectable = false,
+		selected = $bindable([])
 	}: Props = $props()
 </script>
 
-<Plot {data} {width} {height} {mode} {grid} {legend} {xFormat} {yFormat} {xTicks} {yTicks} {minorTicks}>
-	<Point {x} {y} {color} {size} />
+<Plot
+	{data}
+	{width}
+	{height}
+	{mode}
+	{grid}
+	{legend}
+	{tooltip}
+	{highlight}
+	{trend}
+	{xFormat}
+	{yFormat}
+	{xTicks}
+	{yTicks}
+	{minorTicks}
+	{onselect}
+	{selectable}
+	bind:selected
+>
+	<Point {x} {y} {color} {size} {alpha} />
 </Plot>

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

@@ -1,5 +1,9 @@
 type Row = Record<string, unknown>;
 type Format = (v: unknown) => string;
+type Method = string | number | {
+    type: string;
+    [k: string]: unknown;
+};
 type Props = {
     data?: Row[];
     x?: string;
@@ -7,17 +11,24 @@ type Props = {
     color?: string;
     symbol?: string;
     size?: string;
+    alpha?: number;
     width?: number;
     height?: number;
     mode?: 'light' | 'dark';
     grid?: boolean;
     legend?: boolean;
+    tooltip?: boolean | ((data: Row) => string);
+    highlight?: 'first' | 'last' | 'min' | 'max' | number | ((row: Row, i: number) => boolean);
+    trend?: Method | Method[];
     xFormat?: Format;
     yFormat?: Format;
     xTicks?: number;
     yTicks?: number;
     minorTicks?: boolean;
+    onselect?: (detail: unknown) => void;
+    selectable?: boolean;
+    selected?: Row[];
 };
-declare const BubbleChart: import("svelte").Component<Props, {}, "">;
+declare const BubbleChart: import("svelte").Component<Props, {}, "selected">;
 type BubbleChart = ReturnType<typeof BubbleChart>;
 export default BubbleChart;

package/dist/charts/LineChart.svelte

@@ -12,6 +12,7 @@
 		y?: string
 		color?: string
 		stat?: string
+		alpha?: number
 		symbol?: string
 		curve?: 'linear' | 'smooth' | 'step'
 		label?: boolean | string | ((data: Row) => unknown)
@@ -39,13 +40,14 @@
 		y = undefined,
 		color = undefined,
 		stat = 'identity',
+		alpha = undefined,
 		symbol = undefined,
 		curve = undefined, // forwarded to Line options
 		label = false,
 		tooltip = false,
 		width = 600,
 		height = 400,
-		mode = 'light',
+		mode = undefined,
 		grid = true,
 		legend = false,
 		highlight = undefined,
@@ -82,5 +84,5 @@
 	{selectable}
 	bind:selected
 >
-	<Line {x} {y} {color} {symbol} {label} {stat} options={{ curve }} />
+	<Line {x} {y} {color} {symbol} {label} {stat} {alpha} options={{ curve }} />
 </Plot>

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

@@ -10,6 +10,7 @@ type Props = {
     y?: string;
     color?: string;
     stat?: string;
+    alpha?: number;
     symbol?: string;
     curve?: 'linear' | 'smooth' | 'step';
     label?: boolean | string | ((data: Row) => unknown);

package/dist/charts/PieChart.svelte

@@ -18,6 +18,7 @@
 		mode?: 'light' | 'dark'
 		legend?: boolean
 		stat?: string
+		alpha?: number
 	}
 
 	let {
@@ -31,9 +32,10 @@
 		tooltip = false,
 		width = 400,
 		height = 400,
-		mode = 'light',
+		mode = undefined,
 		legend = false,
-		stat = 'sum'
+		stat = 'sum',
+		alpha = undefined
 	}: Props = $props()
 </script>
 
@@ -48,5 +50,5 @@
 	{legend}
 	{tooltip}
 >
-	<Arc theta={y} fill={label ?? fill} {pattern} {labelFn} {stat} options={{ innerRadius }} />
+	<Arc theta={y} fill={label ?? fill} {pattern} {labelFn} {stat} {alpha} options={{ innerRadius }} />
 </Plot>

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

@@ -13,6 +13,7 @@ type Props = {
     mode?: 'light' | 'dark';
     legend?: boolean;
     stat?: string;
+    alpha?: number;
 };
 declare const PieChart: import("svelte").Component<Props, {}, "">;
 type PieChart = ReturnType<typeof PieChart>;

package/dist/charts/ScatterPlot.svelte

@@ -4,6 +4,7 @@
 
 	type Row = Record<string, unknown>
 	type Format = (v: unknown) => string
+	type Method = string | number | { type: string; [k: string]: unknown }
 
 	type Props = {
 		data?: Row[]
@@ -12,6 +13,7 @@
 		color?: string
 		symbol?: string
 		size?: string
+		alpha?: number
 		label?: boolean | string | ((data: Row) => unknown)
 		tooltip?: boolean | ((data: Row) => string)
 		width?: number
@@ -20,11 +22,16 @@
 		grid?: boolean
 		legend?: boolean
 		jitter?: { width?: number; height?: number } | null
+		highlight?: 'first' | 'last' | 'min' | 'max' | number | ((row: Row, i: number) => boolean)
+		trend?: Method | Method[]
 		xFormat?: Format
 		yFormat?: Format
 		xTicks?: number
 		yTicks?: number
 		minorTicks?: boolean
+		onselect?: (detail: unknown) => void
+		selectable?: boolean
+		selected?: Row[]
 	}
 
 	let {
@@ -34,22 +41,46 @@
 		color = undefined,
 		symbol = undefined,
 		size = undefined,
+		alpha = undefined,
 		label = false,
 		tooltip = false,
 		width = 600,
 		height = 400,
-		mode = 'light',
+		mode = undefined,
 		grid = true,
 		legend = false,
 		jitter = undefined,
+		highlight = undefined,
+		trend = undefined,
 		xFormat = undefined,
 		yFormat = undefined,
 		xTicks = undefined,
 		yTicks = undefined,
-		minorTicks = false
+		minorTicks = false,
+		onselect = undefined,
+		selectable = false,
+		selected = $bindable([])
 	}: Props = $props()
 </script>
 
-<Plot {data} {width} {height} {mode} {grid} {legend} {tooltip} {xFormat} {yFormat} {xTicks} {yTicks} {minorTicks}>
-	<Point {x} {y} {color} {size} {symbol} {label} options={{ jitter }} />
+<Plot
+	{data}
+	{width}
+	{height}
+	{mode}
+	{grid}
+	{legend}
+	{tooltip}
+	{highlight}
+	{trend}
+	{xFormat}
+	{yFormat}
+	{xTicks}
+	{yTicks}
+	{minorTicks}
+	{onselect}
+	{selectable}
+	bind:selected
+>
+	<Point {x} {y} {color} {size} {symbol} {label} {alpha} options={{ jitter }} />
 </Plot>

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

@@ -1,5 +1,9 @@
 type Row = Record<string, unknown>;
 type Format = (v: unknown) => string;
+type Method = string | number | {
+    type: string;
+    [k: string]: unknown;
+};
 type Props = {
     data?: Row[];
     x?: string;
@@ -7,6 +11,7 @@ type Props = {
     color?: string;
     symbol?: string;
     size?: string;
+    alpha?: number;
     label?: boolean | string | ((data: Row) => unknown);
     tooltip?: boolean | ((data: Row) => string);
     width?: number;
@@ -18,12 +23,17 @@ type Props = {
         width?: number;
         height?: number;
     } | null;
+    highlight?: 'first' | 'last' | 'min' | 'max' | number | ((row: Row, i: number) => boolean);
+    trend?: Method | Method[];
     xFormat?: Format;
     yFormat?: Format;
     xTicks?: number;
     yTicks?: number;
     minorTicks?: boolean;
+    onselect?: (detail: unknown) => void;
+    selectable?: boolean;
+    selected?: Row[];
 };
-declare const ScatterPlot: import("svelte").Component<Props, {}, "">;
+declare const ScatterPlot: import("svelte").Component<Props, {}, "selected">;
 type ScatterPlot = ReturnType<typeof ScatterPlot>;
 export default ScatterPlot;

package/dist/charts/ViolinPlot.svelte

@@ -9,11 +9,13 @@
 		x?: string
 		y?: string
 		fill?: string
+		alpha?: number
 		width?: number
 		height?: number
 		mode?: 'light' | 'dark'
 		grid?: boolean
 		legend?: boolean
+		tooltip?: boolean | ((data: Row) => string)
 		yFormat?: (v: unknown) => string
 		yTicks?: number
 		minorTicks?: boolean
@@ -24,17 +26,19 @@
 		x = undefined,
 		y = undefined,
 		fill = undefined,
+		alpha = undefined,
 		width = 600,
 		height = 400,
-		mode = 'light',
+		mode = undefined,
 		grid = true,
 		legend = false,
+		tooltip = false,
 		yFormat = undefined,
 		yTicks = undefined,
 		minorTicks = false
 	}: Props = $props()
 </script>
 
-<Plot {data} {width} {height} {mode} {grid} {legend} {yFormat} {yTicks} {minorTicks}>
-	<Violin {x} {y} {fill} />
+<Plot {data} {width} {height} {mode} {grid} {legend} {tooltip} {yFormat} {yTicks} {minorTicks}>
+	<Violin {x} {y} {fill} {alpha} />
 </Plot>

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

@@ -4,11 +4,13 @@ type Props = {
     x?: string;
     y?: string;
     fill?: string;
+    alpha?: number;
     width?: number;
     height?: number;
     mode?: 'light' | 'dark';
     grid?: boolean;
     legend?: boolean;
+    tooltip?: boolean | ((data: Row) => string);
     yFormat?: (v: unknown) => string;
     yTicks?: number;
     minorTicks?: boolean;

package/dist/examples/BarChartExample.svelte

@@ -36,7 +36,7 @@
 			<Plot.Grid />
 			<Plot.Axis type="x" label="Product Category" />
 			<Plot.Axis type="y" label="Number of Products" />
-			<Plot.Bar {data} x="category" y="count" fill="category" />
+			<Plot.Bar x="category" y="count" fill="category" />
 			<Plot.Legend labels={{ category: 'Categories' }} />
 		</Plot.Root>
 	</div>

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,57 +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 []
-		const innerRadius = ((options.innerRadius ?? 0) * Math.min(w, h)) / 2
-		return buildArcs(
-			data,
-			{ color: fillField, y: theta, pattern },
-			colors,
-			w,
-			h,
-			{ innerRadius },
-			patterns
-		)
-	})
 </script>
 
 {#if arcs.length > 0}
@@ -85,6 +59,7 @@
 			<path
 				d={arc.d}
 				fill={arc.fill}
+				fill-opacity={arc.alpha}
 				stroke={arc.stroke}
 				stroke-width="1"
 				role={onselect ? 'button' : 'presentation'}
@@ -115,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?: {