@rokkit/chart 1.0.0-next.151 → 1.0.0-next.155

package/src/geoms/Point.svelte

@@ -1,105 +1,145 @@
 <script>
-  import { getContext, onMount, onDestroy } from 'svelte'
-  import { scaleSqrt } from 'd3-scale'
-  import { buildPoints } from '../lib/brewing/marks/points.js'
-  import LabelPill from './LabelPill.svelte'
+	import { getContext, onMount, onDestroy } from 'svelte'
+	import { scaleSqrt } from 'd3-scale'
+	import { buildPoints } from '../lib/brewing/marks/points.js'
+	import { keyboardNav } from '../lib/keyboard-nav.js'
+	import LabelPill from './LabelPill.svelte'
 
-  let { x, y, color, size, symbol: symbolField, label = false, stat = 'identity', options = {} } = $props()
+	let {
+		x,
+		y,
+		color,
+		size,
+		symbol: symbolField,
+		label = false,
+		stat = 'identity',
+		options = {},
+		onselect = undefined,
+		keyboard = false
+	} = $props()
 
-  /**
-   * @param {Record<string, unknown>} data
-   * @returns {string | null}
-   */
-  function resolveLabel(data) {
-    if (!label) return null
-    if (label === true) return String(data[y] ?? '')
-    if (typeof label === 'function') return String(label(data) ?? '')
-    return typeof label === 'string' ? String(data[label] ?? '') : null
-  }
+	/**
+	 * @param {Record<string, unknown>} data
+	 * @returns {string | null}
+	 */
+	function resolveLabel(data) {
+		if (!label) return null
+		if (label === true) return String(data[y] ?? '')
+		if (typeof label === 'function') return String(label(data) ?? '')
+		return typeof label === 'string' ? String(data[label] ?? '') : null
+	}
 
-  const plotState = getContext('plot-state')
-  let id = $state(null)
+	const plotState = getContext('plot-state')
+	let id = $state(null)
 
-  onMount(() => {
-    id = plotState.registerGeom({ type: 'point', channels: { x, y, color, size, symbol: symbolField }, stat, options })
-  })
-  onDestroy(() => { if (id) plotState.unregisterGeom(id) })
+	onMount(() => {
+		id = plotState.registerGeom({
+			type: 'point',
+			channels: { x, y, color, size, symbol: symbolField },
+			stat,
+			options
+		})
+	})
+	onDestroy(() => {
+		if (id) plotState.unregisterGeom(id)
+	})
 
-  $effect(() => {
-    if (id) plotState.updateGeom(id, { channels: { x, y, color, size, symbol: symbolField }, stat })
-  })
+	$effect(() => {
+		if (id) plotState.updateGeom(id, { channels: { x, y, color, size, symbol: symbolField }, stat })
+	})
 
-  const data      = $derived(id ? plotState.geomData(id) : [])
-  const xScale    = $derived(plotState.xScale)
-  const yScale    = $derived(plotState.yScale)
-  const colors    = $derived(plotState.colors)
-  const symbolMap = $derived(plotState.symbols)
+	const data = $derived(id ? plotState.geomData(id) : [])
+	const xScale = $derived(plotState.xScale)
+	const yScale = $derived(plotState.yScale)
+	const colors = $derived(plotState.colors)
+	const symbolMap = $derived(plotState.symbols)
 
-  function buildSizeScale() {
-    if (!size || !data?.length) return null
-    const vals = data.map((d) => Number(d[size])).filter((v) => !isNaN(v))
-    if (!vals.length) return null
-    const minVal = Math.min(...vals)
-    const maxVal = Math.max(...vals)
-    const minRadius = options.minRadius ?? 3
-    const maxRadius = options.maxRadius ?? 20
-    return scaleSqrt().domain([minVal, maxVal]).range([minRadius, maxRadius])
-  }
+	function buildSizeScale() {
+		if (!size || !data?.length) return null
+		const vals = data.map((d) => Number(d[size])).filter((v) => !isNaN(v))
+		if (!vals.length) return null
+		const minVal = Math.min(...vals)
+		const maxVal = Math.max(...vals)
+		const minRadius = options.minRadius ?? 3
+		const maxRadius = options.maxRadius ?? 20
+		return scaleSqrt().domain([minVal, maxVal]).range([minRadius, maxRadius])
+	}
 
-  const sizeScale = $derived.by(() => buildSizeScale())
+	const sizeScale = $derived.by(() => buildSizeScale())
 
-  const defaultRadius = $derived(options.radius ?? 4)
+	const defaultRadius = $derived(options.radius ?? 4)
 
-  const points = $derived.by(() => {
-    if (!data?.length || !xScale || !yScale) return []
-    return buildPoints(data, { x, y, color, size, symbol: symbolField }, xScale, yScale, colors, sizeScale, symbolMap, defaultRadius)
-  })
+	const points = $derived.by(() => {
+		if (!data?.length || !xScale || !yScale) return []
+		return buildPoints(
+			data,
+			{ x, y, color, size, symbol: symbolField },
+			xScale,
+			yScale,
+			colors,
+			sizeScale,
+			symbolMap,
+			defaultRadius,
+			options?.jitter ?? null
+		)
+	})
 </script>
 
 {#if points.length > 0}
-  <g data-plot-geom="point">
-    {#each points as pt, i (`${i}::${pt.data[x]}::${pt.data[y]}`)}
-      {#if pt.symbolPath}
-        <path
-          transform="translate({pt.cx},{pt.cy})"
-          d={pt.symbolPath}
-          fill={pt.fill}
-          stroke={pt.stroke}
-          stroke-width="1"
-          fill-opacity={options.opacity ?? 0.8}
-          data-plot-element="point"
-          role="graphics-symbol"
-          aria-label="{pt.data[x]}, {pt.data[y]}"
-          onmouseenter={() => plotState.setHovered(pt.data)}
-          onmouseleave={() => plotState.clearHovered()}
-        />
-      {:else}
-        <circle
-          cx={pt.cx}
-          cy={pt.cy}
-          r={pt.r}
-          fill={pt.fill}
-          stroke={pt.stroke}
-          stroke-width="1"
-          fill-opacity={options.opacity ?? 0.8}
-          data-plot-element="point"
-          role="graphics-symbol"
-          aria-label="{pt.data[x]}, {pt.data[y]}"
-          onmouseenter={() => plotState.setHovered(pt.data)}
-          onmouseleave={() => plotState.clearHovered()}
-        />
-      {/if}
-      {#if label}
-        {@const text = resolveLabel(pt.data)}
-        {#if text}
-          <LabelPill
-            x={pt.cx + (options.labelOffset?.x ?? 0)}
-            y={pt.cy - pt.r + (options.labelOffset?.y ?? -12)}
-            {text}
-            color={pt.stroke ?? '#333'}
-          />
-        {/if}
-      {/if}
-    {/each}
-  </g>
+	<g data-plot-geom="point">
+		<!-- svelte-ignore a11y_no_noninteractive_tabindex -->
+		{#each points as pt, i (`${i}::${pt.data[x]}::${pt.data[y]}`)}
+			{#if pt.symbolPath}
+				<path
+					transform="translate({pt.cx},{pt.cy})"
+					d={pt.symbolPath}
+					fill={pt.fill}
+					stroke={pt.stroke}
+					stroke-width="1"
+					fill-opacity={options.opacity ?? plotState.chartPreset.opacity.point}
+					data-plot-element="point"
+					role={onselect || keyboard ? 'button' : 'graphics-symbol'}
+					tabindex={onselect || keyboard ? 0 : undefined}
+					style:cursor={onselect ? 'pointer' : undefined}
+					aria-label="{pt.data[x]}, {pt.data[y]}"
+					onmouseenter={() => plotState.setHovered(pt.data)}
+					onmouseleave={() => plotState.clearHovered()}
+					onclick={onselect ? () => onselect(pt.data) : undefined}
+					onkeydown={onselect ? (e) => (e.key === 'Enter' || e.key === ' ') && onselect(pt.data) : undefined}
+					use:keyboardNav={keyboard}
+				/>
+			{:else}
+				<circle
+					cx={pt.cx}
+					cy={pt.cy}
+					r={pt.r}
+					fill={pt.fill}
+					stroke={pt.stroke}
+					stroke-width="1"
+					fill-opacity={options.opacity ?? plotState.chartPreset.opacity.point}
+					data-plot-element="point"
+					role={onselect || keyboard ? 'button' : 'graphics-symbol'}
+					tabindex={onselect || keyboard ? 0 : undefined}
+					style:cursor={onselect ? 'pointer' : undefined}
+					aria-label="{pt.data[x]}, {pt.data[y]}"
+					onmouseenter={() => plotState.setHovered(pt.data)}
+					onmouseleave={() => plotState.clearHovered()}
+					onclick={onselect ? () => onselect(pt.data) : undefined}
+					onkeydown={onselect ? (e) => (e.key === 'Enter' || e.key === ' ') && onselect(pt.data) : undefined}
+					use:keyboardNav={keyboard}
+				/>
+			{/if}
+			{#if label}
+				{@const text = resolveLabel(pt.data)}
+				{#if text}
+					<LabelPill
+						x={pt.cx + (options.labelOffset?.x ?? 0)}
+						y={pt.cy - pt.r + (options.labelOffset?.y ?? -12)}
+						{text}
+						color={pt.stroke ?? '#333'}
+					/>
+				{/if}
+			{/if}
+		{/each}
+	</g>
 {/if}

package/src/geoms/Violin.svelte

@@ -1,46 +1,56 @@
 <script>
-  import { getContext, onMount, onDestroy } from 'svelte'
-  import { buildViolins } from '../lib/brewing/marks/violins.js'
-
-  let { x, y, fill, stat = 'boxplot', options = {} } = $props()
-
-  const plotState = getContext('plot-state')
-  let id = $state(null)
-
-  // fill ?? x drives the colors map for both violin interior and outline
-  const fillChannel = $derived(fill ?? x)
-
-  onMount(() => {
-    id = plotState.registerGeom({ type: 'violin', channels: { x, y, color: fillChannel }, stat, options })
-  })
-  onDestroy(() => { if (id) plotState.unregisterGeom(id) })
-
-  $effect(() => {
-    if (id) plotState.updateGeom(id, { channels: { x, y, color: fillChannel }, stat })
-  })
-
-  const data   = $derived(id ? plotState.geomData(id) : [])
-  const xScale = $derived(plotState.xScale)
-  const yScale = $derived(plotState.yScale)
-  const colors = $derived(plotState.colors)
-
-  const violins = $derived.by(() => {
-    if (!data?.length || !xScale || !yScale) return []
-    return buildViolins(data, { x, fill: fillChannel }, xScale, yScale, colors)
-  })
+	import { getContext, onMount, onDestroy } from 'svelte'
+	import { buildViolins } from '../lib/brewing/marks/violins.js'
+
+	let { x, y, fill, stat = 'boxplot', options = {} } = $props()
+
+	const plotState = getContext('plot-state')
+	let id = $state(null)
+
+	// fill ?? x drives the colors map for both violin interior and outline
+	const fillChannel = $derived(fill ?? x)
+
+	onMount(() => {
+		id = plotState.registerGeom({
+			type: 'violin',
+			channels: { x, y, color: fillChannel },
+			stat,
+			options
+		})
+	})
+	onDestroy(() => {
+		if (id) plotState.unregisterGeom(id)
+	})
+
+	$effect(() => {
+		if (id) plotState.updateGeom(id, { channels: { x, y, color: fillChannel }, stat })
+	})
+
+	const data = $derived(id ? plotState.geomData(id) : [])
+	const xScale = $derived(plotState.xScale)
+	const yScale = $derived(plotState.yScale)
+	const colors = $derived(plotState.colors)
+
+	const violins = $derived.by(() => {
+		if (!data?.length || !xScale || !yScale) return []
+		return buildViolins(data, { x, fill: fillChannel }, xScale, yScale, colors)
+	})
 </script>
 
 {#if violins.length > 0}
-  <g data-plot-geom="violin">
-    {#each violins as v, i (`${String(v.cx)  }::${  i}`)}
-      <path
-        d={v.d}
-        fill={v.fill}
-        fill-opacity="0.5"
-        stroke={v.stroke}
-        stroke-width="1.5"
-        data-plot-element="violin"
-      />
-    {/each}
-  </g>
+	<g data-plot-geom="violin">
+		{#each violins as v, i (`${String(v.cx)}::${i}`)}
+			<path
+				d={v.d}
+				fill={v.fill}
+				fill-opacity={options?.opacity ?? plotState.chartPreset.opacity.violin}
+				stroke={v.stroke}
+				stroke-width="1.5"
+				data-plot-element="violin"
+				role="presentation"
+				onmouseenter={() => plotState.setHovered(v.data)}
+				onmouseleave={() => plotState.clearHovered()}
+			/>
+		{/each}
+	</g>
 {/if}

package/src/geoms/lib/areas.js

@@ -14,51 +14,66 @@ import { toPatternId } from '../../lib/brewing/patterns.js'
  * @returns {{ d: string, fill: string, stroke: string, key: unknown, patternId: string|null }[]}
  */
 export function buildAreas(data, channels, xScale, yScale, colors, curve, patterns) {
-  const { x: xf, y: yf, color: cf, pattern: pf } = channels
-  const baseline = yScale.range()[0]   // bottom of the chart (y pixel max)
-
-  const xPos = (d) => typeof xScale.bandwidth === 'function'
-    ? xScale(d[xf]) + xScale.bandwidth() / 2
-    : xScale(d[xf])
-
-  const makeGen = () => {
-    const gen = area()
-      .x(xPos)
-      .y0(baseline)
-      .y1((d) => yScale(d[yf]))
-    if (curve === 'smooth') gen.curve(curveCatmullRom)
-    else if (curve === 'step') gen.curve(curveStep)
-    return gen
-  }
-
-  const sortByX = (rows) => [...rows].sort((a, b) => a[xf] < b[xf] ? -1 : a[xf] > b[xf] ? 1 : 0)
-
-  if (!cf) {
-    const entry = colors?.values().next().value ?? { fill: '#888', stroke: '#888' }
-    const patternKey = pf ? data[0]?.[pf] : null
-    const patternId = patternKey !== null && patternKey !== undefined && patterns?.has(patternKey)
-      ? toPatternId(String(patternKey)) : null
-    return [{ d: makeGen()(sortByX(data)), fill: entry.fill, stroke: 'none', key: null, patternId }]
-  }
-
-  // Group by color field
-  const groups = new Map()
-  for (const d of data) {
-    const key = d[cf]
-    if (!groups.has(key)) groups.set(key, [])
-    groups.get(key).push(d)
-  }
-  // For different-field patterns, assign positionally so each area gets a distinct pattern
-  const orderedPatternKeys = pf && pf !== cf ? [...(patterns?.keys() ?? [])] : null
-
-  return [...groups.entries()].map(([key, rows], i) => {
-    const entry = colors?.get(key) ?? { fill: '#888', stroke: '#888' }
-    // Same field or no pf: look up by colorKey. Different field: assign positionally.
-    const patternKey = !pf ? key : pf === cf ? key : (orderedPatternKeys?.[i % orderedPatternKeys.length] ?? null)
-    const patternId = patternKey !== null && patternKey !== undefined && patterns?.has(patternKey)
-      ? toPatternId(String(patternKey)) : null
-    return { d: makeGen()(sortByX(rows)), fill: entry.fill, stroke: 'none', key, patternId }
-  })
+	const { x: xf, y: yf, color: cf, pattern: pf } = channels
+	const baseline = yScale.range()[0] // bottom of the chart (y pixel max)
+
+	const xPos = (d) =>
+		typeof xScale.bandwidth === 'function' ? xScale(d[xf]) + xScale.bandwidth() / 2 : xScale(d[xf])
+
+	const makeGen = () => {
+		const gen = area()
+			.x(xPos)
+			.y0(baseline)
+			.y1((d) => yScale(d[yf]))
+		if (curve === 'smooth') gen.curve(curveCatmullRom)
+		else if (curve === 'step') gen.curve(curveStep)
+		return gen
+	}
+
+	// For band (categorical) x scales, sort by domain index to preserve intended ordering.
+	// For continuous scales, sort numerically so the path draws left-to-right.
+	const sortByX = (rows) => {
+		if (typeof xScale.bandwidth === 'function') {
+			const domain = xScale.domain()
+			return [...rows].sort((a, b) => domain.indexOf(a[xf]) - domain.indexOf(b[xf]))
+		}
+		return [...rows].sort((a, b) => (a[xf] < b[xf] ? -1 : a[xf] > b[xf] ? 1 : 0))
+	}
+
+	if (!cf) {
+		const entry = colors?.values().next().value ?? { fill: '#888', stroke: '#888' }
+		const patternKey = pf ? data[0]?.[pf] : null
+		const patternId =
+			patternKey !== null && patternKey !== undefined && patterns?.has(patternKey)
+				? toPatternId(String(patternKey))
+				: null
+		return [{ d: makeGen()(sortByX(data)), fill: entry.fill, stroke: 'none', key: null, patternId }]
+	}
+
+	// Group by color field
+	const groups = new Map()
+	for (const d of data) {
+		const key = d[cf]
+		if (!groups.has(key)) groups.set(key, [])
+		groups.get(key).push(d)
+	}
+	// For different-field patterns, assign positionally so each area gets a distinct pattern
+	const orderedPatternKeys = pf && pf !== cf ? [...(patterns?.keys() ?? [])] : null
+
+	return [...groups.entries()].map(([key, rows], i) => {
+		const entry = colors?.get(key) ?? { fill: '#888', stroke: '#888' }
+		// Same field or no pf: look up by colorKey. Different field: assign positionally.
+		const patternKey = !pf
+			? key
+			: pf === cf
+				? key
+				: (orderedPatternKeys?.[i % orderedPatternKeys.length] ?? null)
+		const patternId =
+			patternKey !== null && patternKey !== undefined && patterns?.has(patternKey)
+				? toPatternId(String(patternKey))
+				: null
+		return { d: makeGen()(sortByX(rows)), fill: entry.fill, stroke: 'none', key, patternId }
+	})
 }
 
 /**
@@ -74,58 +89,66 @@ export function buildAreas(data, channels, xScale, yScale, colors, curve, patter
  * @returns {{ d: string, fill: string, stroke: string, key: unknown, patternId: string|null }[]}
  */
 export function buildStackedAreas(data, channels, xScale, yScale, colors, curve, patterns) {
-  const { x: xf, y: yf, color: cf, pattern: pf } = channels
-  if (!cf) return buildAreas(data, channels, xScale, yScale, colors, curve, patterns)
-
-  const xCategories = [...new Set(data.map((d) => d[xf]))]
-    .sort((a, b) => a < b ? -1 : a > b ? 1 : 0)
-  const colorCategories = [...new Set(data.map((d) => d[cf]))]
-
-  // Build wide-form lookup: xVal → { colorKey: yVal }
-  const lookup = new Map()
-  for (const d of data) {
-    if (!lookup.has(d[xf])) lookup.set(d[xf], {})
-    lookup.get(d[xf])[d[cf]] = Number(d[yf])
-  }
-
-  const wide = xCategories.map((xVal) => {
-    const row = { [xf]: xVal }
-    for (const c of colorCategories) row[c] = lookup.get(xVal)?.[c] ?? 0
-    return row
-  })
-
-  const xPos = (d) => typeof xScale.bandwidth === 'function'
-    ? xScale(d.data[xf]) + xScale.bandwidth() / 2
-    : xScale(d.data[xf])
-
-  const makeGen = () => {
-    const gen = area()
-      .x(xPos)
-      .y0((d) => yScale(d[0]))
-      .y1((d) => yScale(d[1]))
-    if (curve === 'smooth') gen.curve(curveCatmullRom)
-    else if (curve === 'step') gen.curve(curveStep)
-    return gen
-  }
-
-  const stackGen = stack().keys(colorCategories)
-  const layers = stackGen(wide)
-
-  const orderedPatternKeys = pf && pf !== cf ? [...(patterns?.keys() ?? [])] : null
-
-  return layers.map((layer, i) => {
-    const colorKey = layer.key
-    const entry = colors?.get(colorKey) ?? { fill: '#888', stroke: '#888' }
-    // Same field (or no pf): look up by colorKey. Different field: assign positionally.
-    const patternKey = !pf ? colorKey : pf === cf ? colorKey : (orderedPatternKeys?.[i % orderedPatternKeys.length] ?? null)
-    const patternId = patternKey !== null && patternKey !== undefined && patterns?.has(patternKey)
-      ? toPatternId(String(patternKey)) : null
-    return {
-      d: makeGen()(layer) ?? '',
-      fill: entry.fill,
-      stroke: 'none',
-      key: colorKey,
-      patternId
-    }
-  })
+	const { x: xf, y: yf, color: cf, pattern: pf } = channels
+	if (!cf) return buildAreas(data, channels, xScale, yScale, colors, curve, patterns)
+
+	const xCategories = [...new Set(data.map((d) => d[xf]))].sort((a, b) =>
+		a < b ? -1 : a > b ? 1 : 0
+	)
+	const colorCategories = [...new Set(data.map((d) => d[cf]))]
+
+	// Build wide-form lookup: xVal → { colorKey: yVal }
+	const lookup = new Map()
+	for (const d of data) {
+		if (!lookup.has(d[xf])) lookup.set(d[xf], {})
+		lookup.get(d[xf])[d[cf]] = Number(d[yf])
+	}
+
+	const wide = xCategories.map((xVal) => {
+		const row = { [xf]: xVal }
+		for (const c of colorCategories) row[c] = lookup.get(xVal)?.[c] ?? 0
+		return row
+	})
+
+	const xPos = (d) =>
+		typeof xScale.bandwidth === 'function'
+			? xScale(d.data[xf]) + xScale.bandwidth() / 2
+			: xScale(d.data[xf])
+
+	const makeGen = () => {
+		const gen = area()
+			.x(xPos)
+			.y0((d) => yScale(d[0]))
+			.y1((d) => yScale(d[1]))
+		if (curve === 'smooth') gen.curve(curveCatmullRom)
+		else if (curve === 'step') gen.curve(curveStep)
+		return gen
+	}
+
+	const stackGen = stack().keys(colorCategories)
+	const layers = stackGen(wide)
+
+	const orderedPatternKeys = pf && pf !== cf ? [...(patterns?.keys() ?? [])] : null
+
+	return layers.map((layer, i) => {
+		const colorKey = layer.key
+		const entry = colors?.get(colorKey) ?? { fill: '#888', stroke: '#888' }
+		// Same field (or no pf): look up by colorKey. Different field: assign positionally.
+		const patternKey = !pf
+			? colorKey
+			: pf === cf
+				? colorKey
+				: (orderedPatternKeys?.[i % orderedPatternKeys.length] ?? null)
+		const patternId =
+			patternKey !== null && patternKey !== undefined && patterns?.has(patternKey)
+				? toPatternId(String(patternKey))
+				: null
+		return {
+			d: makeGen()(layer) ?? '',
+			fill: entry.fill,
+			stroke: 'none',
+			key: colorKey,
+			patternId
+		}
+	})
 }