@carbon/charts-svelte 1.13.8 → 1.13.11

package/CHANGELOG.md

@@ -3,6 +3,37 @@
 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
+
+# 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.9 (2023-12-06)
+
+**Note:** Version bump only for package @carbon/charts-svelte
+
+# 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.8 (2023-11-15)
 
 **Note:** Version bump only for package @carbon/charts-svelte

package/README.md

@@ -54,7 +54,7 @@ You may see circular dependency warnings for `d3` packages. These can be safely
 
 ## Usage
 
-Styles must be imported from `@carbon/charts-svelte`.
+Styles must be imported from `@carbon/charts-svelte/styles.css`.
 
 ```js
 import '@carbon/charts-svelte/styles.css'
@@ -87,11 +87,6 @@ import '@carbon/charts-svelte/styles.css'
 	}} />
 ```
 
-### Theming
-
-`@carbon/styles` uses
-[CSS custom properties](https://developer.mozilla.org/en-US/docs/Web/CSS/Using_CSS_custom_properties) for dynamic, client-side theming. Care should be exercised as the styles apply to the HTML body.
-
 ### Dispatched events
 
 Each Svelte chart component dispatches the following events:
@@ -150,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
@@ -160,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
@@ -211,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>;
     };