@carbon/charts 0.32.10 → 0.33.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 +333 -147
- package/README.md +18 -8
- package/axis-chart.js +20 -20
- package/axis-chart.js.map +1 -1
- package/build/demo/data/area.d.ts +17 -0
- package/build/demo/data/bar.d.ts +32 -48
- package/build/demo/data/line.d.ts +29 -0
- package/build/src/interfaces/charts.d.ts +5 -0
- package/build/src/model.d.ts +1 -0
- package/build/src/services/scales-cartesian.d.ts +1 -1
- package/build/src/tools.d.ts +7 -7
- package/bundle.js +1 -1
- package/charts/area-stacked.js +3 -3
- package/charts/area-stacked.js.map +1 -1
- package/charts/area.js +3 -3
- package/charts/area.js.map +1 -1
- package/charts/bar-grouped.js +3 -3
- package/charts/bar-grouped.js.map +1 -1
- package/charts/bar-simple.js +3 -3
- package/charts/bar-simple.js.map +1 -1
- package/charts/bar-stacked.js +3 -3
- package/charts/bar-stacked.js.map +1 -1
- package/charts/bubble.js +3 -3
- package/charts/bubble.js.map +1 -1
- package/charts/donut.js +3 -3
- package/charts/donut.js.map +1 -1
- package/charts/gauge.js +2 -1
- package/charts/gauge.js.map +1 -1
- package/charts/line.js +3 -3
- package/charts/line.js.map +1 -1
- package/charts/pie.js +3 -3
- package/charts/pie.js.map +1 -1
- package/charts/radar.js +1 -1
- package/charts/radar.js.map +1 -1
- package/charts/scatter.js +3 -3
- package/charts/scatter.js.map +1 -1
- package/components/axes/axis.js +25 -23
- package/components/axes/axis.js.map +1 -1
- package/components/axes/grid.js +1 -1
- package/components/axes/grid.js.map +1 -1
- package/components/axes/ruler.js +2 -2
- package/components/axes/ruler.js.map +1 -1
- package/components/axes/two-dimensional-axes.js +3 -3
- package/components/axes/two-dimensional-axes.js.map +1 -1
- package/components/axes/zero-line.js +1 -1
- package/components/axes/zero-line.js.map +1 -1
- package/components/essentials/legend.js +20 -11
- package/components/essentials/legend.js.map +1 -1
- package/components/essentials/threshold.js +9 -9
- package/components/essentials/threshold.js.map +1 -1
- package/components/essentials/title.js +2 -2
- package/components/essentials/title.js.map +1 -1
- package/components/essentials/tooltip-bar.js +9 -7
- package/components/essentials/tooltip-bar.js.map +1 -1
- package/components/essentials/tooltip.js +7 -7
- package/components/essentials/tooltip.js.map +1 -1
- package/components/graphs/area-stacked.js +8 -7
- package/components/graphs/area-stacked.js.map +1 -1
- package/components/graphs/bar-grouped.js +7 -7
- package/components/graphs/bar-grouped.js.map +1 -1
- package/components/graphs/bar-simple.js +6 -6
- package/components/graphs/bar-simple.js.map +1 -1
- package/components/graphs/bar-stacked.js +6 -6
- package/components/graphs/bar-stacked.js.map +1 -1
- package/components/graphs/gauge.js +4 -3
- package/components/graphs/gauge.js.map +1 -1
- package/components/graphs/line.js +14 -10
- package/components/graphs/line.js.map +1 -1
- package/components/graphs/pie.js +12 -12
- package/components/graphs/pie.js.map +1 -1
- package/components/graphs/radar.js +11 -11
- package/components/graphs/radar.js.map +1 -1
- package/components/graphs/scatter-stacked.js +2 -4
- package/components/graphs/scatter-stacked.js.map +1 -1
- package/components/graphs/scatter.js +6 -8
- package/components/graphs/scatter.js.map +1 -1
- package/components/graphs/skeleton.js +3 -3
- package/components/graphs/skeleton.js.map +1 -1
- package/components/layout/layout.js +10 -4
- package/components/layout/layout.js.map +1 -1
- package/configuration.js +14 -9
- package/configuration.js.map +1 -1
- package/demo/create-codesandbox.js +19 -19
- package/demo/create-codesandbox.js.map +1 -1
- package/demo/data/area.d.ts +17 -0
- package/demo/data/area.js +26 -0
- package/demo/data/area.js.map +1 -1
- package/demo/data/bar.d.ts +32 -48
- package/demo/data/bar.js +134 -141
- package/demo/data/bar.js.map +1 -1
- package/demo/data/bubble.js +29 -29
- package/demo/data/bubble.js.map +1 -1
- package/demo/data/bundle.js +1 -1
- package/demo/data/index.js +21 -5
- package/demo/data/index.js.map +1 -1
- package/demo/data/line.d.ts +29 -0
- package/demo/data/line.js +122 -60
- package/demo/data/line.js.map +1 -1
- package/demo/data/pie.js +5 -5
- package/demo/data/pie.js.map +1 -1
- package/demo/data/radar.js +12 -12
- package/demo/data/radar.js.map +1 -1
- package/demo/data/scatter.js +48 -32
- package/demo/data/scatter.js.map +1 -1
- package/demo/data/step.js +6 -6
- package/demo/data/step.js.map +1 -1
- package/demo/data/time-series-axis.js +107 -107
- package/demo/data/time-series-axis.js.map +1 -1
- package/demo/tsconfig.tsbuildinfo +20 -20
- package/interfaces/a11y.js.map +1 -1
- package/interfaces/charts.d.ts +5 -0
- package/interfaces/charts.js.map +1 -1
- package/interfaces/enums.js.map +1 -1
- package/interfaces/events.js.map +1 -1
- package/model.d.ts +1 -0
- package/model.js +61 -5
- package/model.js.map +1 -1
- package/package.json +1 -1
- package/polyfills.js +1 -1
- package/polyfills.js.map +1 -1
- package/services/angle-utils.js +8 -8
- package/services/angle-utils.js.map +1 -1
- package/services/colorPalettes.js +2 -2
- package/services/colorPalettes.js.map +1 -1
- package/services/colors.js +1 -1
- package/services/colors.js.map +1 -1
- package/services/curves.js +2 -2
- package/services/curves.js.map +1 -1
- package/services/essentials/dom-utils.js +6 -6
- package/services/essentials/dom-utils.js.map +1 -1
- package/services/essentials/events.js +1 -1
- package/services/essentials/events.js.map +1 -1
- package/services/scales-cartesian.d.ts +1 -1
- package/services/scales-cartesian.js +18 -18
- package/services/scales-cartesian.js.map +1 -1
- package/services/time-series.js +2 -2
- package/services/time-series.js.map +1 -1
- package/tools.d.ts +7 -7
- package/tools.js +16 -14
- package/tools.js.map +1 -1
- package/tsconfig.tsbuildinfo +55 -55
package/README.md
CHANGED
|
@@ -17,26 +17,36 @@ instead:
|
|
|
17
17
|
yarn add @carbon/charts d3
|
|
18
18
|
```
|
|
19
19
|
|
|
20
|
-
**Note:** you'd also need to install `carbon-components` if you're not using a
|
|
20
|
+
**Note:** you'd also need to install `carbon-components` if you're not using a
|
|
21
|
+
bundled version of the library.
|
|
21
22
|
|
|
22
23
|
## Step-by-step instructions
|
|
23
24
|
|
|
24
|
-
Read
|
|
25
|
+
Read
|
|
26
|
+
[here](https://carbon-design-system.github.io/carbon-charts/?path=/story/tutorials-getting-started--vanilla)
|
|
25
27
|
|
|
26
28
|
## Codesandbox examples
|
|
27
29
|
|
|
28
30
|
[Sample use cases can be seen here](https://carbon-design-system.github.io/carbon-charts).
|
|
29
31
|
|
|
30
|
-
**When opening the link above**, click on the **Edit on Codesandbox** button for
|
|
32
|
+
**When opening the link above**, click on the **Edit on Codesandbox** button for
|
|
33
|
+
each demo to see an isolated project showing you how to reproduce the demo.
|
|
31
34
|
|
|
32
35
|
## Charting data & options
|
|
33
36
|
|
|
34
|
-
Although we will definitely introduce new models in the future as we start
|
|
37
|
+
Although we will definitely introduce new models in the future as we start
|
|
38
|
+
shipping new components such as maps, Data and options follow the same model in
|
|
39
|
+
all charts, with minor exceptions and differences in specific components.
|
|
35
40
|
|
|
36
|
-
For instance in the case of a donut chart you're able to pass in an additional
|
|
41
|
+
For instance in the case of a donut chart you're able to pass in an additional
|
|
42
|
+
field called `center` in your options configuring the donut center.
|
|
37
43
|
|
|
38
|
-
For instructions on using the **tabular data format**, see
|
|
44
|
+
For instructions on using the **tabular data format**, see
|
|
45
|
+
[here](https://carbon-design-system.github.io/carbon-charts/?path=/story/tutorials--tabular-data-format)
|
|
39
46
|
|
|
40
|
-
There are also additional options available depending on the chart type being
|
|
47
|
+
There are also additional options available depending on the chart type being
|
|
48
|
+
used,
|
|
49
|
+
[see our demo examples here](https://github.com/carbon-design-system/carbon-charts/tree/master/packages/core/demo/data).
|
|
41
50
|
|
|
42
|
-
Customizable options (specific to chart type) can be found
|
|
51
|
+
Customizable options (specific to chart type) can be found
|
|
52
|
+
[here](https://carbon-design-system.github.io/carbon-charts/documentation/modules/_interfaces_charts_.html)
|
package/axis-chart.js
CHANGED
|
@@ -19,8 +19,8 @@ var __spreadArrays = (this && this.__spreadArrays) || function () {
|
|
|
19
19
|
return r;
|
|
20
20
|
};
|
|
21
21
|
import { Chart } from "./chart";
|
|
22
|
-
import { LayoutDirection, LayoutGrowth, LegendOrientations, LegendPositions
|
|
23
|
-
import { LayoutComponent, Legend, Title, Spacer
|
|
22
|
+
import { LayoutDirection, LayoutGrowth, LegendOrientations, LegendPositions } from "./interfaces/index";
|
|
23
|
+
import { LayoutComponent, Legend, Title, Spacer } from "./components/index";
|
|
24
24
|
import { Tools } from "./tools";
|
|
25
25
|
import { CartesianScales, Curves } from "./services/index";
|
|
26
26
|
var AxisChart = /** @class */ (function (_super) {
|
|
@@ -29,7 +29,7 @@ var AxisChart = /** @class */ (function (_super) {
|
|
|
29
29
|
var _this = _super.call(this, holder, chartConfigs) || this;
|
|
30
30
|
_this.services = Object.assign(_this.services, {
|
|
31
31
|
cartesianScales: CartesianScales,
|
|
32
|
-
curves: Curves
|
|
32
|
+
curves: Curves
|
|
33
33
|
});
|
|
34
34
|
return _this;
|
|
35
35
|
}
|
|
@@ -39,24 +39,24 @@ var AxisChart = /** @class */ (function (_super) {
|
|
|
39
39
|
components: [new Title(this.model, this.services)],
|
|
40
40
|
growth: {
|
|
41
41
|
x: LayoutGrowth.PREFERRED,
|
|
42
|
-
y: LayoutGrowth.FIXED
|
|
43
|
-
}
|
|
42
|
+
y: LayoutGrowth.FIXED
|
|
43
|
+
}
|
|
44
44
|
};
|
|
45
45
|
var legendComponent = {
|
|
46
46
|
id: "legend",
|
|
47
47
|
components: [new Legend(this.model, this.services)],
|
|
48
48
|
growth: {
|
|
49
49
|
x: LayoutGrowth.PREFERRED,
|
|
50
|
-
y: LayoutGrowth.FIXED
|
|
51
|
-
}
|
|
50
|
+
y: LayoutGrowth.FIXED
|
|
51
|
+
}
|
|
52
52
|
};
|
|
53
53
|
var graphFrameComponent = {
|
|
54
54
|
id: "graph-frame",
|
|
55
55
|
components: graphFrameComponents,
|
|
56
56
|
growth: {
|
|
57
57
|
x: LayoutGrowth.STRETCH,
|
|
58
|
-
y: LayoutGrowth.FIXED
|
|
59
|
-
}
|
|
58
|
+
y: LayoutGrowth.FIXED
|
|
59
|
+
}
|
|
60
60
|
};
|
|
61
61
|
var isLegendEnabled = this.model.getOptions().legend.enabled !== false;
|
|
62
62
|
// Decide the position of the legend in reference to the chart
|
|
@@ -86,23 +86,23 @@ var AxisChart = /** @class */ (function (_super) {
|
|
|
86
86
|
components: [new Spacer(this.model, this.services)],
|
|
87
87
|
growth: {
|
|
88
88
|
x: LayoutGrowth.PREFERRED,
|
|
89
|
-
y: LayoutGrowth.FIXED
|
|
90
|
-
}
|
|
89
|
+
y: LayoutGrowth.FIXED
|
|
90
|
+
}
|
|
91
91
|
};
|
|
92
92
|
var fullFrameComponent = {
|
|
93
93
|
id: "full-frame",
|
|
94
94
|
components: [
|
|
95
95
|
new LayoutComponent(this.model, this.services, __spreadArrays((isLegendEnabled ? [legendComponent] : []), [
|
|
96
96
|
legendSpacerComponent,
|
|
97
|
-
graphFrameComponent
|
|
97
|
+
graphFrameComponent
|
|
98
98
|
]), {
|
|
99
|
-
direction: fullFrameComponentDirection
|
|
100
|
-
})
|
|
99
|
+
direction: fullFrameComponentDirection
|
|
100
|
+
})
|
|
101
101
|
],
|
|
102
102
|
growth: {
|
|
103
103
|
x: LayoutGrowth.STRETCH,
|
|
104
|
-
y: LayoutGrowth.FIXED
|
|
105
|
-
}
|
|
104
|
+
y: LayoutGrowth.FIXED
|
|
105
|
+
}
|
|
106
106
|
};
|
|
107
107
|
// Add chart title if it exists
|
|
108
108
|
var topLevelLayoutComponents = [];
|
|
@@ -113,16 +113,16 @@ var AxisChart = /** @class */ (function (_super) {
|
|
|
113
113
|
components: [new Spacer(this.model, this.services)],
|
|
114
114
|
growth: {
|
|
115
115
|
x: LayoutGrowth.PREFERRED,
|
|
116
|
-
y: LayoutGrowth.FIXED
|
|
117
|
-
}
|
|
116
|
+
y: LayoutGrowth.FIXED
|
|
117
|
+
}
|
|
118
118
|
};
|
|
119
119
|
topLevelLayoutComponents.push(titleSpacerComponent);
|
|
120
120
|
}
|
|
121
121
|
topLevelLayoutComponents.push(fullFrameComponent);
|
|
122
122
|
return [
|
|
123
123
|
new LayoutComponent(this.model, this.services, topLevelLayoutComponents, {
|
|
124
|
-
direction: LayoutDirection.COLUMN
|
|
125
|
-
})
|
|
124
|
+
direction: LayoutDirection.COLUMN
|
|
125
|
+
})
|
|
126
126
|
];
|
|
127
127
|
};
|
|
128
128
|
return AxisChart;
|
package/axis-chart.js.map
CHANGED
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"axis-chart.js","sourceRoot":"","sources":["axis-chart.ts"],"names":[],"mappings":";;;;;;;;;;;;;;;;;;;;AAAA,OAAO,EAAE,KAAK,EAAE,MAAM,SAAS,CAAC;AAChC,OAAO,EACN,eAAe,EACf,YAAY,EACZ,kBAAkB,EAClB,eAAe,
|
|
1
|
+
{"version":3,"file":"axis-chart.js","sourceRoot":"","sources":["axis-chart.ts"],"names":[],"mappings":"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","sourcesContent":["import { Chart } from \"./chart\";\nimport {\n\tLayoutDirection,\n\tLayoutGrowth,\n\tLegendOrientations,\n\tLegendPositions,\n\tChartConfig,\n\tAxisChartOptions\n} from \"./interfaces/index\";\nimport {\n\tLayoutComponent,\n\tLegend,\n\tTitle,\n\tTooltip,\n\tTooltipBar,\n\tSpacer\n} from \"./components/index\";\nimport { Tools } from \"./tools\";\n\nimport { CartesianScales, Curves } from \"./services/index\";\n\nexport class AxisChart extends Chart {\n\tservices: any = Object.assign(this.services, {\n\t\tcartesianScales: CartesianScales,\n\t\tcurves: Curves\n\t});\n\n\tconstructor(holder: Element, chartConfigs: ChartConfig<AxisChartOptions>) {\n\t\tsuper(holder, chartConfigs);\n\t}\n\n\tprotected getAxisChartComponents(graphFrameComponents: any[]) {\n\t\tconst titleComponent = {\n\t\t\tid: \"title\",\n\t\t\tcomponents: [new Title(this.model, this.services)],\n\t\t\tgrowth: {\n\t\t\t\tx: LayoutGrowth.PREFERRED,\n\t\t\t\ty: LayoutGrowth.FIXED\n\t\t\t}\n\t\t};\n\n\t\tconst legendComponent = {\n\t\t\tid: \"legend\",\n\t\t\tcomponents: [new Legend(this.model, this.services)],\n\t\t\tgrowth: {\n\t\t\t\tx: LayoutGrowth.PREFERRED,\n\t\t\t\ty: LayoutGrowth.FIXED\n\t\t\t}\n\t\t};\n\n\t\tconst graphFrameComponent = {\n\t\t\tid: \"graph-frame\",\n\t\t\tcomponents: graphFrameComponents,\n\t\t\tgrowth: {\n\t\t\t\tx: LayoutGrowth.STRETCH,\n\t\t\t\ty: LayoutGrowth.FIXED\n\t\t\t}\n\t\t};\n\n\t\tconst isLegendEnabled =\n\t\t\tthis.model.getOptions().legend.enabled !== false;\n\n\t\t// Decide the position of the legend in reference to the chart\n\t\tlet fullFrameComponentDirection = LayoutDirection.COLUMN;\n\t\tif (isLegendEnabled) {\n\t\t\tconst legendPosition = Tools.getProperty(\n\t\t\t\tthis.model.getOptions(),\n\t\t\t\t\"legend\",\n\t\t\t\t\"position\"\n\t\t\t);\n\t\t\tif (legendPosition === LegendPositions.LEFT) {\n\t\t\t\tfullFrameComponentDirection = LayoutDirection.ROW;\n\n\t\t\t\tif (!this.model.getOptions().legend.orientation) {\n\t\t\t\t\tthis.model.getOptions().legend.orientation =\n\t\t\t\t\t\tLegendOrientations.VERTICAL;\n\t\t\t\t}\n\t\t\t} else if (legendPosition === LegendPositions.RIGHT) {\n\t\t\t\tfullFrameComponentDirection = LayoutDirection.ROW_REVERSE;\n\n\t\t\t\tif (!this.model.getOptions().legend.orientation) {\n\t\t\t\t\tthis.model.getOptions().legend.orientation =\n\t\t\t\t\t\tLegendOrientations.VERTICAL;\n\t\t\t\t}\n\t\t\t} else if (legendPosition === LegendPositions.BOTTOM) {\n\t\t\t\tfullFrameComponentDirection = LayoutDirection.COLUMN_REVERSE;\n\t\t\t}\n\t\t}\n\n\t\tconst legendSpacerComponent = {\n\t\t\tid: \"spacer\",\n\t\t\tcomponents: [new Spacer(this.model, this.services)],\n\t\t\tgrowth: {\n\t\t\t\tx: LayoutGrowth.PREFERRED,\n\t\t\t\ty: LayoutGrowth.FIXED\n\t\t\t}\n\t\t};\n\n\t\tconst fullFrameComponent = {\n\t\t\tid: \"full-frame\",\n\t\t\tcomponents: [\n\t\t\t\tnew LayoutComponent(\n\t\t\t\t\tthis.model,\n\t\t\t\t\tthis.services,\n\t\t\t\t\t[\n\t\t\t\t\t\t...(isLegendEnabled ? [legendComponent] : []),\n\t\t\t\t\t\tlegendSpacerComponent,\n\t\t\t\t\t\tgraphFrameComponent\n\t\t\t\t\t],\n\t\t\t\t\t{\n\t\t\t\t\t\tdirection: fullFrameComponentDirection\n\t\t\t\t\t}\n\t\t\t\t)\n\t\t\t],\n\t\t\tgrowth: {\n\t\t\t\tx: LayoutGrowth.STRETCH,\n\t\t\t\ty: LayoutGrowth.FIXED\n\t\t\t}\n\t\t};\n\n\t\t// Add chart title if it exists\n\t\tconst topLevelLayoutComponents = [];\n\t\tif (this.model.getOptions().title) {\n\t\t\ttopLevelLayoutComponents.push(titleComponent);\n\n\t\t\tconst titleSpacerComponent = {\n\t\t\t\tid: \"spacer\",\n\t\t\t\tcomponents: [new Spacer(this.model, this.services)],\n\t\t\t\tgrowth: {\n\t\t\t\t\tx: LayoutGrowth.PREFERRED,\n\t\t\t\t\ty: LayoutGrowth.FIXED\n\t\t\t\t}\n\t\t\t};\n\n\t\t\ttopLevelLayoutComponents.push(titleSpacerComponent);\n\t\t}\n\t\ttopLevelLayoutComponents.push(fullFrameComponent);\n\n\t\treturn [\n\t\t\tnew LayoutComponent(\n\t\t\t\tthis.model,\n\t\t\t\tthis.services,\n\t\t\t\ttopLevelLayoutComponents,\n\t\t\t\t{\n\t\t\t\t\tdirection: LayoutDirection.COLUMN\n\t\t\t\t}\n\t\t\t)\n\t\t];\n\t}\n}\n"]}
|
|
@@ -55,6 +55,23 @@ export declare const stackedAreaTimeSeriesOptions: {
|
|
|
55
55
|
};
|
|
56
56
|
curve: string;
|
|
57
57
|
};
|
|
58
|
+
export declare const stackedAreaTimeSeriesUnevenData: {
|
|
59
|
+
group: string;
|
|
60
|
+
date: Date;
|
|
61
|
+
value: number;
|
|
62
|
+
}[];
|
|
63
|
+
export declare const stackedAreaTimeSeriesUnevenDataOptions: {
|
|
64
|
+
title: string;
|
|
65
|
+
axes: {
|
|
66
|
+
left: {
|
|
67
|
+
stacked: boolean;
|
|
68
|
+
};
|
|
69
|
+
bottom: {
|
|
70
|
+
scaleType: string;
|
|
71
|
+
};
|
|
72
|
+
};
|
|
73
|
+
curve: string;
|
|
74
|
+
};
|
|
58
75
|
export declare const stackedAreaPercentageTimeSeriesOptions: {
|
|
59
76
|
title: string;
|
|
60
77
|
axes: {
|
package/build/demo/data/bar.d.ts
CHANGED
|
@@ -15,6 +15,26 @@ export declare const groupedBarOptions: {
|
|
|
15
15
|
};
|
|
16
16
|
};
|
|
17
17
|
};
|
|
18
|
+
export declare const groupedBarSelectedGroupsData: {
|
|
19
|
+
group: string;
|
|
20
|
+
key: string;
|
|
21
|
+
value: number;
|
|
22
|
+
}[];
|
|
23
|
+
export declare const groupedBarSelectedGroupsOptions: {
|
|
24
|
+
title: string;
|
|
25
|
+
data: {
|
|
26
|
+
selectedGroups: string[];
|
|
27
|
+
};
|
|
28
|
+
axes: {
|
|
29
|
+
left: {
|
|
30
|
+
mapsTo: string;
|
|
31
|
+
};
|
|
32
|
+
bottom: {
|
|
33
|
+
scaleType: string;
|
|
34
|
+
mapsTo: string;
|
|
35
|
+
};
|
|
36
|
+
};
|
|
37
|
+
};
|
|
18
38
|
export declare const groupedHorizontalBarData: {
|
|
19
39
|
group: string;
|
|
20
40
|
key: string;
|
|
@@ -237,12 +257,9 @@ export declare const simpleBarEmptyStateData: any[];
|
|
|
237
257
|
export declare const simpleBarEmptyStateOptions: {
|
|
238
258
|
title: string;
|
|
239
259
|
axes: {
|
|
240
|
-
left: {
|
|
241
|
-
primary: boolean;
|
|
242
|
-
};
|
|
260
|
+
left: {};
|
|
243
261
|
bottom: {
|
|
244
262
|
scaleType: string;
|
|
245
|
-
secondary: boolean;
|
|
246
263
|
};
|
|
247
264
|
};
|
|
248
265
|
};
|
|
@@ -250,12 +267,9 @@ export declare const simpleBarSkeletonData: any[];
|
|
|
250
267
|
export declare const simpleBarSkeletonOptions: {
|
|
251
268
|
title: string;
|
|
252
269
|
axes: {
|
|
253
|
-
left: {
|
|
254
|
-
primary: boolean;
|
|
255
|
-
};
|
|
270
|
+
left: {};
|
|
256
271
|
bottom: {
|
|
257
272
|
scaleType: string;
|
|
258
|
-
secondary: boolean;
|
|
259
273
|
};
|
|
260
274
|
};
|
|
261
275
|
data: {
|
|
@@ -266,12 +280,9 @@ export declare const groupedBarEmptyStateData: any[];
|
|
|
266
280
|
export declare const groupedBarEmptyStateOptions: {
|
|
267
281
|
title: string;
|
|
268
282
|
axes: {
|
|
269
|
-
left: {
|
|
270
|
-
primary: boolean;
|
|
271
|
-
};
|
|
283
|
+
left: {};
|
|
272
284
|
bottom: {
|
|
273
285
|
scaleType: string;
|
|
274
|
-
secondary: boolean;
|
|
275
286
|
};
|
|
276
287
|
};
|
|
277
288
|
};
|
|
@@ -279,12 +290,9 @@ export declare const groupedBarSkeletonData: any[];
|
|
|
279
290
|
export declare const groupedBarSkeletonOptions: {
|
|
280
291
|
title: string;
|
|
281
292
|
axes: {
|
|
282
|
-
left: {
|
|
283
|
-
primary: boolean;
|
|
284
|
-
};
|
|
293
|
+
left: {};
|
|
285
294
|
bottom: {
|
|
286
295
|
scaleType: string;
|
|
287
|
-
secondary: boolean;
|
|
288
296
|
};
|
|
289
297
|
};
|
|
290
298
|
data: {
|
|
@@ -295,12 +303,9 @@ export declare const stackedBarEmptyStateData: any[];
|
|
|
295
303
|
export declare const stackedBarEmptyStateOptions: {
|
|
296
304
|
title: string;
|
|
297
305
|
axes: {
|
|
298
|
-
left: {
|
|
299
|
-
primary: boolean;
|
|
300
|
-
};
|
|
306
|
+
left: {};
|
|
301
307
|
bottom: {
|
|
302
308
|
scaleType: string;
|
|
303
|
-
secondary: boolean;
|
|
304
309
|
};
|
|
305
310
|
};
|
|
306
311
|
};
|
|
@@ -308,12 +313,9 @@ export declare const stackedBarSkeletonData: any[];
|
|
|
308
313
|
export declare const stackedBarSkeletonOptions: {
|
|
309
314
|
title: string;
|
|
310
315
|
axes: {
|
|
311
|
-
left: {
|
|
312
|
-
primary: boolean;
|
|
313
|
-
};
|
|
316
|
+
left: {};
|
|
314
317
|
bottom: {
|
|
315
318
|
scaleType: string;
|
|
316
|
-
secondary: boolean;
|
|
317
319
|
};
|
|
318
320
|
};
|
|
319
321
|
data: {
|
|
@@ -325,12 +327,9 @@ export declare const simpleHorizontalBarEmptyStateOptions: {
|
|
|
325
327
|
title: string;
|
|
326
328
|
axes: {
|
|
327
329
|
left: {
|
|
328
|
-
primary: boolean;
|
|
329
330
|
scaleType: string;
|
|
330
331
|
};
|
|
331
|
-
bottom: {
|
|
332
|
-
secondary: boolean;
|
|
333
|
-
};
|
|
332
|
+
bottom: {};
|
|
334
333
|
};
|
|
335
334
|
};
|
|
336
335
|
export declare const simpleHorizontalBarSkeletonData: any[];
|
|
@@ -338,12 +337,9 @@ export declare const simpleHorizontalBarSkeletonOptions: {
|
|
|
338
337
|
title: string;
|
|
339
338
|
axes: {
|
|
340
339
|
left: {
|
|
341
|
-
primary: boolean;
|
|
342
340
|
scaleType: string;
|
|
343
341
|
};
|
|
344
|
-
bottom: {
|
|
345
|
-
secondary: boolean;
|
|
346
|
-
};
|
|
342
|
+
bottom: {};
|
|
347
343
|
};
|
|
348
344
|
data: {
|
|
349
345
|
loading: boolean;
|
|
@@ -354,12 +350,9 @@ export declare const groupedHorizontalBarEmptyStateOptions: {
|
|
|
354
350
|
title: string;
|
|
355
351
|
axes: {
|
|
356
352
|
left: {
|
|
357
|
-
primary: boolean;
|
|
358
353
|
scaleType: string;
|
|
359
354
|
};
|
|
360
|
-
bottom: {
|
|
361
|
-
secondary: boolean;
|
|
362
|
-
};
|
|
355
|
+
bottom: {};
|
|
363
356
|
};
|
|
364
357
|
};
|
|
365
358
|
export declare const groupedHorizontalBarSkeletonData: any[];
|
|
@@ -367,12 +360,9 @@ export declare const groupedHorizontalBarSkeletonOptions: {
|
|
|
367
360
|
title: string;
|
|
368
361
|
axes: {
|
|
369
362
|
left: {
|
|
370
|
-
primary: boolean;
|
|
371
363
|
scaleType: string;
|
|
372
364
|
};
|
|
373
|
-
bottom: {
|
|
374
|
-
secondary: boolean;
|
|
375
|
-
};
|
|
365
|
+
bottom: {};
|
|
376
366
|
};
|
|
377
367
|
data: {
|
|
378
368
|
loading: boolean;
|
|
@@ -383,12 +373,9 @@ export declare const stackedHorizontalBarEmptyStateOptions: {
|
|
|
383
373
|
title: string;
|
|
384
374
|
axes: {
|
|
385
375
|
left: {
|
|
386
|
-
primary: boolean;
|
|
387
376
|
scaleType: string;
|
|
388
377
|
};
|
|
389
|
-
bottom: {
|
|
390
|
-
secondary: boolean;
|
|
391
|
-
};
|
|
378
|
+
bottom: {};
|
|
392
379
|
};
|
|
393
380
|
};
|
|
394
381
|
export declare const stackedHorizontalBarSkeletonData: any[];
|
|
@@ -396,12 +383,9 @@ export declare const stackedHorizontalBarSkeletonOptions: {
|
|
|
396
383
|
title: string;
|
|
397
384
|
axes: {
|
|
398
385
|
left: {
|
|
399
|
-
primary: boolean;
|
|
400
386
|
scaleType: string;
|
|
401
387
|
};
|
|
402
|
-
bottom: {
|
|
403
|
-
secondary: boolean;
|
|
404
|
-
};
|
|
388
|
+
bottom: {};
|
|
405
389
|
};
|
|
406
390
|
data: {
|
|
407
391
|
loading: boolean;
|
|
@@ -67,6 +67,35 @@ export declare const lineCustomDomainOptions: {
|
|
|
67
67
|
};
|
|
68
68
|
};
|
|
69
69
|
};
|
|
70
|
+
export declare const lineSelectedGroupsData: ({
|
|
71
|
+
group: string;
|
|
72
|
+
key: string;
|
|
73
|
+
value: number;
|
|
74
|
+
audienceSize?: undefined;
|
|
75
|
+
} | {
|
|
76
|
+
group: string;
|
|
77
|
+
key: string;
|
|
78
|
+
value: number;
|
|
79
|
+
audienceSize: number;
|
|
80
|
+
})[];
|
|
81
|
+
export declare const lineSelectedGroupsOptions: {
|
|
82
|
+
title: string;
|
|
83
|
+
data: {
|
|
84
|
+
selectedGroups: string[];
|
|
85
|
+
};
|
|
86
|
+
axes: {
|
|
87
|
+
bottom: {
|
|
88
|
+
title: string;
|
|
89
|
+
mapsTo: string;
|
|
90
|
+
scaleType: string;
|
|
91
|
+
};
|
|
92
|
+
left: {
|
|
93
|
+
mapsTo: string;
|
|
94
|
+
title: string;
|
|
95
|
+
scaleType: string;
|
|
96
|
+
};
|
|
97
|
+
};
|
|
98
|
+
};
|
|
70
99
|
export declare const lineTimeSeriesData: {
|
|
71
100
|
group: string;
|
|
72
101
|
date: Date;
|
|
@@ -67,6 +67,11 @@ export interface BaseChartOptions {
|
|
|
67
67
|
* used to simulate data loading
|
|
68
68
|
*/
|
|
69
69
|
loading?: Boolean;
|
|
70
|
+
/**
|
|
71
|
+
* options related to pre-selected data groups
|
|
72
|
+
* Remains empty if every legend item is active or dataset doesn't have the data groups.
|
|
73
|
+
*/
|
|
74
|
+
selectedGroups?: string[];
|
|
70
75
|
};
|
|
71
76
|
/**
|
|
72
77
|
* options related to color scales
|
package/build/src/model.d.ts
CHANGED
|
@@ -35,7 +35,7 @@ export declare class CartesianScales extends Service {
|
|
|
35
35
|
getRangeValue(d: any, i: any): any;
|
|
36
36
|
getDomainIdentifier(): any;
|
|
37
37
|
getRangeIdentifier(): any;
|
|
38
|
-
/** Uses the
|
|
38
|
+
/** Uses the Y Axis to get data items associated with that value. */
|
|
39
39
|
getDataFromDomain(domainValue: any): any;
|
|
40
40
|
extendsDomain(axisPosition: AxisPositions, domain: any): number[] | Date[];
|
|
41
41
|
protected findMainVerticalAxisPosition(): AxisPositions.LEFT | AxisPositions.RIGHT;
|
package/build/src/tools.d.ts
CHANGED
|
@@ -83,13 +83,13 @@ export declare namespace Tools {
|
|
|
83
83
|
*/
|
|
84
84
|
export function convertValueToPercentage(item: any, fullData: any): number;
|
|
85
85
|
/**
|
|
86
|
-
|
|
87
|
-
|
|
88
|
-
|
|
89
|
-
|
|
90
|
-
|
|
91
|
-
|
|
92
|
-
|
|
86
|
+
* Truncate the labels
|
|
87
|
+
* @export
|
|
88
|
+
* @param {any} fullText
|
|
89
|
+
* @param {any} truncationType
|
|
90
|
+
* @param {any} numCharacter
|
|
91
|
+
* @returns Truncated text
|
|
92
|
+
*/
|
|
93
93
|
export function truncateLabel(fullText: any, truncationType: any, numCharacter: any): any;
|
|
94
94
|
/**************************************
|
|
95
95
|
* Object/array related checks *
|