@rokkit/chart 1.1.17 → 1.1.19

package/dist/lib/brewing/marks/violins.d.ts

@@ -7,7 +7,7 @@
  * 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
@@ -15,6 +15,6 @@
  * @returns {Array}
  */
 export function buildViolins(data: Object[], channels: {
-    x: string;
+    x?: string;
     fill?: string;
-}, xScale: any, yScale: any, colors: Map<any, any>): any[];
+}, xScale: import("d3-scale").ScaleBand<any>, yScale: import("d3-scale").ScaleLinear<any, any, never>, colors: Map<any, any>): any[];

package/dist/lib/brewing/scales.d.ts

@@ -7,7 +7,7 @@
  */
 export function buildXScale(data: Object[], field: string, width: number, opts?: {
     padding?: number;
-}): any;
+}): import("d3-scale").ScaleBand<string> | (number[] & import("d3-scale").ScaleLinear<number, number, never>);
 /**
  * Builds a y linear scale from 0 to max, extended by any layer overrides.
  * @param {Object[]} data
@@ -18,11 +18,11 @@ export function buildXScale(data: Object[], field: string, width: number, opts?:
 export function buildYScale(data: Object[], field: string, height: number, layers?: Array<{
     data?: Object[];
     y?: string;
-}>): any;
+}>): import("d3-scale").ScaleLinear<number, number, never>;
 /**
  * Builds a sqrt scale for bubble/point size.
  * @param {Object[]} data
  * @param {string} field
  * @param {number} maxRadius
  */
-export function buildSizeScale(data: Object[], field: string, maxRadius?: number): any;
+export function buildSizeScale(data: Object[], field: string, maxRadius?: number): import("d3-scale").ScalePower<number, number, never>;

package/dist/lib/chart.d.ts

@@ -28,8 +28,8 @@ declare class Chart {
         y: any;
     } | undefined;
     scale: {
-        x: any;
-        y: any;
+        x: import("d3-scale").ScaleLinear<number, number, never> | import("d3-scale").ScaleBand<string> | (Date[] & import("d3-scale").ScaleTime<number, number, never>);
+        y: import("d3-scale").ScaleLinear<number, number, never> | import("d3-scale").ScaleBand<string> | (Date[] & import("d3-scale").ScaleTime<number, number, never>);
     } | undefined;
     aggregate(value: any, stat: any): void;
     ticks(axis: any, count: any, fontSize?: number): any;

package/dist/lib/keyboard-nav.d.ts

@@ -11,5 +11,5 @@
  */
 export function keyboardNav(node: Element, enabled: boolean): {
     update(newEnabled: any): void;
-    destroy: () => any;
+    destroy: () => void;
 };

package/dist/lib/plot/facet.d.ts

@@ -4,9 +4,9 @@
  *
  * @param {Object[]} data
  * @param {string} field
- * @returns {Map<unknown, Object[]>}
+ * @returns {Map<unknown, Record<string, unknown>[]>}
  */
-export function splitByField(data: Object[], field: string): Map<unknown, Object[]>;
+export function splitByField(data: Object[], field: string): Map<unknown, Record<string, unknown>[]>;
 /**
  * Computes x/y domains for each panel.
  *

package/dist/lib/plot/frames.d.ts

@@ -4,9 +4,9 @@
  *
  * @param {Object[]} data
  * @param {string} timeField
- * @returns {Map<unknown, Object[]>}
+ * @returns {Map<unknown, Record<string, unknown>[]>}
  */
-export function extractFrames(data: Object[], timeField: string): Map<unknown, Object[]>;
+export function extractFrames(data: Object[], timeField: string): Map<unknown, Record<string, unknown>[]>;
 /**
  * Ensures all frame values (byField) appear for every (x, color?) combination.
  * Uses dataset alignBy to fill missing frame-value combos with y=0 so bars
@@ -16,15 +16,15 @@ export function extractFrames(data: Object[], timeField: string): Map<unknown, O
  * 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: Object[], channels: {
     x?: string;
-    y: string;
+    y?: string;
     color?: string;
-}, byField: string): Object[];
+}, byField: string): Record<string, unknown>[];
 /**
  * Computes static x/y domains from the full (pre-split) data array.
  * These domains stay constant throughout the animation so values are
@@ -35,12 +35,12 @@ export function completeFrames(data: Object[], channels: {
  * 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: Object[], channels: {
-    x: string;
-    y: string;
+    x?: string;
+    y?: string;
 }): {
     xDomain: unknown[];
     yDomain: [number, number];

package/dist/lib/plot/scales.d.ts

@@ -1,5 +1,5 @@
 export function inferFieldType(data: any, field: any): "continuous" | "band";
-export function inferOrientation(xType: any, yType: any): "none" | "vertical" | "horizontal";
-export function buildUnifiedXScale(datasets: any, field: any, width: any, opts?: {}): any;
-export function buildUnifiedYScale(datasets: any, field: any, height: any, opts?: {}): any;
+export function inferOrientation(xType: any, yType: any): "none" | "horizontal" | "vertical";
+export function buildUnifiedXScale(datasets: any, field: any, width: any, opts?: {}): import("d3-scale").ScaleLinear<number, number, never> | import("d3-scale").ScaleBand<string>;
+export function buildUnifiedYScale(datasets: any, field: any, height: any, opts?: {}): import("d3-scale").ScaleLinear<number, number, never> | import("d3-scale").ScaleBand<string>;
 export function inferColorScaleType(data: any, field: any, spec?: {}): any;

package/dist/lib/plot/types.d.ts

@@ -14,10 +14,11 @@ export type GeomSpec = {
      * - Built-in or helpers.stats key
      */
     stat?: string | undefined;
+    label?: string | boolean | undefined;
     options?: Record<string, unknown> | undefined;
 };
 export type PlotSpec = {
-    data: Record<string, unknown>[];
+    data?: Record<string, unknown>[] | undefined;
     x?: string | undefined;
     y?: string | undefined;
     color?: string | undefined;
@@ -32,11 +33,11 @@ export type PlotSpec = {
     xLabel?: string | undefined;
     yLabel?: string | undefined;
     axisOrigin?: [number, number] | undefined;
-    colorScale?: "diverging" | "sequential" | "categorical" | undefined;
+    colorScale?: "categorical" | "sequential" | "diverging" | undefined;
     colorScheme?: string | undefined;
     colorMidpoint?: number | undefined;
     colorDomain?: unknown[] | undefined;
-    geoms: GeomSpec[];
+    geoms?: GeomSpec[] | undefined;
     facet?: {
         by: string;
         cols?: number;
@@ -51,6 +52,8 @@ export type PlotSpec = {
     legend?: boolean | undefined;
     tooltip?: boolean | undefined;
     title?: string | undefined;
+    summary?: string | undefined;
+    orientation?: "horizontal" | "vertical" | undefined;
     preset?: string | undefined;
     width?: number | undefined;
     height?: number | undefined;
@@ -63,7 +66,7 @@ export type PlotHelpers = {
     /**
      * Svelte components keyed by type name
      */
-    geoms?: Record<string, unknown> | undefined;
+    geoms?: Record<string, import("svelte").Component<any, any, string>> | undefined;
     /**
      * d3 scale override
      */

package/dist/lib/scales.svelte.d.ts

@@ -3,8 +3,8 @@ export function createScales(data: any, dimensions: any, options: any): {
     yScale?: undefined;
     colorScale?: undefined;
 } | {
-    xScale: any;
-    yScale: any;
+    xScale: import("d3-scale").ScaleBand<any> | import("d3-scale").ScaleContinuousNumeric<any, any, never>;
+    yScale: import("d3-scale").ScaleLinear<number, number, never>;
     colorScale: Object | null;
 };
 /**

package/dist/lib/utils.d.ts

@@ -58,4 +58,10 @@ export function createTooltipFormatter(options?: Object): Function;
  * @returns {string} Transform attribute value
  */
 export function transform(x: number, y: number): string;
-export function scaledPathCollection(paths: any): {};
+/**
+ * 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: Record<string, string | number | (string | number)[]>): Record<string, (size: number) => string | number>;

package/dist/lib/xscale.d.ts

@@ -8,4 +8,4 @@
  * @param {number} padding
  * @returns {import('d3-scale').ScaleContinuousNumeric|import('d3-scale').ScaleBand}
  */
-export function buildXScale(xValues: any[], dimensions: Object, padding: number): any | any;
+export function buildXScale(xValues: any[], dimensions: Object, padding: number): import("d3-scale").ScaleContinuousNumeric<any, any, never> | import("d3-scale").ScaleBand<any>;

package/dist/patterns/DefinePatterns.svelte.d.ts

@@ -0,0 +1,7 @@
+import type { PatternMark } from './patterns.js';
+type Props = {
+    patterns?: Record<string, PatternMark[]>;
+};
+declare const DefinePatterns: import("svelte").Component<Props, {}, "">;
+type DefinePatterns = ReturnType<typeof DefinePatterns>;
+export default DefinePatterns;

package/dist/patterns/PatternDef.svelte.d.ts

@@ -0,0 +1,11 @@
+import type { PatternMark } from './patterns.js';
+type Props = {
+    id: string;
+    marks?: PatternMark[];
+    size?: number;
+    stroke?: string;
+    thickness?: number;
+};
+declare const PatternDef: import("svelte").Component<Props, {}, "">;
+type PatternDef = ReturnType<typeof PatternDef>;
+export default PatternDef;

package/dist/spec/chart-spec.d.ts

@@ -0,0 +1,22 @@
+export function chart(data: any, channels?: {}): ChartSpec;
+export class ChartSpec {
+    constructor(data: any);
+    data: any;
+    channels: {};
+    layers: any[];
+    options: {};
+    x(f: any): this;
+    y(f: any): this;
+    color(f: any): this;
+    pattern(f: any): this;
+    aes(ch: any): this;
+    bar(opts?: {}): this;
+    line(opts?: {}): this;
+    area(opts?: {}): this;
+    arc(opts?: {}): this;
+    point(opts?: {}): this;
+    grid(opts?: {}): this;
+    legend(opts?: {}): this;
+    axis(type: any, opts?: {}): this;
+    size(w: any, h: any): this;
+}

package/dist/symbols/RoundedSquare.svelte.d.ts

@@ -0,0 +1,11 @@
+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;
+}
+declare const RoundedSquare: import("svelte").Component<Props, {}, "">;
+type RoundedSquare = ReturnType<typeof RoundedSquare>;
+export default RoundedSquare;

package/dist/symbols/Shape.svelte.d.ts

@@ -0,0 +1,18 @@
+import type { SVGAttributes } from 'svelte/elements';
+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'];
+};
+declare const Shape: import("svelte").Component<Props, {}, "">;
+type Shape = ReturnType<typeof Shape>;
+export default Shape;

package/dist/symbols/constants/index.d.ts

@@ -1 +1 @@
-export const namedShapes: {};
+export const namedShapes: Record<string, (size: number) => string | number>;

package/dist/symbols/index.d.ts

@@ -1,5 +1,5 @@
 export const shapes: string[];
 export const components: {
-    default: import("svelte/legacy").LegacyComponentType;
-    'rounded-square': import("svelte/legacy").LegacyComponentType;
+    default: import("svelte").Component<import("./Shape.svelte").Props, {}, "">;
+    'rounded-square': import("svelte").Component<import("./RoundedSquare.svelte").Props, {}, "">;
 };

package/dist/symbols/outline.svelte.d.ts

@@ -0,0 +1,18 @@
+interface $$__sveltets_2_IsomorphicComponent<Props extends Record<string, any> = any, Events extends Record<string, any> = any, Slots extends Record<string, any> = any, Exports = {}, Bindings = string> {
+    new (options: import('svelte').ComponentConstructorOptions<Props>): import('svelte').SvelteComponent<Props, Events, Slots> & {
+        $$bindings?: Bindings;
+    } & Exports;
+    (internal: unknown, props: {
+        $$events?: Events;
+        $$slots?: Slots;
+    }): Exports & {
+        $set?: any;
+        $on?: any;
+    };
+    z_$$bindings?: Bindings;
+}
+declare const Outline: $$__sveltets_2_IsomorphicComponent<Record<string, never>, {
+    [evt: string]: CustomEvent<any>;
+}, {}, {}, string>;
+type Outline = InstanceType<typeof Outline>;
+export default Outline;

package/dist/symbols/solid.svelte.d.ts

@@ -0,0 +1,18 @@
+interface $$__sveltets_2_IsomorphicComponent<Props extends Record<string, any> = any, Events extends Record<string, any> = any, Slots extends Record<string, any> = any, Exports = {}, Bindings = string> {
+    new (options: import('svelte').ComponentConstructorOptions<Props>): import('svelte').SvelteComponent<Props, Events, Slots> & {
+        $$bindings?: Bindings;
+    } & Exports;
+    (internal: unknown, props: {
+        $$events?: Events;
+        $$slots?: Slots;
+    }): Exports & {
+        $set?: any;
+        $on?: any;
+    };
+    z_$$bindings?: Bindings;
+}
+declare const Solid: $$__sveltets_2_IsomorphicComponent<Record<string, never>, {
+    [evt: string]: CustomEvent<any>;
+}, {}, {}, string>;
+type Solid = InstanceType<typeof Solid>;
+export default Solid;

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@rokkit/chart",
-  "version": "1.1.17",
+  "version": "1.1.19",
   "type": "module",
   "description": "Data-driven chart components",
   "repository": {
@@ -16,10 +16,11 @@
     "access": "public"
   },
   "scripts": {
-    "prepublishOnly": "cp ../../LICENSE . && bun clean && bun tsc --project tsconfig.build.json",
+    "prepublishOnly": "cp ../../LICENSE . && bun run clean && bun run build",
     "postpublish": "rm -f LICENSE",
     "clean": "rm -rf dist",
-    "build": "bun prepublishOnly"
+    "build": "svelte-package -i src -o dist",
+    "check": "svelte-check --tsconfig ./tsconfig.json"
   },
   "files": [
     "src/**/*.js",
@@ -56,5 +57,23 @@
     "d3-transition": "^3.0.1",
     "d3-zoom": "^3.0.0",
     "ramda": "^0.32.0"
+  },
+  "peerDependencies": {
+    "svelte": "^5.0.0"
+  },
+  "devDependencies": {
+    "@sveltejs/package": "^2.5.8",
+    "@sveltejs/vite-plugin-svelte": "^6.2.4",
+    "@types/d3-array": "^3.2.2",
+    "@types/d3-axis": "^3.0.6",
+    "@types/d3-format": "^3.0.4",
+    "@types/d3-scale": "^4.0.9",
+    "@types/d3-scale-chromatic": "^3.1.0",
+    "@types/d3-selection": "^3.0.11",
+    "@types/d3-shape": "^3.1.8",
+    "@types/d3-transition": "^3.0.9",
+    "@types/d3-zoom": "^3.0.8",
+    "@types/ramda": "^0.31.1",
+    "svelte-check": "^4.4.3"
   }
 }

package/src/AnimatedPlot.svelte

@@ -1,38 +1,43 @@
-<script>
+<script lang="ts">
 	import { onMount, onDestroy } from 'svelte'
+	import type { Snippet } from 'svelte'
 	import { tweened } from 'svelte/motion'
 	import { sineInOut } from 'svelte/easing'
 	import { extractFrames, completeFrames, computeStaticDomains } from './lib/plot/frames.js'
 	import { applyGeomStat } from './lib/plot/stat.js'
+	import type { GeomSpec, PlotHelpers, PlotSpec } from './lib/plot/types.js'
 	import Timeline from './Plot/Timeline.svelte'
 	import PlotChart from './Plot.svelte'
 
-	/**
-	 * @type {{
-	 *   data: Object[],
-	 *   animate: { by: string, duration?: number, loop?: boolean },
-	 *   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,
-	 *   width?: number,
-	 *   height?: number,
-	 *   mode?: 'light' | 'dark',
-	 *   grid?: boolean,
-	 *   legend?: boolean,
-	 *   tween?: boolean,
-	 *   sorted?: boolean,
-	 *   dynamicDomain?: boolean,
-	 *   label?: boolean | string | ((data: Record<string, unknown>) => string),
-	 *   children?: import('svelte').Snippet
-	 * }}
-	 */
+	type Row = Record<string, unknown>
+	type Animate = { by: string; duration?: number; loop?: boolean }
+	type AggChannels = { x?: string; y?: string; color?: string; frame?: string }
+
+	type Props = {
+		data?: Row[]
+		animate: Animate
+		x?: string
+		y?: string
+		color?: string
+		fill?: string
+		pattern?: string
+		symbol?: string
+		geom?: string
+		stat?: string
+		geoms?: GeomSpec[]
+		helpers?: PlotHelpers
+		width?: number
+		height?: number
+		mode?: 'light' | 'dark'
+		grid?: boolean
+		legend?: boolean
+		tween?: boolean
+		sorted?: boolean
+		dynamicDomain?: boolean
+		label?: boolean | string | ((data: Row) => string)
+		children?: Snippet
+	}
+
 	let {
 		data = [],
 		animate,
@@ -56,7 +61,7 @@
 		dynamicDomain = false,
 		label = false,
 		children
-	} = $props()
+	}: Props = $props()
 
 	// Effective geom list: explicit array takes precedence; otherwise build from shorthand props
 	const effectiveGeoms = $derived(
@@ -78,7 +83,7 @@
 		const firstNonIdentity = effectiveGeoms.find((g) => g.stat && g.stat !== 'identity')
 		if (!firstNonIdentity) return { data, geoms: effectiveGeoms }
 
-		const aggChannels = { y }
+		const aggChannels: AggChannels = { y }
 		if (x) aggChannels.x = x
 		if (color) aggChannels.color = color
 		aggChannels.frame = animate.by
@@ -124,7 +129,7 @@
 		if (typeof window.matchMedia !== 'function') return
 		const mq = window.matchMedia('(prefers-reduced-motion: reduce)')
 		prefersReducedMotion = mq.matches
-		const handler = (e) => { prefersReducedMotion = e.matches }
+		const handler = (e: MediaQueryListEvent) => { prefersReducedMotion = e.matches }
 		mq.addEventListener('change', handler)
 		return () => mq.removeEventListener('change', handler)
 	})
@@ -146,7 +151,7 @@
 		}
 	}
 
-	function tick(time) {
+	function tick(time: number) {
 		if (!playing) return
 		if (time - lastTime >= msPerFrame) {
 			lastTime = time
@@ -169,7 +174,7 @@
 	})
 
 	// Reduced motion: step frames on interval instead of rAF
-	let reducedInterval = 0
+	let reducedInterval: ReturnType<typeof setInterval> | undefined
 	$effect(() => {
 		if (!playing || !prefersReducedMotion) {
 			clearInterval(reducedInterval)
@@ -203,35 +208,36 @@
 
 	function handlePlay() { playing = true }
 	function handlePause() { playing = false }
-	function handleScrub(index) { playing = false; currentIndex = index }
-	function handleSpeed(s) { speed = s }
+	function handleScrub(index: number) { playing = false; currentIndex = index }
+	function handleSpeed(s: number) { speed = s }
 
 	// Detect horizontal bar chart race: sorted=true AND y is a categorical string field
 	const isHorizontalRace = $derived.by(() => {
-		if (!sorted || !prepared.data.length) return false
+		if (!sorted || !prepared.data.length || !y) return false
 		const sample = prepared.data[0]
-		return y && typeof sample[y] === 'string'
+		return typeof sample[y] === 'string'
 	})
 
 	// Number of unique entities (y categories) for horizontal race yDomain
 	const entityCount = $derived.by(() => {
-		if (!isHorizontalRace) return 0
-		return new Set(prepared.data.map((d) => d[y])).size
+		if (!isHorizontalRace || !y) return 0
+		const field = y
+		return new Set(prepared.data.map((d) => d[field])).size
 	})
 
 	// Tweened display data — smoothly interpolates values between frames.
 	// Tween duration is 1.1× the frame interval so tweens always overlap:
 	// when the next frame fires, the previous tween is ~91% complete.
 	// displayTween.set() starts from the current in-flight value → seamless continuous motion.
-	const displayTween = tweened([], { duration: 0 })
+	const displayTween = tweened<Row[]>([], { duration: 0 })
 
 	$effect(() => {
 		const raw = currentFrameData
-		const xField = x
-		const yField = y
+		const xField = x ?? ''
+		const yField = y ?? ''
 
 		// Build display target for this frame
-		let target
+		let target: Row[]
 		if (isHorizontalRace) {
 			const ranked = raw.slice().sort((a, b) => Number(b[xField]) - Number(a[xField]))
 			const n = ranked.length
@@ -345,7 +351,7 @@
 	const xDomainForFrame = $derived(
 		isHorizontalRace && dynamicDomain ? $xDomainTween : staticDomains.xDomain
 	)
-	const frameSpec = $derived({
+	const frameSpec = $derived<PlotSpec>({
 		data: $displayTween,
 		x,
 		y: isHorizontalRace ? '_rank' : y,

package/src/Chart.svelte

@@ -1,25 +1,37 @@
-<script>
+<script lang="ts">
 	import { setContext } from 'svelte'
+	import type { Snippet } from 'svelte'
 	import { ChartBrewer } from './lib/brewing/brewer.svelte.js'
+	import type { ChartSpec } from './spec/chart-spec.js'
+
+	type Channels = {
+		x?: string
+		y?: string
+		color?: string
+		pattern?: string
+		fill?: string
+		size?: string
+		label?: string
+		symbol?: string
+	}
+
+	type Props = {
+		spec?: ChartSpec
+		data?: Record<string, unknown>[]
+		x?: string
+		y?: string
+		color?: string
+		pattern?: string
+		fill?: string
+		size?: string
+		label?: string
+		symbol?: string
+		width?: number
+		height?: number
+		mode?: 'light' | 'dark'
+		children?: Snippet
+	}
 
-	/**
-	 * @type {{
-	 *   spec?: import('./spec/chart-spec.js').ChartSpec,
-	 *   data?: Object[],
-	 *   x?: string,
-	 *   y?: string,
-	 *   color?: string,
-	 *   pattern?: string,
-	 *   fill?: string,
-	 *   size?: string,
-	 *   label?: string,
-	 *   symbol?: string,
-	 *   width?: number,
-	 *   height?: number,
-	 *   mode?: 'light' | 'dark',
-	 *   children?: import('svelte').Snippet
-	 * }}
-	 */
 	let {
 		spec = undefined,
 		data = [],
@@ -35,13 +47,13 @@
 		height = 400,
 		mode = 'light',
 		children
-	} = $props()
+	}: Props = $props()
 
 	const brewer = new ChartBrewer()
 	setContext('chart-brewer', brewer)
 
-	function buildChannels() {
-		const channels = {}
+	function buildChannels(): Channels {
+		const channels: Channels = {}
 		if (x) channels.x = x
 		if (y) channels.y = y
 		if (color) channels.color = color