@carbon/charts-svelte 1.7.6 → 1.9.0-rc.0

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.8.0](https://github.com/carbon-design-system/carbon-charts/compare/v1.7.6...v1.8.0) (2023-06-03)
+
+### Features
+
+- **core:** Add choropleth chart
+  ([#1487](https://github.com/carbon-design-system/carbon-charts/issues/1487))
+  ([62caeb1](https://github.com/carbon-design-system/carbon-charts/commit/62caeb1fd6fab9e2a39d85b024f2d9b97f8bd1fa))
+
+# Change Log
+
+All notable changes to this project will be documented in this file. See
+[Conventional Commits](https://conventionalcommits.org) for commit guidelines.
+
 ## [1.7.6](https://github.com/carbon-design-system/carbon-charts/compare/v1.7.5...v1.7.6) (2023-05-01)
 
 **Note:** Version bump only for package @carbon/charts-svelte
@@ -154,8 +167,7 @@ All notable changes to this project will be documented in this file. See
 - **core:** allow theme to be set via options prop
   ([#1412](https://github.com/carbon-design-system/carbon-charts/issues/1412))
   ([6288548](https://github.com/carbon-design-system/carbon-charts/commit/62885487a700e2222d51f70aea790eddd5d6d086)),
-  closes
-  [#1411](https://github.com/carbon-design-system/carbon-charts/issues/1411)
+  closes [#1411](https://github.com/carbon-design-system/carbon-charts/issues/1411)
 
 ## [1.3.2](https://github.com/carbon-design-system/carbon-charts/compare/v1.3.1...v1.3.2) (2022-06-30)
 
@@ -361,8 +373,7 @@ All notable changes to this project will be documented in this file. See
 
 ### Features
 
-- **svelte:** add TypeScript definitions for Alluvial, Histogram, and Tree
-  charts
+- **svelte:** add TypeScript definitions for Alluvial, Histogram, and Tree charts
   ([#1219](https://github.com/carbon-design-system/carbon-charts/issues/1219))
   ([3e7fcc2](https://github.com/carbon-design-system/carbon-charts/commit/3e7fcc2f16d16d67c4f39f4d4389878b5d829aba))
 
@@ -465,8 +476,7 @@ All notable changes to this project will be documented in this file. See
 - **core:** create alluvial chart
   ([#1132](https://github.com/carbon-design-system/carbon-charts/issues/1132))
   ([08fa194](https://github.com/carbon-design-system/carbon-charts/commit/08fa194f1c59ab2110c0d221886fc0174c936194)),
-  closes
-  [#871](https://github.com/carbon-design-system/carbon-charts/issues/871)
+  closes [#871](https://github.com/carbon-design-system/carbon-charts/issues/871)
 
 ## [0.48.4](https://github.com/carbon-design-system/carbon-charts/compare/v0.48.3...v0.48.4) (2021-09-13)
 

package/README.md

@@ -14,8 +14,8 @@
 
 These Svelte wrappers have been developed by Eric Liu.
 
-Please direct all questions regarding support, bug fixes, and feature requests
-to [@metonym](https://github.com/metonym).
+Please direct all questions regarding support, bug fixes, and feature requests to
+[@metonym](https://github.com/metonym).
 
 ## Getting started
 
@@ -25,111 +25,71 @@ Run the following command using [npm](https://www.npmjs.com/):
 npm install -D @carbon/charts-svelte d3
 ```
 
-If you prefer [Yarn](https://yarnpkg.com/en/), use the following command
-instead:
+If you prefer [Yarn](https://yarnpkg.com/en/), use the following command instead:
 
 ```bash
 yarn add -D @carbon/charts-svelte d3
 ```
 
-**Note:** you'd also need to install `carbon-components` if you're not using a
-bundled version of the library.
+**Note:** you'd also need to install `carbon-components` if you're not using a bundled version of
+the library.
 
 ## Set-up
 
 This is an overview of using Carbon Charts with common Svelte set-ups.
 
--   [SvelteKit](#sveltekit)
--   [Vite](#vite)
--   [Rollup](#rollup)
--   [Webpack](#webpack)
+- [SvelteKit](#sveltekit)
+- [Vite](#vite)
 
 ### SvelteKit
 
-[SvelteKit](https://github.com/sveltejs/kit) is the official framework for
-building apps that support client-side rendering (CSR) and server-side rendering
-(SSR). SvelteKit is powered by [Vite](https://github.com/vitest-dev/vitest).
+[SvelteKit](https://github.com/sveltejs/kit) is the official framework for building apps that
+support client-side rendering (CSR) and server-side rendering (SSR). SvelteKit is powered by
+[Vite](https://github.com/vitest-dev/vitest).
 
-`@carbon/charts` and `carbon-components` should not be externalized for SSR when
-building for production.
+`@carbon/charts` and `carbon-components` should not be externalized for SSR when building for
+production.
 
 ```js
 // vite.config.js
-import { sveltekit } from '@sveltejs/kit/vite';
+import { sveltekit } from '@sveltejs/kit/vite'
 
 /** @type {import('vite').UserConfig} */
-export default {
+const config = {
 	plugins: [sveltekit()],
 	ssr: {
-		noExternal:
-			process.env.NODE_ENV === 'production'
-				? ['@carbon/charts', 'carbon-components']
-				: [],
-	},
-};
+		noExternal: process.env.NODE_ENV === 'production' ? ['@carbon/charts', 'carbon-components'] : []
+	}
+}
+
+export default config
 ```
 
 ### Vite
 
-You can also use Vite without SvelteKit. Instruct `vite` to optimize
-`@carbon/charts` in `vite.config.js`.
+You can also use Vite without SvelteKit. Instruct `vite` to optimize `@carbon/charts` in
+`vite.config.js`.
 
 ```js
 // vite.config.js
-import { svelte } from '@sveltejs/vite-plugin-svelte';
+import { svelte } from '@sveltejs/vite-plugin-svelte'
 
 /** @type {import('vite').UserConfig} */
-export default {
+const config = {
 	plugins: [svelte()],
-	optimizeDeps: { include: ['@carbon/charts'] },
-};
-```
-
-### Rollup
-
-#### ReferenceError: process is not defined
-
-Install and add
-[@rollup/plugin-replace](https://github.com/rollup/plugins/tree/master/packages/replace)
-to the list of plugins in `rollup.config.js` to avoid the
-`process is not defined` runtime error.
-
-This plugin statically replaces strings in bundled files with the specified
-value.
-
-In the example below, all instances of `process.env.NODE_ENV` will be replaced
-with `"production"` while bundling.
-
-```js
-// rollup.config.js
-import replace from '@rollup/plugin-replace';
-
-export default {
-	// ...
-	plugins: [
-		replace({
-			preventAssignment: true,
-			'process.env.NODE_ENV': JSON.stringify('production'),
-		}),
-	],
-};
-```
-
-#### `this` has been rewritten to `undefined`
-
-Set [`context: "window"`](https://rollupjs.org/guide/en/#context) to address the
-`this has been rewritten to undefined` Rollup error.
+	optimizeDeps: {
+		include: ['@carbon/charts', 'carbon-components'],
+		exclude: ['@carbon/telemetry']
+	}
+}
 
-```diff
-export default {
-+  context: "window",
-};
+export default config
 ```
 
 #### Circular dependency warnings
 
-You may see circular dependency warnings for `d3` and `@carbon/charts` packages
-that can be safely ignored.
+You may see circular dependency warnings for `d3` and `@carbon/charts` packages that can be safely
+ignored.
 
 Use the `onwarn` option to selectively ignore these warnings.
 
@@ -140,101 +100,65 @@ export default {
 		// omit circular dependency warnings emitted from
 		// "d3-*" packages and "@carbon/charts"
 		if (warning.code === 'CIRCULAR_DEPENDENCY') {
-			if (
-				warning.ids.some((id) =>
-					/node_modules\/(d3-|@carbon\/charts)/.test(id)
-				)
-			) {
-				return;
+			if (warning.ids.some((id) => /node_modules\/(d3-|@carbon\/charts)/.test(id))) {
+				return
 			}
 		}
 
 		// preserve all other warnings
-		warn(warning);
-	},
-};
-```
-
-#### Code-splitting
-
-If using [dynamic imports](https://rollupjs.org/guide/en/#dynamic-import), use
-`type="module"` alongside `output.dir` for code-splitting.
-
-```diff
-# index.html
-- <script src="build/bundle.js"></script>
-+ <script type="module" src="build/index.js"></script>
-```
-
-```diff
-# rollup.config.js
-export default {
-  output: {
--   format: "iife",
--   file: "public/build/bundle.js",
-+   dir: "public/build",
-  }
+		warn(warning)
+	}
 }
 ```
 
-### Webpack
-
-[Webpack](https://github.com/webpack/webpack) is another popular application
-bundler used to build Svelte apps.
-
-No additional configuration should be necessary.
-
 ## Usage
 
 Styles must be imported from both `@carbon/charts` and `@carbon/styles`.
 
 ```js
-import '@carbon/styles/css/styles.css';
-import '@carbon/charts/styles.css';
+import '@carbon/styles/css/styles.css'
+import '@carbon/charts/styles.css'
 ```
 
 ### Basic
 
 ```svelte
 <script>
-  import "@carbon/styles/css/styles.css";
-  import "@carbon/charts/styles.css";
-  import { BarChartSimple } from "@carbon/charts-svelte";
+	import '@carbon/styles/css/styles.css'
+	import '@carbon/charts/styles.css'
+	import { BarChartSimple } from '@carbon/charts-svelte'
 </script>
 
 <BarChartSimple
-  data={[
-    { group: "Qty", value: 65000 },
-    { group: "More", value: 29123 },
-    { group: "Sold", value: 35213 },
-    { group: "Restocking", value: 51213 },
-    { group: "Misc", value: 16932 },
-  ]}
-  options={{
-    title: "Simple bar (discrete)",
-    height: "400px",
-    axes: {
-      left: { mapsTo: "value" },
-      bottom: { mapsTo: "group", scaleType: "labels" },
-    },
-  }}
-/>
-
+	data={[
+		{ group: 'Qty', value: 65000 },
+		{ group: 'More', value: 29123 },
+		{ group: 'Sold', value: 35213 },
+		{ group: 'Restocking', value: 51213 },
+		{ group: 'Misc', value: 16932 }
+	]}
+	options={{
+		title: 'Simple bar (discrete)',
+		height: '400px',
+		axes: {
+			left: { mapsTo: 'value' },
+			bottom: { mapsTo: 'group', scaleType: 'labels' }
+		}
+	}} />
 ```
 
 ### 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. Update the Carbon theme using the `theme`
-prop.
+for dynamic, client-side theming. Update the Carbon theme using the `theme` prop.
 
 Supported themes include:
 
--   `"white"`
--   `"g10"` (Gray 10)
--   `"g90"` (Gray 90)
--   `"g100"` (Gray 100)
+- `"white"`
+- `"g10"` (Gray 10)
+- `"g90"` (Gray 90)
+- `"g100"` (Gray 100)
 
 The default theme is `"white"`.
 
@@ -250,20 +174,12 @@ The default theme is `"white"`.
 
 Each Svelte chart component dispatches the following events:
 
--   **on:load**: fired when the chart is instantiated
--   **on:update**: fired when `data` or `options` are updated
--   **on:destroy**: fired when the component is unmounted and the chart is
-    destroyed
+- **on:load**: fired when the chart is instantiated
+- **on:update**: fired when `data` or `options` are updated
+- **on:destroy**: fired when the component is unmounted and the chart is destroyed
 
 ```svelte
-<BarChartSimple
-  {data}
-  {options}
-  on:load
-  on:update
-  on:destroy
-/>
-
+<BarChartSimple {data} {options} on:load on:update on:destroy />
 ```
 
 ### Dynamic import
@@ -273,108 +189,103 @@ Dynamically import a chart and instantiate it using the
 
 ```svelte
 <script>
-  import "@carbon/styles/css/styles.css";
-  import "@carbon/charts/styles.css";
-  import { onMount } from "svelte";
+	import '@carbon/styles/css/styles.css'
+	import '@carbon/charts/styles.css'
+	import { onMount } from 'svelte'
 
-  let chart;
+	let chart
 
-  onMount(async () => {
-    const charts = await import("@carbon/charts-svelte");
-    chart = charts.BarChartSimple;
-  });
+	onMount(async () => {
+		const charts = await import('@carbon/charts-svelte')
+		chart = charts.BarChartSimple
+	})
 </script>
 
 <svelte:component
-  this={chart}
-  data={[
-    { group: "Qty", value: 65000 },
-    { group: "More", value: 29123 },
-    { group: "Sold", value: 35213 },
-    { group: "Restocking", value: 51213 },
-    { group: "Misc", value: 16932 },
-  ]}
-  options={{
-    title: "Simple bar (discrete)",
-    height: "400px",
-    axes: {
-      left: { mapsTo: "value" },
-      bottom: { mapsTo: "group", scaleType: "labels" },
-    },
-  }}
-/>
-
+	this={chart}
+	data={[
+		{ group: 'Qty', value: 65000 },
+		{ group: 'More', value: 29123 },
+		{ group: 'Sold', value: 35213 },
+		{ group: 'Restocking', value: 51213 },
+		{ group: 'Misc', value: 16932 }
+	]}
+	options={{
+		title: 'Simple bar (discrete)',
+		height: '400px',
+		axes: {
+			left: { mapsTo: 'value' },
+			bottom: { mapsTo: 'group', scaleType: 'labels' }
+		}
+	}} />
 ```
 
 ### Event listeners
 
-In this example, an event listener is attached to the `BarChartSimple` component
-that fires when hovering over a bar.
+In this example, an event listener is attached to the `BarChartSimple` component that fires when
+hovering over a bar.
 
 ```svelte
 <script>
-  import "@carbon/styles/css/styles.css";
-  import "@carbon/charts/styles.css";
-  import { onMount } from "svelte";
-  import { BarChartSimple } from "@carbon/charts-svelte";
+	import '@carbon/styles/css/styles.css'
+	import '@carbon/charts/styles.css'
+	import { onMount } from 'svelte'
+	import { BarChartSimple } from '@carbon/charts-svelte'
 
-  let chart;
+	let chart
 
-  function barMouseOver(e) {
-    console.log(e.detail);
-  }
+	function barMouseOver(e) {
+		console.log(e.detail)
+	}
 
-  onMount(() => {
-    return () => {
-      if (chart) chart.services.events.removeEventListener("bar-mouseover", barMouseOver);
-    };
-  });
+	onMount(() => {
+		return () => {
+			if (chart) chart.services.events.removeEventListener('bar-mouseover', barMouseOver)
+		}
+	})
 
-  $: if (chart) chart.services.events.addEventListener("bar-mouseover", barMouseOver);
+	$: if (chart) chart.services.events.addEventListener('bar-mouseover', barMouseOver)
 </script>
 
 <BarChartSimple
-  bind:chart
-  data={[
-    { group: "Qty", value: 65000 },
-    { group: "More", value: 29123 },
-    { group: "Sold", value: 35213 },
-    { group: "Restocking", value: 51213 },
-    { group: "Misc", value: 16932 },
-  ]}
-  options={{
-    title: "Simple bar (discrete)",
-    height: "400px",
-    axes: {
-      left: { mapsTo: "value" },
-      bottom: { mapsTo: "group", scaleType: "labels" },
-    },
-  }}
-/>
-
+	bind:chart
+	data={[
+		{ group: 'Qty', value: 65000 },
+		{ group: 'More', value: 29123 },
+		{ group: 'Sold', value: 35213 },
+		{ group: 'Restocking', value: 51213 },
+		{ group: 'Misc', value: 16932 }
+	]}
+	options={{
+		title: 'Simple bar (discrete)',
+		height: '400px',
+		axes: {
+			left: { mapsTo: 'value' },
+			bottom: { mapsTo: 'group', scaleType: 'labels' }
+		}
+	}} />
 ```
 
 ## Codesandbox examples
 
 [Sample use cases can be seen here](https://carbon-design-system.github.io/carbon-charts/svelte).
 
-**When opening the link above**, click on the **Edit on Codesandbox** button for
-each demo to see an isolated project showing you how to reproduce the demo.
+**When opening the link above**, click on the **Edit on Codesandbox** button for each demo to see an
+isolated project showing you how to reproduce the demo.
 
 ## Charting data & options
 
-Although we will definitely introduce new models in the future as we start
-shipping new components such as maps, Data and options follow the same model in
-all charts, with minor exceptions and differences in specific components.
+Although we will definitely introduce new models in the future as we start shipping new components
+such as maps, Data and options follow the same model in all charts, with minor exceptions and
+differences in specific components.
 
-For instance in the case of a donut chart you're able to pass in an additional
-field called `center` in your options configuring the donut center.
+For instance in the case of a donut chart you're able to pass in an additional field called `center`
+in your options configuring the donut center.
 
 For instructions on using the **tabular data format**, see
 [here](https://carbon-design-system.github.io/carbon-charts/?path=/story/docs-tutorials--tabular-data-format)
 
-There are also additional options available depending on the chart type being
-used,
+There are also additional options available depending on the chart type being used,
 [see our demo examples here](https://github.com/carbon-design-system/carbon-charts/tree/master/packages/core/demo/data).
 
 Customizable options (specific to chart type) can be found

package/dist/AlluvialChart.svelte

@@ -0,0 +1,20 @@
+<script>import {
+  AlluvialChart as AlluvialChartCore
+} from "@carbon/charts";
+import BaseChart from "./BaseChart.svelte";
+export let chart;
+export let options;
+export let data;
+export let ref;
+</script>
+
+<BaseChart
+	{...$$restProps}
+	Chart={AlluvialChartCore}
+	{options}
+	{data}
+	bind:ref
+	bind:chart
+	on:load
+	on:update
+	on:destroy />

package/dist/AlluvialChart.svelte.d.ts

@@ -0,0 +1,25 @@
+import { SvelteComponentTyped } from "svelte";
+import { AlluvialChart as AlluvialChartCore, type AlluvialChartOptions, type ChartTabularData } from '@carbon/charts';
+declare const __propDef: {
+    props: {
+        [x: string]: any;
+        chart: AlluvialChartCore;
+        options: AlluvialChartOptions;
+        data: ChartTabularData;
+        ref: HTMLDivElement;
+    };
+    events: {
+        load: CustomEvent<any>;
+        update: CustomEvent<any>;
+        destroy: CustomEvent<any>;
+    } & {
+        [evt: string]: CustomEvent<any>;
+    };
+    slots: {};
+};
+export type AlluvialChartProps = typeof __propDef.props;
+export type AlluvialChartEvents = typeof __propDef.events;
+export type AlluvialChartSlots = typeof __propDef.slots;
+export default class AlluvialChart extends SvelteComponentTyped<AlluvialChartProps, AlluvialChartEvents, AlluvialChartSlots> {
+}
+export {};

package/dist/AreaChart.svelte

@@ -0,0 +1,20 @@
+<script>import {
+  AreaChart as AreaChartCore
+} from "@carbon/charts";
+import BaseChart from "./BaseChart.svelte";
+export let chart;
+export let options;
+export let data;
+export let ref;
+</script>
+
+<BaseChart
+	{...$$restProps}
+	Chart={AreaChartCore}
+	{options}
+	{data}
+	bind:ref
+	bind:chart
+	on:load
+	on:update
+	on:destroy />

package/dist/AreaChart.svelte.d.ts

@@ -0,0 +1,25 @@
+import { SvelteComponentTyped } from "svelte";
+import { AreaChart as AreaChartCore, type AreaChartOptions, type ChartTabularData } from '@carbon/charts';
+declare const __propDef: {
+    props: {
+        [x: string]: any;
+        chart: AreaChartCore;
+        options: AreaChartOptions;
+        data: ChartTabularData;
+        ref: HTMLDivElement;
+    };
+    events: {
+        load: CustomEvent<any>;
+        update: CustomEvent<any>;
+        destroy: CustomEvent<any>;
+    } & {
+        [evt: string]: CustomEvent<any>;
+    };
+    slots: {};
+};
+export type AreaChartProps = typeof __propDef.props;
+export type AreaChartEvents = typeof __propDef.events;
+export type AreaChartSlots = typeof __propDef.slots;
+export default class AreaChart extends SvelteComponentTyped<AreaChartProps, AreaChartEvents, AreaChartSlots> {
+}
+export {};

package/dist/BarChartGrouped.svelte

@@ -0,0 +1,20 @@
+<script>import {
+  GroupedBarChart as GroupedBarChartCore
+} from "@carbon/charts";
+import BaseChart from "./BaseChart.svelte";
+export let chart;
+export let options;
+export let data;
+export let ref;
+</script>
+
+<BaseChart
+	{...$$restProps}
+	Chart={GroupedBarChartCore}
+	{options}
+	{data}
+	bind:ref
+	bind:chart
+	on:load
+	on:update
+	on:destroy />

package/dist/BarChartGrouped.svelte.d.ts

@@ -0,0 +1,25 @@
+import { SvelteComponentTyped } from "svelte";
+import { GroupedBarChart as GroupedBarChartCore, type BarChartOptions, type ChartTabularData } from '@carbon/charts';
+declare const __propDef: {
+    props: {
+        [x: string]: any;
+        chart: GroupedBarChartCore;
+        options: BarChartOptions;
+        data: ChartTabularData;
+        ref: HTMLDivElement;
+    };
+    events: {
+        load: CustomEvent<any>;
+        update: CustomEvent<any>;
+        destroy: CustomEvent<any>;
+    } & {
+        [evt: string]: CustomEvent<any>;
+    };
+    slots: {};
+};
+export type BarChartGroupedProps = typeof __propDef.props;
+export type BarChartGroupedEvents = typeof __propDef.events;
+export type BarChartGroupedSlots = typeof __propDef.slots;
+export default class BarChartGrouped extends SvelteComponentTyped<BarChartGroupedProps, BarChartGroupedEvents, BarChartGroupedSlots> {
+}
+export {};