@rokkit/chart 1.0.0-next.16 → 1.0.0-next.161

package/src/Plot/Tooltip.svelte

@@ -0,0 +1,87 @@
+<script>
+	import { getContext } from 'svelte'
+
+	/** @type {{ tooltip?: boolean | ((data: Record<string, unknown>) => string) }} */
+	let { tooltip = true } = $props()
+
+	const plotState = getContext('plot-state')
+
+	let mouseX = $state(0)
+	let mouseY = $state(0)
+
+	$effect(() => {
+		function onMove(e) {
+			mouseX = e.clientX
+			mouseY = e.clientY
+		}
+		window.addEventListener('mousemove', onMove)
+		return () => window.removeEventListener('mousemove', onMove)
+	})
+
+	const hovered = $derived(plotState.hovered)
+	const mode = $derived(plotState.mode)
+
+	function formatDefault(data) {
+		return Object.entries(data)
+			.filter(([, v]) => v !== undefined && v !== null)
+			.map(
+				([k, v]) =>
+					`<div class="tt-row"><span class="tt-key">${k}</span><span class="tt-val">${v}</span></div>`
+			)
+			.join('')
+	}
+
+	const content = $derived.by(() => {
+		if (!hovered) return ''
+		if (typeof tooltip === 'function') return String(tooltip(hovered) ?? '')
+		return formatDefault(hovered)
+	})
+</script>
+
+{#if hovered && content}
+	<div
+		class="plot-tooltip"
+		data-mode={mode}
+		style:left="{mouseX + 14}px"
+		style:top="{mouseY - 8}px"
+	>
+		{@html content}
+	</div>
+{/if}
+
+<style>
+	.plot-tooltip {
+		position: fixed;
+		pointer-events: none;
+		z-index: 1000;
+		padding: 8px 10px;
+		border-radius: 6px;
+		font-size: 12px;
+		line-height: 1.5;
+		white-space: nowrap;
+		box-shadow: 0 4px 12px rgb(0 0 0 / 0.12);
+		background: #ffffff;
+		border: 1px solid #e2e8f0;
+		color: #1e293b;
+	}
+
+	.plot-tooltip[data-mode='dark'] {
+		background: #1e293b;
+		border-color: #334155;
+		color: #f1f5f9;
+	}
+
+	:global(.tt-row) {
+		display: flex;
+		gap: 10px;
+		justify-content: space-between;
+	}
+
+	:global(.tt-key) {
+		opacity: 0.65;
+	}
+
+	:global(.tt-val) {
+		font-weight: 600;
+	}
+</style>

package/src/Plot/index.js

@@ -0,0 +1,9 @@
+export { default as Root } from './Root.svelte'
+export { default as Axis } from './Axis.svelte'
+export { default as Bar } from './Bar.svelte'
+export { default as Legend } from './Legend.svelte'
+export { default as Grid } from './Grid.svelte'
+export { default as Line } from './Line.svelte'
+export { default as Area } from './Area.svelte'
+export { default as Point } from './Point.svelte'
+export { default as Arc } from './Arc.svelte'

package/src/Plot.svelte

@@ -0,0 +1,297 @@
+<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'
+
+	/**
+	 * @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,
+		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,
+			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
+	}
+
+	/**
+	 * @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} />
+				<Axis type="y" label={spec?.labels?.[spec?.y ?? ''] ?? ''} format={yFormat} />
+			{/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>