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

package/src/Plot/Axis.svelte

@@ -0,0 +1,95 @@
+<script>
+	import { getContext } from 'svelte'
+
+	/** @type {'x' | 'y'} */
+	let { type = 'x', label = '', format = undefined } = $props()
+
+	const state = getContext('plot-state')
+
+	const xTicks = $derived.by(() => {
+		const s = state.xScale
+		if (!s) return []
+		if (typeof s.bandwidth === 'function') {
+			return s.domain().map((val) => ({
+				value: val,
+				pos: (s(val) ?? 0) + s.bandwidth() / 2
+			}))
+		}
+		return s.ticks(6).map((val) => ({ value: val, pos: s(val) }))
+	})
+
+	const yTicks = $derived.by(() => {
+		const s = state.yScale
+		if (!s) return []
+		if (typeof s.bandwidth === 'function') {
+			return s.domain().map((val) => ({
+				value: val,
+				pos: (s(val) ?? 0) + s.bandwidth() / 2
+			}))
+		}
+		return s.ticks(6).map((val) => ({ value: val, pos: s(val) }))
+	})
+
+	const xTransform = $derived(`translate(0, ${state.xAxisY ?? state.innerHeight})`)
+	const yTransform = $derived(`translate(${state.yAxisX ?? 0}, 0)`)
+</script>
+
+{#if type === 'x'}
+	<g class="axis x-axis" transform={xTransform} data-plot-axis="x">
+		<line x1="0" y1="0" x2={state.innerWidth} y2="0" data-plot-axis-line />
+		{#each xTicks as tick (tick.value)}
+			<g transform="translate({tick.pos}, 0)" data-plot-tick>
+				<line x1="0" y1="0" x2="0" y2="6" stroke="currentColor" />
+				<text x="0" y="9" text-anchor="middle" dominant-baseline="hanging" data-plot-tick-label>
+					{format ? format(tick.value) : tick.value}
+				</text>
+			</g>
+		{/each}
+		{#if label}
+			<text
+				x={state.innerWidth / 2}
+				y="36"
+				text-anchor="middle"
+				class="axis-label"
+				data-plot-axis-label>{label}</text
+			>
+		{/if}
+	</g>
+{:else}
+	<g class="axis y-axis" transform={yTransform} data-plot-axis="y">
+		<line x1="0" y1="0" x2="0" y2={state.innerHeight} data-plot-axis-line />
+		{#each yTicks as tick (tick.value)}
+			<g transform="translate(0, {tick.pos})" data-plot-tick>
+				<line x1="-6" y1="0" x2="0" y2="0" stroke="currentColor" />
+				<text x="-9" y="0" text-anchor="end" dominant-baseline="middle" data-plot-tick-label>
+					{format ? format(tick.value) : tick.value}
+				</text>
+			</g>
+		{/each}
+		{#if label}
+			<text
+				transform="rotate(-90)"
+				x={-(state.innerHeight / 2)}
+				y="-40"
+				text-anchor="middle"
+				class="axis-label"
+				data-plot-axis-label>{label}</text
+			>
+		{/if}
+	</g>
+{/if}
+
+<style>
+	.axis {
+		font-size: 11px;
+		fill: currentColor;
+		stroke: currentColor;
+	}
+	.axis-label {
+		font-size: 13px;
+		font-weight: 500;
+	}
+	[data-plot-axis-line] {
+		stroke: currentColor;
+	}
+</style>

package/src/Plot/Bar.svelte

@@ -0,0 +1,54 @@
+<script>
+	import { getContext } from 'svelte'
+
+	let { data = undefined, x = undefined, y = undefined, fill = 'steelblue', opacity = 1 } = $props()
+
+	const state = getContext('plot-state')
+
+	const bars = $derived.by(() => {
+		if (!state?.xScale || !state?.yScale) return []
+		const xScale = state.xScale
+		const yScale = state.yScale
+		const innerHeight = state.innerHeight
+		const src = data ?? []
+		if (!src.length) return []
+
+		const bw = typeof xScale.bandwidth === 'function' ? xScale.bandwidth() : 20
+		const padding = typeof xScale.bandwidth === 'function' ? bw * 0.05 : 0
+
+		// Baseline at y=0 when domain spans zero (supports negative bars)
+		const yDomain = typeof yScale.bandwidth !== 'function' ? yScale.domain?.() : null
+		const baseline =
+			yDomain && yDomain[0] <= 0 && yDomain[yDomain.length - 1] >= 0
+				? (yScale(0) ?? innerHeight)
+				: innerHeight
+
+		return src.map((d) => {
+			const xVal = x ? d[x] : d
+			const yVal = y ? d[y] : d
+			const xPos = (xScale(xVal) ?? 0) + padding
+			const yPos = yScale(yVal) ?? baseline
+			return {
+				x: xPos,
+				y: Math.min(yPos, baseline),
+				width: bw * 0.9,
+				height: Math.abs(baseline - yPos),
+				label: `${xVal}: ${yVal}`
+			}
+		})
+	})
+</script>
+
+{#each bars as bar, i (i)}
+	<rect
+		x={bar.x}
+		y={bar.y}
+		width={bar.width}
+		height={bar.height}
+		{fill}
+		{opacity}
+		data-plot-element="bar"
+		role="graphics-symbol"
+		aria-label={bar.label}
+	/>
+{/each}

package/src/Plot/Grid.svelte

@@ -0,0 +1,34 @@
+<script>
+	import { getContext } from 'svelte'
+
+	const state = getContext('plot-state')
+
+	const xGridLines = $derived.by(() => {
+		const s = state.xScale
+		if (!s || typeof s.bandwidth !== 'function') return []
+		return s.domain().map((val) => ({ pos: (s(val) ?? 0) + s.bandwidth() / 2 }))
+	})
+
+	const yGridLines = $derived.by(() => {
+		const s = state.yScale
+		if (!s || typeof s.ticks !== 'function') return []
+		return s.ticks(6).map((val) => ({ pos: s(val) }))
+	})
+</script>
+
+<g class="grid" data-plot-grid>
+	{#each yGridLines as line (line.pos)}
+		<line x1="0" y1={line.pos} x2={state.innerWidth} y2={line.pos} data-plot-grid-line />
+	{/each}
+	{#each xGridLines as line (line.pos)}
+		<line x1={line.pos} y1="0" x2={line.pos} y2={state.innerHeight} data-plot-grid-line="x" />
+	{/each}
+</g>
+
+<style>
+	[data-plot-grid-line] {
+		stroke: var(--chart-grid-color, currentColor);
+		opacity: 0.15;
+		stroke-dasharray: 2 4;
+	}
+</style>

package/src/Plot/Legend.svelte

@@ -0,0 +1,233 @@
+<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'
+				}))
+			: []
+	)
+
+	const gradientStyle = $derived.by(() => {
+		if (isCategorical) return ''
+		return `background: linear-gradient(to right, #cfe2f3, #084594)`
+	})
+</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>
+	</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;
+	}
+</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>