@rokkit/chart 1.1.18 → 1.2.0

package/src/crossfilter/CrossFilter.svelte

@@ -1,21 +1,24 @@
-<script>
+<script lang="ts">
 	import { setContext, untrack } from 'svelte'
+	import type { Snippet } from 'svelte'
 	import { createCrossFilter } from './createCrossFilter.svelte.js'
 
-	/**
-	 * @type {{
-	 *   crossfilter?: ReturnType<typeof createCrossFilter>,
-	 *   mode?: 'dim' | 'hide',
-	 *   filters?: import('./createCrossFilter.svelte.js').FilterState,
-	 *   children?: import('svelte').Snippet
-	 * }}
-	 */
+	type CrossFilter = ReturnType<typeof createCrossFilter>
+	type FilterState = CrossFilter['filters']
+
+	type Props = {
+		crossfilter?: CrossFilter
+		mode?: 'dim' | 'hide'
+		filters?: FilterState
+		children?: Snippet
+	}
+
 	let {
 		crossfilter: externalCf = undefined,
 		mode = 'dim',
 		filters = $bindable(),
 		children
-	} = $props()
+	}: Props = $props()
 
 	// Use an externally provided instance (spec/helpers API) or create one internally.
 	// untrack() suppresses "captures initial value" warning — intentional: the cf

package/src/crossfilter/FilterBar.svelte

@@ -1,6 +1,17 @@
-<script>
+<script lang="ts">
 	import PlotChart from '../Plot.svelte'
 	import Bar from '../geoms/Bar.svelte'
+	import type { PlotSpec } from '../lib/plot/types.js'
+
+	type Props = {
+		data?: Record<string, unknown>[]
+		field?: string
+		valueField?: string
+		stat?: string
+		width?: number
+		height?: number
+		mode?: 'light' | 'dark'
+	}
 
 	let {
 		data = [],
@@ -10,9 +21,9 @@
 		width = 300,
 		height = 120,
 		mode = 'light'
-	} = $props()
+	}: Props = $props()
 
-	const spec = $derived({
+	const spec = $derived<PlotSpec>({
 		x: field,
 		y: valueField
 	})

package/src/crossfilter/FilterHistogram.svelte

@@ -1,15 +1,29 @@
-<script>
-	// @ts-nocheck
+<script lang="ts">
 	import { getContext } from 'svelte'
-	import { bin, extent, max } from 'd3-array'
+	import { bin, extent, max, type Bin } from 'd3-array'
 	import { scaleLinear } from 'd3-scale'
 	import { format } from 'd3-format'
+	import type { createCrossFilter } from './createCrossFilter.svelte.js'
+
+	type Row = Record<string, unknown>
+	type CrossFilter = ReturnType<typeof createCrossFilter>
 
 	/**
 	 * Interactive histogram with brush selection for crossfilter range dimensions.
 	 * Renders bins as bars; mouse drag selects a range and calls cf.setRange().
 	 * Click without dragging clears the filter.
 	 */
+	type Props = {
+		data?: Row[]
+		field?: string
+		label?: string
+		bins?: number
+		width?: number
+		height?: number
+		color?: string
+		dimColor?: string
+	}
+
 	let {
 		data = [],
 		field = '',
@@ -19,9 +33,9 @@
 		height = 120,
 		color = 'rgb(var(--color-primary, 249 115 22))',
 		dimColor = 'rgb(var(--color-surface-z3, 203 213 225))'
-	} = $props()
+	}: Props = $props()
 
-	const cf = getContext('crossfilter')
+	const cf = getContext<CrossFilter | undefined>('crossfilter')
 
 	const margin = { top: 8, right: 10, bottom: 22, left: 32 }
 
@@ -30,12 +44,16 @@
 
 	// Compute histogram bins from data
 	const binner = $derived(
-		bin()
-			.value((d) => d[field])
+		bin<Row, number>()
+			.value((d) => Number(d[field]))
 			.thresholds(binCount)
 	)
-	const binned = $derived(data.length > 0 ? binner(data) : [])
-	const domainExtent = $derived(data.length > 0 ? extent(data, (d) => d[field]) : [0, 1])
+	const binned = $derived<Bin<Row, number>[]>(data.length > 0 ? binner(data) : [])
+	const domainExtent = $derived.by<[number, number]>(() => {
+		if (data.length === 0) return [0, 1]
+		const [lo, hi] = extent(data, (d) => Number(d[field]))
+		return [lo ?? 0, hi ?? 1]
+	})
 
 	// Scales
 	const xScale = $derived(
@@ -53,12 +71,17 @@
 			: scaleLinear().domain([0, 1]).range([innerHeight, 0])
 	)
 
-	// Active range from crossfilter
-	const activeRange = $derived(cf?.filters?.get(field))
+	// Active range from crossfilter — the histogram only operates on continuous
+	// [min, max] dimensions, so ignore categorical Set filters.
+	const activeRange = $derived.by<[number, number] | null>(() => {
+		const f = cf?.filters?.get(field)
+		if (Array.isArray(f) && f.length === 2) return [f[0], f[1]]
+		return null
+	})
 
 	// Brush state
-	let brushStartPx = $state(null)
-	let brushEndPx = $state(null)
+	let brushStartPx = $state<number | null>(null)
+	let brushEndPx = $state<number | null>(null)
 	let brushing = $state(false)
 
 	// Brush rect in pixel space
@@ -77,32 +100,34 @@
 		return { x: lo, width: Math.max(1, hi - lo) }
 	})
 
-	function pixelToValue(px) {
+	function pixelToValue(px: number) {
 		return xScale.invert(Math.max(0, Math.min(innerWidth, px)))
 	}
 
-	function getLocalX(e) {
+	function getLocalX(e: MouseEvent & { currentTarget: Element }) {
 		const svgEl = e.currentTarget.closest('svg')
+		if (!svgEl) return 0
 		const rect = svgEl.getBoundingClientRect()
 		return e.clientX - rect.left - margin.left
 	}
 
-	function onMouseDown(e) {
+	function onMouseDown(e: MouseEvent & { currentTarget: Element }) {
 		brushStartPx = getLocalX(e)
 		brushEndPx = brushStartPx
 		brushing = true
 	}
 
-	function onMouseMove(e) {
+	function onMouseMove(e: MouseEvent & { currentTarget: Element }) {
 		if (!brushing) return
 		brushEndPx = getLocalX(e)
 	}
 
 	function onMouseUp() {
-		if (!brushing) return
+		if (!brushing || brushStartPx === null) return
 		brushing = false
-		const lo = Math.min(brushStartPx, brushEndPx)
-		const hi = Math.max(brushStartPx, brushEndPx)
+		const end = brushEndPx ?? brushStartPx
+		const lo = Math.min(brushStartPx, end)
+		const hi = Math.max(brushStartPx, end)
 		if (hi - lo < 3) {
 			// Treat as click — clear filter
 			cf?.clearFilter(field)
@@ -118,10 +143,10 @@
 	}
 
 	// Check if a bin is within active range
-	function binInRange(b) {
+	function binInRange(b: Bin<Row, number>) {
 		if (!activeRange) return true
 		const [lo, hi] = activeRange
-		return b.x1 > lo && b.x0 < hi
+		return (b.x1 ?? 0) > lo && (b.x0 ?? 0) < hi
 	}
 
 	// Y-axis tick values (2-3 ticks)
@@ -195,8 +220,8 @@
 
 			<!-- Bars -->
 			{#each binned as b (b.x0)}
-				{@const bx = xScale(b.x0) + 1}
-				{@const bw = Math.max(0, xScale(b.x1) - xScale(b.x0) - 1)}
+				{@const bx = xScale(b.x0 ?? 0) + 1}
+				{@const bw = Math.max(0, xScale(b.x1 ?? 0) - xScale(b.x0 ?? 0) - 1)}
 				{@const by = yScale(b.length)}
 				{@const bh = innerHeight - by}
 				<rect

package/src/crossfilter/FilterSlider.svelte

@@ -1,14 +1,25 @@
-<script>
+<script lang="ts">
 	import { getContext } from 'svelte'
+	import type { createCrossFilter } from './createCrossFilter.svelte.js'
+
+	type CrossFilter = ReturnType<typeof createCrossFilter>
 
 	/**
 	 * Dual range slider for a continuous crossfilter dimension.
 	 * NOTE: Interim implementation using HTML range inputs.
 	 * The spec calls for a Plot+Point+brush architecture, deferred until brush geom is implemented.
 	 */
-	let { field, min, max, step = 0.1, label = '' } = $props()
+	type Props = {
+		field: string
+		min?: number
+		max?: number
+		step?: number
+		label?: string
+	}
+
+	let { field, min, max, step = 0.1, label = '' }: Props = $props()
 
-	const cf = getContext('crossfilter')
+	const cf = getContext<CrossFilter | undefined>('crossfilter')
 
 	// Initialize from props; $effect keeps in sync when min/max change
 	let low = $state(0)
@@ -19,12 +30,12 @@
 		high = max ?? 100
 	})
 
-	function handleLow(e) {
+	function handleLow(e: Event & { currentTarget: HTMLInputElement }) {
 		low = Math.min(Number(e.currentTarget.value), high)
 		cf?.setRange(field, [low, high])
 	}
 
-	function handleHigh(e) {
+	function handleHigh(e: Event & { currentTarget: HTMLInputElement }) {
 		high = Math.max(Number(e.currentTarget.value), low)
 		cf?.setRange(field, [low, high])
 	}

package/src/elements/Bar.svelte

@@ -1,8 +1,22 @@
-<script>
+<script lang="ts">
+	import type { Readable } from 'svelte/store'
 	import { format } from 'd3-format'
 	import { get } from 'svelte/store'
 	import Label from './Label.svelte'
 
+	type Scales = { x: (value: number) => number }
+
+	type Props = {
+		rank: number
+		value: number
+		name: string
+		formatString?: string
+		scales: Readable<Scales>
+		height?: number
+		fill?: string
+		spaceBetween?: number
+	}
+
 	let {
 		rank,
 		value,
@@ -12,7 +26,7 @@
 		height = 60,
 		fill,
 		spaceBetween = 5
-	} = $props()
+	}: Props = $props()
 
 	const textHeight = 16
 	const charWidth = 12

package/src/elements/ColorRamp.svelte

@@ -1,15 +1,39 @@
-<script>
+<script lang="ts">
 	import { scaleLinear } from 'd3-scale'
 	import { id as uniqueId } from '@rokkit/core'
 
-	let { x = 0, y = 0, textSize = 5, height = 10, width = 100, tickCount = 5, scale } = $props()
+	type ColorScale = {
+		(value: number): string
+		domain(): number[]
+		ticks(count?: number): number[]
+	}
+
+	type Props = {
+		x?: number
+		y?: number
+		textSize?: number
+		height?: number
+		width?: number
+		tickCount?: number
+		scale: ColorScale
+	}
+
+	let {
+		x = 0,
+		y = 0,
+		textSize = 5,
+		height = 10,
+		width = 100,
+		tickCount = 5,
+		scale
+	}: Props = $props()
 
 	let scaleTicks = $derived(
-		scaleLinear()
+		scaleLinear<number>()
 			.range([x, x + width])
 			.domain(scale.domain())
 	)
-	let scalePercent = $derived(scaleLinear().range([0, 100]).domain(scale.domain()))
+	let scalePercent = $derived(scaleLinear<number>().range([0, 100]).domain(scale.domain()))
 	let ticks = $derived(
 		scale.ticks.apply(scale, [tickCount]).map((d) => ({ x: scaleTicks(d), value: d }))
 	)

package/src/elements/ContinuousLegend.svelte

@@ -1,6 +1,23 @@
-<script>
+<script lang="ts">
 	import { scaleLinear } from 'd3-scale'
 
+	type ColorScale = {
+		(value: number): string
+		domain(): number[]
+		ticks?(count?: number): number[]
+	}
+
+	type Props = {
+		x?: number
+		y?: number
+		textSize?: number
+		height?: number
+		width?: number
+		tickCount?: number
+		scale: ColorScale
+		id?: string
+	}
+
 	let {
 		x = 0,
 		y = 0,
@@ -10,10 +27,10 @@
 		tickCount = 5,
 		scale,
 		id = 'legend'
-	} = $props()
+	}: Props = $props()
 
 	let scaleTicks = $derived(
-		scaleLinear()
+		scaleLinear<number>()
 			.range([x, x + width])
 			.domain(scale.domain())
 	)

package/src/elements/DefinePatterns.svelte

@@ -1,12 +1,28 @@
-<script>
+<script lang="ts">
+	import type { Component } from 'svelte'
+	import type { SVGAttributes } from 'svelte/elements'
 	import { uniq } from 'ramda'
 
-	let {
-		size = 10,
-		patternUnits = 'userSpaceOnUse',
-		/** @type {Array<import('./types').Pattern>} */
-		patterns = []
-	} = $props()
+	type PatternComponentProps = {
+		size?: number
+		fill?: string
+		stroke?: string
+	}
+
+	type Pattern = {
+		id: string
+		component: Component<PatternComponentProps>
+		fill?: string
+		stroke?: string
+	}
+
+	type Props = {
+		size?: number
+		patternUnits?: SVGAttributes<SVGPatternElement>['patternUnits']
+		patterns?: Pattern[]
+	}
+
+	let { size = 10, patternUnits = 'userSpaceOnUse', patterns = [] }: Props = $props()
 
 	let names = $derived(uniq(patterns.map(({ id }) => id)))
 </script>

package/src/elements/DiscreteLegend.svelte

@@ -1,4 +1,20 @@
-<script>
+<script lang="ts">
+	type ColorScale = {
+		(value: number): string
+		ticks(count?: number): number[]
+	}
+
+	type Props = {
+		x?: number
+		y?: number
+		textSize?: number
+		size?: number
+		space?: number
+		padding?: number
+		scale: ColorScale
+		tickCount?: number
+	}
+
 	let {
 		x = 0,
 		y = 0,
@@ -8,7 +24,7 @@
 		padding = 5,
 		scale,
 		tickCount = 10
-	} = $props()
+	}: Props = $props()
 
 	let sizeWithSpace = $derived(size + space)
 	let ticks = $derived(scale.ticks.apply(scale, [tickCount]))

package/src/elements/Label.svelte

@@ -1,5 +1,14 @@
-<script>
-	let { x, y, text, angle = 0, small = false, anchor = 'middle' } = $props()
+<script lang="ts">
+	type Props = {
+		x: number
+		y: number
+		text: string
+		angle?: number
+		small?: boolean
+		anchor?: string
+	}
+
+	let { x, y, text, angle = 0, small = false, anchor = 'middle' }: Props = $props()
 
 	let transform = $derived(`translate(${x},${y}) rotate(${angle})`)
 	let validAnchor = $derived(['start', 'middle', 'end'].includes(anchor) ? anchor : 'middle')

package/src/elements/SymbolGrid.svelte

@@ -1,11 +1,20 @@
-<script>
+<script lang="ts">
 	import { swatch } from '../lib/swatch'
 	import { swatchGrid } from '../lib/grid'
 	import Symbol from '../Symbol.svelte'
 
-	let { base = 'teal', size = 4, shade = 600 } = $props()
+	type Props = {
+		base?: string
+		size?: number
+		shade?: number
+	}
+
+	let { base = 'teal', size = 4, shade = 600 }: Props = $props()
 
 	let grid = $derived(swatchGrid(swatch.keys.symbol.length, size, 10))
+
+	const palette: Record<string, Record<string, string>> = swatch.palette
+	let color = $derived(palette[base]?.[shade])
 </script>
 
 <svg viewBox="0 0 {grid.width} {grid.height}">
@@ -15,8 +24,8 @@
 			{y}
 			size={r * 2}
 			name={swatch.keys.symbol[index]}
-			fill={swatch.palette[base][shade]}
-			stroke={swatch.palette[base][shade]}
+			fill={color}
+			stroke={color}
 		/>
 	{/each}
 </svg>

package/src/examples/BarChartExample.svelte

@@ -1,7 +1,9 @@
-<script>
+<script lang="ts">
 	import { Plot } from '../index.js'
 	import { dataset } from '@rokkit/data'
 
+	type Row = Record<string, unknown>
+
 	// Sample data
 	const sampleData = [
 		{ model: 'Model A', name: 'Product 1', category: 'Electronics', count: 45 },
@@ -14,33 +16,28 @@
 	]
 
 	// Use the dataset class to process the data
-	const data = dataset(sampleData)
+	const data: Row[] = dataset(sampleData)
 		.groupBy('category')
-		.summarize('name', { count: (values) => values.length })
+		.summarize('name', { count: (values: unknown[]) => values.length })
 		.rollup()
+		.select()
 
 	// Chart dimensions
 	const width = 600
 	const height = 400
 	const margin = { top: 20, right: 100, bottom: 60, left: 60 }
-
-	// Click handler for bars
-	function handleBarClick(item) {
-		console.log('Bar clicked:', item)
-		alert(`Clicked on ${item.category} with count ${item.count}`)
-	}
 </script>
 
 <div class="example">
 	<h2>Bar Chart Example</h2>
 
 	<div class="chart-wrapper">
-		<Plot.Root {data} {width} {height} {margin} fill="category">
-			<Plot.Grid direction="y" lineStyle="dashed" />
-			<Plot.Axis type="x" field="category" label="Product Category" />
-			<Plot.Axis type="y" field="count" label="Number of Products" />
-			<Plot.Bar x="category" y="count" fill="category" onClick={handleBarClick} />
-			<Plot.Legend title="Categories" />
+		<Plot.Root {data} x="category" y="count" color="category" {width} {height} {margin}>
+			<Plot.Grid />
+			<Plot.Axis type="x" label="Product Category" />
+			<Plot.Axis type="y" label="Number of Products" />
+			<Plot.Bar {data} x="category" y="count" fill="category" />
+			<Plot.Legend labels={{ category: 'Categories' }} />
 		</Plot.Root>
 	</div>
 

package/src/geoms/Arc.svelte

@@ -1,12 +1,25 @@
-<script>
+<script lang="ts">
 	import { getContext, onMount, onDestroy } from 'svelte'
+	import type { PlotState } from '../PlotState.svelte.js'
 	import { buildArcs } from '../lib/brewing/marks/arcs.js'
 
+	type Row = Record<string, unknown>
+
 	/**
 	 * `fill` is the primary prop name; `color` is accepted as an alias for
 	 * spec-driven usage (Plot.svelte passes `color` to all geoms generically).
-	 * @type {{ theta?: string, fill?: string, color?: string, pattern?: string, stat?: string, labelFn?: (data: Record<string, unknown>) => string, options?: { innerRadius?: number } }}
 	 */
+	type Props = {
+		theta?: string
+		fill?: string
+		color?: string
+		pattern?: string
+		stat?: string
+		labelFn?: (data: Row) => string
+		options?: { innerRadius?: number }
+		onselect?: (data: Row) => void
+	}
+
 	let {
 		theta,
 		fill,
@@ -16,12 +29,12 @@
 		stat = 'identity',
 		options = {},
 		onselect = undefined
-	} = $props()
+	}: Props = $props()
 
 	const fillField = $derived(fill ?? 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({

package/src/geoms/Area.svelte

@@ -1,11 +1,27 @@
-<script>
+<script lang="ts">
 	import { getContext, onMount, onDestroy } from 'svelte'
+	import type { PlotState } from '../PlotState.svelte.js'
 	import { buildAreas, buildStackedAreas } from './lib/areas.js'
 
-	let { x, y, color, pattern, stat = 'identity', options = {} } = $props()
+	type Options = {
+		stack?: boolean
+		curve?: 'linear' | 'smooth' | 'step'
+		opacity?: number
+	}
 
-	const plotState = getContext('plot-state')
-	let id = $state(null)
+	type Props = {
+		x?: string
+		y?: string
+		color?: string
+		pattern?: string
+		stat?: string
+		options?: Options
+	}
+
+	let { x, y, color, pattern, stat = 'identity', options = {} }: Props = $props()
+
+	const plotState = getContext<PlotState>('plot-state')
+	let id = $state<string | null>(null)
 
 	onMount(() => {
 		id = plotState.registerGeom({
@@ -35,7 +51,7 @@
 	const patterns = $derived(plotState.patterns)
 
 	const areas = $derived.by(() => {
-		if (!data?.length || !xScale || !yScale) return []
+		if (!data?.length || !xScale || !yScale || !x || !y) return []
 		const channels = { x, y, color, pattern }
 		if (options.stack) {
 			return buildStackedAreas(data, channels, xScale, yScale, colors, options.curve, patterns)
@@ -59,20 +75,22 @@
 			{/if}
 		{/each}
 		<!-- Invisible hit circles for tooltip: one per data point -->
-		{#each data as d, i (`hover::${i}`)}
-			{@const px = typeof xScale?.bandwidth === 'function' ? (xScale(d[x]) ?? 0) + xScale.bandwidth() / 2 : (xScale?.(d[x]) ?? 0)}
-			{@const py = yScale?.(d[y]) ?? 0}
-			<circle
-				cx={px}
-				cy={py}
-				r="8"
-				fill="transparent"
-				stroke="none"
-				role="presentation"
-				data-plot-element="area-hover"
-				onmouseenter={() => plotState.setHovered(d)}
-				onmouseleave={() => plotState.clearHovered()}
-			/>
-		{/each}
+		{#if x && y}
+			{#each data as d, i (`hover::${i}`)}
+				{@const px = typeof xScale?.bandwidth === 'function' ? (xScale(d[x]) ?? 0) + xScale.bandwidth() / 2 : (xScale?.(d[x]) ?? 0)}
+				{@const py = yScale?.(d[y]) ?? 0}
+				<circle
+					cx={px}
+					cy={py}
+					r="8"
+					fill="transparent"
+					stroke="none"
+					role="presentation"
+					data-plot-element="area-hover"
+					onmouseenter={() => plotState.setHovered(d)}
+					onmouseleave={() => plotState.clearHovered()}
+				/>
+			{/each}
+		{/if}
 	</g>
 {/if}