@rokkit/chart 1.3.7 → 1.3.8

package/dist/PlotSurface.svelte

@@ -0,0 +1,162 @@
+<script lang="ts">
+	import { setContext, untrack } from 'svelte'
+	import type { Snippet } from 'svelte'
+	import { PlotState } from './PlotState.svelte.js'
+	import DefinePatterns from './patterns/DefinePatterns.svelte'
+
+	type Row = Record<string, unknown>
+
+	type Props = {
+		/** Full PlotState config. `config.width` is the initial/fallback width — PlotSurface
+		 *  owns the responsive width via a ResizeObserver and overrides it. */
+		config?: Record<string, unknown>
+		/** Animate marks on data/flip changes (data-plot-animate). Enabled one frame after the
+		 *  width settles so the initial layout paints un-animated. */
+		animate?: boolean
+		/** Enable d3-zoom pan/zoom on the svg. */
+		zoom?: boolean
+		ariaLabel?: string
+		/** SVG <desc> for screen readers. */
+		summary?: string
+		/** Two-way selection (row references), synced with the PlotState selection. */
+		selected?: Row[]
+		/** Canvas content (geoms/grid/axes) — rendered inside the svg. */
+		children?: Snippet
+		/** HTML overlays (legend/tooltip/a11y table) — rendered outside the svg but INSIDE the
+		 *  plot-state context, so they can read plotState. */
+		overlay?: Snippet
+	}
+
+	let {
+		config = {},
+		animate = true,
+		zoom = false,
+		ariaLabel = 'Chart visualization',
+		summary = '',
+		selected = $bindable([]),
+		children,
+		overlay
+	}: Props = $props()
+
+	// ── Responsive width: observe the container, use its pixel width so the chart fills the stage.
+	let containerEl = $state<HTMLDivElement | null>(null)
+	let svgEl = $state<SVGSVGElement | null>(null)
+	let observedWidth = $state(0)
+	$effect(() => {
+		if (!containerEl) return
+		const ro = new ResizeObserver((entries) => {
+			const w = Math.floor(entries[0].contentRect.width)
+			if (w > 0) observedWidth = w
+		})
+		ro.observe(containerEl)
+		return () => ro.disconnect()
+	})
+	const fallbackWidth = $derived(Number(config.width) || 600)
+	const effectiveWidth = $derived(observedWidth > 0 ? observedWidth : fallbackWidth)
+	const svgHeight = $derived(Number(config.height) || 400)
+	const mode = $derived(config.mode as 'light' | 'dark' | undefined)
+
+	// ── The single PlotState + context. config.width is overridden with the observed width.
+	const fullConfig = () => ({ ...config, width: effectiveWidth })
+	const plotState = untrack(() => new PlotState(fullConfig()))
+	setContext('plot-state', plotState)
+	$effect(() => {
+		plotState.update(fullConfig())
+	})
+
+	// ── Selection sync (external prop ↔ PlotState). Guarded to avoid an update loop.
+	$effect(() => {
+		plotState.setSelected(selected)
+	})
+	$effect(() => {
+		const rows = plotState.selectedRows
+		const same = rows.length === selected.length && rows.every((r, i) => r === selected[i])
+		if (!same) selected = rows
+	})
+
+	// ── Enable data-change / flip animation one frame after the width first settles, so the
+	//    initial (possibly reflowed) layout paints without animating.
+	let animateReady = $state(false)
+	$effect(() => {
+		if (!animate || animateReady || observedWidth <= 0) return
+		const raf = requestAnimationFrame(() => {
+			animateReady = true
+		})
+		return () => cancelAnimationFrame(raf)
+	})
+
+	// ── Pan/zoom (d3-zoom/d3-selection are client-only → dynamic import).
+	$effect(() => {
+		if (!zoom || !svgEl) return
+		let cancelled = false
+		let detach: (() => void) | undefined
+		Promise.all([import('d3-zoom'), import('d3-selection')]).then(
+			([{ zoom: d3Zoom }, { select }]) => {
+				if (cancelled || !svgEl) return
+				const zoomBehavior = d3Zoom<SVGSVGElement, unknown>()
+					.scaleExtent([1, 8])
+					.on('zoom', (event) => plotState.applyZoom(event.transform))
+				const sel = select(svgEl)
+				sel.call(zoomBehavior)
+				detach = () => sel.on('.zoom', null)
+			}
+		)
+		return () => {
+			cancelled = true
+			detach?.()
+			plotState.resetZoom()
+		}
+	})
+</script>
+
+<div class="plot-surface" bind:this={containerEl}>
+	<svg
+		bind:this={svgEl}
+		width={effectiveWidth}
+		height={svgHeight}
+		viewBox="0 0 {effectiveWidth} {svgHeight}"
+		role="img"
+		aria-label={ariaLabel}
+		data-plot-root
+		data-mode={mode}
+		data-plot-animate={animate && animateReady ? '' : undefined}
+		style:cursor={zoom ? 'grab' : undefined}
+	>
+		{#if summary}
+			<desc>{summary}</desc>
+		{/if}
+		<!-- SVG <pattern> defs for texture fills (Bar/Area/Arc/Box/Violin `pattern` channel) -->
+		<DefinePatterns />
+		<g
+			class="plot-canvas"
+			transform="translate({plotState.margin.left}, {plotState.margin.top})"
+			data-plot-canvas
+		>
+			{@render children?.()}
+		</g>
+	</svg>
+	<!-- HTML overlays (legend/tooltip/a11y table) — inside the context, outside the svg. -->
+	{@render overlay?.()}
+</div>
+
+<style>
+	.plot-surface {
+		width: 100%;
+	}
+	.plot-surface svg {
+		display: block;
+		width: 100%;
+		height: auto;
+		overflow: visible;
+	}
+	.plot-canvas {
+		pointer-events: all;
+	}
+	/* Mode token-lock colour (only when data-mode is set explicitly). */
+	[data-plot-root][data-mode='light'] {
+		color: rgba(var(--color-surface-700, 59, 65, 77), 1);
+	}
+	[data-plot-root][data-mode='dark'] {
+		color: rgba(var(--color-surface-200, 224, 224, 224), 1);
+	}
+</style>

package/dist/PlotSurface.svelte.d.ts

@@ -0,0 +1,25 @@
+import type { Snippet } from 'svelte';
+type Row = Record<string, unknown>;
+type Props = {
+    /** Full PlotState config. `config.width` is the initial/fallback width — PlotSurface
+     *  owns the responsive width via a ResizeObserver and overrides it. */
+    config?: Record<string, unknown>;
+    /** Animate marks on data/flip changes (data-plot-animate). Enabled one frame after the
+     *  width settles so the initial layout paints un-animated. */
+    animate?: boolean;
+    /** Enable d3-zoom pan/zoom on the svg. */
+    zoom?: boolean;
+    ariaLabel?: string;
+    /** SVG <desc> for screen readers. */
+    summary?: string;
+    /** Two-way selection (row references), synced with the PlotState selection. */
+    selected?: Row[];
+    /** Canvas content (geoms/grid/axes) — rendered inside the svg. */
+    children?: Snippet;
+    /** HTML overlays (legend/tooltip/a11y table) — rendered outside the svg but INSIDE the
+     *  plot-state context, so they can read plotState. */
+    overlay?: Snippet;
+};
+declare const PlotSurface: import("svelte").Component<Props, {}, "selected">;
+type PlotSurface = ReturnType<typeof PlotSurface>;
+export default PlotSurface;

package/dist/charts/AreaChart.svelte

@@ -20,6 +20,7 @@
 		mode?: 'light' | 'dark'
 		grid?: boolean | 'x' | 'y' | 'both'
 		legend?: boolean
+		tooltip?: boolean | ((data: Row) => string)
 		highlight?: 'first' | 'last' | 'min' | 'max' | number | ((row: Row, i: number) => boolean)
 		trend?: Method | Method[]
 		xFormat?: Format
@@ -43,9 +44,10 @@
 		stack = false,
 		width = 600,
 		height = 400,
-		mode = 'light',
+		mode = undefined,
 		grid = true,
 		legend = false,
+		tooltip = false,
 		highlight = undefined,
 		trend = undefined,
 		xFormat = undefined,
@@ -68,6 +70,7 @@
 	{mode}
 	{grid}
 	{legend}
+	{tooltip}
 	{highlight}
 	{trend}
 	{xFormat}

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

@@ -18,6 +18,7 @@ type Props = {
     mode?: 'light' | 'dark';
     grid?: boolean | 'x' | 'y' | 'both';
     legend?: boolean;
+    tooltip?: boolean | ((data: Row) => string);
     highlight?: 'first' | 'last' | 'min' | 'max' | number | ((row: Row, i: number) => boolean);
     trend?: Method | Method[];
     xFormat?: Format;

package/dist/charts/BarChart.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 @@
 		stack?: boolean
 		label?: boolean | string | ((data: Row) => unknown)
 		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 {
@@ -35,21 +41,44 @@
 		pattern = undefined,
 		width = 600,
 		height = 400,
-		mode = 'light',
+		mode = undefined,
 		grid = true,
 		legend = false,
 		stat = 'identity',
 		stack = false,
 		label = 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} {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
+>
 	<Bar {x} {y} color={fill} {pattern} {label} {stat} options={{ stack }} />
 </Plot>

package/dist/charts/BarChart.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;
@@ -15,12 +19,17 @@ type Props = {
     stack?: boolean;
     label?: boolean | string | ((data: Row) => unknown);
     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 BarChart: import("svelte").Component<Props, {}, "">;
+declare const BarChart: import("svelte").Component<Props, {}, "selected">;
 type BarChart = ReturnType<typeof BarChart>;
 export default BarChart;

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

@@ -45,7 +45,7 @@
 		tooltip = false,
 		width = 600,
 		height = 400,
-		mode = 'light',
+		mode = undefined,
 		grid = true,
 		legend = false,
 		highlight = undefined,

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

@@ -64,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>