@carbon/charts 0.30.21 → 0.30.25
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 +337 -1035
- package/README.md +3 -0
- package/axis-chart.js +8 -14
- package/axis-chart.js.map +1 -1
- package/build/demo/{data/create-codesandbox.d.ts → create-codesandbox.d.ts} +16 -13
- package/build/demo/data/bar.d.ts +175 -1
- package/build/demo/data/bubble.d.ts +41 -0
- package/build/demo/data/donut.d.ts +23 -0
- package/build/demo/data/line.d.ts +70 -0
- package/build/demo/data/pie.d.ts +13 -0
- package/build/demo/data/scatter.d.ts +31 -0
- package/build/demo/data/step.d.ts +4 -0
- package/build/demo/data/time-series-axis.d.ts +55 -3
- package/build/src/components/axes/grid.d.ts +3 -3
- package/build/src/components/axes/two-dimensional-axes.d.ts +3 -0
- package/build/src/components/essentials/threshold.d.ts +17 -0
- package/build/src/components/graphs/bar.d.ts +1 -1
- package/build/src/components/graphs/scatter.d.ts +1 -0
- package/build/src/components/graphs/skeleton.d.ts +22 -0
- package/build/src/components/index.d.ts +2 -0
- package/build/src/interfaces/axis-scales.d.ts +22 -11
- package/build/src/interfaces/charts.d.ts +5 -0
- package/build/src/interfaces/components.d.ts +21 -0
- package/build/src/interfaces/enums.d.ts +9 -0
- package/build/src/interfaces/events.d.ts +7 -0
- package/build/src/model.d.ts +1 -0
- package/build/src/services/scales-cartesian.d.ts +9 -1
- package/build/stories/tutorials/event-listeners.d.ts +1 -0
- package/build/stories/tutorials/index.d.ts +2 -1
- package/bundle.js +1 -1
- package/chart.js +15 -24
- package/chart.js.map +1 -1
- package/charts/bar-grouped.js +6 -2
- package/charts/bar-grouped.js.map +1 -1
- package/charts/bar-simple.js +6 -2
- package/charts/bar-simple.js.map +1 -1
- package/charts/bar-stacked.js +6 -2
- package/charts/bar-stacked.js.map +1 -1
- package/charts/bubble.js +6 -2
- package/charts/bubble.js.map +1 -1
- package/charts/donut.js +6 -2
- package/charts/donut.js.map +1 -1
- package/charts/line.js +6 -2
- package/charts/line.js.map +1 -1
- package/charts/pie.js +6 -2
- package/charts/pie.js.map +1 -1
- package/charts/radar.js +1 -3
- package/charts/radar.js.map +1 -1
- package/charts/scatter.js +6 -2
- package/charts/scatter.js.map +1 -1
- package/components/axes/axis.js +93 -43
- package/components/axes/axis.js.map +1 -1
- package/components/axes/grid.d.ts +3 -3
- package/components/axes/grid.js +46 -23
- package/components/axes/grid.js.map +1 -1
- package/components/axes/ruler.js +7 -5
- package/components/axes/ruler.js.map +1 -1
- package/components/axes/two-dimensional-axes.d.ts +3 -0
- package/components/axes/two-dimensional-axes.js +35 -2
- package/components/axes/two-dimensional-axes.js.map +1 -1
- package/components/axes/zero-line.js +16 -1
- package/components/axes/zero-line.js.map +1 -1
- package/components/component.js +2 -4
- package/components/component.js.map +1 -1
- package/components/essentials/legend.js +46 -23
- package/components/essentials/legend.js.map +1 -1
- package/components/essentials/threshold.d.ts +17 -0
- package/components/essentials/threshold.js +171 -0
- package/components/essentials/threshold.js.map +1 -0
- package/components/essentials/title.js +6 -4
- package/components/essentials/title.js.map +1 -1
- package/components/essentials/tooltip-bar.js +39 -20
- package/components/essentials/tooltip-bar.js.map +1 -1
- package/components/essentials/tooltip-pie.js +4 -3
- package/components/essentials/tooltip-pie.js.map +1 -1
- package/components/essentials/tooltip-radar.js +6 -3
- package/components/essentials/tooltip-radar.js.map +1 -1
- package/components/essentials/tooltip-scatter.js +3 -1
- package/components/essentials/tooltip-scatter.js.map +1 -1
- package/components/essentials/tooltip.js +35 -15
- package/components/essentials/tooltip.js.map +1 -1
- package/components/graphs/bar-grouped.js +48 -20
- package/components/graphs/bar-grouped.js.map +1 -1
- package/components/graphs/bar-simple.js +39 -19
- package/components/graphs/bar-simple.js.map +1 -1
- package/components/graphs/bar-stacked.js +50 -28
- package/components/graphs/bar-stacked.js.map +1 -1
- package/components/graphs/bar.d.ts +1 -1
- package/components/graphs/bar.js +1 -1
- package/components/graphs/bar.js.map +1 -1
- package/components/graphs/bubble.js +22 -8
- package/components/graphs/bubble.js.map +1 -1
- package/components/graphs/donut.js +17 -3
- package/components/graphs/donut.js.map +1 -1
- package/components/graphs/line.js +14 -7
- package/components/graphs/line.js.map +1 -1
- package/components/graphs/pie.js +80 -44
- package/components/graphs/pie.js.map +1 -1
- package/components/graphs/radar.js +271 -140
- package/components/graphs/radar.js.map +1 -1
- package/components/graphs/scatter.d.ts +1 -0
- package/components/graphs/scatter.js +80 -19
- package/components/graphs/scatter.js.map +1 -1
- package/components/graphs/skeleton.d.ts +22 -0
- package/components/graphs/skeleton.js +256 -0
- package/components/graphs/skeleton.js.map +1 -0
- package/components/index.d.ts +2 -0
- package/components/index.js +2 -0
- package/components/index.js.map +1 -1
- package/components/layout/layout.js +38 -26
- package/components/layout/layout.js.map +1 -1
- package/components/layout/spacer.js +2 -1
- package/components/layout/spacer.js.map +1 -1
- package/configuration.js +17 -14
- package/configuration.js.map +1 -1
- package/demo/{data/create-codesandbox.d.ts → create-codesandbox.d.ts} +16 -13
- package/demo/{data/create-codesandbox.js → create-codesandbox.js} +24 -21
- package/demo/create-codesandbox.js.map +1 -0
- package/demo/data/bar.d.ts +175 -1
- package/demo/data/bar.js +189 -3
- package/demo/data/bar.js.map +1 -1
- package/demo/data/bubble.d.ts +41 -0
- package/demo/data/bubble.js +48 -3
- package/demo/data/bubble.js.map +1 -1
- package/demo/data/bundle.js +1 -1
- package/demo/data/donut.d.ts +23 -0
- package/demo/data/donut.js +25 -0
- package/demo/data/donut.js.map +1 -1
- package/demo/data/index.js +189 -7
- package/demo/data/index.js.map +1 -1
- package/demo/data/line.d.ts +70 -0
- package/demo/data/line.js +71 -0
- package/demo/data/line.js.map +1 -1
- package/demo/data/pie.d.ts +13 -0
- package/demo/data/pie.js +15 -0
- package/demo/data/pie.js.map +1 -1
- package/demo/data/radar.js.map +1 -1
- package/demo/data/scatter.d.ts +31 -0
- package/demo/data/scatter.js +33 -0
- package/demo/data/scatter.js.map +1 -1
- package/demo/data/step.d.ts +4 -0
- package/demo/data/step.js +15 -0
- package/demo/data/step.js.map +1 -1
- package/demo/data/time-series-axis.d.ts +55 -3
- package/demo/data/time-series-axis.js +62 -6
- package/demo/data/time-series-axis.js.map +1 -1
- package/demo/styles.css +342 -18
- package/demo/styles.css.map +1 -1
- package/demo/styles.min.css +1 -1
- package/demo/styles.min.css.map +1 -1
- package/demo/tsconfig.tsbuildinfo +232 -229
- package/index.js.map +1 -1
- package/interfaces/axis-scales.d.ts +22 -11
- package/interfaces/axis-scales.js.map +1 -1
- package/interfaces/charts.d.ts +5 -0
- package/interfaces/charts.js.map +1 -1
- package/interfaces/components.d.ts +21 -0
- package/interfaces/components.js.map +1 -1
- package/interfaces/enums.d.ts +9 -0
- package/interfaces/enums.js +10 -0
- package/interfaces/enums.js.map +1 -1
- package/interfaces/events.d.ts +7 -0
- package/interfaces/events.js +8 -0
- package/interfaces/events.js.map +1 -1
- package/model.d.ts +1 -0
- package/model.js +30 -16
- package/model.js.map +1 -1
- package/package.json +4 -2
- package/polyfills.js +7 -2
- package/polyfills.js.map +1 -1
- package/services/angle-utils.js +34 -9
- package/services/angle-utils.js.map +1 -1
- package/services/colors.js.map +1 -1
- package/services/curves.js +4 -2
- package/services/curves.js.map +1 -1
- package/services/essentials/dom-utils.js +4 -3
- package/services/essentials/dom-utils.js.map +1 -1
- package/services/essentials/transitions.js +3 -4
- package/services/essentials/transitions.js.map +1 -1
- package/services/scales-cartesian.d.ts +9 -1
- package/services/scales-cartesian.js +96 -23
- package/services/scales-cartesian.js.map +1 -1
- package/services/time-series.js +36 -19
- package/services/time-series.js.map +1 -1
- package/styles/components/_axis.scss +4 -0
- package/styles/components/_layout.scss +0 -1
- package/styles/components/_ruler.scss +5 -2
- package/styles/components/_skeleton.scss +56 -0
- package/styles/components/_threshold.scss +49 -0
- package/styles/components/_tooltip.scss +6 -5
- package/styles/components/index.scss +2 -0
- package/styles/graphs/_bubble.scss +1 -1
- package/styles/graphs/_radar.scss +4 -2
- package/styles/graphs/_scatter.scss +5 -1
- package/styles/mixins.scss +2 -2
- package/styles-g10.css +87 -4
- package/styles-g10.css.map +1 -1
- package/styles-g10.min.css +1 -1
- package/styles-g10.min.css.map +1 -1
- package/styles-g100.css +87 -4
- package/styles-g100.css.map +1 -1
- package/styles-g100.min.css +1 -1
- package/styles-g100.min.css.map +1 -1
- package/styles-g90.css +87 -4
- package/styles-g90.css.map +1 -1
- package/styles-g90.min.css +1 -1
- package/styles-g90.min.css.map +1 -1
- package/styles.css +87 -4
- package/styles.css.map +1 -1
- package/styles.min.css +1 -1
- package/styles.min.css.map +1 -1
- package/tools.js +25 -7
- package/tools.js.map +1 -1
- package/tsconfig.tsbuildinfo +169 -106
- package/demo/data/create-codesandbox.js.map +0 -1
package/configuration.js
CHANGED
|
@@ -47,8 +47,8 @@ export var baseTooltip = {
|
|
|
47
47
|
enabled: true
|
|
48
48
|
},
|
|
49
49
|
title: {
|
|
50
|
-
verticalOffset: .75,
|
|
51
|
-
width: .4
|
|
50
|
+
verticalOffset: 0.75,
|
|
51
|
+
width: 0.4
|
|
52
52
|
}
|
|
53
53
|
};
|
|
54
54
|
export var axisChartTooltip = Tools.merge({}, baseTooltip, {
|
|
@@ -88,14 +88,14 @@ export var timeScale = {
|
|
|
88
88
|
localeObject: enUSLocaleObject,
|
|
89
89
|
timeIntervalFormats: {
|
|
90
90
|
"15seconds": { primary: "MMM d, pp", secondary: "pp" },
|
|
91
|
-
|
|
91
|
+
minute: { primary: "MMM d, p", secondary: "p" },
|
|
92
92
|
"30minutes": { primary: "MMM d, p", secondary: "p" },
|
|
93
|
-
|
|
94
|
-
|
|
95
|
-
|
|
96
|
-
|
|
97
|
-
|
|
98
|
-
|
|
93
|
+
hourly: { primary: "MMM d, hh a", secondary: "hh a" },
|
|
94
|
+
daily: { primary: "MMM d", secondary: "d" },
|
|
95
|
+
weekly: { primary: "eee, MMM d", secondary: "eee" },
|
|
96
|
+
monthly: { primary: "MMM yyyy", secondary: "MMM" },
|
|
97
|
+
quarterly: { primary: "QQQ ''yy", secondary: "QQQ" },
|
|
98
|
+
yearly: { primary: "yyyy", secondary: "yyyy" }
|
|
99
99
|
}
|
|
100
100
|
};
|
|
101
101
|
/**
|
|
@@ -111,7 +111,8 @@ var chart = {
|
|
|
111
111
|
prefix: "cc"
|
|
112
112
|
},
|
|
113
113
|
data: {
|
|
114
|
-
groupMapsTo: "group"
|
|
114
|
+
groupMapsTo: "group",
|
|
115
|
+
loading: false
|
|
115
116
|
},
|
|
116
117
|
color: {
|
|
117
118
|
scale: null
|
|
@@ -136,7 +137,7 @@ var baseBarChart = Tools.merge({}, axisChart, {
|
|
|
136
137
|
timeScale: Tools.merge(timeScale, {
|
|
137
138
|
addSpaceOnEdges: 1
|
|
138
139
|
}),
|
|
139
|
-
tooltip: barChartTooltip
|
|
140
|
+
tooltip: barChartTooltip
|
|
140
141
|
});
|
|
141
142
|
/**
|
|
142
143
|
* options specific to simple bar charts
|
|
@@ -184,8 +185,8 @@ var bubbleChart = Tools.merge({}, axisChart, {
|
|
|
184
185
|
radiusRange: function (chartSize, data) {
|
|
185
186
|
var smallerChartDimension = Math.min(chartSize.width, chartSize.height);
|
|
186
187
|
return [
|
|
187
|
-
smallerChartDimension * 3 / 400,
|
|
188
|
-
smallerChartDimension * 25 / 400
|
|
188
|
+
(smallerChartDimension * 3) / 400,
|
|
189
|
+
(smallerChartDimension * 25) / 400
|
|
189
190
|
];
|
|
190
191
|
},
|
|
191
192
|
fillOpacity: 0.2
|
|
@@ -254,7 +255,9 @@ var radarChart = Tools.merge({}, chart, {
|
|
|
254
255
|
gridline: {
|
|
255
256
|
enabled: true
|
|
256
257
|
},
|
|
257
|
-
valueFormatter: function (value) {
|
|
258
|
+
valueFormatter: function (value) {
|
|
259
|
+
return value !== null && value !== undefined ? value : "N/A";
|
|
260
|
+
}
|
|
258
261
|
}
|
|
259
262
|
});
|
|
260
263
|
export var options = {
|
package/configuration.js.map
CHANGED
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"configuration.js","sourceRoot":"","sources":["configuration.ts"],"names":[],"mappings":"AAAA,OAAO,EAAE,KAAK,EAAE,MAAM,SAAS,CAAC;AAChC,OAAO,EAmBN,eAAe,EAEf,MAAM,cAAc,CAAC;AACtB,OAAO,gBAAgB,MAAM,6BAA6B,CAAC;AAE3D;;;;GAIG;AAEH;;GAEG;AACH,MAAM,CAAC,IAAM,MAAM,GAAkB;IACpC,QAAQ,EAAE,eAAe,CAAC,MAAM;IAChC,SAAS,EAAE,IAAI;IACf,OAAO,EAAE,IAAI;IACb,KAAK,EAAE;QACN,MAAM,EAAE;YACP,MAAM,EAAE,CAAC;YACT,QAAQ,EAAE,CAAC;SACX;QACD,eAAe,EAAE,EAAE;QACnB,aAAa,EAAE,EAAE;QACjB,WAAW,EAAE,CAAC;KACd;IACD,QAAQ,EAAE;QACT,MAAM,EAAE,GAAG;QACX,UAAU,EAAE,CAAC;KACb;CACD,CAAC;AAEF;;GAEG;AACH,MAAM,CAAC,IAAM,IAAI,GAAgB;IAChC,CAAC,EAAE;QACF,aAAa,EAAE,CAAC;KAChB;IACD,CAAC,EAAE;QACF,aAAa,EAAE,CAAC;KAChB;CACD,CAAC;AAEF;;GAEG;AACH,MAAM,CAAC,IAAM,WAAW,GAAmB;IAC1C,SAAS,EAAE;QACV,gBAAgB,EAAE,EAAE;QACpB,OAAO,EAAE,IAAI;KACb;IACD,KAAK,EAAE;QACN,cAAc,EAAE,GAAG;QACnB,KAAK,EAAE,EAAE;KACT;CACD,CAAC;AAEF,MAAM,CAAC,IAAM,gBAAgB,GAAuB,KAAK,CAAC,KAAK,CAAC,EAAE,EAAE,WAAW,EAAE;IAChF,QAAQ,EAAE;QACT,OAAO,EAAE,IAAI;QACb,SAAS,EAAE,IAAI;KACf;CACqB,CAAC,CAAC;AAEzB,MAAM,CAAC,IAAM,eAAe,GAAsB,KAAK,CAAC,KAAK,CAAC,EAAE,EAAE,gBAAgB,EAAE;IACnF,SAAS,EAAE;QACV,cAAc,EAAE,CAAC;KACjB;IACD,QAAQ,EAAE;QACT,OAAO,EAAE,KAAK;KACd;CACoB,CAAC,CAAC;AAExB,kEAAkE;AAClE,kDAAkD;AAClD,6BAA6B;AAC7B,IAAM,IAAI,GAAgB;IACzB,GAAG,EAAE;QACJ,WAAW,EAAE,IAAI;KACjB;IACD,MAAM,EAAE;QACP,WAAW,EAAE,IAAI;KACjB;IACD,IAAI,EAAE;QACL,WAAW,EAAE,IAAI;KACjB;IACD,KAAK,EAAE;QACN,WAAW,EAAE,IAAI;KACjB;CACD,CAAC;AAEF,MAAM,CAAC,IAAM,SAAS,GAAqB;IAC1C,eAAe,EAAE,CAAC;IAClB,WAAW,EAAE,KAAK;IAClB,YAAY,EAAE,gBAAgB;IAC9B,mBAAmB,EAAE;QACpB,WAAW,EAAE,EAAE,OAAO,EAAE,WAAW,EAAE,SAAS,EAAE,IAAI,EAAE;QACtD,QAAQ,EAAE,EAAE,OAAO,EAAE,UAAU,EAAE,SAAS,EAAE,GAAG,EAAE;QACjD,WAAW,EAAE,EAAE,OAAO,EAAE,UAAU,EAAE,SAAS,EAAE,GAAG,EAAE;QACpD,QAAQ,EAAE,EAAE,OAAO,EAAE,aAAa,EAAE,SAAS,EAAE,MAAM,EAAE;QACvD,OAAO,EAAE,EAAE,OAAO,EAAE,OAAO,EAAE,SAAS,EAAE,GAAG,EAAE;QAC7C,QAAQ,EAAE,EAAE,OAAO,EAAE,YAAY,EAAE,SAAS,EAAE,KAAK,EAAE;QACrD,SAAS,EAAE,EAAE,OAAO,EAAE,UAAU,EAAE,SAAS,EAAE,KAAK,EAAE;QACpD,WAAW,EAAE,EAAE,OAAO,EAAE,UAAU,EAAE,SAAS,EAAE,KAAK,EAAE;QACtD,QAAQ,EAAE,EAAE,OAAO,EAAE,MAAM,EAAE,SAAS,EAAE,MAAM,EAAE;KAChD;CACD,CAAC;AAEF;;GAEG;AACH,IAAM,KAAK,GAAqB;IAC/B,KAAK,EAAE,IAAI;IACX,MAAM,EAAE,IAAI;IACZ,SAAS,EAAE,IAAI;IACf,OAAO,EAAE,WAAW;IACpB,MAAM,QAAA;IACN,KAAK,EAAE;QACN,MAAM,EAAE,IAAI;KACZ;IACD,IAAI,EAAE;QACL,WAAW,EAAE,OAAO;KACpB;IACD,KAAK,EAAE;QACN,KAAK,EAAE,IAAI;KACX;CACD,CAAC;AAEF;;GAEG;AACH,IAAM,SAAS,GAAqB,KAAK,CAAC,KAAK,CAAC,EAAE,EAAE,KAAK,EAAE;IAC1D,IAAI,MAAA;IACJ,SAAS,WAAA;IACT,IAAI,MAAA;IACJ,OAAO,EAAE,gBAAgB;CACL,CAAC,CAAC;AAEvB;;GAEG;AACH,IAAM,YAAY,GAAoB,KAAK,CAAC,KAAK,CAAC,EAAE,EAAE,SAAS,EAAE;IAChE,IAAI,EAAE;QACL,QAAQ,EAAE,EAAE;KACZ;IACD,SAAS,EAAE,KAAK,CAAC,KAAK,CAAC,SAAS,EAAE;QACjC,eAAe,EAAE,CAAC;KACE,CAAC;IACtB,OAAO,EAAE,eAAe;CACL,CAAC,CAAC;AAEtB;;GAEG;AACH,IAAM,cAAc,GAAoB,KAAK,CAAC,KAAK,CAAC,EAAE,EAAE,YAAY,EAAE,EAElD,CAAC,CAAC;AAEtB;;GAEG;AACH,IAAM,eAAe,GAAoB,KAAK,CAAC,KAAK,CAAC,EAAE,EAAE,YAAY,EAAE,EAEnD,CAAC,CAAC;AAEtB;;GAEG;AACH,IAAM,eAAe,GAA2B,KAAK,CAAC,KAAK,CAAC,EAAE,EAAE,YAAY,EAAE;IAC7E,IAAI,EAAE,KAAK,CAAC,KAAK,CAAC,EAAE,EAAE,YAAY,CAAC,IAAI,EAAE;QACxC,WAAW,EAAE,GAAG;KACK,CAAC;CACJ,CAAC,CAAC;AAEtB;;GAEG;AACH,IAAM,SAAS,GAAqB,KAAK,CAAC,KAAK,CAAC,EAAE,EAAE,SAAS,EAAE;IAC9D,MAAM,EAAE;QACP,4BAA4B;QAC5B,MAAM,EAAE,CAAC;QACT,MAAM,EAAE,KAAK;KACb;CACmB,CAAC,CAAC;AAEvB;;GAEG;AACH,IAAM,YAAY,GAAwB,KAAK,CAAC,KAAK,CAAC,EAAE,EAAE,SAAS,EAAE;IACpE,MAAM,EAAE;QACP,4BAA4B;QAC5B,MAAM,EAAE,CAAC;QACT,WAAW,EAAE,GAAG;QAChB,MAAM,EAAE,IAAI;KACZ;CACsB,CAAC,CAAC;AAE1B;;GAEG;AACH,IAAM,WAAW,GAAuB,KAAK,CAAC,KAAK,CAAC,EAAE,EAAE,SAAS,EAAE;IAClE,MAAM,EAAE;QACP,YAAY,EAAE,QAAQ;QACtB,WAAW,EAAE,UAAC,SAAS,EAAE,IAAI;YAC5B,IAAM,qBAAqB,GAAG,IAAI,CAAC,GAAG,CAAC,SAAS,CAAC,KAAK,EAAE,SAAS,CAAC,MAAM,CAAC,CAAC;YAC1E,OAAO;gBACN,qBAAqB,GAAG,CAAC,GAAG,GAAG;gBAC/B,qBAAqB,GAAG,EAAE,GAAG,GAAG;aAChC,CAAC;QACH,CAAC;QACD,WAAW,EAAE,GAAG;KAChB;CACqB,CAAC,CAAC;AAEzB;;GAEG;AACH,IAAM,QAAQ,GAAoB,KAAK,CAAC,KAAK,CAAC,EAAE,EAAE,KAAK,EAAE;IACxD,GAAG,EAAE;QACJ,YAAY,EAAE,CAAC,EAAE;QACjB,WAAW,EAAE,CAAC;QACd,QAAQ,EAAE,KAAK;QACf,QAAQ,EAAE;YACT,iBAAiB,EAAE,CAAC;SACpB;QACD,OAAO,EAAE,EAAE;QACX,OAAO,EAAE,EAAE;QACX,cAAc,EAAE,EAAE;QAClB,OAAO,EAAE;YACR,cAAc,EAAE,CAAC;YACjB,OAAO,EAAE,EAAE;YACX,OAAO,EAAE,EAAE;YACX,oBAAoB,EAAE,CAAC;YACvB,UAAU,EAAE,CAAC;SACb;QACD,MAAM,EAAE;YACP,SAAS,EAAE,IAAI;SACf;KACD;CACkB,CAAC,CAAC;AAEtB;;GAEG;AACH,IAAM,UAAU,GAAsB,KAAK,CAAC,KAAK,CAAC,EAAE,EAAE,QAAQ,EAAE;IAC/D,KAAK,EAAE;QACN,MAAM,EAAE;YACP,cAAc,EAAE,UAAA,MAAM,IAAI,OAAA,IAAI,CAAC,GAAG,CAAC,CAAC,MAAM,GAAG,GAAG,CAAC,GAAG,EAAE,EAAE,EAAE,CAAC,GAAG,IAAI,EAAxC,CAAwC;YAClE,aAAa,EAAE,UAAA,MAAM,IAAI,OAAA,IAAI,CAAC,GAAG,CAAC,CAAC,MAAM,GAAG,GAAG,CAAC,GAAG,EAAE,EAAE,EAAE,CAAC,GAAG,IAAI,EAAxC,CAAwC;YACjE,cAAc,EAAE,UAAA,MAAM,IAAI,OAAA,IAAI,CAAC,GAAG,CAAC,CAAC,MAAM,GAAG,EAAE,CAAC,GAAG,EAAE,EAAE,EAAE,CAAC,EAAhC,CAAgC;YAC1D,eAAe,EAAE,UAAA,MAAM,IAAI,OAAA,IAAI,CAAC,KAAK,CAAC,MAAM,CAAC,CAAC,cAAc,EAAE,EAAnC,CAAmC;SAC9D;KACD;CACoB,CAAC,CAAC;AAExB;;GAEG;AACH,IAAM,UAAU,GAAsB,KAAK,CAAC,KAAK,CAAC,EAAE,EAAE,KAAK,EAAE;IAC5D,KAAK,EAAE;QACN,IAAI,EAAE;YACL,KAAK,EAAE,KAAK;YACZ,KAAK,EAAE,OAAO;SACd;QACD,OAAO,EAAE;YACR,UAAU,EAAE,GAAG;YACf,QAAQ,EAAE,GAAG;SACb;QACD,aAAa,EAAE,EAAE;QACjB,aAAa,EAAE,CAAC;QAChB,YAAY,EAAE,CAAC;QACf,QAAQ,EAAE,EAAE;QACZ,eAAe,EAAE,EAAE;QACnB,UAAU,EAAE,CAAC;KACb;IACD,OAAO,EAAE;QACR,QAAQ,EAAE;YACT,OAAO,EAAE,IAAI;SACb;QACD,cAAc,EAAE,UAAA,KAAK,IAAI,OAAA,KAAK,KAAK,IAAI,IAAI,KAAK,KAAK,SAAS,CAAC,CAAC,CAAC,KAAK,CAAC,CAAC,CAAC,KAAK,EAArD,CAAqD;KAC9E;CACoB,CAAC,CAAC;AAExB,MAAM,CAAC,IAAM,OAAO,GAAG;IACtB,KAAK,OAAA;IACL,SAAS,WAAA;IACT,cAAc,gBAAA;IACd,eAAe,iBAAA;IACf,eAAe,iBAAA;IACf,WAAW,aAAA;IACX,SAAS,WAAA;IACT,YAAY,cAAA;IACZ,QAAQ,UAAA;IACR,UAAU,YAAA;IACV,UAAU,YAAA;CACV,CAAC;AAEF;;GAEG;AACH,MAAM,CAAC,IAAM,KAAK,GAAG;IACpB,OAAO,EAAE;QACR,UAAU,EAAE,GAAG;QACf,QAAQ,EAAE,CAAC;KACX;CACD,CAAC;AAEF;;GAEG;AACH,MAAM,CAAC,IAAM,WAAW,GAAG;IAC1B,OAAO,EAAE;QACR,QAAQ,EAAE,GAAG;KACb;IACD,mBAAmB,EAAE;QACpB,QAAQ,EAAE,GAAG;KACb;IACD,gBAAgB,EAAE;QACjB,QAAQ,EAAE,GAAG;KACb;IACD,mCAAmC,EAAE;QACpC,QAAQ,EAAE,GAAG;KACb;IACD,kCAAkC,EAAE;QACnC,QAAQ,EAAE,GAAG;KACb;CACD,CAAC;AAEF,MAAM,CAAC,IAAM,IAAI,GAAG;IACnB,KAAK,EAAE;QACN,MAAM,EAAE,CAAC;QACT,mBAAmB,EAAE,EAAE;KACvB;IACD,YAAY,EAAE,GAAG;CACjB,CAAC;AAEF,MAAM,CAAC,IAAM,OAAO,GAAG;IACtB,OAAO,EAAE;QACR,IAAI,EAAE,EAAE;KACR;CACD,CAAC;AAEF,MAAM,CAAC,IAAM,sBAAsB,GAAG,GAAG,CAAC;AAC1C,MAAM,CAAC,IAAM,wBAAwB,GAAG,GAAG,CAAC","sourcesContent":["import { Tools } from \"./tools\";\nimport {\n\tBaseChartOptions,\n\tAxisChartOptions,\n\tScatterChartOptions,\n\tLineChartOptions,\n\tBarChartOptions,\n\tStackedBarChartOptions,\n\tPieChartOptions,\n\tDonutChartOptions,\n\tBubbleChartOptions,\n\tRadarChartOptions,\n\t// Components\n\tGridOptions,\n\tAxesOptions,\n\tTimeScaleOptions,\n\tTooltipOptions,\n\tAxisTooltipOptions,\n\tBarTooltipOptions,\n\tLegendOptions,\n\tLegendPositions,\n\tStackedBarOptions\n} from \"./interfaces\";\nimport enUSLocaleObject from \"date-fns/locale/en-US/index\";\n\n/*\n *****************************\n * User configurable options *\n *****************************\n */\n\n/**\n * Legend options\n */\nexport const legend: LegendOptions = {\n\tposition: LegendPositions.BOTTOM,\n\tclickable: true,\n\tenabled: true,\n\titems: {\n\t\tstatus: {\n\t\t\tACTIVE: 1,\n\t\t\tDISABLED: 0\n\t\t},\n\t\thorizontalSpace: 12,\n\t\tverticalSpace: 24,\n\t\ttextYOffset: 8\n\t},\n\tcheckbox: {\n\t\tradius: 6.5,\n\t\tspaceAfter: 4\n\t}\n};\n\n/**\n * Grid options\n */\nexport const grid: GridOptions = {\n\tx: {\n\t\tnumberOfTicks: 5\n\t},\n\ty: {\n\t\tnumberOfTicks: 5\n\t}\n};\n\n/**\n * Tooltip options\n */\nexport const baseTooltip: TooltipOptions = {\n\tdatapoint: {\n\t\thorizontalOffset: 10,\n\t\tenabled: true\n\t},\n\ttitle: {\n\t\tverticalOffset: .75,\n\t\twidth: .4\n\t}\n};\n\nexport const axisChartTooltip: AxisTooltipOptions = Tools.merge({}, baseTooltip, {\n\tgridline: {\n\t\tenabled: true,\n\t\tthreshold: 0.02\n\t}\n} as AxisTooltipOptions);\n\nexport const barChartTooltip: BarTooltipOptions = Tools.merge({}, axisChartTooltip, {\n\tdatapoint: {\n\t\tverticalOffset: 4\n\t},\n\tgridline: {\n\t\tenabled: false\n\t}\n} as BarTooltipOptions);\n\n// These options will be managed by Tools.mergeDefaultChartOptions\n// by removing the ones the user is not providing,\n// and by TwoDimensionalAxes.\nconst axes: AxesOptions = {\n\ttop: {\n\t\tincludeZero: true\n\t},\n\tbottom: {\n\t\tincludeZero: true\n\t},\n\tleft: {\n\t\tincludeZero: true\n\t},\n\tright: {\n\t\tincludeZero: true\n\t}\n};\n\nexport const timeScale: TimeScaleOptions = {\n\taddSpaceOnEdges: 1,\n\tshowDayName: false,\n\tlocaleObject: enUSLocaleObject,\n\ttimeIntervalFormats: {\n\t\t\"15seconds\": { primary: \"MMM d, pp\", secondary: \"pp\" },\n\t\t\"minute\": { primary: \"MMM d, p\", secondary: \"p\" },\n\t\t\"30minutes\": { primary: \"MMM d, p\", secondary: \"p\" },\n\t\t\"hourly\": { primary: \"MMM d, hh a\", secondary: \"hh a\" },\n\t\t\"daily\": { primary: \"MMM d\", secondary: \"d\" },\n\t\t\"weekly\": { primary: \"eee, MMM d\", secondary: \"eee\" },\n\t\t\"monthly\": { primary: \"MMM yyyy\", secondary: \"MMM\" },\n\t\t\"quarterly\": { primary: \"QQQ ''yy\", secondary: \"QQQ\" },\n\t\t\"yearly\": { primary: \"yyyy\", secondary: \"yyyy\" }\n\t}\n};\n\n/**\n * Base chart options common to any chart\n */\nconst chart: BaseChartOptions = {\n\twidth: null,\n\theight: null,\n\tresizable: true,\n\ttooltip: baseTooltip,\n\tlegend,\n\tstyle: {\n\t\tprefix: \"cc\"\n\t},\n\tdata: {\n\t\tgroupMapsTo: \"group\"\n\t},\n\tcolor: {\n\t\tscale: null\n\t}\n};\n\n/**\n * Options common to any chart with an axis\n */\nconst axisChart: AxisChartOptions = Tools.merge({}, chart, {\n\taxes,\n\ttimeScale,\n\tgrid,\n\ttooltip: axisChartTooltip\n} as AxisChartOptions);\n\n/**\n * options specific to simple bar charts\n */\nconst baseBarChart: BarChartOptions = Tools.merge({}, axisChart, {\n\tbars: {\n\t\tmaxWidth: 16\n\t},\n\ttimeScale: Tools.merge(timeScale, {\n\t\taddSpaceOnEdges: 1\n\t} as TimeScaleOptions),\n\ttooltip: barChartTooltip,\n} as BarChartOptions);\n\n/**\n * options specific to simple bar charts\n */\nconst simpleBarChart: BarChartOptions = Tools.merge({}, baseBarChart, {\n\n} as BarChartOptions);\n\n/**\n * options specific to simple bar charts\n */\nconst groupedBarChart: BarChartOptions = Tools.merge({}, baseBarChart, {\n\n} as BarChartOptions);\n\n/**\n * options specific to stacked bar charts\n */\nconst stackedBarChart: StackedBarChartOptions = Tools.merge({}, baseBarChart, {\n\tbars: Tools.merge({}, baseBarChart.bars, {\n\t\tdividerSize: 1.5\n\t} as StackedBarOptions)\n} as BarChartOptions);\n\n/**\n * options specific to line charts\n */\nconst lineChart: LineChartOptions = Tools.merge({}, axisChart, {\n\tpoints: {\n\t\t// default point radius to 3\n\t\tradius: 3,\n\t\tfilled: false\n\t}\n} as LineChartOptions);\n\n/**\n * options specific to scatter charts\n */\nconst scatterChart: ScatterChartOptions = Tools.merge({}, axisChart, {\n\tpoints: {\n\t\t// default point radius to 4\n\t\tradius: 4,\n\t\tfillOpacity: 0.3,\n\t\tfilled: true\n\t}\n} as ScatterChartOptions);\n\n/**\n * options specific to bubble charts\n */\nconst bubbleChart: BubbleChartOptions = Tools.merge({}, axisChart, {\n\tbubble: {\n\t\tradiusMapsTo: \"radius\",\n\t\tradiusRange: (chartSize, data) => {\n\t\t\tconst smallerChartDimension = Math.min(chartSize.width, chartSize.height);\n\t\t\treturn [\n\t\t\t\tsmallerChartDimension * 3 / 400,\n\t\t\t\tsmallerChartDimension * 25 / 400\n\t\t\t];\n\t\t},\n\t\tfillOpacity: 0.2\n\t}\n} as BubbleChartOptions);\n\n/**\n * options specific to pie charts\n */\nconst pieChart: PieChartOptions = Tools.merge({}, chart, {\n\tpie: {\n\t\tradiusOffset: -15,\n\t\tinnerRadius: 2,\n\t\tpadAngle: 0.007,\n\t\thoverArc: {\n\t\t\touterRadiusOffset: 3\n\t\t},\n\t\txOffset: 30,\n\t\tyOffset: 20,\n\t\tyOffsetCallout: 10,\n\t\tcallout: {\n\t\t\tminSliceDegree: 5,\n\t\t\toffsetX: 15,\n\t\t\toffsetY: 12,\n\t\t\thorizontalLineLength: 8,\n\t\t\ttextMargin: 2\n\t\t},\n\t\tlabels: {\n\t\t\tformatter: null\n\t\t}\n\t}\n} as PieChartOptions);\n\n/**\n * options specific to donut charts\n */\nconst donutChart: DonutChartOptions = Tools.merge({}, pieChart, {\n\tdonut: {\n\t\tcenter: {\n\t\t\tnumberFontSize: radius => Math.min((radius / 100) * 24, 24) + \"px\",\n\t\t\ttitleFontSize: radius => Math.min((radius / 100) * 15, 15) + \"px\",\n\t\t\ttitleYPosition: radius => Math.min((radius / 80) * 20, 20),\n\t\t\tnumberFormatter: number => Math.floor(number).toLocaleString()\n\t\t}\n\t}\n} as DonutChartOptions);\n\n/**\n * options specific to radar charts\n */\nconst radarChart: RadarChartOptions = Tools.merge({}, chart, {\n\tradar: {\n\t\taxes: {\n\t\t\tangle: \"key\",\n\t\t\tvalue: \"value\"\n\t\t},\n\t\topacity: {\n\t\t\tunselected: 0.1,\n\t\t\tselected: 0.3\n\t\t},\n\t\txLabelPadding: 10,\n\t\tyLabelPadding: 8,\n\t\tyTicksNumber: 4,\n\t\tminRange: 10,\n\t\txAxisRectHeight: 50,\n\t\tdotsRadius: 5\n\t},\n\ttooltip: {\n\t\tgridline: {\n\t\t\tenabled: true\n\t\t},\n\t\tvalueFormatter: value => value !== null && value !== undefined ? value : \"N/A\"\n\t}\n} as RadarChartOptions);\n\nexport const options = {\n\tchart,\n\taxisChart,\n\tsimpleBarChart,\n\tgroupedBarChart,\n\tstackedBarChart,\n\tbubbleChart,\n\tlineChart,\n\tscatterChart,\n\tpieChart,\n\tdonutChart,\n\tradarChart\n};\n\n/**\n * Options for line behaviour\n */\nexport const lines = {\n\topacity: {\n\t\tunselected: 0.3,\n\t\tselected: 1\n\t}\n};\n\n/**\n * Base transition configuration\n */\nexport const transitions = {\n\tdefault: {\n\t\tduration: 300\n\t},\n\tpie_slice_mouseover: {\n\t\tduration: 100\n\t},\n\tpie_chart_titles: {\n\t\tduration: 375\n\t},\n\tgraph_element_mouseover_fill_update: {\n\t\tduration: 100\n\t},\n\tgraph_element_mouseout_fill_update: {\n\t\tduration: 100\n\t}\n};\n\nexport const axis = {\n\tticks: {\n\t\tnumber: 7,\n\t\trotateIfSmallerThan: 30\n\t},\n\tpaddingRatio: 0.1\n};\n\nexport const spacers = {\n\tdefault: {\n\t\tsize: 24\n\t}\n};\n\nexport const tickSpaceRatioVertical = 2.5;\nexport const tickSpaceRatioHorizontal = 3.5;\n"]}
|
|
1
|
+
{"version":3,"file":"configuration.js","sourceRoot":"","sources":["configuration.ts"],"names":[],"mappings":"AAAA,OAAO,EAAE,KAAK,EAAE,MAAM,SAAS,CAAC;AAChC,OAAO,EAmBN,eAAe,EAEf,MAAM,cAAc,CAAC;AACtB,OAAO,gBAAgB,MAAM,6BAA6B,CAAC;AAE3D;;;;GAIG;AAEH;;GAEG;AACH,MAAM,CAAC,IAAM,MAAM,GAAkB;IACpC,QAAQ,EAAE,eAAe,CAAC,MAAM;IAChC,SAAS,EAAE,IAAI;IACf,OAAO,EAAE,IAAI;IACb,KAAK,EAAE;QACN,MAAM,EAAE;YACP,MAAM,EAAE,CAAC;YACT,QAAQ,EAAE,CAAC;SACX;QACD,eAAe,EAAE,EAAE;QACnB,aAAa,EAAE,EAAE;QACjB,WAAW,EAAE,CAAC;KACd;IACD,QAAQ,EAAE;QACT,MAAM,EAAE,GAAG;QACX,UAAU,EAAE,CAAC;KACb;CACD,CAAC;AAEF;;GAEG;AACH,MAAM,CAAC,IAAM,IAAI,GAAgB;IAChC,CAAC,EAAE;QACF,aAAa,EAAE,CAAC;KAChB;IACD,CAAC,EAAE;QACF,aAAa,EAAE,CAAC;KAChB;CACD,CAAC;AAEF;;GAEG;AACH,MAAM,CAAC,IAAM,WAAW,GAAmB;IAC1C,SAAS,EAAE;QACV,gBAAgB,EAAE,EAAE;QACpB,OAAO,EAAE,IAAI;KACb;IACD,KAAK,EAAE;QACN,cAAc,EAAE,IAAI;QACpB,KAAK,EAAE,GAAG;KACV;CACD,CAAC;AAEF,MAAM,CAAC,IAAM,gBAAgB,GAAuB,KAAK,CAAC,KAAK,CAC9D,EAAE,EACF,WAAW,EACX;IACC,QAAQ,EAAE;QACT,OAAO,EAAE,IAAI;QACb,SAAS,EAAE,IAAI;KACf;CACqB,CACvB,CAAC;AAEF,MAAM,CAAC,IAAM,eAAe,GAAsB,KAAK,CAAC,KAAK,CAC5D,EAAE,EACF,gBAAgB,EAChB;IACC,SAAS,EAAE;QACV,cAAc,EAAE,CAAC;KACjB;IACD,QAAQ,EAAE;QACT,OAAO,EAAE,KAAK;KACd;CACoB,CACtB,CAAC;AAEF,kEAAkE;AAClE,kDAAkD;AAClD,6BAA6B;AAC7B,IAAM,IAAI,GAAgB;IACzB,GAAG,EAAE;QACJ,WAAW,EAAE,IAAI;KACjB;IACD,MAAM,EAAE;QACP,WAAW,EAAE,IAAI;KACjB;IACD,IAAI,EAAE;QACL,WAAW,EAAE,IAAI;KACjB;IACD,KAAK,EAAE;QACN,WAAW,EAAE,IAAI;KACjB;CACD,CAAC;AAEF,MAAM,CAAC,IAAM,SAAS,GAAqB;IAC1C,eAAe,EAAE,CAAC;IAClB,WAAW,EAAE,KAAK;IAClB,YAAY,EAAE,gBAAgB;IAC9B,mBAAmB,EAAE;QACpB,WAAW,EAAE,EAAE,OAAO,EAAE,WAAW,EAAE,SAAS,EAAE,IAAI,EAAE;QACtD,MAAM,EAAE,EAAE,OAAO,EAAE,UAAU,EAAE,SAAS,EAAE,GAAG,EAAE;QAC/C,WAAW,EAAE,EAAE,OAAO,EAAE,UAAU,EAAE,SAAS,EAAE,GAAG,EAAE;QACpD,MAAM,EAAE,EAAE,OAAO,EAAE,aAAa,EAAE,SAAS,EAAE,MAAM,EAAE;QACrD,KAAK,EAAE,EAAE,OAAO,EAAE,OAAO,EAAE,SAAS,EAAE,GAAG,EAAE;QAC3C,MAAM,EAAE,EAAE,OAAO,EAAE,YAAY,EAAE,SAAS,EAAE,KAAK,EAAE;QACnD,OAAO,EAAE,EAAE,OAAO,EAAE,UAAU,EAAE,SAAS,EAAE,KAAK,EAAE;QAClD,SAAS,EAAE,EAAE,OAAO,EAAE,UAAU,EAAE,SAAS,EAAE,KAAK,EAAE;QACpD,MAAM,EAAE,EAAE,OAAO,EAAE,MAAM,EAAE,SAAS,EAAE,MAAM,EAAE;KAC9C;CACD,CAAC;AAEF;;GAEG;AACH,IAAM,KAAK,GAAqB;IAC/B,KAAK,EAAE,IAAI;IACX,MAAM,EAAE,IAAI;IACZ,SAAS,EAAE,IAAI;IACf,OAAO,EAAE,WAAW;IACpB,MAAM,QAAA;IACN,KAAK,EAAE;QACN,MAAM,EAAE,IAAI;KACZ;IACD,IAAI,EAAE;QACL,WAAW,EAAE,OAAO;QACpB,OAAO,EAAE,KAAK;KACd;IACD,KAAK,EAAE;QACN,KAAK,EAAE,IAAI;KACX;CACD,CAAC;AAEF;;GAEG;AACH,IAAM,SAAS,GAAqB,KAAK,CAAC,KAAK,CAAC,EAAE,EAAE,KAAK,EAAE;IAC1D,IAAI,MAAA;IACJ,SAAS,WAAA;IACT,IAAI,MAAA;IACJ,OAAO,EAAE,gBAAgB;CACL,CAAC,CAAC;AAEvB;;GAEG;AACH,IAAM,YAAY,GAAoB,KAAK,CAAC,KAAK,CAAC,EAAE,EAAE,SAAS,EAAE;IAChE,IAAI,EAAE;QACL,QAAQ,EAAE,EAAE;KACZ;IACD,SAAS,EAAE,KAAK,CAAC,KAAK,CAAC,SAAS,EAAE;QACjC,eAAe,EAAE,CAAC;KACE,CAAC;IACtB,OAAO,EAAE,eAAe;CACL,CAAC,CAAC;AAEtB;;GAEG;AACH,IAAM,cAAc,GAAoB,KAAK,CAAC,KAAK,CAClD,EAAE,EACF,YAAY,EACZ,EAAqB,CACrB,CAAC;AAEF;;GAEG;AACH,IAAM,eAAe,GAAoB,KAAK,CAAC,KAAK,CACnD,EAAE,EACF,YAAY,EACZ,EAAqB,CACrB,CAAC;AAEF;;GAEG;AACH,IAAM,eAAe,GAA2B,KAAK,CAAC,KAAK,CAAC,EAAE,EAAE,YAAY,EAAE;IAC7E,IAAI,EAAE,KAAK,CAAC,KAAK,CAAC,EAAE,EAAE,YAAY,CAAC,IAAI,EAAE;QACxC,WAAW,EAAE,GAAG;KACK,CAAC;CACJ,CAAC,CAAC;AAEtB;;GAEG;AACH,IAAM,SAAS,GAAqB,KAAK,CAAC,KAAK,CAAC,EAAE,EAAE,SAAS,EAAE;IAC9D,MAAM,EAAE;QACP,4BAA4B;QAC5B,MAAM,EAAE,CAAC;QACT,MAAM,EAAE,KAAK;KACb;CACmB,CAAC,CAAC;AAEvB;;GAEG;AACH,IAAM,YAAY,GAAwB,KAAK,CAAC,KAAK,CAAC,EAAE,EAAE,SAAS,EAAE;IACpE,MAAM,EAAE;QACP,4BAA4B;QAC5B,MAAM,EAAE,CAAC;QACT,WAAW,EAAE,GAAG;QAChB,MAAM,EAAE,IAAI;KACZ;CACsB,CAAC,CAAC;AAE1B;;GAEG;AACH,IAAM,WAAW,GAAuB,KAAK,CAAC,KAAK,CAAC,EAAE,EAAE,SAAS,EAAE;IAClE,MAAM,EAAE;QACP,YAAY,EAAE,QAAQ;QACtB,WAAW,EAAE,UAAC,SAAS,EAAE,IAAI;YAC5B,IAAM,qBAAqB,GAAG,IAAI,CAAC,GAAG,CACrC,SAAS,CAAC,KAAK,EACf,SAAS,CAAC,MAAM,CAChB,CAAC;YACF,OAAO;gBACN,CAAC,qBAAqB,GAAG,CAAC,CAAC,GAAG,GAAG;gBACjC,CAAC,qBAAqB,GAAG,EAAE,CAAC,GAAG,GAAG;aAClC,CAAC;QACH,CAAC;QACD,WAAW,EAAE,GAAG;KAChB;CACqB,CAAC,CAAC;AAEzB;;GAEG;AACH,IAAM,QAAQ,GAAoB,KAAK,CAAC,KAAK,CAAC,EAAE,EAAE,KAAK,EAAE;IACxD,GAAG,EAAE;QACJ,YAAY,EAAE,CAAC,EAAE;QACjB,WAAW,EAAE,CAAC;QACd,QAAQ,EAAE,KAAK;QACf,QAAQ,EAAE;YACT,iBAAiB,EAAE,CAAC;SACpB;QACD,OAAO,EAAE,EAAE;QACX,OAAO,EAAE,EAAE;QACX,cAAc,EAAE,EAAE;QAClB,OAAO,EAAE;YACR,cAAc,EAAE,CAAC;YACjB,OAAO,EAAE,EAAE;YACX,OAAO,EAAE,EAAE;YACX,oBAAoB,EAAE,CAAC;YACvB,UAAU,EAAE,CAAC;SACb;QACD,MAAM,EAAE;YACP,SAAS,EAAE,IAAI;SACf;KACD;CACkB,CAAC,CAAC;AAEtB;;GAEG;AACH,IAAM,UAAU,GAAsB,KAAK,CAAC,KAAK,CAAC,EAAE,EAAE,QAAQ,EAAE;IAC/D,KAAK,EAAE;QACN,MAAM,EAAE;YACP,cAAc,EAAE,UAAA,MAAM,IAAI,OAAA,IAAI,CAAC,GAAG,CAAC,CAAC,MAAM,GAAG,GAAG,CAAC,GAAG,EAAE,EAAE,EAAE,CAAC,GAAG,IAAI,EAAxC,CAAwC;YAClE,aAAa,EAAE,UAAA,MAAM,IAAI,OAAA,IAAI,CAAC,GAAG,CAAC,CAAC,MAAM,GAAG,GAAG,CAAC,GAAG,EAAE,EAAE,EAAE,CAAC,GAAG,IAAI,EAAxC,CAAwC;YACjE,cAAc,EAAE,UAAA,MAAM,IAAI,OAAA,IAAI,CAAC,GAAG,CAAC,CAAC,MAAM,GAAG,EAAE,CAAC,GAAG,EAAE,EAAE,EAAE,CAAC,EAAhC,CAAgC;YAC1D,eAAe,EAAE,UAAA,MAAM,IAAI,OAAA,IAAI,CAAC,KAAK,CAAC,MAAM,CAAC,CAAC,cAAc,EAAE,EAAnC,CAAmC;SAC9D;KACD;CACoB,CAAC,CAAC;AAExB;;GAEG;AACH,IAAM,UAAU,GAAsB,KAAK,CAAC,KAAK,CAAC,EAAE,EAAE,KAAK,EAAE;IAC5D,KAAK,EAAE;QACN,IAAI,EAAE;YACL,KAAK,EAAE,KAAK;YACZ,KAAK,EAAE,OAAO;SACd;QACD,OAAO,EAAE;YACR,UAAU,EAAE,GAAG;YACf,QAAQ,EAAE,GAAG;SACb;QACD,aAAa,EAAE,EAAE;QACjB,aAAa,EAAE,CAAC;QAChB,YAAY,EAAE,CAAC;QACf,QAAQ,EAAE,EAAE;QACZ,eAAe,EAAE,EAAE;QACnB,UAAU,EAAE,CAAC;KACb;IACD,OAAO,EAAE;QACR,QAAQ,EAAE;YACT,OAAO,EAAE,IAAI;SACb;QACD,cAAc,EAAE,UAAA,KAAK;YACpB,OAAA,KAAK,KAAK,IAAI,IAAI,KAAK,KAAK,SAAS,CAAC,CAAC,CAAC,KAAK,CAAC,CAAC,CAAC,KAAK;QAArD,CAAqD;KACtD;CACoB,CAAC,CAAC;AAExB,MAAM,CAAC,IAAM,OAAO,GAAG;IACtB,KAAK,OAAA;IACL,SAAS,WAAA;IACT,cAAc,gBAAA;IACd,eAAe,iBAAA;IACf,eAAe,iBAAA;IACf,WAAW,aAAA;IACX,SAAS,WAAA;IACT,YAAY,cAAA;IACZ,QAAQ,UAAA;IACR,UAAU,YAAA;IACV,UAAU,YAAA;CACV,CAAC;AAEF;;GAEG;AACH,MAAM,CAAC,IAAM,KAAK,GAAG;IACpB,OAAO,EAAE;QACR,UAAU,EAAE,GAAG;QACf,QAAQ,EAAE,CAAC;KACX;CACD,CAAC;AAEF;;GAEG;AACH,MAAM,CAAC,IAAM,WAAW,GAAG;IAC1B,OAAO,EAAE;QACR,QAAQ,EAAE,GAAG;KACb;IACD,mBAAmB,EAAE;QACpB,QAAQ,EAAE,GAAG;KACb;IACD,gBAAgB,EAAE;QACjB,QAAQ,EAAE,GAAG;KACb;IACD,mCAAmC,EAAE;QACpC,QAAQ,EAAE,GAAG;KACb;IACD,kCAAkC,EAAE;QACnC,QAAQ,EAAE,GAAG;KACb;CACD,CAAC;AAEF,MAAM,CAAC,IAAM,IAAI,GAAG;IACnB,KAAK,EAAE;QACN,MAAM,EAAE,CAAC;QACT,mBAAmB,EAAE,EAAE;KACvB;IACD,YAAY,EAAE,GAAG;CACjB,CAAC;AAEF,MAAM,CAAC,IAAM,OAAO,GAAG;IACtB,OAAO,EAAE;QACR,IAAI,EAAE,EAAE;KACR;CACD,CAAC;AAEF,MAAM,CAAC,IAAM,sBAAsB,GAAG,GAAG,CAAC;AAC1C,MAAM,CAAC,IAAM,wBAAwB,GAAG,GAAG,CAAC","sourcesContent":["import { Tools } from \"./tools\";\nimport {\n\tBaseChartOptions,\n\tAxisChartOptions,\n\tScatterChartOptions,\n\tLineChartOptions,\n\tBarChartOptions,\n\tStackedBarChartOptions,\n\tPieChartOptions,\n\tDonutChartOptions,\n\tBubbleChartOptions,\n\tRadarChartOptions,\n\t// Components\n\tGridOptions,\n\tAxesOptions,\n\tTimeScaleOptions,\n\tTooltipOptions,\n\tAxisTooltipOptions,\n\tBarTooltipOptions,\n\tLegendOptions,\n\tLegendPositions,\n\tStackedBarOptions\n} from \"./interfaces\";\nimport enUSLocaleObject from \"date-fns/locale/en-US/index\";\n\n/*\n *****************************\n * User configurable options *\n *****************************\n */\n\n/**\n * Legend options\n */\nexport const legend: LegendOptions = {\n\tposition: LegendPositions.BOTTOM,\n\tclickable: true,\n\tenabled: true,\n\titems: {\n\t\tstatus: {\n\t\t\tACTIVE: 1,\n\t\t\tDISABLED: 0\n\t\t},\n\t\thorizontalSpace: 12,\n\t\tverticalSpace: 24,\n\t\ttextYOffset: 8\n\t},\n\tcheckbox: {\n\t\tradius: 6.5,\n\t\tspaceAfter: 4\n\t}\n};\n\n/**\n * Grid options\n */\nexport const grid: GridOptions = {\n\tx: {\n\t\tnumberOfTicks: 5\n\t},\n\ty: {\n\t\tnumberOfTicks: 5\n\t}\n};\n\n/**\n * Tooltip options\n */\nexport const baseTooltip: TooltipOptions = {\n\tdatapoint: {\n\t\thorizontalOffset: 10,\n\t\tenabled: true\n\t},\n\ttitle: {\n\t\tverticalOffset: 0.75,\n\t\twidth: 0.4\n\t}\n};\n\nexport const axisChartTooltip: AxisTooltipOptions = Tools.merge(\n\t{},\n\tbaseTooltip,\n\t{\n\t\tgridline: {\n\t\t\tenabled: true,\n\t\t\tthreshold: 0.02\n\t\t}\n\t} as AxisTooltipOptions\n);\n\nexport const barChartTooltip: BarTooltipOptions = Tools.merge(\n\t{},\n\taxisChartTooltip,\n\t{\n\t\tdatapoint: {\n\t\t\tverticalOffset: 4\n\t\t},\n\t\tgridline: {\n\t\t\tenabled: false\n\t\t}\n\t} as BarTooltipOptions\n);\n\n// These options will be managed by Tools.mergeDefaultChartOptions\n// by removing the ones the user is not providing,\n// and by TwoDimensionalAxes.\nconst axes: AxesOptions = {\n\ttop: {\n\t\tincludeZero: true\n\t},\n\tbottom: {\n\t\tincludeZero: true\n\t},\n\tleft: {\n\t\tincludeZero: true\n\t},\n\tright: {\n\t\tincludeZero: true\n\t}\n};\n\nexport const timeScale: TimeScaleOptions = {\n\taddSpaceOnEdges: 1,\n\tshowDayName: false,\n\tlocaleObject: enUSLocaleObject,\n\ttimeIntervalFormats: {\n\t\t\"15seconds\": { primary: \"MMM d, pp\", secondary: \"pp\" },\n\t\tminute: { primary: \"MMM d, p\", secondary: \"p\" },\n\t\t\"30minutes\": { primary: \"MMM d, p\", secondary: \"p\" },\n\t\thourly: { primary: \"MMM d, hh a\", secondary: \"hh a\" },\n\t\tdaily: { primary: \"MMM d\", secondary: \"d\" },\n\t\tweekly: { primary: \"eee, MMM d\", secondary: \"eee\" },\n\t\tmonthly: { primary: \"MMM yyyy\", secondary: \"MMM\" },\n\t\tquarterly: { primary: \"QQQ ''yy\", secondary: \"QQQ\" },\n\t\tyearly: { primary: \"yyyy\", secondary: \"yyyy\" }\n\t}\n};\n\n/**\n * Base chart options common to any chart\n */\nconst chart: BaseChartOptions = {\n\twidth: null,\n\theight: null,\n\tresizable: true,\n\ttooltip: baseTooltip,\n\tlegend,\n\tstyle: {\n\t\tprefix: \"cc\"\n\t},\n\tdata: {\n\t\tgroupMapsTo: \"group\",\n\t\tloading: false\n\t},\n\tcolor: {\n\t\tscale: null\n\t}\n};\n\n/**\n * Options common to any chart with an axis\n */\nconst axisChart: AxisChartOptions = Tools.merge({}, chart, {\n\taxes,\n\ttimeScale,\n\tgrid,\n\ttooltip: axisChartTooltip\n} as AxisChartOptions);\n\n/**\n * options specific to simple bar charts\n */\nconst baseBarChart: BarChartOptions = Tools.merge({}, axisChart, {\n\tbars: {\n\t\tmaxWidth: 16\n\t},\n\ttimeScale: Tools.merge(timeScale, {\n\t\taddSpaceOnEdges: 1\n\t} as TimeScaleOptions),\n\ttooltip: barChartTooltip\n} as BarChartOptions);\n\n/**\n * options specific to simple bar charts\n */\nconst simpleBarChart: BarChartOptions = Tools.merge(\n\t{},\n\tbaseBarChart,\n\t{} as BarChartOptions\n);\n\n/**\n * options specific to simple bar charts\n */\nconst groupedBarChart: BarChartOptions = Tools.merge(\n\t{},\n\tbaseBarChart,\n\t{} as BarChartOptions\n);\n\n/**\n * options specific to stacked bar charts\n */\nconst stackedBarChart: StackedBarChartOptions = Tools.merge({}, baseBarChart, {\n\tbars: Tools.merge({}, baseBarChart.bars, {\n\t\tdividerSize: 1.5\n\t} as StackedBarOptions)\n} as BarChartOptions);\n\n/**\n * options specific to line charts\n */\nconst lineChart: LineChartOptions = Tools.merge({}, axisChart, {\n\tpoints: {\n\t\t// default point radius to 3\n\t\tradius: 3,\n\t\tfilled: false\n\t}\n} as LineChartOptions);\n\n/**\n * options specific to scatter charts\n */\nconst scatterChart: ScatterChartOptions = Tools.merge({}, axisChart, {\n\tpoints: {\n\t\t// default point radius to 4\n\t\tradius: 4,\n\t\tfillOpacity: 0.3,\n\t\tfilled: true\n\t}\n} as ScatterChartOptions);\n\n/**\n * options specific to bubble charts\n */\nconst bubbleChart: BubbleChartOptions = Tools.merge({}, axisChart, {\n\tbubble: {\n\t\tradiusMapsTo: \"radius\",\n\t\tradiusRange: (chartSize, data) => {\n\t\t\tconst smallerChartDimension = Math.min(\n\t\t\t\tchartSize.width,\n\t\t\t\tchartSize.height\n\t\t\t);\n\t\t\treturn [\n\t\t\t\t(smallerChartDimension * 3) / 400,\n\t\t\t\t(smallerChartDimension * 25) / 400\n\t\t\t];\n\t\t},\n\t\tfillOpacity: 0.2\n\t}\n} as BubbleChartOptions);\n\n/**\n * options specific to pie charts\n */\nconst pieChart: PieChartOptions = Tools.merge({}, chart, {\n\tpie: {\n\t\tradiusOffset: -15,\n\t\tinnerRadius: 2,\n\t\tpadAngle: 0.007,\n\t\thoverArc: {\n\t\t\touterRadiusOffset: 3\n\t\t},\n\t\txOffset: 30,\n\t\tyOffset: 20,\n\t\tyOffsetCallout: 10,\n\t\tcallout: {\n\t\t\tminSliceDegree: 5,\n\t\t\toffsetX: 15,\n\t\t\toffsetY: 12,\n\t\t\thorizontalLineLength: 8,\n\t\t\ttextMargin: 2\n\t\t},\n\t\tlabels: {\n\t\t\tformatter: null\n\t\t}\n\t}\n} as PieChartOptions);\n\n/**\n * options specific to donut charts\n */\nconst donutChart: DonutChartOptions = Tools.merge({}, pieChart, {\n\tdonut: {\n\t\tcenter: {\n\t\t\tnumberFontSize: radius => Math.min((radius / 100) * 24, 24) + \"px\",\n\t\t\ttitleFontSize: radius => Math.min((radius / 100) * 15, 15) + \"px\",\n\t\t\ttitleYPosition: radius => Math.min((radius / 80) * 20, 20),\n\t\t\tnumberFormatter: number => Math.floor(number).toLocaleString()\n\t\t}\n\t}\n} as DonutChartOptions);\n\n/**\n * options specific to radar charts\n */\nconst radarChart: RadarChartOptions = Tools.merge({}, chart, {\n\tradar: {\n\t\taxes: {\n\t\t\tangle: \"key\",\n\t\t\tvalue: \"value\"\n\t\t},\n\t\topacity: {\n\t\t\tunselected: 0.1,\n\t\t\tselected: 0.3\n\t\t},\n\t\txLabelPadding: 10,\n\t\tyLabelPadding: 8,\n\t\tyTicksNumber: 4,\n\t\tminRange: 10,\n\t\txAxisRectHeight: 50,\n\t\tdotsRadius: 5\n\t},\n\ttooltip: {\n\t\tgridline: {\n\t\t\tenabled: true\n\t\t},\n\t\tvalueFormatter: value =>\n\t\t\tvalue !== null && value !== undefined ? value : \"N/A\"\n\t}\n} as RadarChartOptions);\n\nexport const options = {\n\tchart,\n\taxisChart,\n\tsimpleBarChart,\n\tgroupedBarChart,\n\tstackedBarChart,\n\tbubbleChart,\n\tlineChart,\n\tscatterChart,\n\tpieChart,\n\tdonutChart,\n\tradarChart\n};\n\n/**\n * Options for line behaviour\n */\nexport const lines = {\n\topacity: {\n\t\tunselected: 0.3,\n\t\tselected: 1\n\t}\n};\n\n/**\n * Base transition configuration\n */\nexport const transitions = {\n\tdefault: {\n\t\tduration: 300\n\t},\n\tpie_slice_mouseover: {\n\t\tduration: 100\n\t},\n\tpie_chart_titles: {\n\t\tduration: 375\n\t},\n\tgraph_element_mouseover_fill_update: {\n\t\tduration: 100\n\t},\n\tgraph_element_mouseout_fill_update: {\n\t\tduration: 100\n\t}\n};\n\nexport const axis = {\n\tticks: {\n\t\tnumber: 7,\n\t\trotateIfSmallerThan: 30\n\t},\n\tpaddingRatio: 0.1\n};\n\nexport const spacers = {\n\tdefault: {\n\t\tsize: 24\n\t}\n};\n\nexport const tickSpaceRatioVertical = 2.5;\nexport const tickSpaceRatioHorizontal = 3.5;\n"]}
|
|
@@ -3,15 +3,15 @@ export declare const createVanillaChartApp: (demo: any) => {
|
|
|
3
3
|
"index.html": string;
|
|
4
4
|
"src/index.js": string;
|
|
5
5
|
"package.json": {
|
|
6
|
-
|
|
7
|
-
|
|
8
|
-
|
|
6
|
+
scripts: {
|
|
7
|
+
start: string;
|
|
8
|
+
build: string;
|
|
9
9
|
};
|
|
10
|
-
|
|
10
|
+
dependencies: {
|
|
11
11
|
"@carbon/charts": any;
|
|
12
|
-
|
|
12
|
+
d3: string;
|
|
13
13
|
};
|
|
14
|
-
|
|
14
|
+
devDependencies: {
|
|
15
15
|
"parcel-bundler": string;
|
|
16
16
|
};
|
|
17
17
|
};
|
|
@@ -19,6 +19,7 @@ export declare const createVanillaChartApp: (demo: any) => {
|
|
|
19
19
|
export declare const createReactChartApp: (demo: any) => {
|
|
20
20
|
"src/index.html": string;
|
|
21
21
|
"src/index.js": string;
|
|
22
|
+
"src/ibm-plex-font.css": string;
|
|
22
23
|
"package.json": {
|
|
23
24
|
dependencies: {
|
|
24
25
|
"@carbon/charts": any;
|
|
@@ -35,12 +36,14 @@ export declare const createAngularChartApp: (demo: any) => {
|
|
|
35
36
|
"src/main.ts": string;
|
|
36
37
|
"src/app/app.component.html": string;
|
|
37
38
|
"src/app/app.component.ts": string;
|
|
39
|
+
"src/app/ibm-plex-font.css": string;
|
|
38
40
|
"src/app/app.module.ts": string;
|
|
39
41
|
".angular-cli.json": string;
|
|
40
42
|
"package.json": string;
|
|
41
43
|
};
|
|
42
44
|
export declare const createVueChartApp: (demo: any) => {
|
|
43
45
|
"src/components/chart.vue": string;
|
|
46
|
+
"src/ibm-plex-font.css": string;
|
|
44
47
|
"src/App.vue": string;
|
|
45
48
|
"src/main.js": string;
|
|
46
49
|
"package.json": string;
|
|
@@ -49,16 +52,16 @@ export declare const createSvelteChartApp: (demo: any) => {
|
|
|
49
52
|
"App.svelte": string;
|
|
50
53
|
"index.js": string;
|
|
51
54
|
"package.json": {
|
|
52
|
-
|
|
53
|
-
|
|
54
|
-
|
|
55
|
-
|
|
56
|
-
|
|
55
|
+
scripts: {
|
|
56
|
+
build: string;
|
|
57
|
+
autobuild: string;
|
|
58
|
+
dev: string;
|
|
59
|
+
start: string;
|
|
57
60
|
"start:dev": string;
|
|
58
61
|
};
|
|
59
|
-
|
|
62
|
+
devDependencies: {
|
|
60
63
|
"npm-run-all": string;
|
|
61
|
-
|
|
64
|
+
rollup: string;
|
|
62
65
|
"rollup-plugin-commonjs": string;
|
|
63
66
|
"rollup-plugin-node-resolve": string;
|
|
64
67
|
"rollup-plugin-svelte": string;
|
|
@@ -1,27 +1,27 @@
|
|
|
1
1
|
import { getParameters } from "codesandbox/lib/api/define";
|
|
2
2
|
var libraryVersion = require("@carbon/charts/package.json").version;
|
|
3
|
+
var ibmPlexFontCSS = "@import \"https://fonts.googleapis.com/css?family=IBM+Plex+Sans+Condensed|IBM+Plex+Sans:400,600&display=swap\";\n";
|
|
3
4
|
export var createChartSandbox = function (chartTemplate) {
|
|
4
5
|
var files = {};
|
|
5
|
-
Object.keys(chartTemplate)
|
|
6
|
-
.forEach(function (filePath) { return files[filePath] = { content: chartTemplate[filePath] }; });
|
|
6
|
+
Object.keys(chartTemplate).forEach(function (filePath) { return (files[filePath] = { content: chartTemplate[filePath] }); });
|
|
7
7
|
return "https://codesandbox.io/api/v1/sandboxes/define?parameters=" + getParameters({ files: files });
|
|
8
8
|
};
|
|
9
9
|
export var createVanillaChartApp = function (demo) {
|
|
10
10
|
var chartData = JSON.stringify(demo.data, null, "\t");
|
|
11
11
|
var chartOptions = JSON.stringify(demo.options, null, "\t");
|
|
12
12
|
var chartComponent = demo.chartType.vanilla;
|
|
13
|
-
var indexHtml = "<html>\n\t<head>\n\t\t<title>Parcel Sandbox</title>\n\t\t<meta charset=\"UTF-8\" />\n\t</head>\n\t<body>\n\t\t<div id=\"app\" style=\"width: 100%; height: 100%;\"></div>\n\n\t\t<script src=\"src/index.js\"></script>\n\t</body>\n</html>";
|
|
13
|
+
var indexHtml = "<html>\n\t<head>\n\t\t<title>Parcel Sandbox</title>\n\t\t<meta charset=\"UTF-8\" />\n\t\t<link href=\"https://fonts.googleapis.com/css?family=IBM+Plex+Sans+Condensed|IBM+Plex+Sans:400,600&display=swap\" rel=\"stylesheet\">\n\t</head>\n\t<body>\n\t\t<div id=\"app\" style=\"width: 100%; height: 100%;\"></div>\n\n\t\t<script src=\"src/index.js\"></script>\n\t</body>\n</html>";
|
|
14
14
|
var indexJs = "import \"@carbon/charts/styles.css\";\nimport { " + chartComponent + " } from \"@carbon/charts\";\n\nconst data = " + chartData + ";\n\nconst options = " + chartOptions + ";\n\n// Grab chart holder HTML element and initialize the chart\nconst chartHolder = document.getElementById(\"app\");\nnew " + chartComponent + "(chartHolder, {\n\tdata,\n\toptions\n});\n";
|
|
15
15
|
var packageJson = {
|
|
16
|
-
|
|
17
|
-
|
|
18
|
-
|
|
16
|
+
scripts: {
|
|
17
|
+
start: "parcel index.html --open",
|
|
18
|
+
build: "parcel build index.html"
|
|
19
19
|
},
|
|
20
|
-
|
|
20
|
+
dependencies: {
|
|
21
21
|
"@carbon/charts": libraryVersion,
|
|
22
|
-
|
|
22
|
+
d3: "5.9.2"
|
|
23
23
|
},
|
|
24
|
-
|
|
24
|
+
devDependencies: {
|
|
25
25
|
"parcel-bundler": "^1.6.1"
|
|
26
26
|
}
|
|
27
27
|
};
|
|
@@ -36,7 +36,7 @@ export var createReactChartApp = function (demo) {
|
|
|
36
36
|
var chartOptions = JSON.stringify(demo.options, null, "\t");
|
|
37
37
|
var chartComponent = demo.chartType.vanilla;
|
|
38
38
|
var indexHtml = "<div id=\"root\"></div>\n ";
|
|
39
|
-
var indexJs = "import React from \"react\";\nimport ReactDOM from \"react-dom\";\nimport { " + chartComponent + " } from \"@carbon/charts-react\";\nimport \"@carbon/charts/styles.css\";\n// Or\n// import \"@carbon/charts/styles/styles.scss\";\n\nclass App extends React.Component {\n\tstate = {\n\t\tdata: " + chartData + ",\n\t\toptions: " + chartOptions + "\n\t};\n\n\trender = () => (\n\t\t<" + chartComponent + "\n\t\t\tdata={this.state.data}\n\t\t\toptions={this.state.options}>\n\t\t</" + chartComponent + ">\n\t);\n}\nReactDOM.render(<App />, document.getElementById(\"root\"));\n ";
|
|
39
|
+
var indexJs = "import React from \"react\";\nimport ReactDOM from \"react-dom\";\nimport { " + chartComponent + " } from \"@carbon/charts-react\";\nimport \"@carbon/charts/styles.css\";\n// Or\n// import \"@carbon/charts/styles/styles.scss\";\n\n// IBM Plex should either be imported in your project by using Carbon\n// or consumed manually through an import\nimport \"./ibm-plex-font.css\";\n\nclass App extends React.Component {\n\tstate = {\n\t\tdata: " + chartData + ",\n\t\toptions: " + chartOptions + "\n\t};\n\n\trender = () => (\n\t\t<" + chartComponent + "\n\t\t\tdata={this.state.data}\n\t\t\toptions={this.state.options}>\n\t\t</" + chartComponent + ">\n\t);\n}\nReactDOM.render(<App />, document.getElementById(\"root\"));\n ";
|
|
40
40
|
var packageJson = {
|
|
41
41
|
dependencies: {
|
|
42
42
|
"@carbon/charts": libraryVersion,
|
|
@@ -50,7 +50,8 @@ export var createReactChartApp = function (demo) {
|
|
|
50
50
|
return {
|
|
51
51
|
"src/index.html": indexHtml,
|
|
52
52
|
"src/index.js": indexJs,
|
|
53
|
-
"
|
|
53
|
+
"src/ibm-plex-font.css": ibmPlexFontCSS,
|
|
54
|
+
"package.json": packageJson,
|
|
54
55
|
};
|
|
55
56
|
};
|
|
56
57
|
export var createAngularChartApp = function (demo) {
|
|
@@ -58,7 +59,7 @@ export var createAngularChartApp = function (demo) {
|
|
|
58
59
|
var chartOptions = JSON.stringify(demo.options, null, "\t\t");
|
|
59
60
|
var chartComponent = demo.chartType.angular;
|
|
60
61
|
var appComponentHtml = "<" + chartComponent + " [data]=\"data\" [options]=\"options\"></" + chartComponent + ">";
|
|
61
|
-
var appComponentTs = "import { Component } from \"@angular/core\";\n@Component({\n\tselector: \"app-root\",\n\ttemplateUrl: \"./app.component.html\"\n})\nexport class AppComponent {\n\tdata = " + chartData + ";\n\toptions = " + chartOptions + ";\n}";
|
|
62
|
+
var appComponentTs = "import { Component } from \"@angular/core\";\n\nimport \"@carbon/charts/styles.css\";\n\n// IBM Plex should either be imported in your project by using Carbon\n// or consumed manually through an import\nimport \"./ibm-plex-font.css\";\n\n@Component({\n\tselector: \"app-root\",\n\ttemplateUrl: \"./app.component.html\"\n})\nexport class AppComponent {\n\tdata = " + chartData + ";\n\toptions = " + chartOptions + ";\n}";
|
|
62
63
|
var appModule = "import { NgModule } from \"@angular/core\";\nimport { BrowserModule } from \"@angular/platform-browser\";\nimport { ChartsModule } from \"@carbon/charts-angular\";\nimport { AppComponent } from \"./app.component\";\n@NgModule({\n\timports: [BrowserModule, ChartsModule],\n\tdeclarations: [AppComponent],\n\tbootstrap: [AppComponent]\n})\nexport class AppModule {}";
|
|
63
64
|
var indexHtml = "<!DOCTYPE html>\n<html lang=\"en\">\n\t<head>\n\t\t<meta charset=\"utf-8\" />\n\t\t<title>Angular</title>\n\t</head>\n\t<body>\n\t\t<app-root></app-root>\n\t</body>\n</html>";
|
|
64
65
|
var mainTs = "import { platformBrowserDynamic } from \"@angular/platform-browser-dynamic\";\nimport { AppModule } from \"./app/app.module\";\nplatformBrowserDynamic()\n\t.bootstrapModule(AppModule)\n\t.catch(err => console.log(err));\n";
|
|
@@ -86,6 +87,7 @@ export var createAngularChartApp = function (demo) {
|
|
|
86
87
|
"src/main.ts": mainTs,
|
|
87
88
|
"src/app/app.component.html": appComponentHtml,
|
|
88
89
|
"src/app/app.component.ts": appComponentTs,
|
|
90
|
+
"src/app/ibm-plex-font.css": ibmPlexFontCSS,
|
|
89
91
|
"src/app/app.module.ts": appModule,
|
|
90
92
|
".angular-cli.json": angularCliJson,
|
|
91
93
|
"package.json": packageJson
|
|
@@ -95,7 +97,7 @@ export var createVueChartApp = function (demo) {
|
|
|
95
97
|
var chartData = JSON.stringify(demo.data, null, "\t\t");
|
|
96
98
|
var chartOptions = JSON.stringify(demo.options, null, "\t\t");
|
|
97
99
|
var chartComponent = demo.chartType.vue;
|
|
98
|
-
var chartVue = "<script>\nimport Vue from \"vue\";\nimport \"@carbon/charts/styles.css\";\nimport chartsVue from \"@carbon/charts-vue\";\nVue.use(chartsVue);\nexport default {\n\tname: \"Chart\",\n\tcomponents: {},\n\tdata() {\n\t\treturn {\n\t\t\tdata: " + chartData + ",\n\t\t\toptions: " + chartOptions + "\n\t\t};\n\t},\n\ttemplate: \"<" + chartComponent + " :data='data' :options='options'></" + chartComponent + ">\"\n};\n</script>\n ";
|
|
100
|
+
var chartVue = "<script>\nimport Vue from \"vue\";\nimport \"@carbon/charts/styles.css\";\nimport chartsVue from \"@carbon/charts-vue\";\n\n// IBM Plex should either be imported in your project by using Carbon\n// or consumed manually through an import\nimport \"../ibm-plex-font.css\";\n\nVue.use(chartsVue);\n\nexport default {\n\tname: \"Chart\",\n\tcomponents: {},\n\tdata() {\n\t\treturn {\n\t\t\tdata: " + chartData + ",\n\t\t\toptions: " + chartOptions + "\n\t\t};\n\t},\n\ttemplate: \"<" + chartComponent + " :data='data' :options='options'></" + chartComponent + ">\"\n};\n</script>\n ";
|
|
99
101
|
var appVue = "<template>\n\t<div id=\"app\">\n\t\t<Chart/>\n\t</div>\n</template>\n<script>\nimport Chart from \"./components/chart\";\nexport default {\n\tname: \"App\",\n\tcomponents: {\n\t\tChart\n\t}\n};\n</script>\n ";
|
|
100
102
|
var mainJs = "import Vue from \"vue\";\nimport App from \"./App.vue\";\nVue.config.productionTip = false;\nnew Vue({\n\trender: h => h(App)\n}).$mount(\"#app\");\n";
|
|
101
103
|
var packageJson = JSON.stringify({
|
|
@@ -109,6 +111,7 @@ export var createVueChartApp = function (demo) {
|
|
|
109
111
|
}, null, "\t\t");
|
|
110
112
|
return {
|
|
111
113
|
"src/components/chart.vue": chartVue,
|
|
114
|
+
"src/ibm-plex-font.css": ibmPlexFontCSS,
|
|
112
115
|
"src/App.vue": appVue,
|
|
113
116
|
"src/main.js": mainJs,
|
|
114
117
|
"package.json": packageJson
|
|
@@ -132,16 +135,16 @@ export var createSvelteChartApp = function (demo) {
|
|
|
132
135
|
var indexJs = "import App from \"./App.svelte\";\n\nconst app = new App({ target: document.body });\n\nexport default app;\n";
|
|
133
136
|
var App = "<script>\n import { " + chartComponent + " } from \"@carbon/charts-svelte\";\n</script>\n\n<svelte:head>\n <link rel=\"stylesheet\" href=\"https://unpkg.com/@carbon/charts@0.30.10/styles.min.css\" />\n</svelte:head>\n\n<" + chartComponent + "\n\tdata={" + chartData + "}\n\toptions={" + chartOptions + "}\n\t/>\n";
|
|
134
137
|
var packageJson = {
|
|
135
|
-
|
|
136
|
-
|
|
137
|
-
|
|
138
|
-
|
|
139
|
-
|
|
138
|
+
scripts: {
|
|
139
|
+
build: "rollup -c",
|
|
140
|
+
autobuild: "rollup -c -w",
|
|
141
|
+
dev: "run-p start:dev autobuild",
|
|
142
|
+
start: "sirv public",
|
|
140
143
|
"start:dev": "sirv public --dev"
|
|
141
144
|
},
|
|
142
|
-
|
|
145
|
+
devDependencies: {
|
|
143
146
|
"npm-run-all": "^4.1.5",
|
|
144
|
-
|
|
147
|
+
rollup: "^1.10.1",
|
|
145
148
|
"rollup-plugin-commonjs": "^9.3.4",
|
|
146
149
|
"rollup-plugin-node-resolve": "^4.2.3",
|
|
147
150
|
"rollup-plugin-svelte": "^5.0.3",
|
|
@@ -163,4 +166,4 @@ export var createSvelteChartApp = function (demo) {
|
|
|
163
166
|
"rollup.config.js": rollup
|
|
164
167
|
};
|
|
165
168
|
};
|
|
166
|
-
//# sourceMappingURL
|
|
169
|
+
//# sourceMappingURL=../../demo/create-codesandbox.js.map
|
|
@@ -0,0 +1 @@
|
|
|
1
|
+
{"version":3,"file":"create-codesandbox.js","sourceRoot":"","sources":["create-codesandbox.ts"],"names":[],"mappings":"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","sourcesContent":["import { getParameters } from \"codesandbox/lib/api/define\";\n\nconst { version: libraryVersion } = require(\"@carbon/charts/package.json\");\nconst ibmPlexFontCSS = `@import \"https://fonts.googleapis.com/css?family=IBM+Plex+Sans+Condensed|IBM+Plex+Sans:400,600&display=swap\";\n`;\n\nexport const createChartSandbox = (chartTemplate: any) => {\n\tconst files = {};\n\n\tObject.keys(chartTemplate).forEach(\n\t\tfilePath => (files[filePath] = { content: chartTemplate[filePath] })\n\t);\n\n\treturn `https://codesandbox.io/api/v1/sandboxes/define?parameters=${getParameters(\n\t\t{ files }\n\t)}`;\n};\n\nexport const createVanillaChartApp = (demo: any) => {\n\tconst chartData = JSON.stringify(demo.data, null, \"\\t\");\n\tconst chartOptions = JSON.stringify(demo.options, null, \"\\t\");\n\tconst chartComponent = demo.chartType.vanilla;\n\n\tconst indexHtml = `<html>\n\t<head>\n\t\t<title>Parcel Sandbox</title>\n\t\t<meta charset=\"UTF-8\" />\n\t\t<link href=\"https://fonts.googleapis.com/css?family=IBM+Plex+Sans+Condensed|IBM+Plex+Sans:400,600&display=swap\" rel=\"stylesheet\">\n\t</head>\n\t<body>\n\t\t<div id=\"app\" style=\"width: 100%; height: 100%;\"></div>\n\n\t\t<script src=\"src/index.js\"></script>\n\t</body>\n</html>`;\n\tconst indexJs = `import \"@carbon/charts/styles.css\";\nimport { ${chartComponent} } from \"@carbon/charts\";\n\nconst data = ${chartData};\n\nconst options = ${chartOptions};\n\n// Grab chart holder HTML element and initialize the chart\nconst chartHolder = document.getElementById(\"app\");\nnew ${chartComponent}(chartHolder, {\n\tdata,\n\toptions\n});\n`;\n\tconst packageJson = {\n\t\tscripts: {\n\t\t\tstart: \"parcel index.html --open\",\n\t\t\tbuild: \"parcel build index.html\"\n\t\t},\n\t\tdependencies: {\n\t\t\t\"@carbon/charts\": libraryVersion,\n\t\t\td3: \"5.9.2\"\n\t\t},\n\t\tdevDependencies: {\n\t\t\t\"parcel-bundler\": \"^1.6.1\"\n\t\t}\n\t};\n\n\treturn {\n\t\t\"index.html\": indexHtml,\n\t\t\"src/index.js\": indexJs,\n\t\t\"package.json\": packageJson\n\t};\n};\n\nexport const createReactChartApp = (demo: any) => {\n\tconst chartData = JSON.stringify(demo.data, null, \"\\t\");\n\tconst chartOptions = JSON.stringify(demo.options, null, \"\\t\");\n\tconst chartComponent = demo.chartType.vanilla;\n\n\tconst indexHtml = `<div id=\"root\"></div>\n `;\n\n\tconst indexJs = `import React from \"react\";\nimport ReactDOM from \"react-dom\";\nimport { ${chartComponent} } from \"@carbon/charts-react\";\nimport \"@carbon/charts/styles.css\";\n// Or\n// import \"@carbon/charts/styles/styles.scss\";\n\n// IBM Plex should either be imported in your project by using Carbon\n// or consumed manually through an import\nimport \"./ibm-plex-font.css\";\n\nclass App extends React.Component {\n\tstate = {\n\t\tdata: ${chartData},\n\t\toptions: ${chartOptions}\n\t};\n\n\trender = () => (\n\t\t<${chartComponent}\n\t\t\tdata={this.state.data}\n\t\t\toptions={this.state.options}>\n\t\t</${chartComponent}>\n\t);\n}\nReactDOM.render(<App />, document.getElementById(\"root\"));\n `;\n\tconst packageJson = {\n\t\tdependencies: {\n\t\t\t\"@carbon/charts\": libraryVersion,\n\t\t\t\"@carbon/charts-react\": libraryVersion,\n\t\t\td3: \"5.12.0\",\n\t\t\treact: \"16.12.0\",\n\t\t\t\"react-dom\": \"16.12.0\",\n\t\t\t\"react-scripts\": \"3.0.1\"\n\t\t}\n\t};\n\n\treturn {\n\t\t\"src/index.html\": indexHtml,\n\t\t\"src/index.js\": indexJs,\n\t\t\"src/ibm-plex-font.css\": ibmPlexFontCSS,\n\t\t\"package.json\": packageJson,\n\t};\n};\n\nexport const createAngularChartApp = (demo: any) => {\n\tconst chartData = JSON.stringify(demo.data, null, \"\\t\\t\");\n\tconst chartOptions = JSON.stringify(demo.options, null, \"\\t\\t\");\n\tconst chartComponent = demo.chartType.angular;\n\n\tconst appComponentHtml = `<${chartComponent} [data]=\"data\" [options]=\"options\"></${chartComponent}>`;\n\tconst appComponentTs = `import { Component } from \"@angular/core\";\n\nimport \"@carbon/charts/styles.css\";\n\n// IBM Plex should either be imported in your project by using Carbon\n// or consumed manually through an import\nimport \"./ibm-plex-font.css\";\n\n@Component({\n\tselector: \"app-root\",\n\ttemplateUrl: \"./app.component.html\"\n})\nexport class AppComponent {\n\tdata = ${chartData};\n\toptions = ${chartOptions};\n}`;\n\n\tconst appModule = `import { NgModule } from \"@angular/core\";\nimport { BrowserModule } from \"@angular/platform-browser\";\nimport { ChartsModule } from \"@carbon/charts-angular\";\nimport { AppComponent } from \"./app.component\";\n@NgModule({\n\timports: [BrowserModule, ChartsModule],\n\tdeclarations: [AppComponent],\n\tbootstrap: [AppComponent]\n})\nexport class AppModule {}`;\n\n\tconst indexHtml = `<!DOCTYPE html>\n<html lang=\"en\">\n\t<head>\n\t\t<meta charset=\"utf-8\" />\n\t\t<title>Angular</title>\n\t</head>\n\t<body>\n\t\t<app-root></app-root>\n\t</body>\n</html>`;\n\n\tconst mainTs = `import { platformBrowserDynamic } from \"@angular/platform-browser-dynamic\";\nimport { AppModule } from \"./app/app.module\";\nplatformBrowserDynamic()\n\t.bootstrapModule(AppModule)\n\t.catch(err => console.log(err));\n`;\n\n\tconst angularCliJson = `{\n\t\"apps\": [\n\t\t{\n\t\t\t\"root\": \"src\",\n\t\t\t\"outDir\": \"dist\",\n\t\t\t\"assets\": [\"assets\", \"favicon.ico\"],\n\t\t\t\"index\": \"index.html\",\n\t\t\t\"main\": \"main.ts\",\n\t\t\t\"polyfills\": \"polyfills.ts\",\n\t\t\t\"prefix\": \"app\",\n\t\t\t\"styles\": [\"styles.css\"],\n\t\t\t\"scripts\": [],\n\t\t\t\"environmentSource\": \"environments/environment.ts\",\n\t\t\t\"environments\": {\n\t\t\t\t\"dev\": \"environments/environment.ts\",\n\t\t\t\t\"prod\": \"environments/environment.prod.ts\"\n\t\t\t}\n\t\t}\n\t]\n}`;\n\n\tconst packageJson = JSON.stringify(\n\t\t{\n\t\t\tdependencies: {\n\t\t\t\t\"@angular/animations\": \"8.2.14\",\n\t\t\t\t\"@angular/common\": \"8.2.14\",\n\t\t\t\t\"@angular/compiler\": \"8.2.14\",\n\t\t\t\t\"@angular/core\": \"8.2.14\",\n\t\t\t\t\"@angular/forms\": \"8.2.14\",\n\t\t\t\t\"@angular/platform-browser\": \"8.2.14\",\n\t\t\t\t\"@angular/platform-browser-dynamic\": \"8.2.14\",\n\t\t\t\t\"@angular/router\": \"8.2.14\",\n\t\t\t\t\"@carbon/charts\": libraryVersion,\n\t\t\t\t\"@carbon/charts-angular\": libraryVersion,\n\t\t\t\t\"core-js\": \"3.6.0\",\n\t\t\t\td3: \"5.15.0\",\n\t\t\t\trxjs: \"6.5.3\",\n\t\t\t\t\"zone.js\": \"0.10.2\"\n\t\t\t}\n\t\t},\n\t\tnull,\n\t\t\"\\t\"\n\t);\n\n\treturn {\n\t\t\"src/index.html\": indexHtml,\n\t\t\"src/main.ts\": mainTs,\n\t\t\"src/app/app.component.html\": appComponentHtml,\n\t\t\"src/app/app.component.ts\": appComponentTs,\n\t\t\"src/app/ibm-plex-font.css\": ibmPlexFontCSS,\n\t\t\"src/app/app.module.ts\": appModule,\n\t\t\".angular-cli.json\": angularCliJson,\n\t\t\"package.json\": packageJson\n\t};\n};\n\nexport const createVueChartApp = (demo: any) => {\n\tconst chartData = JSON.stringify(demo.data, null, \"\\t\\t\");\n\tconst chartOptions = JSON.stringify(demo.options, null, \"\\t\\t\");\n\tconst chartComponent = demo.chartType.vue;\n\n\tconst chartVue = `<script>\nimport Vue from \"vue\";\nimport \"@carbon/charts/styles.css\";\nimport chartsVue from \"@carbon/charts-vue\";\n\n// IBM Plex should either be imported in your project by using Carbon\n// or consumed manually through an import\nimport \"../ibm-plex-font.css\";\n\nVue.use(chartsVue);\n\nexport default {\n\tname: \"Chart\",\n\tcomponents: {},\n\tdata() {\n\t\treturn {\n\t\t\tdata: ${chartData},\n\t\t\toptions: ${chartOptions}\n\t\t};\n\t},\n\ttemplate: \"<${chartComponent} :data='data' :options='options'></${chartComponent}>\"\n};\n</script>\n `;\n\n\tconst appVue = `<template>\n\t<div id=\"app\">\n\t\t<Chart/>\n\t</div>\n</template>\n<script>\nimport Chart from \"./components/chart\";\nexport default {\n\tname: \"App\",\n\tcomponents: {\n\t\tChart\n\t}\n};\n</script>\n `;\n\n\tconst mainJs = `import Vue from \"vue\";\nimport App from \"./App.vue\";\nVue.config.productionTip = false;\nnew Vue({\n\trender: h => h(App)\n}).$mount(\"#app\");\n`;\n\n\tconst packageJson = JSON.stringify(\n\t\t{\n\t\t\tdependencies: {\n\t\t\t\t\"@carbon/charts\": libraryVersion,\n\t\t\t\t\"@carbon/charts-vue\": libraryVersion,\n\t\t\t\t\"@vue/cli-plugin-babel\": \"4.1.1\",\n\t\t\t\td3: \"5.15.0\",\n\t\t\t\tvue: \"^2.6.11\"\n\t\t\t}\n\t\t},\n\t\tnull,\n\t\t\"\\t\\t\"\n\t);\n\n\treturn {\n\t\t\"src/components/chart.vue\": chartVue,\n\t\t\"src/ibm-plex-font.css\": ibmPlexFontCSS,\n\t\t\"src/App.vue\": appVue,\n\t\t\"src/main.js\": mainJs,\n\t\t\"package.json\": packageJson\n\t};\n};\n\nexport const createSvelteChartApp = (demo: any) => {\n\tconst chartData = JSON.stringify(demo.data, null, \"\\t\");\n\tconst chartOptions = JSON.stringify(demo.options, null, \"\\t\");\n\n\tlet chartComponent = demo.chartType.vanilla;\n\n\tswitch (chartComponent) {\n\t\tcase \"SimpleBarChart\":\n\t\t\tchartComponent = \"BarChartSimple\";\n\t\t\tbreak;\n\t\tcase \"GroupedBarChart\":\n\t\t\tchartComponent = \"BarChartGrouped\";\n\t\t\tbreak;\n\t\tcase \"StackedBarChart\":\n\t\t\tchartComponent = \"BarChartStacked\";\n\t\t\tbreak;\n\t}\n\n\tconst indexJs = `import App from \"./App.svelte\";\n\nconst app = new App({ target: document.body });\n\nexport default app;\n`;\n\n\tconst App = `<script>\n import { ${chartComponent} } from \"@carbon/charts-svelte\";\n</script>\n\n<svelte:head>\n <link rel=\"stylesheet\" href=\"https://unpkg.com/@carbon/charts@0.30.10/styles.min.css\" />\n</svelte:head>\n\n<${chartComponent}\n\tdata={${chartData}}\n\toptions={${chartOptions}}\n\t/>\n`;\n\n\tconst packageJson = {\n\t\tscripts: {\n\t\t\tbuild: \"rollup -c\",\n\t\t\tautobuild: \"rollup -c -w\",\n\t\t\tdev: \"run-p start:dev autobuild\",\n\t\t\tstart: \"sirv public\",\n\t\t\t\"start:dev\": \"sirv public --dev\"\n\t\t},\n\t\tdevDependencies: {\n\t\t\t\"npm-run-all\": \"^4.1.5\",\n\t\t\trollup: \"^1.10.1\",\n\t\t\t\"rollup-plugin-commonjs\": \"^9.3.4\",\n\t\t\t\"rollup-plugin-node-resolve\": \"^4.2.3\",\n\t\t\t\"rollup-plugin-svelte\": \"^5.0.3\",\n\t\t\t\"rollup-plugin-terser\": \"^4.0.4\",\n\t\t\t\"sirv-cli\": \"^0.3.1\"\n\t\t},\n\t\tdependencies: {\n\t\t\t\"@carbon/charts\": libraryVersion,\n\t\t\t\"@carbon/charts-svelte\": libraryVersion,\n\t\t\td3: \"5.12.0\",\n\t\t\tsvelte: \"3.20.x\"\n\t\t}\n\t};\n\n\tconst rollup = `import svelte from \"rollup-plugin-svelte\";\nimport resolve from \"rollup-plugin-node-resolve\";\nimport commonjs from \"rollup-plugin-commonjs\";\nimport { terser } from \"rollup-plugin-terser\";\nimport postcss from \"rollup-plugin-postcss\";\n\nconst production = !process.env.ROLLUP_WATCH;\n\nexport default {\n input: \"index.js\",\n output: {\n sourcemap: true,\n format: \"iife\",\n name: \"app\",\n file: \"public/bundle.js\"\n },\n plugins: [\n postcss(),\n svelte({\n dev: !production,\n css: css => {\n css.write(\"public/bundle.css\");\n }\n }),\n resolve(),\n commonjs(),\n production && terser()\n ]\n};\n`;\n\n\treturn {\n\t\t\"App.svelte\": App,\n\t\t\"index.js\": indexJs,\n\t\t\"package.json\": packageJson,\n\t\t\"rollup.config.js\": rollup\n\t};\n};\n"]}
|
package/demo/data/bar.d.ts
CHANGED
|
@@ -94,7 +94,7 @@ export declare const simpleBarTimeSeriesOptions: {
|
|
|
94
94
|
};
|
|
95
95
|
};
|
|
96
96
|
timeScale: {
|
|
97
|
-
|
|
97
|
+
localeObject: Locale;
|
|
98
98
|
};
|
|
99
99
|
};
|
|
100
100
|
export declare const simpleHorizontalBarTimeSeriesOptions: {
|
|
@@ -182,3 +182,177 @@ export declare const stackedHorizontalBarTimeSeriesData: {
|
|
|
182
182
|
date: Date;
|
|
183
183
|
value: number;
|
|
184
184
|
}[];
|
|
185
|
+
export declare const simpleBarEmptyStateData: any[];
|
|
186
|
+
export declare const simpleBarEmptyStateOptions: {
|
|
187
|
+
title: string;
|
|
188
|
+
axes: {
|
|
189
|
+
left: {
|
|
190
|
+
primary: boolean;
|
|
191
|
+
};
|
|
192
|
+
bottom: {
|
|
193
|
+
scaleType: string;
|
|
194
|
+
secondary: boolean;
|
|
195
|
+
};
|
|
196
|
+
};
|
|
197
|
+
};
|
|
198
|
+
export declare const simpleBarSkeletonData: any[];
|
|
199
|
+
export declare const simpleBarSkeletonOptions: {
|
|
200
|
+
title: string;
|
|
201
|
+
axes: {
|
|
202
|
+
left: {
|
|
203
|
+
primary: boolean;
|
|
204
|
+
};
|
|
205
|
+
bottom: {
|
|
206
|
+
scaleType: string;
|
|
207
|
+
secondary: boolean;
|
|
208
|
+
};
|
|
209
|
+
};
|
|
210
|
+
data: {
|
|
211
|
+
loading: boolean;
|
|
212
|
+
};
|
|
213
|
+
};
|
|
214
|
+
export declare const groupedBarEmptyStateData: any[];
|
|
215
|
+
export declare const groupedBarEmptyStateOptions: {
|
|
216
|
+
title: string;
|
|
217
|
+
axes: {
|
|
218
|
+
left: {
|
|
219
|
+
primary: boolean;
|
|
220
|
+
};
|
|
221
|
+
bottom: {
|
|
222
|
+
scaleType: string;
|
|
223
|
+
secondary: boolean;
|
|
224
|
+
};
|
|
225
|
+
};
|
|
226
|
+
};
|
|
227
|
+
export declare const groupedBarSkeletonData: any[];
|
|
228
|
+
export declare const groupedBarSkeletonOptions: {
|
|
229
|
+
title: string;
|
|
230
|
+
axes: {
|
|
231
|
+
left: {
|
|
232
|
+
primary: boolean;
|
|
233
|
+
};
|
|
234
|
+
bottom: {
|
|
235
|
+
scaleType: string;
|
|
236
|
+
secondary: boolean;
|
|
237
|
+
};
|
|
238
|
+
};
|
|
239
|
+
data: {
|
|
240
|
+
loading: boolean;
|
|
241
|
+
};
|
|
242
|
+
};
|
|
243
|
+
export declare const stackedBarEmptyStateData: any[];
|
|
244
|
+
export declare const stackedBarEmptyStateOptions: {
|
|
245
|
+
title: string;
|
|
246
|
+
axes: {
|
|
247
|
+
left: {
|
|
248
|
+
primary: boolean;
|
|
249
|
+
};
|
|
250
|
+
bottom: {
|
|
251
|
+
scaleType: string;
|
|
252
|
+
secondary: boolean;
|
|
253
|
+
};
|
|
254
|
+
};
|
|
255
|
+
};
|
|
256
|
+
export declare const stackedBarSkeletonData: any[];
|
|
257
|
+
export declare const stackedBarSkeletonOptions: {
|
|
258
|
+
title: string;
|
|
259
|
+
axes: {
|
|
260
|
+
left: {
|
|
261
|
+
primary: boolean;
|
|
262
|
+
};
|
|
263
|
+
bottom: {
|
|
264
|
+
scaleType: string;
|
|
265
|
+
secondary: boolean;
|
|
266
|
+
};
|
|
267
|
+
};
|
|
268
|
+
data: {
|
|
269
|
+
loading: boolean;
|
|
270
|
+
};
|
|
271
|
+
};
|
|
272
|
+
export declare const simpleHorizontalBarEmptyStateData: any[];
|
|
273
|
+
export declare const simpleHorizontalBarEmptyStateOptions: {
|
|
274
|
+
title: string;
|
|
275
|
+
axes: {
|
|
276
|
+
left: {
|
|
277
|
+
primary: boolean;
|
|
278
|
+
scaleType: string;
|
|
279
|
+
};
|
|
280
|
+
bottom: {
|
|
281
|
+
secondary: boolean;
|
|
282
|
+
};
|
|
283
|
+
};
|
|
284
|
+
};
|
|
285
|
+
export declare const simpleHorizontalBarSkeletonData: any[];
|
|
286
|
+
export declare const simpleHorizontalBarSkeletonOptions: {
|
|
287
|
+
title: string;
|
|
288
|
+
axes: {
|
|
289
|
+
left: {
|
|
290
|
+
primary: boolean;
|
|
291
|
+
scaleType: string;
|
|
292
|
+
};
|
|
293
|
+
bottom: {
|
|
294
|
+
secondary: boolean;
|
|
295
|
+
};
|
|
296
|
+
};
|
|
297
|
+
data: {
|
|
298
|
+
loading: boolean;
|
|
299
|
+
};
|
|
300
|
+
};
|
|
301
|
+
export declare const groupedHorizontalBarEmptyStateData: any[];
|
|
302
|
+
export declare const groupedHorizontalBarEmptyStateOptions: {
|
|
303
|
+
title: string;
|
|
304
|
+
axes: {
|
|
305
|
+
left: {
|
|
306
|
+
primary: boolean;
|
|
307
|
+
scaleType: string;
|
|
308
|
+
};
|
|
309
|
+
bottom: {
|
|
310
|
+
secondary: boolean;
|
|
311
|
+
};
|
|
312
|
+
};
|
|
313
|
+
};
|
|
314
|
+
export declare const groupedHorizontalBarSkeletonData: any[];
|
|
315
|
+
export declare const groupedHorizontalBarSkeletonOptions: {
|
|
316
|
+
title: string;
|
|
317
|
+
axes: {
|
|
318
|
+
left: {
|
|
319
|
+
primary: boolean;
|
|
320
|
+
scaleType: string;
|
|
321
|
+
};
|
|
322
|
+
bottom: {
|
|
323
|
+
secondary: boolean;
|
|
324
|
+
};
|
|
325
|
+
};
|
|
326
|
+
data: {
|
|
327
|
+
loading: boolean;
|
|
328
|
+
};
|
|
329
|
+
};
|
|
330
|
+
export declare const stackedHorizontalBarEmptyStateData: any[];
|
|
331
|
+
export declare const stackedHorizontalBarEmptyStateOptions: {
|
|
332
|
+
title: string;
|
|
333
|
+
axes: {
|
|
334
|
+
left: {
|
|
335
|
+
primary: boolean;
|
|
336
|
+
scaleType: string;
|
|
337
|
+
};
|
|
338
|
+
bottom: {
|
|
339
|
+
secondary: boolean;
|
|
340
|
+
};
|
|
341
|
+
};
|
|
342
|
+
};
|
|
343
|
+
export declare const stackedHorizontalBarSkeletonData: any[];
|
|
344
|
+
export declare const stackedHorizontalBarSkeletonOptions: {
|
|
345
|
+
title: string;
|
|
346
|
+
axes: {
|
|
347
|
+
left: {
|
|
348
|
+
primary: boolean;
|
|
349
|
+
scaleType: string;
|
|
350
|
+
};
|
|
351
|
+
bottom: {
|
|
352
|
+
secondary: boolean;
|
|
353
|
+
};
|
|
354
|
+
};
|
|
355
|
+
data: {
|
|
356
|
+
loading: boolean;
|
|
357
|
+
};
|
|
358
|
+
};
|