@rokkit/chart 1.3.6 → 1.3.8

package/dist/charts/BoxPlot.svelte

@@ -14,6 +14,7 @@
 		mode?: 'light' | 'dark'
 		grid?: boolean
 		legend?: boolean
+		tooltip?: boolean | ((data: Row) => string)
 		yFormat?: (v: unknown) => string
 		yTicks?: number
 		minorTicks?: boolean
@@ -26,15 +27,16 @@
 		fill = 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}>
+<Plot {data} {width} {height} {mode} {grid} {legend} {tooltip} {yFormat} {yTicks} {minorTicks}>
 	<Box {x} {y} {fill} />
 </Plot>

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

@@ -9,6 +9,7 @@ type Props = {
     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[]
@@ -17,11 +18,17 @@
 		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 {
@@ -33,17 +40,41 @@
 		size, // required: field name for bubble radius
 		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}>
+<Plot
+	{data}
+	{width}
+	{height}
+	{mode}
+	{grid}
+	{legend}
+	{tooltip}
+	{highlight}
+	{trend}
+	{xFormat}
+	{yFormat}
+	{xTicks}
+	{yTicks}
+	{minorTicks}
+	{onselect}
+	{selectable}
+	bind:selected
+>
 	<Point {x} {y} {color} {size} />
 </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;
@@ -12,12 +16,18 @@ type Props = {
     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

@@ -3,6 +3,7 @@
 	import Line from '../geoms/Line.svelte'
 
 	type Row = Record<string, unknown>
+	type Method = string | number | { type: string; [k: string]: unknown }
 	type Format = (v: unknown) => string
 
 	type Props = {
@@ -18,13 +19,18 @@
 		width?: number
 		height?: number
 		mode?: 'light' | 'dark'
-		grid?: boolean
+		grid?: boolean | 'x' | 'y' | 'both'
 		legend?: boolean
+		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 {
@@ -39,17 +45,42 @@
 		tooltip = false,
 		width = 600,
 		height = 400,
-		mode = 'light',
+		mode = undefined,
 		grid = true,
 		legend = 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} {tooltip} {xFormat} {yFormat} {xTicks} {yTicks} {minorTicks}>
+<Plot
+	{data}
+	{x}
+	{y}
+	{width}
+	{height}
+	{mode}
+	{grid}
+	{legend}
+	{tooltip}
+	{highlight}
+	{trend}
+	{xFormat}
+	{yFormat}
+	{xTicks}
+	{yTicks}
+	{minorTicks}
+	{onselect}
+	{selectable}
+	bind:selected
+>
 	<Line {x} {y} {color} {symbol} {label} {stat} options={{ curve }} />
 </Plot>

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

@@ -1,4 +1,8 @@
 type Row = Record<string, unknown>;
+type Method = string | number | {
+    type: string;
+    [k: string]: unknown;
+};
 type Format = (v: unknown) => string;
 type Props = {
     data?: Row[];
@@ -13,14 +17,19 @@ type Props = {
     width?: number;
     height?: number;
     mode?: 'light' | 'dark';
-    grid?: boolean;
+    grid?: boolean | 'x' | 'y' | 'both';
     legend?: boolean;
+    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 LineChart: import("svelte").Component<Props, {}, "">;
+declare const LineChart: import("svelte").Component<Props, {}, "selected">;
 type LineChart = ReturnType<typeof LineChart>;
 export default LineChart;

package/dist/charts/PieChart.svelte

@@ -31,7 +31,7 @@
 		tooltip = false,
 		width = 400,
 		height = 400,
-		mode = 'light',
+		mode = undefined,
 		legend = false,
 		stat = 'sum'
 	}: Props = $props()

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[]
@@ -20,11 +21,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 {
@@ -38,18 +44,41 @@
 		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}>
+<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} 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;
@@ -18,12 +22,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

@@ -14,6 +14,7 @@
 		mode?: 'light' | 'dark'
 		grid?: boolean
 		legend?: boolean
+		tooltip?: boolean | ((data: Row) => string)
 		yFormat?: (v: unknown) => string
 		yTicks?: number
 		minorTicks?: boolean
@@ -26,15 +27,16 @@
 		fill = 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}>
+<Plot {data} {width} {height} {mode} {grid} {legend} {tooltip} {yFormat} {yTicks} {minorTicks}>
 	<Violin {x} {y} {fill} />
 </Plot>

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

@@ -9,6 +9,7 @@ type Props = {
     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

@@ -65,14 +65,15 @@
 		// 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
+		// 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 },
+			{ innerRadius: options.innerRadius ?? 0 },
 			patterns
 		)
 	})

package/dist/geoms/Area.svelte

@@ -2,6 +2,9 @@
 	import { getContext, onMount, onDestroy } from 'svelte'
 	import type { PlotState } from '../PlotState.svelte.js'
 	import { buildAreas, buildStackedAreas } from './lib/areas.js'
+	import { buildSelectDetail } from '../lib/select.js'
+
+	type Row = Record<string, unknown>
 
 	type Options = {
 		stack?: boolean
@@ -23,6 +26,13 @@
 	const plotState = getContext<PlotState>('plot-state')
 	let id = $state<string | null>(null)
 
+	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)
+			)
+	}
+
 	onMount(() => {
 		id = plotState.registerGeom({
 			type: 'area',
@@ -54,9 +64,9 @@
 		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 buildStackedAreas(data, channels, xScale, yScale, colors, options.curve, patterns, plotState.place.bind(plotState))
 		}
-		return buildAreas(data, channels, xScale, yScale, colors, options.curve, patterns)
+		return buildAreas(data, channels, xScale, yScale, colors, options.curve, patterns, plotState.place.bind(plotState))
 	})
 </script>
 
@@ -79,16 +89,23 @@
 			{#each data 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 -->
 				<circle
 					cx={px}
 					cy={py}
 					r="8"
 					fill="transparent"
 					stroke="none"
-					role="presentation"
+					role={plotState.interactive ? 'button' : 'presentation'}
+					tabindex={plotState.interactive ? 0 : undefined}
+					style:cursor={plotState.interactive ? 'pointer' : undefined}
 					data-plot-element="area-hover"
 					onmouseenter={() => plotState.setHovered(d)}
 					onmouseleave={() => plotState.clearHovered()}
+					onclick={plotState.interactive ? (e) => selectPoint(d, e) : undefined}
+					onkeydown={plotState.interactive
+						? (e) => (e.key === 'Enter' || e.key === ' ') && selectPoint(d, e)
+						: undefined}
 				/>
 			{/each}
 		{/if}

package/dist/geoms/Bar.svelte

@@ -2,8 +2,9 @@
 	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 { buildBars, buildStackedBars } from './lib/bars.js'
 	import { keyboardNav } from '../lib/keyboard-nav.js'
+	import { buildSelectDetail } from '../lib/select.js'
 	import LabelPill from './LabelPill.svelte'
 
 	type Row = Record<string, unknown>
@@ -101,13 +102,24 @@
 	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)
-		}
+		// 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)
+			return buildStackedBars(data, channels, xScale, yScale, colors, innerHeight, patterns, place)
 		}
-		return buildGroupedBars(data, channels, xScale, yScale, colors, innerHeight, patterns)
+		return buildBars(
+			data,
+			channels,
+			xScale,
+			yScale,
+			colors,
+			innerHeight,
+			patterns,
+			place,
+			plotState.continuousCategory
+		)
 	})
 
 	let dimmedByKey = $state<Record<string, boolean>>({})
@@ -134,6 +146,36 @@
 		if (!filterable || !x || !cf) return
 		cf.toggleCategorical(x, barX)
 	}
+
+	function selectBar(bar: { data: Row }, event: MouseEvent | KeyboardEvent) {
+		if (plotState.interactive)
+			plotState.handleSelect(
+				buildSelectDetail(
+					bar.data,
+					plotState.data.indexOf(bar.data),
+					{ x, y },
+					'bar',
+					colorChannel ? bar.data[colorChannel] : undefined,
+					event
+				)
+			)
+	}
+
+	function handleBarActivate(bar: { data: Row }, event: MouseEvent) {
+		if (filterable && x) handleBarClick(bar.data[x])
+		onselect?.(bar.data)
+		selectBar(bar, event)
+	}
+
+	function handleBarKeyActivate(bar: { data: Row }, event: KeyboardEvent) {
+		if (event.key !== 'Enter' && event.key !== ' ') return
+		if (filterable && x) {
+			handleBarClick(bar.data[x])
+		} else {
+			onselect?.(bar.data)
+		}
+		selectBar(bar, event)
+	}
 </script>
 
 {#if bars.length > 0}
@@ -152,13 +194,15 @@
 				data-plot-value={bar.data[y ?? '']}
 				data-plot-category={bar.data[x ?? '']}
 				data-dimmed={dimmedByKey[bar.key] ? true : undefined}
-				style:cursor={filterable || onselect ? 'pointer' : undefined}
-				onclick={filterable && x ? () => { handleBarClick(bar.data[x]); onselect?.(bar.data) } : onselect ? () => onselect(bar.data) : undefined}
-				onkeydown={filterable && x
-					? (e) => (e.key === 'Enter' || e.key === ' ') && handleBarClick(bar.data[x])
-					: onselect ? (e) => (e.key === 'Enter' || e.key === ' ') && onselect(bar.data) : undefined}
-				role={filterable || onselect || keyboard ? 'button' : 'graphics-symbol'}
-				tabindex={filterable || onselect || keyboard ? 0 : undefined}
+				style:cursor={filterable || onselect || plotState.interactive ? 'pointer' : undefined}
+				onclick={filterable || onselect || keyboard || plotState.interactive
+					? (e) => handleBarActivate(bar, e)
+					: undefined}
+				onkeydown={filterable || onselect || keyboard || plotState.interactive
+					? (e) => handleBarKeyActivate(bar, e)
+					: undefined}
+				role={filterable || onselect || keyboard || plotState.interactive ? 'button' : 'graphics-symbol'}
+				tabindex={filterable || onselect || keyboard || plotState.interactive ? 0 : undefined}
 				use:keyboardNav={keyboard}
 				aria-label="{bar.data[x ?? '']}: {bar.data[y ?? '']}"
 				onmouseenter={() => plotState.setHovered(bar.data)}