@rokkit/chart 1.3.6 → 1.3.8

package/dist/geoms/Box.svelte

@@ -8,21 +8,32 @@
 		y?: string
 		fill?: string
 		stat?: string
+		/** Offset the box to one half of the band (raincloud/split plots). Default 'center'. */
+		side?: 'left' | 'right' | 'center'
+		/** Box thickness as a fraction of the (sub-)band — use a small value (e.g. 0.16) for a
+		 *  thin raincloud box. Defaults to the full box width. */
+		width?: number
+		/** Data field driving a texture fill (from the shared pattern set) instead of a solid fill. */
+		pattern?: string
 		options?: { opacity?: number }
 	}
 
-	let { x, y, fill, stat = 'boxplot', options = {} }: Props = $props()
+	let { x, y, fill, stat = 'boxplot', side = 'center', width, pattern, options = {} }: Props = $props()
 
 	const plotState = getContext<PlotState>('plot-state')
 	let id = $state<string | null>(null)
 
-	// fill ?? x drives the colors map for both box interior and whisker strokes
-	const fillChannel = $derived(fill ?? x)
+	// Fall back to the root Plot channels when the geom's own x/y are omitted, so
+	// <Plot.Box> composes under <Plot.Root x y> without silently NaN-ing.
+	const xf = $derived(x ?? plotState.channels?.x)
+	const yf = $derived(y ?? plotState.channels?.y)
+	// fill ?? effective-x drives the colors map for both box interior and whisker strokes
+	const fillChannel = $derived(fill ?? xf)
 
 	onMount(() => {
 		id = plotState.registerGeom({
 			type: 'box',
-			channels: { x, y, color: fillChannel },
+			channels: { x: xf, y: yf, color: fillChannel, pattern },
 			stat,
 			options
 		})
@@ -32,91 +43,135 @@
 	})
 
 	$effect(() => {
-		if (id) plotState.updateGeom(id, { channels: { x, y, color: fillChannel }, stat })
+		if (id)
+			plotState.updateGeom(id, { channels: { x: xf, y: yf, color: fillChannel, pattern }, stat })
 	})
 
 	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 boxes = $derived.by(() => {
 		if (!data?.length || !xScale || !yScale) return []
-		return buildBoxes(data, { x, fill: fillChannel }, xScale, yScale, colors)
+		return buildBoxes(data, { x: xf, fill: fillChannel, pattern }, xScale, yScale, colors, {
+			side,
+			width,
+			patterns
+		})
 	})
 </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={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}
+			{#each boxes as box, i (`${String(box.cx)}::${i}`)}
+				<!-- Each primitive is placed through plotState.place(band, value) so the whole
+				     box transposes correctly under orientation='horizontal' (flip). -->
+				{@const c1 = plotState.place(box.cx - box.width / 2, box.q3)}
+				{@const c2 = plotState.place(box.cx + box.width / 2, box.q1)}
+				{@const mA = plotState.place(box.cx - box.width / 2, box.median)}
+				{@const mB = plotState.place(box.cx + box.width / 2, box.median)}
+				{@const wLoA = plotState.place(box.cx, box.q1)}
+				{@const wLoB = plotState.place(box.cx, box.iqr_min)}
+				{@const wHiA = plotState.place(box.cx, box.q3)}
+				{@const wHiB = plotState.place(box.cx, box.iqr_max)}
+				{@const capLoA = plotState.place(box.cx - box.whiskerWidth / 2, box.iqr_min)}
+				{@const capLoB = plotState.place(box.cx + box.whiskerWidth / 2, box.iqr_min)}
+				{@const capHiA = plotState.place(box.cx - box.whiskerWidth / 2, box.iqr_max)}
+				{@const capHiB = plotState.place(box.cx + box.whiskerWidth / 2, box.iqr_max)}
+				<!-- Box body (IQR): lighter fill shade -->
+				<rect
+					x={Math.min(c1.x, c2.x)}
+					y={Math.min(c1.y, c2.y)}
+					width={Math.abs(c2.x - c1.x)}
+					height={Math.abs(c2.y - c1.y)}
+					fill={box.fill}
+					fill-opacity={options?.opacity ?? plotState.chartPreset.opacity.box}
+					stroke={box.stroke}
+					stroke-width="1"
+					data-plot-element="box-body"
+					role="graphics-symbol"
+					aria-label={`${String(box.data[xf ?? ''] ?? 'box')}: median ${box.data.median}, IQR ${box.data.q1}–${box.data.q3}`}
+					onmouseenter={() => plotState.setHovered(box.data)}
+					onmouseleave={() => plotState.clearHovered()}
+				/>
+				{#if box.patternId}
+					<!-- Texture fill overlay (matches the box body) -->
+					<rect
+						x={Math.min(c1.x, c2.x)}
+						y={Math.min(c1.y, c2.y)}
+						width={Math.abs(c2.x - c1.x)}
+						height={Math.abs(c2.y - c1.y)}
+						fill="url(#{box.patternId})"
+						pointer-events="none"
+					/>
+				{/if}
+				<!-- Median line: darker stroke shade -->
+				<line
+					x1={mA.x}
+					y1={mA.y}
+					x2={mB.x}
+					y2={mB.y}
+					stroke={box.stroke}
+					stroke-width="2"
+					data-plot-element="box-median"
+				/>
+				<!-- Lower whisker (q1 to iqr_min) -->
+				<line
+					x1={wLoA.x}
+					y1={wLoA.y}
+					x2={wLoB.x}
+					y2={wLoB.y}
+					stroke={box.stroke}
+					stroke-width="1"
+					data-plot-element="box-whisker"
+				/>
+				<!-- Upper whisker (q3 to iqr_max) -->
+				<line
+					x1={wHiA.x}
+					y1={wHiA.y}
+					x2={wHiB.x}
+					y2={wHiB.y}
+					stroke={box.stroke}
+					stroke-width="1"
+					data-plot-element="box-whisker"
+				/>
+				<!-- Lower whisker cap -->
+				<line
+					x1={capLoA.x}
+					y1={capLoA.y}
+					x2={capLoB.x}
+					y2={capLoB.y}
+					stroke={box.stroke}
+					stroke-width="1"
+				/>
+				<!-- Upper whisker cap -->
+				<line
+					x1={capHiA.x}
+					y1={capHiA.y}
+					x2={capHiB.x}
+					y2={capHiB.y}
+					stroke={box.stroke}
+					stroke-width="1"
+				/>
+				<!-- Outliers: individual points beyond the 1.5·IQR fence -->
+				{#each box.outliers as o, oi (`${i}-outlier-${oi}`)}
+					{@const op = plotState.place(box.cx, o.cy)}
+					<circle
+						cx={op.x}
+						cy={op.y}
+						r="2"
+						fill="none"
+						stroke={box.stroke}
+						stroke-width="1"
+						data-plot-element="box-outlier"
+						role="graphics-symbol"
+						aria-label={`outlier: ${o.value}`}
+						onmouseenter={() => plotState.setHovered({ ...box.data, value: o.value })}
+						onmouseleave={() => plotState.clearHovered()}
+					/>
+				{/each}
+			{/each}
 	</g>
 {/if}

package/dist/geoms/Box.svelte.d.ts

@@ -3,6 +3,13 @@ type Props = {
     y?: string;
     fill?: string;
     stat?: string;
+    /** Offset the box to one half of the band (raincloud/split plots). Default 'center'. */
+    side?: 'left' | 'right' | 'center';
+    /** Box thickness as a fraction of the (sub-)band — use a small value (e.g. 0.16) for a
+     *  thin raincloud box. Defaults to the full box width. */
+    width?: number;
+    /** Data field driving a texture fill (from the shared pattern set) instead of a solid fill. */
+    pattern?: string;
     options?: {
         opacity?: number;
     };

package/dist/geoms/Candlestick.svelte

@@ -81,18 +81,24 @@
 			const bodyTop = yScale(isUp ? closeVal : openVal)
 			const bodyBottom = yScale(isUp ? openVal : closeVal)
 
+			// Place (band, value) points so the candle transposes under orientation flip.
+			const b1 = plotState.place(xPos, bodyTop)
+			const b2 = plotState.place(xPos + bodyWidth, bodyBottom)
+			const wa = plotState.place(xPos + bodyWidth / 2, yScale(highVal))
+			const wb = plotState.place(xPos + bodyWidth / 2, yScale(lowVal))
 			return {
 				key: `${d[x ?? '']}-${i}`,
 				// Body
-				bodyX: xPos,
-				bodyY: bodyTop,
-				bodyWidth,
-				bodyHeight: Math.max(1, bodyBottom - bodyTop),
+				bodyX: Math.min(b1.x, b2.x),
+				bodyY: Math.min(b1.y, b2.y),
+				bodyWidth: Math.abs(b2.x - b1.x),
+				bodyHeight: Math.max(1, Math.abs(b2.y - b1.y)),
 				fill: isUp ? upColor : downColor,
 				// Wick
-				wickX: xPos + bodyWidth / 2,
-				wickTop: yScale(highVal),
-				wickBottom: yScale(lowVal),
+				wickX1: wa.x,
+				wickY1: wa.y,
+				wickX2: wb.x,
+				wickY2: wb.y,
 				data: d
 			}
 		})
@@ -104,10 +110,10 @@
 		{#each candles as c (c.key)}
 			<!-- Wick (high to low) -->
 			<line
-				x1={c.wickX}
-				y1={c.wickTop}
-				x2={c.wickX}
-				y2={c.wickBottom}
+				x1={c.wickX1}
+				y1={c.wickY1}
+				x2={c.wickX2}
+				y2={c.wickY2}
 				stroke={c.fill}
 				stroke-width={wickWidth}
 				data-plot-element="wick"

package/dist/geoms/Highlight.svelte

@@ -0,0 +1,105 @@
+<script lang="ts">
+	import { getContext } from 'svelte'
+	import type { PlotState } from '../PlotState.svelte.js'
+	import { resolveHighlight } from '../lib/highlight.js'
+	import { scalePos } from '../lib/scale.js'
+
+	type Row = Record<string, unknown>
+	type Props = {
+		x?: string
+		y?: string
+		highlight?: 'first' | 'last' | 'min' | 'max' | number | ((row: Row, i: number) => boolean)
+		label?: boolean | string | ((row: Row) => unknown)
+	}
+	let { x, y, highlight = undefined, label = false }: Props = $props()
+
+	const state = getContext<PlotState>('plot-state')
+
+	const marks = $derived.by(() => {
+		const rows = state?.data ?? []
+		const xs = state?.xScale
+		const ys = state?.yScale
+		if (!xs || !ys || !x || !y) return []
+		const selectedRows = state?.selectedRows ?? []
+		const selectedSet = new Set(selectedRows)
+		const out = []
+		const seen = new Set()
+		if (highlight !== null && highlight !== undefined && rows.length) {
+			for (const i of resolveHighlight(rows, highlight, { y })) {
+				const row = rows[i]
+				out.push({
+					key: `h${i}`,
+					cx: scalePos(xs, row[x]),
+					cy: ys(Number(row[y])),
+					row,
+					// A statically-highlighted point that is also selected renders as
+					// selected — selection is the stronger, interactive state.
+					selected: selectedSet.has(row)
+				})
+				seen.add(row)
+			}
+		}
+		selectedRows.forEach((row, j) => {
+			if (seen.has(row)) return
+			out.push({
+				key: `s${j}`,
+				cx: scalePos(xs, row[x]),
+				cy: ys(Number(row[y])),
+				row,
+				selected: true
+			})
+		})
+		return out.filter((m) => Number.isFinite(m.cx) && Number.isFinite(m.cy))
+	})
+
+	function resolveLabel(row: Row): string | null {
+		if (!label) return null
+		if (label === true) return String((y ? row[y] : '') ?? '')
+		if (typeof label === 'function') return String(label(row) ?? '')
+		return String(row[label] ?? '')
+	}
+</script>
+
+{#if marks.length}
+	<g data-plot-geom="highlight">
+		{#each marks as m (m.key)}
+			<circle
+				cx={m.cx}
+				cy={m.cy}
+				data-plot-highlight
+				data-plot-selected={m.selected ? 'true' : undefined}
+			/>
+			{#if label}
+				{@const text = resolveLabel(m.row)}
+				{#if text}
+					<text x={m.cx} y={m.cy} dy="-8" text-anchor="middle" data-plot-highlight-label
+						>{text}</text
+					>
+				{/if}
+			{/if}
+		{/each}
+	</g>
+{/if}
+
+<style>
+	[data-plot-highlight] {
+		fill: var(--chart-highlight-color, rgb(var(--color-accent-500, 194 65 12)));
+		stroke: var(--chart-highlight-ring, none);
+		r: var(--chart-highlight-radius, 4);
+		/* Visual only — let clicks pass through to the data hit target beneath so the
+		   highlighted/selected observation stays selectable (and de-selectable). */
+		pointer-events: none;
+	}
+	[data-plot-highlight-label] {
+		fill: currentColor;
+		font-size: 11px;
+	}
+	[data-plot-highlight][data-plot-selected='true'] {
+		stroke: var(
+			--chart-selected-ring,
+			var(--chart-highlight-color, rgb(var(--color-accent-500, 194 65 12)))
+		);
+		stroke-width: var(--chart-selected-ring-width, 2);
+		fill: var(--chart-selected-fill, var(--color-paper, #fff));
+	}
+</style>

package/dist/geoms/Highlight.svelte.d.ts

@@ -0,0 +1,10 @@
+type Row = Record<string, unknown>;
+type Props = {
+    x?: string;
+    y?: string;
+    highlight?: 'first' | 'last' | 'min' | 'max' | number | ((row: Row, i: number) => boolean);
+    label?: boolean | string | ((row: Row) => unknown);
+};
+declare const Highlight: import("svelte").Component<Props, {}, "">;
+type Highlight = ReturnType<typeof Highlight>;
+export default Highlight;

package/dist/geoms/Jitter.svelte

@@ -0,0 +1,82 @@
+<script lang="ts">
+	import { getContext, onMount, onDestroy } from 'svelte'
+	import type { PlotState } from '../PlotState.svelte.js'
+	import { buildSwarm } from '../lib/brewing/marks/swarm.js'
+
+	type Props = {
+		x?: string
+		y?: string
+		fill?: string
+		r?: number
+		method?: 'jitter' | 'swarm'
+		/** Confine points to one half of the band (raincloud/split plots). Default 'center'. */
+		side?: 'left' | 'right' | 'center'
+		options?: { opacity?: number }
+	}
+
+	let { x, y, fill, r = 2, method = 'jitter', side = 'center', options = {} }: Props = $props()
+
+	const plotState = getContext<PlotState>('plot-state')
+	let id = $state<string | null>(null)
+
+	// Fall back to the root Plot channels when the geom omits x/y (composes under
+	// <Plot.Root x y> without silently NaN-ing).
+	const xf = $derived(x ?? plotState.channels?.x)
+	const yf = $derived(y ?? plotState.channels?.y)
+	// fill ?? effective-x drives the color lookup
+	const fillChannel = $derived(fill ?? xf)
+
+	onMount(() => {
+		id = plotState.registerGeom({
+			type: 'jitter',
+			channels: { x: xf, y: yf, color: fillChannel },
+			stat: 'identity',
+			options
+		})
+	})
+	onDestroy(() => {
+		if (id) plotState.unregisterGeom(id)
+	})
+
+	$effect(() => {
+		if (id) plotState.updateGeom(id, { channels: { x: xf, y: yf, color: fillChannel }, stat: 'identity' })
+	})
+
+	const data = $derived(id ? plotState.geomData(id) : [])
+	const xScale = $derived(plotState.xScale)
+	const yScale = $derived(plotState.yScale)
+	const colors = $derived(plotState.colors)
+
+	const points = $derived.by(() => {
+		if (!data?.length || !xScale || !yScale) return []
+		const raw = buildSwarm(data, { x: xf, y: yf, fill: fillChannel }, xScale, yScale, colors, { method, r, side })
+		if (!plotState.isFlipped) return raw
+		// Horizontal: the band axis (swarm spread) stands up on screen-Y and the value
+		// axis runs along screen-X — swap the computed coords through place().
+		return raw.map((p) => {
+			const s = plotState.place(p.cx, p.cy)
+			return { ...p, cx: s.x, cy: s.y }
+		})
+	})
+</script>
+
+{#if points.length > 0}
+	<g data-plot-geom="jitter">
+		{#each points as pt, i (`${String(pt.cx)}::${i}`)}
+			<circle
+				cx={pt.cx}
+				cy={pt.cy}
+				{r}
+				fill={pt.fill}
+				fill-opacity={options?.opacity ?? plotState.chartPreset.opacity.point}
+				stroke={pt.stroke}
+				stroke-width="0.5"
+				data-plot-element="jitter-point"
+				role="graphics-symbol"
+				aria-label={`(${String(pt.data[xf ?? ''])}, ${String(pt.data[yf ?? ''])})`}
+				onmouseenter={() => plotState.setHovered(pt.data)}
+				onmouseleave={() => plotState.clearHovered()}
+			/>
+		{/each}
+	</g>
+{/if}

package/dist/geoms/Jitter.svelte.d.ts

@@ -0,0 +1,15 @@
+type Props = {
+    x?: string;
+    y?: string;
+    fill?: string;
+    r?: number;
+    method?: 'jitter' | 'swarm';
+    /** Confine points to one half of the band (raincloud/split plots). Default 'center'. */
+    side?: 'left' | 'right' | 'center';
+    options?: {
+        opacity?: number;
+    };
+};
+declare const Jitter: import("svelte").Component<Props, {}, "">;
+type Jitter = ReturnType<typeof Jitter>;
+export default Jitter;

package/dist/geoms/Line.svelte

@@ -4,6 +4,7 @@
 	import { buildLines } from '../lib/brewing/marks/lines.js'
 	import { buildSymbolPath } from '../lib/brewing/marks/points.js'
 	import { keyboardNav } from '../lib/keyboard-nav.js'
+	import { buildSelectDetail } from '../lib/select.js'
 	import LabelPill from './LabelPill.svelte'
 
 	type Row = Record<string, unknown>
@@ -48,6 +49,18 @@
 	const plotState = getContext<PlotState>('plot-state')
 	let id = $state<string | null>(null)
 
+	function selectPoint(
+		pt: { data: Row },
+		seg: { key?: unknown },
+		event: MouseEvent | KeyboardEvent
+	) {
+		onselect?.(pt.data)
+		if (plotState.interactive)
+			plotState.handleSelect(
+				buildSelectDetail(pt.data, plotState.data.indexOf(pt.data), { x, y }, 'line', seg?.key, event)
+			)
+	}
+
 	onMount(() => {
 		id = plotState.registerGeom({
 			type: 'line',
@@ -72,7 +85,7 @@
 
 	const lines = $derived.by(() => {
 		if (!data?.length || !xScale || !yScale) return []
-		return buildLines(data, { x, y, color }, xScale, yScale, colors, options.curve)
+		return buildLines(data, { x, y, color }, xScale, yScale, colors, options.curve, plotState.place.bind(plotState))
 	})
 
 	const markerRadius = $derived(options.markerRadius ?? 4)
@@ -91,7 +104,7 @@
 				data-plot-element="line"
 			/>
 			{#if symbolField && symbolMap}
-				{#each seg.points as pt (`${pt.x}::${pt.y}`)}
+				{#each seg.points as pt (pt.i)}
 					<path
 						transform="translate({pt.x},{pt.y})"
 						d={buildSymbolPath(symbolMap.get(pt.data[symbolField]) ?? 'circle', markerRadius)}
@@ -103,7 +116,7 @@
 				{/each}
 			{/if}
 			{#if label}
-				{#each seg.points as pt (`label::${pt.x}::${pt.y}`)}
+				{#each seg.points as pt (`label::${pt.i}`)}
 					{@const text = resolveLabel(pt.data)}
 					{#if text}
 						<LabelPill
@@ -117,21 +130,25 @@
 			{/if}
 			<!-- Invisible hit areas for tooltip and selection -->
 			<!-- svelte-ignore a11y_no_noninteractive_tabindex -->
-			{#each seg.points as pt (`hover::${pt.x}::${pt.y}`)}
+			{#each seg.points as pt (`hover::${pt.i}`)}
 				<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}
+					role={onselect || keyboard || plotState.interactive ? 'button' : 'presentation'}
+					tabindex={onselect || keyboard || plotState.interactive ? 0 : undefined}
+					style:cursor={onselect || keyboard || plotState.interactive ? '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}
+					onclick={onselect || keyboard || plotState.interactive
+						? (e) => selectPoint(pt, seg, e)
+						: undefined}
+					onkeydown={onselect || keyboard || plotState.interactive
+						? (e) => (e.key === 'Enter' || e.key === ' ') && selectPoint(pt, seg, e)
+						: undefined}
 					use:keyboardNav={keyboard}
 				/>
 			{/each}