@rokkit/chart 1.3.7 → 1.3.8

package/dist/geoms/Bar.svelte

@@ -2,7 +2,7 @@
 	import { getContext, onMount, onDestroy } from 'svelte'
 	import type { PlotState } from '../PlotState.svelte.js'
 	import type { createCrossFilter } from '../crossfilter/createCrossFilter.svelte.js'
-	import { buildGroupedBars, buildStackedBars, buildHorizontalBars } from './lib/bars.js'
+	import { buildBars, buildStackedBars } from './lib/bars.js'
 	import { keyboardNav } from '../lib/keyboard-nav.js'
 	import { buildSelectDetail } from '../lib/select.js'
 	import LabelPill from './LabelPill.svelte'
@@ -102,13 +102,24 @@
 	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)
-		}
+		// One builder, one path: express bars in (category, value) space and map to screen via
+		// place() (identity vertical, swap when flipped). `continuousCategory` keeps a linear
+		// category axis (the bar-chart race's tweened rank) so it positions/tweens smoothly.
+		const place = plotState.place.bind(plotState)
 		if (options.stack) {
-			return buildStackedBars(data, channels, xScale, yScale, colors, innerHeight, patterns)
+			return buildStackedBars(data, channels, xScale, yScale, colors, innerHeight, patterns, place)
 		}
-		return buildGroupedBars(data, channels, xScale, yScale, colors, innerHeight, patterns)
+		return buildBars(
+			data,
+			channels,
+			xScale,
+			yScale,
+			colors,
+			innerHeight,
+			patterns,
+			place,
+			plotState.continuousCategory
+		)
 	})
 
 	let dimmedByKey = $state<Record<string, boolean>>({})

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/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

@@ -85,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)

package/dist/geoms/Point.svelte

@@ -107,7 +107,7 @@
 
 	const points = $derived.by(() => {
 		if (!data?.length || !xScale || !yScale) return []
-		return buildPoints(
+		const raw = buildPoints(
 			data,
 			{ x, y, color, size, symbol: symbolField },
 			xScale,
@@ -118,6 +118,12 @@
 			defaultRadius,
 			options?.jitter ?? null
 		)
+		if (!plotState.isFlipped) return raw
+		// Horizontal: swap each point's screen coords (value → screen-X, category → screen-Y).
+		return raw.map((p) => {
+			const s = plotState.place(p.cx, p.cy)
+			return { ...p, cx: s.x, cy: s.y }
+		})
 	})
 </script>
 

package/dist/geoms/Rule.svelte

@@ -0,0 +1,113 @@
+<script lang="ts">
+	import { getContext } from 'svelte'
+	import type { PlotState } from '../PlotState.svelte.js'
+
+	type RuleValue = number | string
+	type Props = {
+		/** Vertical reference line(s) at these x-axis value(s) (a value, or a band category). */
+		x?: RuleValue | RuleValue[]
+		/** Horizontal reference line(s) at these y-axis value(s). */
+		y?: RuleValue | RuleValue[]
+		stroke?: string
+		/** SVG stroke-dasharray (default dashed). Pass '' for a solid line. */
+		dash?: string
+		strokeWidth?: number
+		/** Optional label drawn at the line's end. String, or a fn of the value. */
+		label?: string | ((value: RuleValue) => string)
+	}
+
+	let {
+		x,
+		y,
+		stroke = undefined,
+		dash = '4 4',
+		strokeWidth = 1,
+		label = undefined
+	}: Props = $props()
+
+	const plotState = getContext<PlotState>('plot-state')
+	const xScale = $derived(plotState.xScale)
+	const yScale = $derived(plotState.yScale)
+
+	const toArray = (v: RuleValue | RuleValue[] | undefined): RuleValue[] =>
+		v === undefined ? [] : Array.isArray(v) ? v : [v]
+
+	// Position along an axis: band scales resolve to the band centre, linear scales map directly.
+	function axisPos(scale: { (v: unknown): number | undefined; bandwidth?: () => number }, v: unknown) {
+		const base = scale(v) ?? 0
+		return typeof scale.bandwidth === 'function' ? base + scale.bandwidth() / 2 : base
+	}
+	// The full [min, max] screen extent of a scale's range (spans the perpendicular axis).
+	function axisExtent(scale: { range: () => number[] }) {
+		const r = scale.range()
+		return [Math.min(...r), Math.max(...r)]
+	}
+
+	const labelFor = (v: RuleValue) =>
+		typeof label === 'function' ? label(v) : typeof label === 'string' ? label : null
+
+	// Each rule is expressed in (x-channel, y-channel) space and placed to screen, so it
+	// transposes under orientation flip: a y-value reference is horizontal when vertical and
+	// vertical when flipped (it stays perpendicular to the value axis).
+	const rules = $derived.by(() => {
+		if (!xScale || !yScale) return []
+		const place = plotState.place.bind(plotState)
+		const out: Array<{
+			key: string
+			x1: number
+			y1: number
+			x2: number
+			y2: number
+			value: RuleValue
+			text: string | null
+		}> = []
+		const [xLo, xHi] = axisExtent(xScale)
+		const [yLo, yHi] = axisExtent(yScale)
+
+		for (const yv of toArray(y)) {
+			const yc = axisPos(yScale, yv)
+			const a = place(xLo, yc)
+			const b = place(xHi, yc)
+			out.push({ key: `y-${yv}`, x1: a.x, y1: a.y, x2: b.x, y2: b.y, value: yv, text: labelFor(yv) })
+		}
+		for (const xv of toArray(x)) {
+			const xc = axisPos(xScale, xv)
+			const a = place(xc, yLo)
+			const b = place(xc, yHi)
+			out.push({ key: `x-${xv}`, x1: a.x, y1: a.y, x2: b.x, y2: b.y, value: xv, text: labelFor(xv) })
+		}
+		return out
+	})
+
+	const strokeColor = $derived(stroke ?? 'currentColor')
+</script>
+
+{#if rules.length > 0}
+	<g data-plot-geom="rule">
+		{#each rules as rule (rule.key)}
+			<line
+				x1={rule.x1}
+				y1={rule.y1}
+				x2={rule.x2}
+				y2={rule.y2}
+				stroke={strokeColor}
+				stroke-width={strokeWidth}
+				stroke-dasharray={dash || undefined}
+				data-plot-element="rule"
+				data-plot-value={rule.value}
+			/>
+			{#if rule.text}
+				<text
+					x={rule.x2}
+					y={rule.y2}
+					dx="-4"
+					dy="-4"
+					text-anchor="end"
+					font-size="10"
+					fill={strokeColor}
+					data-plot-element="rule-label"
+				>{rule.text}</text>
+			{/if}
+		{/each}
+	</g>
+{/if}

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

@@ -0,0 +1,16 @@
+type RuleValue = number | string;
+type Props = {
+    /** Vertical reference line(s) at these x-axis value(s) (a value, or a band category). */
+    x?: RuleValue | RuleValue[];
+    /** Horizontal reference line(s) at these y-axis value(s). */
+    y?: RuleValue | RuleValue[];
+    stroke?: string;
+    /** SVG stroke-dasharray (default dashed). Pass '' for a solid line. */
+    dash?: string;
+    strokeWidth?: number;
+    /** Optional label drawn at the line's end. String, or a fn of the value. */
+    label?: string | ((value: RuleValue) => string);
+};
+declare const Rule: import("svelte").Component<Props, {}, "">;
+type Rule = ReturnType<typeof Rule>;
+export default Rule;