@carbon/charts-svelte 1.13.10 → 1.13.11

package/CHANGELOG.md

@@ -3,6 +3,19 @@
 All notable changes to this project will be documented in this file. See
 [Conventional Commits](https://conventionalcommits.org) for commit guidelines.
 
+## 1.13.11 (2023-12-18)
+
+### Bug Fixes
+
+- **svelte:** strongly type dispatched events
+  ([#1703](https://github.com/carbon-design-system/carbon-charts/issues/1703))
+  ([1a37ef2](https://github.com/carbon-design-system/carbon-charts/commit/1a37ef2be692400b257446f62d1350899e27dd59))
+
+# Change Log
+
+All notable changes to this project will be documented in this file. See
+[Conventional Commits](https://conventionalcommits.org) for commit guidelines.
+
 ## 1.13.10 (2023-12-18)
 
 **Note:** Version bump only for package @carbon/charts-svelte

package/README.md

@@ -145,7 +145,7 @@ In this example, an event listener is attached to the `BarChartSimple` component
 ```svelte
 <script>
 	import '@carbon/charts-svelte/styles.css'
-	import { onDestroy, onMount } from 'svelte'
+	import { onMount } from 'svelte'
 	import { BarChartSimple } from '@carbon/charts-svelte'
 
 	let chart
@@ -155,16 +155,12 @@ In this example, an event listener is attached to the `BarChartSimple` component
 	}
 
 	onMount(() => {
-		// do something
-	})
+		chart.services.events.addEventListener('bar-mouseover', barMouseOver)
 
-	onDestroy(() => {
-		if (chart) {
-			chart.services.events.removeEventListener('bar-mouseover', barMouseOver)
+		return () => {
+			chart?.services.events.removeEventListener('bar-mouseover', barMouseOver)
 		}
 	})
-
-	$: if (chart) chart.services.events.addEventListener('bar-mouseover', barMouseOver)
 </script>
 
 <BarChartSimple
@@ -206,3 +202,58 @@ Customizable options (specific to chart type) can be found
 ## TypeScript support
 
 Svelte version 3.31 or greater is required to use this library with TypeScript. Svelte 4.x+ is recommended.
+
+### Enums and types
+
+For your convenience, enums and types from `@carbon/charts` are re-exported from
+`@carbon/charts-svelte`.
+
+```ts
+import { ScaleTypes, type BarChartOptions } from '@carbon/charts-svelte'
+
+const options: BarChartOptions = {
+	title: 'Simple bar (discrete)',
+	height: '400px',
+	axes: {
+		left: { mapsTo: 'value' },
+		bottom: {
+			mapsTo: 'group',
+			scaleType: ScaleTypes.LABELS
+		}
+	}
+}
+```
+
+### Component type
+
+Use the `ComponentType` utility type from `svelte` to extract the component type for chart
+components.
+
+```ts
+import { onMount, type ComponentType } from 'svelte'
+import type { BarChartSimple } from '@carbon/charts-svelte'
+
+let component: ComponentType<BarChartSimple> = null
+
+onMount(async () => {
+	component = (await import('@carbon/charts-svelte')).BarChartSimple
+})
+```
+
+### Component props
+
+Use the `ComponentProps` utility type from `svelte` to extract the props for chart components.
+
+You can then use an
+[indexed access type](https://www.typescriptlang.org/docs/handbook/2/indexed-access-types.html) to
+extract types for individual properties.
+
+```ts
+import { type ComponentProps } from 'svelte'
+import { BarChartSimple } from '@carbon/charts-svelte'
+
+type ChartProps = ComponentProps<BarChartSimple>
+
+// Indexed access type to access the type of the `chart` property
+let chart: ChartProps['chart'] = null
+```

package/dist/AlluvialChart.svelte.d.ts

@@ -9,9 +9,12 @@ declare const __propDef: {
         ref?: HTMLDivElement | null;
     };
     events: {
-        load: CustomEvent<any>;
-        update: CustomEvent<any>;
-        destroy: CustomEvent<any>;
+        load: CustomEvent<null>;
+        update: CustomEvent<{
+            data: ChartTabularData;
+            options: import("@carbon/charts").ChartOptions;
+        }>;
+        destroy: CustomEvent<null>;
     } & {
         [evt: string]: CustomEvent<any>;
     };

package/dist/AreaChart.svelte.d.ts

@@ -9,9 +9,12 @@ declare const __propDef: {
         ref?: HTMLDivElement | null;
     };
     events: {
-        load: CustomEvent<any>;
-        update: CustomEvent<any>;
-        destroy: CustomEvent<any>;
+        load: CustomEvent<null>;
+        update: CustomEvent<{
+            data: ChartTabularData;
+            options: import("@carbon/charts").ChartOptions;
+        }>;
+        destroy: CustomEvent<null>;
     } & {
         [evt: string]: CustomEvent<any>;
     };

package/dist/BarChartGrouped.svelte.d.ts

@@ -9,9 +9,12 @@ declare const __propDef: {
         ref?: HTMLDivElement | null;
     };
     events: {
-        load: CustomEvent<any>;
-        update: CustomEvent<any>;
-        destroy: CustomEvent<any>;
+        load: CustomEvent<null>;
+        update: CustomEvent<{
+            data: ChartTabularData;
+            options: import("@carbon/charts").ChartOptions;
+        }>;
+        destroy: CustomEvent<null>;
     } & {
         [evt: string]: CustomEvent<any>;
     };

package/dist/BarChartSimple.svelte.d.ts

@@ -9,9 +9,12 @@ declare const __propDef: {
         ref?: HTMLDivElement | null;
     };
     events: {
-        load: CustomEvent<any>;
-        update: CustomEvent<any>;
-        destroy: CustomEvent<any>;
+        load: CustomEvent<null>;
+        update: CustomEvent<{
+            data: ChartTabularData;
+            options: import("@carbon/charts").ChartOptions;
+        }>;
+        destroy: CustomEvent<null>;
     } & {
         [evt: string]: CustomEvent<any>;
     };

package/dist/BarChartStacked.svelte.d.ts

@@ -9,9 +9,12 @@ declare const __propDef: {
         ref?: HTMLDivElement | null;
     };
     events: {
-        load: CustomEvent<any>;
-        update: CustomEvent<any>;
-        destroy: CustomEvent<any>;
+        load: CustomEvent<null>;
+        update: CustomEvent<{
+            data: ChartTabularData;
+            options: import("@carbon/charts").ChartOptions;
+        }>;
+        destroy: CustomEvent<null>;
     } & {
         [evt: string]: CustomEvent<any>;
     };

package/dist/BaseChart.svelte.d.ts

@@ -14,9 +14,12 @@ declare const __propDef: {
         id?: string;
     };
     events: {
-        load: CustomEvent<any>;
-        update: CustomEvent<any>;
-        destroy: CustomEvent<any>;
+        load: CustomEvent<null>;
+        update: CustomEvent<{
+            data: ChartTabularData;
+            options: ChartOptions;
+        }>;
+        destroy: CustomEvent<null>;
     } & {
         [evt: string]: CustomEvent<any>;
     };

package/dist/BoxplotChart.svelte.d.ts

@@ -9,9 +9,12 @@ declare const __propDef: {
         ref?: HTMLDivElement | null;
     };
     events: {
-        load: CustomEvent<any>;
-        update: CustomEvent<any>;
-        destroy: CustomEvent<any>;
+        load: CustomEvent<null>;
+        update: CustomEvent<{
+            data: ChartTabularData;
+            options: import("@carbon/charts").ChartOptions;
+        }>;
+        destroy: CustomEvent<null>;
     } & {
         [evt: string]: CustomEvent<any>;
     };

package/dist/BubbleChart.svelte.d.ts

@@ -9,9 +9,12 @@ declare const __propDef: {
         ref?: HTMLDivElement | null;
     };
     events: {
-        load: CustomEvent<any>;
-        update: CustomEvent<any>;
-        destroy: CustomEvent<any>;
+        load: CustomEvent<null>;
+        update: CustomEvent<{
+            data: ChartTabularData;
+            options: import("@carbon/charts").ChartOptions;
+        }>;
+        destroy: CustomEvent<null>;
     } & {
         [evt: string]: CustomEvent<any>;
     };

package/dist/BulletChart.svelte.d.ts

@@ -9,9 +9,12 @@ declare const __propDef: {
         ref?: HTMLDivElement | null;
     };
     events: {
-        load: CustomEvent<any>;
-        update: CustomEvent<any>;
-        destroy: CustomEvent<any>;
+        load: CustomEvent<null>;
+        update: CustomEvent<{
+            data: ChartTabularData;
+            options: import("@carbon/charts").ChartOptions;
+        }>;
+        destroy: CustomEvent<null>;
     } & {
         [evt: string]: CustomEvent<any>;
     };

package/dist/ChoroplethChart.svelte.d.ts

@@ -9,9 +9,12 @@ declare const __propDef: {
         ref?: HTMLDivElement | null;
     };
     events: {
-        load: CustomEvent<any>;
-        update: CustomEvent<any>;
-        destroy: CustomEvent<any>;
+        load: CustomEvent<null>;
+        update: CustomEvent<{
+            data: ChartTabularData;
+            options: import("@carbon/charts").ChartOptions;
+        }>;
+        destroy: CustomEvent<null>;
     } & {
         [evt: string]: CustomEvent<any>;
     };

package/dist/CirclePackChart.svelte.d.ts

@@ -9,9 +9,12 @@ declare const __propDef: {
         ref?: HTMLDivElement | null;
     };
     events: {
-        load: CustomEvent<any>;
-        update: CustomEvent<any>;
-        destroy: CustomEvent<any>;
+        load: CustomEvent<null>;
+        update: CustomEvent<{
+            data: ChartTabularData;
+            options: import("@carbon/charts").ChartOptions;
+        }>;
+        destroy: CustomEvent<null>;
     } & {
         [evt: string]: CustomEvent<any>;
     };

package/dist/ComboChart.svelte.d.ts

@@ -9,9 +9,12 @@ declare const __propDef: {
         ref?: HTMLDivElement | null;
     };
     events: {
-        load: CustomEvent<any>;
-        update: CustomEvent<any>;
-        destroy: CustomEvent<any>;
+        load: CustomEvent<null>;
+        update: CustomEvent<{
+            data: ChartTabularData;
+            options: import("@carbon/charts").ChartOptions;
+        }>;
+        destroy: CustomEvent<null>;
     } & {
         [evt: string]: CustomEvent<any>;
     };

package/dist/DonutChart.svelte.d.ts

@@ -9,9 +9,12 @@ declare const __propDef: {
         ref?: HTMLDivElement | null;
     };
     events: {
-        load: CustomEvent<any>;
-        update: CustomEvent<any>;
-        destroy: CustomEvent<any>;
+        load: CustomEvent<null>;
+        update: CustomEvent<{
+            data: ChartTabularData;
+            options: import("@carbon/charts").ChartOptions;
+        }>;
+        destroy: CustomEvent<null>;
     } & {
         [evt: string]: CustomEvent<any>;
     };

package/dist/GaugeChart.svelte.d.ts

@@ -9,9 +9,12 @@ declare const __propDef: {
         ref?: HTMLDivElement | null;
     };
     events: {
-        load: CustomEvent<any>;
-        update: CustomEvent<any>;
-        destroy: CustomEvent<any>;
+        load: CustomEvent<null>;
+        update: CustomEvent<{
+            data: ChartTabularData;
+            options: import("@carbon/charts").ChartOptions;
+        }>;
+        destroy: CustomEvent<null>;
     } & {
         [evt: string]: CustomEvent<any>;
     };

package/dist/HeatmapChart.svelte.d.ts

@@ -9,9 +9,12 @@ declare const __propDef: {
         ref?: HTMLDivElement | null;
     };
     events: {
-        load: CustomEvent<any>;
-        update: CustomEvent<any>;
-        destroy: CustomEvent<any>;
+        load: CustomEvent<null>;
+        update: CustomEvent<{
+            data: ChartTabularData;
+            options: import("@carbon/charts").ChartOptions;
+        }>;
+        destroy: CustomEvent<null>;
     } & {
         [evt: string]: CustomEvent<any>;
     };

package/dist/HistogramChart.svelte.d.ts

@@ -9,9 +9,12 @@ declare const __propDef: {
         ref?: HTMLDivElement | null;
     };
     events: {
-        load: CustomEvent<any>;
-        update: CustomEvent<any>;
-        destroy: CustomEvent<any>;
+        load: CustomEvent<null>;
+        update: CustomEvent<{
+            data: ChartTabularData;
+            options: import("@carbon/charts").ChartOptions;
+        }>;
+        destroy: CustomEvent<null>;
     } & {
         [evt: string]: CustomEvent<any>;
     };

package/dist/LineChart.svelte.d.ts

@@ -9,9 +9,12 @@ declare const __propDef: {
         ref?: HTMLDivElement | null;
     };
     events: {
-        load: CustomEvent<any>;
-        update: CustomEvent<any>;
-        destroy: CustomEvent<any>;
+        load: CustomEvent<null>;
+        update: CustomEvent<{
+            data: ChartTabularData;
+            options: import("@carbon/charts").ChartOptions;
+        }>;
+        destroy: CustomEvent<null>;
     } & {
         [evt: string]: CustomEvent<any>;
     };

package/dist/LollipopChart.svelte.d.ts

@@ -9,9 +9,12 @@ declare const __propDef: {
         ref?: HTMLDivElement | null;
     };
     events: {
-        load: CustomEvent<any>;
-        update: CustomEvent<any>;
-        destroy: CustomEvent<any>;
+        load: CustomEvent<null>;
+        update: CustomEvent<{
+            data: ChartTabularData;
+            options: import("@carbon/charts").ChartOptions;
+        }>;
+        destroy: CustomEvent<null>;
     } & {
         [evt: string]: CustomEvent<any>;
     };

package/dist/MeterChart.svelte.d.ts

@@ -9,9 +9,12 @@ declare const __propDef: {
         ref?: HTMLDivElement | null;
     };
     events: {
-        load: CustomEvent<any>;
-        update: CustomEvent<any>;
-        destroy: CustomEvent<any>;
+        load: CustomEvent<null>;
+        update: CustomEvent<{
+            data: ChartTabularData;
+            options: import("@carbon/charts").ChartOptions;
+        }>;
+        destroy: CustomEvent<null>;
     } & {
         [evt: string]: CustomEvent<any>;
     };

package/dist/PieChart.svelte.d.ts

@@ -9,9 +9,12 @@ declare const __propDef: {
         ref?: HTMLDivElement | null;
     };
     events: {
-        load: CustomEvent<any>;
-        update: CustomEvent<any>;
-        destroy: CustomEvent<any>;
+        load: CustomEvent<null>;
+        update: CustomEvent<{
+            data: ChartTabularData;
+            options: import("@carbon/charts").ChartOptions;
+        }>;
+        destroy: CustomEvent<null>;
     } & {
         [evt: string]: CustomEvent<any>;
     };

package/dist/RadarChart.svelte.d.ts

@@ -9,9 +9,12 @@ declare const __propDef: {
         ref?: HTMLDivElement | null;
     };
     events: {
-        load: CustomEvent<any>;
-        update: CustomEvent<any>;
-        destroy: CustomEvent<any>;
+        load: CustomEvent<null>;
+        update: CustomEvent<{
+            data: ChartTabularData;
+            options: import("@carbon/charts").ChartOptions;
+        }>;
+        destroy: CustomEvent<null>;
     } & {
         [evt: string]: CustomEvent<any>;
     };

package/dist/ScatterChart.svelte.d.ts

@@ -9,9 +9,12 @@ declare const __propDef: {
         ref?: HTMLDivElement | null;
     };
     events: {
-        load: CustomEvent<any>;
-        update: CustomEvent<any>;
-        destroy: CustomEvent<any>;
+        load: CustomEvent<null>;
+        update: CustomEvent<{
+            data: ChartTabularData;
+            options: import("@carbon/charts").ChartOptions;
+        }>;
+        destroy: CustomEvent<null>;
     } & {
         [evt: string]: CustomEvent<any>;
     };

package/dist/StackedAreaChart.svelte.d.ts

@@ -9,9 +9,12 @@ declare const __propDef: {
         ref?: HTMLDivElement | null;
     };
     events: {
-        load: CustomEvent<any>;
-        update: CustomEvent<any>;
-        destroy: CustomEvent<any>;
+        load: CustomEvent<null>;
+        update: CustomEvent<{
+            data: ChartTabularData;
+            options: import("@carbon/charts").ChartOptions;
+        }>;
+        destroy: CustomEvent<null>;
     } & {
         [evt: string]: CustomEvent<any>;
     };

package/dist/TreeChart.svelte.d.ts

@@ -9,9 +9,12 @@ declare const __propDef: {
         ref?: HTMLDivElement | null;
     };
     events: {
-        load: CustomEvent<any>;
-        update: CustomEvent<any>;
-        destroy: CustomEvent<any>;
+        load: CustomEvent<null>;
+        update: CustomEvent<{
+            data: ChartTabularData;
+            options: import("@carbon/charts").ChartOptions;
+        }>;
+        destroy: CustomEvent<null>;
     } & {
         [evt: string]: CustomEvent<any>;
     };

package/dist/TreemapChart.svelte.d.ts

@@ -9,9 +9,12 @@ declare const __propDef: {
         ref?: HTMLDivElement | null;
     };
     events: {
-        load: CustomEvent<any>;
-        update: CustomEvent<any>;
-        destroy: CustomEvent<any>;
+        load: CustomEvent<null>;
+        update: CustomEvent<{
+            data: ChartTabularData;
+            options: import("@carbon/charts").ChartOptions;
+        }>;
+        destroy: CustomEvent<null>;
     } & {
         [evt: string]: CustomEvent<any>;
     };

package/dist/WordCloudChart.svelte.d.ts

@@ -9,9 +9,12 @@ declare const __propDef: {
         ref?: HTMLDivElement | null;
     };
     events: {
-        load: CustomEvent<any>;
-        update: CustomEvent<any>;
-        destroy: CustomEvent<any>;
+        load: CustomEvent<null>;
+        update: CustomEvent<{
+            data: ChartTabularData;
+            options: import("@carbon/charts").ChartOptions;
+        }>;
+        destroy: CustomEvent<null>;
     } & {
         [evt: string]: CustomEvent<any>;
     };

package/package.json

@@ -1,6 +1,6 @@
 {
 	"name": "@carbon/charts-svelte",
-	"version": "1.13.10",
+	"version": "1.13.11",
 	"description": "Carbon Charts component library for Svelte",
 	"scripts": {
 		"postinstall": "carbon-telemetry collect --install",
@@ -42,7 +42,7 @@
 		"svelte": "^3.31.0 || ^4.0.0"
 	},
 	"dependencies": {
-		"@carbon/charts": "1.13.10",
+		"@carbon/charts": "1.13.11",
 		"@carbon/telemetry": "~0.1.0"
 	},
 	"devDependencies": {
@@ -119,5 +119,5 @@
 		"data",
 		"typescript"
 	],
-	"gitHead": "b9a0536ba2cdcd7f1c23473e4275c17fd40e7cd8"
+	"gitHead": "0ecc194fbb9bd83cd27e63d4f454f8912c3f051c"
 }