@rokkit/chart 1.0.0-next.99 → 1.0.2

package/src/Plot/Legend.svelte

@@ -0,0 +1,268 @@
+<script>
+	import { getContext } from 'svelte'
+	import { toPatternId } from '../lib/brewing/patterns.js'
+	import { buildSymbolPath } from '../lib/brewing/marks/points.js'
+
+	/** @type {Record<string, string>} */
+	let { labels = {} } = $props()
+
+	const state = getContext('plot-state')
+
+	const isCategorical = $derived(state.colorScaleType === 'categorical')
+	const isLineGeom = $derived(state.geomTypes?.has('line') ?? false)
+	const isPointGeom = $derived(state.geomTypes?.has('point') ?? false)
+	const hasSymbols = $derived((state.symbols?.size ?? 0) > 0)
+
+	// Split conditions
+	const splitPattern = $derived(
+		!!state.colorField && !!state.patternField && state.colorField !== state.patternField
+	)
+	const splitSymbol = $derived(
+		hasSymbols &&
+			!!state.colorField &&
+			!!state.symbolField &&
+			state.colorField !== state.symbolField
+	)
+	const symbolOnly = $derived(hasSymbols && !state.colorField)
+
+	// Color section items — combined with same-field pattern/symbol overlays
+	const colorItems = $derived(
+		[...(state.colors?.entries() ?? [])].map(([key, entry]) => ({
+			key,
+			label: labels[String(key)] ?? String(key),
+			fill: entry.fill,
+			stroke: entry.stroke,
+			patternId: !splitPattern && state.patterns?.has(key) ? toPatternId(String(key)) : null,
+			symbolShape: !splitSymbol && state.symbols?.get(key) ? state.symbols.get(key) : null
+		}))
+	)
+
+	// Pattern section — only when pattern encodes a different field than color
+	const patternItems = $derived(
+		splitPattern
+			? [...(state.patterns?.entries() ?? [])].map(([key]) => ({
+					key,
+					label: labels[String(key)] ?? String(key),
+					patternId: toPatternId(String(key))
+				}))
+			: []
+	)
+
+	// Symbol section — only when symbol encodes a different field than color, or symbol-only
+	const symbolItems = $derived(
+		splitSymbol || symbolOnly
+			? [...(state.symbols?.entries() ?? [])].map(([key, shape]) => ({
+					key,
+					label: labels[String(key)] ?? String(key),
+					shape,
+					fill: state.colors?.get(key)?.fill ?? '#888',
+					stroke: state.colors?.get(key)?.stroke ?? '#888'
+				}))
+			: []
+	)
+
+	// For continuous color scales, build a CSS gradient from sampled stops
+	const GRADIENT_STOPS = 10
+	const gradientStyle = $derived.by(() => {
+		const cs = state.continuousColorScale
+		if (!cs) return 'background: linear-gradient(to right, #cfe2f3, #084594)'
+		const domain = cs.domain
+		const min = domain[0]
+		const max = domain[domain.length - 1]
+		const stops = Array.from({ length: GRADIENT_STOPS + 1 }, (_, i) => {
+			const t = i / GRADIENT_STOPS
+			const value = min + t * (max - min)
+			return `${cs.scale(value)} ${(t * 100).toFixed(0)}%`
+		})
+		return `background: linear-gradient(to right, ${stops.join(', ')})`
+	})
+
+	// Min/max labels for continuous legend
+	const continuousLabels = $derived.by(() => {
+		const cs = state.continuousColorScale
+		if (!cs) return null
+		const domain = cs.domain
+		const fmt = state.format(state.colorField)
+		const min = fmt ? fmt(domain[0]) : String(domain[0])
+		const max = fmt ? fmt(domain[domain.length - 1]) : String(domain[domain.length - 1])
+		return { min, max }
+	})
+</script>
+
+{#if isCategorical}
+	<div class="legend-root" data-plot-legend>
+		<!-- Symbol-only: no color field, just symbol shapes -->
+		{#if symbolOnly}
+			<div class="legend categorical">
+				{#each symbolItems as item (item.key)}
+					<div class="legend-item" data-plot-legend-item>
+						<svg width="14" height="14" data-plot-legend-swatch>
+							<path
+								transform="translate(7,7)"
+								d={buildSymbolPath(item.shape, 5)}
+								fill={item.fill}
+							/>
+						</svg>
+						<span class="label" data-plot-legend-label>{item.label}</span>
+					</div>
+				{/each}
+			</div>
+
+			<!-- Color section (line, point, or fill swatches) -->
+		{:else if colorItems.length > 0}
+			<div class="legend categorical">
+				{#each colorItems as item (item.key)}
+					<div class="legend-item" data-plot-legend-item>
+						{#if isLineGeom}
+							<!-- Line swatch with optional combined symbol -->
+							<svg width="24" height="14" data-plot-legend-swatch>
+								<line
+									x1="2"
+									y1="7"
+									x2="22"
+									y2="7"
+									stroke={item.stroke}
+									stroke-width="2"
+									stroke-linecap="round"
+								/>
+								{#if item.symbolShape}
+									<path
+										transform="translate(12,7)"
+										d={buildSymbolPath(item.symbolShape, 4)}
+										fill={item.stroke}
+									/>
+								{/if}
+							</svg>
+						{:else if isPointGeom && item.symbolShape}
+							<!-- Symbol shape swatch for scatter -->
+							<svg width="14" height="14" data-plot-legend-swatch>
+								<path
+									transform="translate(7,7)"
+									d={buildSymbolPath(item.symbolShape, 5)}
+									fill={item.fill}
+								/>
+							</svg>
+						{:else if item.patternId}
+							<!-- Fill + pattern overlay -->
+							<svg width="14" height="14" data-plot-legend-swatch>
+								<rect width="14" height="14" fill={item.fill} />
+								<rect width="14" height="14" fill="url(#{item.patternId})" />
+							</svg>
+						{:else}
+							<!-- Plain fill swatch -->
+							<span class="swatch" style:background-color={item.fill} data-plot-legend-swatch
+							></span>
+						{/if}
+						<span class="label" data-plot-legend-label>{item.label}</span>
+					</div>
+				{/each}
+			</div>
+		{/if}
+
+		<!-- Pattern section (different field from color) -->
+		{#if patternItems.length > 0}
+			<div class="legend categorical legend-section">
+				{#each patternItems as item (item.key)}
+					<div class="legend-item" data-plot-legend-item>
+						<svg width="14" height="14" data-plot-legend-swatch>
+							<rect width="14" height="14" fill="var(--color-surface-z2, #ccc)" />
+							<rect width="14" height="14" fill="url(#{item.patternId})" />
+						</svg>
+						<span class="label" data-plot-legend-label>{item.label}</span>
+					</div>
+				{/each}
+			</div>
+		{/if}
+
+		<!-- Symbol section (different field from color) -->
+		{#if symbolItems.length > 0 && !symbolOnly}
+			<div class="legend categorical legend-section">
+				{#each symbolItems as item (item.key)}
+					<div class="legend-item" data-plot-legend-item>
+						{#if isLineGeom}
+							<svg width="24" height="14" data-plot-legend-swatch>
+								<line
+									x1="2"
+									y1="7"
+									x2="22"
+									y2="7"
+									stroke={item.stroke ?? item.fill}
+									stroke-width="2"
+									stroke-linecap="round"
+									stroke-dasharray="4 2"
+								/>
+								<path
+									transform="translate(12,7)"
+									d={buildSymbolPath(item.shape, 4)}
+									fill={item.stroke ?? item.fill}
+								/>
+							</svg>
+						{:else}
+							<svg width="14" height="14" data-plot-legend-swatch>
+								<path
+									transform="translate(7,7)"
+									d={buildSymbolPath(item.shape, 5)}
+									fill={item.fill}
+								/>
+							</svg>
+						{/if}
+						<span class="label" data-plot-legend-label>{item.label}</span>
+					</div>
+				{/each}
+			</div>
+		{/if}
+	</div>
+{:else}
+	<div class="legend gradient" data-plot-legend>
+		<div class="gradient-bar" style={gradientStyle} data-plot-legend-gradient></div>
+		{#if continuousLabels}
+			<div class="gradient-labels">
+				<span>{continuousLabels.min}</span>
+				<span>{continuousLabels.max}</span>
+			</div>
+		{/if}
+	</div>
+{/if}
+
+<style>
+	.legend-root {
+		display: flex;
+		flex-direction: column;
+		gap: 6px;
+		margin-top: 8px;
+	}
+	.legend {
+		display: flex;
+		flex-wrap: wrap;
+		gap: 8px;
+		font-size: 12px;
+	}
+	.legend-section {
+		border-top: 1px solid var(--color-surface-z3, #e0e0e0);
+		padding-top: 6px;
+	}
+	.legend-item {
+		display: flex;
+		align-items: center;
+		gap: 4px;
+	}
+	.swatch {
+		display: inline-block;
+		width: 14px;
+		height: 14px;
+		border-radius: 2px;
+		flex-shrink: 0;
+	}
+	.gradient-bar {
+		width: 180px;
+		height: 14px;
+		border-radius: 2px;
+	}
+	.gradient-labels {
+		display: flex;
+		justify-content: space-between;
+		width: 180px;
+		font-size: 11px;
+		opacity: 0.8;
+	}
+</style>

package/src/Plot/Line.svelte

@@ -0,0 +1,37 @@
+<script>
+	import { getContext } from 'svelte'
+	import { line as d3Line } from 'd3-shape'
+
+	let {
+		data = [],
+		x = undefined,
+		y = undefined,
+		stroke = 'steelblue',
+		strokeWidth = 2,
+		curve = undefined
+	} = $props()
+
+	const state = getContext('plot-state')
+
+	const path = $derived.by(() => {
+		if (!state?.xScale || !state?.yScale || !data?.length) return null
+		const lineGen = d3Line()
+			.x((d) => state.xScale(x ? d[x] : d) ?? 0)
+			.y((d) => state.yScale(y ? d[y] : d) ?? 0)
+			.defined((d) => d != null)
+		if (curve) lineGen.curve(curve)
+		return lineGen(data)
+	})
+</script>
+
+{#if path}
+	<path
+		d={path}
+		fill="none"
+		{stroke}
+		stroke-width={strokeWidth}
+		stroke-linejoin="round"
+		stroke-linecap="round"
+		data-plot-element="line"
+	/>
+{/if}

package/src/Plot/Point.svelte

@@ -0,0 +1,40 @@
+<script>
+	import { getContext } from 'svelte'
+
+	let {
+		data = [],
+		x = undefined,
+		y = undefined,
+		r = 4,
+		fill = 'steelblue',
+		stroke = 'white',
+		strokeWidth = 1
+	} = $props()
+
+	const state = getContext('plot-state')
+
+	const points = $derived.by(() => {
+		if (!state?.xScale || !state?.yScale || !data?.length) return []
+		return data
+			.map((d) => ({
+				cx: state.xScale(x ? d[x] : d) ?? null,
+				cy: state.yScale(y ? d[y] : d) ?? null,
+				label: `(${x ? d[x] : d}, ${y ? d[y] : d})`
+			}))
+			.filter((p) => p.cx !== null && p.cy !== null)
+	})
+</script>
+
+{#each points as pt, i (i)}
+	<circle
+		cx={pt.cx}
+		cy={pt.cy}
+		{r}
+		{fill}
+		{stroke}
+		stroke-width={strokeWidth}
+		data-plot-element="point"
+		role="graphics-symbol"
+		aria-label={pt.label}
+	/>
+{/each}

package/src/Plot/Root.svelte

@@ -0,0 +1,62 @@
+<script>
+	import { setContext, untrack } from 'svelte'
+	import { PlotState } from '../PlotState.svelte.js'
+	import { defaultPreset } from '../lib/preset.js'
+
+	let {
+		data = [],
+		x = undefined,
+		y = undefined,
+		color = undefined,
+		width = 600,
+		height = 400,
+		margin = undefined,
+		mode = 'light',
+		children
+	} = $props()
+
+	const plotState = untrack(
+		() =>
+			new PlotState({
+				data,
+				channels: { x, y, color },
+				width,
+				height,
+				margin,
+				mode,
+				chartPreset: defaultPreset
+			})
+	)
+
+	$effect(() => {
+		plotState.update({
+			data,
+			channels: { x, y, color },
+			width,
+			height,
+			margin,
+			mode,
+			chartPreset: defaultPreset
+		})
+	})
+
+	setContext('plot-state', plotState)
+
+	const svgWidth = $derived(plotState.innerWidth + (margin?.left ?? 50) + (margin?.right ?? 30))
+	const svgHeight = $derived(plotState.innerHeight + (margin?.top ?? 20) + (margin?.bottom ?? 40))
+	const marginLeft = $derived(margin?.left ?? 50)
+	const marginTop = $derived(margin?.top ?? 20)
+</script>
+
+<svg
+	{width}
+	{height}
+	viewBox="0 0 {svgWidth} {svgHeight}"
+	role="img"
+	aria-label="Chart visualization"
+	data-plot-root
+>
+	<g transform="translate({marginLeft}, {marginTop})" data-plot-canvas>
+		{@render children?.()}
+	</g>
+</svg>

package/src/Plot/Timeline.svelte

@@ -0,0 +1,95 @@
+<script>
+	/**
+	 * @type {{
+	 *   frameKeys: unknown[],
+	 *   currentIndex: number,
+	 *   playing: boolean,
+	 *   speed: number,
+	 *   onplay: () => void,
+	 *   onpause: () => void,
+	 *   onscrub: (index: number) => void,
+	 *   onspeed: (speed: number) => void
+	 * }}
+	 */
+	let {
+		frameKeys = [],
+		currentIndex = 0,
+		playing = false,
+		speed = 1,
+		onplay,
+		onpause,
+		onscrub,
+		onspeed
+	} = $props()
+
+	const safeIndex = $derived(
+		frameKeys.length === 0 ? 0 : Math.min(currentIndex, frameKeys.length - 1)
+	)
+
+	const SPEEDS = [0.5, 1, 1.5, 2, 4]
+</script>
+
+<div class="timeline" data-plot-timeline>
+	<!-- Play / Pause -->
+	<button
+		class="play-pause"
+		aria-label={playing ? 'Pause' : 'Play'}
+		onclick={() => (playing ? onpause?.() : onplay?.())}
+		disabled={frameKeys.length === 0}
+		data-plot-timeline-playpause
+	>
+		{playing ? '⏸' : '▶'}
+	</button>
+
+	<!-- Frame label -->
+	<span class="frame-label" data-plot-timeline-label>{frameKeys[safeIndex] ?? ''}</span>
+
+	<!-- Scrub slider -->
+	<input
+		type="range"
+		min="0"
+		max={Math.max(0, frameKeys.length - 1)}
+		value={safeIndex}
+		disabled={frameKeys.length === 0}
+		class="scrub"
+		aria-label="Animation timeline"
+		oninput={(e) => onscrub?.(Number(e.currentTarget.value))}
+		data-plot-timeline-scrub
+	/>
+
+	<!-- Speed selector -->
+	<select
+		aria-label="Playback speed"
+		value={speed}
+		onchange={(e) => onspeed?.(Number(e.currentTarget.value))}
+		data-plot-timeline-speed
+	>
+		{#each SPEEDS as s (s)}
+			<option value={s}>{s}×</option>
+		{/each}
+	</select>
+</div>
+
+<style>
+	.timeline {
+		display: flex;
+		align-items: center;
+		gap: 8px;
+		padding: 8px 0;
+		font-size: 12px;
+	}
+	.play-pause {
+		font-size: 16px;
+		cursor: pointer;
+		background: none;
+		border: none;
+		padding: 0;
+	}
+	.scrub {
+		flex: 1;
+	}
+	.frame-label {
+		min-width: 4ch;
+		text-align: right;
+	}
+</style>

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'