@carbon/charts-svelte 1.7.6 → 1.9.0-next.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

@@ -1,10 +1,6 @@
-# Notice
+# Carbon Charts Svelte
 
-### This version relies on **Carbon v11**. If you're using Carbon v10, [see the legacy demo site](https://carbon-charts-0x.netlify.app)
-
-## `@carbon/charts-svelte`
-
-> Carbon Charting Svelte Wrappers
+Carbon Charts Svelte is a thin Svelte wrapper around the vanilla JavScript `@carbon/charts` component library. The charts are based on D3.js, a peer dependency. Documentation is provided below and in the Storybook demos.
 
 **[Storybook demos](https://carbon-design-system.github.io/carbon-charts/svelte)**
 
@@ -12,124 +8,78 @@
 
 ## Maintenance & support
 
-These Svelte wrappers have been developed by Eric Liu.
+These Svelte wrappers were 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
 
 Run the following command using [npm](https://www.npmjs.com/):
 
 ```bash
-npm install -D @carbon/charts-svelte d3
+npm install -D @carbon/charts-svelte @carbon/styles 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
+yarn add -D @carbon/charts-svelte @carbon/styles d3
 ```
 
-**Note:** you'd also need to install `carbon-components` if you're not using a
-bundled version of the library.
-
-## Set-up
+## Setup
 
-This is an overview of using Carbon Charts with common Svelte set-ups.
+This is an overview of using Carbon Charts with common Svelte setups.
 
--   [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.
+Modules `@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 +90,64 @@ 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`.
+Styles must be imported from both `@carbon/charts-svelte` and `@carbon/styles`.
 
 ```js
-import '@carbon/styles/css/styles.css';
-import '@carbon/charts/styles.css';
+import '@carbon/styles/css/styles.css'
+import '@carbon/charts-svelte/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-svelte/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.
+[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.
 
 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 +163,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,109 +178,98 @@ 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-svelte/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-svelte/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
+## 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,
-[see our demo examples here](https://github.com/carbon-design-system/carbon-charts/tree/master/packages/core/demo/data).
+There are 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
 [here](https://carbon-design-system.github.io/carbon-charts/documentation/modules/_interfaces_charts_.html)
@@ -383,5 +277,3 @@ 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.
-
-TypeScript definitions are located in the [types folder](types/).

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, AlluvialChartOptions, 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, AreaChartOptions, 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 />