@carbon/charts-react 1.16.10 → 1.17.0
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/README.md +3 -31
- package/dist/index.mjs +1 -7
- package/dist/index.mjs.map +1 -1
- package/dist/index.umd.cjs +1 -1
- package/dist/index.umd.cjs.map +1 -1
- package/dist/index.umd.js +119 -0
- package/dist/main.d.ts +0 -0
- package/package.json +15 -21
- package/dist/stories/1-charts.stories.d.ts +0 -1
- package/dist/stories/2a-diagrams-start-here.stories.d.ts +0 -1
- package/dist/stories/2b-diagrams-cards.stories.d.ts +0 -1
- /package/dist/{stories/0-docs-getting-started-welcome.stories.d.ts → all.test.d.ts} +0 -0
package/README.md
CHANGED
|
@@ -1,14 +1,9 @@
|
|
|
1
1
|
# Carbon Charts React
|
|
2
2
|
|
|
3
3
|
Carbon Charts React is a thin React wrapper around the vanilla JavaScript `@carbon/charts` component
|
|
4
|
-
library.
|
|
4
|
+
library.
|
|
5
5
|
|
|
6
|
-
|
|
7
|
-
documentation is provided in the Storybook demos.
|
|
8
|
-
|
|
9
|
-
**[Storybook demos](https://charts.carbondesignsystem.com/react)**
|
|
10
|
-
|
|
11
|
-
**[Storybook demo sources](https://github.com/carbon-design-system/carbon-charts/tree/master/packages/core/demo/data)**
|
|
6
|
+
**[Documentation with StackBlitz examples](https://charts.carbondesignsystem.com/)**
|
|
12
7
|
|
|
13
8
|
## Getting started
|
|
14
9
|
|
|
@@ -24,30 +19,7 @@ If you prefer [Yarn](https://yarnpkg.com/en/), use the following command instead
|
|
|
24
19
|
yarn add @carbon/charts-react
|
|
25
20
|
```
|
|
26
21
|
|
|
27
|
-
|
|
28
|
-
|
|
29
|
-
Read
|
|
30
|
-
[Getting Started](https://charts.carbondesignsystem.com/?path=/docs/docs-getting-started-react--docs)
|
|
31
|
-
|
|
32
|
-
## Storybook and StackBlitz Examples
|
|
33
|
-
|
|
34
|
-
[Sample use cases can be seen here](https://charts.carbondesignsystem.com/react).
|
|
35
|
-
|
|
36
|
-
**When opening the link above**, click on the **Edit on StackBlitz** button for each demo to see an
|
|
37
|
-
isolated project showing you how to reproduce the demo.
|
|
38
|
-
|
|
39
|
-
## Charting data & options
|
|
40
|
-
|
|
41
|
-
Although new charts will be introduced in the future (such as a choropleth), data and options follow
|
|
42
|
-
the same model for all charts with minor exceptions. For example, in the case of a donut chart,
|
|
43
|
-
you're able to pass in an additional field called `center` in your options to configure the donut
|
|
44
|
-
center.
|
|
45
|
-
|
|
46
|
-
For instructions on using the **tabular data format**, see
|
|
47
|
-
[here](https://charts.carbondesignsystem.com/react/?path=/docs/docs-tutorials-tabular-data-format--docs)
|
|
48
|
-
|
|
49
|
-
Customizable options (specific to chart type) can be found
|
|
50
|
-
[here](https://charts.carbondesignsystem.com/documentation/modules/interfaces.html)
|
|
22
|
+
The required styles should be imported from `@carbon/charts-react/dist/styles.css`.
|
|
51
23
|
|
|
52
24
|
## <picture><source height="20" width="20" media="(prefers-color-scheme: dark)" srcset="https://raw.githubusercontent.com/ibm-telemetry/telemetry-js/main/docs/images/ibm-telemetry-dark.svg"><source height="20" width="20" media="(prefers-color-scheme: light)" srcset="https://raw.githubusercontent.com/ibm-telemetry/telemetry-js/main/docs/images/ibm-telemetry-light.svg"><img height="20" width="20" alt="IBM Telemetry" src="https://raw.githubusercontent.com/ibm-telemetry/telemetry-js/main/docs/images/ibm-telemetry-light.svg"></picture> IBM Telemetry
|
|
53
25
|
|
package/dist/index.mjs
CHANGED
|
@@ -4646,7 +4646,7 @@ function Wt(e, t) {
|
|
|
4646
4646
|
if (i.includes(a)) {
|
|
4647
4647
|
const s = t.axes[a];
|
|
4648
4648
|
if ((s.primary || s.secondary) && console.warn(
|
|
4649
|
-
"`primary` & `secondary` are no longer needed for axis configurations. Read more here https://charts.carbondesignsystem.com
|
|
4649
|
+
"`primary` & `secondary` are no longer needed for axis configurations. Read more here https://charts.carbondesignsystem.com/"
|
|
4650
4650
|
), s.mapsTo == null) {
|
|
4651
4651
|
const l = s.scaleType;
|
|
4652
4652
|
l == null ? s.mapsTo = "value" : l === et.TIME ? s.mapsTo = "date" : l === et.LABELS && (s.mapsTo = "key");
|
|
@@ -15495,9 +15495,6 @@ class Qn extends bt {
|
|
|
15495
15495
|
formatTooltipData(t) {
|
|
15496
15496
|
return t;
|
|
15497
15497
|
}
|
|
15498
|
-
// eslint-disable-next-line @typescript-eslint/ban-ts-comment
|
|
15499
|
-
// @ts-ignore
|
|
15500
|
-
// eslint-disable-next-line @typescript-eslint/no-unused-vars
|
|
15501
15498
|
showRuler(t, [n, r]) {
|
|
15502
15499
|
const i = this.parent, a = this.services.cartesianScales.getOrientation(), s = this.model.getDisplayData(), o = this.services.cartesianScales.getRangeScale(), [l, c] = o.range(), u = a === ee.HORIZONTAL ? r : n, d = N.appendOrSelect(i, "g.ruler").attr("aria-label", "ruler"), h = N.appendOrSelect(d, "line.ruler-line"), p = i.selectAll("[role=graphics-symbol]"), f = s.map((m) => ({
|
|
15503
15500
|
domainValue: this.services.cartesianScales.getDomainValue(m),
|
|
@@ -17062,9 +17059,6 @@ class EI extends Qn {
|
|
|
17062
17059
|
constructor() {
|
|
17063
17060
|
super(...arguments), this.type = "ruler-binned", this.renderType = rt.SVG;
|
|
17064
17061
|
}
|
|
17065
|
-
// eslint-disable-next-line @typescript-eslint/ban-ts-comment
|
|
17066
|
-
// @ts-ignore
|
|
17067
|
-
// eslint-disable-next-line @typescript-eslint/no-unused-vars
|
|
17068
17062
|
showRuler(t, [n, r]) {
|
|
17069
17063
|
const i = this.parent, a = this.model.getOptions(), { cartesianScales: s } = this.services, o = s.getOrientation(), l = s.getRangeScale(), [c, u] = l.range(), d = s.getDomainScale(), h = d.invert(
|
|
17070
17064
|
o === ee.VERTICAL ? n : r
|