@rokkit/chart 1.1.18 → 1.1.19

package/src/geoms/Waterfall.svelte

@@ -1,5 +1,23 @@
-<script>
+<script lang="ts">
 	import { getContext, onMount, onDestroy } from 'svelte'
+	import type { PlotState } from '../PlotState.svelte.js'
+
+	type Options = {
+		positiveColor?: string
+		negativeColor?: string
+		totalColor?: string
+		totalField?: string
+		connectorWidth?: number
+	}
+
+	type Props = {
+		x?: string
+		y?: string
+		color?: string
+		fill?: string
+		stat?: string
+		options?: Options
+	}
 
 	let {
 		x,
@@ -8,7 +26,7 @@
 		fill: fillProp = undefined,
 		stat = 'identity',
 		options = {}
-	} = $props()
+	}: Props = $props()
 
 	const positiveColor = $derived(options.positiveColor ?? '#22c55e')
 	const negativeColor = $derived(options.negativeColor ?? '#ef4444')
@@ -16,8 +34,8 @@
 	const totalField = $derived(options.totalField ?? undefined)
 	const connectorWidth = $derived(options.connectorWidth ?? 0.5)
 
-	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({
@@ -49,21 +67,23 @@
 
 		let cumulative = 0
 		return data.map((d, i) => {
-			const xVal = d[x]
-			const yVal = Number(d[y])
+			const xVal = d[x ?? '']
+			const yVal = Number(d[y ?? ''])
 			const isTotal = totalField ? Boolean(d[totalField]) : false
 			const xPos = xScale(xVal) ?? 0
-			let barTop, barBottom, fill
+			let barTop: number
+			let barBottom: number
+			let fill: string
 
 			if (isTotal) {
-				barTop = yScale(Math.max(0, cumulative))
-				barBottom = yScale(0)
+				barTop = yScale(Math.max(0, cumulative)) ?? 0
+				barBottom = yScale(0) ?? 0
 				fill = totalColor
 			} else {
 				const start = cumulative
 				cumulative += yVal
-				barTop = yScale(Math.max(start, cumulative))
-				barBottom = yScale(Math.min(start, cumulative))
+				barTop = yScale(Math.max(start, cumulative)) ?? 0
+				barBottom = yScale(Math.min(start, cumulative)) ?? 0
 				fill = yVal >= 0 ? positiveColor : negativeColor
 			}
 
@@ -95,7 +115,7 @@
 				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>
 			<!-- Connector line to next bar -->
 			{#if i < bars.length - 1}

package/src/geoms/lib/areas.js

@@ -5,7 +5,7 @@ import { toPatternId } from '../../lib/brewing/patterns.js'
  * Builds area path geometry for multi-series area charts.
  *
  * @param {Object[]} data
- * @param {{ x: string, y: string, color?: string }} channels
+ * @param {{ x: string, y: string, color?: string, pattern?: string }} channels
  * @param {Function} xScale
  * @param {Function} yScale
  * @param {Map<unknown, {fill: string, stroke: string}>} colors
@@ -80,7 +80,7 @@ export function buildAreas(data, channels, xScale, yScale, colors, curve, patter
  * Builds stacked area paths using d3 stack layout.
  *
  * @param {Object[]} data
- * @param {{ x: string, y: string, color: string }} channels
+ * @param {{ x: string, y: string, color?: string, pattern?: string }} channels
  * @param {Function} xScale
  * @param {Function} yScale
  * @param {Map<unknown, {fill: string, stroke: string}>} colors

package/src/lib/brewing/marks/arcs.js

@@ -3,13 +3,14 @@ import { toPatternId } from '../../brewing/patterns.js'
 
 /**
  * Builds arc geometry for pie/donut charts.
- * @param {Object[]} data
- * @param {{ color: string, y: string, pattern?: string }} channels
+ * @param {Record<string, unknown>[]} data
+ * @param {{ color?: string, y?: string, pattern?: string }} channels
  * @param {Map} colors
  * @param {number} width
  * @param {number} height
  * @param {{ innerRadius?: number }} opts
  * @param {Map<unknown, string>} [patterns]
+ * @returns {{ d: string | null, fill: string, stroke: string, key: unknown, patternId: string | null, pct: number, centroid: [number, number], data: Record<string, unknown> }[]}
  */
 export function buildArcs(data, channels, colors, width, height, opts = {}, patterns) {
 	const { color: lf, y: yf } = channels

package/src/lib/brewing/marks/boxes.js

@@ -8,7 +8,7 @@
  * Box body uses the lighter fill shade; whiskers and median use the darker stroke shade.
  *
  * @param {Object[]} data - Pre-aggregated rows with quartile fields
- * @param {{ x: string, fill?: string }} channels
+ * @param {{ x?: string, fill?: string }} channels
  *   `fill` drives the box and whisker color (defaults to x-field).
  * @param {import('d3-scale').ScaleBand} xScale
  * @param {import('d3-scale').ScaleLinear} yScale

package/src/lib/brewing/marks/lines.js

@@ -2,12 +2,12 @@ import { line, curveCatmullRom, curveStep } from 'd3-shape'
 
 /**
  * @param {Object[]} data
- * @param {{ x: string, y: string, color?: string }} channels
+ * @param {{ x?: string, y?: string, color?: string }} channels
  * @param {Function} xScale
  * @param {Function} yScale
  * @param {Map} colors
  * @param {'linear'|'smooth'|'step'} [curve]
- * @returns {{ d: string, fill: string, stroke: string, points: {x:number, y:number, data:Object}[], key?: unknown }[]}
+ * @returns {{ d: string | null, fill: string, stroke: string, points: {x:number, y:number, data: Record<string, unknown>}[], key?: unknown }[]}
  */
 export function buildLines(data, channels, xScale, yScale, colors, curve) {
 	const { x: xf, y: yf, color: cf } = channels

package/src/lib/brewing/marks/points.js

@@ -61,8 +61,8 @@ export function jitterOffset(i, range) {
 
 /**
  * Builds point geometry for scatter/bubble charts.
- * @param {Object[]} data
- * @param {{ x: string, y: string, color?: string, size?: string, symbol?: string }} channels
+ * @param {Record<string, unknown>[]} data
+ * @param {{ x?: string, y?: string, color?: string, size?: string, symbol?: string }} channels
  * @param {Function} xScale
  * @param {Function} yScale
  * @param {Map} colors
@@ -70,6 +70,7 @@ export function jitterOffset(i, range) {
  * @param {Map<unknown, string>|null} symbolMap  — maps symbol field value → shape name
  * @param {number} defaultRadius
  * @param {{ width?: number, height?: number }|null} jitter
+ * @returns {{ data: Record<string, unknown>, cx: number, cy: number, r: number, fill: string, stroke: string, symbolPath: string | null, key: unknown }[]}
  */
 export function buildPoints(
 	data,

package/src/lib/brewing/marks/violins.js

@@ -13,7 +13,7 @@ const ANCHOR_ORDER = ['iqr_max', 'q3', 'median', 'q1', 'iqr_min']
  * Violin body uses the lighter fill shade; outline uses the darker stroke shade.
  *
  * @param {Object[]} data
- * @param {{ x: string, fill?: string }} channels
+ * @param {{ x?: string, fill?: string }} channels
  *   `fill` drives violin interior and outline (defaults to x-field).
  * @param {import('d3-scale').ScaleBand} xScale
  * @param {import('d3-scale').ScaleLinear} yScale

package/src/lib/plot/facet.js

@@ -6,7 +6,7 @@ import { extent } from 'd3-array'
  *
  * @param {Object[]} data
  * @param {string} field
- * @returns {Map<unknown, Object[]>}
+ * @returns {Map<unknown, Record<string, unknown>[]>}
  */
 export function splitByField(data, field) {
 	const map = new Map()

package/src/lib/plot/frames.js

@@ -7,7 +7,7 @@ import { dataset } from '@rokkit/data'
  *
  * @param {Object[]} data
  * @param {string} timeField
- * @returns {Map<unknown, Object[]>}
+ * @returns {Map<unknown, Record<string, unknown>[]>}
  */
 export function extractFrames(data, timeField) {
 	const map = new Map()
@@ -28,9 +28,9 @@ export function extractFrames(data, timeField) {
  * with no further per-frame normalization needed.
  *
  * @param {Object[]} data - pre-aggregated rows, one per (x, color?, byField)
- * @param {{ x?: string, y: string, color?: string }} channels
+ * @param {{ x?: string, y?: string, color?: string }} channels
  * @param {string} byField - the frame field (e.g. 'year')
- * @returns {Object[]}
+ * @returns {Record<string, unknown>[]}
  */
 export function completeFrames(data, channels, byField) {
 	const { x: xf, y: yf, color: cf } = channels
@@ -62,7 +62,7 @@ export function completeFrames(data, channels, byField) {
  * be negative.
  *
  * @param {Object[]} data - full dataset (before frame extraction)
- * @param {{ x: string, y: string }} channels
+ * @param {{ x?: string, y?: string }} channels
  * @returns {{ xDomain: unknown[], yDomain: [number, number] }}
  */
 export function computeStaticDomains(data, channels) {

package/src/lib/plot/types.js

@@ -12,12 +12,13 @@
  * @property {string} [symbol]
  * @property {string} [pattern]
  * @property {string} [stat] - Built-in or helpers.stats key
+ * @property {boolean | string} [label]
  * @property {Record<string, unknown>} [options]
  */
 
 /**
  * @typedef {Object} PlotSpec
- * @property {Record<string, unknown>[]} data
+ * @property {Record<string, unknown>[]} [data]
  * @property {string} [x]
  * @property {string} [y]
  * @property {string} [color]
@@ -36,13 +37,15 @@
  * @property {string} [colorScheme]
  * @property {number} [colorMidpoint]
  * @property {unknown[]} [colorDomain]
- * @property {GeomSpec[]} geoms
+ * @property {GeomSpec[]} [geoms]
  * @property {{ by: string, cols?: number, scales?: 'fixed'|'free'|'free_x'|'free_y' }} [facet]
  * @property {{ by: string, duration?: number, loop?: boolean }} [animate]
  * @property {boolean} [grid]
  * @property {boolean} [legend]
  * @property {boolean} [tooltip]
  * @property {string} [title]
+ * @property {string} [summary]
+ * @property {'horizontal'|'vertical'} [orientation]
  * @property {string} [preset]
  * @property {number} [width]
  * @property {number} [height]
@@ -54,7 +57,7 @@
  * @property {Record<string, (values: unknown[]) => unknown>} [stats]
  * @property {Record<string, (v: unknown) => string>} [format]
  * @property {(d: Record<string, unknown>) => string} [tooltip]
- * @property {Record<string, unknown>} [geoms]  Svelte components keyed by type name
+ * @property {Record<string, import('svelte').Component<any>>} [geoms]  Svelte components keyed by type name
  * @property {unknown} [colorScale]  d3 scale override
  * @property {{ colors: string[], patterns: string[], symbols: string[] }} [preset]
  * @property {Record<string, { colors: string[], patterns: string[], symbols: string[] }>} [presets]

package/src/lib/utils.js

@@ -142,9 +142,15 @@ export function transform(x, y) {
 
 import { scaledPath } from '@rokkit/core'
 
+/**
+ * Builds a collection of size-scaling path generators keyed by shape name.
+ *
+ * @param {Record<string, string|number|(string|number)[]>} paths
+ * @returns {Record<string, (size: number) => string|number>}
+ */
 export function scaledPathCollection(paths) {
 	return Object.entries(paths).reduce(
 		(acc, [key, value]) => ({ ...acc, [key]: (s) => scaledPath(s, value) }),
-		{}
+		/** @type {Record<string, (size: number) => string|number>} */ ({})
 	)
 }

package/src/patterns/DefinePatterns.svelte

@@ -1,13 +1,18 @@
-<script>
+<script lang="ts">
 	import { getContext } from 'svelte'
+	import type { PatternMark } from './patterns.js'
+	import type { PlotState } from '../PlotState.svelte.js'
 	import { toPatternId } from '../lib/brewing/patterns.js'
 	import { PATTERNS } from './patterns.js'
 	import PatternDef from './PatternDef.svelte'
 
-	/** @type {{ patterns?: Record<string, import('./patterns.js').PatternMark[]> }} */
-	let { patterns = PATTERNS } = $props()
+	type Props = {
+		patterns?: Record<string, PatternMark[]>
+	}
 
-	const state = getContext('plot-state')
+	let { patterns = PATTERNS }: Props = $props()
+
+	const state = getContext<PlotState>('plot-state')
 
 	const patternDefs = $derived.by(() => {
 		const defs = []

package/src/patterns/PatternDef.svelte

@@ -1,8 +1,16 @@
-<script>
+<script lang="ts">
+	import type { PatternMark } from './patterns.js'
 	import { scaleMark, resolveMarkAttrs } from './scale.js'
 
-	/** @type {{ id: string, marks?: import('./patterns.js').PatternMark[], size?: number, stroke?: string, thickness?: number }} */
-	let { id, marks = [], size = 10, stroke = '#444', thickness = 0.5 } = $props()
+	type Props = {
+		id: string
+		marks?: PatternMark[]
+		size?: number
+		stroke?: string
+		thickness?: number
+	}
+
+	let { id, marks = [], size = 10, stroke = '#444', thickness = 0.5 }: Props = $props()
 
 	const resolvedMarks = $derived(
 		marks.map((m) => resolveMarkAttrs(scaleMark(m, size), { fill: stroke, stroke, thickness }))

package/src/symbols/RoundedSquare.svelte

@@ -1,4 +1,14 @@
-<script>
+<script lang="ts">
+	import type { SVGAttributes } from 'svelte/elements'
+
+	export interface Props extends Omit<SVGAttributes<SVGRectElement>, 'x' | 'y' | 'fill' | 'stroke'> {
+		x?: number
+		y?: number
+		size?: number
+		fill?: string
+		stroke?: string
+	}
+
 	let {
 		x = 0,
 		y = 0,
@@ -10,10 +20,9 @@
 		onmouseleave,
 		onfocus,
 		...restProps
-	} = $props()
+	}: Props = $props()
 
 	let r = $derived(size * 3.534)
-	let props = $derived({ rx: r * 0.1, ry: r * 0.1, ...restProps })
 </script>
 
 <rect
@@ -23,7 +32,9 @@
 	height={r * 2}
 	{fill}
 	{stroke}
-	{...props}
+	rx={r * 0.1}
+	ry={r * 0.1}
+	{...restProps}
 	role="button"
 	{onclick}
 	{onmouseover}

package/src/symbols/Shape.svelte

@@ -1,6 +1,22 @@
-<script>
+<script lang="ts">
+	import type { SVGAttributes } from 'svelte/elements'
 	import { namedShapes } from './constants'
 
+	export type Props = {
+		x?: number
+		y?: number
+		size?: number
+		fill?: string
+		stroke?: string
+		thickness?: number
+		name?: string
+		onclick?: SVGAttributes<SVGPathElement>['onclick']
+		onmouseover?: SVGAttributes<SVGPathElement>['onmouseover']
+		onmouseleave?: SVGAttributes<SVGPathElement>['onmouseleave']
+		onfocus?: SVGAttributes<SVGPathElement>['onfocus']
+		onblur?: SVGAttributes<SVGPathElement>['onblur']
+	}
+
 	let {
 		x = 0,
 		y = 0,
@@ -14,9 +30,11 @@
 		onmouseleave,
 		onfocus,
 		onblur
-	} = $props()
+	}: Props = $props()
 
-	let d = $derived(name in namedShapes ? namedShapes[name](size) : namedShapes['circle'](size))
+	let d = $derived(
+		String(name in namedShapes ? namedShapes[name](size) : namedShapes['circle'](size))
+	)
 </script>
 
 <!-- svelte-ignore a11y_click_events_have_key_events -->

package/src/symbols/outline.svelte

@@ -1,3 +1,5 @@
+<script lang="ts"></script>
+
 <svg
 	class="plot"
 	fill="currentColor"

package/src/symbols/solid.svelte

@@ -1,3 +1,5 @@
+<script lang="ts"></script>
+
 <svg
 	class="plot"
 	fill="currentColor"