@rokkit/chart 1.3.6 → 1.3.8

package/dist/Plot.svelte

@@ -1,14 +1,13 @@
 <script lang="ts">
-	import { setContext, getContext, untrack } from 'svelte'
+	import { getContext } from 'svelte'
 	import type { Snippet } from 'svelte'
-	import { PlotState } from './PlotState.svelte.js'
 	import { defaultPreset } from './lib/preset.js'
 	import type { PlotSpec, PlotHelpers } from './lib/plot/types.js'
+	import PlotSurface from './PlotSurface.svelte'
 	import Axis from './Plot/Axis.svelte'
 	import Grid from './Plot/Grid.svelte'
 	import Legend from './Plot/Legend.svelte'
 	import Tooltip from './Plot/Tooltip.svelte'
-	import DefinePatterns from './patterns/DefinePatterns.svelte'
 	import Bar from './geoms/Bar.svelte'
 	import Line from './geoms/Line.svelte'
 	import Area from './geoms/Area.svelte'
@@ -21,8 +20,11 @@
 	import Waterfall from './geoms/Waterfall.svelte'
 	import Hexbin from './geoms/Hexbin.svelte'
 	import Ribbon from './geoms/Ribbon.svelte'
+	import Highlight from './geoms/Highlight.svelte'
+	import Trend from './geoms/Trend.svelte'
 
 	type Row = Record<string, unknown>
+	type Method = string | number | { type: string; [k: string]: unknown }
 	type Margin = { top: number; right: number; bottom: number; left: number }
 	type ChartPresetCtx = { current: typeof defaultPreset }
 
@@ -33,7 +35,7 @@
 		width?: number
 		height?: number
 		mode?: 'light' | 'dark'
-		grid?: boolean
+		grid?: boolean | 'x' | 'y' | 'both'
 		axes?: boolean
 		margin?: Margin
 		legend?: boolean
@@ -46,6 +48,18 @@
 		xTicks?: number
 		yTicks?: number
 		minorTicks?: boolean
+		x?: string
+		y?: string
+		highlight?: 'first' | 'last' | 'min' | 'max' | number | ((row: Row, i: number) => boolean)
+		label?: boolean | string | ((row: Row) => unknown)
+		trend?: Method | Method[]
+		onselect?: (detail: unknown) => void
+		selectable?: boolean
+		selected?: Row[]
+		/** Animate marks on data/flip changes (opt-out for e.g. AnimatedPlot, which
+		 *  tweens its own frames). Enabled one frame after the width settles so the
+		 *  initial layout paints un-animated. Default `true`. */
+		animate?: boolean
 		children?: Snippet
 	}
 
@@ -55,7 +69,7 @@
 		helpers = {},
 		width = 600,
 		height = 400,
-		mode = 'light',
+		mode = undefined,
 		grid = true,
 		axes = true,
 		margin = undefined,
@@ -69,30 +83,26 @@
 		xTicks = undefined,
 		yTicks = undefined,
 		minorTicks = false,
+		x = undefined,
+		y = undefined,
+		highlight = undefined,
+		label = false,
+		trend = undefined,
+		onselect = undefined,
+		selectable = false,
+		selected = $bindable([]),
+		animate = true,
 		children
 	}: Props = $props()
 
 	const chartPresetCtx = getContext<ChartPresetCtx | undefined>('chart-preset')
 	const chartPreset = $derived(chartPresetCtx?.current ?? defaultPreset)
 
-	// Responsive width: observe container and use actual pixel width for scale calculations
-	let svgEl = $state<SVGSVGElement | null>(null)
-	let containerEl = $state<HTMLDivElement | 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 effectiveWidth = $derived(observedWidth > 0 ? observedWidth : (spec?.width ?? width))
-	const svgHeight = $derived(spec?.height ?? height)
-	const showGrid = $derived(spec?.grid ?? grid)
+	const gridValue = $derived(spec?.grid ?? grid)
+	const showGrid = $derived(gridValue !== false)
+	const gridLines = $derived(
+		gridValue === true || gridValue === false ? 'auto' : gridValue
+	)
 	const showLegend = $derived(spec?.legend ?? legend)
 	const chartTitle = $derived(spec?.title ?? title)
 	const chartSummary = $derived(spec?.summary ?? summary)
@@ -100,18 +110,22 @@
 	// Accessible data table — screen reader fallback
 	const tableData = $derived(spec?.data ?? data)
 	const tableColumns = $derived.by(() => {
-		const cols = [spec?.x, spec?.y, spec?.color ?? spec?.fill].filter(
-			(c): c is string => Boolean(c)
-		)
+		// Dedupe: a channel may repeat (e.g. x === color), and the table's keyed each
+		// requires unique column names.
+		const cols = [...new Set(
+			[spec?.x, spec?.y, spec?.color ?? spec?.fill].filter((c): c is string => Boolean(c))
+		)]
 		if (cols.length > 0) return cols
 		const first = tableData[0]
 		return first ? Object.keys(first) : []
 	})
 
+	// Config for the shared PlotSurface (which owns PlotState, the responsive width, context,
+	// animation, patterns, and zoom). `width` is the fallback — PlotSurface observes the container.
 	function buildPlotConfig() {
 		return {
 			data: spec?.data ?? data,
-			width: effectiveWidth,
+			width: spec?.width ?? width,
 			height: spec?.height ?? height,
 			mode,
 			margin,
@@ -125,50 +139,20 @@
 			colorScheme: spec?.colorScheme,
 			colorMidpoint: spec?.colorMidpoint,
 			orientation: spec?.orientation,
-			chartPreset
+			sort: spec?.sort,
+			continuousCategory: spec?.continuousCategory,
+			chartPreset,
+			onselect,
+			selectable
 		}
 	}
 
-	// Create PlotState with initial values and provide as context.
-	// untrack() suppresses "captures initial value" warnings — intentional:
-	// the $effect below handles all subsequent reactive updates.
-	const plotState = untrack(() => new PlotState(buildPlotConfig()))
-	setContext('plot-state', plotState)
-
-	// Keep state in sync when reactive config changes
-	$effect(() => {
-		plotState.update(buildPlotConfig())
-	})
-
-	$effect(() => {
-		if (!zoom || !svgEl) return
-		// d3-zoom/d3-selection are client-only; load them dynamically so they are
-		// not bundled into (and tree-shaken-as-unused from) the SSR/main bundle.
-		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()
-		}
-	})
-
 	// Geoms from spec (spec-driven API)
 	const specGeoms = $derived(spec?.geoms ?? [])
 
+	const overlayX = $derived(spec?.x ?? x)
+	const overlayY = $derived(spec?.y ?? y)
+
 	// Geom component resolver for spec-driven mode
 	const GEOM_COMPONENTS = {
 		bar: Bar,
@@ -190,103 +174,100 @@
 	}
 </script>
 
-<div class="plot-root" data-plot-root data-mode={mode} bind:this={containerEl}>
+<div class="plot-root">
 	{#if chartTitle}
 		<div class="plot-title" data-plot-title>{chartTitle}</div>
 	{/if}
 
-	<svg
-		bind:this={svgEl}
-		width={effectiveWidth}
-		height={svgHeight}
-		viewBox="0 0 {effectiveWidth} {svgHeight}"
-		role="img"
-		aria-label={chartTitle || 'Chart visualization'}
-		style:cursor={zoom ? 'grab' : undefined}
+	<!-- The shared root shell (PlotState, responsive width, context, animation, patterns, zoom).
+	     The batteries below (grid/axes/geoms/overlays) render inside its canvas via context. -->
+	<PlotSurface
+		config={buildPlotConfig()}
+		{animate}
+		{zoom}
+		ariaLabel={chartTitle || 'Chart visualization'}
+		summary={chartSummary}
+		bind:selected
 	>
-		{#if chartSummary}
-			<desc>{chartSummary}</desc>
+		<!-- Grid (behind everything) -->
+		{#if showGrid}
+			<Grid lines={gridLines} {xTicks} {yTicks} />
 		{/if}
-		<!-- SVG pattern defs -->
-		<DefinePatterns />
 
-		<g
-			class="plot-canvas"
-			transform="translate({plotState.margin.left}, {plotState.margin.top})"
-			data-plot-canvas
-		>
-			<!-- Grid (behind everything) -->
-			{#if showGrid}
-				<Grid />
-			{/if}
+		<!-- Declarative children (geom components) -->
+		{@render children?.()}
 
-			<!-- Declarative children (geom components) -->
-			{@render children?.()}
+		<!-- Spec-driven geoms -->
+		{#each specGeoms as geomSpec (geomSpec.type)}
+			{@const GeomComponent = resolveGeomComponent(geomSpec.type)}
+			{#if GeomComponent}
+				<GeomComponent
+					x={geomSpec.x ?? spec?.x}
+					y={geomSpec.y ?? spec?.y}
+					color={geomSpec.color ?? spec?.color}
+					fill={geomSpec.fill ?? spec?.fill}
+					pattern={geomSpec.pattern}
+					symbol={geomSpec.symbol}
+					stat={geomSpec.stat}
+					label={geomSpec.label}
+					options={{
+						...(spec?.stack !== undefined ? { stack: spec.stack } : {}),
+						...(spec?.orientation !== undefined ? { orientation: spec.orientation } : {}),
+						...(geomSpec.options ?? {})
+					}}
+				/>
+			{/if}
+		{/each}
 
-			<!-- Spec-driven geoms -->
-			{#each specGeoms as geomSpec (geomSpec.type)}
-				{@const GeomComponent = resolveGeomComponent(geomSpec.type)}
-				{#if GeomComponent}
-					<GeomComponent
-						x={geomSpec.x ?? spec?.x}
-						y={geomSpec.y ?? spec?.y}
-						color={geomSpec.color ?? spec?.color}
-						fill={geomSpec.fill ?? spec?.fill}
-						pattern={geomSpec.pattern}
-						symbol={geomSpec.symbol}
-						stat={geomSpec.stat}
-						label={geomSpec.label}
-						options={{
-							...(spec?.stack !== undefined ? { stack: spec.stack } : {}),
-							...(spec?.orientation !== undefined ? { orientation: spec.orientation } : {}),
-							...(geomSpec.options ?? {})
-						}}
-					/>
-				{/if}
-			{/each}
+		<!-- Axes -->
+		{#if axes}
+			<Axis type="x" label={spec?.labels?.[spec?.x ?? ''] ?? ''} format={xFormat} ticks={xTicks} {minorTicks} />
+			<Axis type="y" label={spec?.labels?.[spec?.y ?? ''] ?? ''} format={yFormat} ticks={yTicks} {minorTicks} />
+		{/if}
 
-			<!-- Axes -->
-			{#if axes}
-				<Axis type="x" label={spec?.labels?.[spec?.x ?? ''] ?? ''} format={xFormat} ticks={xTicks} {minorTicks} />
-				<Axis type="y" label={spec?.labels?.[spec?.y ?? ''] ?? ''} format={yFormat} ticks={yTicks} {minorTicks} />
-			{/if}
-		</g>
-	</svg>
+		{#if trend !== null && trend !== undefined}
+			<Trend x={overlayX} y={overlayY} {trend} />
+		{/if}
 
-	<!-- Legend (HTML, outside SVG) -->
-	{#if showLegend}
-		<Legend labels={spec?.labels ?? {}} />
-	{/if}
+		{#if (highlight !== null && highlight !== undefined) || selectable || selected.length}
+			<Highlight x={overlayX} y={overlayY} {highlight} {label} />
+		{/if}
 
-	<!-- Tooltip (HTML, fixed-position overlay) -->
-	{#if tooltip}
-		<Tooltip {tooltip} />
-	{/if}
+		<!-- HTML overlays — outside the svg but INSIDE the plot-state context. -->
+		{#snippet overlay()}
+			{#if showLegend}
+				<Legend labels={spec?.labels ?? {}} />
+			{/if}
 
-	<!-- Accessible data table — visually hidden, announces data to screen readers -->
-	{#if tableData.length > 0 && tableColumns.length > 0}
-		<table class="plot-sr-table" aria-label={chartTitle || 'Chart data'}>
-			{#if chartTitle}
-				<caption>{chartTitle}</caption>
+			{#if tooltip}
+				<Tooltip {tooltip} />
 			{/if}
-			<thead>
-				<tr>
-					{#each tableColumns as col (col)}
-						<th scope="col">{col}</th>
-					{/each}
-				</tr>
-			</thead>
-			<tbody>
-				{#each tableData as row, i (i)}
-					<tr>
-						{#each tableColumns as col (col)}
-							<td>{row[col] ?? ''}</td>
+
+			{#if tableData.length > 0 && tableColumns.length > 0}
+				<table class="plot-sr-table" aria-label={chartTitle || 'Chart data'}>
+					{#if chartTitle}
+						<caption>{chartTitle}</caption>
+					{/if}
+					<thead>
+						<tr>
+							{#each tableColumns as col (col)}
+								<th scope="col">{col}</th>
+							{/each}
+						</tr>
+					</thead>
+					<tbody>
+						{#each tableData as row, i (i)}
+							<tr>
+								{#each tableColumns as col (col)}
+									<td>{row[col] ?? ''}</td>
+								{/each}
+							</tr>
 						{/each}
-					</tr>
-				{/each}
-			</tbody>
-		</table>
-	{/if}
+					</tbody>
+				</table>
+			{/if}
+		{/snippet}
+	</PlotSurface>
 </div>
 
 <style>
@@ -296,23 +277,6 @@
 		height: auto;
 	}
 
-	[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);
-	}
-
-	svg {
-		display: block;
-		overflow: visible;
-	}
-
-	.plot-canvas {
-		pointer-events: all;
-	}
-
 	.plot-title {
 		font-size: 14px;
 		font-weight: 600;

package/dist/Plot.svelte.d.ts

@@ -1,6 +1,10 @@
 import type { Snippet } from 'svelte';
 import type { PlotSpec, PlotHelpers } from './lib/plot/types.js';
 type Row = Record<string, unknown>;
+type Method = string | number | {
+    type: string;
+    [k: string]: unknown;
+};
 type Margin = {
     top: number;
     right: number;
@@ -14,7 +18,7 @@ type Props = {
     width?: number;
     height?: number;
     mode?: 'light' | 'dark';
-    grid?: boolean;
+    grid?: boolean | 'x' | 'y' | 'both';
     axes?: boolean;
     margin?: Margin;
     legend?: boolean;
@@ -27,8 +31,20 @@ type Props = {
     xTicks?: number;
     yTicks?: number;
     minorTicks?: boolean;
+    x?: string;
+    y?: string;
+    highlight?: 'first' | 'last' | 'min' | 'max' | number | ((row: Row, i: number) => boolean);
+    label?: boolean | string | ((row: Row) => unknown);
+    trend?: Method | Method[];
+    onselect?: (detail: unknown) => void;
+    selectable?: boolean;
+    selected?: Row[];
+    /** Animate marks on data/flip changes (opt-out for e.g. AnimatedPlot, which
+     *  tweens its own frames). Enabled one frame after the width settles so the
+     *  initial layout paints un-animated. Default `true`. */
+    animate?: boolean;
     children?: Snippet;
 };
-declare const Plot: import("svelte").Component<Props, {}, "">;
+declare const Plot: import("svelte").Component<Props, {}, "selected">;
 type Plot = ReturnType<typeof Plot>;
 export default Plot;

package/dist/PlotState.svelte.d.ts

@@ -40,6 +40,23 @@ export class PlotState {
         patterns: any;
         symbols: any;
     };
+    get data(): any[];
+    /** @returns {{ x?: string, y?: string, color?: string, pattern?: string, symbol?: string }} */
+    get channels(): {
+        x?: string;
+        y?: string;
+        color?: string;
+        pattern?: string;
+        symbol?: string;
+    };
+    get isFlipped(): boolean;
+    get continuousCategory(): boolean;
+    place(u: any, v: any): {
+        x: any;
+        y: any;
+    };
+    get bandScale(): any;
+    get valueScale(): any;
     get margin(): {
         top: number;
         right: number;
@@ -71,8 +88,14 @@ export class PlotState {
         symbols: string[];
     };
     get hovered(): null;
+    get interactive(): boolean;
+    get selectedRows(): any[];
     setHovered(data: any): void;
     clearHovered(): void;
+    isSelected(row: any): boolean;
+    setSelected(rows: any): void;
+    clearSelected(): void;
+    handleSelect(detail: any): void;
     applyZoom(transform: any): void;
     resetZoom(): void;
     #private;