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

package/src/geoms/Box.svelte

@@ -1,101 +1,113 @@
 <script>
-  import { getContext, onMount, onDestroy } from 'svelte'
-  import { buildBoxes } from '../lib/brewing/marks/boxes.js'
+	import { getContext, onMount, onDestroy } from 'svelte'
+	import { buildBoxes } from '../lib/brewing/marks/boxes.js'
 
-  let { x, y, fill, stat = 'boxplot', options = {} } = $props()
+	let { x, y, fill, stat = 'boxplot', options = {} } = $props()
 
-  const plotState = getContext('plot-state')
-  let id = $state(null)
+	const plotState = getContext('plot-state')
+	let id = $state(null)
 
-  // fill ?? x drives the colors map for both box interior and whisker strokes
-  onMount(() => {
-    id = plotState.registerGeom({ type: 'box', channels: { x, y, color: fill ?? x }, stat, options })
-  })
-  onDestroy(() => { if (id) plotState.unregisterGeom(id) })
+	// fill ?? x drives the colors map for both box interior and whisker strokes
+	const fillChannel = $derived(fill ?? x)
 
-  $effect(() => {
-    if (id) plotState.updateGeom(id, { channels: { x, y, color: fill ?? x }, stat })
-  })
+	onMount(() => {
+		id = plotState.registerGeom({
+			type: 'box',
+			channels: { x, y, color: fillChannel },
+			stat,
+			options
+		})
+	})
+	onDestroy(() => {
+		if (id) plotState.unregisterGeom(id)
+	})
 
-  const data   = $derived(id ? plotState.geomData(id) : [])
-  const xScale = $derived(plotState.xScale)
-  const yScale = $derived(plotState.yScale)
-  const colors = $derived(plotState.colors)
+	$effect(() => {
+		if (id) plotState.updateGeom(id, { channels: { x, y, color: fillChannel }, stat })
+	})
 
-  const boxes = $derived.by(() => {
-    if (!data?.length || !xScale || !yScale) return []
-    return buildBoxes(data, { x, fill: fill ?? x }, xScale, yScale, colors)
-  })
+	const data = $derived(id ? plotState.geomData(id) : [])
+	const xScale = $derived(plotState.xScale)
+	const yScale = $derived(plotState.yScale)
+	const colors = $derived(plotState.colors)
+
+	const boxes = $derived.by(() => {
+		if (!data?.length || !xScale || !yScale) return []
+		return buildBoxes(data, { x, fill: fillChannel }, xScale, yScale, colors)
+	})
 </script>
 
 {#if boxes.length > 0}
-  <g data-plot-geom="box">
-    {#each boxes as box, i (`${String(box.cx)  }::${  i}`)}
-      {@const x0 = box.cx - box.width / 2}
-      {@const xMid = box.cx}
-      {@const xCap0 = box.cx - box.whiskerWidth / 2}
-      {@const xCap1 = box.cx + box.whiskerWidth / 2}
-      <!-- Box body (IQR): lighter fill shade -->
-      <rect
-        x={x0}
-        y={box.q3}
-        width={box.width}
-        height={Math.max(0, box.q1 - box.q3)}
-        fill={box.fill}
-        fill-opacity="0.5"
-        stroke={box.stroke}
-        stroke-width="1"
-        data-plot-element="box-body"
-      />
-      <!-- Median line: darker stroke shade -->
-      <line
-        x1={x0}
-        y1={box.median}
-        x2={x0 + box.width}
-        y2={box.median}
-        stroke={box.stroke}
-        stroke-width="2"
-        data-plot-element="box-median"
-      />
-      <!-- Lower whisker (q1 to iqr_min) -->
-      <line
-        x1={xMid}
-        y1={box.q1}
-        x2={xMid}
-        y2={box.iqr_min}
-        stroke={box.stroke}
-        stroke-width="1"
-        data-plot-element="box-whisker"
-      />
-      <!-- Upper whisker (q3 to iqr_max) -->
-      <line
-        x1={xMid}
-        y1={box.q3}
-        x2={xMid}
-        y2={box.iqr_max}
-        stroke={box.stroke}
-        stroke-width="1"
-        data-plot-element="box-whisker"
-      />
-      <!-- Lower whisker cap -->
-      <line
-        x1={xCap0}
-        y1={box.iqr_min}
-        x2={xCap1}
-        y2={box.iqr_min}
-        stroke={box.stroke}
-        stroke-width="1"
-      />
-      <!-- Upper whisker cap -->
-      <line
-        x1={xCap0}
-        y1={box.iqr_max}
-        x2={xCap1}
-        y2={box.iqr_max}
-        stroke={box.stroke}
-        stroke-width="1"
-      />
-      <!-- Outlier rendering deferred: buildBoxes does not compute outliers yet -->
-    {/each}
-  </g>
+	<g data-plot-geom="box">
+		{#each boxes as box, i (`${String(box.cx)}::${i}`)}
+			{@const x0 = box.cx - box.width / 2}
+			{@const xMid = box.cx}
+			{@const xCap0 = box.cx - box.whiskerWidth / 2}
+			{@const xCap1 = box.cx + box.whiskerWidth / 2}
+			<!-- Box body (IQR): lighter fill shade -->
+			<rect
+				x={x0}
+				y={box.q3}
+				width={box.width}
+				height={Math.max(0, box.q1 - box.q3)}
+				fill={box.fill}
+				fill-opacity={options?.opacity ?? plotState.chartPreset.opacity.box}
+				stroke={box.stroke}
+				stroke-width="1"
+				data-plot-element="box-body"
+				role="presentation"
+				onmouseenter={() => plotState.setHovered(box.data)}
+				onmouseleave={() => plotState.clearHovered()}
+			/>
+			<!-- Median line: darker stroke shade -->
+			<line
+				x1={x0}
+				y1={box.median}
+				x2={x0 + box.width}
+				y2={box.median}
+				stroke={box.stroke}
+				stroke-width="2"
+				data-plot-element="box-median"
+			/>
+			<!-- Lower whisker (q1 to iqr_min) -->
+			<line
+				x1={xMid}
+				y1={box.q1}
+				x2={xMid}
+				y2={box.iqr_min}
+				stroke={box.stroke}
+				stroke-width="1"
+				data-plot-element="box-whisker"
+			/>
+			<!-- Upper whisker (q3 to iqr_max) -->
+			<line
+				x1={xMid}
+				y1={box.q3}
+				x2={xMid}
+				y2={box.iqr_max}
+				stroke={box.stroke}
+				stroke-width="1"
+				data-plot-element="box-whisker"
+			/>
+			<!-- Lower whisker cap -->
+			<line
+				x1={xCap0}
+				y1={box.iqr_min}
+				x2={xCap1}
+				y2={box.iqr_min}
+				stroke={box.stroke}
+				stroke-width="1"
+			/>
+			<!-- Upper whisker cap -->
+			<line
+				x1={xCap0}
+				y1={box.iqr_max}
+				x2={xCap1}
+				y2={box.iqr_max}
+				stroke={box.stroke}
+				stroke-width="1"
+			/>
+			<!-- Outlier rendering deferred: buildBoxes does not compute outliers yet -->
+		{/each}
+	</g>
 {/if}

package/src/geoms/LabelPill.svelte

@@ -1,17 +1,17 @@
 <script>
-  /** @type {{ x: number, y: number, text: string, color?: string }} */
-  let { x, y, text, color = '#333' } = $props()
+	/** @type {{ x: number, y: number, text: string, color?: string }} */
+	let { x, y, text, color = '#333' } = $props()
 
-  const w = $derived(Math.max(36, String(text).length * 7 + 12))
+	const w = $derived(Math.max(36, String(text).length * 7 + 12))
 </script>
 
 <g transform="translate({x},{y})" pointer-events="none" data-plot-element="label">
-  <rect x={-w / 2} y="-9" width={w} height="18" rx="4" fill="white" fill-opacity="0.82" />
-  <text
-    text-anchor="middle"
-    dominant-baseline="central"
-    font-size="11"
-    font-weight="600"
-    fill={color}
-  >{text}</text>
+	<rect x={-w / 2} y="-9" width={w} height="18" rx="4" fill="white" fill-opacity="0.82" />
+	<text
+		text-anchor="middle"
+		dominant-baseline="central"
+		font-size="11"
+		font-weight="600"
+		fill={color}>{text}</text
+	>
 </g>

package/src/geoms/Line.svelte

@@ -1,100 +1,123 @@
 <script>
-  import { getContext, onMount, onDestroy } from 'svelte'
-  import { buildLines } from '../lib/brewing/marks/lines.js'
-  import { buildSymbolPath } from '../lib/brewing/marks/points.js'
-  import LabelPill from './LabelPill.svelte'
+	import { getContext, onMount, onDestroy } from 'svelte'
+	import { buildLines } from '../lib/brewing/marks/lines.js'
+	import { buildSymbolPath } from '../lib/brewing/marks/points.js'
+	import { keyboardNav } from '../lib/keyboard-nav.js'
+	import LabelPill from './LabelPill.svelte'
 
-  let { x, y, color, symbol: symbolField, label = false, stat = 'identity', options = {} } = $props()
+	let {
+		x,
+		y,
+		color,
+		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) ?? '')
-    if (typeof label === 'string') return String(data[label] ?? '')
-    return 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: 'line', channels: { x, y, color, symbol: symbolField }, stat, options })
-  })
-  onDestroy(() => { if (id) plotState.unregisterGeom(id) })
+	onMount(() => {
+		id = plotState.registerGeom({
+			type: 'line',
+			channels: { x, y, color, symbol: symbolField },
+			stat,
+			options
+		})
+	})
+	onDestroy(() => {
+		if (id) plotState.unregisterGeom(id)
+	})
 
-  $effect(() => {
-    if (id) plotState.updateGeom(id, { channels: { x, y, color, symbol: symbolField }, stat })
-  })
+	$effect(() => {
+		if (id) plotState.updateGeom(id, { channels: { x, y, color, 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)
 
-  const lines = $derived.by(() => {
-    if (!data?.length || !xScale || !yScale) return []
-    return buildLines(data, { x, y, color }, xScale, yScale, colors, options.curve)
-  })
+	const lines = $derived.by(() => {
+		if (!data?.length || !xScale || !yScale) return []
+		return buildLines(data, { x, y, color }, xScale, yScale, colors, options.curve)
+	})
 
-  const markerRadius = $derived(options.markerRadius ?? 4)
+	const markerRadius = $derived(options.markerRadius ?? 4)
 </script>
 
 {#if lines.length > 0}
-  <g data-plot-geom="line">
-    {#each lines as seg (seg.key ?? seg.d)}
-      <path
-        d={seg.d}
-        fill="none"
-        stroke={seg.stroke}
-        stroke-width={options.strokeWidth ?? 2}
-        stroke-linejoin="round"
-        stroke-linecap="round"
-        data-plot-element="line"
-      />
-      {#if symbolField && symbolMap}
-        {#each seg.points as pt (`${pt.x}::${pt.y}`)}
-          <path
-            transform="translate({pt.x},{pt.y})"
-            d={buildSymbolPath(symbolMap.get(pt.data[symbolField]) ?? 'circle', markerRadius)}
-            fill={seg.stroke}
-            stroke={seg.stroke}
-            stroke-width="1"
-            data-plot-element="line-marker"
-          />
-        {/each}
-      {/if}
-      {#if label}
-        {#each seg.points as pt (`label::${pt.x}::${pt.y}`)}
-          {@const text = resolveLabel(pt.data)}
-          {#if text}
-            <LabelPill
-              x={pt.x + (options.labelOffset?.x ?? 0)}
-              y={pt.y + (options.labelOffset?.y ?? -12)}
-              {text}
-              color={seg.stroke ?? '#333'}
-            />
-          {/if}
-        {/each}
-      {/if}
-      <!-- Invisible hit areas for tooltip -->
-      {#each seg.points as pt (`hover::${pt.x}::${pt.y}`)}
-        <circle
-          cx={pt.x}
-          cy={pt.y}
-          r="8"
-          fill="transparent"
-          stroke="none"
-          role="presentation"
-          data-plot-element="line-hover"
-          onmouseenter={() => plotState.setHovered(pt.data)}
-          onmouseleave={() => plotState.clearHovered()}
-        />
-      {/each}
-    {/each}
-  </g>
+	<g data-plot-geom="line">
+		{#each lines as seg (seg.key ?? seg.d)}
+			<path
+				d={seg.d}
+				fill="none"
+				stroke={seg.stroke}
+				stroke-width={options.strokeWidth ?? 2}
+				stroke-linejoin="round"
+				stroke-linecap="round"
+				data-plot-element="line"
+			/>
+			{#if symbolField && symbolMap}
+				{#each seg.points as pt (`${pt.x}::${pt.y}`)}
+					<path
+						transform="translate({pt.x},{pt.y})"
+						d={buildSymbolPath(symbolMap.get(pt.data[symbolField]) ?? 'circle', markerRadius)}
+						fill={seg.stroke}
+						stroke={seg.stroke}
+						stroke-width="1"
+						data-plot-element="line-marker"
+					/>
+				{/each}
+			{/if}
+			{#if label}
+				{#each seg.points as pt (`label::${pt.x}::${pt.y}`)}
+					{@const text = resolveLabel(pt.data)}
+					{#if text}
+						<LabelPill
+							x={pt.x + (options.labelOffset?.x ?? 0)}
+							y={pt.y + (options.labelOffset?.y ?? -12)}
+							{text}
+							color={seg.stroke ?? '#333'}
+						/>
+					{/if}
+				{/each}
+			{/if}
+			<!-- Invisible hit areas for tooltip and selection -->
+			<!-- svelte-ignore a11y_no_noninteractive_tabindex -->
+			{#each seg.points as pt (`hover::${pt.x}::${pt.y}`)}
+				<circle
+					cx={pt.x}
+					cy={pt.y}
+					r="8"
+					fill="transparent"
+					stroke="none"
+					role={onselect || keyboard ? 'button' : 'presentation'}
+					tabindex={onselect || keyboard ? 0 : undefined}
+					style:cursor={onselect ? 'pointer' : undefined}
+					data-plot-element="line-hover"
+					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}
+				/>
+			{/each}
+		{/each}
+	</g>
 {/if}