@rokkit/chart 1.0.0-next.99 → 1.0.1

package/src/ChartLegend.svelte

@@ -0,0 +1,148 @@
+<script>
+	import { buildSymbolPath } from './lib/brewing/marks/points.js'
+
+	/**
+	 * Standalone chart legend — HTML-based, usable outside of Plot context.
+	 * Accepts `groups` from a chart's brewer or from multiple charts for shared legends.
+	 *
+	 * @type {{
+	 *   groups: Array<{
+	 *     type?: 'color' | 'pattern' | 'symbol',
+	 *     label?: string,
+	 *     items: Array<{
+	 *       key: string,
+	 *       label: string,
+	 *       fill?: string,
+	 *       stroke?: string,
+	 *       patternId?: string,
+	 *       shape?: string,
+	 *     }>
+	 *   }>,
+	 *   orientation?: 'horizontal' | 'vertical' | 'wrap',
+	 *   gradient?: { style: string, min: string, max: string } | null,
+	 *   swatchStyle?: 'fill' | 'line' | 'point',
+	 * }}
+	 */
+	let {
+		groups = [],
+		orientation = 'horizontal',
+		gradient = null,
+		swatchStyle = 'fill'
+	} = $props()
+</script>
+
+<div
+	class="chart-legend"
+	class:vertical={orientation === 'vertical'}
+	class:horizontal={orientation === 'horizontal' || orientation === 'wrap'}
+	data-chart-legend
+>
+	{#if gradient}
+		<div class="gradient-section">
+			<div class="gradient-bar" style={gradient.style} data-chart-legend-gradient></div>
+			<div class="gradient-labels">
+				<span>{gradient.min}</span>
+				<span>{gradient.max}</span>
+			</div>
+		</div>
+	{:else}
+		{#each groups as group, gi (gi)}
+			{#if group.label}
+				<div class="group-label" data-chart-legend-group-label>{group.label}</div>
+			{/if}
+			<div class="legend-items" class:vertical={orientation === 'vertical'}>
+				{#each group.items as item (item.key)}
+					<div class="legend-item" data-chart-legend-item>
+						{#if swatchStyle === 'line'}
+							<svg width="24" height="14" data-chart-legend-swatch>
+								<line
+									x1="2" y1="7" x2="22" y2="7"
+									stroke={item.stroke ?? item.fill}
+									stroke-width="2"
+									stroke-linecap="round"
+								/>
+								{#if item.shape}
+									<path
+										transform="translate(12,7)"
+										d={buildSymbolPath(item.shape, 4)}
+										fill={item.stroke ?? item.fill}
+									/>
+								{/if}
+							</svg>
+						{:else if swatchStyle === 'point' && item.shape}
+							<svg width="14" height="14" data-chart-legend-swatch>
+								<path
+									transform="translate(7,7)"
+									d={buildSymbolPath(item.shape, 5)}
+									fill={item.fill}
+								/>
+							</svg>
+						{:else if item.patternId}
+							<svg width="14" height="14" data-chart-legend-swatch>
+								<rect width="14" height="14" fill={item.fill} />
+								<rect width="14" height="14" fill="url(#{item.patternId})" />
+							</svg>
+						{:else}
+							<span class="swatch" style:background-color={item.fill} data-chart-legend-swatch></span>
+						{/if}
+						<span class="label" data-chart-legend-label>{item.label}</span>
+					</div>
+				{/each}
+			</div>
+		{/each}
+	{/if}
+</div>
+
+<style>
+	.chart-legend {
+		display: flex;
+		flex-direction: column;
+		gap: 6px;
+		font-size: 12px;
+		overflow-y: auto;
+	}
+	.legend-items {
+		display: flex;
+		flex-wrap: wrap;
+		gap: 8px;
+	}
+	.legend-items.vertical {
+		flex-direction: column;
+	}
+	.legend-item {
+		display: flex;
+		align-items: center;
+		gap: 4px;
+	}
+	.swatch {
+		display: inline-block;
+		width: 14px;
+		height: 14px;
+		border-radius: 2px;
+		flex-shrink: 0;
+	}
+	.group-label {
+		font-weight: 600;
+		font-size: 11px;
+		opacity: 0.7;
+		text-transform: uppercase;
+		letter-spacing: 0.02em;
+	}
+	.gradient-section {
+		display: flex;
+		flex-direction: column;
+		gap: 2px;
+	}
+	.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/ChartProvider.svelte

@@ -0,0 +1,10 @@
+<script>
+	import { setContext } from 'svelte'
+	import { createChartPreset } from './lib/preset.js'
+
+	let { preset = createChartPreset(), children } = $props()
+
+	setContext('chart-preset', { get current() { return preset } })
+</script>
+
+{@render children?.()}

package/src/FacetPlot/Panel.svelte

@@ -0,0 +1,37 @@
+<script>
+	import PlotChart from '../Plot.svelte'
+
+	let {
+		data,
+		x,
+		y,
+		color,
+		geoms = [],
+		helpers = {},
+		width,
+		height,
+		mode,
+		grid,
+		legend,
+		xDomain,
+		yDomain,
+		colorDomain,
+		children
+	} = $props()
+
+	// Build spec with domain overrides so PlotState uses them
+	const spec = $derived({
+		data,
+		x,
+		y,
+		color,
+		geoms,
+		xDomain,
+		yDomain,
+		colorDomain
+	})
+</script>
+
+<PlotChart {spec} {helpers} {width} {height} {mode} {grid} {legend}>
+	{@render children?.()}
+</PlotChart>

package/src/FacetPlot.svelte

@@ -0,0 +1,114 @@
+<script>
+	import { splitByField, getFacetDomains } from './lib/plot/facet.js'
+	import { distinct } from './lib/brewing/colors.js'
+	import PlotPanel from './FacetPlot/Panel.svelte'
+
+	/**
+	 * @type {{
+	 *   data: Object[],
+	 *   facet: { by: string, cols?: number, scales?: 'fixed'|'free'|'free_x'|'free_y' },
+	 *   x?: string,
+	 *   y?: string,
+	 *   color?: string,
+	 *   fill?: string,
+	 *   pattern?: string,
+	 *   symbol?: string,
+	 *   geom?: string,
+	 *   stat?: string,
+	 *   geoms?: import('./lib/plot/types.js').GeomSpec[],
+	 *   helpers?: import('./lib/plot/types.js').PlotHelpers,
+	 *   panelWidth?: number,
+	 *   panelHeight?: number,
+	 *   width?: number,
+	 *   height?: number,
+	 *   mode?: 'light' | 'dark',
+	 *   grid?: boolean,
+	 *   legend?: boolean,
+	 *   children?: import('svelte').Snippet
+	 * }}
+	 */
+	let {
+		data = [],
+		facet,
+		x,
+		y,
+		fill = undefined,
+		color = undefined,
+		pattern = undefined,
+		symbol = undefined,
+		geom = 'bar',
+		stat = 'identity',
+		geoms = [],
+		helpers = {},
+		panelWidth,
+		panelHeight,
+		width = 900,
+		height = 300,
+		mode = 'light',
+		grid = true,
+		legend = false,
+		children
+	} = $props()
+
+	// `fill` is accepted as an alias for `color` (bar/area semantics vs line/point)
+	const colorChannel = $derived(fill ?? color)
+
+	// Effective geom list: explicit array takes precedence; otherwise build from shorthand props
+	const effectiveGeoms = $derived(
+		geoms.length > 0
+			? geoms
+			: [
+					{
+						type: geom,
+						stat,
+						...(pattern !== undefined && { pattern }),
+						...(symbol !== undefined && { symbol })
+					}
+				]
+	)
+
+	const panels = $derived(splitByField(data, facet.by))
+	const scales = $derived(facet.scales ?? 'fixed')
+	const domains = $derived(x && y ? getFacetDomains(panels, { x, y }, scales) : new Map())
+
+	// Global color domain ensures the same value maps to the same color in every panel.
+	const colorDomain = $derived(colorChannel ? distinct(data, colorChannel) : undefined)
+
+	const cols = $derived(facet.cols ?? Math.min(panels.size, 3))
+	const pw = $derived(panelWidth ?? Math.floor(width / cols))
+	const ph = $derived(panelHeight ?? height)
+</script>
+
+<div data-facet-grid style:--facet-cols={cols}>
+	{#each [...panels.entries()] as [facetValue, panelData] (`${facetValue}`)}
+		<div data-facet-panel data-facet-value={facetValue}>
+			<div data-facet-title>{facetValue}</div>
+			<PlotPanel
+				data={panelData}
+				{x}
+				{y}
+				color={colorChannel}
+				geoms={effectiveGeoms}
+				{helpers}
+				width={pw}
+				height={ph}
+				{mode}
+				{grid}
+				legend={false}
+				xDomain={domains.get(facetValue)?.xDomain}
+				yDomain={domains.get(facetValue)?.yDomain}
+				{colorDomain}
+			>
+				<!-- Render caller-supplied geoms inside every panel (each gets its own PlotState context) -->
+				{@render children?.()}
+			</PlotPanel>
+		</div>
+	{/each}
+</div>
+
+<!-- Single shared legend outside the grid -->
+{#if legend}
+	<div data-facet-legend>
+		<!-- Legend content rendered by first panel; simplified for now -->
+	</div>
+{/if}

package/src/Plot/Arc.svelte

@@ -0,0 +1,29 @@
+<script>
+	import { getContext } from 'svelte'
+
+	const brewer = getContext('chart-brewer')
+</script>
+
+{#if brewer && brewer.arcs && brewer.arcs.length > 0}
+	<g
+		class="chart-arcs"
+		data-plot-type="arc"
+		transform="translate({brewer.width / 2}, {brewer.height / 2})"
+	>
+		{#each brewer.arcs as arc (arc.key)}
+			<path
+				d={arc.d}
+				fill={arc.fill}
+				stroke={arc.stroke}
+				stroke-width="1"
+				data-plot-element="arc"
+			/>
+		{/each}
+	</g>
+{/if}
+
+<style>
+	.chart-arcs {
+		pointer-events: none;
+	}
+</style>

package/src/Plot/Area.svelte

@@ -0,0 +1,32 @@
+<script>
+	import { getContext } from 'svelte'
+	import { area as d3Area } from 'd3-shape'
+
+	let {
+		data = [],
+		x = undefined,
+		y = undefined,
+		y0 = undefined,
+		fill = 'steelblue',
+		opacity = 0.7,
+		curve = undefined
+	} = $props()
+
+	const state = getContext('plot-state')
+
+	const path = $derived.by(() => {
+		if (!state?.xScale || !state?.yScale || !data?.length) return null
+		const innerHeight = state.innerHeight
+		const areaGen = d3Area()
+			.x((d) => state.xScale(x ? d[x] : d) ?? 0)
+			.y1((d) => state.yScale(y ? d[y] : d) ?? 0)
+			.y0((d) => (y0 !== undefined ? state.yScale(d[y0] ?? y0) : innerHeight) ?? innerHeight)
+			.defined((d) => d != null)
+		if (curve) areaGen.curve(curve)
+		return areaGen(data)
+	})
+</script>
+
+{#if path}
+	<path d={path} {fill} {opacity} stroke="none" data-plot-element="area" />
+{/if}

package/src/Plot/Axis.svelte

@@ -0,0 +1,164 @@
+<script>
+	import { getContext } from 'svelte'
+
+	/**
+	 * @type {{
+	 *   type?: 'x' | 'y',
+	 *   label?: string,
+	 *   format?: (v: unknown) => string,
+	 *   ticks?: number,
+	 *   minorTicks?: boolean,
+	 *   showLine?: boolean,
+	 *   showTicks?: boolean,
+	 *   showLabels?: boolean,
+	 * }}
+	 */
+	let {
+		type = 'x',
+		label = '',
+		format = undefined,
+		ticks: tickCount = 6,
+		minorTicks = false,
+		showLine = true,
+		showTicks = true,
+		showLabels = true
+	} = $props()
+
+	const state = getContext('plot-state')
+
+	const MINOR_DIVISIONS = 4
+
+	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,
+				minor: false
+			}))
+		}
+		const major = s.ticks(tickCount).map((val) => ({ value: val, pos: s(val), minor: false }))
+		if (!minorTicks || major.length < 2) return major
+		const result = []
+		for (let i = 0; i < major.length; i++) {
+			result.push(major[i])
+			if (i < major.length - 1) {
+				const step = (major[i + 1].pos - major[i].pos) / MINOR_DIVISIONS
+				for (let j = 1; j < MINOR_DIVISIONS; j++) {
+					result.push({ value: null, pos: major[i].pos + step * j, minor: true })
+				}
+			}
+		}
+		return result
+	})
+
+	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,
+				minor: false
+			}))
+		}
+		const major = s.ticks(tickCount).map((val) => ({ value: val, pos: s(val), minor: false }))
+		if (!minorTicks || major.length < 2) return major
+		const result = []
+		for (let i = 0; i < major.length; i++) {
+			result.push(major[i])
+			if (i < major.length - 1) {
+				const step = (major[i + 1].pos - major[i].pos) / MINOR_DIVISIONS
+				for (let j = 1; j < MINOR_DIVISIONS; j++) {
+					result.push({ value: null, pos: major[i].pos + step * j, minor: true })
+				}
+			}
+		}
+		return result
+	})
+
+	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">
+		{#if showLine}
+			<line x1="0" y1="0" x2={state.innerWidth} y2="0" data-plot-axis-line />
+		{/if}
+		{#each xTicks as tick (tick.minor ? `minor-${tick.pos}` : tick.value)}
+			<g transform="translate({tick.pos}, 0)" data-plot-tick>
+				{#if showTicks}
+					<line
+						x1="0" y1="0" x2="0"
+						y2={tick.minor ? 3 : 6}
+						stroke="currentColor"
+						opacity={tick.minor ? 0.4 : 1}
+					/>
+				{/if}
+				{#if showLabels && !tick.minor}
+					<text x="0" y="9" text-anchor="middle" dominant-baseline="hanging" data-plot-tick-label>
+						{format ? format(tick.value) : tick.value}
+					</text>
+				{/if}
+			</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">
+		{#if showLine}
+			<line x1="0" y1="0" x2="0" y2={state.innerHeight} data-plot-axis-line />
+		{/if}
+		{#each yTicks as tick (tick.minor ? `minor-${tick.pos}` : tick.value)}
+			<g transform="translate(0, {tick.pos})" data-plot-tick>
+				{#if showTicks}
+					<line
+						x1={tick.minor ? -3 : -6} y1="0" x2="0" y2="0"
+						stroke="currentColor"
+						opacity={tick.minor ? 0.4 : 1}
+					/>
+				{/if}
+				{#if showLabels && !tick.minor}
+					<text x="-9" y="0" text-anchor="end" dominant-baseline="middle" data-plot-tick-label>
+						{format ? format(tick.value) : tick.value}
+					</text>
+				{/if}
+			</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>