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

package/src/elements/ContinuousLegend.svelte

@@ -1,24 +1,27 @@
 <script>
 	import { scaleLinear } from 'd3-scale'
-	import { uniqueId } from '../components/lib/utils'
 
-	export let x = 0
-	export let y = 0
-	export let textSize = 5
-	export let height = 10
-	export let width = 100
-	export let tickCount = 5
-	export let scale
+	let {
+		x = 0,
+		y = 0,
+		textSize = 5,
+		height = 10,
+		width = 100,
+		tickCount = 5,
+		scale,
+		id = 'legend'
+	} = $props()
 
-	$: scaleTicks = scaleLinear()
-		.range([x, x + 100])
-		.domain(scale.domain())
-	$: ticks = scale.ticks
-		.apply(scale, [tickCount])
-		.map((d) => ({ x: scaleTicks(d), label: d }))
+	let scaleTicks = $derived(
+		scaleLinear()
+			.range([x, x + 100])
+			.domain(scale.domain())
+	)
+	let ticks = $derived(
+		scale.ticks.apply(scale, [tickCount]).map((d) => ({ x: scaleTicks(d), label: d }))
+	)
 
-	$: colors = scale.range()
-	$: id = uniqueId('legend-')
+	let colors = $derived(scale.range())
 </script>
 
 <defs>
@@ -28,7 +31,7 @@
 	</linearGradient>
 </defs>
 <rect {x} y={y + height} {width} {height} fill="url(#{id})" />
-{#each ticks as { x, label }}
+{#each ticks as { x, label }, index (index)}
 	<line x1={x} y1={y + (2 * height) / 3} x2={x} y2={y + height * 2} />
 	<text {x} y={y + height / 2} font-size={textSize}>{label}</text>
 {/each}

package/src/elements/DefinePatterns.svelte

@@ -0,0 +1,24 @@
+<script>
+	import { uniq } from 'ramda'
+
+	let {
+		size = 10,
+		patternUnits = 'userSpaceOnUse',
+		/** @type {Array<import('./types').Pattern>} */
+		patterns = []
+	} = $props()
+
+	let names = $derived(uniq(patterns.map(({ id }) => id)))
+</script>
+
+{#if names.length < patterns.length}
+	<error> Patterns should be an array and should have unique names for each pattern </error>
+{:else if patterns.length > 0}
+	<defs>
+		{#each patterns as { id, component: Component, fill, stroke }, index (index)}
+			<pattern {id} {patternUnits} width={size} height={size}>
+				<Component {size} {fill} {stroke} />
+			</pattern>
+		{/each}
+	</defs>
+{/if}

package/src/elements/DiscreteLegend.svelte

@@ -1,22 +1,22 @@
 <script>
-	export let x = 0
-	export let y = 0
-	export let textSize = 5
-	export let size = 10
-	export let space = 2
-	export let padding = 5
-	export let scale
-	export let tickCount
+	let {
+		x = 0,
+		y = 0,
+		textSize = 5,
+		size = 10,
+		space = 2,
+		padding = 5,
+		scale,
+		tickCount = 10
+	} = $props()
 
-	$: sizeWithSpace = size + space
-	$: ticks = scale.ticks.apply(scale, [tickCount])
+	let sizeWithSpace = $derived(size + space)
+	let ticks = $derived(scale.ticks.apply(scale, [tickCount]))
 </script>
 
-{#each ticks as tick, i}
-	<text
-		x={x + padding + i * sizeWithSpace + size / 2}
-		y={y + size / 2}
-		font-size={textSize}>{tick}</text
+{#each ticks as tick, i (i)}
+	<text x={x + padding + i * sizeWithSpace + size / 2} y={y + size / 2} font-size={textSize}
+		>{tick}</text
 	>
 	<rect
 		x={x + padding + i * sizeWithSpace}

package/src/elements/Label.svelte

@@ -1,12 +1,8 @@
 <script>
-	export let small = false
-	export let label
-	export let angle = 0
-	export let anchor = 'middle'
-	export let x
-	export let y
+	let { x, y, text, angle = 0, small = false, anchor = 'middle' } = $props()
 
-	$: transform = `translate(${x},${y}) rotate(${angle})`
+	let transform = $derived(`translate(${x},${y}) rotate(${angle})`)
+	let validAnchor = $derived(['start', 'middle', 'end'].includes(anchor) ? anchor : 'middle')
 </script>
 
-<text class="label" class:small text-anchor={anchor} {transform}>{label}</text>
+<text class="label" class:small text-anchor={validAnchor} {transform}>{text}</text>

package/src/elements/SymbolGrid.svelte

@@ -0,0 +1,22 @@
+<script>
+	import { swatch } from '../lib/swatch'
+	import { swatchGrid } from '../lib/grid'
+	import Symbol from '../Symbol.svelte'
+
+	let { base = 'teal', size = 4, shade = 600 } = $props()
+
+	let grid = $derived(swatchGrid(swatch.keys.symbol.length, size, 10))
+</script>
+
+<svg viewBox="0 0 {grid.width} {grid.height}">
+	{#each grid.data as { x, y, r }, index (index)}
+		<Symbol
+			{x}
+			{y}
+			size={r * 2}
+			name={swatch.keys.symbol[index]}
+			fill={swatch.palette[base][shade]}
+			stroke={swatch.palette[base][shade]}
+		/>
+	{/each}
+</svg>

package/src/elements/index.js

@@ -0,0 +1,6 @@
+export { default as Bar } from './Bar.svelte'
+export { default as ColorRamp } from './ColorRamp.svelte'
+export { default as ContinuousLegend } from './ContinuousLegend.svelte'
+export { default as Label } from './Label.svelte'
+export { default as DefinePatterns } from './DefinePatterns.svelte'
+export { default as SymbolGrid } from './SymbolGrid.svelte'

package/src/examples/BarChartExample.svelte

@@ -0,0 +1,81 @@
+<script>
+	import { Plot } from '../index.js'
+	import { dataset } from '@rokkit/data'
+
+	// Sample data
+	const sampleData = [
+		{ model: 'Model A', name: 'Product 1', category: 'Electronics', count: 45 },
+		{ model: 'Model B', name: 'Product 2', category: 'Clothing', count: 32 },
+		{ model: 'Model C', name: 'Product 3', category: 'Electronics', count: 62 },
+		{ model: 'Model D', name: 'Product 4', category: 'Home', count: 28 },
+		{ model: 'Model E', name: 'Product 5', category: 'Electronics', count: 53 },
+		{ model: 'Model F', name: 'Product 6', category: 'Clothing', count: 24 },
+		{ model: 'Model G', name: 'Product 7', category: 'Home', count: 35 }
+	]
+
+	// Use the dataset class to process the data
+	const data = dataset(sampleData)
+		.groupBy('category')
+		.summarize('name', { count: (values) => values.length })
+		.rollup()
+
+	// Chart dimensions
+	const width = 600
+	const height = 400
+	const margin = { top: 20, right: 100, bottom: 60, left: 60 }
+
+	// Click handler for bars
+	function handleBarClick(item) {
+		console.log('Bar clicked:', item)
+		alert(`Clicked on ${item.category} with count ${item.count}`)
+	}
+</script>
+
+<div class="example">
+	<h2>Bar Chart Example</h2>
+
+	<div class="chart-wrapper">
+		<Plot.Root {data} {width} {height} {margin} fill="category">
+			<Plot.Grid direction="y" lineStyle="dashed" />
+			<Plot.Axis type="x" field="category" label="Product Category" />
+			<Plot.Axis type="y" field="count" label="Number of Products" />
+			<Plot.Bar x="category" y="count" fill="category" onClick={handleBarClick} />
+			<Plot.Legend title="Categories" />
+		</Plot.Root>
+	</div>
+
+	<div class="code-example">
+		<h3>Example Code:</h3>
+		<pre>
+<!-- &lt;script&gt;
+  import { Plot } from '@rokkit/chart';
+  import { dataset } from '@rokkit/data';
+
+  // Sample data
+  const sampleData = [
+    { model: 'Model A', name: 'Product 1', category: 'Electronics', count: 45 },
+    { model: 'Model B', name: 'Product 2', category: 'Clothing', count: 32 },
+    { model: 'Model C', name: 'Product 3', category: 'Electronics', count: 62 },
+    { model: 'Model D', name: 'Product 4', category: 'Home', count: 28 },
+    { model: 'Model E', name: 'Product 5', category: 'Electronics', count: 53 },
+    { model: 'Model F', name: 'Product 6', category: 'Clothing', count: 24 },
+    { model: 'Model G', name: 'Product 7', category: 'Home', count: 35 },
+  ];
+
+  // Use the dataset class to process the data
+  const data = dataset(sampleData)
+    .groupBy('category')
+    .summarize('name', { count: values => values.length })
+    .rollup();
+&lt;/script&gt;
+
+&lt;Plot.Root {data} width={600} height={400} margin={{ top: 20, right: 100, bottom: 60, left: 60 }} fill="category"&gt;
+  &lt;Plot.Grid direction="y" lineStyle="dashed" /&gt;
+  &lt;Plot.Axis type="x" field="category" label="Product Category" /&gt;
+  &lt;Plot.Axis type="y" field="count" label="Number of Products" /&gt;
+  &lt;Plot.Bar x="category" y="count" fill="category" onClick={handleBarClick} /&gt;
+  &lt;Plot.Legend title="Categories" /&gt;
+&lt;/Plot.Root&gt; -->
+    </pre>
+	</div>
+</div>

package/src/geoms/Arc.svelte

@@ -0,0 +1,126 @@
+<script>
+	import { getContext, onMount, onDestroy } from 'svelte'
+	import { buildArcs } from '../lib/brewing/marks/arcs.js'
+
+	/**
+	 * `fill` is the primary prop name; `color` is accepted as an alias for
+	 * spec-driven usage (Plot.svelte passes `color` to all geoms generically).
+	 * @type {{ theta?: string, fill?: string, color?: string, pattern?: string, stat?: string, labelFn?: (data: Record<string, unknown>) => string, options?: { innerRadius?: number } }}
+	 */
+	let {
+		theta,
+		fill,
+		color,
+		pattern,
+		labelFn = undefined,
+		stat = 'identity',
+		options = {},
+		onselect = undefined
+	} = $props()
+
+	const fillField = $derived(fill ?? color)
+
+	const plotState = getContext('plot-state')
+	let id = $state(null)
+
+	onMount(() => {
+		id = plotState.registerGeom({
+			type: 'arc',
+			channels: { color: fillField, y: theta, pattern },
+			stat,
+			options
+		})
+	})
+	onDestroy(() => {
+		if (id) plotState.unregisterGeom(id)
+	})
+
+	$effect(() => {
+		if (id) plotState.updateGeom(id, { channels: { color: fillField, y: theta, pattern }, stat })
+	})
+
+	const data = $derived(id ? plotState.geomData(id) : [])
+	const colors = $derived(plotState.colors)
+	const patterns = $derived(plotState.patterns)
+	const w = $derived(plotState.innerWidth)
+	const h = $derived(plotState.innerHeight)
+
+	const arcs = $derived.by(() => {
+		if (!data?.length) return []
+		// Guard: skip until data catches up after a fill-field change.
+		// When fillField changes, the $effect updates the geom asynchronously, but
+		// this derived runs first with stale data whose rows don't have the new
+		// field — causing all keys to be undefined (duplicate key error).
+		if (fillField && !(fillField in data[0])) return []
+		const innerRadius = ((options.innerRadius ?? 0) * Math.min(w, h)) / 2
+		return buildArcs(
+			data,
+			{ color: fillField, y: theta, pattern },
+			colors,
+			w,
+			h,
+			{ innerRadius },
+			patterns
+		)
+	})
+</script>
+
+{#if arcs.length > 0}
+	<g data-plot-geom="arc" transform="translate({w / 2}, {h / 2})">
+		<!-- svelte-ignore a11y_no_noninteractive_tabindex -->
+		{#each arcs as arc (arc.key)}
+			<path
+				d={arc.d}
+				fill={arc.fill}
+				stroke={arc.stroke}
+				stroke-width="1"
+				role={onselect ? 'button' : 'presentation'}
+				tabindex={onselect ? 0 : undefined}
+				style:cursor={onselect ? 'pointer' : undefined}
+				data-plot-element="arc"
+				onmouseenter={() => plotState.setHovered({ ...arc.data, '%': `${arc.pct}%` })}
+				onmouseleave={() => plotState.clearHovered()}
+				onclick={onselect ? () => onselect({ ...arc.data, '%': `${arc.pct}%` }) : undefined}
+				onkeydown={onselect ? (e) => (e.key === 'Enter' || e.key === ' ') && onselect({ ...arc.data, '%': `${arc.pct}%` }) : undefined}
+			/>
+			{#if arc.patternId}
+				<path
+					d={arc.d}
+					fill="url(#{arc.patternId})"
+					stroke={arc.stroke}
+					stroke-width="1"
+					pointer-events="none"
+					data-plot-element="arc"
+				/>
+			{/if}
+			{#if arc.pct >= 5}
+				{@const labelText = labelFn ? String(labelFn(arc.data) ?? '') : `${arc.pct}%`}
+				{#if labelText}
+					{@const lw = Math.max(36, labelText.length * 7 + 12)}
+					<g
+						transform="translate({arc.centroid[0]},{arc.centroid[1]})"
+						pointer-events="none"
+						data-plot-element="arc-label"
+					>
+						<rect
+							x={-lw / 2}
+							y="-9"
+							width={lw}
+							height="18"
+							rx="4"
+							fill="white"
+							fill-opacity="0.82"
+						/>
+						<text
+							text-anchor="middle"
+							dominant-baseline="central"
+							font-size="11"
+							font-weight="600"
+							fill={arc.stroke}>{labelText}</text
+						>
+					</g>
+				{/if}
+			{/if}
+		{/each}
+	</g>
+{/if}

package/src/geoms/Area.svelte

@@ -0,0 +1,78 @@
+<script>
+	import { getContext, onMount, onDestroy } from 'svelte'
+	import { buildAreas, buildStackedAreas } from './lib/areas.js'
+
+	let { x, y, color, pattern, stat = 'identity', options = {} } = $props()
+
+	const plotState = getContext('plot-state')
+	let id = $state(null)
+
+	onMount(() => {
+		id = plotState.registerGeom({
+			type: 'area',
+			channels: { x, y, color, pattern },
+			stat,
+			options: { stack: options?.stack ?? false }
+		})
+	})
+	onDestroy(() => {
+		if (id) plotState.unregisterGeom(id)
+	})
+
+	$effect(() => {
+		if (id)
+			plotState.updateGeom(id, {
+				channels: { x, y, color, pattern },
+				stat,
+				options: { stack: options?.stack ?? false }
+			})
+	})
+
+	const data = $derived(id ? plotState.geomData(id) : [])
+	const xScale = $derived(plotState.xScale)
+	const yScale = $derived(plotState.yScale)
+	const colors = $derived(plotState.colors)
+	const patterns = $derived(plotState.patterns)
+
+	const areas = $derived.by(() => {
+		if (!data?.length || !xScale || !yScale) return []
+		const channels = { x, y, color, pattern }
+		if (options.stack) {
+			return buildStackedAreas(data, channels, xScale, yScale, colors, options.curve, patterns)
+		}
+		return buildAreas(data, channels, xScale, yScale, colors, options.curve, patterns)
+	})
+</script>
+
+{#if areas.length > 0}
+	<g data-plot-geom="area">
+		{#each areas as seg (seg.key ?? seg.d)}
+			<path
+				d={seg.d}
+				fill={seg.fill}
+				fill-opacity={seg.patternId ? 1 : (options.opacity ?? plotState.chartPreset.opacity.area)}
+				stroke={seg.stroke ?? 'none'}
+				data-plot-element="area"
+			/>
+			{#if seg.patternId}
+				<path d={seg.d} fill="url(#{seg.patternId})" data-plot-element="area" />
+			{/if}
+		{/each}
+		<!-- Invisible hit circles for tooltip: one per data point -->
+		{#each data as d, i (`hover::${i}`)}
+			{@const px = typeof xScale?.bandwidth === 'function' ? (xScale(d[x]) ?? 0) + xScale.bandwidth() / 2 : (xScale?.(d[x]) ?? 0)}
+			{@const py = yScale?.(d[y]) ?? 0}
+			<circle
+				cx={px}
+				cy={py}
+				r="8"
+				fill="transparent"
+				stroke="none"
+				role="presentation"
+				data-plot-element="area-hover"
+				onmouseenter={() => plotState.setHovered(d)}
+				onmouseleave={() => plotState.clearHovered()}
+			/>
+		{/each}
+	</g>
+{/if}

package/src/geoms/Bar.svelte

@@ -0,0 +1,200 @@
+<script>
+	import { getContext, onMount, onDestroy } from 'svelte'
+	import { buildGroupedBars, buildStackedBars, buildHorizontalBars } from './lib/bars.js'
+	import { keyboardNav } from '../lib/keyboard-nav.js'
+	import LabelPill from './LabelPill.svelte'
+
+	let {
+		x,
+		y,
+		color,
+		fill: fillProp,
+		pattern,
+		label = false,
+		stat = 'identity',
+		options = {},
+		filterable = false,
+		onselect = undefined,
+		keyboard = false
+	} = $props()
+
+	// `fill` is accepted as an alias for `color` (consistent with Arc.svelte)
+	const colorChannel = $derived(fillProp ?? color)
+
+	/**
+	 * @param {Record<string, unknown>} data
+	 * @param {string} defaultField
+	 * @returns {string | null}
+	 */
+	function resolveLabel(data, defaultField) {
+		if (!label) return null
+		if (label === true) return String(data[defaultField] ?? '')
+		if (typeof label === 'function') return String(label(data) ?? '')
+		if (typeof label === 'string') return String(data[label] ?? '')
+		return null
+	}
+
+	/**
+	 * Pick white or dark text based on perceived luminance of a hex fill color.
+	 * @param {string | undefined} hex
+	 * @returns {string}
+	 */
+	function contrastColor(hex) {
+		if (!hex || !hex.startsWith('#') || hex.length < 7) return 'white'
+		const r = parseInt(hex.slice(1, 3), 16) / 255
+		const g = parseInt(hex.slice(3, 5), 16) / 255
+		const b = parseInt(hex.slice(5, 7), 16) / 255
+		return 0.299 * r + 0.587 * g + 0.114 * b > 0.55 ? '#333' : 'white'
+	}
+
+	const plotState = getContext('plot-state')
+	const cf = getContext('crossfilter')
+	let id = $state(null)
+
+	onMount(() => {
+		id = plotState.registerGeom({
+			type: 'bar',
+			channels: { x, y, color: colorChannel, pattern },
+			stat,
+			options: { stack: options?.stack ?? false }
+		})
+	})
+	onDestroy(() => {
+		if (id) plotState.unregisterGeom(id)
+	})
+
+	$effect(() => {
+		if (id)
+			plotState.updateGeom(id, {
+				channels: { x, y, color: colorChannel, pattern },
+				stat,
+				options: { stack: options?.stack ?? false }
+			})
+	})
+
+	const data = $derived(id ? plotState.geomData(id) : [])
+	const xScale = $derived(plotState.xScale)
+	const yScale = $derived(plotState.yScale)
+	const colors = $derived(plotState.colors)
+	const patterns = $derived(plotState.patterns)
+	const effectiveOrientation = $derived(options.orientation ?? plotState.orientation)
+	const innerHeight = $derived(plotState.innerHeight)
+
+	const bars = $derived.by(() => {
+		if (!data?.length || !xScale || !yScale) return []
+		const channels = { x, y, color: colorChannel, pattern }
+		if (effectiveOrientation === 'horizontal') {
+			return buildHorizontalBars(data, channels, xScale, yScale, colors, innerHeight)
+		}
+		if (options.stack) {
+			return buildStackedBars(data, channels, xScale, yScale, colors, innerHeight, patterns)
+		}
+		return buildGroupedBars(data, channels, xScale, yScale, colors, innerHeight, patterns)
+	})
+
+	/** @type {Record<string, boolean>} */
+	let dimmedByKey = $state({})
+
+	$effect(() => {
+		if (!cf) {
+			dimmedByKey = {}
+			return
+		}
+		// cf.version is a $state counter that increments on every filter mutation.
+		// Reading it here establishes a reactive dependency so the effect re-runs
+		// whenever any filter changes — including changes from sibling FilterBars.
+		void cf.version
+		const next = /** @type {Record<string, boolean>} */ ({})
+		for (const bar of bars) {
+			const dimmedByX = x ? cf.isDimmed(x, bar.data[x]) : false
+			const dimmedByY = y ? cf.isDimmed(y, bar.data[y]) : false
+			next[bar.key] = dimmedByX || dimmedByY
+		}
+		dimmedByKey = next
+	})
+
+	function handleBarClick(barX) {
+		if (!filterable || !x || !cf) return
+		cf.toggleCategorical(x, barX)
+	}
+</script>
+
+{#if bars.length > 0}
+	<g data-plot-geom="bar">
+		{#each bars as bar (bar.key)}
+			<!-- svelte-ignore a11y_no_noninteractive_tabindex -->
+			<rect
+				x={bar.x}
+				y={bar.y}
+				width={Math.max(0, bar.width)}
+				height={Math.max(0, bar.height)}
+				fill={bar.fill}
+				stroke={bar.stroke ?? 'none'}
+				stroke-width={bar.stroke ? 0.5 : 0}
+				data-plot-element="bar"
+				data-plot-value={bar.data[y]}
+				data-plot-category={bar.data[x]}
+				data-dimmed={dimmedByKey[bar.key] ? true : undefined}
+				style:cursor={filterable || onselect ? 'pointer' : undefined}
+				onclick={filterable && x ? () => { handleBarClick(bar.data[x]); onselect?.(bar.data) } : onselect ? () => onselect(bar.data) : undefined}
+				onkeydown={filterable && x
+					? (e) => (e.key === 'Enter' || e.key === ' ') && handleBarClick(bar.data[x])
+					: onselect ? (e) => (e.key === 'Enter' || e.key === ' ') && onselect(bar.data) : undefined}
+				role={filterable || onselect || keyboard ? 'button' : 'graphics-symbol'}
+				tabindex={filterable || onselect || keyboard ? 0 : undefined}
+				use:keyboardNav={keyboard}
+				aria-label="{bar.data[x]}: {bar.data[y]}"
+				onmouseenter={() => plotState.setHovered(bar.data)}
+				onmouseleave={() => plotState.clearHovered()}
+			>
+				<title>{bar.data[x]}: {bar.data[y]}</title>
+			</rect>
+			{#if bar.patternId}
+				<rect
+					x={bar.x}
+					y={bar.y}
+					width={Math.max(0, bar.width)}
+					height={Math.max(0, bar.height)}
+					fill="url(#{bar.patternId})"
+					pointer-events="none"
+				/>
+			{/if}
+			{#if label}
+				{@const text = resolveLabel(bar.data, effectiveOrientation === 'horizontal' ? x : y)}
+				{#if text}
+					{#if effectiveOrientation === 'horizontal'}
+						{#if options.labelInside}
+							{@const estimatedWidth = text.length * 7 + 16}
+							{@const fitsInside = bar.width >= estimatedWidth}
+							<text
+								x={fitsInside ? bar.x + bar.width - 8 : bar.x + bar.width + 6}
+								y={bar.y + bar.height / 2}
+								dominant-baseline="central"
+								text-anchor={fitsInside ? 'end' : 'start'}
+								font-size="11"
+								font-weight="600"
+								fill={fitsInside ? contrastColor(bar.fill) : (bar.stroke ?? '#555')}
+								pointer-events="none"
+								data-plot-element="label"
+							>{text}</text>
+						{:else}
+							<LabelPill
+								x={bar.x + bar.width + (options.labelOffset ?? 8)}
+								y={bar.y + bar.height / 2}
+								{text}
+								color={bar.stroke ?? '#333'}
+							/>
+						{/if}
+					{:else}
+						<LabelPill
+							x={bar.x + bar.width / 2}
+							y={bar.y + (options.labelOffset ?? -8)}
+							{text}
+							color={bar.stroke ?? '#333'}
+						/>
+					{/if}
+				{/if}
+			{/if}
+		{/each}
+	</g>
+{/if}