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

This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.
package/CHANGELOG.md CHANGED
@@ -3,6 +3,37 @@
3
3
  All notable changes to this project will be documented in this file. See
4
4
  [Conventional Commits](https://conventionalcommits.org) for commit guidelines.
5
5
 
6
+ ## [1.10.1](https://github.com/carbon-design-system/carbon-charts/compare/v1.10.0...v1.10.1) (2023-06-26)
7
+
8
+ ### Bug Fixes
9
+
10
+ - **package.json:** missing devDependencies for storybook
11
+ ([#1580](https://github.com/carbon-design-system/carbon-charts/issues/1580))
12
+ ([e208fcc](https://github.com/carbon-design-system/carbon-charts/commit/e208fcc77f2adee30800356f974e7f6d0a5103e1))
13
+
14
+ # Change Log
15
+
16
+ All notable changes to this project will be documented in this file. See
17
+ [Conventional Commits](https://conventionalcommits.org) for commit guidelines.
18
+
19
+ # [1.10.0](https://github.com/carbon-design-system/carbon-charts/compare/v1.9.0...v1.10.0) (2023-06-26)
20
+
21
+ **Note:** Version bump only for package @carbon/charts-svelte
22
+
23
+ # Change Log
24
+
25
+ All notable changes to this project will be documented in this file. See
26
+ [Conventional Commits](https://conventionalcommits.org) for commit guidelines.
27
+
28
+ # [1.9.0](https://github.com/carbon-design-system/carbon-charts/compare/v1.8.0...v1.9.0) (2023-06-26)
29
+
30
+ **Note:** Version bump only for package @carbon/charts-svelte
31
+
32
+ # Change Log
33
+
34
+ All notable changes to this project will be documented in this file. See
35
+ [Conventional Commits](https://conventionalcommits.org) for commit guidelines.
36
+
6
37
  # [1.8.0](https://github.com/carbon-design-system/carbon-charts/compare/v1.7.6...v1.8.0) (2023-06-03)
7
38
 
8
39
  ### Features
package/README.md CHANGED
@@ -1,10 +1,6 @@
1
- # Notice
1
+ # Carbon Charts Svelte
2
2
 
3
- ### This version relies on **Carbon v11**. If you're using Carbon v10, [see the legacy demo site](https://carbon-charts-0x.netlify.app)
4
-
5
- ## `@carbon/charts-svelte`
6
-
7
- > Carbon Charting Svelte Wrappers
3
+ 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.
8
4
 
9
5
  **[Storybook demos](https://carbon-design-system.github.io/carbon-charts/svelte)**
10
6
 
@@ -12,31 +8,27 @@
12
8
 
13
9
  ## Maintenance & support
14
10
 
15
- These Svelte wrappers have been developed by Eric Liu.
11
+ These Svelte wrappers were developed by Eric Liu.
16
12
 
17
- Please direct all questions regarding support, bug fixes, and feature requests to
18
- [@metonym](https://github.com/metonym).
13
+ Please direct all questions regarding support, bug fixes, and feature requests to [@metonym](https://github.com/metonym).
19
14
 
20
15
  ## Getting started
21
16
 
22
17
  Run the following command using [npm](https://www.npmjs.com/):
23
18
 
24
19
  ```bash
25
- npm install -D @carbon/charts-svelte d3
20
+ npm install -D @carbon/charts-svelte @carbon/styles d3 d3-cloud d3-sankey
26
21
  ```
27
22
 
28
23
  If you prefer [Yarn](https://yarnpkg.com/en/), use the following command instead:
29
24
 
30
25
  ```bash
31
- yarn add -D @carbon/charts-svelte d3
26
+ yarn add -D @carbon/charts-svelte @carbon/styles d3 d3-cloud d3-sankey
32
27
  ```
33
28
 
34
- **Note:** you'd also need to install `carbon-components` if you're not using a bundled version of
35
- the library.
29
+ ## Setup
36
30
 
37
- ## Set-up
38
-
39
- This is an overview of using Carbon Charts with common Svelte set-ups.
31
+ This is an overview of using Carbon Charts with common Svelte setups.
40
32
 
41
33
  - [SvelteKit](#sveltekit)
42
34
  - [Vite](#vite)
@@ -47,8 +39,7 @@ This is an overview of using Carbon Charts with common Svelte set-ups.
47
39
  support client-side rendering (CSR) and server-side rendering (SSR). SvelteKit is powered by
48
40
  [Vite](https://github.com/vitest-dev/vitest).
49
41
 
50
- `@carbon/charts` and `carbon-components` should not be externalized for SSR when building for
51
- production.
42
+ Modules `@carbon/charts` and `carbon-components` should not be externalized for SSR when building for production.
52
43
 
53
44
  ```js
54
45
  // vite.config.js
@@ -88,8 +79,7 @@ export default config
88
79
 
89
80
  #### Circular dependency warnings
90
81
 
91
- You may see circular dependency warnings for `d3` and `@carbon/charts` packages that can be safely
92
- ignored.
82
+ You may see circular dependency warnings for `d3` and `@carbon/charts` packages that can be safely ignored.
93
83
 
94
84
  Use the `onwarn` option to selectively ignore these warnings.
95
85
 
@@ -113,11 +103,11 @@ export default {
113
103
 
114
104
  ## Usage
115
105
 
116
- Styles must be imported from both `@carbon/charts` and `@carbon/styles`.
106
+ Styles must be imported from both `@carbon/charts-svelte` and `@carbon/styles`.
117
107
 
118
108
  ```js
119
109
  import '@carbon/styles/css/styles.css'
120
- import '@carbon/charts/styles.css'
110
+ import '@carbon/charts-svelte/styles.css'
121
111
  ```
122
112
 
123
113
  ### Basic
@@ -125,7 +115,7 @@ import '@carbon/charts/styles.css'
125
115
  ```svelte
126
116
  <script>
127
117
  import '@carbon/styles/css/styles.css'
128
- import '@carbon/charts/styles.css'
118
+ import '@carbon/charts-svelte/styles.css'
129
119
  import { BarChartSimple } from '@carbon/charts-svelte'
130
120
  </script>
131
121
 
@@ -150,8 +140,7 @@ import '@carbon/charts/styles.css'
150
140
  ### Theming
151
141
 
152
142
  `@carbon/styles` uses
153
- [CSS custom properties](https://developer.mozilla.org/en-US/docs/Web/CSS/Using_CSS_custom_properties)
154
- for dynamic, client-side theming. Update the Carbon theme using the `theme` prop.
143
+ [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.
155
144
 
156
145
  Supported themes include:
157
146
 
@@ -190,7 +179,7 @@ Dynamically import a chart and instantiate it using the
190
179
  ```svelte
191
180
  <script>
192
181
  import '@carbon/styles/css/styles.css'
193
- import '@carbon/charts/styles.css'
182
+ import '@carbon/charts-svelte/styles.css'
194
183
  import { onMount } from 'svelte'
195
184
 
196
185
  let chart
@@ -222,13 +211,12 @@ Dynamically import a chart and instantiate it using the
222
211
 
223
212
  ### Event listeners
224
213
 
225
- In this example, an event listener is attached to the `BarChartSimple` component that fires when
226
- hovering over a bar.
214
+ In this example, an event listener is attached to the `BarChartSimple` component that fires when hovering over a bar.
227
215
 
228
216
  ```svelte
229
217
  <script>
230
218
  import '@carbon/styles/css/styles.css'
231
- import '@carbon/charts/styles.css'
219
+ import '@carbon/charts-svelte/styles.css'
232
220
  import { onMount } from 'svelte'
233
221
  import { BarChartSimple } from '@carbon/charts-svelte'
234
222
 
@@ -266,27 +254,22 @@ hovering over a bar.
266
254
  }} />
267
255
  ```
268
256
 
269
- ## Codesandbox examples
257
+ ## CodeSandbox examples
270
258
 
271
259
  [Sample use cases can be seen here](https://carbon-design-system.github.io/carbon-charts/svelte).
272
260
 
273
- **When opening the link above**, click on the **Edit on Codesandbox** button for each demo to see an
274
- isolated project showing you how to reproduce the demo.
261
+ **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.
275
262
 
276
263
  ## Charting data & options
277
264
 
278
- Although we will definitely introduce new models in the future as we start shipping new components
279
- such as maps, Data and options follow the same model in all charts, with minor exceptions and
280
- differences in specific components.
265
+ 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.
281
266
 
282
- For instance in the case of a donut chart you're able to pass in an additional field called `center`
283
- in your options configuring the donut center.
267
+ 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.
284
268
 
285
269
  For instructions on using the **tabular data format**, see
286
270
  [here](https://carbon-design-system.github.io/carbon-charts/?path=/story/docs-tutorials--tabular-data-format)
287
271
 
288
- There are also additional options available depending on the chart type being used,
289
- [see our demo examples here](https://github.com/carbon-design-system/carbon-charts/tree/master/packages/core/demo/data).
272
+ 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).
290
273
 
291
274
  Customizable options (specific to chart type) can be found
292
275
  [here](https://carbon-design-system.github.io/carbon-charts/documentation/modules/_interfaces_charts_.html)
@@ -294,5 +277,3 @@ Customizable options (specific to chart type) can be found
294
277
  ## TypeScript support
295
278
 
296
279
  Svelte version 3.31 or greater is required to use this library with TypeScript.
297
-
298
- TypeScript definitions are located in the [types folder](types/).