@rokkit/chart 1.1.18 → 1.1.19

package/src/geoms/Bar.svelte

@@ -1,9 +1,34 @@
-<script>
+<script lang="ts">
 	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 { keyboardNav } from '../lib/keyboard-nav.js'
 	import LabelPill from './LabelPill.svelte'
 
+	type Row = Record<string, unknown>
+	type CrossFilter = ReturnType<typeof createCrossFilter>
+	type Options = {
+		stack?: boolean
+		orientation?: 'horizontal' | 'vertical'
+		labelInside?: boolean
+		labelOffset?: number
+	}
+
+	type Props = {
+		x?: string
+		y?: string
+		color?: string
+		fill?: string
+		pattern?: string
+		label?: boolean | string | ((data: Row) => unknown)
+		stat?: string
+		options?: Options
+		filterable?: boolean
+		onselect?: (data: Row) => void
+		keyboard?: boolean
+	}
+
 	let {
 		x,
 		y,
@@ -16,19 +41,14 @@
 		filterable = false,
 		onselect = undefined,
 		keyboard = false
-	} = $props()
+	}: Props = $props()
 
 	// `fill` is accepted as an alias for `color` (consistent with Arc.svelte)
 	const colorChannel = $derived(fillProp ?? color)
 
-	/**
-	 * @param {Record<string, unknown>} data
-	 * @param {string} defaultField
-	 * @returns {string | null}
-	 */
-	function resolveLabel(data, defaultField) {
+	function resolveLabel(data: Row, defaultField: string | undefined): string | null {
 		if (!label) return null
-		if (label === true) return String(data[defaultField] ?? '')
+		if (label === true) return String((defaultField ? data[defaultField] : undefined) ?? '')
 		if (typeof label === 'function') return String(label(data) ?? '')
 		if (typeof label === 'string') return String(data[label] ?? '')
 		return null
@@ -36,10 +56,8 @@
 
 	/**
 	 * Pick white or dark text based on perceived luminance of a hex fill color.
-	 * @param {string | undefined} hex
-	 * @returns {string}
 	 */
-	function contrastColor(hex) {
+	function contrastColor(hex: string | undefined): string {
 		if (!hex || !hex.startsWith('#') || hex.length < 7) return 'white'
 		const r = parseInt(hex.slice(1, 3), 16) / 255
 		const g = parseInt(hex.slice(3, 5), 16) / 255
@@ -47,9 +65,9 @@
 		return 0.299 * r + 0.587 * g + 0.114 * b > 0.55 ? '#333' : 'white'
 	}
 
-	const plotState = getContext('plot-state')
-	const cf = getContext('crossfilter')
-	let id = $state(null)
+	const plotState = getContext<PlotState>('plot-state')
+	const cf = getContext<CrossFilter | undefined>('crossfilter')
+	let id = $state<string | null>(null)
 
 	onMount(() => {
 		id = plotState.registerGeom({
@@ -92,8 +110,7 @@
 		return buildGroupedBars(data, channels, xScale, yScale, colors, innerHeight, patterns)
 	})
 
-	/** @type {Record<string, boolean>} */
-	let dimmedByKey = $state({})
+	let dimmedByKey = $state<Record<string, boolean>>({})
 
 	$effect(() => {
 		if (!cf) {
@@ -104,7 +121,7 @@
 		// Reading it here establishes a reactive dependency so the effect re-runs
 		// whenever any filter changes — including changes from sibling FilterBars.
 		void cf.version
-		const next = /** @type {Record<string, boolean>} */ ({})
+		const next: Record<string, boolean> = {}
 		for (const bar of bars) {
 			const dimmedByX = x ? cf.isDimmed(x, bar.data[x]) : false
 			const dimmedByY = y ? cf.isDimmed(y, bar.data[y]) : false
@@ -113,7 +130,7 @@
 		dimmedByKey = next
 	})
 
-	function handleBarClick(barX) {
+	function handleBarClick(barX: unknown) {
 		if (!filterable || !x || !cf) return
 		cf.toggleCategorical(x, barX)
 	}
@@ -132,8 +149,8 @@
 				stroke={bar.stroke ?? 'none'}
 				stroke-width={bar.stroke ? 0.5 : 0}
 				data-plot-element="bar"
-				data-plot-value={bar.data[y]}
-				data-plot-category={bar.data[x]}
+				data-plot-value={bar.data[y ?? '']}
+				data-plot-category={bar.data[x ?? '']}
 				data-dimmed={dimmedByKey[bar.key] ? true : undefined}
 				style:cursor={filterable || onselect ? 'pointer' : undefined}
 				onclick={filterable && x ? () => { handleBarClick(bar.data[x]); onselect?.(bar.data) } : onselect ? () => onselect(bar.data) : undefined}
@@ -143,11 +160,11 @@
 				role={filterable || onselect || keyboard ? 'button' : 'graphics-symbol'}
 				tabindex={filterable || onselect || keyboard ? 0 : undefined}
 				use:keyboardNav={keyboard}
-				aria-label="{bar.data[x]}: {bar.data[y]}"
+				aria-label="{bar.data[x ?? '']}: {bar.data[y ?? '']}"
 				onmouseenter={() => plotState.setHovered(bar.data)}
 				onmouseleave={() => plotState.clearHovered()}
 			>
-				<title>{bar.data[x]}: {bar.data[y]}</title>
+				<title>{bar.data[x ?? '']}: {bar.data[y ?? '']}</title>
 			</rect>
 			{#if bar.patternId}
 				<rect

package/src/geoms/Box.svelte

@@ -1,11 +1,20 @@
-<script>
+<script lang="ts">
 	import { getContext, onMount, onDestroy } from 'svelte'
+	import type { PlotState } from '../PlotState.svelte.js'
 	import { buildBoxes } from '../lib/brewing/marks/boxes.js'
 
-	let { x, y, fill, stat = 'boxplot', options = {} } = $props()
+	type Props = {
+		x?: string
+		y?: string
+		fill?: string
+		stat?: string
+		options?: { opacity?: number }
+	}
 
-	const plotState = getContext('plot-state')
-	let id = $state(null)
+	let { x, y, fill, stat = 'boxplot', 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)

package/src/geoms/Candlestick.svelte

@@ -1,5 +1,25 @@
-<script>
+<script lang="ts">
 	import { getContext, onMount, onDestroy } from 'svelte'
+	import type { PlotState } from '../PlotState.svelte.js'
+
+	type Options = {
+		open?: string
+		high?: string
+		low?: string
+		close?: string
+		upColor?: string
+		downColor?: string
+		wickWidth?: number
+	}
+
+	type Props = {
+		x?: string
+		y?: string
+		color?: string
+		fill?: string
+		stat?: string
+		options?: Options
+	}
 
 	let {
 		x,
@@ -8,7 +28,7 @@
 		fill: fillProp = undefined,
 		stat = 'identity',
 		options = {}
-	} = $props()
+	}: Props = $props()
 
 	const open = $derived(options.open ?? 'open')
 	const high = $derived(options.high ?? 'high')
@@ -18,8 +38,8 @@
 	const downColor = $derived(options.downColor ?? '#ef4444')
 	const wickWidth = $derived(options.wickWidth ?? 1)
 
-	const plotState = getContext('plot-state')
-	let id = $state(null)
+	const plotState = getContext<PlotState>('plot-state')
+	let id = $state<string | null>(null)
 
 	onMount(() => {
 		// Register with y pointing to 'high' so the y scale covers the full range
@@ -52,7 +72,7 @@
 		const bodyOffset = (bw - bodyWidth) / 2
 
 		return data.map((d, i) => {
-			const xPos = (xScale(d[x]) ?? 0) + bodyOffset
+			const xPos = (xScale(d[x ?? '']) ?? 0) + bodyOffset
 			const openVal = Number(d[open])
 			const closeVal = Number(d[close])
 			const highVal = Number(d[high])
@@ -62,7 +82,7 @@
 			const bodyBottom = yScale(isUp ? openVal : closeVal)
 
 			return {
-				key: `${d[x]}-${i}`,
+				key: `${d[x ?? '']}-${i}`,
 				// Body
 				bodyX: xPos,
 				bodyY: bodyTop,
@@ -104,7 +124,7 @@
 				onmouseenter={() => plotState.setHovered(c.data)}
 				onmouseleave={() => plotState.clearHovered()}
 			>
-				<title>{c.data[x]}: O={c.data[open]} H={c.data[high]} L={c.data[low]} C={c.data[close]}</title>
+				<title>{c.data[x ?? '']}: O={c.data[open]} H={c.data[high]} L={c.data[low]} C={c.data[close]}</title>
 			</rect>
 		{/each}
 	</g>

package/src/geoms/Heatmap.svelte

@@ -1,5 +1,15 @@
-<script>
+<script lang="ts">
 	import { getContext, onMount, onDestroy } from 'svelte'
+	import type { PlotState } from '../PlotState.svelte.js'
+
+	type Props = {
+		x?: string
+		y?: string
+		color?: string
+		fill?: string
+		stat?: string
+		options?: { rounded?: number }
+	}
 
 	let {
 		x,
@@ -8,12 +18,12 @@
 		fill: fillProp,
 		stat = 'identity',
 		options = {}
-	} = $props()
+	}: Props = $props()
 
 	const colorChannel = $derived(fillProp ?? color)
 
-	const plotState = getContext('plot-state')
-	let id = $state(null)
+	const plotState = getContext<PlotState>('plot-state')
+	let id = $state<string | null>(null)
 
 	onMount(() => {
 		id = plotState.registerGeom({
@@ -47,15 +57,16 @@
 		const bwY = typeof yScale.bandwidth === 'function' ? yScale.bandwidth() : 0
 
 		return data.map((d, i) => {
-			const xVal = d[x]
-			const yVal = d[y]
+			const xVal = d[x ?? '']
+			const yVal = d[y ?? '']
 			const colorVal = colorChannel ? d[colorChannel] : null
 			let cellFill = '#ccc'
 
 			if (continuousColor) {
 				cellFill = continuousColor.scale(Number(colorVal))
-			} else if (categoricalColors?.has(colorVal)) {
-				cellFill = categoricalColors.get(colorVal).fill
+			} else {
+				const entry = categoricalColors?.get(colorVal)
+				if (entry) cellFill = entry.fill
 			}
 
 			return {
@@ -86,7 +97,7 @@
 				onmouseenter={() => plotState.setHovered(cell.data)}
 				onmouseleave={() => plotState.clearHovered()}
 			>
-				<title>{cell.data[x]}, {cell.data[y]}: {colorChannel ? cell.data[colorChannel] : ''}</title>
+				<title>{cell.data[x ?? '']}, {cell.data[y ?? '']}: {colorChannel ? cell.data[colorChannel] : ''}</title>
 			</rect>
 		{/each}
 	</g>

package/src/geoms/Hexbin.svelte

@@ -1,5 +1,19 @@
-<script>
+<script lang="ts">
 	import { getContext, onMount, onDestroy } from 'svelte'
+	import type { PlotState } from '../PlotState.svelte.js'
+
+	type Row = Record<string, unknown>
+	type Scale = (value: unknown) => number | undefined
+	type Bin = { cx: number; cy: number; count: number; points: Row[] }
+
+	type Props = {
+		x?: string
+		y?: string
+		color?: string
+		fill?: string
+		stat?: string
+		options?: { radius?: number }
+	}
 
 	let {
 		x,
@@ -8,12 +22,12 @@
 		fill: fillProp = undefined,
 		stat = 'identity',
 		options = {}
-	} = $props()
+	}: Props = $props()
 
 	const radius = $derived(options.radius ?? 20)
 
-	const plotState = getContext('plot-state')
-	let id = $state(null)
+	const plotState = getContext<PlotState>('plot-state')
+	let id = $state<string | null>(null)
 
 	onMount(() => {
 		id = plotState.registerGeom({
@@ -41,15 +55,22 @@
 
 	// Hex binning: group data points into hexagonal cells
 	// eslint-disable-next-line max-params, complexity
-	function hexBin(data, xField, yField, xScale, yScale, r) {
+	function hexBin(
+		rows: Row[],
+		xField: string | undefined,
+		yField: string | undefined,
+		xScale: Scale,
+		yScale: Scale,
+		r: number
+	): Bin[] {
 		const dx = r * 2 * Math.sin(Math.PI / 3) // horizontal spacing
 		const dy = r * 1.5                        // vertical spacing
 		// eslint-disable-next-line svelte/prefer-svelte-reactivity
-		const bins = new Map()
+		const bins = new Map<string, Bin>()
 
-		for (const d of data) {
-			const px = xScale(d[xField])
-			const py = yScale(d[yField])
+		for (const d of rows) {
+			const px = xScale(d[xField ?? ''])
+			const py = yScale(d[yField ?? ''])
 			if (px === null || px === undefined || py === null || py === undefined) continue
 
 			// Find nearest hex center
@@ -59,10 +80,11 @@
 			const cy = row * dy
 			const key = `${col},${row}`
 
-			if (!bins.has(key)) {
-				bins.set(key, { cx, cy, count: 0, points: [] })
+			let bin = bins.get(key)
+			if (!bin) {
+				bin = { cx, cy, count: 0, points: [] }
+				bins.set(key, bin)
 			}
-			const bin = bins.get(key)
 			bin.count++
 			bin.points.push(d)
 		}
@@ -70,7 +92,7 @@
 	}
 
 	// Build hexagon path for a given radius
-	function hexPath(r) {
+	function hexPath(r: number) {
 		const angles = [0, 1, 2, 3, 4, 5].map((i) => ((i * 60 - 30) * Math.PI) / 180)
 		return `${angles.map((a, i) => `${i === 0 ? 'M' : 'L'}${r * Math.cos(a)},${r * Math.sin(a)}`).join('')  }Z`
 	}

package/src/geoms/LabelPill.svelte

@@ -1,6 +1,12 @@
-<script>
-	/** @type {{ x: number, y: number, text: string, color?: string }} */
-	let { x, y, text, color = '#333' } = $props()
+<script lang="ts">
+	type Props = {
+		x: number
+		y: number
+		text: string
+		color?: string
+	}
+
+	let { x, y, text, color = '#333' }: Props = $props()
 
 	const w = $derived(Math.max(36, String(text).length * 7 + 12))
 </script>

package/src/geoms/Line.svelte

@@ -1,10 +1,31 @@
-<script>
+<script lang="ts">
 	import { getContext, onMount, onDestroy } from 'svelte'
+	import type { PlotState } from '../PlotState.svelte.js'
 	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'
 
+	type Row = Record<string, unknown>
+	type Options = {
+		curve?: 'linear' | 'smooth' | 'step'
+		strokeWidth?: number
+		markerRadius?: number
+		labelOffset?: { x?: number; y?: number }
+	}
+
+	type Props = {
+		x?: string
+		y?: string
+		color?: string
+		symbol?: string
+		label?: boolean | string | ((data: Row) => unknown)
+		stat?: string
+		options?: Options
+		onselect?: (data: Row) => void
+		keyboard?: boolean
+	}
+
 	let {
 		x,
 		y,
@@ -15,21 +36,17 @@
 		options = {},
 		onselect = undefined,
 		keyboard = false
-	} = $props()
+	}: Props = $props()
 
-	/**
-	 * @param {Record<string, unknown>} data
-	 * @returns {string | null}
-	 */
-	function resolveLabel(data) {
+	function resolveLabel(data: Row): string | null {
 		if (!label) return null
-		if (label === true) return String(data[y] ?? '')
+		if (label === true) return String((y ? data[y] : undefined) ?? '')
 		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<PlotState>('plot-state')
+	let id = $state<string | null>(null)
 
 	onMount(() => {
 		id = plotState.registerGeom({

package/src/geoms/Point.svelte

@@ -1,10 +1,34 @@
-<script>
+<script lang="ts">
 	import { getContext, onMount, onDestroy } from 'svelte'
 	import { scaleSqrt } from 'd3-scale'
+	import type { PlotState } from '../PlotState.svelte.js'
 	import { buildPoints } from '../lib/brewing/marks/points.js'
 	import { keyboardNav } from '../lib/keyboard-nav.js'
 	import LabelPill from './LabelPill.svelte'
 
+	type Row = Record<string, unknown>
+	type Options = {
+		minRadius?: number
+		maxRadius?: number
+		radius?: number
+		opacity?: number
+		jitter?: { width?: number; height?: number } | null
+		labelOffset?: { x?: number; y?: number }
+	}
+
+	type Props = {
+		x?: string
+		y?: string
+		color?: string
+		size?: string
+		symbol?: string
+		label?: boolean | string | ((data: Row) => unknown)
+		stat?: string
+		options?: Options
+		onselect?: (data: Row) => void
+		keyboard?: boolean
+	}
+
 	let {
 		x,
 		y,
@@ -16,21 +40,17 @@
 		options = {},
 		onselect = undefined,
 		keyboard = false
-	} = $props()
+	}: Props = $props()
 
-	/**
-	 * @param {Record<string, unknown>} data
-	 * @returns {string | null}
-	 */
-	function resolveLabel(data) {
+	function resolveLabel(data: Row): string | null {
 		if (!label) return null
-		if (label === true) return String(data[y] ?? '')
+		if (label === true) return String((y ? data[y] : undefined) ?? '')
 		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<PlotState>('plot-state')
+	let id = $state<string | null>(null)
 
 	onMount(() => {
 		id = plotState.registerGeom({
@@ -88,7 +108,7 @@
 {#if points.length > 0}
 	<g data-plot-geom="point">
 		<!-- svelte-ignore a11y_no_noninteractive_tabindex -->
-		{#each points as pt, i (`${i}::${pt.data[x]}::${pt.data[y]}`)}
+		{#each points as pt, i (`${i}::${pt.data[x ?? '']}::${pt.data[y ?? '']}`)}
 			{#if pt.symbolPath}
 				<path
 					transform="translate({pt.cx},{pt.cy})"
@@ -101,7 +121,7 @@
 					role={onselect || keyboard ? 'button' : 'graphics-symbol'}
 					tabindex={onselect || keyboard ? 0 : undefined}
 					style:cursor={onselect ? 'pointer' : undefined}
-					aria-label="{pt.data[x]}, {pt.data[y]}"
+					aria-label="{pt.data[x ?? '']}, {pt.data[y ?? '']}"
 					onmouseenter={() => plotState.setHovered(pt.data)}
 					onmouseleave={() => plotState.clearHovered()}
 					onclick={onselect ? () => onselect(pt.data) : undefined}
@@ -121,7 +141,7 @@
 					role={onselect || keyboard ? 'button' : 'graphics-symbol'}
 					tabindex={onselect || keyboard ? 0 : undefined}
 					style:cursor={onselect ? 'pointer' : undefined}
-					aria-label="{pt.data[x]}, {pt.data[y]}"
+					aria-label="{pt.data[x ?? '']}, {pt.data[y ?? '']}"
 					onmouseenter={() => plotState.setHovered(pt.data)}
 					onmouseleave={() => plotState.clearHovered()}
 					onclick={onselect ? () => onselect(pt.data) : undefined}

package/src/geoms/Ribbon.svelte

@@ -1,5 +1,23 @@
-<script>
+<script lang="ts">
 	import { getContext, onMount, onDestroy } from 'svelte'
+	import type { PlotState } from '../PlotState.svelte.js'
+
+	type Node = { name: string; y: number; height: number }
+
+	type Options = {
+		source?: string
+		target?: string
+		value?: string
+	}
+
+	type Props = {
+		x?: string
+		y?: string
+		color?: string
+		fill?: string
+		stat?: string
+		options?: Options
+	}
 
 	let {
 		x = undefined,
@@ -8,15 +26,15 @@
 		fill: fillProp = undefined,
 		stat = 'identity',
 		options = {}
-	} = $props()
+	}: Props = $props()
 
 	const sourceField = $derived(options.source ?? 'source')
 	const targetField = $derived(options.target ?? 'target')
 	const valueField = $derived(options.value ?? 'value')
 	const colorChannel = $derived(fillProp ?? color)
 
-	const plotState = getContext('plot-state')
-	let id = $state(null)
+	const plotState = getContext<PlotState>('plot-state')
+	let id = $state<string | null>(null)
 
 	onMount(() => {
 		id = plotState.registerGeom({
@@ -57,9 +75,9 @@
 
 		// Compute node positions
 		// eslint-disable-next-line svelte/prefer-svelte-reactivity
-		const sourceMap = new Map()
+		const sourceMap = new Map<string, number>()
 		// eslint-disable-next-line svelte/prefer-svelte-reactivity
-		const targetMap = new Map()
+		const targetMap = new Map<string, number>()
 		for (const f of flows) {
 			sourceMap.set(f.source, (sourceMap.get(f.source) ?? 0) + f.value)
 			targetMap.set(f.target, (targetMap.get(f.target) ?? 0) + f.value)
@@ -72,7 +90,7 @@
 
 		// Position source nodes on left
 		let sourceY = 0
-		const sourceNodes = []
+		const sourceNodes: Node[] = []
 		for (const [name, value] of sourceMap) {
 			const h = (value / totalSource) * availHeight
 			sourceNodes.push({ name, y: sourceY, height: h })
@@ -81,7 +99,7 @@
 
 		// Position target nodes on right
 		let targetY = 0
-		const targetNodes = []
+		const targetNodes: Node[] = []
 		for (const [name, value] of targetMap) {
 			const h = (value / totalTarget) * availHeight
 			targetNodes.push({ name, y: targetY, height: h })

package/src/geoms/Violin.svelte

@@ -1,11 +1,20 @@
-<script>
+<script lang="ts">
 	import { getContext, onMount, onDestroy } from 'svelte'
+	import type { PlotState } from '../PlotState.svelte.js'
 	import { buildViolins } from '../lib/brewing/marks/violins.js'
 
-	let { x, y, fill, stat = 'boxplot', options = {} } = $props()
+	type Props = {
+		x?: string
+		y?: string
+		fill?: string
+		stat?: string
+		options?: { opacity?: number }
+	}
 
-	const plotState = getContext('plot-state')
-	let id = $state(null)
+	let { x, y, fill, stat = 'boxplot', options = {} }: Props = $props()
+
+	const plotState = getContext<PlotState>('plot-state')
+	let id = $state<string | null>(null)
 
 	// fill ?? x drives the colors map for both violin interior and outline
 	const fillChannel = $derived(fill ?? x)