@carbon/charts 0.30.4 → 0.30.8
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 +35 -0
- package/build/demo/data/bar.d.ts +56 -94
- package/build/demo/data/bubble.d.ts +58 -13
- package/build/demo/data/donut.d.ts +3 -6
- package/build/demo/data/line.d.ts +35 -35
- package/build/demo/data/pie.d.ts +3 -6
- package/build/demo/data/scatter.d.ts +33 -20
- package/build/demo/data/step.d.ts +15 -16
- package/build/demo/data/time-series-axis.d.ts +12 -48
- package/build/src/charts/bar-grouped.d.ts +2 -2
- package/build/src/charts/bar-simple.d.ts +2 -4
- package/build/src/components/essentials/legend.d.ts +0 -4
- package/build/src/components/essentials/tooltip-bar.d.ts +1 -1
- package/build/src/components/essentials/tooltip-pie.d.ts +5 -0
- package/build/src/components/essentials/tooltip-scatter.d.ts +1 -1
- package/build/src/components/graphs/bar-grouped.d.ts +6 -4
- package/build/src/components/graphs/bar-simple.d.ts +0 -1
- package/build/src/components/graphs/bar-stacked.d.ts +0 -1
- package/build/src/components/graphs/bubble.d.ts +0 -1
- package/build/src/components/graphs/line.d.ts +3 -1
- package/build/src/components/graphs/pie.d.ts +0 -1
- package/build/src/components/graphs/scatter.d.ts +0 -1
- package/build/src/components/index.d.ts +1 -0
- package/build/src/interfaces/axis-scales.d.ts +4 -16
- package/build/src/interfaces/charts.d.ts +23 -1
- package/build/src/interfaces/enums.d.ts +0 -4
- package/build/src/interfaces/events.d.ts +29 -0
- package/build/src/model-pie.d.ts +1 -7
- package/build/src/model.d.ts +31 -13
- package/build/src/services/scales-cartesian.d.ts +11 -3
- package/build/src/tools.d.ts +2 -2
- package/build/stories/tutorials.stories.d.ts +1 -0
- package/bundle.js +1 -1
- package/chart.js +2 -2
- package/chart.js.map +1 -1
- package/charts/bar-grouped.d.ts +2 -2
- package/charts/bar-grouped.js.map +1 -1
- package/charts/bar-simple.d.ts +2 -4
- package/charts/bar-simple.js +0 -2
- package/charts/bar-simple.js.map +1 -1
- package/charts/donut.js +2 -2
- package/charts/donut.js.map +1 -1
- package/charts/pie.js +2 -2
- package/charts/pie.js.map +1 -1
- package/components/axes/grid.js +12 -19
- package/components/axes/grid.js.map +1 -1
- package/components/component.js +1 -1
- package/components/component.js.map +1 -1
- package/components/essentials/legend.d.ts +0 -4
- package/components/essentials/legend.js +12 -26
- package/components/essentials/legend.js.map +1 -1
- package/components/essentials/title.js +4 -4
- package/components/essentials/title.js.map +1 -1
- package/components/essentials/tooltip-bar.d.ts +1 -1
- package/components/essentials/tooltip-bar.js +13 -5
- package/components/essentials/tooltip-bar.js.map +1 -1
- package/components/essentials/tooltip-pie.d.ts +5 -0
- package/components/essentials/tooltip-pie.js +40 -0
- package/components/essentials/tooltip-pie.js.map +1 -0
- package/components/essentials/tooltip-scatter.d.ts +1 -1
- package/components/essentials/tooltip-scatter.js +8 -6
- package/components/essentials/tooltip-scatter.js.map +1 -1
- package/components/essentials/tooltip.js +14 -17
- package/components/essentials/tooltip.js.map +1 -1
- package/components/graphs/bar-grouped.d.ts +6 -4
- package/components/graphs/bar-grouped.js +64 -36
- package/components/graphs/bar-grouped.js.map +1 -1
- package/components/graphs/bar-simple.d.ts +0 -1
- package/components/graphs/bar-simple.js +16 -34
- package/components/graphs/bar-simple.js.map +1 -1
- package/components/graphs/bar-stacked.d.ts +0 -1
- package/components/graphs/bar-stacked.js +31 -112
- package/components/graphs/bar-stacked.js.map +1 -1
- package/components/graphs/bar.js.map +1 -1
- package/components/graphs/bubble.d.ts +0 -1
- package/components/graphs/bubble.js +16 -20
- package/components/graphs/bubble.js.map +1 -1
- package/components/graphs/donut.js +1 -1
- package/components/graphs/donut.js.map +1 -1
- package/components/graphs/line.d.ts +3 -1
- package/components/graphs/line.js +42 -31
- package/components/graphs/line.js.map +1 -1
- package/components/graphs/pie.d.ts +0 -1
- package/components/graphs/pie.js +15 -22
- package/components/graphs/pie.js.map +1 -1
- package/components/graphs/scatter.d.ts +0 -1
- package/components/graphs/scatter.js +26 -41
- package/components/graphs/scatter.js.map +1 -1
- package/components/index.d.ts +1 -0
- package/components/index.js +1 -0
- package/components/index.js.map +1 -1
- package/configuration.js +7 -0
- package/configuration.js.map +1 -1
- package/demo/data/bar.d.ts +56 -94
- package/demo/data/bar.js +106 -271
- package/demo/data/bar.js.map +1 -1
- package/demo/data/bubble.d.ts +58 -13
- package/demo/data/bubble.js +74 -174
- package/demo/data/bubble.js.map +1 -1
- package/demo/data/bundle.js +1 -1
- package/demo/data/donut.d.ts +3 -6
- package/demo/data/index.js +22 -4
- package/demo/data/index.js.map +1 -1
- package/demo/data/line.d.ts +35 -35
- package/demo/data/line.js +70 -196
- package/demo/data/line.js.map +1 -1
- package/demo/data/pie.d.ts +3 -6
- package/demo/data/pie.js +8 -10
- package/demo/data/pie.js.map +1 -1
- package/demo/data/scatter.d.ts +33 -20
- package/demo/data/scatter.js +50 -68
- package/demo/data/scatter.js.map +1 -1
- package/demo/data/step.d.ts +15 -16
- package/demo/data/time-series-axis.d.ts +12 -48
- package/demo/data/time-series-axis.js +34 -46
- package/demo/data/time-series-axis.js.map +1 -1
- package/demo/styles.css +28 -0
- 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 +38 -37
- package/interfaces/axis-scales.d.ts +4 -16
- package/interfaces/axis-scales.js.map +1 -1
- package/interfaces/charts.d.ts +23 -1
- package/interfaces/charts.js.map +1 -1
- package/interfaces/enums.d.ts +0 -4
- package/interfaces/enums.js +0 -5
- package/interfaces/enums.js.map +1 -1
- package/interfaces/events.d.ts +29 -0
- package/interfaces/events.js +33 -0
- package/interfaces/events.js.map +1 -1
- package/model-pie.d.ts +1 -7
- package/model-pie.js +2 -107
- package/model-pie.js.map +1 -1
- package/model.d.ts +31 -13
- package/model.js +204 -75
- package/model.js.map +1 -1
- package/package.json +3 -1
- package/services/essentials/dom-utils.js +3 -2
- package/services/essentials/dom-utils.js.map +1 -1
- package/services/scales-cartesian.d.ts +11 -3
- package/services/scales-cartesian.js +104 -122
- package/services/scales-cartesian.js.map +1 -1
- package/tools.d.ts +2 -2
- package/tools.js +23 -2
- package/tools.js.map +1 -1
- package/tsconfig.tsbuildinfo +93 -93
- package/build/src/model-simple-bar.d.ts +0 -11
- package/model-simple-bar.d.ts +0 -11
- package/model-simple-bar.js +0 -88
- package/model-simple-bar.js.map +0 -1
package/model-pie.js
CHANGED
|
@@ -12,12 +12,7 @@ var __extends = (this && this.__extends) || (function () {
|
|
|
12
12
|
};
|
|
13
13
|
})();
|
|
14
14
|
// Internal Imports
|
|
15
|
-
import * as Configuration from "./configuration";
|
|
16
15
|
import { ChartModel } from "./model";
|
|
17
|
-
import { Tools } from "./tools";
|
|
18
|
-
import * as colorPalettes from "./services/colorPalettes";
|
|
19
|
-
// D3 Imports
|
|
20
|
-
import { scaleOrdinal } from "d3-scale";
|
|
21
16
|
/** The charting model layer which includes mainly the chart data and options,
|
|
22
17
|
* as well as some misc. information to be shared among components */
|
|
23
18
|
var PieChartModel = /** @class */ (function (_super) {
|
|
@@ -26,109 +21,9 @@ var PieChartModel = /** @class */ (function (_super) {
|
|
|
26
21
|
return _super.call(this, services) || this;
|
|
27
22
|
}
|
|
28
23
|
PieChartModel.prototype.sanitize = function (data) {
|
|
24
|
+
var tabularData = this.getTabularData(data);
|
|
29
25
|
// Sort data based on value
|
|
30
|
-
|
|
31
|
-
var dataset = Tools.getProperty(data, "datasets", 0);
|
|
32
|
-
if (dataset) {
|
|
33
|
-
var sortedLabelsAndValues = data.labels.map(function (label, i) {
|
|
34
|
-
return {
|
|
35
|
-
label: label,
|
|
36
|
-
value: dataset.data[i],
|
|
37
|
-
fillColor: dataset.fillColors ? dataset.fillColors[i] : undefined
|
|
38
|
-
};
|
|
39
|
-
}).sort(function (a, b) { return b.value - a.value; });
|
|
40
|
-
dataset.data = sortedLabelsAndValues.map(function (d) { return d.value; });
|
|
41
|
-
data.labels = sortedLabelsAndValues.map(function (d) { return d.label; });
|
|
42
|
-
if (dataset.fillColors) {
|
|
43
|
-
dataset.fillColors = sortedLabelsAndValues.map(function (d) { return d.fillColor; });
|
|
44
|
-
}
|
|
45
|
-
}
|
|
46
|
-
return data;
|
|
47
|
-
};
|
|
48
|
-
PieChartModel.prototype.generateDataLabels = function (newData) {
|
|
49
|
-
var dataLabels = {};
|
|
50
|
-
newData.labels.forEach(function (label) {
|
|
51
|
-
dataLabels[label] = Configuration.legend.items.status.ACTIVE;
|
|
52
|
-
});
|
|
53
|
-
return dataLabels;
|
|
54
|
-
};
|
|
55
|
-
PieChartModel.prototype.getDisplayData = function () {
|
|
56
|
-
var ACTIVE = Configuration.legend.items.status.ACTIVE;
|
|
57
|
-
var dataLabels = this.get("dataLabels");
|
|
58
|
-
if (!this.get("data")) {
|
|
59
|
-
return null;
|
|
60
|
-
}
|
|
61
|
-
// Remove datasets that have been disabled
|
|
62
|
-
var displayData = Tools.clone(this.get("data"));
|
|
63
|
-
var dataset = displayData.datasets[0];
|
|
64
|
-
// Remove data values that correspond to labels that are disabled
|
|
65
|
-
dataset.data = dataset.data.filter(function (datum, i) {
|
|
66
|
-
var label = displayData.labels[i];
|
|
67
|
-
return dataLabels[label] === ACTIVE;
|
|
68
|
-
});
|
|
69
|
-
// Remove labels that are disabled
|
|
70
|
-
displayData.labels = displayData.labels.filter(function (label) { return dataLabels[label] === ACTIVE; });
|
|
71
|
-
return displayData;
|
|
72
|
-
};
|
|
73
|
-
/*
|
|
74
|
-
* Data labels
|
|
75
|
-
*/
|
|
76
|
-
PieChartModel.prototype.toggleDataLabel = function (changedLabel) {
|
|
77
|
-
var _a = Configuration.legend.items.status, ACTIVE = _a.ACTIVE, DISABLED = _a.DISABLED;
|
|
78
|
-
var dataLabels = this.get("dataLabels");
|
|
79
|
-
var hasDeactivatedItems = Object.keys(dataLabels).some(function (label) { return dataLabels[label] === DISABLED; });
|
|
80
|
-
var activeItems = Object.keys(dataLabels).filter(function (label) { return dataLabels[label] === ACTIVE; });
|
|
81
|
-
// If there are deactivated items, toggle "changedLabel"
|
|
82
|
-
if (hasDeactivatedItems) {
|
|
83
|
-
// If the only active item is being toggled
|
|
84
|
-
// Activate all items
|
|
85
|
-
if (activeItems.length === 1 && activeItems[0] === changedLabel) {
|
|
86
|
-
// If every item is active, then enable "changedLabel" and disable all other items
|
|
87
|
-
Object.keys(dataLabels).forEach(function (label) {
|
|
88
|
-
dataLabels[label] = ACTIVE;
|
|
89
|
-
});
|
|
90
|
-
}
|
|
91
|
-
else {
|
|
92
|
-
dataLabels[changedLabel] = dataLabels[changedLabel] === DISABLED ? ACTIVE : DISABLED;
|
|
93
|
-
}
|
|
94
|
-
}
|
|
95
|
-
else {
|
|
96
|
-
// If every item is active, then enable "changedLabel" and disable all other items
|
|
97
|
-
Object.keys(dataLabels).forEach(function (label) {
|
|
98
|
-
dataLabels[label] = (label === changedLabel ? ACTIVE : DISABLED);
|
|
99
|
-
});
|
|
100
|
-
}
|
|
101
|
-
// Update model
|
|
102
|
-
this.set({
|
|
103
|
-
dataLabels: dataLabels
|
|
104
|
-
});
|
|
105
|
-
};
|
|
106
|
-
/*
|
|
107
|
-
* Fill scales
|
|
108
|
-
*/
|
|
109
|
-
PieChartModel.prototype.setColorScale = function () {
|
|
110
|
-
var dataset = this.getDisplayData().datasets[0];
|
|
111
|
-
if (dataset.fillColors) {
|
|
112
|
-
this.colorScale = scaleOrdinal().range(dataset.fillColors).domain(this.allDataLabels);
|
|
113
|
-
}
|
|
114
|
-
else {
|
|
115
|
-
var colors = colorPalettes.DEFAULT;
|
|
116
|
-
this.colorScale = scaleOrdinal().range(colors).domain(this.allDataLabels);
|
|
117
|
-
}
|
|
118
|
-
};
|
|
119
|
-
PieChartModel.prototype.getFillColor = function (label) {
|
|
120
|
-
var options = this.getOptions();
|
|
121
|
-
if (options.getFillColor) {
|
|
122
|
-
return options.getFillColor(label);
|
|
123
|
-
}
|
|
124
|
-
return this.getFillScale()(label);
|
|
125
|
-
};
|
|
126
|
-
PieChartModel.prototype.getStrokeColor = function (label) {
|
|
127
|
-
var options = this.getOptions();
|
|
128
|
-
if (options.getStrokeColor) {
|
|
129
|
-
return options.getStrokeColor(label);
|
|
130
|
-
}
|
|
131
|
-
return this.colorScale(label);
|
|
26
|
+
return tabularData.sort(function (a, b) { return b.value - a.value; });
|
|
132
27
|
};
|
|
133
28
|
return PieChartModel;
|
|
134
29
|
}(ChartModel));
|
package/model-pie.js.map
CHANGED
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"model-pie.js","sourceRoot":"","sources":["model-pie.ts"],"names":[],"mappings":";;;;;;;;;;;;;AAAA,mBAAmB;AACnB,OAAO,
|
|
1
|
+
{"version":3,"file":"model-pie.js","sourceRoot":"","sources":["model-pie.ts"],"names":[],"mappings":";;;;;;;;;;;;;AAAA,mBAAmB;AACnB,OAAO,EAAE,UAAU,EAAE,MAAM,SAAS,CAAC;AAErC;qEACqE;AACrE;IAAmC,iCAAU;IAC5C,uBAAY,QAAa;eACxB,kBAAM,QAAQ,CAAC;IAChB,CAAC;IAED,gCAAQ,GAAR,UAAS,IAAI;QACZ,IAAM,WAAW,GAAG,IAAI,CAAC,cAAc,CAAC,IAAI,CAAC,CAAC;QAE9C,2BAA2B;QAC3B,OAAO,WAAW,CAAC,IAAI,CAAC,UAAC,CAAC,EAAE,CAAC,IAAK,OAAA,CAAC,CAAC,KAAK,GAAG,CAAC,CAAC,KAAK,EAAjB,CAAiB,CAAC,CAAC;IACtD,CAAC;IACF,oBAAC;AAAD,CAAC,AAXD,CAAmC,UAAU,GAW5C","sourcesContent":["// Internal Imports\nimport { ChartModel } from \"./model\";\n\n/** The charting model layer which includes mainly the chart data and options,\n * as well as some misc. information to be shared among components */\nexport class PieChartModel extends ChartModel {\n\tconstructor(services: any) {\n\t\tsuper(services);\n\t}\n\n\tsanitize(data) {\n\t\tconst tabularData = this.getTabularData(data);\n\n\t\t// Sort data based on value\n\t\treturn tabularData.sort((a, b) => b.value - a.value);\n\t}\n}\n"]}
|
package/model.d.ts
CHANGED
|
@@ -9,22 +9,41 @@ export declare class ChartModel {
|
|
|
9
9
|
protected services: any;
|
|
10
10
|
protected state: any;
|
|
11
11
|
/**
|
|
12
|
-
* A list of all the
|
|
12
|
+
* A list of all the data groups that have existed within the lifetime of the chart
|
|
13
13
|
* @type string[]
|
|
14
14
|
*/
|
|
15
|
-
protected
|
|
16
|
-
protected patternScale: {};
|
|
15
|
+
protected allDataGroups: string[];
|
|
17
16
|
protected colorScale: any;
|
|
18
17
|
constructor(services: any);
|
|
19
|
-
|
|
18
|
+
/**
|
|
19
|
+
* Converts data provided in the older format to tabular
|
|
20
|
+
*
|
|
21
|
+
*/
|
|
22
|
+
protected transformToTabularData(data: any): any[];
|
|
23
|
+
protected getTabularData(data: any): any[];
|
|
24
|
+
protected sanitize(data: any): any[];
|
|
20
25
|
getDisplayData(): any;
|
|
21
26
|
getData(): any;
|
|
22
27
|
/**
|
|
23
28
|
*
|
|
24
29
|
* @param newData The new raw data to be set
|
|
25
30
|
*/
|
|
26
|
-
setData(newData: any): any;
|
|
27
|
-
|
|
31
|
+
setData(newData: any): any[];
|
|
32
|
+
protected updateAllDataGroups(): void;
|
|
33
|
+
protected generateDataGroups(data: any): {
|
|
34
|
+
name: string;
|
|
35
|
+
status: Number;
|
|
36
|
+
}[];
|
|
37
|
+
getDataGroups(): any;
|
|
38
|
+
getActiveDataGroups(): any;
|
|
39
|
+
getDataGroupNames(): any;
|
|
40
|
+
getActiveDataGroupNames(): any;
|
|
41
|
+
getGroupedData(): {
|
|
42
|
+
name: string;
|
|
43
|
+
data: any;
|
|
44
|
+
}[];
|
|
45
|
+
getDataValuesGroupedByKeys(): any;
|
|
46
|
+
getStackedData(): any[][];
|
|
28
47
|
/**
|
|
29
48
|
* @return {Object} The chart's options
|
|
30
49
|
*/
|
|
@@ -44,17 +63,16 @@ export declare class ChartModel {
|
|
|
44
63
|
update(): void;
|
|
45
64
|
setUpdateCallback(cb: Function): void;
|
|
46
65
|
toggleDataLabel(changedLabel: string): void;
|
|
47
|
-
setColorScale(): void;
|
|
66
|
+
protected setColorScale(): void;
|
|
48
67
|
/**
|
|
49
68
|
* Should the data point be filled?
|
|
50
|
-
* @param
|
|
51
|
-
* @param
|
|
69
|
+
* @param group
|
|
70
|
+
* @param key
|
|
52
71
|
* @param value
|
|
53
72
|
* @param defaultFilled the default for this chart
|
|
54
73
|
*/
|
|
55
|
-
getIsFilled(
|
|
56
|
-
getFillColor(
|
|
57
|
-
getStrokeColor(
|
|
74
|
+
getIsFilled(group: any, key?: any, data?: any, defaultFilled?: boolean): any;
|
|
75
|
+
getFillColor(group: any, key?: any, data?: any): any;
|
|
76
|
+
getStrokeColor(group: any, key?: any, data?: any): any;
|
|
58
77
|
getFillScale(): any;
|
|
59
|
-
protected updateAllDataLabels(): void;
|
|
60
78
|
}
|
package/model.js
CHANGED
|
@@ -2,8 +2,11 @@
|
|
|
2
2
|
import * as Configuration from "./configuration";
|
|
3
3
|
import { Tools } from "./tools";
|
|
4
4
|
import * as colorPalettes from "./services/colorPalettes";
|
|
5
|
+
import { Events } from "./interfaces";
|
|
5
6
|
// D3
|
|
6
7
|
import { scaleOrdinal } from "d3-scale";
|
|
8
|
+
import { map } from "d3-collection";
|
|
9
|
+
import { stack } from "d3-shape";
|
|
7
10
|
/** The charting model layer which includes mainly the chart data and options,
|
|
8
11
|
* as well as some misc. information to be shared among components */
|
|
9
12
|
var ChartModel = /** @class */ (function () {
|
|
@@ -13,34 +16,61 @@ var ChartModel = /** @class */ (function () {
|
|
|
13
16
|
options: {}
|
|
14
17
|
};
|
|
15
18
|
// Fill scales & fill related objects
|
|
16
|
-
this.patternScale = {};
|
|
17
19
|
this.colorScale = {};
|
|
18
20
|
this.services = services;
|
|
19
21
|
}
|
|
20
|
-
|
|
21
|
-
|
|
22
|
-
|
|
23
|
-
|
|
24
|
-
|
|
25
|
-
|
|
22
|
+
/**
|
|
23
|
+
* Converts data provided in the older format to tabular
|
|
24
|
+
*
|
|
25
|
+
*/
|
|
26
|
+
ChartModel.prototype.transformToTabularData = function (data) {
|
|
27
|
+
console.warn("We've updated the charting data format to be tabular by default. The current format you're using is deprecated and will be removed in v1.0, read more here https://carbon-design-system.github.io/carbon-charts/?path=/story/tutorials--tabular-data-format");
|
|
28
|
+
var tabularData = [];
|
|
29
|
+
var datasets = data.datasets, labels = data.labels;
|
|
30
|
+
// Loop through all datasets
|
|
31
|
+
datasets.forEach(function (dataset) {
|
|
32
|
+
var group = dataset.label;
|
|
33
|
+
// Update each data point to the new format
|
|
34
|
+
dataset.data.forEach(function (datum, i) {
|
|
35
|
+
var updatedDatum = {
|
|
36
|
+
group: group,
|
|
37
|
+
key: labels[i]
|
|
38
|
+
};
|
|
39
|
+
if (isNaN(datum)) {
|
|
40
|
+
updatedDatum["value"] = datum.value;
|
|
41
|
+
updatedDatum["date"] = datum.date;
|
|
26
42
|
}
|
|
27
|
-
|
|
43
|
+
else {
|
|
44
|
+
updatedDatum["value"] = datum;
|
|
45
|
+
}
|
|
46
|
+
tabularData.push(updatedDatum);
|
|
28
47
|
});
|
|
29
48
|
});
|
|
49
|
+
return tabularData;
|
|
50
|
+
};
|
|
51
|
+
ChartModel.prototype.getTabularData = function (data) {
|
|
52
|
+
// if data is not an array
|
|
53
|
+
if (!Array.isArray(data)) {
|
|
54
|
+
return this.transformToTabularData(data);
|
|
55
|
+
}
|
|
30
56
|
return data;
|
|
31
57
|
};
|
|
58
|
+
ChartModel.prototype.sanitize = function (data) {
|
|
59
|
+
return this.getTabularData(data);
|
|
60
|
+
};
|
|
32
61
|
ChartModel.prototype.getDisplayData = function () {
|
|
33
|
-
var ACTIVE = Configuration.legend.items.status.ACTIVE;
|
|
34
|
-
var dataLabels = this.get("dataLabels");
|
|
35
62
|
if (!this.get("data")) {
|
|
36
63
|
return null;
|
|
37
64
|
}
|
|
65
|
+
var ACTIVE = Configuration.legend.items.status.ACTIVE;
|
|
66
|
+
var dataGroups = this.getDataGroups();
|
|
38
67
|
// Remove datasets that have been disabled
|
|
39
68
|
var displayData = Tools.clone(this.get("data"));
|
|
40
|
-
|
|
41
|
-
|
|
69
|
+
var groupMapsTo = this.getOptions().data.groupMapsTo;
|
|
70
|
+
return displayData.filter(function (datum) {
|
|
71
|
+
var group = dataGroups.find(function (group) { return group.name === datum[groupMapsTo]; });
|
|
72
|
+
return group.status === ACTIVE;
|
|
42
73
|
});
|
|
43
|
-
return displayData;
|
|
44
74
|
};
|
|
45
75
|
ChartModel.prototype.getData = function () {
|
|
46
76
|
return this.get("data");
|
|
@@ -51,19 +81,115 @@ var ChartModel = /** @class */ (function () {
|
|
|
51
81
|
*/
|
|
52
82
|
ChartModel.prototype.setData = function (newData) {
|
|
53
83
|
var sanitizedData = this.sanitize(Tools.clone(newData));
|
|
54
|
-
var
|
|
84
|
+
var dataGroups = this.generateDataGroups(sanitizedData);
|
|
55
85
|
this.set({
|
|
56
86
|
data: sanitizedData,
|
|
57
|
-
|
|
87
|
+
dataGroups: dataGroups
|
|
58
88
|
});
|
|
59
89
|
return sanitizedData;
|
|
60
90
|
};
|
|
61
|
-
|
|
62
|
-
|
|
63
|
-
|
|
64
|
-
|
|
91
|
+
/*
|
|
92
|
+
* Data groups
|
|
93
|
+
*/
|
|
94
|
+
ChartModel.prototype.updateAllDataGroups = function () {
|
|
95
|
+
// allDataGroups is used to generate a color scale that applies
|
|
96
|
+
// to all the groups. Now when the data updates, you might remove a group,
|
|
97
|
+
// and then bring it back in a newer data update, therefore
|
|
98
|
+
// the order of the groups in allDataGroups matters so that you'd never
|
|
99
|
+
// have an incorrect color assigned to a group.
|
|
100
|
+
var _this = this;
|
|
101
|
+
// Also, a new group should only be added to allDataGroups if
|
|
102
|
+
// it doesn't currently exist
|
|
103
|
+
if (!this.allDataGroups) {
|
|
104
|
+
this.allDataGroups = this.getDataGroupNames();
|
|
105
|
+
}
|
|
106
|
+
else {
|
|
107
|
+
// Loop through current data groups
|
|
108
|
+
this.getDataGroupNames().forEach(function (dataGroupName) {
|
|
109
|
+
// If group name hasn't been stored yet, store it
|
|
110
|
+
if (_this.allDataGroups.indexOf(dataGroupName) === -1) {
|
|
111
|
+
_this.allDataGroups.push(dataGroupName);
|
|
112
|
+
}
|
|
113
|
+
});
|
|
114
|
+
}
|
|
115
|
+
};
|
|
116
|
+
ChartModel.prototype.generateDataGroups = function (data) {
|
|
117
|
+
var groupMapsTo = this.getOptions().data.groupMapsTo;
|
|
118
|
+
var ACTIVE = Configuration.legend.items.status.ACTIVE;
|
|
119
|
+
var uniqueDataGroups = map(data, function (datum) { return datum[groupMapsTo]; }).keys();
|
|
120
|
+
return uniqueDataGroups.map(function (groupName) { return ({
|
|
121
|
+
name: groupName,
|
|
122
|
+
status: ACTIVE
|
|
123
|
+
}); });
|
|
124
|
+
};
|
|
125
|
+
ChartModel.prototype.getDataGroups = function () {
|
|
126
|
+
return this.get("dataGroups");
|
|
127
|
+
};
|
|
128
|
+
ChartModel.prototype.getActiveDataGroups = function () {
|
|
129
|
+
var ACTIVE = Configuration.legend.items.status.ACTIVE;
|
|
130
|
+
return this.getDataGroups().filter(function (dataGroup) { return dataGroup.status === ACTIVE; });
|
|
131
|
+
};
|
|
132
|
+
ChartModel.prototype.getDataGroupNames = function () {
|
|
133
|
+
return this.getDataGroups().map(function (dataGroup) { return dataGroup.name; });
|
|
134
|
+
};
|
|
135
|
+
ChartModel.prototype.getActiveDataGroupNames = function () {
|
|
136
|
+
return this.getActiveDataGroups().map(function (dataGroup) { return dataGroup.name; });
|
|
137
|
+
};
|
|
138
|
+
ChartModel.prototype.getGroupedData = function () {
|
|
139
|
+
var displayData = this.getDisplayData();
|
|
140
|
+
var groupedData = {};
|
|
141
|
+
var groupMapsTo = this.getOptions().data.groupMapsTo;
|
|
142
|
+
displayData.map(function (datum) {
|
|
143
|
+
var group = datum[groupMapsTo];
|
|
144
|
+
if (groupedData[group] !== null && groupedData[group] !== undefined) {
|
|
145
|
+
groupedData[group].push(datum);
|
|
146
|
+
}
|
|
147
|
+
else {
|
|
148
|
+
groupedData[group] = [datum];
|
|
149
|
+
}
|
|
150
|
+
});
|
|
151
|
+
return Object.keys(groupedData)
|
|
152
|
+
.map(function (groupName) { return ({
|
|
153
|
+
name: groupName,
|
|
154
|
+
data: groupedData[groupName]
|
|
155
|
+
}); });
|
|
156
|
+
};
|
|
157
|
+
ChartModel.prototype.getDataValuesGroupedByKeys = function () {
|
|
158
|
+
var options = this.getOptions();
|
|
159
|
+
var groupMapsTo = options.data.groupMapsTo;
|
|
160
|
+
var displayData = this.getDisplayData();
|
|
161
|
+
var domainIdentifier = this.services.cartesianScales.getDomainIdentifier();
|
|
162
|
+
var rangeIdentifier = this.services.cartesianScales.getRangeIdentifier();
|
|
163
|
+
var stackKeys = map(displayData, function (datum) { return datum[domainIdentifier]; }).keys();
|
|
164
|
+
var dataGroupNames = this.getDataGroupNames();
|
|
165
|
+
return stackKeys.map(function (key) {
|
|
166
|
+
var correspondingValues = { sharedStackKey: key };
|
|
167
|
+
dataGroupNames.forEach(function (dataGroupName) {
|
|
168
|
+
var correspondingDatum = displayData.find(function (datum) {
|
|
169
|
+
return datum[groupMapsTo] === dataGroupName &&
|
|
170
|
+
datum[domainIdentifier].toString() === key;
|
|
171
|
+
});
|
|
172
|
+
correspondingValues[dataGroupName] = correspondingDatum ? correspondingDatum[rangeIdentifier] : null;
|
|
173
|
+
});
|
|
174
|
+
return correspondingValues;
|
|
175
|
+
});
|
|
176
|
+
};
|
|
177
|
+
ChartModel.prototype.getStackedData = function () {
|
|
178
|
+
var options = this.getOptions();
|
|
179
|
+
var groupMapsTo = options.data.groupMapsTo;
|
|
180
|
+
var dataGroupNames = this.getDataGroupNames();
|
|
181
|
+
var dataValuesGroupedByKeys = this.getDataValuesGroupedByKeys();
|
|
182
|
+
return stack().keys(dataGroupNames)(dataValuesGroupedByKeys)
|
|
183
|
+
.map(function (series, i) {
|
|
184
|
+
// Add data group names to each series
|
|
185
|
+
return Object.keys(series)
|
|
186
|
+
.filter(function (key) { return !isNaN(key); })
|
|
187
|
+
.map(function (key) {
|
|
188
|
+
var element = series[key];
|
|
189
|
+
element[groupMapsTo] = dataGroupNames[i];
|
|
190
|
+
return element;
|
|
191
|
+
});
|
|
65
192
|
});
|
|
66
|
-
return dataLabels;
|
|
67
193
|
};
|
|
68
194
|
/**
|
|
69
195
|
* @return {Object} The chart's options
|
|
@@ -104,9 +230,9 @@ var ChartModel = /** @class */ (function () {
|
|
|
104
230
|
if (!this.getDisplayData()) {
|
|
105
231
|
return;
|
|
106
232
|
}
|
|
107
|
-
this.
|
|
233
|
+
this.updateAllDataGroups();
|
|
108
234
|
this.setColorScale();
|
|
109
|
-
this.services.events.dispatchEvent(
|
|
235
|
+
this.services.events.dispatchEvent(Events.Model.UPDATE);
|
|
110
236
|
};
|
|
111
237
|
ChartModel.prototype.setUpdateCallback = function (cb) {
|
|
112
238
|
this.updateCallback = cb;
|
|
@@ -116,112 +242,115 @@ var ChartModel = /** @class */ (function () {
|
|
|
116
242
|
*/
|
|
117
243
|
ChartModel.prototype.toggleDataLabel = function (changedLabel) {
|
|
118
244
|
var _a = Configuration.legend.items.status, ACTIVE = _a.ACTIVE, DISABLED = _a.DISABLED;
|
|
119
|
-
var
|
|
120
|
-
var hasDeactivatedItems =
|
|
121
|
-
var activeItems =
|
|
245
|
+
var dataGroups = this.getDataGroups();
|
|
246
|
+
var hasDeactivatedItems = dataGroups.some(function (group) { return group.status === DISABLED; });
|
|
247
|
+
var activeItems = dataGroups.filter(function (group) { return group.status === ACTIVE; });
|
|
122
248
|
// If there are deactivated items, toggle "changedLabel"
|
|
123
249
|
if (hasDeactivatedItems) {
|
|
124
250
|
// If the only active item is being toggled
|
|
125
251
|
// Activate all items
|
|
126
|
-
if (activeItems.length === 1 && activeItems[0] === changedLabel) {
|
|
252
|
+
if (activeItems.length === 1 && activeItems[0].name === changedLabel) {
|
|
127
253
|
// If every item is active, then enable "changedLabel" and disable all other items
|
|
128
|
-
|
|
129
|
-
|
|
254
|
+
dataGroups.forEach(function (group, i) {
|
|
255
|
+
dataGroups[i].status = ACTIVE;
|
|
130
256
|
});
|
|
131
257
|
}
|
|
132
258
|
else {
|
|
133
|
-
|
|
259
|
+
var indexToChange = dataGroups.findIndex(function (group) { return group.name === changedLabel; });
|
|
260
|
+
dataGroups[indexToChange].status = dataGroups[indexToChange].status === DISABLED ? ACTIVE : DISABLED;
|
|
134
261
|
}
|
|
135
262
|
}
|
|
136
263
|
else {
|
|
137
264
|
// If every item is active, then enable "changedLabel" and disable all other items
|
|
138
|
-
|
|
139
|
-
|
|
265
|
+
dataGroups.forEach(function (group, i) {
|
|
266
|
+
dataGroups[i].status = (group.name === changedLabel ? ACTIVE : DISABLED);
|
|
140
267
|
});
|
|
141
268
|
}
|
|
269
|
+
// dispatch legend filtering event with the status of all the dataLabels
|
|
270
|
+
this.services.events.dispatchEvent(Events.Legend.ITEMS_UPDATE, {
|
|
271
|
+
dataGroups: dataGroups
|
|
272
|
+
});
|
|
142
273
|
// Update model
|
|
143
274
|
this.set({
|
|
144
|
-
|
|
275
|
+
dataGroups: dataGroups
|
|
145
276
|
});
|
|
146
277
|
};
|
|
147
278
|
/*
|
|
148
279
|
* Fill scales
|
|
149
280
|
*/
|
|
150
281
|
ChartModel.prototype.setColorScale = function () {
|
|
151
|
-
var
|
|
152
|
-
|
|
153
|
-
|
|
154
|
-
|
|
155
|
-
|
|
156
|
-
|
|
157
|
-
|
|
158
|
-
|
|
159
|
-
this.getData().datasets.forEach(function (dataset, i) {
|
|
160
|
-
_this.colorScale[dataset.label] = scaleOrdinal().range([colors_1[i]]).domain(_this.allDataLabels);
|
|
161
|
-
});
|
|
282
|
+
var defaultColors = colorPalettes.DEFAULT;
|
|
283
|
+
var options = this.getOptions();
|
|
284
|
+
var userProvidedScale = Tools.getProperty(options, "color", "scale");
|
|
285
|
+
// If there is no valid user provided scale, use the default set of colors
|
|
286
|
+
if (userProvidedScale === null || Object.keys(userProvidedScale).length === 0) {
|
|
287
|
+
this.colorScale = scaleOrdinal().range(defaultColors)
|
|
288
|
+
.domain(this.allDataGroups);
|
|
289
|
+
return;
|
|
162
290
|
}
|
|
291
|
+
/**
|
|
292
|
+
* Go through allDataGroups. If a data group has a color value provided
|
|
293
|
+
* by the user, add that to the color range
|
|
294
|
+
* If not, add a default color
|
|
295
|
+
*/
|
|
296
|
+
var colorRange = [];
|
|
297
|
+
var colorIndex = 0;
|
|
298
|
+
this.allDataGroups.forEach(function (dataGroup) {
|
|
299
|
+
if (userProvidedScale[dataGroup]) {
|
|
300
|
+
colorRange.push(userProvidedScale[dataGroup]);
|
|
301
|
+
}
|
|
302
|
+
else {
|
|
303
|
+
colorRange.push(defaultColors[colorIndex]);
|
|
304
|
+
}
|
|
305
|
+
if (colorIndex === defaultColors.length - 1) {
|
|
306
|
+
colorIndex = 0;
|
|
307
|
+
}
|
|
308
|
+
else {
|
|
309
|
+
colorIndex++;
|
|
310
|
+
}
|
|
311
|
+
});
|
|
312
|
+
this.colorScale = scaleOrdinal().range(colorRange)
|
|
313
|
+
.domain(this.allDataGroups);
|
|
163
314
|
};
|
|
164
315
|
/**
|
|
165
316
|
* Should the data point be filled?
|
|
166
|
-
* @param
|
|
167
|
-
* @param
|
|
317
|
+
* @param group
|
|
318
|
+
* @param key
|
|
168
319
|
* @param value
|
|
169
320
|
* @param defaultFilled the default for this chart
|
|
170
321
|
*/
|
|
171
|
-
ChartModel.prototype.getIsFilled = function (
|
|
322
|
+
ChartModel.prototype.getIsFilled = function (group, key, data, defaultFilled) {
|
|
172
323
|
var options = this.getOptions();
|
|
173
324
|
if (options.getIsFilled) {
|
|
174
|
-
return options.getIsFilled(
|
|
325
|
+
return options.getIsFilled(group, key, data, defaultFilled);
|
|
175
326
|
}
|
|
176
327
|
else {
|
|
177
328
|
return defaultFilled;
|
|
178
329
|
}
|
|
179
330
|
};
|
|
180
|
-
ChartModel.prototype.getFillColor = function (
|
|
331
|
+
ChartModel.prototype.getFillColor = function (group, key, data) {
|
|
181
332
|
var options = this.getOptions();
|
|
182
|
-
var defaultFillColor = this.getFillScale()
|
|
333
|
+
var defaultFillColor = this.getFillScale()(group);
|
|
183
334
|
if (options.getFillColor) {
|
|
184
|
-
return options.getFillColor(
|
|
335
|
+
return options.getFillColor(group, key, data, defaultFillColor);
|
|
185
336
|
}
|
|
186
337
|
else {
|
|
187
338
|
return defaultFillColor;
|
|
188
339
|
}
|
|
189
340
|
};
|
|
190
|
-
ChartModel.prototype.getStrokeColor = function (
|
|
341
|
+
ChartModel.prototype.getStrokeColor = function (group, key, data) {
|
|
191
342
|
var options = this.getOptions();
|
|
192
|
-
var defaultStrokeColor = this.colorScale
|
|
343
|
+
var defaultStrokeColor = this.colorScale(group);
|
|
193
344
|
if (options.getStrokeColor) {
|
|
194
|
-
return options.getStrokeColor(
|
|
345
|
+
return options.getStrokeColor(group, key, data, defaultStrokeColor);
|
|
195
346
|
}
|
|
196
347
|
else {
|
|
197
348
|
return defaultStrokeColor;
|
|
198
349
|
}
|
|
199
350
|
};
|
|
200
351
|
ChartModel.prototype.getFillScale = function () {
|
|
201
|
-
// Choose patternScale or colorScale based on the "accessibility" flag
|
|
202
|
-
// return this.get("options").accessibility ? this.patternScale : this.colorScale;
|
|
203
352
|
return this.colorScale;
|
|
204
353
|
};
|
|
205
|
-
/*
|
|
206
|
-
* Data labels
|
|
207
|
-
*/
|
|
208
|
-
ChartModel.prototype.updateAllDataLabels = function () {
|
|
209
|
-
var _this = this;
|
|
210
|
-
// If allDataLabels hasn't been initialized yet
|
|
211
|
-
// Set it to the current set of chart labels
|
|
212
|
-
if (!this.allDataLabels) {
|
|
213
|
-
this.allDataLabels = this.getDisplayData().labels;
|
|
214
|
-
}
|
|
215
|
-
else {
|
|
216
|
-
// Loop through current chart labels
|
|
217
|
-
this.getDisplayData().labels.forEach(function (label) {
|
|
218
|
-
// If label hasn't been stored yet, store it
|
|
219
|
-
if (_this.allDataLabels.indexOf(label) === -1) {
|
|
220
|
-
_this.allDataLabels.push(label);
|
|
221
|
-
}
|
|
222
|
-
});
|
|
223
|
-
}
|
|
224
|
-
};
|
|
225
354
|
return ChartModel;
|
|
226
355
|
}());
|
|
227
356
|
export { ChartModel };
|