@carbon/charts-svelte 1.22.17 → 1.22.19

package/dist/BaseChart.svelte

@@ -1,56 +1,41 @@
-<script lang="ts" generics="T extends BaseChartOptions">
-	/* eslint-disable @typescript-eslint/no-unused-vars */
-	import { onMount, afterUpdate, onDestroy, createEventDispatcher } from 'svelte'
-	import type { Charts, ChartConfig, BaseChartOptions, ChartTabularData } from '@carbon/charts'
-
-	interface DispatchedEvents {
-		load: null
-		update: { data: ChartTabularData; options: T }
-		destroy: null
-	}
-
-	type CoreChartClass = new (holder: HTMLDivElement, chartConfigs: ChartConfig<T>) => Charts
-
-	const chartHolderCssClass = 'cds--chart-holder' // Used by Carbon Charts CSS
-	export let data: ChartTabularData = [] // Chart data, default is empty
-	export let options: T = {} as T // Specific chart option type, default is empty
-	export let Chart: CoreChartClass // Used to instantiate next property
-	export let chart: Charts | undefined // Instance of the chart class
-	export let ref: HTMLDivElement | undefined // Binding to chart 'holder' in template below
-	export let id = `chart-${Math.random().toString(36)}` // id for chart holder element
-
-	const dispatch = createEventDispatcher<DispatchedEvents>()
-
+<script>
+	import { onMount, onDestroy } from 'svelte'
+	const chartHolderCssClass = 'cds--chart-holder'
+	let {
+		id = `chart-${Math.random().toString(36)}`,
+		data = [],
+		options = {},
+		ref = $bindable(),
+		chart = $bindable(),
+		Chart,
+		onload,
+		onupdate,
+		ondestroy,
+		...rest
+	} = $props()
 	onMount(() => {
 		try {
-			chart = new Chart(ref as HTMLDivElement, { data, options })
-			dispatch('load')
+			chart = new Chart(ref, { data, options })
+			onload?.()
 		} catch (error) {
 			console.error('Failed to initialize chart:', error)
 		}
 	})
-
-	afterUpdate(() => {
+	$effect(() => {
 		if (chart) {
-			try {
-				chart.model.setData(data)
-				chart.model.setOptions(options)
-				dispatch('update', { data, options })
-			} catch (error) {
-				console.error('Failed to update chart:', error)
-			}
+			chart.model.setData(data)
+			chart.model.setOptions(options)
+			onupdate?.({ data, options })
 		}
 	})
-
 	onDestroy(() => {
 		if (chart) {
-			dispatch('destroy')
-			// Like core's Chart.destroy() but keeps div chart holder bound to ref as it's part of the template below
 			chart.components.forEach(component => component.destroy())
 			chart.model.set({ destroyed: true }, { skipUpdate: true })
-			chart = undefined
+			chart = void 0
+			ondestroy?.()
 		}
 	})
 </script>
 
-<div {id} bind:this={ref} class={chartHolderCssClass} {...$$restProps}></div>
+<div {id} bind:this={ref} class={chartHolderCssClass} {...rest}></div>

package/dist/BaseChart.svelte.d.ts

@@ -1,37 +1,35 @@
-import type { Charts, ChartConfig, BaseChartOptions, ChartTabularData } from '@carbon/charts';
-declare class __sveltets_Render<T extends BaseChartOptions> {
-    props(): {
-        [x: string]: any;
-        data?: ChartTabularData | undefined;
-        options?: T | undefined;
-        Chart: new (holder: HTMLDivElement, chartConfigs: ChartConfig<T>) => Charts;
-        chart: Charts | undefined;
-        ref: HTMLDivElement | undefined;
-        id?: string | undefined;
-    };
-    events(): {
-        load: CustomEvent<null>;
-        update: CustomEvent<{
-            data: ChartTabularData;
-            options: T;
-        }>;
-        destroy: CustomEvent<null>;
-    } & {
-        [evt: string]: CustomEvent<any>;
-    };
-    slots(): {};
-    bindings(): string;
-    exports(): {};
+import type { Charts, BaseChartOptions } from '@carbon/charts'
+import type { BaseChartProps } from './interfaces'
+declare class __sveltets_Render<
+	ChartType extends Charts,
+	ChartOptionType extends BaseChartOptions
+> {
+	props(): BaseChartProps<ChartType, ChartOptionType>
+	events(): {}
+	slots(): {}
+	bindings(): 'ref' | 'chart'
+	exports(): {}
 }
 interface $$IsomorphicComponent {
-    new <T extends BaseChartOptions>(options: import('svelte').ComponentConstructorOptions<ReturnType<__sveltets_Render<T>['props']>>): import('svelte').SvelteComponent<ReturnType<__sveltets_Render<T>['props']>, ReturnType<__sveltets_Render<T>['events']>, ReturnType<__sveltets_Render<T>['slots']>> & {
-        $$bindings?: ReturnType<__sveltets_Render<T>['bindings']>;
-    } & ReturnType<__sveltets_Render<T>['exports']>;
-    <T extends BaseChartOptions>(internal: unknown, props: ReturnType<__sveltets_Render<T>['props']> & {
-        $$events?: ReturnType<__sveltets_Render<T>['events']>;
-    }): ReturnType<__sveltets_Render<T>['exports']>;
-    z_$$bindings?: ReturnType<__sveltets_Render<any>['bindings']>;
+	new <ChartType extends Charts, ChartOptionType extends BaseChartOptions>(
+		options: import('svelte').ComponentConstructorOptions<
+			ReturnType<__sveltets_Render<ChartType, ChartOptionType>['props']>
+		>
+	): import('svelte').SvelteComponent<
+		ReturnType<__sveltets_Render<ChartType, ChartOptionType>['props']>,
+		ReturnType<__sveltets_Render<ChartType, ChartOptionType>['events']>,
+		ReturnType<__sveltets_Render<ChartType, ChartOptionType>['slots']>
+	> & {
+		$$bindings?: ReturnType<__sveltets_Render<ChartType, ChartOptionType>['bindings']>
+	} & ReturnType<__sveltets_Render<ChartType, ChartOptionType>['exports']>
+	<ChartType extends Charts, ChartOptionType extends BaseChartOptions>(
+		internal: unknown,
+		props: ReturnType<__sveltets_Render<ChartType, ChartOptionType>['props']> & {}
+	): ReturnType<__sveltets_Render<ChartType, ChartOptionType>['exports']>
+	z_$$bindings?: ReturnType<__sveltets_Render<any, any>['bindings']>
 }
-declare const BaseChart: $$IsomorphicComponent;
-type BaseChart<T extends BaseChartOptions> = InstanceType<typeof BaseChart<T>>;
-export default BaseChart;
+declare const BaseChart: $$IsomorphicComponent
+type BaseChart<ChartType extends Charts, ChartOptionType extends BaseChartOptions> = InstanceType<
+	typeof BaseChart<ChartType, ChartOptionType>
+>
+export default BaseChart

package/dist/BoxplotChart.svelte

@@ -1,24 +1,25 @@
-<script lang="ts">
-	import {
-		BoxplotChart as BoxplotChartCore,
-		type BoxplotChartOptions,
-		type ChartTabularData
-	} from '@carbon/charts'
+<script>
+	import { BoxplotChart as BoxplotChartCore } from '@carbon/charts'
 	import BaseChart from './BaseChart.svelte'
-
-	export let options: BoxplotChartOptions
-	export let data: ChartTabularData
-	export let chart: BoxplotChartCore | undefined = undefined
-	export let ref: HTMLDivElement | undefined = undefined
+	let {
+		data,
+		options,
+		ref = $bindable(),
+		chart = $bindable(),
+		onload,
+		onupdate,
+		ondestroy,
+		...rest
+	} = $props()
 </script>
 
 <BaseChart
-	{...$$restProps}
 	Chart={BoxplotChartCore}
 	{options}
 	{data}
 	bind:ref
 	bind:chart
-	on:load
-	on:update
-	on:destroy />
+	{onload}
+	{onupdate}
+	{ondestroy}
+	{...rest} />

package/dist/BoxplotChart.svelte.d.ts

@@ -1,32 +1,9 @@
-import { BoxplotChart as BoxplotChartCore, type BoxplotChartOptions, type ChartTabularData } from '@carbon/charts';
-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: Props & {
-        $$events?: Events;
-        $$slots?: Slots;
-    }): Exports & {
-        $set?: any;
-        $on?: any;
-    };
-    z_$$bindings?: Bindings;
-}
-declare const BoxplotChart: $$__sveltets_2_IsomorphicComponent<{
-    [x: string]: any;
-    options: BoxplotChartOptions;
-    data: ChartTabularData;
-    chart?: BoxplotChartCore | undefined;
-    ref?: HTMLDivElement | undefined;
-}, {
-    load: CustomEvent<null>;
-    update: CustomEvent<{
-        data: ChartTabularData;
-        options: import("@carbon/charts").BaseChartOptions;
-    }>;
-    destroy: CustomEvent<null>;
-} & {
-    [evt: string]: CustomEvent<any>;
-}, {}, {}, string>;
-type BoxplotChart = InstanceType<typeof BoxplotChart>;
-export default BoxplotChart;
+import { BoxplotChart as BoxplotChartCore } from '@carbon/charts'
+import type { ChartProps } from './interfaces'
+declare const BoxplotChart: import('svelte').Component<
+	ChartProps<BoxplotChartCore, import('@carbon/charts').AxisChartOptions>,
+	{},
+	'ref' | 'chart'
+>
+type BoxplotChart = ReturnType<typeof BoxplotChart>
+export default BoxplotChart

package/dist/BubbleChart.svelte

@@ -1,24 +1,25 @@
-<script lang="ts">
-	import {
-		BubbleChart as BubbleChartCore,
-		type BubbleChartOptions,
-		type ChartTabularData
-	} from '@carbon/charts'
+<script>
+	import { BubbleChart as BubbleChartCore } from '@carbon/charts'
 	import BaseChart from './BaseChart.svelte'
-
-	export let options: BubbleChartOptions
-	export let data: ChartTabularData
-	export let chart: BubbleChartCore | undefined = undefined
-	export let ref: HTMLDivElement | undefined = undefined
+	let {
+		data,
+		options,
+		ref = $bindable(),
+		chart = $bindable(),
+		onload,
+		onupdate,
+		ondestroy,
+		...rest
+	} = $props()
 </script>
 
 <BaseChart
-	{...$$restProps}
 	Chart={BubbleChartCore}
 	{options}
 	{data}
 	bind:ref
 	bind:chart
-	on:load
-	on:update
-	on:destroy />
+	{onload}
+	{onupdate}
+	{ondestroy}
+	{...rest} />

package/dist/BubbleChart.svelte.d.ts

@@ -1,32 +1,9 @@
-import { BubbleChart as BubbleChartCore, type BubbleChartOptions, type ChartTabularData } from '@carbon/charts';
-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: Props & {
-        $$events?: Events;
-        $$slots?: Slots;
-    }): Exports & {
-        $set?: any;
-        $on?: any;
-    };
-    z_$$bindings?: Bindings;
-}
-declare const BubbleChart: $$__sveltets_2_IsomorphicComponent<{
-    [x: string]: any;
-    options: BubbleChartOptions;
-    data: ChartTabularData;
-    chart?: BubbleChartCore | undefined;
-    ref?: HTMLDivElement | undefined;
-}, {
-    load: CustomEvent<null>;
-    update: CustomEvent<{
-        data: ChartTabularData;
-        options: import("@carbon/charts").BaseChartOptions;
-    }>;
-    destroy: CustomEvent<null>;
-} & {
-    [evt: string]: CustomEvent<any>;
-}, {}, {}, string>;
-type BubbleChart = InstanceType<typeof BubbleChart>;
-export default BubbleChart;
+import { BubbleChart as BubbleChartCore, type BubbleChartOptions } from '@carbon/charts'
+import type { ChartProps } from './interfaces'
+declare const BubbleChart: import('svelte').Component<
+	ChartProps<BubbleChartCore, BubbleChartOptions>,
+	{},
+	'ref' | 'chart'
+>
+type BubbleChart = ReturnType<typeof BubbleChart>
+export default BubbleChart

package/dist/BulletChart.svelte

@@ -1,24 +1,25 @@
-<script lang="ts">
-	import {
-		BulletChart as BulletChartCore,
-		type BulletChartOptions,
-		type ChartTabularData
-	} from '@carbon/charts'
+<script>
+	import { BulletChart as BulletChartCore } from '@carbon/charts'
 	import BaseChart from './BaseChart.svelte'
-
-	export let options: BulletChartOptions
-	export let data: ChartTabularData
-	export let chart: BulletChartCore | undefined = undefined
-	export let ref: HTMLDivElement | undefined = undefined
+	let {
+		data,
+		options,
+		ref = $bindable(),
+		chart = $bindable(),
+		onload,
+		onupdate,
+		ondestroy,
+		...rest
+	} = $props()
 </script>
 
 <BaseChart
-	{...$$restProps}
 	Chart={BulletChartCore}
 	{options}
 	{data}
 	bind:ref
 	bind:chart
-	on:load
-	on:update
-	on:destroy />
+	{onload}
+	{onupdate}
+	{ondestroy}
+	{...rest} />

package/dist/BulletChart.svelte.d.ts

@@ -1,32 +1,9 @@
-import { BulletChart as BulletChartCore, type BulletChartOptions, type ChartTabularData } from '@carbon/charts';
-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: Props & {
-        $$events?: Events;
-        $$slots?: Slots;
-    }): Exports & {
-        $set?: any;
-        $on?: any;
-    };
-    z_$$bindings?: Bindings;
-}
-declare const BulletChart: $$__sveltets_2_IsomorphicComponent<{
-    [x: string]: any;
-    options: BulletChartOptions;
-    data: ChartTabularData;
-    chart?: BulletChartCore | undefined;
-    ref?: HTMLDivElement | undefined;
-}, {
-    load: CustomEvent<null>;
-    update: CustomEvent<{
-        data: ChartTabularData;
-        options: import("@carbon/charts").BaseChartOptions;
-    }>;
-    destroy: CustomEvent<null>;
-} & {
-    [evt: string]: CustomEvent<any>;
-}, {}, {}, string>;
-type BulletChart = InstanceType<typeof BulletChart>;
-export default BulletChart;
+import { BulletChart as BulletChartCore, type BulletChartOptions } from '@carbon/charts'
+import type { ChartProps } from './interfaces'
+declare const BulletChart: import('svelte').Component<
+	ChartProps<BulletChartCore, BulletChartOptions>,
+	{},
+	'ref' | 'chart'
+>
+type BulletChart = ReturnType<typeof BulletChart>
+export default BulletChart

package/dist/ChoroplethChart.svelte

@@ -1,24 +1,25 @@
-<script lang="ts">
-	import {
-		ChoroplethChart as ChoroplethChartCore,
-		type ChoroplethChartOptions,
-		type ChartTabularData
-	} from '@carbon/charts'
+<script>
+	import { ChoroplethChart as ChoroplethChartCore } from '@carbon/charts'
 	import BaseChart from './BaseChart.svelte'
-
-	export let options: ChoroplethChartOptions
-	export let data: ChartTabularData
-	export let chart: ChoroplethChartCore | undefined = undefined
-	export let ref: HTMLDivElement | undefined = undefined
+	let {
+		data,
+		options,
+		ref = $bindable(),
+		chart = $bindable(),
+		onload,
+		onupdate,
+		ondestroy,
+		...rest
+	} = $props()
 </script>
 
 <BaseChart
-	{...$$restProps}
 	Chart={ChoroplethChartCore}
 	{options}
 	{data}
 	bind:ref
 	bind:chart
-	on:load
-	on:update
-	on:destroy />
+	{onload}
+	{onupdate}
+	{ondestroy}
+	{...rest} />

package/dist/ChoroplethChart.svelte.d.ts

@@ -1,32 +1,9 @@
-import { ChoroplethChart as ChoroplethChartCore, type ChoroplethChartOptions, type ChartTabularData } from '@carbon/charts';
-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: Props & {
-        $$events?: Events;
-        $$slots?: Slots;
-    }): Exports & {
-        $set?: any;
-        $on?: any;
-    };
-    z_$$bindings?: Bindings;
-}
-declare const ChoroplethChart: $$__sveltets_2_IsomorphicComponent<{
-    [x: string]: any;
-    options: ChoroplethChartOptions;
-    data: ChartTabularData;
-    chart?: ChoroplethChartCore | undefined;
-    ref?: HTMLDivElement | undefined;
-}, {
-    load: CustomEvent<null>;
-    update: CustomEvent<{
-        data: ChartTabularData;
-        options: import("@carbon/charts").BaseChartOptions;
-    }>;
-    destroy: CustomEvent<null>;
-} & {
-    [evt: string]: CustomEvent<any>;
-}, {}, {}, string>;
-type ChoroplethChart = InstanceType<typeof ChoroplethChart>;
-export default ChoroplethChart;
+import { ChoroplethChart as ChoroplethChartCore, type ChoroplethChartOptions } from '@carbon/charts'
+import type { ChartProps } from './interfaces'
+declare const ChoroplethChart: import('svelte').Component<
+	ChartProps<ChoroplethChartCore, ChoroplethChartOptions>,
+	{},
+	'ref' | 'chart'
+>
+type ChoroplethChart = ReturnType<typeof ChoroplethChart>
+export default ChoroplethChart

package/dist/CirclePackChart.svelte

@@ -1,24 +1,25 @@
-<script lang="ts">
-	import {
-		CirclePackChart as CirclePackChartCore,
-		type CirclePackChartOptions,
-		type ChartTabularData
-	} from '@carbon/charts'
+<script>
+	import { CirclePackChart as CirclePackChartCore } from '@carbon/charts'
 	import BaseChart from './BaseChart.svelte'
-
-	export let options: CirclePackChartOptions
-	export let data: ChartTabularData
-	export let chart: CirclePackChartCore | undefined = undefined
-	export let ref: HTMLDivElement | undefined = undefined
+	let {
+		data,
+		options,
+		ref = $bindable(),
+		chart = $bindable(),
+		onload,
+		onupdate,
+		ondestroy,
+		...rest
+	} = $props()
 </script>
 
 <BaseChart
-	{...$$restProps}
 	Chart={CirclePackChartCore}
 	{options}
 	{data}
 	bind:ref
 	bind:chart
-	on:load
-	on:update
-	on:destroy />
+	{onload}
+	{onupdate}
+	{ondestroy}
+	{...rest} />

package/dist/CirclePackChart.svelte.d.ts

@@ -1,32 +1,9 @@
-import { CirclePackChart as CirclePackChartCore, type CirclePackChartOptions, type ChartTabularData } from '@carbon/charts';
-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: Props & {
-        $$events?: Events;
-        $$slots?: Slots;
-    }): Exports & {
-        $set?: any;
-        $on?: any;
-    };
-    z_$$bindings?: Bindings;
-}
-declare const CirclePackChart: $$__sveltets_2_IsomorphicComponent<{
-    [x: string]: any;
-    options: CirclePackChartOptions;
-    data: ChartTabularData;
-    chart?: CirclePackChartCore | undefined;
-    ref?: HTMLDivElement | undefined;
-}, {
-    load: CustomEvent<null>;
-    update: CustomEvent<{
-        data: ChartTabularData;
-        options: import("@carbon/charts").BaseChartOptions;
-    }>;
-    destroy: CustomEvent<null>;
-} & {
-    [evt: string]: CustomEvent<any>;
-}, {}, {}, string>;
-type CirclePackChart = InstanceType<typeof CirclePackChart>;
-export default CirclePackChart;
+import { CirclePackChart as CirclePackChartCore, type CirclePackChartOptions } from '@carbon/charts'
+import type { ChartProps } from './interfaces'
+declare const CirclePackChart: import('svelte').Component<
+	ChartProps<CirclePackChartCore, CirclePackChartOptions>,
+	{},
+	'ref' | 'chart'
+>
+type CirclePackChart = ReturnType<typeof CirclePackChart>
+export default CirclePackChart

package/dist/ComboChart.svelte

@@ -1,24 +1,25 @@
-<script lang="ts">
-	import {
-		ComboChart as ComboChartCore,
-		type ComboChartOptions,
-		type ChartTabularData
-	} from '@carbon/charts'
+<script>
+	import { ComboChart as ComboChartCore } from '@carbon/charts'
 	import BaseChart from './BaseChart.svelte'
-
-	export let options: ComboChartOptions
-	export let data: ChartTabularData
-	export let chart: ComboChartCore | undefined = undefined
-	export let ref: HTMLDivElement | undefined = undefined
+	let {
+		data,
+		options,
+		ref = $bindable(),
+		chart = $bindable(),
+		onload,
+		onupdate,
+		ondestroy,
+		...rest
+	} = $props()
 </script>
 
 <BaseChart
-	{...$$restProps}
 	Chart={ComboChartCore}
 	{options}
 	{data}
 	bind:ref
 	bind:chart
-	on:load
-	on:update
-	on:destroy />
+	{onload}
+	{onupdate}
+	{ondestroy}
+	{...rest} />

package/dist/ComboChart.svelte.d.ts

@@ -1,32 +1,9 @@
-import { ComboChart as ComboChartCore, type ComboChartOptions, type ChartTabularData } from '@carbon/charts';
-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: Props & {
-        $$events?: Events;
-        $$slots?: Slots;
-    }): Exports & {
-        $set?: any;
-        $on?: any;
-    };
-    z_$$bindings?: Bindings;
-}
-declare const ComboChart: $$__sveltets_2_IsomorphicComponent<{
-    [x: string]: any;
-    options: ComboChartOptions;
-    data: ChartTabularData;
-    chart?: ComboChartCore | undefined;
-    ref?: HTMLDivElement | undefined;
-}, {
-    load: CustomEvent<null>;
-    update: CustomEvent<{
-        data: ChartTabularData;
-        options: import("@carbon/charts").BaseChartOptions;
-    }>;
-    destroy: CustomEvent<null>;
-} & {
-    [evt: string]: CustomEvent<any>;
-}, {}, {}, string>;
-type ComboChart = InstanceType<typeof ComboChart>;
-export default ComboChart;
+import { ComboChart as ComboChartCore, type ComboChartOptions } from '@carbon/charts'
+import type { ChartProps } from './interfaces'
+declare const ComboChart: import('svelte').Component<
+	ChartProps<ComboChartCore, ComboChartOptions>,
+	{},
+	'ref' | 'chart'
+>
+type ComboChart = ReturnType<typeof ComboChart>
+export default ComboChart