dtable-statistic 4.3.4 → 4.3.5
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/es/api/dtable-db-api.js +10 -3
- package/es/calculator/base-calculator.js +20 -12
- package/es/calculator/basic-chart-calculator.js +72 -65
- package/es/calculator/combination-calculator.js +64 -57
- package/es/calculator/compare-bar-calculator.js +33 -26
- package/es/calculator/completeness-calculator.js +37 -30
- package/es/calculator/copy-value.js +7 -1
- package/es/calculator/dashboard-calculator.js +20 -13
- package/es/calculator/heat-map-calculator.js +25 -18
- package/es/calculator/horizontal-bar-calculator.js +15 -8
- package/es/calculator/index.js +42 -35
- package/es/calculator/map-calculator.js +29 -22
- package/es/calculator/mirror-calculator.js +27 -20
- package/es/calculator/number-card-calculator.js +17 -10
- package/es/calculator/pivot-table-calculator.js +65 -58
- package/es/calculator/scatter-calculator.js +21 -14
- package/es/calculator/thread-manager.js +7 -1
- package/es/calculator/trend-calculator.js +29 -22
- package/es/calculator/workers/basic-chart-calculator-worker.js +83 -76
- package/es/calculator/workers/calculator.worker.js +33 -30
- package/es/calculator/workers/card-calculator-worker.js +19 -13
- package/es/calculator/workers/combination-calculator-worker.js +53 -46
- package/es/calculator/workers/compare-bar-chart-calculator-worker.js +29 -22
- package/es/calculator/workers/completeness-calculator-worker.js +41 -34
- package/es/calculator/workers/dashboard-calculator-worker.js +24 -18
- package/es/calculator/workers/mirror-calculator-worker.js +29 -22
- package/es/calculator/workers/pivot-table-calculator-worker.js +84 -77
- package/es/calculator/workers/scatter-calculator-worker.js +27 -20
- package/es/calculator/workers/trend-calculator-worker.js +34 -27
- package/es/calculator/world-map-calculator.js +24 -17
- package/es/components/common-add-tool.js +12 -5
- package/es/components/dialog/chart-addition-edit-dialog.js +20 -12
- package/es/components/dialog/chart-addition-widgets/chart-selector.js +108 -101
- package/es/components/dialog/color-theme-dialog.js +22 -15
- package/es/components/dialog/delete-confirmation-dialog.js +18 -11
- package/es/components/dialog/enlarged-chart-dialog.js +28 -20
- package/es/components/dialog/new-table-dialog.js +23 -16
- package/es/components/dialog/new-view-dialog.js +21 -14
- package/es/components/dialog/rename-view-dialog.js +22 -14
- package/es/components/dialog/statistic-record-dialog/index.js +45 -37
- package/es/components/dialog/statistic-types-dialog/index.js +22 -14
- package/es/components/dialog/table-select-dialog.js +23 -15
- package/es/components/dropdown-menu/statistic-dropdown-menu.js +49 -41
- package/es/components/dtable-popover.js +19 -12
- package/es/components/dtable-search-input.js +21 -13
- package/es/components/dtable-select.js +20 -12
- package/es/components/icon.js +11 -4
- package/es/components/index.js +76 -11
- package/es/components/loading.js +10 -3
- package/es/components/modal-portal.js +12 -5
- package/es/components/popover/color-rules/color-rule.js +33 -25
- package/es/components/popover/color-rules/index.js +14 -6
- package/es/components/popover/color-rules/rule-filters/filter.js +34 -27
- package/es/components/popover/color-rules/rule-filters/index.js +25 -17
- package/es/components/popover/color-rules/rule-filters/number-input.js +17 -9
- package/es/components/popover/color-rules-popover.js +32 -24
- package/es/components/popover/color-selector-popover.js +17 -10
- package/es/components/seatable-radio/index.js +16 -9
- package/es/components/select/index.js +9 -2
- package/es/components/select/option-group.js +27 -19
- package/es/components/select/option.js +14 -6
- package/es/components/select/select.js +25 -17
- package/es/components/toast/alert.js +31 -24
- package/es/components/toast/index.js +10 -3
- package/es/components/toast/toast.js +20 -12
- package/es/components/toast/toastManager.js +17 -9
- package/es/components/toast/toaster.js +14 -6
- package/es/constants/color-rules.js +12 -6
- package/es/constants/dtable-select-style.js +9 -4
- package/es/constants/event-types.js +10 -4
- package/es/constants/index.js +96 -67
- package/es/constants/key-codes.js +2 -0
- package/es/constants/map.js +8 -2
- package/es/constants/model.js +26 -20
- package/es/constants/regions.js +8 -3
- package/es/constants/zIndexes.js +7 -1
- package/es/custom-g2.js +236 -208
- package/es/dashboard.js +58 -50
- package/es/desktop-dashboard.js +55 -47
- package/es/index.js +6 -3
- package/es/locale/index.js +13 -10
- package/es/locale/lang/de.js +7 -1
- package/es/locale/lang/en.js +7 -1
- package/es/locale/lang/fr.js +7 -1
- package/es/locale/lang/zh_CN.js +7 -1
- package/es/mobile-dashboard.js +46 -38
- package/es/model/bar-group.js +19 -11
- package/es/model/bar.js +18 -10
- package/es/model/base-model.js +9 -2
- package/es/model/basic-number-card.js +16 -8
- package/es/model/collaborators.js +9 -2
- package/es/model/combination.js +20 -12
- package/es/model/compare-bar.js +24 -16
- package/es/model/completeness-group.js +16 -8
- package/es/model/completeness.js +13 -5
- package/es/model/custom-bar.js +14 -6
- package/es/model/dashboard.js +14 -6
- package/es/model/generic-model.js +141 -133
- package/es/model/heat-map.js +19 -11
- package/es/model/horizontal-bar-group.js +18 -10
- package/es/model/horizontal-bar.js +18 -10
- package/es/model/index.js +185 -53
- package/es/model/map.js +23 -15
- package/es/model/mirror.js +21 -13
- package/es/model/pie.js +18 -10
- package/es/model/ring.js +19 -11
- package/es/model/scatter.js +14 -6
- package/es/model/statistic-dashboard.js +9 -2
- package/es/model/table.js +18 -10
- package/es/model/trend.js +20 -12
- package/es/model/world-map.js +21 -13
- package/es/service/chart-service.js +14 -7
- package/es/service/dashboard-service.js +41 -34
- package/es/service/map-json.js +14 -8
- package/es/stat-editor/chart-name-editor.js +15 -8
- package/es/stat-editor/index.js +24 -16
- package/es/stat-editor/stat-settings/advance-chart-settings/basic-number-card-settings.js +29 -21
- package/es/stat-editor/stat-settings/advance-chart-settings/combination-settings.js +57 -49
- package/es/stat-editor/stat-settings/advance-chart-settings/dashboard-chart-settings.js +31 -23
- package/es/stat-editor/stat-settings/advance-chart-settings/geo-granularity-settings.js +11 -4
- package/es/stat-editor/stat-settings/advance-chart-settings/heat-map-settings.js +27 -19
- package/es/stat-editor/stat-settings/advance-chart-settings/index.js +51 -43
- package/es/stat-editor/stat-settings/advance-chart-settings/map-settings.js +31 -23
- package/es/stat-editor/stat-settings/advance-chart-settings/mirror-settings.js +31 -23
- package/es/stat-editor/stat-settings/advance-chart-settings/style-setting/combination-style-setting.js +45 -37
- package/es/stat-editor/stat-settings/advance-chart-settings/style-setting/heat-map-settings.js +27 -19
- package/es/stat-editor/stat-settings/advance-chart-settings/style-setting/map-setting.js +34 -26
- package/es/stat-editor/stat-settings/advance-chart-settings/summary-settings.js +55 -47
- package/es/stat-editor/stat-settings/advance-chart-settings/trend-chart-settings.js +30 -22
- package/es/stat-editor/stat-settings/advance-chart-settings/world-map-settings.js +26 -18
- package/es/stat-editor/stat-settings/basic-chart-settings/advance-bar-chart-settings.js +35 -27
- package/es/stat-editor/stat-settings/basic-chart-settings/bar-settings.js +32 -24
- package/es/stat-editor/stat-settings/basic-chart-settings/completeness-chart-settings.js +41 -33
- package/es/stat-editor/stat-settings/basic-chart-settings/custom-bar-settings.js +30 -22
- package/es/stat-editor/stat-settings/basic-chart-settings/groupby-settings.js +26 -18
- package/es/stat-editor/stat-settings/basic-chart-settings/horizontal-axis-group-settings.js +54 -46
- package/es/stat-editor/stat-settings/basic-chart-settings/horizontal-bar-settings.js +31 -23
- package/es/stat-editor/stat-settings/basic-chart-settings/horizontal-group-chart-settings.js +34 -26
- package/es/stat-editor/stat-settings/basic-chart-settings/index.js +85 -77
- package/es/stat-editor/stat-settings/basic-chart-settings/pie-settings.js +29 -21
- package/es/stat-editor/stat-settings/basic-chart-settings/pivot-table-settings.js +81 -73
- package/es/stat-editor/stat-settings/basic-chart-settings/scatter-settings.js +24 -16
- package/es/stat-editor/stat-settings/basic-chart-settings/stack-item-settings.js +27 -19
- package/es/stat-editor/stat-settings/basic-chart-settings/stacks-settings.js +26 -18
- package/es/stat-editor/stat-settings/basic-chart-settings/style-setting/bar-chart-style-setting.js +57 -49
- package/es/stat-editor/stat-settings/basic-chart-settings/style-setting/completeness-style.js +25 -17
- package/es/stat-editor/stat-settings/basic-chart-settings/style-setting/horizontal-bar-chart-style.js +55 -47
- package/es/stat-editor/stat-settings/basic-chart-settings/style-setting/label-font-size-editor.js +19 -11
- package/es/stat-editor/stat-settings/basic-chart-settings/style-setting/pie-chart-style-settings.js +53 -45
- package/es/stat-editor/stat-settings/basic-chart-settings/style-setting/time-compare-style.js +17 -9
- package/es/stat-editor/stat-settings/basic-chart-settings/summary-method-setting.js +28 -20
- package/es/stat-editor/stat-settings/basic-chart-settings/summary-settings.js +38 -30
- package/es/stat-editor/stat-settings/basic-chart-settings/time-comparison-settings.js +58 -50
- package/es/stat-editor/stat-settings/basic-chart-settings/timer-picker.js +25 -17
- package/es/stat-editor/stat-settings/basic-chart-settings/y-axis-group-settings.js +55 -47
- package/es/stat-editor/stat-settings/color-setting/color-group-selector.js +19 -11
- package/es/stat-editor/stat-settings/color-setting/color-picker.js +19 -12
- package/es/stat-editor/stat-settings/color-setting/color-use-type-selector.js +70 -62
- package/es/stat-editor/stat-settings/map/map-level.js +20 -13
- package/es/stat-editor/stat-settings/map/map-province-city.js +27 -20
- package/es/stat-editor/stat-settings/public-setting/axis-label-position-setting.js +19 -11
- package/es/stat-editor/stat-settings/public-setting/base-settings.js +28 -20
- package/es/stat-editor/stat-settings/public-setting/calender.js +29 -22
- package/es/stat-editor/stat-settings/public-setting/column-settings.js +13 -6
- package/es/stat-editor/stat-settings/public-setting/custom-title-setting.js +16 -9
- package/es/stat-editor/stat-settings/public-setting/data-sort-setting.js +21 -13
- package/es/stat-editor/stat-settings/public-setting/ind-toggle-setting.js +15 -8
- package/es/stat-editor/stat-settings/public-setting/min-max-setting.js +19 -11
- package/es/stat-editor/stat-settings/public-setting/numeric-summary-item.js +35 -27
- package/es/stat-editor/stat-settings/public-setting/toggle-setting.js +15 -8
- package/es/stat-editor/stat-settings/public-setting/type-settings/index.js +26 -18
- package/es/stat-list/chart-preview.js +28 -20
- package/es/stat-list/index.js +35 -27
- package/es/stat-view/area-chart.js +50 -43
- package/es/stat-view/bar-chart.js +54 -47
- package/es/stat-view/base-chart.js +32 -24
- package/es/stat-view/basic-number-card.js +26 -19
- package/es/stat-view/combination-chart.js +56 -49
- package/es/stat-view/compare-chart.js +46 -39
- package/es/stat-view/completeness-chart.js +35 -28
- package/es/stat-view/custom-bar.js +38 -31
- package/es/stat-view/dashboard-chart.js +22 -15
- package/es/stat-view/heat-map.js +50 -43
- package/es/stat-view/horizontal-bar-chart.js +58 -51
- package/es/stat-view/index.js +80 -73
- package/es/stat-view/line-chart.js +46 -39
- package/es/stat-view/map.js +40 -33
- package/es/stat-view/mirror.js +28 -21
- package/es/stat-view/pie-chart.js +36 -29
- package/es/stat-view/pivot-table/index.js +39 -32
- package/es/stat-view/pivot-table/one-dimension-table-no-numeric-columns.js +39 -31
- package/es/stat-view/pivot-table/one-dimension-table-with-numeric-columns.js +37 -29
- package/es/stat-view/pivot-table/pivot-table-display-name.js +54 -46
- package/es/stat-view/pivot-table/two-dimension-table.js +70 -62
- package/es/stat-view/ring-chart.js +45 -38
- package/es/stat-view/scatter-chart.js +37 -30
- package/es/stat-view/treemap-chart.js +44 -37
- package/es/stat-view/trend-chart.js +39 -32
- package/es/stat-view/world-map.js +40 -33
- package/es/tabs/index.js +40 -32
- package/es/tabs/tab.js +34 -26
- package/es/utils/basic-chart-utils.js +9 -2
- package/es/utils/cell-format.js +22 -14
- package/es/utils/cell-value.js +14 -7
- package/es/utils/collaborator.js +13 -4
- package/es/utils/color-utils.js +29 -18
- package/es/utils/column-utils.js +29 -18
- package/es/utils/column.js +11 -4
- package/es/utils/common-utils.js +65 -41
- package/es/utils/date-format.js +8 -2
- package/es/utils/export-table-utils.js +91 -82
- package/es/utils/index.js +100 -11
- package/es/utils/map.js +36 -26
- package/es/utils/model.js +14 -6
- package/es/utils/object.js +15 -6
- package/es/utils/pivot-table.js +23 -16
- package/es/utils/row-utils.js +33 -23
- package/es/utils/search.js +29 -21
- package/es/utils/sql-utils.js +75 -65
- package/es/utils/stat-utils.js +66 -60
- package/es/utils/trend-utils.js +40 -32
- package/package.json +3 -3
|
@@ -1,12 +1,20 @@
|
|
|
1
|
-
|
|
2
|
-
|
|
3
|
-
|
|
4
|
-
|
|
5
|
-
|
|
6
|
-
|
|
7
|
-
|
|
8
|
-
|
|
9
|
-
|
|
1
|
+
"use strict";
|
|
2
|
+
|
|
3
|
+
var _interopRequireDefault = require("@babel/runtime/helpers/interopRequireDefault").default;
|
|
4
|
+
var _interopRequireWildcard = require("@babel/runtime/helpers/interopRequireWildcard").default;
|
|
5
|
+
Object.defineProperty(exports, "__esModule", {
|
|
6
|
+
value: true
|
|
7
|
+
});
|
|
8
|
+
exports.default = void 0;
|
|
9
|
+
var _react = _interopRequireWildcard(require("react"));
|
|
10
|
+
var _reactIntlUniversal = _interopRequireDefault(require("react-intl-universal"));
|
|
11
|
+
var _dtableStore = require("dtable-store");
|
|
12
|
+
var _pivotTableDisplayName = _interopRequireDefault(require("./pivot-table-display-name"));
|
|
13
|
+
var _utils = require("../../utils");
|
|
14
|
+
var _pivotTable = require("../../utils/pivot-table");
|
|
15
|
+
var _constants = require("../../constants");
|
|
16
|
+
var _statisticPivotTableModule = _interopRequireDefault(require("./statistic-pivot-table.module.css"));
|
|
17
|
+
class TwoDimensionTable extends _react.PureComponent {
|
|
10
18
|
constructor() {
|
|
11
19
|
var _this;
|
|
12
20
|
super(...arguments);
|
|
@@ -16,7 +24,7 @@ class TwoDimensionTable extends PureComponent {
|
|
|
16
24
|
isColumn = false,
|
|
17
25
|
isRow = false
|
|
18
26
|
} = arguments.length > 1 && arguments[1] !== undefined ? arguments[1] : {};
|
|
19
|
-
if (isMobile) return;
|
|
27
|
+
if (_utils.isMobile) return;
|
|
20
28
|
_this.props.toggleStatisticRecordsDialog(cell, _this.props.statItem, {
|
|
21
29
|
isColumn,
|
|
22
30
|
isRow
|
|
@@ -26,7 +34,7 @@ class TwoDimensionTable extends PureComponent {
|
|
|
26
34
|
let {
|
|
27
35
|
isCurrentView
|
|
28
36
|
} = _ref;
|
|
29
|
-
if (isMobile) return;
|
|
37
|
+
if (_utils.isMobile) return;
|
|
30
38
|
const {
|
|
31
39
|
getTableById,
|
|
32
40
|
statItem
|
|
@@ -36,9 +44,9 @@ class TwoDimensionTable extends PureComponent {
|
|
|
36
44
|
view_id
|
|
37
45
|
} = statItem;
|
|
38
46
|
const table = getTableById(table_id);
|
|
39
|
-
const view = Views.getViewById(table.views, view_id);
|
|
47
|
+
const view = _dtableStore.Views.getViewById(table.views, view_id);
|
|
40
48
|
let rows = [];
|
|
41
|
-
if (!Views.isArchiveView(view)) {
|
|
49
|
+
if (!_dtableStore.Views.isArchiveView(view)) {
|
|
42
50
|
rows = recordsList.flat();
|
|
43
51
|
}
|
|
44
52
|
this.props.toggleStatisticRecordsDialog({
|
|
@@ -48,7 +56,7 @@ class TwoDimensionTable extends PureComponent {
|
|
|
48
56
|
});
|
|
49
57
|
};
|
|
50
58
|
this.getNumberValue = val => {
|
|
51
|
-
if (isNumber(val)) {
|
|
59
|
+
if ((0, _dtableStore.isNumber)(val)) {
|
|
52
60
|
return val;
|
|
53
61
|
}
|
|
54
62
|
return 0;
|
|
@@ -83,7 +91,7 @@ class TwoDimensionTable extends PureComponent {
|
|
|
83
91
|
method
|
|
84
92
|
} = column;
|
|
85
93
|
if (Array.isArray(rowData)) {
|
|
86
|
-
const sum = getPivotTableSummaryTotal(type, key, sqlKey, STATISTICS_COUNT_TYPE.ADVANCED, method, rowData, formulaRows, isSqlQuery);
|
|
94
|
+
const sum = (0, _pivotTable.getPivotTableSummaryTotal)(type, key, sqlKey, _constants.STATISTICS_COUNT_TYPE.ADVANCED, method, rowData, formulaRows, isSqlQuery);
|
|
87
95
|
summary_multiple_columns.push(sum);
|
|
88
96
|
formatted_summary_multiple_columns.push(getSummaryValueDisplayString(column, sum, method));
|
|
89
97
|
return;
|
|
@@ -126,36 +134,36 @@ class TwoDimensionTable extends PureComponent {
|
|
|
126
134
|
pivot_summary_multiple_columns
|
|
127
135
|
} = pivotResult;
|
|
128
136
|
const isMultipleColumnHeader = column_groupby_multiple_numeric_column && column_groupby_column_key && pivot_summary_multiple_columns.length !== 0;
|
|
129
|
-
return /*#__PURE__*/
|
|
137
|
+
return /*#__PURE__*/_react.default.createElement("thead", null, /*#__PURE__*/_react.default.createElement("tr", null, /*#__PURE__*/_react.default.createElement("th", {
|
|
130
138
|
className: "pivot-table-header"
|
|
131
139
|
}, !rowGroupName && groupName), Array.isArray(pivot_columns) && pivot_columns.map((item, index) => {
|
|
132
140
|
const {
|
|
133
141
|
original_key
|
|
134
142
|
} = item;
|
|
135
|
-
return /*#__PURE__*/
|
|
143
|
+
return /*#__PURE__*/_react.default.createElement("th", {
|
|
136
144
|
className: 'pivot-table-header',
|
|
137
145
|
key: "pivot-column-".concat(index)
|
|
138
|
-
}, /*#__PURE__*/
|
|
146
|
+
}, /*#__PURE__*/_react.default.createElement(_pivotTableDisplayName.default, {
|
|
139
147
|
value: original_key,
|
|
140
148
|
column: columnGroupbyColumn
|
|
141
149
|
}));
|
|
142
|
-
}), display_total && /*#__PURE__*/
|
|
150
|
+
}), display_total && /*#__PURE__*/_react.default.createElement("th", {
|
|
143
151
|
className: 'pivot-table-header'
|
|
144
|
-
}, /*#__PURE__*/
|
|
152
|
+
}, /*#__PURE__*/_react.default.createElement("div", null, _reactIntlUniversal.default.get(_constants.TITLE_TOTAL)))), isMultipleColumnHeader && /*#__PURE__*/_react.default.createElement("tr", null, /*#__PURE__*/_react.default.createElement("th", {
|
|
145
153
|
className: "pivot-table-header"
|
|
146
154
|
}), Array.isArray(pivot_columns) && pivot_columns.map((item, index) => {
|
|
147
|
-
return /*#__PURE__*/
|
|
148
|
-
className: "pivot-table-header ".concat(
|
|
155
|
+
return /*#__PURE__*/_react.default.createElement("th", {
|
|
156
|
+
className: "pivot-table-header ".concat(_statisticPivotTableModule.default['pivot-summary-multiple-columns-th']),
|
|
149
157
|
key: "pivot-column-".concat(index)
|
|
150
|
-
}, /*#__PURE__*/
|
|
151
|
-
className:
|
|
158
|
+
}, /*#__PURE__*/_react.default.createElement("div", {
|
|
159
|
+
className: _statisticPivotTableModule.default['pivot-summary-multiple-columns-div']
|
|
152
160
|
}, pivot_summary_multiple_columns.map((item, index) => {
|
|
153
|
-
return /*#__PURE__*/
|
|
161
|
+
return /*#__PURE__*/_react.default.createElement("div", {
|
|
154
162
|
key: index
|
|
155
163
|
}, item.column_name);
|
|
156
164
|
})));
|
|
157
|
-
}), display_total && /*#__PURE__*/
|
|
158
|
-
className: "pivot-table-header ".concat(
|
|
165
|
+
}), display_total && /*#__PURE__*/_react.default.createElement("th", {
|
|
166
|
+
className: "pivot-table-header ".concat(_statisticPivotTableModule.default['pivot-empty-cell'])
|
|
159
167
|
})));
|
|
160
168
|
};
|
|
161
169
|
this.renderRowTotal = (isValidSummaryDisplayValue, summaryDisplayValue, cells, pivotRowCells, rowItem, firstSummaryColumnFromMultiple) => {
|
|
@@ -163,8 +171,8 @@ class TwoDimensionTable extends PureComponent {
|
|
|
163
171
|
if (firstSummaryColumnFromMultiple) {
|
|
164
172
|
rowTotal = this.props.getSummaryValueDisplayString(firstSummaryColumnFromMultiple, summaryDisplayValue, firstSummaryColumnFromMultiple.method);
|
|
165
173
|
}
|
|
166
|
-
return /*#__PURE__*/
|
|
167
|
-
className: "".concat(
|
|
174
|
+
return /*#__PURE__*/_react.default.createElement("td", {
|
|
175
|
+
className: "".concat(_statisticPivotTableModule.default['pivot-cell'], " ").concat(isValidSummaryDisplayValue ? '' : _statisticPivotTableModule.default['pivot-empty-cell']),
|
|
168
176
|
title: isValidSummaryDisplayValue ? rowTotal : '',
|
|
169
177
|
onClick: () => this.toggleRecords({
|
|
170
178
|
rows: Array.isArray(cells) && cells.length > 0 ? pivotRowCells : rowItem.rows,
|
|
@@ -174,7 +182,7 @@ class TwoDimensionTable extends PureComponent {
|
|
|
174
182
|
}, {
|
|
175
183
|
isRow: true
|
|
176
184
|
})
|
|
177
|
-
}, isValidSummaryDisplayValue ? /*#__PURE__*/
|
|
185
|
+
}, isValidSummaryDisplayValue ? /*#__PURE__*/_react.default.createElement("div", null, rowTotal) : /*#__PURE__*/_react.default.createElement("i", null));
|
|
178
186
|
};
|
|
179
187
|
this.renderAllTotal = (allTotalDisplay, pivotColumnCells, firstSummaryColumnFromMultiple) => {
|
|
180
188
|
const isValidAllTotalDisplay = this.props.isValidValue(allTotalDisplay);
|
|
@@ -182,13 +190,13 @@ class TwoDimensionTable extends PureComponent {
|
|
|
182
190
|
if (firstSummaryColumnFromMultiple) {
|
|
183
191
|
allTotal = this.props.getSummaryValueDisplayString(firstSummaryColumnFromMultiple, allTotalDisplay, firstSummaryColumnFromMultiple.method);
|
|
184
192
|
}
|
|
185
|
-
return /*#__PURE__*/
|
|
186
|
-
className: "".concat(
|
|
193
|
+
return /*#__PURE__*/_react.default.createElement("td", {
|
|
194
|
+
className: "".concat(_statisticPivotTableModule.default['pivot-cell'], " pivot-table-total ").concat(isValidAllTotalDisplay ? '' : _statisticPivotTableModule.default['pivot-empty-cell']),
|
|
187
195
|
onClick: () => this.onClickTotals(pivotColumnCells, {
|
|
188
196
|
isCurrentView: true
|
|
189
197
|
}),
|
|
190
198
|
title: isValidAllTotalDisplay ? allTotal : ''
|
|
191
|
-
}, isValidAllTotalDisplay ? /*#__PURE__*/
|
|
199
|
+
}, isValidAllTotalDisplay ? /*#__PURE__*/_react.default.createElement("div", null, allTotal) : /*#__PURE__*/_react.default.createElement("i", null));
|
|
192
200
|
};
|
|
193
201
|
this.renderRows = _ref3 => {
|
|
194
202
|
let {
|
|
@@ -215,11 +223,11 @@ class TwoDimensionTable extends PureComponent {
|
|
|
215
223
|
formulaRows,
|
|
216
224
|
isSqlQuery = false
|
|
217
225
|
} = pivotResult;
|
|
218
|
-
const summaryColumn = TableUtils.getTableColumnByKey(table, summary_column_key) || {};
|
|
226
|
+
const summaryColumn = _dtableStore.TableUtils.getTableColumnByKey(table, summary_column_key) || {};
|
|
219
227
|
let allTotalDisplay = column_groupby_multiple_numeric_column ? 0 : getSummaryValueDisplayString(summaryColumn, pivot_table_total, summary_method);
|
|
220
228
|
let firstSummaryColumnFromMultiple = column_groupby_multiple_numeric_column && pivot_summary_multiple_columns[0] || null;
|
|
221
229
|
let pivotColumnCells = [];
|
|
222
|
-
return /*#__PURE__*/
|
|
230
|
+
return /*#__PURE__*/_react.default.createElement("tbody", null, pivot_rows.map((rowItem, rowIdx) => {
|
|
223
231
|
const {
|
|
224
232
|
name,
|
|
225
233
|
original_name,
|
|
@@ -235,11 +243,11 @@ class TwoDimensionTable extends PureComponent {
|
|
|
235
243
|
summaryDisplayValue = 0;
|
|
236
244
|
}
|
|
237
245
|
const isValidSummaryDisplayValue = this.props.isValidValue(summaryDisplayValue);
|
|
238
|
-
return /*#__PURE__*/
|
|
246
|
+
return /*#__PURE__*/_react.default.createElement("tr", {
|
|
239
247
|
key: 'table-row' + rowIdx
|
|
240
|
-
}, /*#__PURE__*/
|
|
248
|
+
}, /*#__PURE__*/_react.default.createElement("td", {
|
|
241
249
|
className: 'pivot-row-name'
|
|
242
|
-
}, /*#__PURE__*/
|
|
250
|
+
}, /*#__PURE__*/_react.default.createElement(_pivotTableDisplayName.default, {
|
|
243
251
|
value: original_name,
|
|
244
252
|
column: groupbyColumn
|
|
245
253
|
})), Array.isArray(cells) && cells.map((c, cellIdx) => {
|
|
@@ -259,8 +267,8 @@ class TwoDimensionTable extends PureComponent {
|
|
|
259
267
|
summary_multiple_columns.forEach(item => {
|
|
260
268
|
summaryDisplayValue += this.getNumberValue(item);
|
|
261
269
|
});
|
|
262
|
-
return /*#__PURE__*/
|
|
263
|
-
className: "".concat(
|
|
270
|
+
return /*#__PURE__*/_react.default.createElement("td", {
|
|
271
|
+
className: "".concat(_statisticPivotTableModule.default['pivot-cell'], " ").concat(_statisticPivotTableModule.default['pivot-summary-multiple-columns-td']),
|
|
264
272
|
key: "table-cell-".concat(cellIdx),
|
|
265
273
|
onClick: () => this.toggleRecords({
|
|
266
274
|
rows: c.rows,
|
|
@@ -270,19 +278,19 @@ class TwoDimensionTable extends PureComponent {
|
|
|
270
278
|
group_original_name: c.group_original_name,
|
|
271
279
|
original_name: rowItem.original_name
|
|
272
280
|
})
|
|
273
|
-
}, /*#__PURE__*/
|
|
274
|
-
className:
|
|
281
|
+
}, /*#__PURE__*/_react.default.createElement("div", {
|
|
282
|
+
className: _statisticPivotTableModule.default['pivot-summary-multiple-columns-div']
|
|
275
283
|
}, formatted_summary_multiple_columns.map((label, index) => {
|
|
276
|
-
return /*#__PURE__*/
|
|
284
|
+
return /*#__PURE__*/_react.default.createElement("div", {
|
|
277
285
|
key: index,
|
|
278
286
|
title: label
|
|
279
287
|
}, label);
|
|
280
|
-
})), /*#__PURE__*/
|
|
288
|
+
})), /*#__PURE__*/_react.default.createElement("span", null));
|
|
281
289
|
}
|
|
282
290
|
const displayValue = getSummaryValueDisplayString(c.column, c.total, summary_method);
|
|
283
291
|
const isValidDisplayValue = this.props.isValidValue(displayValue);
|
|
284
|
-
return /*#__PURE__*/
|
|
285
|
-
className: "".concat(
|
|
292
|
+
return /*#__PURE__*/_react.default.createElement("td", {
|
|
293
|
+
className: "".concat(_statisticPivotTableModule.default['pivot-cell'], " ").concat(isValidDisplayValue ? '' : _statisticPivotTableModule.default['pivot-empty-cell']),
|
|
286
294
|
key: "table-cell-".concat(cellIdx),
|
|
287
295
|
title: isValidDisplayValue ? displayValue : '',
|
|
288
296
|
onClick: () => this.toggleRecords({
|
|
@@ -293,11 +301,11 @@ class TwoDimensionTable extends PureComponent {
|
|
|
293
301
|
group_original_name: c.group_original_name,
|
|
294
302
|
original_name: rowItem.original_name
|
|
295
303
|
})
|
|
296
|
-
}, isValidDisplayValue ? /*#__PURE__*/
|
|
304
|
+
}, isValidDisplayValue ? /*#__PURE__*/_react.default.createElement("div", null, displayValue) : /*#__PURE__*/_react.default.createElement("i", null), /*#__PURE__*/_react.default.createElement("span", null));
|
|
297
305
|
}), display_total && this.renderRowTotal(isValidSummaryDisplayValue, summaryDisplayValue, cells, pivotRowCells, rowItem, firstSummaryColumnFromMultiple));
|
|
298
|
-
}), display_total && /*#__PURE__*/
|
|
306
|
+
}), display_total && /*#__PURE__*/_react.default.createElement("tr", null, /*#__PURE__*/_react.default.createElement("td", {
|
|
299
307
|
className: 'pivot-column-total'
|
|
300
|
-
}, /*#__PURE__*/
|
|
308
|
+
}, /*#__PURE__*/_react.default.createElement("div", null, _reactIntlUniversal.default.get(_constants.TITLE_TOTAL))), Array.isArray(pivot_columns) && pivot_columns.map((c, index) => {
|
|
301
309
|
const pivotColumnCell = pivotColumnCells[index] || [];
|
|
302
310
|
const pivotColumnTotal = pivot_columns_total[c.key];
|
|
303
311
|
let totalDisplayValue = 0;
|
|
@@ -311,7 +319,7 @@ class TwoDimensionTable extends PureComponent {
|
|
|
311
319
|
sqlKey,
|
|
312
320
|
method
|
|
313
321
|
} = summaryCol;
|
|
314
|
-
total += getPivotTableSummaryTotal(type, key, sqlKey, STATISTICS_COUNT_TYPE.ADVANCED, method, pivotColumnCell, formulaRows, isSqlQuery);
|
|
322
|
+
total += (0, _pivotTable.getPivotTableSummaryTotal)(type, key, sqlKey, _constants.STATISTICS_COUNT_TYPE.ADVANCED, method, pivotColumnCell, formulaRows, isSqlQuery);
|
|
315
323
|
});
|
|
316
324
|
totalDisplayValue = total;
|
|
317
325
|
allTotalDisplay += total;
|
|
@@ -323,8 +331,8 @@ class TwoDimensionTable extends PureComponent {
|
|
|
323
331
|
totalDisplayValue = getSummaryValueDisplayString(summaryColumn, pivotColumnTotal, summary_method);
|
|
324
332
|
isValidTotalDisplayValue = this.props.isValidValue(totalDisplayValue);
|
|
325
333
|
}
|
|
326
|
-
return /*#__PURE__*/
|
|
327
|
-
className: "".concat(
|
|
334
|
+
return /*#__PURE__*/_react.default.createElement("td", {
|
|
335
|
+
className: "".concat(_statisticPivotTableModule.default['pivot-cell'], " ").concat(isValidTotalDisplayValue ? '' : _statisticPivotTableModule.default['pivot-empty-cell']),
|
|
328
336
|
key: "total-cell-".concat(index),
|
|
329
337
|
title: isValidTotalDisplayValue ? totalDisplayValue : '',
|
|
330
338
|
onClick: () => this.toggleRecords({
|
|
@@ -334,7 +342,7 @@ class TwoDimensionTable extends PureComponent {
|
|
|
334
342
|
}, {
|
|
335
343
|
isColumn: true
|
|
336
344
|
})
|
|
337
|
-
}, isValidTotalDisplayValue ? /*#__PURE__*/
|
|
345
|
+
}, isValidTotalDisplayValue ? /*#__PURE__*/_react.default.createElement("div", null, totalDisplayValue) : /*#__PURE__*/_react.default.createElement("i", null));
|
|
338
346
|
}), this.renderAllTotal(allTotalDisplay, pivotColumnCells, firstSummaryColumnFromMultiple)));
|
|
339
347
|
};
|
|
340
348
|
}
|
|
@@ -353,17 +361,17 @@ class TwoDimensionTable extends PureComponent {
|
|
|
353
361
|
column_groupby_column_key
|
|
354
362
|
} = statItem;
|
|
355
363
|
const table = getTableById(table_id);
|
|
356
|
-
const groupbyColumn = TableUtils.getTableColumnByKey(table, groupby_column_key) || {};
|
|
357
|
-
const columnGroupbyColumn = TableUtils.getTableColumnByKey(table, column_groupby_column_key) || {};
|
|
358
|
-
return /*#__PURE__*/
|
|
364
|
+
const groupbyColumn = _dtableStore.TableUtils.getTableColumnByKey(table, groupby_column_key) || {};
|
|
365
|
+
const columnGroupbyColumn = _dtableStore.TableUtils.getTableColumnByKey(table, column_groupby_column_key) || {};
|
|
366
|
+
return /*#__PURE__*/_react.default.createElement("table", {
|
|
359
367
|
style: {
|
|
360
368
|
color: textColor
|
|
361
369
|
},
|
|
362
|
-
className: "".concat(isPreview ?
|
|
363
|
-
}, /*#__PURE__*/
|
|
364
|
-
className:
|
|
365
|
-
}, columnGroupbyColumn.name), /*#__PURE__*/
|
|
366
|
-
className:
|
|
370
|
+
className: "".concat(isPreview ? _statisticPivotTableModule.default['preview-pivot-table'] : _statisticPivotTableModule.default['large-pivot-table'], " ").concat(_statisticPivotTableModule.default['pivot-table'])
|
|
371
|
+
}, /*#__PURE__*/_react.default.createElement("caption", {
|
|
372
|
+
className: _statisticPivotTableModule.default['column-title']
|
|
373
|
+
}, columnGroupbyColumn.name), /*#__PURE__*/_react.default.createElement("caption", {
|
|
374
|
+
className: _statisticPivotTableModule.default['row-title']
|
|
367
375
|
}, groupbyColumn.name), this.renderHeader({
|
|
368
376
|
groupbyColumn,
|
|
369
377
|
columnGroupbyColumn
|
|
@@ -373,4 +381,4 @@ class TwoDimensionTable extends PureComponent {
|
|
|
373
381
|
}));
|
|
374
382
|
}
|
|
375
383
|
}
|
|
376
|
-
|
|
384
|
+
var _default = exports.default = TwoDimensionTable;
|
|
@@ -1,20 +1,27 @@
|
|
|
1
|
-
|
|
2
|
-
|
|
3
|
-
|
|
4
|
-
|
|
5
|
-
|
|
6
|
-
|
|
7
|
-
|
|
8
|
-
|
|
9
|
-
|
|
1
|
+
"use strict";
|
|
2
|
+
|
|
3
|
+
var _interopRequireDefault = require("@babel/runtime/helpers/interopRequireDefault").default;
|
|
4
|
+
Object.defineProperty(exports, "__esModule", {
|
|
5
|
+
value: true
|
|
6
|
+
});
|
|
7
|
+
exports.default = void 0;
|
|
8
|
+
var _react = _interopRequireDefault(require("react"));
|
|
9
|
+
var _propTypes = _interopRequireDefault(require("prop-types"));
|
|
10
|
+
var _reactIntlUniversal = _interopRequireDefault(require("react-intl-universal"));
|
|
11
|
+
var _dtableStore = require("dtable-store");
|
|
12
|
+
var _baseChart = _interopRequireDefault(require("./base-chart"));
|
|
13
|
+
var _customG = require("../custom-g2");
|
|
14
|
+
var _commonUtils = require("../utils/common-utils");
|
|
15
|
+
var _constants = require("../constants");
|
|
16
|
+
var _statisticChartModule = _interopRequireDefault(require("../assets/css/statistic-chart.module.css"));
|
|
10
17
|
const propTypes = {
|
|
11
|
-
isPreview:
|
|
12
|
-
colorThemeName:
|
|
13
|
-
statItem:
|
|
14
|
-
chartCalculator:
|
|
15
|
-
toggleStatisticRecordsDialog:
|
|
18
|
+
isPreview: _propTypes.default.bool,
|
|
19
|
+
colorThemeName: _propTypes.default.string,
|
|
20
|
+
statItem: _propTypes.default.object,
|
|
21
|
+
chartCalculator: _propTypes.default.object,
|
|
22
|
+
toggleStatisticRecordsDialog: _propTypes.default.func
|
|
16
23
|
};
|
|
17
|
-
class RingChart extends
|
|
24
|
+
class RingChart extends _baseChart.default {
|
|
18
25
|
constructor(props) {
|
|
19
26
|
super(props);
|
|
20
27
|
this.drawChart = data => {
|
|
@@ -23,13 +30,13 @@ class RingChart extends BaseChart {
|
|
|
23
30
|
statItem
|
|
24
31
|
} = this.props;
|
|
25
32
|
if (isPreview) {
|
|
26
|
-
this.chart = new Chart({
|
|
33
|
+
this.chart = new _customG.Chart({
|
|
27
34
|
container: this.container,
|
|
28
35
|
autoFit: true,
|
|
29
36
|
padding: [20, 0]
|
|
30
37
|
});
|
|
31
38
|
} else {
|
|
32
|
-
this.chart = new Chart({
|
|
39
|
+
this.chart = new _customG.Chart({
|
|
33
40
|
container: this.container,
|
|
34
41
|
autoFit: true,
|
|
35
42
|
height: 400,
|
|
@@ -54,7 +61,7 @@ class RingChart extends BaseChart {
|
|
|
54
61
|
colorThemeName
|
|
55
62
|
} = this.props;
|
|
56
63
|
let summaryColumn = null;
|
|
57
|
-
let summaryColumnData = DEFAULT_NUMBER_FORMAT_OBJECT;
|
|
64
|
+
let summaryColumnData = _constants.DEFAULT_NUMBER_FORMAT_OBJECT;
|
|
58
65
|
const {
|
|
59
66
|
summary_type,
|
|
60
67
|
summary_method,
|
|
@@ -67,17 +74,17 @@ class RingChart extends BaseChart {
|
|
|
67
74
|
display_annotation
|
|
68
75
|
} = statItem;
|
|
69
76
|
const table = getTableById(table_id);
|
|
70
|
-
if (summary_type !== SUMMARY_TYPE.COUNT) {
|
|
71
|
-
summaryColumn = summary_column_key && TableUtils.getTableColumnByKey(table, summary_column_key);
|
|
72
|
-
summaryColumnData = summaryColumn && summaryColumn.data || DEFAULT_NUMBER_FORMAT_OBJECT;
|
|
77
|
+
if (summary_type !== _constants.SUMMARY_TYPE.COUNT) {
|
|
78
|
+
summaryColumn = summary_column_key && _dtableStore.TableUtils.getTableColumnByKey(table, summary_column_key);
|
|
79
|
+
summaryColumnData = summaryColumn && summaryColumn.data || _constants.DEFAULT_NUMBER_FORMAT_OBJECT;
|
|
73
80
|
}
|
|
74
81
|
this.chart.coordinate('theta', {
|
|
75
82
|
radius: isCreating ? 0.75 : 0.95,
|
|
76
83
|
innerRadius: isCreating ? 0.6 : 0.7
|
|
77
84
|
});
|
|
78
|
-
const currentTheme = getCurrentTheme(colorThemeName);
|
|
85
|
+
const currentTheme = (0, _commonUtils.getCurrentTheme)(colorThemeName);
|
|
79
86
|
const themeColors = this.getThemeColors();
|
|
80
|
-
const newData = formatPieChartData(data, statItem, table, currentTheme);
|
|
87
|
+
const newData = (0, _commonUtils.formatPieChartData)(data, statItem, table, currentTheme);
|
|
81
88
|
this.chart.data(newData, {
|
|
82
89
|
'name': {
|
|
83
90
|
type: 'cat',
|
|
@@ -114,9 +121,9 @@ class RingChart extends BaseChart {
|
|
|
114
121
|
const colorIndex = sIndex.charAt(sIndex.length - 1);
|
|
115
122
|
let name = obj.name;
|
|
116
123
|
if (!obj.name && typeof obj.name !== 'number') {
|
|
117
|
-
name =
|
|
124
|
+
name = _reactIntlUniversal.default.get(_constants.EMPTY_NAME);
|
|
118
125
|
} else if (obj.name === 'Others') {
|
|
119
|
-
name =
|
|
126
|
+
name = _reactIntlUniversal.default.get('Others');
|
|
120
127
|
}
|
|
121
128
|
return {
|
|
122
129
|
name,
|
|
@@ -146,7 +153,7 @@ class RingChart extends BaseChart {
|
|
|
146
153
|
content: this.getLabel(value, percent)
|
|
147
154
|
};
|
|
148
155
|
}, {
|
|
149
|
-
offset: !label_position || label_position === LABEL_POSITIONS[0] ? isCreating ? -10 : -2 : undefined,
|
|
156
|
+
offset: !label_position || label_position === _constants.LABEL_POSITIONS[0] ? isCreating ? -10 : -2 : undefined,
|
|
150
157
|
style: {
|
|
151
158
|
fill: themeColors.labelColor,
|
|
152
159
|
fontSize: this.getLabelFontSize(),
|
|
@@ -156,7 +163,7 @@ class RingChart extends BaseChart {
|
|
|
156
163
|
}).tooltip('name*formatted_value*percent', (name, value, percent) => {
|
|
157
164
|
let title = name;
|
|
158
165
|
if (!name || name === 'undefined') {
|
|
159
|
-
title =
|
|
166
|
+
title = _reactIntlUniversal.default.get(_constants.EMPTY_NAME);
|
|
160
167
|
}
|
|
161
168
|
return show_percent || display_label ? {
|
|
162
169
|
name: title,
|
|
@@ -182,7 +189,7 @@ class RingChart extends BaseChart {
|
|
|
182
189
|
this.chart.interaction('element-active');
|
|
183
190
|
if (display_annotation === undefined || display_annotation === null || display_annotation) {
|
|
184
191
|
this.setAnnotation({
|
|
185
|
-
name:
|
|
192
|
+
name: _reactIntlUniversal.default.get(_constants.TITLE_TOTAL),
|
|
186
193
|
value: summaryColumn ? this.getNumberDisplayString(this.sum, summaryColumnData, summary_method) : this.sum
|
|
187
194
|
}, themeColors.labelColor);
|
|
188
195
|
this.chart.on('interval:mouseenter', evt => this.onEnterRingChart(evt, themeColors.labelColor, summaryColumn, summaryColumnData));
|
|
@@ -206,13 +213,13 @@ class RingChart extends BaseChart {
|
|
|
206
213
|
}
|
|
207
214
|
}
|
|
208
215
|
switch (label_format) {
|
|
209
|
-
case LABEL_FORMATS[0]:
|
|
216
|
+
case _constants.LABEL_FORMATS[0]:
|
|
210
217
|
content = percent;
|
|
211
218
|
break;
|
|
212
|
-
case LABEL_FORMATS[1]:
|
|
219
|
+
case _constants.LABEL_FORMATS[1]:
|
|
213
220
|
content = value;
|
|
214
221
|
break;
|
|
215
|
-
case LABEL_FORMATS[2]:
|
|
222
|
+
case _constants.LABEL_FORMATS[2]:
|
|
216
223
|
content = "".concat(value, " (").concat(percent, ")");
|
|
217
224
|
break;
|
|
218
225
|
default:
|
|
@@ -227,7 +234,7 @@ class RingChart extends BaseChart {
|
|
|
227
234
|
const {
|
|
228
235
|
annotation_font_size
|
|
229
236
|
} = statItem;
|
|
230
|
-
const mainFontSize = annotation_font_size || DEFAULT_ANNOTATION_SIZE;
|
|
237
|
+
const mainFontSize = annotation_font_size || _constants.DEFAULT_ANNOTATION_SIZE;
|
|
231
238
|
const subFontSize = Math.max(mainFontSize - 12, 12);
|
|
232
239
|
return {
|
|
233
240
|
mainFontSize,
|
|
@@ -240,9 +247,9 @@ class RingChart extends BaseChart {
|
|
|
240
247
|
} = this.props.statItem;
|
|
241
248
|
let name = content.name;
|
|
242
249
|
if (!name || name === 'undefined') {
|
|
243
|
-
name =
|
|
250
|
+
name = _reactIntlUniversal.default.get(_constants.EMPTY_NAME);
|
|
244
251
|
} else if (name === 'Others') {
|
|
245
|
-
name =
|
|
252
|
+
name = _reactIntlUniversal.default.get('Others');
|
|
246
253
|
}
|
|
247
254
|
const {
|
|
248
255
|
mainFontSize,
|
|
@@ -278,7 +285,7 @@ class RingChart extends BaseChart {
|
|
|
278
285
|
this.onLeaveRingChart = (ev, color, summaryColumn, summaryColumnData) => {
|
|
279
286
|
this.chart.annotation().clear(true);
|
|
280
287
|
this.setAnnotation({
|
|
281
|
-
name:
|
|
288
|
+
name: _reactIntlUniversal.default.get(_constants.TITLE_TOTAL),
|
|
282
289
|
value: this.sum
|
|
283
290
|
}, color, summaryColumn, summaryColumnData);
|
|
284
291
|
this.chart.render(true);
|
|
@@ -375,11 +382,11 @@ class RingChart extends BaseChart {
|
|
|
375
382
|
isCalculatingData,
|
|
376
383
|
showResultDescription
|
|
377
384
|
} = this.state;
|
|
378
|
-
return /*#__PURE__*/
|
|
385
|
+
return /*#__PURE__*/_react.default.createElement(_react.default.Fragment, null, isCalculatingData && this.renderLoading(), showResultDescription && this.renderEmpty(), /*#__PURE__*/_react.default.createElement("div", {
|
|
379
386
|
ref: ref => this.container = ref,
|
|
380
|
-
className: "".concat(
|
|
387
|
+
className: "".concat(_statisticChartModule.default['statistic-pie-chart-container'], " statistic-chart-container")
|
|
381
388
|
}));
|
|
382
389
|
}
|
|
383
390
|
}
|
|
384
391
|
RingChart.propTypes = propTypes;
|
|
385
|
-
|
|
392
|
+
var _default = exports.default = RingChart;
|
|
@@ -1,22 +1,29 @@
|
|
|
1
|
-
|
|
2
|
-
|
|
3
|
-
|
|
4
|
-
|
|
5
|
-
|
|
6
|
-
|
|
7
|
-
|
|
8
|
-
|
|
9
|
-
|
|
1
|
+
"use strict";
|
|
2
|
+
|
|
3
|
+
var _interopRequireDefault = require("@babel/runtime/helpers/interopRequireDefault").default;
|
|
4
|
+
Object.defineProperty(exports, "__esModule", {
|
|
5
|
+
value: true
|
|
6
|
+
});
|
|
7
|
+
exports.default = void 0;
|
|
8
|
+
var _react = _interopRequireDefault(require("react"));
|
|
9
|
+
var _propTypes = _interopRequireDefault(require("prop-types"));
|
|
10
|
+
var _reactIntlUniversal = _interopRequireDefault(require("react-intl-universal"));
|
|
11
|
+
var _dtableStore = require("dtable-store");
|
|
12
|
+
var _baseChart = _interopRequireDefault(require("./base-chart"));
|
|
13
|
+
var _customG = require("../custom-g2");
|
|
14
|
+
var _commonUtils = require("../utils/common-utils");
|
|
15
|
+
var _constants = require("../constants");
|
|
16
|
+
var _statisticChartModule = _interopRequireDefault(require("../assets/css/statistic-chart.module.css"));
|
|
10
17
|
const propTypes = {
|
|
11
|
-
isPreview:
|
|
12
|
-
colorThemeName:
|
|
13
|
-
statItem:
|
|
14
|
-
chartCalculator:
|
|
15
|
-
eventBus:
|
|
16
|
-
getTableById:
|
|
17
|
-
toggleStatisticRecordsDialog:
|
|
18
|
+
isPreview: _propTypes.default.bool,
|
|
19
|
+
colorThemeName: _propTypes.default.string,
|
|
20
|
+
statItem: _propTypes.default.object,
|
|
21
|
+
chartCalculator: _propTypes.default.object,
|
|
22
|
+
eventBus: _propTypes.default.object,
|
|
23
|
+
getTableById: _propTypes.default.func,
|
|
24
|
+
toggleStatisticRecordsDialog: _propTypes.default.func
|
|
18
25
|
};
|
|
19
|
-
class ScatterChart extends
|
|
26
|
+
class ScatterChart extends _baseChart.default {
|
|
20
27
|
constructor(props) {
|
|
21
28
|
super(props);
|
|
22
29
|
this.componentDidMount = async () => {
|
|
@@ -33,7 +40,7 @@ class ScatterChart extends BaseChart {
|
|
|
33
40
|
this.drawChart(data);
|
|
34
41
|
this.calculateData = data;
|
|
35
42
|
}
|
|
36
|
-
this.unsubscribeStyleChange = eventBus.subscribe(LABEL_CONFIG_CHANGED, newStatItem => {
|
|
43
|
+
this.unsubscribeStyleChange = eventBus.subscribe(_constants.LABEL_CONFIG_CHANGED, newStatItem => {
|
|
37
44
|
this.renderAxisLabel(newStatItem);
|
|
38
45
|
});
|
|
39
46
|
};
|
|
@@ -77,22 +84,22 @@ class ScatterChart extends BaseChart {
|
|
|
77
84
|
statItem,
|
|
78
85
|
colorThemeName
|
|
79
86
|
} = this.props;
|
|
80
|
-
const currentTheme = getCurrentTheme(colorThemeName);
|
|
87
|
+
const currentTheme = (0, _commonUtils.getCurrentTheme)(colorThemeName);
|
|
81
88
|
const {
|
|
82
89
|
table_id,
|
|
83
90
|
x_axis_column,
|
|
84
91
|
y_axis_column
|
|
85
92
|
} = statItem;
|
|
86
93
|
const selectedTable = getTableById(table_id);
|
|
87
|
-
const selectedXAxisColumn = TableUtils.getTableColumnByKey(selectedTable, x_axis_column);
|
|
88
|
-
const selectedYAxisColumn = TableUtils.getTableColumnByKey(selectedTable, y_axis_column);
|
|
94
|
+
const selectedXAxisColumn = _dtableStore.TableUtils.getTableColumnByKey(selectedTable, x_axis_column);
|
|
95
|
+
const selectedYAxisColumn = _dtableStore.TableUtils.getTableColumnByKey(selectedTable, y_axis_column);
|
|
89
96
|
if (isPreview) {
|
|
90
|
-
this.chart = new Chart({
|
|
97
|
+
this.chart = new _customG.Chart({
|
|
91
98
|
container: this.container,
|
|
92
99
|
autoFit: true
|
|
93
100
|
});
|
|
94
101
|
} else {
|
|
95
|
-
this.chart = new Chart({
|
|
102
|
+
this.chart = new _customG.Chart({
|
|
96
103
|
container: this.container,
|
|
97
104
|
height: 400,
|
|
98
105
|
width: 700
|
|
@@ -146,7 +153,7 @@ class ScatterChart extends BaseChart {
|
|
|
146
153
|
});
|
|
147
154
|
chart.point().position('x_axis*y_axis').color('group_by', currentTheme && currentTheme.colors).shape('circle').tooltip('group_by*x_axis*y_axis', (group_by, x_axis, y_axis) => {
|
|
148
155
|
return {
|
|
149
|
-
name: group_by || group_by === 0 ? group_by :
|
|
156
|
+
name: group_by || group_by === 0 ? group_by : _reactIntlUniversal.default.get(_constants.EMPTY_NAME),
|
|
150
157
|
valueX: "".concat(selectedXAxisColumn.name, ": ").concat(x_axis),
|
|
151
158
|
valueY: "".concat(selectedYAxisColumn.name, ": ").concat(y_axis)
|
|
152
159
|
};
|
|
@@ -157,7 +164,7 @@ class ScatterChart extends BaseChart {
|
|
|
157
164
|
position: 'bottom',
|
|
158
165
|
itemName: {
|
|
159
166
|
formatter: name => {
|
|
160
|
-
return name || name === 0 ? name :
|
|
167
|
+
return name || name === 0 ? name : _reactIntlUniversal.default.get(_constants.EMPTY_NAME);
|
|
161
168
|
},
|
|
162
169
|
style: {
|
|
163
170
|
fill: themeColors.textColor
|
|
@@ -211,7 +218,7 @@ class ScatterChart extends BaseChart {
|
|
|
211
218
|
const div = document.createElement('div');
|
|
212
219
|
div.id = xAxisID;
|
|
213
220
|
div.className = 'statistic-chart-axis-label';
|
|
214
|
-
const column = TableUtils.getTableColumnByKey(table, x_axis_column);
|
|
221
|
+
const column = _dtableStore.TableUtils.getTableColumnByKey(table, x_axis_column);
|
|
215
222
|
div.innerHTML = "".concat(column ? column.name : '');
|
|
216
223
|
div.setAttribute('style', "color:".concat(textColor, "; width: 100%; padding-left: ").concat(autoPadding.left, "px; text-align: ").concat(x_axis_label_position, "; bottom: -20px"));
|
|
217
224
|
chartContainer.appendChild(div);
|
|
@@ -229,7 +236,7 @@ class ScatterChart extends BaseChart {
|
|
|
229
236
|
const div = document.createElement('div');
|
|
230
237
|
div.id = yAxisID;
|
|
231
238
|
div.className = 'statistic-chart-axis-label';
|
|
232
|
-
const column = TableUtils.getTableColumnByKey(table, y_axis_column) || {};
|
|
239
|
+
const column = _dtableStore.TableUtils.getTableColumnByKey(table, y_axis_column) || {};
|
|
233
240
|
div.innerHTML = column.name || '';
|
|
234
241
|
const containerHeight = chartContainer.offsetHeight;
|
|
235
242
|
let textAlign = 'center';
|
|
@@ -288,12 +295,12 @@ class ScatterChart extends BaseChart {
|
|
|
288
295
|
if (show_y_axis_label) {
|
|
289
296
|
style.paddingLeft = 38;
|
|
290
297
|
}
|
|
291
|
-
return /*#__PURE__*/
|
|
298
|
+
return /*#__PURE__*/_react.default.createElement(_react.default.Fragment, null, isCalculatingData && this.renderLoading(), /*#__PURE__*/_react.default.createElement("div", {
|
|
292
299
|
ref: ref => this.container = ref,
|
|
293
|
-
className: "".concat(
|
|
300
|
+
className: "".concat(_statisticChartModule.default['statistic-scatter-chart-container'], " statistic-chart-container"),
|
|
294
301
|
style: style
|
|
295
302
|
}));
|
|
296
303
|
}
|
|
297
304
|
}
|
|
298
305
|
ScatterChart.propTypes = propTypes;
|
|
299
|
-
|
|
306
|
+
var _default = exports.default = ScatterChart;
|