@carbon/charts-svelte 1.22.18 → 1.22.20

package/dist/BaseChart.svelte

@@ -1,41 +1,41 @@
-<script generics="T extends BaseChartOptions">
-	import { onMount, afterUpdate, onDestroy, createEventDispatcher } from 'svelte'
-	const chartHolderCssClass = 'cds--chart-holder' // Used by Carbon Charts CSS
-	export let data = [] // Chart data, default is empty
-	export let options = {} // Specific chart option type, default is empty
-	export let Chart // Used to instantiate next property
-	export let chart // Instance of the chart class
-	export let ref // Binding to chart 'holder' in template below
-	export let id = `chart-${Math.random().toString(36)}` // id for chart holder element
-	const dispatch = createEventDispatcher()
+<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, { data, options })
-			dispatch('load')
+			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 this template
 			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,33 +1,35 @@
-import { SvelteComponentTyped } from 'svelte'
-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>
-	}
+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(): {}
 }
-export type BaseChartProps<T extends BaseChartOptions> = ReturnType<__sveltets_Render<T>['props']>
-export type BaseChartEvents<T extends BaseChartOptions> = ReturnType<__sveltets_Render<T>['events']>
-export type BaseChartSlots<T extends BaseChartOptions> = ReturnType<__sveltets_Render<T>['slots']>
-export default class BaseChart<T extends BaseChartOptions> extends SvelteComponentTyped<
-	BaseChartProps<T>,
-	BaseChartEvents<T>,
-	BaseChartSlots<T>
-> {}
-export {}
+interface $$IsomorphicComponent {
+	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<ChartType extends Charts, ChartOptionType extends BaseChartOptions> = InstanceType<
+	typeof BaseChart<ChartType, ChartOptionType>
+>
+export default BaseChart

package/dist/BoxplotChart.svelte

@@ -1,19 +1,25 @@
 <script>
 	import { BoxplotChart as BoxplotChartCore } from '@carbon/charts'
 	import BaseChart from './BaseChart.svelte'
-	export let options
-	export let data
-	export let chart = undefined
-	export let ref = 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,35 +1,9 @@
-import { SvelteComponentTyped } from 'svelte'
-import {
-	BoxplotChart as BoxplotChartCore,
-	type BoxplotChartOptions,
-	type ChartTabularData
-} from '@carbon/charts'
-declare const __propDef: {
-	props: {
-		[x: string]: any
-		options: BoxplotChartOptions
-		data: ChartTabularData
-		chart?: BoxplotChartCore | undefined
-		ref?: HTMLDivElement | undefined
-	}
-	events: {
-		load: CustomEvent<null>
-		update: CustomEvent<{
-			data: ChartTabularData
-			options: import('@carbon/charts').BaseChartOptions
-		}>
-		destroy: CustomEvent<null>
-	} & {
-		[evt: string]: CustomEvent<any>
-	}
-	slots: {}
-}
-export type BoxplotChartProps = typeof __propDef.props
-export type BoxplotChartEvents = typeof __propDef.events
-export type BoxplotChartSlots = typeof __propDef.slots
-export default class BoxplotChart extends SvelteComponentTyped<
-	BoxplotChartProps,
-	BoxplotChartEvents,
-	BoxplotChartSlots
-> {}
-export {}
+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,19 +1,25 @@
 <script>
 	import { BubbleChart as BubbleChartCore } from '@carbon/charts'
 	import BaseChart from './BaseChart.svelte'
-	export let options
-	export let data
-	export let chart = undefined
-	export let ref = 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,35 +1,9 @@
-import { SvelteComponentTyped } from 'svelte'
-import {
-	BubbleChart as BubbleChartCore,
-	type BubbleChartOptions,
-	type ChartTabularData
-} from '@carbon/charts'
-declare const __propDef: {
-	props: {
-		[x: string]: any
-		options: BubbleChartOptions
-		data: ChartTabularData
-		chart?: BubbleChartCore | undefined
-		ref?: HTMLDivElement | undefined
-	}
-	events: {
-		load: CustomEvent<null>
-		update: CustomEvent<{
-			data: ChartTabularData
-			options: import('@carbon/charts').BaseChartOptions
-		}>
-		destroy: CustomEvent<null>
-	} & {
-		[evt: string]: CustomEvent<any>
-	}
-	slots: {}
-}
-export type BubbleChartProps = typeof __propDef.props
-export type BubbleChartEvents = typeof __propDef.events
-export type BubbleChartSlots = typeof __propDef.slots
-export default class BubbleChart extends SvelteComponentTyped<
-	BubbleChartProps,
-	BubbleChartEvents,
-	BubbleChartSlots
-> {}
-export {}
+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,19 +1,25 @@
 <script>
 	import { BulletChart as BulletChartCore } from '@carbon/charts'
 	import BaseChart from './BaseChart.svelte'
-	export let options
-	export let data
-	export let chart = undefined
-	export let ref = 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,35 +1,9 @@
-import { SvelteComponentTyped } from 'svelte'
-import {
-	BulletChart as BulletChartCore,
-	type BulletChartOptions,
-	type ChartTabularData
-} from '@carbon/charts'
-declare const __propDef: {
-	props: {
-		[x: string]: any
-		options: BulletChartOptions
-		data: ChartTabularData
-		chart?: BulletChartCore | undefined
-		ref?: HTMLDivElement | undefined
-	}
-	events: {
-		load: CustomEvent<null>
-		update: CustomEvent<{
-			data: ChartTabularData
-			options: import('@carbon/charts').BaseChartOptions
-		}>
-		destroy: CustomEvent<null>
-	} & {
-		[evt: string]: CustomEvent<any>
-	}
-	slots: {}
-}
-export type BulletChartProps = typeof __propDef.props
-export type BulletChartEvents = typeof __propDef.events
-export type BulletChartSlots = typeof __propDef.slots
-export default class BulletChart extends SvelteComponentTyped<
-	BulletChartProps,
-	BulletChartEvents,
-	BulletChartSlots
-> {}
-export {}
+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,19 +1,25 @@
 <script>
 	import { ChoroplethChart as ChoroplethChartCore } from '@carbon/charts'
 	import BaseChart from './BaseChart.svelte'
-	export let options
-	export let data
-	export let chart = undefined
-	export let ref = 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,35 +1,9 @@
-import { SvelteComponentTyped } from 'svelte'
-import {
-	ChoroplethChart as ChoroplethChartCore,
-	type ChoroplethChartOptions,
-	type ChartTabularData
-} from '@carbon/charts'
-declare const __propDef: {
-	props: {
-		[x: string]: any
-		options: ChoroplethChartOptions
-		data: ChartTabularData
-		chart?: ChoroplethChartCore | undefined
-		ref?: HTMLDivElement | undefined
-	}
-	events: {
-		load: CustomEvent<null>
-		update: CustomEvent<{
-			data: ChartTabularData
-			options: import('@carbon/charts').BaseChartOptions
-		}>
-		destroy: CustomEvent<null>
-	} & {
-		[evt: string]: CustomEvent<any>
-	}
-	slots: {}
-}
-export type ChoroplethChartProps = typeof __propDef.props
-export type ChoroplethChartEvents = typeof __propDef.events
-export type ChoroplethChartSlots = typeof __propDef.slots
-export default class ChoroplethChart extends SvelteComponentTyped<
-	ChoroplethChartProps,
-	ChoroplethChartEvents,
-	ChoroplethChartSlots
-> {}
-export {}
+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,19 +1,25 @@
 <script>
 	import { CirclePackChart as CirclePackChartCore } from '@carbon/charts'
 	import BaseChart from './BaseChart.svelte'
-	export let options
-	export let data
-	export let chart = undefined
-	export let ref = 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,35 +1,9 @@
-import { SvelteComponentTyped } from 'svelte'
-import {
-	CirclePackChart as CirclePackChartCore,
-	type CirclePackChartOptions,
-	type ChartTabularData
-} from '@carbon/charts'
-declare const __propDef: {
-	props: {
-		[x: string]: any
-		options: CirclePackChartOptions
-		data: ChartTabularData
-		chart?: CirclePackChartCore | undefined
-		ref?: HTMLDivElement | undefined
-	}
-	events: {
-		load: CustomEvent<null>
-		update: CustomEvent<{
-			data: ChartTabularData
-			options: import('@carbon/charts').BaseChartOptions
-		}>
-		destroy: CustomEvent<null>
-	} & {
-		[evt: string]: CustomEvent<any>
-	}
-	slots: {}
-}
-export type CirclePackChartProps = typeof __propDef.props
-export type CirclePackChartEvents = typeof __propDef.events
-export type CirclePackChartSlots = typeof __propDef.slots
-export default class CirclePackChart extends SvelteComponentTyped<
-	CirclePackChartProps,
-	CirclePackChartEvents,
-	CirclePackChartSlots
-> {}
-export {}
+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,19 +1,25 @@
 <script>
 	import { ComboChart as ComboChartCore } from '@carbon/charts'
 	import BaseChart from './BaseChart.svelte'
-	export let options
-	export let data
-	export let chart = undefined
-	export let ref = 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,35 +1,9 @@
-import { SvelteComponentTyped } from 'svelte'
-import {
-	ComboChart as ComboChartCore,
-	type ComboChartOptions,
-	type ChartTabularData
-} from '@carbon/charts'
-declare const __propDef: {
-	props: {
-		[x: string]: any
-		options: ComboChartOptions
-		data: ChartTabularData
-		chart?: ComboChartCore | undefined
-		ref?: HTMLDivElement | undefined
-	}
-	events: {
-		load: CustomEvent<null>
-		update: CustomEvent<{
-			data: ChartTabularData
-			options: import('@carbon/charts').BaseChartOptions
-		}>
-		destroy: CustomEvent<null>
-	} & {
-		[evt: string]: CustomEvent<any>
-	}
-	slots: {}
-}
-export type ComboChartProps = typeof __propDef.props
-export type ComboChartEvents = typeof __propDef.events
-export type ComboChartSlots = typeof __propDef.slots
-export default class ComboChart extends SvelteComponentTyped<
-	ComboChartProps,
-	ComboChartEvents,
-	ComboChartSlots
-> {}
-export {}
+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

package/dist/DonutChart.svelte

@@ -1,19 +1,25 @@
 <script>
 	import { DonutChart as DonutChartCore } from '@carbon/charts'
 	import BaseChart from './BaseChart.svelte'
-	export let options
-	export let data
-	export let chart = undefined
-	export let ref = undefined
+	let {
+		data,
+		options,
+		ref = $bindable(),
+		chart = $bindable(),
+		onload,
+		onupdate,
+		ondestroy,
+		...rest
+	} = $props()
 </script>
 
 <BaseChart
-	{...$$restProps}
 	Chart={DonutChartCore}
 	{options}
 	{data}
 	bind:ref
 	bind:chart
-	on:load
-	on:update
-	on:destroy />
+	{onload}
+	{onupdate}
+	{ondestroy}
+	{...rest} />