@rokkit/chart 1.0.0-next.98 → 1.0.1

package/src/Plot.svelte

@@ -0,0 +1,313 @@
+<script>
+	import { setContext, getContext, untrack } from 'svelte'
+	import { zoom as d3Zoom } from 'd3-zoom'
+	import { select } from 'd3-selection'
+	import { PlotState } from './PlotState.svelte.js'
+	import { defaultPreset } from './lib/preset.js'
+	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'
+	import Point from './geoms/Point.svelte'
+	import Arc from './geoms/Arc.svelte'
+	import Box from './geoms/Box.svelte'
+	import Violin from './geoms/Violin.svelte'
+	import Heatmap from './geoms/Heatmap.svelte'
+	import Candlestick from './geoms/Candlestick.svelte'
+	import Waterfall from './geoms/Waterfall.svelte'
+	import Hexbin from './geoms/Hexbin.svelte'
+	import Ribbon from './geoms/Ribbon.svelte'
+
+	/**
+	 * @type {{
+	 *   data?: Object[],
+	 *   spec?: import('./lib/plot/types.js').PlotSpec,
+	 *   helpers?: import('./lib/plot/types.js').PlotHelpers,
+	 *   width?: number,
+	 *   height?: number,
+	 *   mode?: 'light' | 'dark',
+	 *   grid?: boolean,
+	 *   axes?: boolean,
+	 *   margin?: { top: number, right: number, bottom: number, left: number },
+	 *   legend?: boolean,
+	 *   title?: string,
+	 *   summary?: string,
+	 *   tooltip?: boolean | ((data: Record<string, unknown>) => string),
+	 *   zoom?: boolean,
+	 *   children?: import('svelte').Snippet,
+	 * }}
+	 */
+	let {
+		data = [],
+		spec = undefined,
+		helpers = {},
+		width = 600,
+		height = 400,
+		mode = 'light',
+		grid = true,
+		axes = true,
+		margin = undefined,
+		legend = false,
+		title = '',
+		summary = '',
+		tooltip = false,
+		zoom = false,
+		xFormat = undefined,
+		yFormat = undefined,
+		xTicks = undefined,
+		yTicks = undefined,
+		minorTicks = false,
+		children
+	} = $props()
+
+	const chartPresetCtx = getContext('chart-preset')
+	const chartPreset = $derived(chartPresetCtx?.current ?? defaultPreset)
+
+	// Responsive width: observe container and use actual pixel width for scale calculations
+	let svgEl = $state(null)
+	let containerEl = $state(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 showLegend = $derived(spec?.legend ?? legend)
+	const chartTitle = $derived(spec?.title ?? title)
+	const chartSummary = $derived(spec?.summary ?? summary)
+
+	// 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(Boolean)
+		if (cols.length > 0) return cols
+		const first = tableData[0]
+		return first ? Object.keys(first) : []
+	})
+
+	function buildPlotConfig() {
+		return {
+			data: spec?.data ?? data,
+			width: effectiveWidth,
+			height: spec?.height ?? height,
+			mode,
+			margin,
+			channels: spec ? { x: spec.x, y: spec.y, color: spec.color ?? spec.fill } : {},
+			labels: spec?.labels ?? {},
+			helpers,
+			xDomain: spec?.xDomain,
+			yDomain: spec?.yDomain,
+			colorDomain: spec?.colorDomain,
+			colorScale: spec?.colorScale,
+			colorScheme: spec?.colorScheme,
+			colorMidpoint: spec?.colorMidpoint,
+			orientation: spec?.orientation,
+			chartPreset
+		}
+	}
+
+	// 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
+		const zoomBehavior = d3Zoom()
+			.scaleExtent([1, 8])
+			.on('zoom', (event) => {
+				plotState.applyZoom(event.transform)
+			})
+		const sel = select(svgEl)
+		sel.call(zoomBehavior)
+		return () => {
+			sel.on('.zoom', null)
+			plotState.resetZoom()
+		}
+	})
+
+	// Geoms from spec (spec-driven API)
+	const specGeoms = $derived(spec?.geoms ?? [])
+
+	// Geom component resolver for spec-driven mode
+	const GEOM_COMPONENTS = {
+		bar: Bar,
+		line: Line,
+		area: Area,
+		point: Point,
+		arc: Arc,
+		box: Box,
+		violin: Violin,
+		heatmap: Heatmap,
+		candlestick: Candlestick,
+		waterfall: Waterfall,
+		hexbin: Hexbin,
+		ribbon: Ribbon
+	}
+
+	/**
+	 * @param {string} type
+	 */
+	function resolveGeomComponent(type) {
+		return helpers?.geoms?.[type] ?? GEOM_COMPONENTS[type]
+	}
+</script>
+
+<div class="plot-root" data-plot-root data-mode={mode} bind:this={containerEl}>
+	{#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}
+	>
+		{#if chartSummary}
+			<desc>{chartSummary}</desc>
+		{/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?.()}
+
+			<!-- 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={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}
+		</g>
+	</svg>
+
+	<!-- Legend (HTML, outside SVG) -->
+	{#if showLegend}
+		<Legend labels={spec?.labels ?? {}} />
+	{/if}
+
+	<!-- Tooltip (HTML, fixed-position overlay) -->
+	{#if tooltip}
+		<Tooltip {tooltip} />
+	{/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}
+			<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}
+			</tbody>
+		</table>
+	{/if}
+</div>
+
+<style>
+	.plot-root {
+		position: relative;
+		width: 100%;
+		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;
+		text-align: center;
+		margin-bottom: 4px;
+	}
+
+	/* Visually hidden — in DOM for screen readers, not visible */
+	.plot-sr-table {
+		position: absolute;
+		width: 1px;
+		height: 1px;
+		padding: 0;
+		margin: -1px;
+		overflow: hidden;
+		clip: rect(0, 0, 0, 0);
+		white-space: nowrap;
+		border: 0;
+	}
+</style>

package/src/PlotState.svelte.js

@@ -0,0 +1,375 @@
+import { untrack } from 'svelte'
+import { SvelteMap, SvelteSet } from 'svelte/reactivity'
+import { applyGeomStat } from './lib/plot/stat.js'
+import {
+	inferFieldType,
+	inferOrientation,
+	buildUnifiedXScale,
+	buildUnifiedYScale,
+	inferColorScaleType
+} from './lib/plot/scales.js'
+import { resolvePreset } from './lib/plot/preset.js'
+import { resolveFormat, resolveTooltip, resolveGeom } from './lib/plot/helpers.js'
+import { defaultPreset } from './lib/preset.js'
+import { distinct, assignColors, isLiteralColor, buildSequentialScale, buildDivergingScale } from './lib/brewing/colors.js'
+import { assignPatterns } from './lib/brewing/patterns.js'
+import { assignSymbols } from './lib/brewing/marks/points.js'
+
+let nextId = 0
+
+export class PlotState {
+	#data = $state([])
+	#rawData = $state([])
+	#channels = $state({})
+	#labels = $state({})
+	#helpers = $state({})
+	#presetName = $state(undefined)
+	#colorMidpoint = $state(undefined)
+	#colorSpec = $state(undefined)
+	#colorScheme = $state(undefined)
+	#colorDomain = $state(undefined)
+	#xDomain = $state(undefined)
+	#yDomain = $state(undefined)
+	#width = $state(600)
+	#height = $state(400)
+	#margin = $state({ top: 20, right: 20, bottom: 40, left: 50 })
+	#marginOverride = $state(undefined)
+
+	#geoms = $state([])
+	#mode = $state('light')
+	#chartPreset = $state(defaultPreset)
+	#hovered = $state(null)
+	#orientationOverride = $state(undefined)
+
+	axisOrigin = $state([undefined, undefined])
+	#axisOffset = $state(0)
+
+	#zoomTransform = $state(null)
+
+	#effectiveMargin = $derived(this.#marginOverride ?? this.#margin)
+	#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.
+	#mergeGeomChannels(tc, geom) {
+		return {
+			x: tc.x ?? geom.channels?.x,
+			y: tc.y ?? geom.channels?.y,
+			color: tc.color ?? geom.channels?.color,
+			pattern: tc.pattern ?? geom.channels?.pattern,
+			symbol: tc.symbol ?? geom.channels?.symbol
+		}
+	}
+
+	#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
+	}
+
+	orientation = $derived.by(() => {
+		if (this.#orientationOverride) return this.#orientationOverride
+		const xField = this.#effectiveChannels.x
+		const yField = this.#effectiveChannels.y
+		if (!xField || !yField) return 'none'
+		const rawXType = inferFieldType(this.#data, xField)
+		const yType = inferFieldType(this.#data, yField)
+		// Bar geoms treat numeric X as categorical (e.g. year on X → vertical bars).
+		return inferOrientation(this.#resolveXType(rawXType, yType), yType)
+	})
+
+	colorScaleType = $derived.by(() => {
+		const field = this.#effectiveChannels.color
+		if (!field) return 'categorical'
+		return inferColorScaleType(this.#data, field, {
+			colorScale: this.#colorSpec,
+			colorMidpoint: this.#colorMidpoint
+		})
+	})
+
+	// Continuous color scale (sequential or diverging) — null for categorical.
+	continuousColorScale = $derived.by(() => {
+		const field = this.#effectiveChannels.color
+		if (!field || this.colorScaleType === 'categorical') return null
+		const opts = {
+			colorScheme: this.#colorScheme,
+			colorDomain: this.#colorDomain,
+			colorMidpoint: this.#colorMidpoint
+		}
+		if (this.colorScaleType === 'diverging') {
+			return buildDivergingScale(this.#data, field, opts)
+		}
+		return buildSequentialScale(this.#data, field, opts)
+	})
+
+	xScale = $derived.by(() => {
+		const field = this.#effectiveChannels.x
+		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'
+		const base = buildUnifiedXScale(datasets, field, this.#innerWidth, {
+			domain: this.#xDomain,
+			includeZero,
+			band: bandX
+		})
+		return this.#zoomTransform && typeof base?.bandwidth !== 'function'
+			? this.#zoomTransform.rescaleX(base)
+			: base
+	})
+
+	// For box/violin geoms, compute y domain from iqr_min/iqr_max instead of raw y values.
+	#resolveBoxDomain() {
+		const boxGeom = this.#geoms.find((g) => g.type === 'box' || g.type === 'violin')
+		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)
+		return mins.length > 0 && maxs.length > 0 ? [Math.min(...mins), Math.max(...maxs)] : null
+	}
+
+	// For stacked bars, compute y domain from per-x column totals.
+	#resolveStackDomain(field) {
+		const stackGeom = this.#geoms.find((g) => g.options?.stack)
+		if (!stackGeom) return null
+		const xField = this.#effectiveChannels.x
+		const stackData = this.geomData(stackGeom.id)
+		if (!xField || stackData.length === 0) return null
+		// Mirror buildStackedBars/subBandFields: stack dimension is the first
+		// non-x field among [color, pattern]. Summing all raw rows (stat=identity)
+		// would overcount when multiple rows share the same (x, stack) key.
+		const colorField = isLiteralColor(this.#effectiveChannels.color)
+			? null
+			: this.#effectiveChannels.color
+		const patternField = this.#effectiveChannels.pattern
+		const stackField = [colorField, patternField].find((f) => f && f !== xField) ?? colorField
+		const lookup = new SvelteMap()
+		for (const d of stackData) {
+			const xVal = d[xField]
+			const cKey = stackField ? String(d[stackField]) : '_'
+			if (!lookup.has(xVal)) lookup.set(xVal, new SvelteMap())
+			lookup.get(xVal).set(cKey, Number(d[field]) || 0)
+		}
+		const totals = new SvelteMap()
+		for (const [xVal, colorMap] of lookup) {
+			totals.set(
+				xVal,
+				[...colorMap.values()].reduce((s, v) => s + v, 0)
+			)
+		}
+		return [0, Math.max(0, ...totals.values())]
+	}
+
+	yScale = $derived.by(() => {
+		const field = this.#effectiveChannels.y
+		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'
+		const yDomain = this.#yDomain ?? this.#resolveBoxDomain() ?? this.#resolveStackDomain(field)
+		const base = buildUnifiedYScale(datasets, field, this.#innerHeight, { domain: yDomain, includeZero })
+		return this.#zoomTransform ? this.#zoomTransform.rescaleY(base) : base
+	})
+
+	// Colors: Map<colorKey, { fill, stroke }> for all distinct color field values.
+	// If the color channel is a CSS literal (e.g. '#4a90d9'), return a singleton map
+	// keyed by null so all marks pick it up via the fallback path.
+	// If a colorDomain is provided (e.g. from FacetPlot for cross-panel consistency),
+	// use it instead of deriving distinct values from the local panel data.
+	colors = $derived.by(() => {
+		const field = this.#effectiveChannels.color
+		if (isLiteralColor(field)) return new Map([[null, { fill: field, stroke: field }]])
+		const values = this.#colorDomain ?? distinct(this.#data, field)
+		// No color channel but data exists → use first preset color for single-series rendering.
+		// This prevents geoms from falling back to gray (#888) on charts with no fill channel.
+		if (values.length === 0 && this.#data.length > 0) return assignColors([null], this.#mode, this.#chartPreset)
+		return assignColors(values, this.#mode, this.#chartPreset)
+	})
+
+	// Patterns: Map<patternKey, patternName> — only populated when a pattern channel is set
+	// and the pattern field is categorical (continuous fields can't be discretely patterned).
+	patterns = $derived.by(() => {
+		const pf = this.#effectiveChannels.pattern
+		if (!pf) return new SvelteMap()
+		if (inferFieldType(this.#data, pf) === 'continuous') return new SvelteMap()
+		return assignPatterns(distinct(this.#data, pf))
+	})
+
+	// Symbols: Map<symbolKey, shapeName> — only populated when a symbol channel is set.
+	symbols = $derived.by(() => {
+		const sf = this.#effectiveChannels.symbol
+		if (!sf) return new SvelteMap()
+		return assignSymbols(distinct(this.#data, sf), this.#chartPreset)
+	})
+
+	// Expose effective channel fields for consumers (e.g. Legend).
+	// Returns null for literal CSS colors since they don't map to a data field.
+	colorField = $derived(
+		isLiteralColor(this.#effectiveChannels.color) ? null : this.#effectiveChannels.color
+	)
+	patternField = $derived(this.#effectiveChannels.pattern)
+	symbolField = $derived(this.#effectiveChannels.symbol)
+
+	// Set of geom types currently registered (used by Legend to pick swatch style)
+	geomTypes = $derived(new SvelteSet(this.#geoms.map((g) => g.type)))
+
+	xAxisY = $derived.by(() => {
+		if (!this.yScale || typeof this.yScale !== 'function') return this.#innerHeight
+		const crossVal = this.axisOrigin[1]
+		if (crossVal !== undefined) return this.yScale(crossVal)
+		const domain = this.yScale.domain?.()
+		if (!domain) return this.#innerHeight
+		// Auto quadrant: place x-axis at y=0 when domain spans zero (no offset)
+		if (domain[0] <= 0 && domain[domain.length - 1] >= 0) return this.yScale(0)
+		// Q1-only: axis at bottom edge, optionally with offset
+		const base = this.yScale(domain[0])
+		return this.#axisOffset ? base + this.#axisOffset : base
+	})
+
+	yAxisX = $derived.by(() => {
+		if (!this.xScale || typeof this.xScale !== 'function') return 0
+		const crossVal = this.axisOrigin[0]
+		if (crossVal !== undefined) return this.xScale(crossVal)
+		const domain = this.xScale.domain?.()
+		if (!domain || typeof this.xScale.bandwidth === 'function') return 0
+		// Auto quadrant: place y-axis at x=0 when domain spans zero (no offset)
+		if (domain[0] <= 0 && domain[domain.length - 1] >= 0) return this.xScale(0)
+		// Q1-only: axis at left edge, optionally with offset
+		const base = this.xScale(domain[0])
+		return this.#axisOffset ? base - this.#axisOffset : base
+	})
+
+	constructor(config = {}) {
+		this.#rawData = config.data ?? []
+		this.#data = config.data ?? []
+		this.#channels = config.channels ?? {}
+		this.#labels = config.labels ?? {}
+		this.#helpers = config.helpers ?? {}
+		this.#presetName = config.preset
+		this.#colorMidpoint = config.colorMidpoint
+		this.#colorSpec = config.colorScale
+		this.#colorScheme = config.colorScheme
+		this.#colorDomain = config.colorDomain
+		this.#xDomain = config.xDomain
+		this.#yDomain = config.yDomain
+		this.#width = config.width ?? 600
+		this.#height = config.height ?? 400
+		this.#mode = config.mode ?? 'light'
+		this.#chartPreset = config.chartPreset ?? defaultPreset
+		this.#axisOffset = config.axisOffset ?? 0
+		this.#marginOverride = config.margin ?? undefined
+		this.#orientationOverride = config.orientation ?? undefined
+	}
+
+	update(config) {
+		if (config.data !== undefined) {
+			this.#rawData = config.data
+			this.#data = config.data
+		}
+		if (config.channels !== undefined) this.#channels = config.channels
+		if (config.labels !== undefined) this.#labels = config.labels
+		if (config.helpers !== undefined) this.#helpers = config.helpers
+		if (config.preset !== undefined) this.#presetName = config.preset
+		if (config.colorMidpoint !== undefined) this.#colorMidpoint = config.colorMidpoint
+		if (config.colorScale !== undefined) this.#colorSpec = config.colorScale
+		if (config.colorScheme !== undefined) this.#colorScheme = config.colorScheme
+		this.#colorDomain = config.colorDomain
+		this.#xDomain = config.xDomain
+		this.#yDomain = config.yDomain
+		if (config.width !== undefined) this.#width = config.width
+		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.axisOffset !== undefined) this.#axisOffset = config.axisOffset
+		this.#marginOverride = config.margin ?? undefined
+		this.#orientationOverride = config.orientation ?? undefined
+	}
+
+	registerGeom(config) {
+		const id = `geom-${nextId++}`
+		this.#geoms = [...this.#geoms, { id, ...config }]
+		return id
+	}
+
+	updateGeom(id, config) {
+		// untrack the read of #geoms to avoid effect_update_depth_exceeded when
+		// called from a geom's $effect (which would otherwise track #geoms as a dependency)
+		this.#geoms = untrack(() => this.#geoms).map((g) => (g.id === id ? { ...g, ...config } : g))
+	}
+
+	unregisterGeom(id) {
+		this.#geoms = this.#geoms.filter((g) => g.id !== id)
+	}
+
+	geomData(id) {
+		const geom = this.#geoms.find((g) => g.id === id)
+		if (!geom) return []
+		const stat = geom.stat ?? 'identity'
+		if (stat === 'identity') return this.#rawData
+		const mergedChannels = { ...this.#channels, ...geom.channels }
+		return applyGeomStat(this.#rawData, { stat, channels: mergedChannels }, this.#helpers)
+	}
+
+	label(field) {
+		return this.#labels?.[field] ?? field
+	}
+
+	format(field) {
+		return resolveFormat(field, this.#helpers)
+	}
+	tooltip() {
+		return resolveTooltip(this.#helpers)
+	}
+	geomComponent(type) {
+		return resolveGeom(type, this.#helpers)
+	}
+	preset() {
+		return resolvePreset(this.#presetName, this.#helpers)
+	}
+
+	get margin() {
+		return this.#effectiveMargin
+	}
+	get innerWidth() {
+		return this.#innerWidth
+	}
+	get innerHeight() {
+		return this.#innerHeight
+	}
+	get mode() {
+		return this.#mode
+	}
+	get chartPreset() {
+		return this.#chartPreset
+	}
+	get hovered() {
+		return this.#hovered
+	}
+
+	setHovered(data) {
+		this.#hovered = data
+	}
+	clearHovered() {
+		this.#hovered = null
+	}
+
+	applyZoom(transform) {
+		this.#zoomTransform = transform
+	}
+	resetZoom() {
+		this.#zoomTransform = null
+	}
+}