@rokkit/chart 1.1.18 → 1.2.0

package/src/ChartExporter.svelte

@@ -1,4 +1,6 @@
-<script>
+<script lang="ts">
+	import type { Snippet } from 'svelte'
+
 	/**
 	 * ChartExporter — wraps a chart and provides export actions for SVG and PNG.
 	 *
@@ -9,26 +11,30 @@
 	 * <button onclick={() => exporter.exportSVG()}>SVG</button>
 	 * <button onclick={() => exporter.exportPNG()}>PNG</button>
 	 */
+	type Props = {
+		children?: Snippet
+		filename?: string
+		scale?: number
+	}
+
 	let {
 		children,
 		filename = 'chart',
 		scale = 2
-	} = $props()
+	}: Props = $props()
 
-	let containerEl = $state(null)
+	let containerEl = $state<HTMLDivElement | null>(null)
 
-	function getSvgEl() {
-		return containerEl?.querySelector('svg')
+	function getSvgEl(): SVGSVGElement | null {
+		return containerEl?.querySelector('svg') ?? null
 	}
 
 	/**
 	 * Inline all computed CSS custom property values into the SVG for portability.
-	 * @param {SVGSVGElement} svg
-	 * @returns {SVGSVGElement}
 	 */
 	// eslint-disable-next-line complexity
-	function inlineStyles(svg) {
-		const clone = /** @type {SVGSVGElement} */ (svg.cloneNode(true))
+	function inlineStyles(svg: SVGSVGElement): SVGSVGElement {
+		const clone = svg.cloneNode(true) as SVGSVGElement
 		const computed = getComputedStyle(svg)
 
 		// Copy relevant CSS custom properties to inline styles on the root
@@ -70,9 +76,9 @@
 
 	/**
 	 * Export the chart as a PNG file download.
-	 * @param {number} [scaleFactor] Override scale factor for this export
+	 * @param scaleFactor Override scale factor for this export
 	 */
-	export function exportPNG(scaleFactor) {
+	export function exportPNG(scaleFactor?: number) {
 		const svg = getSvgEl()
 		if (!svg) return
 
@@ -89,6 +95,7 @@
 			canvas.width = svg.clientWidth * factor
 			canvas.height = svg.clientHeight * factor
 			const ctx = canvas.getContext('2d')
+			if (!ctx) return
 			ctx.scale(factor, factor)
 			ctx.drawImage(img, 0, 0)
 			URL.revokeObjectURL(url)
@@ -100,11 +107,7 @@
 		img.src = url
 	}
 
-	/**
-	 * @param {Blob} blob
-	 * @param {string} name
-	 */
-	function download(blob, name) {
+	function download(blob: Blob, name: string) {
 		const a = document.createElement('a')
 		a.href = URL.createObjectURL(blob)
 		a.download = name

package/src/ChartLegend.svelte

@@ -1,34 +1,38 @@
-<script>
+<script lang="ts">
 	import { buildSymbolPath } from './lib/brewing/marks/points.js'
 
+	type LegendItem = {
+		key: string
+		label: string
+		fill?: string
+		stroke?: string
+		patternId?: string
+		shape?: string
+	}
+
+	type LegendGroup = {
+		type?: 'color' | 'pattern' | 'symbol'
+		label?: string
+		items: LegendItem[]
+	}
+
 	/**
 	 * Standalone chart legend — HTML-based, usable outside of Plot context.
 	 * Accepts `groups` from a chart's brewer or from multiple charts for shared legends.
-	 *
-	 * @type {{
-	 *   groups: Array<{
-	 *     type?: 'color' | 'pattern' | 'symbol',
-	 *     label?: string,
-	 *     items: Array<{
-	 *       key: string,
-	 *       label: string,
-	 *       fill?: string,
-	 *       stroke?: string,
-	 *       patternId?: string,
-	 *       shape?: string,
-	 *     }>
-	 *   }>,
-	 *   orientation?: 'horizontal' | 'vertical' | 'wrap',
-	 *   gradient?: { style: string, min: string, max: string } | null,
-	 *   swatchStyle?: 'fill' | 'line' | 'point',
-	 * }}
 	 */
+	type Props = {
+		groups?: LegendGroup[]
+		orientation?: 'horizontal' | 'vertical' | 'wrap'
+		gradient?: { style: string; min: string; max: string } | null
+		swatchStyle?: 'fill' | 'line' | 'point'
+	}
+
 	let {
 		groups = [],
 		orientation = 'horizontal',
 		gradient = null,
 		swatchStyle = 'fill'
-	} = $props()
+	}: Props = $props()
 </script>
 
 <div

package/src/ChartProvider.svelte

@@ -1,8 +1,16 @@
-<script>
+<script lang="ts">
 	import { setContext } from 'svelte'
+	import type { Snippet } from 'svelte'
 	import { createChartPreset } from './lib/preset.js'
 
-	let { preset = createChartPreset(), children } = $props()
+	type Preset = ReturnType<typeof createChartPreset>
+
+	type Props = {
+		preset?: Preset
+		children?: Snippet
+	}
+
+	let { preset = createChartPreset(), children }: Props = $props()
 
 	setContext('chart-preset', { get current() { return preset } })
 </script>

package/src/FacetPlot/Panel.svelte

@@ -1,8 +1,28 @@
-<script>
+<script lang="ts">
+	import type { Snippet } from 'svelte'
 	import PlotChart from '../Plot.svelte'
+	import type { GeomSpec, PlotHelpers } from '../lib/plot/types.js'
+
+	type Props = {
+		data?: Record<string, unknown>[]
+		x?: string
+		y?: string
+		color?: string
+		geoms?: GeomSpec[]
+		helpers?: PlotHelpers
+		width?: number
+		height?: number
+		mode?: 'light' | 'dark'
+		grid?: boolean
+		legend?: boolean
+		xDomain?: unknown[]
+		yDomain?: [number, number]
+		colorDomain?: unknown[]
+		children?: Snippet
+	}
 
 	let {
-		data,
+		data = [],
 		x,
 		y,
 		color,
@@ -17,7 +37,7 @@
 		yDomain,
 		colorDomain,
 		children
-	} = $props()
+	}: Props = $props()
 
 	// Build spec with domain overrides so PlotState uses them
 	const spec = $derived({

package/src/FacetPlot.svelte

@@ -1,32 +1,35 @@
-<script>
+<script lang="ts">
+	import type { Snippet } from 'svelte'
 	import { splitByField, getFacetDomains } from './lib/plot/facet.js'
 	import { distinct } from './lib/brewing/colors.js'
+	import type { GeomSpec, PlotHelpers } from './lib/plot/types.js'
 	import PlotPanel from './FacetPlot/Panel.svelte'
 
-	/**
-	 * @type {{
-	 *   data: Object[],
-	 *   facet: { by: string, cols?: number, scales?: 'fixed'|'free'|'free_x'|'free_y' },
-	 *   x?: string,
-	 *   y?: string,
-	 *   color?: string,
-	 *   fill?: string,
-	 *   pattern?: string,
-	 *   symbol?: string,
-	 *   geom?: string,
-	 *   stat?: string,
-	 *   geoms?: import('./lib/plot/types.js').GeomSpec[],
-	 *   helpers?: import('./lib/plot/types.js').PlotHelpers,
-	 *   panelWidth?: number,
-	 *   panelHeight?: number,
-	 *   width?: number,
-	 *   height?: number,
-	 *   mode?: 'light' | 'dark',
-	 *   grid?: boolean,
-	 *   legend?: boolean,
-	 *   children?: import('svelte').Snippet
-	 * }}
-	 */
+	type Facet = { by: string; cols?: number; scales?: 'fixed' | 'free' | 'free_x' | 'free_y' }
+
+	type Props = {
+		data?: Record<string, unknown>[]
+		facet: Facet
+		x?: string
+		y?: string
+		color?: string
+		fill?: string
+		pattern?: string
+		symbol?: string
+		geom?: string
+		stat?: string
+		geoms?: GeomSpec[]
+		helpers?: PlotHelpers
+		panelWidth?: number
+		panelHeight?: number
+		width?: number
+		height?: number
+		mode?: 'light' | 'dark'
+		grid?: boolean
+		legend?: boolean
+		children?: Snippet
+	}
+
 	let {
 		data = [],
 		facet,
@@ -48,7 +51,7 @@
 		grid = true,
 		legend = false,
 		children
-	} = $props()
+	}: Props = $props()
 
 	// `fill` is accepted as an alias for `color` (bar/area semantics vs line/point)
 	const colorChannel = $derived(fill ?? color)

package/src/Plot/Arc.svelte

@@ -1,7 +1,8 @@
-<script>
+<script lang="ts">
 	import { getContext } from 'svelte'
+	import type { ChartBrewer } from '../lib/brewing/brewer.svelte.js'
 
-	const brewer = getContext('chart-brewer')
+	const brewer = getContext<ChartBrewer>('chart-brewer')
 </script>
 
 {#if brewer && brewer.arcs && brewer.arcs.length > 0}

package/src/Plot/Area.svelte

@@ -1,6 +1,19 @@
-<script>
+<script lang="ts">
 	import { getContext } from 'svelte'
-	import { area as d3Area } from 'd3-shape'
+	import { area as d3Area, type CurveFactory } from 'd3-shape'
+	import type { PlotState } from '../PlotState.svelte.js'
+
+	type Datum = Record<string, unknown> | number
+
+	type Props = {
+		data?: Datum[]
+		x?: string
+		y?: string
+		y0?: string
+		fill?: string
+		opacity?: number
+		curve?: CurveFactory
+	}
 
 	let {
 		data = [],
@@ -10,17 +23,26 @@
 		fill = 'steelblue',
 		opacity = 0.7,
 		curve = undefined
-	} = $props()
+	}: Props = $props()
+
+	const state = getContext<PlotState>('plot-state')
 
-	const state = getContext('plot-state')
+	const accessor = (d: Datum, field: string | undefined): unknown =>
+		field && typeof d === 'object' ? d[field] : d
 
 	const path = $derived.by(() => {
 		if (!state?.xScale || !state?.yScale || !data?.length) return null
+		const xScale = state.xScale
+		const yScale = state.yScale
 		const innerHeight = state.innerHeight
-		const areaGen = d3Area()
-			.x((d) => state.xScale(x ? d[x] : d) ?? 0)
-			.y1((d) => state.yScale(y ? d[y] : d) ?? 0)
-			.y0((d) => (y0 !== undefined ? state.yScale(d[y0] ?? y0) : innerHeight) ?? innerHeight)
+		const areaGen = d3Area<Datum>()
+			.x((d) => xScale(accessor(d, x)) ?? 0)
+			.y1((d) => yScale(accessor(d, y)) ?? 0)
+			.y0((d) =>
+				y0 !== undefined
+					? (yScale((typeof d === 'object' ? d[y0] : undefined) ?? y0) ?? innerHeight)
+					: innerHeight
+			)
 			.defined((d) => d != null)
 		if (curve) areaGen.curve(curve)
 		return areaGen(data)

package/src/Plot/Axis.svelte

@@ -1,18 +1,20 @@
-<script>
+<script lang="ts">
 	import { getContext } from 'svelte'
+	import type { PlotState } from '../PlotState.svelte.js'
+
+	type Props = {
+		type?: 'x' | 'y'
+		label?: string
+		format?: (v: unknown) => string
+		ticks?: number
+		minorTicks?: boolean
+		showLine?: boolean
+		showTicks?: boolean
+		showLabels?: boolean
+	}
+
+	type Tick = { value: unknown; pos: number; minor: boolean }
 
-	/**
-	 * @type {{
-	 *   type?: 'x' | 'y',
-	 *   label?: string,
-	 *   format?: (v: unknown) => string,
-	 *   ticks?: number,
-	 *   minorTicks?: boolean,
-	 *   showLine?: boolean,
-	 *   showTicks?: boolean,
-	 *   showLabels?: boolean,
-	 * }}
-	 */
 	let {
 		type = 'x',
 		label = '',
@@ -22,25 +24,26 @@
 		showLine = true,
 		showTicks = true,
 		showLabels = true
-	} = $props()
+	}: Props = $props()
 
-	const state = getContext('plot-state')
+	const state = getContext<PlotState>('plot-state')
 
 	const MINOR_DIVISIONS = 4
 
-	const xTicks = $derived.by(() => {
-		const s = state.xScale
+	function buildTicks(s: PlotState['xScale']): Tick[] {
 		if (!s) return []
 		if (typeof s.bandwidth === 'function') {
-			return s.domain().map((val) => ({
+			return s.domain().map((val: unknown) => ({
 				value: val,
 				pos: (s(val) ?? 0) + s.bandwidth() / 2,
 				minor: false
 			}))
 		}
-		const major = s.ticks(tickCount).map((val) => ({ value: val, pos: s(val), minor: false }))
+		const major: Tick[] = s
+			.ticks(tickCount)
+			.map((val: number) => ({ value: val, pos: s(val), minor: false }))
 		if (!minorTicks || major.length < 2) return major
-		const result = []
+		const result: Tick[] = []
 		for (let i = 0; i < major.length; i++) {
 			result.push(major[i])
 			if (i < major.length - 1) {
@@ -51,32 +54,10 @@
 			}
 		}
 		return result
-	})
+	}
 
-	const yTicks = $derived.by(() => {
-		const s = state.yScale
-		if (!s) return []
-		if (typeof s.bandwidth === 'function') {
-			return s.domain().map((val) => ({
-				value: val,
-				pos: (s(val) ?? 0) + s.bandwidth() / 2,
-				minor: false
-			}))
-		}
-		const major = s.ticks(tickCount).map((val) => ({ value: val, pos: s(val), minor: false }))
-		if (!minorTicks || major.length < 2) return major
-		const result = []
-		for (let i = 0; i < major.length; i++) {
-			result.push(major[i])
-			if (i < major.length - 1) {
-				const step = (major[i + 1].pos - major[i].pos) / MINOR_DIVISIONS
-				for (let j = 1; j < MINOR_DIVISIONS; j++) {
-					result.push({ value: null, pos: major[i].pos + step * j, minor: true })
-				}
-			}
-		}
-		return result
-	})
+	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)`)

package/src/Plot/Bar.svelte

@@ -1,9 +1,24 @@
-<script>
+<script lang="ts">
 	import { getContext } from 'svelte'
+	import type { PlotState } from '../PlotState.svelte.js'
 
-	let { data = undefined, x = undefined, y = undefined, fill = 'steelblue', opacity = 1 } = $props()
+	type Datum = Record<string, unknown> | number
 
-	const state = getContext('plot-state')
+	type Props = {
+		data?: Datum[]
+		x?: string
+		y?: string
+		fill?: string
+		opacity?: number
+	}
+
+	let { data = undefined, x = undefined, y = undefined, fill = 'steelblue', opacity = 1 }: Props =
+		$props()
+
+	const state = getContext<PlotState>('plot-state')
+
+	const accessor = (d: Datum, field: string | undefined): unknown =>
+		field && typeof d === 'object' ? d[field] : d
 
 	const bars = $derived.by(() => {
 		if (!state?.xScale || !state?.yScale) return []
@@ -24,8 +39,8 @@
 				: innerHeight
 
 		return src.map((d) => {
-			const xVal = x ? d[x] : d
-			const yVal = y ? d[y] : d
+			const xVal = accessor(d, x)
+			const yVal = accessor(d, y)
 			const xPos = (xScale(xVal) ?? 0) + padding
 			const yPos = yScale(yVal) ?? baseline
 			return {

package/src/Plot/Grid.svelte

@@ -1,18 +1,19 @@
-<script>
+<script lang="ts">
 	import { getContext } from 'svelte'
+	import type { PlotState } from '../PlotState.svelte.js'
 
-	const state = getContext('plot-state')
+	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) => ({ pos: (s(val) ?? 0) + s.bandwidth() / 2 }))
+		return s.domain().map((val: unknown) => ({ pos: (s(val) ?? 0) + s.bandwidth() / 2 }))
 	})
 
 	const yGridLines = $derived.by(() => {
 		const s = state.yScale
 		if (!s || typeof s.ticks !== 'function') return []
-		return s.ticks(6).map((val) => ({ pos: s(val) }))
+		return s.ticks(6).map((val: number) => ({ pos: s(val) }))
 	})
 </script>
 

package/src/Plot/Legend.svelte

@@ -1,12 +1,16 @@
-<script>
+<script lang="ts">
 	import { getContext } from 'svelte'
+	import type { PlotState } from '../PlotState.svelte.js'
 	import { toPatternId } from '../lib/brewing/patterns.js'
 	import { buildSymbolPath } from '../lib/brewing/marks/points.js'
 
-	/** @type {Record<string, string>} */
-	let { labels = {} } = $props()
+	type Props = {
+		labels?: Record<string, string>
+	}
+
+	let { labels = {} }: Props = $props()
 
-	const state = getContext('plot-state')
+	const state = getContext<PlotState>('plot-state')
 
 	const isCategorical = $derived(state.colorScaleType === 'categorical')
 	const isLineGeom = $derived(state.geomTypes?.has('line') ?? false)

package/src/Plot/Line.svelte

@@ -1,6 +1,18 @@
-<script>
+<script lang="ts">
 	import { getContext } from 'svelte'
-	import { line as d3Line } from 'd3-shape'
+	import { line as d3Line, type CurveFactory } from 'd3-shape'
+	import type { PlotState } from '../PlotState.svelte.js'
+
+	type Datum = Record<string, unknown> | number
+
+	type Props = {
+		data?: Datum[]
+		x?: string
+		y?: string
+		stroke?: string
+		strokeWidth?: number
+		curve?: CurveFactory
+	}
 
 	let {
 		data = [],
@@ -9,15 +21,20 @@
 		stroke = 'steelblue',
 		strokeWidth = 2,
 		curve = undefined
-	} = $props()
+	}: Props = $props()
+
+	const state = getContext<PlotState>('plot-state')
 
-	const state = getContext('plot-state')
+	const accessor = (d: Datum, field: string | undefined): unknown =>
+		field && typeof d === 'object' ? d[field] : d
 
 	const path = $derived.by(() => {
 		if (!state?.xScale || !state?.yScale || !data?.length) return null
-		const lineGen = d3Line()
-			.x((d) => state.xScale(x ? d[x] : d) ?? 0)
-			.y((d) => state.yScale(y ? d[y] : d) ?? 0)
+		const xScale = state.xScale
+		const yScale = state.yScale
+		const lineGen = d3Line<Datum>()
+			.x((d) => xScale(accessor(d, x)) ?? 0)
+			.y((d) => yScale(accessor(d, y)) ?? 0)
 			.defined((d) => d != null)
 		if (curve) lineGen.curve(curve)
 		return lineGen(data)

package/src/Plot/Point.svelte

@@ -1,5 +1,18 @@
-<script>
+<script lang="ts">
 	import { getContext } from 'svelte'
+	import type { PlotState } from '../PlotState.svelte.js'
+
+	type Datum = Record<string, unknown> | number
+
+	type Props = {
+		data?: Datum[]
+		x?: string
+		y?: string
+		r?: number
+		fill?: string
+		stroke?: string
+		strokeWidth?: number
+	}
 
 	let {
 		data = [],
@@ -9,17 +22,22 @@
 		fill = 'steelblue',
 		stroke = 'white',
 		strokeWidth = 1
-	} = $props()
+	}: Props = $props()
+
+	const state = getContext<PlotState>('plot-state')
 
-	const state = getContext('plot-state')
+	const accessor = (d: Datum, field: string | undefined): unknown =>
+		field && typeof d === 'object' ? d[field] : d
 
 	const points = $derived.by(() => {
 		if (!state?.xScale || !state?.yScale || !data?.length) return []
+		const xScale = state.xScale
+		const yScale = state.yScale
 		return data
 			.map((d) => ({
-				cx: state.xScale(x ? d[x] : d) ?? null,
-				cy: state.yScale(y ? d[y] : d) ?? null,
-				label: `(${x ? d[x] : d}, ${y ? d[y] : d})`
+				cx: xScale(accessor(d, x)) ?? null,
+				cy: yScale(accessor(d, y)) ?? null,
+				label: `(${accessor(d, x)}, ${accessor(d, y)})`
 			}))
 			.filter((p) => p.cx !== null && p.cy !== null)
 	})

package/src/Plot/Root.svelte

@@ -1,8 +1,23 @@
-<script>
+<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'
 
+	type Margin = { top?: number; right?: number; bottom?: number; left?: number }
+
+	type Props = {
+		data?: Record<string, unknown>[]
+		x?: string
+		y?: string
+		color?: string
+		width?: number
+		height?: number
+		margin?: Margin
+		mode?: 'light' | 'dark'
+		children?: Snippet
+	}
+
 	let {
 		data = [],
 		x = undefined,
@@ -13,7 +28,7 @@
 		margin = undefined,
 		mode = 'light',
 		children
-	} = $props()
+	}: Props = $props()
 
 	const plotState = untrack(
 		() =>