@rokkit/chart 1.3.6 → 1.3.8

package/dist/PlotState.svelte.js

@@ -17,6 +17,9 @@ import { assignSymbols } from './lib/brewing/marks/points.js'
 
 let nextId = 0
 
+// Geoms that treat the x channel as categorical (band scale), even for numeric x.
+const CATEGORICAL_X = new Set(['bar', 'box', 'violin', 'jitter'])
+
 export class PlotState {
 	#data = $state([])
 	#rawData = $state([])
@@ -39,7 +42,17 @@ export class PlotState {
 	#mode = $state('light')
 	#chartPreset = $state(defaultPreset)
 	#hovered = $state(null)
+	#selected = $state(new SvelteSet())
+	#onselect = $state(undefined)
+	#selectable = $state(false)
 	#orientationOverride = $state(undefined)
+	// When true, the category (x) axis is a CONTINUOUS position scale (kept linear, not
+	// band-forced) — e.g. AnimatedPlot's bar-chart race, whose tweened `_rank` must position
+	// smoothly. It still flips like any category-x chart; buildBars uses continuous positioning.
+	#continuousCategory = $state(false)
+	// Order the category (band) axis by aggregated value instead of by label: 'desc' | 'asc'.
+	// Sorts bars by size (histogram-style); undefined keeps data/label order.
+	#sort = $state(undefined)
 
 	axisOrigin = $state([undefined, undefined])
 	#axisOffset = $state(0)
@@ -50,8 +63,11 @@ export class PlotState {
 	#innerWidth = $derived(this.#width - this.#effectiveMargin.left - this.#effectiveMargin.right)
 	#innerHeight = $derived(this.#height - this.#effectiveMargin.top - this.#effectiveMargin.bottom)
 
-	// Effective channels: prefer top-level channels; fall back to first geom's channels
-	// for the declarative API where no spec is provided.
+	// Effective channels: prefer top-level channels PER FIELD, falling back to the
+	// first geom's channels. Merged per-field (not all-or-nothing) so a composable
+	// <Plot.Root x y> that omits `color` still picks up a geom's color channel
+	// (e.g. <Plot.Box color=x>) — otherwise `colors` has no per-category entries and
+	// every mark falls back to gray.
 	#mergeGeomChannels(tc, geom) {
 		return {
 			x: tc.x ?? geom.channels?.x,
@@ -64,15 +80,32 @@ export class PlotState {
 
 	#effectiveChannels = $derived.by(() => {
 		const tc = this.#channels
-		if (tc.x && tc.y) return tc
 		const firstGeom = this.#geoms[0]
 		if (!firstGeom) return tc
 		return this.#mergeGeomChannels(tc, firstGeom)
 	})
 
 	#resolveXType(rawXType, yType) {
-		const hasBarGeom = this.#geoms.some((g) => g.type === 'bar')
-		return hasBarGeom && rawXType === 'continuous' && yType === 'continuous' ? 'band' : rawXType
+		const hasBandGeom = this.#geoms.some((g) => CATEGORICAL_X.has(g.type))
+		return hasBandGeom && rawXType === 'continuous' && yType === 'continuous' ? 'band' : rawXType
+	}
+
+	// Category order sorted by aggregated value (sum of the value channel per category).
+	// Drives "sort bars by size" for the band axis + its ticks. Returns null when not sorting.
+	#sortedBandDomain(datasets) {
+		if (!this.#sort) return null
+		const xf = this.#effectiveChannels.x
+		const yf = this.#effectiveChannels.y
+		if (!xf || !yf) return null
+		const totals = new Map()
+		for (const ds of datasets) {
+			for (const d of ds) {
+				const key = d[xf]
+				totals.set(key, (totals.get(key) ?? 0) + (Number(d[yf]) || 0))
+			}
+		}
+		const dir = this.#sort === 'asc' ? 1 : -1
+		return [...totals.keys()].sort((a, b) => dir * ((totals.get(a) ?? 0) - (totals.get(b) ?? 0)))
 	}
 
 	orientation = $derived.by(() => {
@@ -86,6 +119,24 @@ export class PlotState {
 		return inferOrientation(this.#resolveXType(rawXType, yType), yType)
 	})
 
+	// True when the x-channel is the categorical (band) axis — a string category, or a numeric
+	// category a bar/box/violin/jitter geom bands (incl. a race's rank via continuousCategory).
+	// Only such charts flip; a plain scatter (both continuous, no banding geom) is false → the
+	// orientation is a no-op for the scales.
+	#bandIsX = $derived.by(() => {
+		const x = this.#effectiveChannels.x
+		const y = this.#effectiveChannels.y
+		if (!x || !y) return false
+		// Resolved type: a bar/box/violin/jitter geom bands a numeric x (e.g. year, week),
+		// so those NUMERIC categories are flippable too — not just string categories.
+		return this.#resolveXType(inferFieldType(this.#data, x), inferFieldType(this.#data, y)) === 'band'
+	})
+
+	// Flip = render a category-on-x chart horizontally: the category (x) axis stands up on the
+	// vertical screen and the value (y) axis runs along the horizontal screen. x/y channels are
+	// unchanged — only the screen mapping rotates.
+	#flipped = $derived(this.orientation === 'horizontal' && this.#bandIsX)
+
 	colorScaleType = $derived.by(() => {
 		const field = this.#effectiveChannels.color
 		if (!field) return 'categorical'
@@ -115,15 +166,30 @@ export class PlotState {
 		if (!field) return null
 		const datasets =
 			this.#geoms.length > 0 ? this.#geoms.map((g) => this.geomData(g.id)) : [this.#rawData]
-		const includeZero = this.orientation === 'horizontal'
-		// For vertical bar charts, force scaleBand even when X values are numeric (e.g. year).
-		// Horizontal bar charts keep X as a continuous value axis.
-		const hasBarGeom = this.#geoms.some((g) => g.type === 'bar')
-		const bandX = hasBarGeom && this.orientation !== 'horizontal'
+		// includeZero applies to the VALUE axis. When flipped, x is the category axis, not
+		// the value axis, so it must NOT include zero.
+		const includeZero = this.orientation === 'horizontal' && !this.#flipped
+		// Force scaleBand when x is the categorical axis (incl. flipped, where numeric categories
+		// must stay a band). Exception: a CONTINUOUS category axis (a bar race's tweened rank) is
+		// kept LINEAR so fractional positions tween smoothly — buildBars positions it directly.
+		const hasBandGeom = this.#geoms.some((g) => CATEGORICAL_X.has(g.type))
+		const bandX =
+			hasBandGeom &&
+			!this.#continuousCategory &&
+			(this.orientation !== 'horizontal' || this.#flipped)
+		// Flip: the category (x) axis stands up on the vertical screen → range over height.
+		const range = this.#flipped ? [this.#innerHeight, 0] : undefined
+		// Sort the band domain by aggregated value when requested (bars by size); an explicit
+		// xDomain override wins.
+		const domain = this.#xDomain ?? (bandX ? this.#sortedBandDomain(datasets) : null) ?? undefined
 		const base = buildUnifiedXScale(datasets, field, this.#innerWidth, {
-			domain: this.#xDomain,
+			domain,
 			includeZero,
-			band: bandX
+			band: bandX,
+			range,
+			// A continuous category axis (bar-race rank) uses a deliberately padded domain —
+			// don't nice() it back to whole numbers.
+			nice: !this.#continuousCategory
 		})
 		return this.#zoomTransform && typeof base?.bandwidth !== 'function'
 			? this.#zoomTransform.rescaleX(base)
@@ -136,8 +202,9 @@ export class PlotState {
 		if (!boxGeom) return null
 		const boxData = this.geomData(boxGeom.id)
 		const isValid = (v) => v !== null && v !== undefined && !isNaN(v)
-		const mins = boxData.map((d) => d.iqr_min).filter(isValid)
-		const maxs = boxData.map((d) => d.iqr_max).filter(isValid)
+		const flatOutliers = boxData.flatMap((d) => d.outliers ?? []).filter(isValid)
+		const mins = [...boxData.map((d) => d.iqr_min).filter(isValid), ...flatOutliers]
+		const maxs = [...boxData.map((d) => d.iqr_max).filter(isValid), ...flatOutliers]
 		return mins.length > 0 && maxs.length > 0 ? [Math.min(...mins), Math.max(...maxs)] : null
 	}
 
@@ -178,9 +245,13 @@ export class PlotState {
 		if (!field) return null
 		const datasets =
 			this.#geoms.length > 0 ? this.#geoms.map((g) => this.geomData(g.id)) : [this.#rawData]
-		const includeZero = this.orientation === 'vertical'
+		// includeZero applies to the VALUE axis: vertical charts (value on y) and flipped
+		// charts (value still y, but now the horizontal screen axis) both want a 0 baseline.
+		const includeZero = this.orientation === 'vertical' || this.#flipped
 		const yDomain = this.#yDomain ?? this.#resolveBoxDomain() ?? this.#resolveStackDomain(field)
-		const base = buildUnifiedYScale(datasets, field, this.#innerHeight, { domain: yDomain, includeZero })
+		// Flip: the value (y) axis runs along the horizontal screen → range over width.
+		const range = this.#flipped ? [0, this.#innerWidth] : undefined
+		const base = buildUnifiedYScale(datasets, field, this.#innerHeight, { domain: yDomain, includeZero, range })
 		return this.#zoomTransform ? this.#zoomTransform.rescaleY(base) : base
 	})
 
@@ -274,9 +345,14 @@ export class PlotState {
 		this.#height = config.height ?? 400
 		this.#mode = config.mode ?? 'light'
 		this.#chartPreset = config.chartPreset ?? defaultPreset
+		this.#onselect = config.onselect
+		this.#selectable = config.selectable ?? false
+		if (config.selected) this.#selected = new SvelteSet(config.selected)
 		this.#axisOffset = config.axisOffset ?? 0
 		this.#marginOverride = config.margin ?? undefined
 		this.#orientationOverride = config.orientation ?? undefined
+		this.#continuousCategory = config.continuousCategory ?? false
+		this.#sort = config.sort ?? undefined
 	}
 
 	update(config) {
@@ -298,9 +374,13 @@ export class PlotState {
 		if (config.height !== undefined) this.#height = config.height
 		if (config.mode !== undefined) this.#mode = config.mode
 		if (config.chartPreset !== undefined) this.#chartPreset = config.chartPreset
+		if (config.onselect !== undefined) this.#onselect = config.onselect
+		if (config.selectable !== undefined) this.#selectable = config.selectable
 		if (config.axisOffset !== undefined) this.#axisOffset = config.axisOffset
 		this.#marginOverride = config.margin ?? undefined
 		this.#orientationOverride = config.orientation ?? undefined
+		this.#continuousCategory = config.continuousCategory ?? false
+		this.#sort = config.sort ?? undefined
 	}
 
 	registerGeom(config) {
@@ -345,6 +425,43 @@ export class PlotState {
 		return resolvePreset(this.#presetName, this.#helpers)
 	}
 
+	get data() {
+		// Return #rawData (not #data): geoms read their rows via geomData() which
+		// returns #rawData, so overlays and index lookups (plotState.data.indexOf(datum))
+		// must use the SAME proxy identity. #data and #rawData proxy the same source
+		// array separately, so their elements are not ===. Same content, aligned identity.
+		return this.#rawData
+	}
+	/** @returns {{ x?: string, y?: string, color?: string, pattern?: string, symbol?: string }} */
+	get channels() {
+		return this.#channels
+	}
+
+	// ─── Orientation helpers (horizontal / axis-flip) ──────────────────────────
+	// True when the chart is rendered horizontally (category axis stood up on the
+	// vertical screen, value axis along the horizontal screen). x/y channels unchanged.
+	get isFlipped() {
+		return this.#flipped
+	}
+	// True when the category (x) axis is a continuous position scale (kept linear) rather than a
+	// band — a bar-chart race's tweened rank. buildBars uses continuous positioning for it.
+	get continuousCategory() {
+		return this.#continuousCategory
+	}
+	// Map abstract (x-channel, y-channel) scale outputs to screen coords. When flipped,
+	// the two screen axes swap. Geoms compute u = xScale(d[x]), v = yScale(d[y]) then
+	// `const { x, y } = plotState.place(u, v)`.
+	place(u, v) {
+		return this.#flipped ? { x: v, y: u } : { x: u, y: v }
+	}
+	// The categorical (band) scale and the continuous (value) scale, regardless of
+	// orientation — their ranges are already oriented to the correct screen axis.
+	get bandScale() {
+		return this.#bandIsX ? this.xScale : this.yScale
+	}
+	get valueScale() {
+		return this.#bandIsX ? this.yScale : this.xScale
+	}
 	get margin() {
 		return this.#effectiveMargin
 	}
@@ -363,6 +480,12 @@ export class PlotState {
 	get hovered() {
 		return this.#hovered
 	}
+	get interactive() {
+		return Boolean(this.#onselect) || this.#selectable
+	}
+	get selectedRows() {
+		return [...this.#selected]
+	}
 
 	setHovered(data) {
 		this.#hovered = data
@@ -370,6 +493,22 @@ export class PlotState {
 	clearHovered() {
 		this.#hovered = null
 	}
+	isSelected(row) {
+		return this.#selected.has(row)
+	}
+	setSelected(rows) {
+		this.#selected = new SvelteSet(rows ?? [])
+	}
+	clearSelected() {
+		this.#selected = new SvelteSet()
+	}
+	handleSelect(detail) {
+		this.#onselect?.(detail)
+		if (this.#selectable && detail?.datum !== undefined) {
+			if (this.#selected.has(detail.datum)) this.#selected.delete(detail.datum)
+			else this.#selected.add(detail.datum)
+		}
+	}
 
 	applyZoom(transform) {
 		this.#zoomTransform = transform

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

@@ -3,6 +3,7 @@
 	import Area from '../geoms/Area.svelte'
 
 	type Row = Record<string, unknown>
+	type Method = string | number | { type: string; [k: string]: unknown }
 	type Format = (v: unknown) => string
 
 	type Props = {
@@ -17,13 +18,19 @@
 		width?: number
 		height?: number
 		mode?: 'light' | 'dark'
-		grid?: boolean
+		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
 		yFormat?: Format
 		xTicks?: number
 		yTicks?: number
 		minorTicks?: boolean
+		onselect?: (detail: unknown) => void
+		selectable?: boolean
+		selected?: Row[]
 	}
 
 	let {
@@ -37,17 +44,43 @@
 		stack = false,
 		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}
+	{x}
+	{y}
+	{width}
+	{height}
+	{mode}
+	{grid}
+	{legend}
+	{tooltip}
+	{highlight}
+	{trend}
+	{xFormat}
+	{yFormat}
+	{xTicks}
+	{yTicks}
+	{minorTicks}
+	{onselect}
+	{selectable}
+	bind:selected
+>
 	<Area {x} {y} color={fill} {pattern} {stat} options={{ curve, stack }} />
 </Plot>

package/dist/charts/AreaChart.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[];
@@ -12,14 +16,20 @@ type Props = {
     width?: number;
     height?: number;
     mode?: 'light' | 'dark';
-    grid?: boolean;
+    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;
     yFormat?: Format;
     xTicks?: number;
     yTicks?: number;
     minorTicks?: boolean;
+    onselect?: (detail: unknown) => void;
+    selectable?: boolean;
+    selected?: Row[];
 };
-declare const AreaChart: import("svelte").Component<Props, {}, "">;
+declare const AreaChart: import("svelte").Component<Props, {}, "selected">;
 type AreaChart = ReturnType<typeof AreaChart>;
 export default AreaChart;

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;