@rokkit/chart 1.1.17 → 1.1.19

package/src/Plot/Timeline.svelte

@@ -1,16 +1,15 @@
-<script>
-	/**
-	 * @type {{
-	 *   frameKeys: unknown[],
-	 *   currentIndex: number,
-	 *   playing: boolean,
-	 *   speed: number,
-	 *   onplay: () => void,
-	 *   onpause: () => void,
-	 *   onscrub: (index: number) => void,
-	 *   onspeed: (speed: number) => void
-	 * }}
-	 */
+<script lang="ts">
+	type Props = {
+		frameKeys?: unknown[]
+		currentIndex?: number
+		playing?: boolean
+		speed?: number
+		onplay?: () => void
+		onpause?: () => void
+		onscrub?: (index: number) => void
+		onspeed?: (speed: number) => void
+	}
+
 	let {
 		frameKeys = [],
 		currentIndex = 0,
@@ -20,7 +19,7 @@
 		onpause,
 		onscrub,
 		onspeed
-	} = $props()
+	}: Props = $props()
 
 	const safeIndex = $derived(
 		frameKeys.length === 0 ? 0 : Math.min(currentIndex, frameKeys.length - 1)

package/src/Plot/Tooltip.svelte

@@ -1,16 +1,22 @@
-<script>
+<script lang="ts">
 	import { getContext } from 'svelte'
+	import type { PlotState } from '../PlotState.svelte.js'
 
-	/** @type {{ tooltip?: boolean | ((data: Record<string, unknown>) => string) }} */
-	let { tooltip = true } = $props()
+	type Row = Record<string, unknown>
 
-	const plotState = getContext('plot-state')
+	type Props = {
+		tooltip?: boolean | ((data: Row) => string)
+	}
+
+	let { tooltip = true }: Props = $props()
+
+	const plotState = getContext<PlotState>('plot-state')
 
 	let mouseX = $state(0)
 	let mouseY = $state(0)
 
 	$effect(() => {
-		function onMove(e) {
+		function onMove(e: MouseEvent) {
 			mouseX = e.clientX
 			mouseY = e.clientY
 		}
@@ -21,7 +27,7 @@
 	const hovered = $derived(plotState.hovered)
 	const mode = $derived(plotState.mode)
 
-	function formatDefault(data) {
+	function formatDefault(data: Row) {
 		return Object.entries(data)
 			.filter(([, v]) => v !== undefined && v !== null)
 			.map(

package/src/Plot.svelte

@@ -1,9 +1,9 @@
-<script>
+<script lang="ts">
 	import { setContext, getContext, untrack } from 'svelte'
-	import { zoom as d3Zoom } from 'd3-zoom'
-	import { select } from 'd3-selection'
+	import type { Snippet } from 'svelte'
 	import { PlotState } from './PlotState.svelte.js'
 	import { defaultPreset } from './lib/preset.js'
+	import type { PlotSpec, PlotHelpers } from './lib/plot/types.js'
 	import Axis from './Plot/Axis.svelte'
 	import Grid from './Plot/Grid.svelte'
 	import Legend from './Plot/Legend.svelte'
@@ -22,25 +22,33 @@
 	import Hexbin from './geoms/Hexbin.svelte'
 	import Ribbon from './geoms/Ribbon.svelte'
 
-	/**
-	 * @type {{
-	 *   data?: Object[],
-	 *   spec?: import('./lib/plot/types.js').PlotSpec,
-	 *   helpers?: import('./lib/plot/types.js').PlotHelpers,
-	 *   width?: number,
-	 *   height?: number,
-	 *   mode?: 'light' | 'dark',
-	 *   grid?: boolean,
-	 *   axes?: boolean,
-	 *   margin?: { top: number, right: number, bottom: number, left: number },
-	 *   legend?: boolean,
-	 *   title?: string,
-	 *   summary?: string,
-	 *   tooltip?: boolean | ((data: Record<string, unknown>) => string),
-	 *   zoom?: boolean,
-	 *   children?: import('svelte').Snippet,
-	 * }}
-	 */
+	type Row = Record<string, unknown>
+	type Margin = { top: number; right: number; bottom: number; left: number }
+	type ChartPresetCtx = { current: typeof defaultPreset }
+
+	type Props = {
+		data?: Row[]
+		spec?: PlotSpec
+		helpers?: PlotHelpers
+		width?: number
+		height?: number
+		mode?: 'light' | 'dark'
+		grid?: boolean
+		axes?: boolean
+		margin?: Margin
+		legend?: boolean
+		title?: string
+		summary?: string
+		tooltip?: boolean | ((data: Row) => string)
+		zoom?: boolean
+		xFormat?: (v: unknown) => string
+		yFormat?: (v: unknown) => string
+		xTicks?: number
+		yTicks?: number
+		minorTicks?: boolean
+		children?: Snippet
+	}
+
 	let {
 		data = [],
 		spec = undefined,
@@ -62,14 +70,14 @@
 		yTicks = undefined,
 		minorTicks = false,
 		children
-	} = $props()
+	}: Props = $props()
 
-	const chartPresetCtx = getContext('chart-preset')
+	const chartPresetCtx = getContext<ChartPresetCtx | undefined>('chart-preset')
 	const chartPreset = $derived(chartPresetCtx?.current ?? defaultPreset)
 
 	// Responsive width: observe container and use actual pixel width for scale calculations
-	let svgEl = $state(null)
-	let containerEl = $state(null)
+	let svgEl = $state<SVGSVGElement | null>(null)
+	let containerEl = $state<HTMLDivElement | null>(null)
 	let observedWidth = $state(0)
 
 	$effect(() => {
@@ -92,7 +100,9 @@
 	// Accessible data table — screen reader fallback
 	const tableData = $derived(spec?.data ?? data)
 	const tableColumns = $derived.by(() => {
-		const cols = [spec?.x, spec?.y, spec?.color ?? spec?.fill].filter(Boolean)
+		const cols = [spec?.x, spec?.y, spec?.color ?? spec?.fill].filter(
+			(c): c is string => Boolean(c)
+		)
 		if (cols.length > 0) return cols
 		const first = tableData[0]
 		return first ? Object.keys(first) : []
@@ -132,15 +142,26 @@
 
 	$effect(() => {
 		if (!zoom || !svgEl) return
-		const zoomBehavior = d3Zoom()
-			.scaleExtent([1, 8])
-			.on('zoom', (event) => {
-				plotState.applyZoom(event.transform)
-			})
-		const sel = select(svgEl)
-		sel.call(zoomBehavior)
+		// d3-zoom/d3-selection are client-only; load them dynamically so they are
+		// not bundled into (and tree-shaken-as-unused from) the SSR/main bundle.
+		let cancelled = false
+		let detach: (() => void) | undefined
+		Promise.all([import('d3-zoom'), import('d3-selection')]).then(
+			([{ zoom: d3Zoom }, { select }]) => {
+				if (cancelled || !svgEl) return
+				const zoomBehavior = d3Zoom<SVGSVGElement, unknown>()
+					.scaleExtent([1, 8])
+					.on('zoom', (event) => {
+						plotState.applyZoom(event.transform)
+					})
+				const sel = select(svgEl)
+				sel.call(zoomBehavior)
+				detach = () => sel.on('.zoom', null)
+			}
+		)
 		return () => {
-			sel.on('.zoom', null)
+			cancelled = true
+			detach?.()
 			plotState.resetZoom()
 		}
 	})
@@ -164,11 +185,8 @@
 		ribbon: Ribbon
 	}
 
-	/**
-	 * @param {string} type
-	 */
-	function resolveGeomComponent(type) {
-		return helpers?.geoms?.[type] ?? GEOM_COMPONENTS[type]
+	function resolveGeomComponent(type: string) {
+		return helpers?.geoms?.[type] ?? GEOM_COMPONENTS[type as keyof typeof GEOM_COMPONENTS]
 	}
 </script>
 

package/src/PlotState.svelte.js

@@ -191,8 +191,12 @@ export class PlotState {
 	// use it instead of deriving distinct values from the local panel data.
 	colors = $derived.by(() => {
 		const field = this.#effectiveChannels.color
-		// eslint-disable-next-line svelte/prefer-svelte-reactivity
-		if (isLiteralColor(field)) return new Map([[null, { fill: field, stroke: field }]])
+		if (isLiteralColor(field)) {
+			/** @type {Map<unknown, { fill: string, stroke: string }>} */
+			// eslint-disable-next-line svelte/prefer-svelte-reactivity
+			const literal = new Map([[null, { fill: field, stroke: field }]])
+			return literal
+		}
 		const values = this.#colorDomain ?? distinct(this.#data, field)
 		// No color channel but data exists → use first preset color for single-series rendering.
 		// This prevents geoms from falling back to gray (#888) on charts with no fill channel.

package/src/Sparkline.svelte

@@ -1,12 +1,22 @@
-<script>
+<script lang="ts">
 	import { scaleLinear } from 'd3-scale'
 	import { line as d3line, area as d3area, curveCatmullRom } from 'd3-shape'
 	import PatternDef from './patterns/PatternDef.svelte'
 	import { PATTERNS } from './patterns/patterns.js'
 
-	/**
-	 * @type {number[] | object[]}
-	 */
+	type Props = {
+		data?: number[] | Record<string, unknown>[]
+		field?: string
+		type?: 'line' | 'area' | 'bar'
+		curve?: 'linear' | 'smooth'
+		color?: string
+		pattern?: keyof typeof PATTERNS
+		width?: number
+		height?: number
+		min?: number
+		max?: number
+	}
+
 	let {
 		data = [],
 		field = undefined,
@@ -18,9 +28,13 @@
 		height = 24,
 		min = undefined,
 		max = undefined
-	} = $props()
+	}: Props = $props()
 
-	const values = $derived(field ? data.map((d) => Number(d[field])) : data.map(Number))
+	const values = $derived(
+		data.map((d) =>
+			field && typeof d === 'object' && d !== null ? Number(d[field]) : Number(d)
+		)
+	)
 
 	const yMin = $derived(min ?? Math.min(...values))
 	const yMax = $derived(max ?? Math.max(...values))
@@ -33,7 +47,7 @@
 	const yScale = $derived(scaleLinear().domain([yMin, yMax]).range([height, 0]))
 
 	const linePath = $derived.by(() => {
-		const gen = d3line()
+		const gen = d3line<number>()
 			.x((_, i) => xScale(i))
 			.y((v) => yScale(v))
 		if (curve === 'smooth') gen.curve(curveCatmullRom)
@@ -41,7 +55,7 @@
 	})
 
 	const areaPath = $derived.by(() => {
-		const gen = d3area()
+		const gen = d3area<number>()
 			.x((_, i) => xScale(i))
 			.y0(height)
 			.y1((v) => yScale(v))

package/src/Symbol.svelte

@@ -1,6 +1,16 @@
-<script>
+<script lang="ts">
+	import type { SVGAttributes } from 'svelte/elements'
 	import { components } from './symbols'
 
+	type Props = {
+		x?: number
+		y?: number
+		size?: number
+		fill?: string
+		stroke?: string
+		name?: string
+	} & Omit<SVGAttributes<SVGElement>, 'x' | 'y' | 'fill' | 'stroke'>
+
 	let {
 		x = 0,
 		y = 0,
@@ -9,13 +19,13 @@
 		stroke = 'currentColor',
 		name = 'circle',
 		...restProps
-	} = $props()
+	}: Props = $props()
 
-	let RenderShape = $derived(components[name] ?? components.default)
-	let props = $derived({ ...restProps, x, y, size, fill, stroke })
+	const shapes: Record<string, (typeof components)[keyof typeof components]> = components
+	let RenderShape = $derived(shapes[name] ?? components.default)
 </script>
 
 <!-- {#snippet defaultSymbol(props)}
 	<circle cx={x} cy={y} r={size / 2} {fill} {stroke} />
 {/snippet} -->
-<RenderShape {...props} />
+<RenderShape {...restProps} {x} {y} {size} {fill} {stroke} />

package/src/Texture.svelte

@@ -1,4 +1,14 @@
-<script>
+<script lang="ts">
+	type Props = {
+		id?: string
+		path?: string
+		fill?: string
+		stroke?: string
+		thickness?: number
+		patternUnits?: 'userSpaceOnUse' | 'objectBoundingBox'
+		size?: number
+	}
+
 	let {
 		id,
 		path,
@@ -7,7 +17,7 @@
 		thickness = 0.5,
 		patternUnits = 'userSpaceOnUse',
 		size = 10
-	} = $props()
+	}: Props = $props()
 </script>
 
 <pattern {id} {patternUnits} width={size} height={size}>

package/src/charts/AreaChart.svelte

@@ -1,8 +1,31 @@
-<script>
+<script lang="ts">
 	import Plot from '../Plot.svelte'
 	import Area from '../geoms/Area.svelte'
 
-	/** @type {import('../lib/plot/chartProps.js').LineAreaChartProps} */
+	type Row = Record<string, unknown>
+	type Format = (v: unknown) => string
+
+	type Props = {
+		data?: Row[]
+		x?: string
+		y?: string
+		fill?: string
+		stat?: string
+		curve?: 'linear' | 'smooth' | 'step'
+		pattern?: string
+		stack?: boolean
+		width?: number
+		height?: number
+		mode?: 'light' | 'dark'
+		grid?: boolean
+		legend?: boolean
+		xFormat?: Format
+		yFormat?: Format
+		xTicks?: number
+		yTicks?: number
+		minorTicks?: boolean
+	}
+
 	let {
 		data = [],
 		x = undefined,
@@ -22,7 +45,7 @@
 		xTicks = undefined,
 		yTicks = undefined,
 		minorTicks = false
-	} = $props()
+	}: Props = $props()
 </script>
 
 <Plot {data} {width} {height} {mode} {grid} {legend} {xFormat} {yFormat} {xTicks} {yTicks} {minorTicks}>

package/src/charts/BarChart.svelte

@@ -1,8 +1,32 @@
-<script>
+<script lang="ts">
 	import Plot from '../Plot.svelte'
 	import Bar from '../geoms/Bar.svelte'
 
-	/** @type {import('../lib/plot/chartProps.js').BarChartProps} */
+	type Row = Record<string, unknown>
+	type Format = (v: unknown) => string
+
+	type Props = {
+		data?: Row[]
+		x?: string
+		y?: string
+		fill?: string
+		pattern?: string
+		width?: number
+		height?: number
+		mode?: 'light' | 'dark'
+		grid?: boolean
+		legend?: boolean
+		stat?: string
+		stack?: boolean
+		label?: boolean | string | ((data: Row) => unknown)
+		tooltip?: boolean | ((data: Row) => string)
+		xFormat?: Format
+		yFormat?: Format
+		xTicks?: number
+		yTicks?: number
+		minorTicks?: boolean
+	}
+
 	let {
 		data = [],
 		x = undefined,
@@ -23,7 +47,7 @@
 		xTicks = undefined,
 		yTicks = undefined,
 		minorTicks = false
-	} = $props()
+	}: Props = $props()
 </script>
 
 <Plot {data} {width} {height} {mode} {grid} {legend} {tooltip} {xFormat} {yFormat} {xTicks} {yTicks} {minorTicks}>

package/src/charts/BoxPlot.svelte

@@ -1,8 +1,24 @@
-<script>
+<script lang="ts">
 	import Plot from '../Plot.svelte'
 	import Box from '../geoms/Box.svelte'
 
-	/** @type {import('../lib/plot/chartProps.js').BoxViolinChartProps} */
+	type Row = Record<string, unknown>
+
+	type Props = {
+		data?: Row[]
+		x?: string
+		y?: string
+		fill?: string
+		width?: number
+		height?: number
+		mode?: 'light' | 'dark'
+		grid?: boolean
+		legend?: boolean
+		yFormat?: (v: unknown) => string
+		yTicks?: number
+		minorTicks?: boolean
+	}
+
 	let {
 		data = [],
 		x = undefined,
@@ -16,7 +32,7 @@
 		yFormat = undefined,
 		yTicks = undefined,
 		minorTicks = false
-	} = $props()
+	}: Props = $props()
 </script>
 
 <Plot {data} {width} {height} {mode} {grid} {legend} {yFormat} {yTicks} {minorTicks}>

package/src/charts/BubbleChart.svelte

@@ -1,8 +1,29 @@
-<script>
+<script lang="ts">
 	import Plot from '../Plot.svelte'
 	import Point from '../geoms/Point.svelte'
 
-	/** @type {import('../lib/plot/chartProps.js').ScatterBubbleChartProps} */
+	type Row = Record<string, unknown>
+	type Format = (v: unknown) => string
+
+	type Props = {
+		data?: Row[]
+		x?: string
+		y?: string
+		color?: string
+		symbol?: string
+		size?: string
+		width?: number
+		height?: number
+		mode?: 'light' | 'dark'
+		grid?: boolean
+		legend?: boolean
+		xFormat?: Format
+		yFormat?: Format
+		xTicks?: number
+		yTicks?: number
+		minorTicks?: boolean
+	}
+
 	let {
 		data = [],
 		x = undefined,
@@ -20,7 +41,7 @@
 		xTicks = undefined,
 		yTicks = undefined,
 		minorTicks = false
-	} = $props()
+	}: Props = $props()
 </script>
 
 <Plot {data} {width} {height} {mode} {grid} {legend} {xFormat} {yFormat} {xTicks} {yTicks} {minorTicks}>

package/src/charts/LineChart.svelte

@@ -1,8 +1,32 @@
-<script>
+<script lang="ts">
 	import Plot from '../Plot.svelte'
 	import Line from '../geoms/Line.svelte'
 
-	/** @type {import('../lib/plot/chartProps.js').LineAreaChartProps} */
+	type Row = Record<string, unknown>
+	type Format = (v: unknown) => string
+
+	type Props = {
+		data?: Row[]
+		x?: string
+		y?: string
+		color?: string
+		stat?: string
+		symbol?: string
+		curve?: 'linear' | 'smooth' | 'step'
+		label?: boolean | string | ((data: Row) => unknown)
+		tooltip?: boolean | ((data: Row) => string)
+		width?: number
+		height?: number
+		mode?: 'light' | 'dark'
+		grid?: boolean
+		legend?: boolean
+		xFormat?: Format
+		yFormat?: Format
+		xTicks?: number
+		yTicks?: number
+		minorTicks?: boolean
+	}
+
 	let {
 		data = [],
 		x = undefined,
@@ -23,7 +47,7 @@
 		xTicks = undefined,
 		yTicks = undefined,
 		minorTicks = false
-	} = $props()
+	}: Props = $props()
 </script>
 
 <Plot {data} {width} {height} {mode} {grid} {legend} {tooltip} {xFormat} {yFormat} {xTicks} {yTicks} {minorTicks}>

package/src/charts/PieChart.svelte

@@ -1,8 +1,25 @@
-<script>
+<script lang="ts">
 	import Plot from '../Plot.svelte'
 	import Arc from '../geoms/Arc.svelte'
 
-	/** @type {import('../lib/plot/chartProps.js').PieChartProps} */
+	type Row = Record<string, unknown>
+
+	type Props = {
+		data?: Row[]
+		label?: string
+		y?: string
+		fill?: string
+		pattern?: string
+		innerRadius?: number
+		labelFn?: (data: Row) => string
+		tooltip?: boolean | ((data: Row) => string)
+		width?: number
+		height?: number
+		mode?: 'light' | 'dark'
+		legend?: boolean
+		stat?: string
+	}
+
 	let {
 		data = [],
 		label = undefined,
@@ -17,7 +34,7 @@
 		mode = 'light',
 		legend = false,
 		stat = 'sum'
-	} = $props()
+	}: Props = $props()
 </script>
 
 <Plot

package/src/charts/ScatterPlot.svelte

@@ -1,8 +1,32 @@
-<script>
+<script lang="ts">
 	import Plot from '../Plot.svelte'
 	import Point from '../geoms/Point.svelte'
 
-	/** @type {import('../lib/plot/chartProps.js').ScatterBubbleChartProps} */
+	type Row = Record<string, unknown>
+	type Format = (v: unknown) => string
+
+	type Props = {
+		data?: Row[]
+		x?: string
+		y?: string
+		color?: string
+		symbol?: string
+		size?: string
+		label?: boolean | string | ((data: Row) => unknown)
+		tooltip?: boolean | ((data: Row) => string)
+		width?: number
+		height?: number
+		mode?: 'light' | 'dark'
+		grid?: boolean
+		legend?: boolean
+		jitter?: { width?: number; height?: number } | null
+		xFormat?: Format
+		yFormat?: Format
+		xTicks?: number
+		yTicks?: number
+		minorTicks?: boolean
+	}
+
 	let {
 		data = [],
 		x = undefined,
@@ -23,7 +47,7 @@
 		xTicks = undefined,
 		yTicks = undefined,
 		minorTicks = false
-	} = $props()
+	}: Props = $props()
 </script>
 
 <Plot {data} {width} {height} {mode} {grid} {legend} {tooltip} {xFormat} {yFormat} {xTicks} {yTicks} {minorTicks}>

package/src/charts/ViolinPlot.svelte

@@ -1,8 +1,24 @@
-<script>
+<script lang="ts">
 	import Plot from '../Plot.svelte'
 	import Violin from '../geoms/Violin.svelte'
 
-	/** @type {import('../lib/plot/chartProps.js').BoxViolinChartProps} */
+	type Row = Record<string, unknown>
+
+	type Props = {
+		data?: Row[]
+		x?: string
+		y?: string
+		fill?: string
+		width?: number
+		height?: number
+		mode?: 'light' | 'dark'
+		grid?: boolean
+		legend?: boolean
+		yFormat?: (v: unknown) => string
+		yTicks?: number
+		minorTicks?: boolean
+	}
+
 	let {
 		data = [],
 		x = undefined,
@@ -16,7 +32,7 @@
 		yFormat = undefined,
 		yTicks = undefined,
 		minorTicks = false
-	} = $props()
+	}: Props = $props()
 </script>
 
 <Plot {data} {width} {height} {mode} {grid} {legend} {yFormat} {yTicks} {minorTicks}>