@carbon/charts-react 0.41.20 → 0.41.24
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 +480 -1427
- package/README.md +22 -8
- package/area-chart-stacked.d.ts +3 -3
- package/area-chart.d.ts +3 -3
- package/bar-chart-grouped.d.ts +3 -3
- package/bar-chart-simple.d.ts +3 -3
- package/bar-chart-stacked.d.ts +3 -3
- package/base-chart.d.ts +3 -3
- package/base-chart.js +2 -2
- package/bubble-chart.d.ts +3 -3
- package/combo-chart.d.ts +3 -3
- package/donut-chart.d.ts +3 -3
- package/gauge-chart.d.ts +3 -3
- package/index.d.ts +17 -17
- package/line-chart.d.ts +3 -3
- package/lollipop-chart.d.ts +3 -3
- package/meter-chart.d.ts +3 -3
- package/package.json +3 -2
- package/pie-chart.d.ts +3 -3
- package/radar-chart.d.ts +3 -3
- package/scatter-chart.d.ts +3 -3
- package/treemap-chart.d.ts +3 -3
package/README.md
CHANGED
|
@@ -7,6 +7,7 @@
|
|
|
7
7
|
**[Storybook demo sources](https://github.com/carbon-design-system/carbon-charts/tree/master/packages/core/demo/data)**
|
|
8
8
|
|
|
9
9
|
## Getting started
|
|
10
|
+
|
|
10
11
|
Run the following command using [npm](https://www.npmjs.com/):
|
|
11
12
|
|
|
12
13
|
```bash
|
|
@@ -20,23 +21,36 @@ instead:
|
|
|
20
21
|
yarn add @carbon/charts @carbon/charts-react d3@5.x
|
|
21
22
|
```
|
|
22
23
|
|
|
23
|
-
**Note:** you'd also need to install `carbon-components` if you're not using a
|
|
24
|
+
**Note:** you'd also need to install `carbon-components` if you're not using a
|
|
25
|
+
bundled version of the library.
|
|
24
26
|
|
|
25
27
|
## Step-by-step instructions
|
|
26
|
-
|
|
28
|
+
|
|
29
|
+
Read
|
|
30
|
+
[here](https://carbon-design-system.github.io/carbon-charts/?path=/story/tutorials-getting-started--react)
|
|
27
31
|
|
|
28
32
|
## Codesandbox examples
|
|
33
|
+
|
|
29
34
|
[Sample use cases can be seen here](https://carbon-design-system.github.io/carbon-charts/react).
|
|
30
35
|
|
|
31
|
-
**When opening the link above**, click on the **Edit on Codesandbox** button for
|
|
36
|
+
**When opening the link above**, click on the **Edit on Codesandbox** button for
|
|
37
|
+
each demo to see an isolated project showing you how to reproduce the demo.
|
|
32
38
|
|
|
33
39
|
## Charting data & options
|
|
34
|
-
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.
|
|
35
40
|
|
|
36
|
-
|
|
41
|
+
Although we will definitely introduce new models in the future as we start
|
|
42
|
+
shipping new components such as maps, Data and options follow the same model in
|
|
43
|
+
all charts, with minor exceptions and differences in specific components.
|
|
44
|
+
|
|
45
|
+
For instance in the case of a donut chart you're able to pass in an additional
|
|
46
|
+
field called `center` in your options configuring the donut center.
|
|
37
47
|
|
|
38
|
-
For instructions on using the **tabular data format**, see
|
|
48
|
+
For instructions on using the **tabular data format**, see
|
|
49
|
+
[here](https://carbon-design-system.github.io/carbon-charts/?path=/story/tutorials--tabular-data-format)
|
|
39
50
|
|
|
40
|
-
There are also additional options available depending on the chart type being
|
|
51
|
+
There are also additional options available depending on the chart type being
|
|
52
|
+
used,
|
|
53
|
+
[see our demo examples here](https://github.com/carbon-design-system/carbon-charts/tree/master/packages/core/demo/data).
|
|
41
54
|
|
|
42
|
-
Customizable options (specific to chart type) can be found
|
|
55
|
+
Customizable options (specific to chart type) can be found
|
|
56
|
+
[here](https://carbon-design-system.github.io/carbon-charts/documentation/modules/_interfaces_charts_.html)
|
package/area-chart-stacked.d.ts
CHANGED
|
@@ -1,6 +1,6 @@
|
|
|
1
|
-
import { StackedAreaChart as SAC } from
|
|
2
|
-
import BaseChart from
|
|
3
|
-
import { ChartConfig, StackedAreaChartOptions } from
|
|
1
|
+
import { StackedAreaChart as SAC } from '@carbon/charts';
|
|
2
|
+
import BaseChart from './base-chart';
|
|
3
|
+
import { ChartConfig, StackedAreaChartOptions } from '@carbon/charts/interfaces';
|
|
4
4
|
declare type StackedAreaChartProps = ChartConfig<StackedAreaChartOptions>;
|
|
5
5
|
export default class StackedAreaChart extends BaseChart<StackedAreaChartOptions> {
|
|
6
6
|
chartRef: HTMLDivElement;
|
package/area-chart.d.ts
CHANGED
|
@@ -1,6 +1,6 @@
|
|
|
1
|
-
import { AreaChart as AC } from
|
|
2
|
-
import BaseChart from
|
|
3
|
-
import { ChartConfig, AreaChartOptions } from
|
|
1
|
+
import { AreaChart as AC } from '@carbon/charts';
|
|
2
|
+
import BaseChart from './base-chart';
|
|
3
|
+
import { ChartConfig, AreaChartOptions } from '@carbon/charts/interfaces';
|
|
4
4
|
declare type AreaChartProps = ChartConfig<AreaChartOptions>;
|
|
5
5
|
export default class AreaChart extends BaseChart<AreaChartOptions> {
|
|
6
6
|
chartRef: HTMLDivElement;
|
package/bar-chart-grouped.d.ts
CHANGED
|
@@ -1,6 +1,6 @@
|
|
|
1
|
-
import { GroupedBarChart as GBC } from
|
|
2
|
-
import BaseChart from
|
|
3
|
-
import { ChartConfig, BarChartOptions } from
|
|
1
|
+
import { GroupedBarChart as GBC } from '@carbon/charts';
|
|
2
|
+
import BaseChart from './base-chart';
|
|
3
|
+
import { ChartConfig, BarChartOptions } from '@carbon/charts/interfaces';
|
|
4
4
|
declare type GroupedBarChartProps = ChartConfig<BarChartOptions>;
|
|
5
5
|
export default class GroupedBarChart extends BaseChart<BarChartOptions> {
|
|
6
6
|
chartRef: HTMLDivElement;
|
package/bar-chart-simple.d.ts
CHANGED
|
@@ -1,6 +1,6 @@
|
|
|
1
|
-
import { SimpleBarChart as SBC } from
|
|
2
|
-
import BaseChart from
|
|
3
|
-
import { ChartConfig, BarChartOptions } from
|
|
1
|
+
import { SimpleBarChart as SBC } from '@carbon/charts';
|
|
2
|
+
import BaseChart from './base-chart';
|
|
3
|
+
import { ChartConfig, BarChartOptions } from '@carbon/charts/interfaces';
|
|
4
4
|
declare type SimpleBarChartProps = ChartConfig<BarChartOptions>;
|
|
5
5
|
export default class SimpleBarChart extends BaseChart<BarChartOptions> {
|
|
6
6
|
chartRef: HTMLDivElement;
|
package/bar-chart-stacked.d.ts
CHANGED
|
@@ -1,6 +1,6 @@
|
|
|
1
|
-
import { StackedBarChart as SBC } from
|
|
2
|
-
import BaseChart from
|
|
3
|
-
import { ChartConfig, StackedBarChartOptions } from
|
|
1
|
+
import { StackedBarChart as SBC } from '@carbon/charts';
|
|
2
|
+
import BaseChart from './base-chart';
|
|
3
|
+
import { ChartConfig, StackedBarChartOptions } from '@carbon/charts/interfaces';
|
|
4
4
|
declare type StackedBarChartProps = ChartConfig<StackedBarChartOptions>;
|
|
5
5
|
export default class StackedBarChart extends BaseChart<StackedBarChartOptions> {
|
|
6
6
|
chartRef: HTMLDivElement;
|
package/base-chart.d.ts
CHANGED
|
@@ -1,6 +1,6 @@
|
|
|
1
|
-
import React from
|
|
2
|
-
import { Chart as BaseChartType } from
|
|
3
|
-
import { ChartTabularData, BaseChartOptions } from
|
|
1
|
+
import React from 'react';
|
|
2
|
+
import { Chart as BaseChartType } from '@carbon/charts/chart';
|
|
3
|
+
import { ChartTabularData, BaseChartOptions } from '@carbon/charts/interfaces';
|
|
4
4
|
declare type Props<Options> = {
|
|
5
5
|
options?: Options;
|
|
6
6
|
data?: ChartTabularData;
|
package/base-chart.js
CHANGED
|
@@ -23,10 +23,10 @@ var BaseChart = /** @class */ (function (_super) {
|
|
|
23
23
|
var _this = _super.call(this, props) || this;
|
|
24
24
|
var options = props.options, data = props.data;
|
|
25
25
|
if (!options) {
|
|
26
|
-
console.error(
|
|
26
|
+
console.error('Missing options!');
|
|
27
27
|
}
|
|
28
28
|
if (!data) {
|
|
29
|
-
console.error(
|
|
29
|
+
console.error('Missing data!');
|
|
30
30
|
}
|
|
31
31
|
_this.data = props.data || [];
|
|
32
32
|
_this.options = props.options || {};
|
package/bubble-chart.d.ts
CHANGED
|
@@ -1,6 +1,6 @@
|
|
|
1
|
-
import { BubbleChart as BC } from
|
|
2
|
-
import BaseChart from
|
|
3
|
-
import { ChartConfig, BubbleChartOptions } from
|
|
1
|
+
import { BubbleChart as BC } from '@carbon/charts';
|
|
2
|
+
import BaseChart from './base-chart';
|
|
3
|
+
import { ChartConfig, BubbleChartOptions } from '@carbon/charts/interfaces';
|
|
4
4
|
declare type BubbleChartProps = ChartConfig<BubbleChartOptions>;
|
|
5
5
|
export default class BubbleChart extends BaseChart<BubbleChartOptions> {
|
|
6
6
|
chartRef: HTMLDivElement;
|
package/combo-chart.d.ts
CHANGED
|
@@ -1,6 +1,6 @@
|
|
|
1
|
-
import { ComboChart as CC } from
|
|
2
|
-
import BaseChart from
|
|
3
|
-
import { ChartConfig, ComboChartOptions } from
|
|
1
|
+
import { ComboChart as CC } from '@carbon/charts';
|
|
2
|
+
import BaseChart from './base-chart';
|
|
3
|
+
import { ChartConfig, ComboChartOptions } from '@carbon/charts/interfaces';
|
|
4
4
|
declare type ComboChartProps = ChartConfig<ComboChartOptions>;
|
|
5
5
|
export default class ComboChart extends BaseChart<ComboChartOptions> {
|
|
6
6
|
chartRef: HTMLDivElement;
|
package/donut-chart.d.ts
CHANGED
|
@@ -1,6 +1,6 @@
|
|
|
1
|
-
import { DonutChart as DC } from
|
|
2
|
-
import BaseChart from
|
|
3
|
-
import { ChartConfig, DonutChartOptions } from
|
|
1
|
+
import { DonutChart as DC } from '@carbon/charts';
|
|
2
|
+
import BaseChart from './base-chart';
|
|
3
|
+
import { ChartConfig, DonutChartOptions } from '@carbon/charts/interfaces';
|
|
4
4
|
declare type DonutChartProps = ChartConfig<DonutChartOptions>;
|
|
5
5
|
export default class DonutChart extends BaseChart<DonutChartOptions> {
|
|
6
6
|
chartRef: HTMLDivElement;
|
package/gauge-chart.d.ts
CHANGED
|
@@ -1,6 +1,6 @@
|
|
|
1
|
-
import { GaugeChart as GC } from
|
|
2
|
-
import BaseChart from
|
|
3
|
-
import { ChartConfig, GaugeChartOptions } from
|
|
1
|
+
import { GaugeChart as GC } from '@carbon/charts';
|
|
2
|
+
import BaseChart from './base-chart';
|
|
3
|
+
import { ChartConfig, GaugeChartOptions } from '@carbon/charts/interfaces';
|
|
4
4
|
declare type GaugeChartProps = ChartConfig<GaugeChartOptions>;
|
|
5
5
|
export default class GaugeChart extends BaseChart<GaugeChartOptions> {
|
|
6
6
|
chartRef: HTMLDivElement;
|
package/index.d.ts
CHANGED
|
@@ -1,17 +1,17 @@
|
|
|
1
|
-
import AreaChart from
|
|
2
|
-
import StackedAreaChart from
|
|
3
|
-
import GroupedBarChart from
|
|
4
|
-
import SimpleBarChart from
|
|
5
|
-
import StackedBarChart from
|
|
6
|
-
import BubbleChart from
|
|
7
|
-
import DonutChart from
|
|
8
|
-
import GaugeChart from
|
|
9
|
-
import LineChart from
|
|
10
|
-
import LollipopChart from
|
|
11
|
-
import PieChart from
|
|
12
|
-
import ScatterChart from
|
|
13
|
-
import MeterChart from
|
|
14
|
-
import RadarChart from
|
|
15
|
-
import ComboChart from
|
|
16
|
-
import TreemapChart from
|
|
17
|
-
export { AreaChart, StackedAreaChart, GroupedBarChart, SimpleBarChart, StackedBarChart, BubbleChart, DonutChart, GaugeChart, LineChart, LollipopChart, PieChart, ScatterChart, MeterChart, RadarChart, ComboChart, TreemapChart };
|
|
1
|
+
import AreaChart from './area-chart';
|
|
2
|
+
import StackedAreaChart from './area-chart-stacked';
|
|
3
|
+
import GroupedBarChart from './bar-chart-grouped';
|
|
4
|
+
import SimpleBarChart from './bar-chart-simple';
|
|
5
|
+
import StackedBarChart from './bar-chart-stacked';
|
|
6
|
+
import BubbleChart from './bubble-chart';
|
|
7
|
+
import DonutChart from './donut-chart';
|
|
8
|
+
import GaugeChart from './gauge-chart';
|
|
9
|
+
import LineChart from './line-chart';
|
|
10
|
+
import LollipopChart from './lollipop-chart';
|
|
11
|
+
import PieChart from './pie-chart';
|
|
12
|
+
import ScatterChart from './scatter-chart';
|
|
13
|
+
import MeterChart from './meter-chart';
|
|
14
|
+
import RadarChart from './radar-chart';
|
|
15
|
+
import ComboChart from './combo-chart';
|
|
16
|
+
import TreemapChart from './treemap-chart';
|
|
17
|
+
export { AreaChart, StackedAreaChart, GroupedBarChart, SimpleBarChart, StackedBarChart, BubbleChart, DonutChart, GaugeChart, LineChart, LollipopChart, PieChart, ScatterChart, MeterChart, RadarChart, ComboChart, TreemapChart, };
|
package/line-chart.d.ts
CHANGED
|
@@ -1,6 +1,6 @@
|
|
|
1
|
-
import { LineChart as LC } from
|
|
2
|
-
import { ChartConfig, LineChartOptions } from
|
|
3
|
-
import BaseChart from
|
|
1
|
+
import { LineChart as LC } from '@carbon/charts';
|
|
2
|
+
import { ChartConfig, LineChartOptions } from '@carbon/charts/interfaces';
|
|
3
|
+
import BaseChart from './base-chart';
|
|
4
4
|
declare type LineChartProps = ChartConfig<LineChartOptions>;
|
|
5
5
|
export default class LineChart extends BaseChart<LineChartOptions> {
|
|
6
6
|
chartRef?: HTMLDivElement;
|
package/lollipop-chart.d.ts
CHANGED
|
@@ -1,6 +1,6 @@
|
|
|
1
|
-
import { LollipopChart as LC } from
|
|
2
|
-
import { ChartConfig, LollipopChartOptions } from
|
|
3
|
-
import BaseChart from
|
|
1
|
+
import { LollipopChart as LC } from '@carbon/charts';
|
|
2
|
+
import { ChartConfig, LollipopChartOptions } from '@carbon/charts/interfaces';
|
|
3
|
+
import BaseChart from './base-chart';
|
|
4
4
|
declare type LollipopChartProps = ChartConfig<LollipopChartOptions>;
|
|
5
5
|
export default class LollipopChart extends BaseChart<LollipopChartOptions> {
|
|
6
6
|
chartRef?: HTMLDivElement;
|
package/meter-chart.d.ts
CHANGED
|
@@ -1,6 +1,6 @@
|
|
|
1
|
-
import { MeterChart as MC } from
|
|
2
|
-
import BaseChart from
|
|
3
|
-
import { ChartConfig, MeterChartOptions } from
|
|
1
|
+
import { MeterChart as MC } from '@carbon/charts';
|
|
2
|
+
import BaseChart from './base-chart';
|
|
3
|
+
import { ChartConfig, MeterChartOptions } from '@carbon/charts/interfaces';
|
|
4
4
|
declare type MeterChartProps = ChartConfig<MeterChartOptions>;
|
|
5
5
|
export default class MeterChart extends BaseChart<MeterChartOptions> {
|
|
6
6
|
chartRef: HTMLDivElement;
|
package/package.json
CHANGED
|
@@ -1,6 +1,6 @@
|
|
|
1
1
|
{
|
|
2
2
|
"name": "@carbon/charts-react",
|
|
3
|
-
"version": "0.41.
|
|
3
|
+
"version": "0.41.24",
|
|
4
4
|
"description": "Carbon charting components for React",
|
|
5
5
|
"main": "./bundle.js",
|
|
6
6
|
"module": "./index.js",
|
|
@@ -8,6 +8,7 @@
|
|
|
8
8
|
"scripts": {
|
|
9
9
|
"start": "yarn run storybook",
|
|
10
10
|
"build": "bash build.sh",
|
|
11
|
+
"format": "prettier . --write \"**/*.{scss,css,js,ts,tsx,md}\"",
|
|
11
12
|
"storybook": "start-storybook -p 9006 -c .storybook -s ./assets",
|
|
12
13
|
"demo:build": "yarn build && build-storybook -o demo/bundle --quiet",
|
|
13
14
|
"clean": "rm -rf dist demo/bundle"
|
|
@@ -47,7 +48,7 @@
|
|
|
47
48
|
},
|
|
48
49
|
"homepage": "https://github.com/carbon-design-system/carbon-charts#readme",
|
|
49
50
|
"dependencies": {
|
|
50
|
-
"@carbon/charts": "^0.41.
|
|
51
|
+
"@carbon/charts": "^0.41.24"
|
|
51
52
|
},
|
|
52
53
|
"peerDependencies": {
|
|
53
54
|
"react": "^16.6.3",
|
package/pie-chart.d.ts
CHANGED
|
@@ -1,6 +1,6 @@
|
|
|
1
|
-
import { PieChart as PC } from
|
|
2
|
-
import BaseChart from
|
|
3
|
-
import { ChartConfig, PieChartOptions } from
|
|
1
|
+
import { PieChart as PC } from '@carbon/charts';
|
|
2
|
+
import BaseChart from './base-chart';
|
|
3
|
+
import { ChartConfig, PieChartOptions } from '@carbon/charts/interfaces';
|
|
4
4
|
declare type PieChartProps = ChartConfig<PieChartOptions>;
|
|
5
5
|
export default class PieChart extends BaseChart<PieChartOptions> {
|
|
6
6
|
chartRef: HTMLDivElement;
|
package/radar-chart.d.ts
CHANGED
|
@@ -1,6 +1,6 @@
|
|
|
1
|
-
import { RadarChart as RC } from
|
|
2
|
-
import BaseChart from
|
|
3
|
-
import { ChartConfig, RadarChartOptions } from
|
|
1
|
+
import { RadarChart as RC } from '@carbon/charts';
|
|
2
|
+
import BaseChart from './base-chart';
|
|
3
|
+
import { ChartConfig, RadarChartOptions } from '@carbon/charts/interfaces';
|
|
4
4
|
declare type RadarChartProps = ChartConfig<RadarChartOptions>;
|
|
5
5
|
export default class RadarChart extends BaseChart<RadarChartOptions> {
|
|
6
6
|
chartRef: HTMLDivElement;
|
package/scatter-chart.d.ts
CHANGED
|
@@ -1,6 +1,6 @@
|
|
|
1
|
-
import { ScatterChart as SC } from
|
|
2
|
-
import { ChartConfig, ScatterChartOptions } from
|
|
3
|
-
import BaseChart from
|
|
1
|
+
import { ScatterChart as SC } from '@carbon/charts';
|
|
2
|
+
import { ChartConfig, ScatterChartOptions } from '@carbon/charts/interfaces';
|
|
3
|
+
import BaseChart from './base-chart';
|
|
4
4
|
declare type ScatterChartProps = ChartConfig<ScatterChartOptions>;
|
|
5
5
|
export default class ScatterChart extends BaseChart<ScatterChartOptions> {
|
|
6
6
|
chartRef: HTMLDivElement;
|
package/treemap-chart.d.ts
CHANGED
|
@@ -1,6 +1,6 @@
|
|
|
1
|
-
import { TreemapChart as TC } from
|
|
2
|
-
import BaseChart from
|
|
3
|
-
import { ChartConfig, TreemapChartOptions } from
|
|
1
|
+
import { TreemapChart as TC } from '@carbon/charts';
|
|
2
|
+
import BaseChart from './base-chart';
|
|
3
|
+
import { ChartConfig, TreemapChartOptions } from '@carbon/charts/interfaces';
|
|
4
4
|
declare type TreemapChartProps = ChartConfig<TreemapChartOptions>;
|
|
5
5
|
export default class TreemapChart extends BaseChart<TreemapChartOptions> {
|
|
6
6
|
chartRef: HTMLDivElement;
|