@rokkit/chart 1.3.6 → 1.3.8

package/dist/AnimatedPlot.svelte

@@ -34,6 +34,11 @@
 		tween?: boolean
 		sorted?: boolean
 		dynamicDomain?: boolean
+		/** Chart direction for standard (non-race) animations — flips via the same geom
+		 *  place() mechanism as static charts. `flip` is sugar for 'horizontal'. Ignored for
+		 *  the bar-chart race, which is inherently horizontal. */
+		orientation?: 'vertical' | 'horizontal'
+		flip?: boolean
 		label?: boolean | string | ((data: Row) => string)
 		children?: Snippet
 	}
@@ -53,16 +58,22 @@
 		helpers = {},
 		width = 600,
 		height = 400,
-		mode = 'light',
+		mode = undefined,
 		grid = true,
 		legend = false,
 		tween = true,
 		sorted = false,
 		dynamicDomain = false,
+		orientation = undefined,
+		flip = false,
 		label = false,
 		children
 	}: Props = $props()
 
+	// Standard-animation direction (non-race). Flows to the frameSpec so the geoms flip via the
+	// same place() path as static charts; the frame tween interpolates values orientation-agnostically.
+	const resolvedOrientation = $derived(flip ? 'horizontal' : orientation)
+
 	// Effective geom list: explicit array takes precedence; otherwise build from shorthand props
 	const effectiveGeoms = $derived(
 		geoms.length > 0
@@ -348,23 +359,30 @@
 		}))
 	)
 
-	const xDomainForFrame = $derived(
+	// The race's value-axis domain (the caller's x = the measured value), dynamic or static.
+	const valueDomainForFrame = $derived(
 		isHorizontalRace && dynamicDomain ? $xDomainTween : staticDomains.xDomain
 	)
 	const frameSpec = $derived<PlotSpec>({
 		data: $displayTween,
-		x,
-		y: isHorizontalRace ? '_rank' : y,
+		// Race uses the STANDARD convention so it flips through the same place() path as every
+		// chart: x = the continuous `_rank` (category/position axis), y = the caller's value.
+		// `continuousCategory` keeps the rank scale linear so fractional ranks tween smoothly.
+		x: isHorizontalRace ? '_rank' : x,
+		y: isHorizontalRace ? x : y,
 		color,
 		geoms: isHorizontalRace ? raceGeoms : prepared.geoms,
-		xDomain: xDomainForFrame,
-		yDomain: isHorizontalRace ? [0, entityCount - 1] : staticDomains.yDomain,
-		orientation: isHorizontalRace ? 'horizontal' : undefined
+		// Pad the rank axis half a slot each end so the first/last bar's thickness doesn't spill
+		// past the axis (a continuous-category bar centres on the rank with a step-derived height).
+		xDomain: isHorizontalRace ? [-0.5, entityCount - 0.5] : staticDomains.xDomain,
+		yDomain: isHorizontalRace ? valueDomainForFrame : staticDomains.yDomain,
+		orientation: isHorizontalRace ? 'horizontal' : resolvedOrientation,
+		continuousCategory: isHorizontalRace
 	})
 </script>
 
 <div data-plot-animated>
-	<PlotChart spec={frameSpec} {helpers} {width} {height} {mode} {grid} {legend}>
+	<PlotChart spec={frameSpec} {helpers} {width} {height} {mode} {grid} {legend} animate={false}>
 		{@render children?.()}
 	</PlotChart>
 

package/dist/AnimatedPlot.svelte.d.ts

@@ -27,6 +27,11 @@ type Props = {
     tween?: boolean;
     sorted?: boolean;
     dynamicDomain?: boolean;
+    /** Chart direction for standard (non-race) animations — flips via the same geom
+     *  place() mechanism as static charts. `flip` is sugar for 'horizontal'. Ignored for
+     *  the bar-chart race, which is inherently horizontal. */
+    orientation?: 'vertical' | 'horizontal';
+    flip?: boolean;
     label?: boolean | string | ((data: Row) => string);
     children?: Snippet;
 };

package/dist/Chart.svelte

@@ -45,7 +45,7 @@
 		symbol = undefined,
 		width = 600,
 		height = 400,
-		mode = 'light',
+		mode = undefined,
 		children
 	}: Props = $props()
 

package/dist/FacetPlot.svelte

@@ -47,7 +47,7 @@
 		panelHeight,
 		width = 900,
 		height = 300,
-		mode = 'light',
+		mode = undefined,
 		grid = true,
 		legend = false,
 		children

package/dist/Plot/Axis.svelte

@@ -59,16 +59,21 @@
 	const xTicks = $derived(buildTicks(state.xScale))
 	const yTicks = $derived(buildTicks(state.yScale))
 
-	const xTransform = $derived(`translate(0, ${state.xAxisY ?? state.innerHeight})`)
-	const yTransform = $derived(`translate(${state.yAxisX ?? 0}, 0)`)
+	// When flipped, the x-channel (category) axis stands up on the left and the value (y)
+	// axis lies along the bottom — each axis type renders on the opposite screen orientation.
+	const flipped = $derived(state.isFlipped)
+	const renderAsX = $derived((type === 'x') !== flipped)
+	const ticks = $derived(type === 'x' ? xTicks : yTicks)
+	const hAxisY = $derived(flipped ? state.innerHeight : (state.xAxisY ?? state.innerHeight))
+	const vAxisX = $derived(flipped ? 0 : (state.yAxisX ?? 0))
 </script>
 
-{#if type === 'x'}
-	<g class="axis x-axis" transform={xTransform} data-plot-axis="x">
+{#if renderAsX}
+	<g class="axis x-axis" transform={`translate(0, ${hAxisY})`} data-plot-axis="x">
 		{#if showLine}
 			<line x1="0" y1="0" x2={state.innerWidth} y2="0" data-plot-axis-line />
 		{/if}
-		{#each xTicks as tick (tick.minor ? `minor-${tick.pos}` : tick.value)}
+		{#each ticks as tick (tick.minor ? `minor-${tick.pos}` : tick.value)}
 			<g transform="translate({tick.pos}, 0)" data-plot-tick>
 				{#if showTicks}
 					<line
@@ -96,11 +101,11 @@
 		{/if}
 	</g>
 {:else}
-	<g class="axis y-axis" transform={yTransform} data-plot-axis="y">
+	<g class="axis y-axis" transform={`translate(${vAxisX}, 0)`} data-plot-axis="y">
 		{#if showLine}
 			<line x1="0" y1="0" x2="0" y2={state.innerHeight} data-plot-axis-line />
 		{/if}
-		{#each yTicks as tick (tick.minor ? `minor-${tick.pos}` : tick.value)}
+		{#each ticks as tick (tick.minor ? `minor-${tick.pos}` : tick.value)}
 			<g transform="translate(0, {tick.pos})" data-plot-tick>
 				{#if showTicks}
 					<line
@@ -130,16 +135,22 @@
 {/if}
 
 <style>
+	/* Readable, theme-adaptive axis colours (fall back to currentColor for a base-only
+	   consumer that doesn't provide the --ink token vocabulary). currentColor alone was a
+	   mode-hardcoded surface tone that went faint on a dark theme paper. */
 	.axis {
 		font-size: 11px;
-		fill: currentColor;
-		stroke: currentColor;
+		fill: var(--ink-mute, currentColor);
+		stroke: var(--ink-mute, currentColor);
 	}
 	.axis-label {
 		font-size: 13px;
 		font-weight: 500;
+		fill: var(--ink, currentColor);
 	}
 	[data-plot-axis-line] {
-		stroke: currentColor;
+		stroke: var(--paper-edge, currentColor);
+		/* Decoration only — never intercept clicks meant for data marks beneath it. */
+		pointer-events: none;
 	}
 </style>

package/dist/Plot/Grid.svelte

@@ -2,26 +2,44 @@
 	import { getContext } from 'svelte'
 	import type { PlotState } from '../PlotState.svelte.js'
 
+	type Props = {
+		lines?: 'auto' | 'x' | 'y' | 'both'
+		xTicks?: number
+		yTicks?: number
+	}
+	let { lines = 'auto', xTicks = 6, yTicks = 6 }: Props = $props()
+
 	const state = getContext<PlotState>('plot-state')
 
-	const xGridLines = $derived.by(() => {
-		const s = state.xScale
-		if (!s || typeof s.bandwidth !== 'function') return []
-		return s.domain().map((val: unknown) => ({ pos: (s(val) ?? 0) + s.bandwidth() / 2 }))
-	})
+	const isBand = (s: unknown) =>
+		!!s && typeof (s as { bandwidth?: unknown }).bandwidth === 'function'
 
-	const yGridLines = $derived.by(() => {
+	const showX = $derived(
+		lines === 'x' || lines === 'both' || (lines === 'auto' && isBand(state.xScale))
+	)
+	const showY = $derived(lines === 'auto' || lines === 'y' || lines === 'both')
+
+	const yLines = $derived.by(() => {
 		const s = state.yScale
-		if (!s || typeof s.ticks !== 'function') return []
-		return s.ticks(6).map((val: number) => ({ pos: s(val) }))
+		if (!showY || !s || typeof s.ticks !== 'function') return []
+		return s.ticks(yTicks).map((val: number) => ({ pos: s(val) }))
+	})
+
+	const xLines = $derived.by(() => {
+		const s = state.xScale
+		if (!showX || !s) return []
+		if (isBand(s))
+			return s.domain().map((val: unknown) => ({ pos: (s(val) ?? 0) + s.bandwidth() / 2 }))
+		if (typeof s.ticks !== 'function') return []
+		return s.ticks(xTicks).map((val: number) => ({ pos: s(val) }))
 	})
 </script>
 
 <g class="grid" data-plot-grid>
-	{#each yGridLines as line (line.pos)}
-		<line x1="0" y1={line.pos} x2={state.innerWidth} y2={line.pos} data-plot-grid-line />
+	{#each yLines as line (line.pos)}
+		<line x1="0" y1={line.pos} x2={state.innerWidth} y2={line.pos} data-plot-grid-line="y" />
 	{/each}
-	{#each xGridLines as line (line.pos)}
+	{#each xLines as line (line.pos)}
 		<line x1={line.pos} y1="0" x2={line.pos} y2={state.innerHeight} data-plot-grid-line="x" />
 	{/each}
 </g>
@@ -29,7 +47,8 @@
 <style>
 	[data-plot-grid-line] {
 		stroke: var(--chart-grid-color, currentColor);
-		opacity: 0.15;
-		stroke-dasharray: 2 4;
+		stroke-width: var(--chart-grid-width, 1);
+		stroke-dasharray: var(--chart-grid-dash, 2 4);
+		opacity: var(--chart-grid-opacity, 0.15);
 	}
 </style>

package/dist/Plot/Grid.svelte.d.ts

@@ -1,3 +1,8 @@
-declare const Grid: import("svelte").Component<Record<string, never>, {}, "">;
+type Props = {
+    lines?: 'auto' | 'x' | 'y' | 'both';
+    xTicks?: number;
+    yTicks?: number;
+};
+declare const Grid: import("svelte").Component<Props, {}, "">;
 type Grid = ReturnType<typeof Grid>;
 export default Grid;

package/dist/Plot/Root.svelte

@@ -1,13 +1,13 @@
 <script lang="ts">
-	import { setContext, untrack } from 'svelte'
 	import type { Snippet } from 'svelte'
-	import { PlotState } from '../PlotState.svelte.js'
 	import { defaultPreset } from '../lib/preset.js'
+	import PlotSurface from '../PlotSurface.svelte'
 
 	type Margin = { top?: number; right?: number; bottom?: number; left?: number }
+	type Row = Record<string, unknown>
 
 	type Props = {
-		data?: Record<string, unknown>[]
+		data?: Row[]
 		x?: string
 		y?: string
 		color?: string
@@ -15,6 +15,30 @@
 		height?: number
 		margin?: Margin
 		mode?: 'light' | 'dark'
+		/** Chart direction. 'horizontal' stands the category axis up and runs the value
+		 *  axis sideways — x/y channels are unchanged. `flip` is sugar for 'horizontal'. */
+		orientation?: 'vertical' | 'horizontal'
+		flip?: boolean
+		/** Order the category (band) axis by aggregated value instead of by label — bars sorted
+		 *  by size (histogram-style). 'desc' (largest first) | 'asc'. */
+		sort?: 'asc' | 'desc'
+		/** Explicit scale domain overrides. */
+		xDomain?: unknown[]
+		yDomain?: unknown[]
+		/** Continuous colour scale controls (sequential/diverging). */
+		colorScale?: unknown
+		colorScheme?: string
+		colorDomain?: unknown[]
+		colorMidpoint?: number
+		/** Enable d3-zoom pan/zoom. */
+		zoom?: boolean
+		/** Opt-in click-to-select; fires onselect(detail) and syncs bind:selected (row refs). */
+		selectable?: boolean
+		onselect?: (detail: unknown) => void
+		selected?: Row[]
+		/** Animate marks on data/flip changes. Enabled one frame after mount so the
+		 *  initial layout paints un-animated. Default `true`. */
+		animate?: boolean
 		children?: Snippet
 	}
 
@@ -26,52 +50,46 @@
 		width = 600,
 		height = 400,
 		margin = undefined,
-		mode = 'light',
+		mode = undefined,
+		orientation = undefined,
+		flip = false,
+		sort = undefined,
+		xDomain = undefined,
+		yDomain = undefined,
+		colorScale = undefined,
+		colorScheme = undefined,
+		colorDomain = undefined,
+		colorMidpoint = undefined,
+		zoom = false,
+		selectable = false,
+		onselect = undefined,
+		selected = $bindable([]),
+		animate = true,
 		children
 	}: Props = $props()
 
-	const plotState = untrack(
-		() =>
-			new PlotState({
-				data,
-				channels: { x, y, color },
-				width,
-				height,
-				margin,
-				mode,
-				chartPreset: defaultPreset
-			})
-	)
-
-	$effect(() => {
-		plotState.update({
-			data,
-			channels: { x, y, color },
-			width,
-			height,
-			margin,
-			mode,
-			chartPreset: defaultPreset
-		})
+	// The composable root is just PlotSurface (the shared shell) fed a config from these props.
+	const config = $derived({
+		data,
+		channels: { x, y, color },
+		width,
+		height,
+		margin,
+		mode,
+		orientation: flip ? 'horizontal' : orientation,
+		sort,
+		xDomain,
+		yDomain,
+		colorScale,
+		colorScheme,
+		colorDomain,
+		colorMidpoint,
+		onselect,
+		selectable,
+		chartPreset: defaultPreset
 	})
-
-	setContext('plot-state', plotState)
-
-	const svgWidth = $derived(plotState.innerWidth + (margin?.left ?? 50) + (margin?.right ?? 30))
-	const svgHeight = $derived(plotState.innerHeight + (margin?.top ?? 20) + (margin?.bottom ?? 40))
-	const marginLeft = $derived(margin?.left ?? 50)
-	const marginTop = $derived(margin?.top ?? 20)
 </script>
 
-<svg
-	{width}
-	{height}
-	viewBox="0 0 {svgWidth} {svgHeight}"
-	role="img"
-	aria-label="Chart visualization"
-	data-plot-root
->
-	<g transform="translate({marginLeft}, {marginTop})" data-plot-canvas>
-		{@render children?.()}
-	</g>
-</svg>
+<PlotSurface {config} {animate} {zoom} bind:selected>
+	{@render children?.()}
+</PlotSurface>

package/dist/Plot/Root.svelte.d.ts

@@ -5,8 +5,9 @@ type Margin = {
     bottom?: number;
     left?: number;
 };
+type Row = Record<string, unknown>;
 type Props = {
-    data?: Record<string, unknown>[];
+    data?: Row[];
     x?: string;
     y?: string;
     color?: string;
@@ -14,8 +15,32 @@ type Props = {
     height?: number;
     margin?: Margin;
     mode?: 'light' | 'dark';
+    /** Chart direction. 'horizontal' stands the category axis up and runs the value
+     *  axis sideways — x/y channels are unchanged. `flip` is sugar for 'horizontal'. */
+    orientation?: 'vertical' | 'horizontal';
+    flip?: boolean;
+    /** Order the category (band) axis by aggregated value instead of by label — bars sorted
+     *  by size (histogram-style). 'desc' (largest first) | 'asc'. */
+    sort?: 'asc' | 'desc';
+    /** Explicit scale domain overrides. */
+    xDomain?: unknown[];
+    yDomain?: unknown[];
+    /** Continuous colour scale controls (sequential/diverging). */
+    colorScale?: unknown;
+    colorScheme?: string;
+    colorDomain?: unknown[];
+    colorMidpoint?: number;
+    /** Enable d3-zoom pan/zoom. */
+    zoom?: boolean;
+    /** Opt-in click-to-select; fires onselect(detail) and syncs bind:selected (row refs). */
+    selectable?: boolean;
+    onselect?: (detail: unknown) => void;
+    selected?: Row[];
+    /** Animate marks on data/flip changes. Enabled one frame after mount so the
+     *  initial layout paints un-animated. Default `true`. */
+    animate?: boolean;
     children?: Snippet;
 };
-declare const Root: import("svelte").Component<Props, {}, "">;
+declare const Root: import("svelte").Component<Props, {}, "selected">;
 type Root = ReturnType<typeof Root>;
 export default Root;

package/dist/Plot/Timeline.svelte

@@ -24,8 +24,6 @@
 	const safeIndex = $derived(
 		frameKeys.length === 0 ? 0 : Math.min(currentIndex, frameKeys.length - 1)
 	)
-
-	const SPEEDS = [0.5, 1, 1.5, 2, 4]
 </script>
 
 <div class="timeline" data-plot-timeline>
@@ -56,17 +54,20 @@
 		data-plot-timeline-scrub
 	/>
 
-	<!-- Speed selector -->
-	<select
-		aria-label="Playback speed"
-		value={speed}
-		onchange={(e) => onspeed?.(Number(e.currentTarget.value))}
-		data-plot-timeline-speed
-	>
-		{#each SPEEDS as s (s)}
-			<option value={s}>{s}×</option>
-		{/each}
-	</select>
+	<!-- Speed (× multiplier) — themed numeric input -->
+	<div class="speed">
+		<input
+			type="number"
+			min="0.25"
+			max="8"
+			step="0.25"
+			value={speed}
+			aria-label="Playback speed"
+			onchange={(e) => onspeed?.(Math.max(0.25, Number(e.currentTarget.value) || 1))}
+			data-plot-timeline-speed
+		/>
+		<span class="speed-unit" aria-hidden="true">×</span>
+	</div>
 </div>
 
 <style>
@@ -76,6 +77,7 @@
 		gap: 8px;
 		padding: 8px 0;
 		font-size: 12px;
+		color: var(--ink-mute, currentColor);
 	}
 	.play-pause {
 		font-size: 16px;
@@ -83,12 +85,36 @@
 		background: none;
 		border: none;
 		padding: 0;
+		color: var(--ink, currentColor);
 	}
 	.scrub {
 		flex: 1;
+		accent-color: var(--accent, currentColor);
 	}
 	.frame-label {
 		min-width: 4ch;
 		text-align: right;
+		color: var(--ink, currentColor);
+	}
+	.speed {
+		display: inline-flex;
+		align-items: center;
+		gap: 2px;
+	}
+	.speed input {
+		width: 3.5em;
+		font: inherit;
+		color: var(--ink, currentColor);
+		background: var(--paper, transparent);
+		border: 1px solid var(--paper-edge, currentColor);
+		border-radius: 4px;
+		padding: 2px 4px;
+	}
+	.speed input:focus-visible {
+		outline: 2px solid var(--accent, currentColor);
+		outline-offset: 1px;
+	}
+	.speed-unit {
+		color: var(--ink-mute, currentColor);
 	}
 </style>

package/dist/Plot/index.d.ts

@@ -1,9 +1,9 @@
 export { default as Root } from "./Root.svelte";
 export { default as Axis } from "./Axis.svelte";
-export { default as Bar } from "./Bar.svelte";
+export { default as Bar } from "../geoms/Bar.svelte";
 export { default as Legend } from "./Legend.svelte";
 export { default as Grid } from "./Grid.svelte";
-export { default as Line } from "./Line.svelte";
-export { default as Area } from "./Area.svelte";
-export { default as Point } from "./Point.svelte";
+export { default as Line } from "../geoms/Line.svelte";
+export { default as Area } from "../geoms/Area.svelte";
+export { default as Point } from "../geoms/Point.svelte";
 export { default as Arc } from "./Arc.svelte";

package/dist/Plot/index.js

@@ -1,9 +1,9 @@
 export { default as Root } from './Root.svelte'
 export { default as Axis } from './Axis.svelte'
-export { default as Bar } from './Bar.svelte'
+export { default as Bar } from '../geoms/Bar.svelte'
 export { default as Legend } from './Legend.svelte'
 export { default as Grid } from './Grid.svelte'
-export { default as Line } from './Line.svelte'
-export { default as Area } from './Area.svelte'
-export { default as Point } from './Point.svelte'
+export { default as Line } from '../geoms/Line.svelte'
+export { default as Area } from '../geoms/Area.svelte'
+export { default as Point } from '../geoms/Point.svelte'
 export { default as Arc } from './Arc.svelte'