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,25 +1,32 @@
|
|
|
1
|
-
|
|
2
|
-
|
|
3
|
-
|
|
4
|
-
|
|
5
|
-
|
|
6
|
-
|
|
7
|
-
|
|
8
|
-
|
|
9
|
-
|
|
10
|
-
|
|
11
|
-
|
|
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 _dataSet = _interopRequireDefault(require("@antv/data-set"));
|
|
11
|
+
var _reactIntlUniversal = _interopRequireDefault(require("react-intl-universal"));
|
|
12
|
+
var _dtableStore = require("dtable-store");
|
|
13
|
+
var _baseChart = _interopRequireDefault(require("./base-chart"));
|
|
14
|
+
var _customG = require("../custom-g2");
|
|
15
|
+
var _commonUtils = require("../utils/common-utils");
|
|
16
|
+
var _basicChartUtils = require("../utils/basic-chart-utils");
|
|
17
|
+
var _colorUtils = require("../utils/color-utils");
|
|
18
|
+
var _constants = require("../constants");
|
|
12
19
|
const propTypes = {
|
|
13
|
-
isPreview:
|
|
14
|
-
isEdit:
|
|
15
|
-
colorThemeName:
|
|
16
|
-
statItem:
|
|
17
|
-
chartCalculator:
|
|
18
|
-
eventBus:
|
|
19
|
-
getTableById:
|
|
20
|
-
toggleStatisticRecordsDialog:
|
|
20
|
+
isPreview: _propTypes.default.bool,
|
|
21
|
+
isEdit: _propTypes.default.bool,
|
|
22
|
+
colorThemeName: _propTypes.default.string,
|
|
23
|
+
statItem: _propTypes.default.object,
|
|
24
|
+
chartCalculator: _propTypes.default.object,
|
|
25
|
+
eventBus: _propTypes.default.object,
|
|
26
|
+
getTableById: _propTypes.default.func,
|
|
27
|
+
toggleStatisticRecordsDialog: _propTypes.default.func
|
|
21
28
|
};
|
|
22
|
-
class HorizontalBarChart extends
|
|
29
|
+
class HorizontalBarChart extends _baseChart.default {
|
|
23
30
|
constructor(props) {
|
|
24
31
|
super(props);
|
|
25
32
|
this.drawChart = originalData => {
|
|
@@ -39,26 +46,26 @@ class HorizontalBarChart extends BaseChart {
|
|
|
39
46
|
} = statItem;
|
|
40
47
|
this.initChartHandler();
|
|
41
48
|
let data = originalData;
|
|
42
|
-
if (type === STAT_TYPE.STACKED_HORIZONTAL_BAR && sort_type) {
|
|
49
|
+
if (type === _constants.STAT_TYPE.STACKED_HORIZONTAL_BAR && sort_type) {
|
|
43
50
|
let convertedSortType = sort_type;
|
|
44
|
-
if (sort_type === DATA_SORT_TYPE.ASCENDING) {
|
|
45
|
-
convertedSortType = DATA_SORT_TYPE.DESCENDING;
|
|
46
|
-
} else if (sort_type === DATA_SORT_TYPE.DESCENDING) {
|
|
47
|
-
convertedSortType = DATA_SORT_TYPE.ASCENDING;
|
|
51
|
+
if (sort_type === _constants.DATA_SORT_TYPE.ASCENDING) {
|
|
52
|
+
convertedSortType = _constants.DATA_SORT_TYPE.DESCENDING;
|
|
53
|
+
} else if (sort_type === _constants.DATA_SORT_TYPE.DESCENDING) {
|
|
54
|
+
convertedSortType = _constants.DATA_SORT_TYPE.ASCENDING;
|
|
48
55
|
}
|
|
49
|
-
data = sortDataByGroupSum(originalData, convertedSortType);
|
|
56
|
+
data = (0, _commonUtils.sortDataByGroupSum)(originalData, convertedSortType);
|
|
50
57
|
}
|
|
51
58
|
this.chart.on('interval:click', e => {
|
|
52
59
|
this.props.toggleStatisticRecordsDialog(e.data.data, statItem);
|
|
53
60
|
});
|
|
54
|
-
const currentTheme = getCurrentTheme(colorThemeName);
|
|
61
|
+
const currentTheme = (0, _commonUtils.getCurrentTheme)(colorThemeName);
|
|
55
62
|
const isGroup = column_groupby_column_key || column_groupby_multiple_numeric_column;
|
|
56
63
|
let chartBarColor = '#2a67d1';
|
|
57
|
-
let summaryColumnData = DEFAULT_NUMBER_FORMAT_OBJECT;
|
|
58
|
-
if (horizontal_axis_summary_type === SUMMARY_TYPE.ADVANCED) {
|
|
64
|
+
let summaryColumnData = _constants.DEFAULT_NUMBER_FORMAT_OBJECT;
|
|
65
|
+
if (horizontal_axis_summary_type === _constants.SUMMARY_TYPE.ADVANCED) {
|
|
59
66
|
const table = getTableById(table_id);
|
|
60
|
-
const summaryColumn = TableUtils.getTableColumnByKey(table, horizontal_axis_column_key) || {};
|
|
61
|
-
summaryColumnData = summaryColumn.data || DEFAULT_NUMBER_FORMAT_OBJECT;
|
|
67
|
+
const summaryColumn = _dtableStore.TableUtils.getTableColumnByKey(table, horizontal_axis_column_key) || {};
|
|
68
|
+
summaryColumnData = summaryColumn.data || _constants.DEFAULT_NUMBER_FORMAT_OBJECT;
|
|
62
69
|
}
|
|
63
70
|
if (isGroup) {
|
|
64
71
|
chartBarColor = 'group_name';
|
|
@@ -78,7 +85,7 @@ class HorizontalBarChart extends BaseChart {
|
|
|
78
85
|
const {
|
|
79
86
|
width
|
|
80
87
|
} = this.chart.coordinateBBox;
|
|
81
|
-
const chartData = isGroup ? getChartGroups(data) : data;
|
|
88
|
+
const chartData = isGroup ? (0, _basicChartUtils.getChartGroups)(data) : data;
|
|
82
89
|
const ticks = this.getTicks(chartData, width);
|
|
83
90
|
if (ticks.length > 0) {
|
|
84
91
|
this.chart.scale('name', {
|
|
@@ -123,7 +130,7 @@ class HorizontalBarChart extends BaseChart {
|
|
|
123
130
|
config.height = 400;
|
|
124
131
|
config.width = 700;
|
|
125
132
|
}
|
|
126
|
-
this.chart = new Chart(config);
|
|
133
|
+
this.chart = new _customG.Chart(config);
|
|
127
134
|
};
|
|
128
135
|
this.handleAutoRange = (data, summaryColumnData) => {
|
|
129
136
|
// set scale options for 'value'
|
|
@@ -178,7 +185,7 @@ class HorizontalBarChart extends BaseChart {
|
|
|
178
185
|
color_option,
|
|
179
186
|
horizontal_axis_label_color_rules
|
|
180
187
|
} = statItem;
|
|
181
|
-
const colorRules = color_option === TYPE_COLOR_USING.USE_RULES && horizontal_axis_label_color_rules && getConvertedColorRules(horizontal_axis_label_color_rules);
|
|
188
|
+
const colorRules = color_option === _constants.TYPE_COLOR_USING.USE_RULES && horizontal_axis_label_color_rules && (0, _colorUtils.getConvertedColorRules)(horizontal_axis_label_color_rules);
|
|
182
189
|
this.chart.interval().label(display_data ? 'formatted_value' : false, {
|
|
183
190
|
offset: 5,
|
|
184
191
|
position: () => {
|
|
@@ -191,8 +198,8 @@ class HorizontalBarChart extends BaseChart {
|
|
|
191
198
|
}).position('name*value').tooltip('name*formatted_value', (name, value) => {
|
|
192
199
|
return {
|
|
193
200
|
value,
|
|
194
|
-
title: horizontal_axis_summary_type === 'count' ?
|
|
195
|
-
name: !name && typeof name !== 'number' ?
|
|
201
|
+
title: horizontal_axis_summary_type === 'count' ? _reactIntlUniversal.default.get(_constants.TITLE_AMOUNT) : _reactIntlUniversal.default.get(_constants.STATISTICS_COUNT_SHOW[horizontal_axis_summary_method]),
|
|
202
|
+
name: !name && typeof name !== 'number' ? _reactIntlUniversal.default.get(_constants.EMPTY_NAME) : name
|
|
196
203
|
};
|
|
197
204
|
}).state({
|
|
198
205
|
active: {
|
|
@@ -201,7 +208,7 @@ class HorizontalBarChart extends BaseChart {
|
|
|
201
208
|
}
|
|
202
209
|
}
|
|
203
210
|
}).style('value', value => {
|
|
204
|
-
const color = getLabelColor({
|
|
211
|
+
const color = (0, _colorUtils.getLabelColor)({
|
|
205
212
|
chart: statItem,
|
|
206
213
|
colorRules,
|
|
207
214
|
value
|
|
@@ -243,7 +250,7 @@ class HorizontalBarChart extends BaseChart {
|
|
|
243
250
|
}
|
|
244
251
|
};
|
|
245
252
|
let displayData = display_data;
|
|
246
|
-
if (statItem.type === STAT_TYPE.STACKED_HORIZONTAL_BAR) {
|
|
253
|
+
if (statItem.type === _constants.STAT_TYPE.STACKED_HORIZONTAL_BAR) {
|
|
247
254
|
const {
|
|
248
255
|
display_each_block_data
|
|
249
256
|
} = statItem;
|
|
@@ -253,7 +260,7 @@ class HorizontalBarChart extends BaseChart {
|
|
|
253
260
|
}
|
|
254
261
|
|
|
255
262
|
// get the total value of each stack
|
|
256
|
-
const dv = new
|
|
263
|
+
const dv = new _dataSet.default.DataView().source(data);
|
|
257
264
|
dv.transform({
|
|
258
265
|
type: 'aggregate',
|
|
259
266
|
fields: ['value'],
|
|
@@ -278,7 +285,7 @@ class HorizontalBarChart extends BaseChart {
|
|
|
278
285
|
let groupColorCallback = currentTheme && currentTheme.colors;
|
|
279
286
|
// when the 'Group by' column is a 'single-select' column,
|
|
280
287
|
// and the user chooses to use the colors from the column.
|
|
281
|
-
if (color_option === USEABLE_COLOR_TYPES[1]) {
|
|
288
|
+
if (color_option === _constants.USEABLE_COLOR_TYPES[1]) {
|
|
282
289
|
const groupColorMapping = {};
|
|
283
290
|
data.forEach(item => {
|
|
284
291
|
if (!groupColorMapping[item.group_name]) {
|
|
@@ -292,13 +299,13 @@ class HorizontalBarChart extends BaseChart {
|
|
|
292
299
|
this.chart.interval().label(displayData ? 'formatted_value' : false, labelCfg).position('name*value').color('group_name', groupColorCallback).tooltip('name*formatted_value*group_name', (name, value, group_name) => {
|
|
293
300
|
return {
|
|
294
301
|
value,
|
|
295
|
-
title: !name && typeof name !== 'number' ?
|
|
296
|
-
name: !group_name && typeof group_name !== 'number' ?
|
|
302
|
+
title: !name && typeof name !== 'number' ? _reactIntlUniversal.default.get(_constants.EMPTY_NAME) : name,
|
|
303
|
+
name: !group_name && typeof group_name !== 'number' ? _reactIntlUniversal.default.get(_constants.EMPTY_NAME) : group_name
|
|
297
304
|
};
|
|
298
305
|
}).adjust([{
|
|
299
306
|
reverseOrder: true,
|
|
300
307
|
// for 'stack'. It only work for 'stack'.
|
|
301
|
-
type: statItem.type === STAT_TYPE.STACKED_HORIZONTAL_BAR ? 'stack' : 'dodge'
|
|
308
|
+
type: statItem.type === _constants.STAT_TYPE.STACKED_HORIZONTAL_BAR ? 'stack' : 'dodge'
|
|
302
309
|
}]).state({
|
|
303
310
|
active: {
|
|
304
311
|
style: {
|
|
@@ -356,7 +363,7 @@ class HorizontalBarChart extends BaseChart {
|
|
|
356
363
|
fill: themeColors.textColor
|
|
357
364
|
},
|
|
358
365
|
formatter: name => {
|
|
359
|
-
return !name && typeof name !== 'number' ?
|
|
366
|
+
return !name && typeof name !== 'number' ? _reactIntlUniversal.default.get(_constants.EMPTY_NAME) : name;
|
|
360
367
|
}
|
|
361
368
|
}
|
|
362
369
|
});
|
|
@@ -397,9 +404,9 @@ class HorizontalBarChart extends BaseChart {
|
|
|
397
404
|
div.id = horizontalAxisID;
|
|
398
405
|
div.className = 'statistic-chart-axis-label';
|
|
399
406
|
if (horizontal_axis_summary_type === 'count') {
|
|
400
|
-
div.innerHTML =
|
|
407
|
+
div.innerHTML = _reactIntlUniversal.default.get(_constants.TITLE_AMOUNT);
|
|
401
408
|
} else {
|
|
402
|
-
const column = TableUtils.getTableColumnByKey(table, horizontal_axis_column_key) || {};
|
|
409
|
+
const column = _dtableStore.TableUtils.getTableColumnByKey(table, horizontal_axis_column_key) || {};
|
|
403
410
|
div.innerHTML = column.name || '';
|
|
404
411
|
}
|
|
405
412
|
div.setAttribute('style', "color:".concat(textColor, "; width: 100%; padding-left: ").concat(autoPadding.left, "px; text-align: ").concat(horizontal_axis_label_position, "; bottom: -20px"));
|
|
@@ -417,9 +424,9 @@ class HorizontalBarChart extends BaseChart {
|
|
|
417
424
|
const div = document.createElement('div');
|
|
418
425
|
div.id = verticalAxisID;
|
|
419
426
|
div.className = 'statistic-chart-axis-label';
|
|
420
|
-
const column = TableUtils.getTableColumnByKey(table, vertical_axis_column_key);
|
|
427
|
+
const column = _dtableStore.TableUtils.getTableColumnByKey(table, vertical_axis_column_key);
|
|
421
428
|
div.innerHTML = "".concat(column ? column.name : '');
|
|
422
|
-
if (type === STAT_TYPE.STACKED_HORIZONTAL_BAR) {
|
|
429
|
+
if (type === _constants.STAT_TYPE.STACKED_HORIZONTAL_BAR) {
|
|
423
430
|
div.innerHTML = title_name;
|
|
424
431
|
}
|
|
425
432
|
const containerHeight = chartContainer.offsetHeight;
|
|
@@ -456,7 +463,7 @@ class HorizontalBarChart extends BaseChart {
|
|
|
456
463
|
chartCalculator,
|
|
457
464
|
eventBus
|
|
458
465
|
} = this.props;
|
|
459
|
-
this.unsubscribeStyleChange = eventBus.subscribe(LABEL_CONFIG_CHANGED, newStatItem => {
|
|
466
|
+
this.unsubscribeStyleChange = eventBus.subscribe(_constants.LABEL_CONFIG_CHANGED, newStatItem => {
|
|
460
467
|
this.renderAxisLabel(newStatItem);
|
|
461
468
|
});
|
|
462
469
|
chartCalculator.calculate(statItem).then(data => {
|
|
@@ -542,7 +549,7 @@ class HorizontalBarChart extends BaseChart {
|
|
|
542
549
|
show_horizontal_axis_label,
|
|
543
550
|
show_vertical_axis_label
|
|
544
551
|
} = statItem;
|
|
545
|
-
return /*#__PURE__*/
|
|
552
|
+
return /*#__PURE__*/_react.default.createElement(_react.default.Fragment, null, isCalculatingData && this.renderLoading(), showResultDescription && this.renderEmpty(), /*#__PURE__*/_react.default.createElement("div", {
|
|
546
553
|
ref: ref => this.container = ref,
|
|
547
554
|
style: {
|
|
548
555
|
padding: show_vertical_axis_label || show_horizontal_axis_label ? 30 : 20
|
|
@@ -552,4 +559,4 @@ class HorizontalBarChart extends BaseChart {
|
|
|
552
559
|
}
|
|
553
560
|
}
|
|
554
561
|
HorizontalBarChart.propTypes = propTypes;
|
|
555
|
-
|
|
562
|
+
var _default = exports.default = HorizontalBarChart;
|
package/es/stat-view/index.js
CHANGED
|
@@ -1,26 +1,33 @@
|
|
|
1
|
-
|
|
2
|
-
|
|
3
|
-
|
|
4
|
-
|
|
5
|
-
|
|
6
|
-
|
|
7
|
-
|
|
8
|
-
|
|
9
|
-
|
|
10
|
-
|
|
11
|
-
|
|
12
|
-
|
|
13
|
-
|
|
14
|
-
|
|
15
|
-
|
|
16
|
-
|
|
17
|
-
|
|
18
|
-
|
|
19
|
-
|
|
20
|
-
|
|
21
|
-
|
|
22
|
-
|
|
23
|
-
|
|
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 _pivotTable = _interopRequireDefault(require("./pivot-table"));
|
|
10
|
+
var _barChart = _interopRequireDefault(require("./bar-chart"));
|
|
11
|
+
var _compareChart = _interopRequireDefault(require("./compare-chart"));
|
|
12
|
+
var _horizontalBarChart = _interopRequireDefault(require("./horizontal-bar-chart"));
|
|
13
|
+
var _completenessChart = _interopRequireDefault(require("./completeness-chart"));
|
|
14
|
+
var _lineChart = _interopRequireDefault(require("./line-chart"));
|
|
15
|
+
var _areaChart = _interopRequireDefault(require("./area-chart"));
|
|
16
|
+
var _pieChart = _interopRequireDefault(require("./pie-chart"));
|
|
17
|
+
var _ringChart = _interopRequireDefault(require("./ring-chart"));
|
|
18
|
+
var _scatterChart = _interopRequireDefault(require("./scatter-chart"));
|
|
19
|
+
var _combinationChart = _interopRequireDefault(require("./combination-chart"));
|
|
20
|
+
var _map = _interopRequireDefault(require("./map"));
|
|
21
|
+
var _worldMap = _interopRequireDefault(require("./world-map"));
|
|
22
|
+
var _heatMap = _interopRequireDefault(require("./heat-map"));
|
|
23
|
+
var _mirror = _interopRequireDefault(require("./mirror"));
|
|
24
|
+
var _basicNumberCard = _interopRequireDefault(require("./basic-number-card"));
|
|
25
|
+
var _trendChart = _interopRequireDefault(require("./trend-chart"));
|
|
26
|
+
var _dashboardChart = _interopRequireDefault(require("./dashboard-chart"));
|
|
27
|
+
var _treemapChart = _interopRequireDefault(require("./treemap-chart"));
|
|
28
|
+
var _customBar = _interopRequireDefault(require("./custom-bar"));
|
|
29
|
+
var _constants = require("../constants");
|
|
30
|
+
class StatView extends _react.default.Component {
|
|
24
31
|
constructor() {
|
|
25
32
|
super(...arguments);
|
|
26
33
|
this.getStatData = () => {
|
|
@@ -60,98 +67,98 @@ class StatView extends React.Component {
|
|
|
60
67
|
}
|
|
61
68
|
};
|
|
62
69
|
switch (statItem.type) {
|
|
63
|
-
case STAT_TYPE.BAR:
|
|
64
|
-
case STAT_TYPE.BAR_GROUP:
|
|
65
|
-
case STAT_TYPE.BAR_STACK:
|
|
70
|
+
case _constants.STAT_TYPE.BAR:
|
|
71
|
+
case _constants.STAT_TYPE.BAR_GROUP:
|
|
72
|
+
case _constants.STAT_TYPE.BAR_STACK:
|
|
66
73
|
{
|
|
67
|
-
return /*#__PURE__*/
|
|
74
|
+
return /*#__PURE__*/_react.default.createElement(_barChart.default, viewProps);
|
|
68
75
|
}
|
|
69
|
-
case STAT_TYPE.COMPARE_BAR:
|
|
76
|
+
case _constants.STAT_TYPE.COMPARE_BAR:
|
|
70
77
|
{
|
|
71
|
-
return /*#__PURE__*/
|
|
78
|
+
return /*#__PURE__*/_react.default.createElement(_compareChart.default, viewProps);
|
|
72
79
|
}
|
|
73
|
-
case STAT_TYPE.HORIZONTAL_BAR:
|
|
74
|
-
case STAT_TYPE.HORIZONTAL_GROUP_BAR:
|
|
75
|
-
case STAT_TYPE.STACKED_HORIZONTAL_BAR:
|
|
80
|
+
case _constants.STAT_TYPE.HORIZONTAL_BAR:
|
|
81
|
+
case _constants.STAT_TYPE.HORIZONTAL_GROUP_BAR:
|
|
82
|
+
case _constants.STAT_TYPE.STACKED_HORIZONTAL_BAR:
|
|
76
83
|
{
|
|
77
|
-
return /*#__PURE__*/
|
|
84
|
+
return /*#__PURE__*/_react.default.createElement(_horizontalBarChart.default, viewProps);
|
|
78
85
|
}
|
|
79
|
-
case STAT_TYPE.COMPLETENESS_CHART:
|
|
80
|
-
case STAT_TYPE.GROUP_COMPLETENESS_CHART:
|
|
86
|
+
case _constants.STAT_TYPE.COMPLETENESS_CHART:
|
|
87
|
+
case _constants.STAT_TYPE.GROUP_COMPLETENESS_CHART:
|
|
81
88
|
{
|
|
82
|
-
return /*#__PURE__*/
|
|
89
|
+
return /*#__PURE__*/_react.default.createElement(_completenessChart.default, viewProps);
|
|
83
90
|
}
|
|
84
|
-
case STAT_TYPE.LINE:
|
|
85
|
-
case STAT_TYPE.GROUP_LINE:
|
|
91
|
+
case _constants.STAT_TYPE.LINE:
|
|
92
|
+
case _constants.STAT_TYPE.GROUP_LINE:
|
|
86
93
|
{
|
|
87
|
-
return /*#__PURE__*/
|
|
94
|
+
return /*#__PURE__*/_react.default.createElement(_lineChart.default, viewProps);
|
|
88
95
|
}
|
|
89
|
-
case STAT_TYPE.AREA_CHART:
|
|
90
|
-
case STAT_TYPE.AREA_GROUP_CHART:
|
|
96
|
+
case _constants.STAT_TYPE.AREA_CHART:
|
|
97
|
+
case _constants.STAT_TYPE.AREA_GROUP_CHART:
|
|
91
98
|
{
|
|
92
|
-
return /*#__PURE__*/
|
|
99
|
+
return /*#__PURE__*/_react.default.createElement(_areaChart.default, viewProps);
|
|
93
100
|
}
|
|
94
|
-
case STAT_TYPE.PIE:
|
|
101
|
+
case _constants.STAT_TYPE.PIE:
|
|
95
102
|
{
|
|
96
|
-
return /*#__PURE__*/
|
|
103
|
+
return /*#__PURE__*/_react.default.createElement(_pieChart.default, viewProps);
|
|
97
104
|
}
|
|
98
|
-
case STAT_TYPE.RING:
|
|
105
|
+
case _constants.STAT_TYPE.RING:
|
|
99
106
|
{
|
|
100
|
-
return /*#__PURE__*/
|
|
107
|
+
return /*#__PURE__*/_react.default.createElement(_ringChart.default, viewProps);
|
|
101
108
|
}
|
|
102
|
-
case STAT_TYPE.SCATTER:
|
|
109
|
+
case _constants.STAT_TYPE.SCATTER:
|
|
103
110
|
{
|
|
104
|
-
return /*#__PURE__*/
|
|
111
|
+
return /*#__PURE__*/_react.default.createElement(_scatterChart.default, viewProps);
|
|
105
112
|
}
|
|
106
|
-
case STAT_TYPE.COMBINATION_CHART:
|
|
113
|
+
case _constants.STAT_TYPE.COMBINATION_CHART:
|
|
107
114
|
{
|
|
108
|
-
return /*#__PURE__*/
|
|
115
|
+
return /*#__PURE__*/_react.default.createElement(_combinationChart.default, viewProps);
|
|
109
116
|
}
|
|
110
|
-
case STAT_TYPE.MAP:
|
|
111
|
-
case STAT_TYPE.MAP_BUBBLE:
|
|
117
|
+
case _constants.STAT_TYPE.MAP:
|
|
118
|
+
case _constants.STAT_TYPE.MAP_BUBBLE:
|
|
112
119
|
{
|
|
113
120
|
viewProps.isPreview = viewProps.isEnlarge ? false : viewProps.isPreview;
|
|
114
|
-
return /*#__PURE__*/
|
|
121
|
+
return /*#__PURE__*/_react.default.createElement(_map.default, viewProps);
|
|
115
122
|
}
|
|
116
|
-
case STAT_TYPE.WORLD_MAP:
|
|
117
|
-
case STAT_TYPE.WORLD_MAP_BUBBLE:
|
|
123
|
+
case _constants.STAT_TYPE.WORLD_MAP:
|
|
124
|
+
case _constants.STAT_TYPE.WORLD_MAP_BUBBLE:
|
|
118
125
|
{
|
|
119
126
|
viewProps.isPreview = viewProps.isEnlarge ? false : viewProps.isPreview;
|
|
120
|
-
return /*#__PURE__*/
|
|
127
|
+
return /*#__PURE__*/_react.default.createElement(_worldMap.default, viewProps);
|
|
121
128
|
}
|
|
122
|
-
case STAT_TYPE.HEAT_MAP:
|
|
129
|
+
case _constants.STAT_TYPE.HEAT_MAP:
|
|
123
130
|
{
|
|
124
131
|
viewProps.isPreview = viewProps.isEnlarge ? false : viewProps.isPreview;
|
|
125
|
-
return /*#__PURE__*/
|
|
132
|
+
return /*#__PURE__*/_react.default.createElement(_heatMap.default, viewProps);
|
|
126
133
|
}
|
|
127
|
-
case STAT_TYPE.MIRROR:
|
|
134
|
+
case _constants.STAT_TYPE.MIRROR:
|
|
128
135
|
{
|
|
129
136
|
viewProps.isPreview = viewProps.isEnlarge ? false : viewProps.isPreview;
|
|
130
|
-
return /*#__PURE__*/
|
|
137
|
+
return /*#__PURE__*/_react.default.createElement(_mirror.default, viewProps);
|
|
131
138
|
}
|
|
132
|
-
case STAT_TYPE.BASIC_NUMBER_CARD:
|
|
139
|
+
case _constants.STAT_TYPE.BASIC_NUMBER_CARD:
|
|
133
140
|
{
|
|
134
|
-
return /*#__PURE__*/
|
|
141
|
+
return /*#__PURE__*/_react.default.createElement(_basicNumberCard.default, viewProps);
|
|
135
142
|
}
|
|
136
|
-
case STAT_TYPE.TREND_CHART:
|
|
143
|
+
case _constants.STAT_TYPE.TREND_CHART:
|
|
137
144
|
{
|
|
138
|
-
return /*#__PURE__*/
|
|
145
|
+
return /*#__PURE__*/_react.default.createElement(_trendChart.default, viewProps);
|
|
139
146
|
}
|
|
140
|
-
case STAT_TYPE.DASHBOARD:
|
|
147
|
+
case _constants.STAT_TYPE.DASHBOARD:
|
|
141
148
|
{
|
|
142
|
-
return /*#__PURE__*/
|
|
149
|
+
return /*#__PURE__*/_react.default.createElement(_dashboardChart.default, viewProps);
|
|
143
150
|
}
|
|
144
|
-
case STAT_TYPE.TREEMAP:
|
|
151
|
+
case _constants.STAT_TYPE.TREEMAP:
|
|
145
152
|
{
|
|
146
|
-
return /*#__PURE__*/
|
|
153
|
+
return /*#__PURE__*/_react.default.createElement(_treemapChart.default, viewProps);
|
|
147
154
|
}
|
|
148
|
-
case STAT_TYPE.PIVOT_TABLE:
|
|
155
|
+
case _constants.STAT_TYPE.PIVOT_TABLE:
|
|
149
156
|
{
|
|
150
|
-
return /*#__PURE__*/
|
|
157
|
+
return /*#__PURE__*/_react.default.createElement(_pivotTable.default, viewProps);
|
|
151
158
|
}
|
|
152
|
-
case STAT_TYPE.CUSTOM_BAR:
|
|
159
|
+
case _constants.STAT_TYPE.CUSTOM_BAR:
|
|
153
160
|
{
|
|
154
|
-
return /*#__PURE__*/
|
|
161
|
+
return /*#__PURE__*/_react.default.createElement(_customBar.default, viewProps);
|
|
155
162
|
}
|
|
156
163
|
default:
|
|
157
164
|
{
|
|
@@ -165,4 +172,4 @@ StatView.defaultProps = {
|
|
|
165
172
|
isEnlarge: false,
|
|
166
173
|
isEdit: false
|
|
167
174
|
};
|
|
168
|
-
|
|
175
|
+
var _default = exports.default = StatView;
|
|
@@ -1,23 +1,30 @@
|
|
|
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 _basicChartUtils = require("../utils/basic-chart-utils");
|
|
16
|
+
var _constants = require("../constants");
|
|
10
17
|
const propTypes = {
|
|
11
|
-
isPreview:
|
|
12
|
-
isEdit:
|
|
13
|
-
colorThemeName:
|
|
14
|
-
statItem:
|
|
15
|
-
chartCalculator:
|
|
16
|
-
eventBus:
|
|
17
|
-
getTableById:
|
|
18
|
-
toggleStatisticRecordsDialog:
|
|
18
|
+
isPreview: _propTypes.default.bool,
|
|
19
|
+
isEdit: _propTypes.default.bool,
|
|
20
|
+
colorThemeName: _propTypes.default.string,
|
|
21
|
+
statItem: _propTypes.default.object,
|
|
22
|
+
chartCalculator: _propTypes.default.object,
|
|
23
|
+
eventBus: _propTypes.default.object,
|
|
24
|
+
getTableById: _propTypes.default.func,
|
|
25
|
+
toggleStatisticRecordsDialog: _propTypes.default.func
|
|
19
26
|
};
|
|
20
|
-
class LineChart extends
|
|
27
|
+
class LineChart extends _baseChart.default {
|
|
21
28
|
constructor(props) {
|
|
22
29
|
super(props);
|
|
23
30
|
this.drawChart = data => {
|
|
@@ -44,19 +51,19 @@ class LineChart extends BaseChart {
|
|
|
44
51
|
});
|
|
45
52
|
let summaryType = summary_type;
|
|
46
53
|
let summaryMethod = summary_method;
|
|
47
|
-
let summaryColumnData = DEFAULT_NUMBER_FORMAT_OBJECT;
|
|
54
|
+
let summaryColumnData = _constants.DEFAULT_NUMBER_FORMAT_OBJECT;
|
|
48
55
|
if (!summaryType && y_axis_summary_type) {
|
|
49
56
|
summaryType = y_axis_summary_type;
|
|
50
57
|
}
|
|
51
58
|
if (!summaryMethod && y_axis_summary_method) {
|
|
52
59
|
summaryMethod = y_axis_summary_method;
|
|
53
60
|
}
|
|
54
|
-
if (y_axis_summary_type === SUMMARY_TYPE.ADVANCED) {
|
|
61
|
+
if (y_axis_summary_type === _constants.SUMMARY_TYPE.ADVANCED) {
|
|
55
62
|
const table = getTableById(table_id);
|
|
56
|
-
const summaryColumn = TableUtils.getTableColumnByKey(table, y_axis_column_key) || {};
|
|
57
|
-
summaryColumnData = summaryColumn.data || DEFAULT_NUMBER_FORMAT_OBJECT;
|
|
63
|
+
const summaryColumn = _dtableStore.TableUtils.getTableColumnByKey(table, y_axis_column_key) || {};
|
|
64
|
+
summaryColumnData = summaryColumn.data || _constants.DEFAULT_NUMBER_FORMAT_OBJECT;
|
|
58
65
|
}
|
|
59
|
-
const currentTheme = getCurrentTheme(colorThemeName);
|
|
66
|
+
const currentTheme = (0, _commonUtils.getCurrentTheme)(colorThemeName);
|
|
60
67
|
const chartBarColor = currentTheme && currentTheme.colors[0] || '#2a67d1';
|
|
61
68
|
const isGroup = column_groupby_column_key || column_groupby_multiple_numeric_column;
|
|
62
69
|
if (isGroup) {
|
|
@@ -73,7 +80,7 @@ class LineChart extends BaseChart {
|
|
|
73
80
|
const {
|
|
74
81
|
width
|
|
75
82
|
} = this.chart.coordinateBBox;
|
|
76
|
-
const chartData = isGroup ? getChartGroups(data) : data;
|
|
83
|
+
const chartData = isGroup ? (0, _basicChartUtils.getChartGroups)(data) : data;
|
|
77
84
|
const ticks = this.getTicks(chartData, width);
|
|
78
85
|
const labelCount = this.getLabelCount(ticks, chartData);
|
|
79
86
|
if (ticks.length > 0) {
|
|
@@ -121,7 +128,7 @@ class LineChart extends BaseChart {
|
|
|
121
128
|
config.height = 400;
|
|
122
129
|
config.width = 700;
|
|
123
130
|
}
|
|
124
|
-
this.chart = new Chart(config);
|
|
131
|
+
this.chart = new _customG.Chart(config);
|
|
125
132
|
};
|
|
126
133
|
this.handleAutoRange = (data, summaryColumnData, summaryMethod) => {
|
|
127
134
|
const {
|
|
@@ -171,7 +178,7 @@ class LineChart extends BaseChart {
|
|
|
171
178
|
this.chart.line().position('name*value').color(chartBarColor).tooltip('name*formatted_value', (name, value) => {
|
|
172
179
|
return {
|
|
173
180
|
value,
|
|
174
|
-
name: summaryType === 'count' ?
|
|
181
|
+
name: summaryType === 'count' ? _reactIntlUniversal.default.get(_constants.TITLE_AMOUNT) : _reactIntlUniversal.default.get(_constants.STATISTICS_COUNT_SHOW[summaryMethod])
|
|
175
182
|
};
|
|
176
183
|
});
|
|
177
184
|
this.chart.point().label(display_data ? 'value' : false, {
|
|
@@ -185,8 +192,8 @@ class LineChart extends BaseChart {
|
|
|
185
192
|
}).tooltip('name*formatted_value', (name, value) => {
|
|
186
193
|
return {
|
|
187
194
|
value,
|
|
188
|
-
name: !name && typeof name !== 'number' ?
|
|
189
|
-
title: summaryType === 'count' ?
|
|
195
|
+
name: !name && typeof name !== 'number' ? _reactIntlUniversal.default.get(_constants.EMPTY_NAME) : name,
|
|
196
|
+
title: summaryType === 'count' ? _reactIntlUniversal.default.get(_constants.TITLE_AMOUNT) : _reactIntlUniversal.default.get(_constants.STATISTICS_COUNT_SHOW[summaryMethod])
|
|
190
197
|
};
|
|
191
198
|
});
|
|
192
199
|
};
|
|
@@ -203,7 +210,7 @@ class LineChart extends BaseChart {
|
|
|
203
210
|
let groupColorCallback = currentTheme && currentTheme.colors;
|
|
204
211
|
// when the 'Group by' column is a 'single-select' column,
|
|
205
212
|
// and the user chooses to use the colors from the column.
|
|
206
|
-
if (color_option === USEABLE_COLOR_TYPES[1]) {
|
|
213
|
+
if (color_option === _constants.USEABLE_COLOR_TYPES[1]) {
|
|
207
214
|
const groupColorMapping = {};
|
|
208
215
|
data.forEach(item => {
|
|
209
216
|
if (!groupColorMapping[item.group_name]) {
|
|
@@ -228,8 +235,8 @@ class LineChart extends BaseChart {
|
|
|
228
235
|
}).position('name*value').size(3).color('group_name', groupColorCallback).tooltip('name*formatted_value*group_name', (name, value, group_name) => {
|
|
229
236
|
return {
|
|
230
237
|
value,
|
|
231
|
-
title: !name && typeof name !== 'number' ?
|
|
232
|
-
name: !group_name && typeof group_name !== 'number' ?
|
|
238
|
+
title: !name && typeof name !== 'number' ? _reactIntlUniversal.default.get(_constants.EMPTY_NAME) : name,
|
|
239
|
+
name: !group_name && typeof group_name !== 'number' ? _reactIntlUniversal.default.get(_constants.EMPTY_NAME) : group_name
|
|
233
240
|
};
|
|
234
241
|
}).shape('circle').style({
|
|
235
242
|
lineWidth: 1,
|
|
@@ -302,7 +309,7 @@ class LineChart extends BaseChart {
|
|
|
302
309
|
fill: themeColors.textColor
|
|
303
310
|
},
|
|
304
311
|
formatter: name => {
|
|
305
|
-
return !name && typeof name !== 'number' ?
|
|
312
|
+
return !name && typeof name !== 'number' ? _reactIntlUniversal.default.get(_constants.EMPTY_NAME) : name;
|
|
306
313
|
}
|
|
307
314
|
},
|
|
308
315
|
pageNavigator: {
|
|
@@ -351,7 +358,7 @@ class LineChart extends BaseChart {
|
|
|
351
358
|
const div = document.createElement('div');
|
|
352
359
|
div.id = xAxisID;
|
|
353
360
|
div.className = 'statistic-chart-axis-label';
|
|
354
|
-
const column = TableUtils.getTableColumnByKey(table, x_axis_column_key);
|
|
361
|
+
const column = _dtableStore.TableUtils.getTableColumnByKey(table, x_axis_column_key);
|
|
355
362
|
div.innerHTML = "".concat(column ? column.name : '');
|
|
356
363
|
div.setAttribute('style', "color:".concat(textColor, "; width: 100%; padding-left: ").concat(autoPadding.left, "px; text-align: ").concat(x_axis_label_position, "; bottom: -20px"));
|
|
357
364
|
chartContainer.appendChild(div);
|
|
@@ -369,10 +376,10 @@ class LineChart extends BaseChart {
|
|
|
369
376
|
const div = document.createElement('div');
|
|
370
377
|
div.id = yAxisID;
|
|
371
378
|
div.className = 'statistic-chart-axis-label';
|
|
372
|
-
if (y_axis_summary_type === SUMMARY_TYPE.COUNT) {
|
|
373
|
-
div.innerHTML =
|
|
379
|
+
if (y_axis_summary_type === _constants.SUMMARY_TYPE.COUNT) {
|
|
380
|
+
div.innerHTML = _reactIntlUniversal.default.get(_constants.TITLE_AMOUNT);
|
|
374
381
|
} else {
|
|
375
|
-
const column = TableUtils.getTableColumnByKey(table, y_axis_column_key) || {};
|
|
382
|
+
const column = _dtableStore.TableUtils.getTableColumnByKey(table, y_axis_column_key) || {};
|
|
376
383
|
div.innerHTML = column.name || '';
|
|
377
384
|
}
|
|
378
385
|
const containerHeight = chartContainer.offsetHeight;
|
|
@@ -409,7 +416,7 @@ class LineChart extends BaseChart {
|
|
|
409
416
|
chartCalculator,
|
|
410
417
|
eventBus
|
|
411
418
|
} = this.props;
|
|
412
|
-
this.unsubscribeStyleChange = eventBus.subscribe(LABEL_CONFIG_CHANGED, newStatItem => {
|
|
419
|
+
this.unsubscribeStyleChange = eventBus.subscribe(_constants.LABEL_CONFIG_CHANGED, newStatItem => {
|
|
413
420
|
this.renderAxisLabel(newStatItem);
|
|
414
421
|
});
|
|
415
422
|
if (this.container) {
|
|
@@ -500,7 +507,7 @@ class LineChart extends BaseChart {
|
|
|
500
507
|
const style = {
|
|
501
508
|
padding: show_y_axis_label || show_x_axis_label ? 30 : 20
|
|
502
509
|
};
|
|
503
|
-
return /*#__PURE__*/
|
|
510
|
+
return /*#__PURE__*/_react.default.createElement(_react.default.Fragment, null, isCalculatingData && this.renderLoading(), showResultDescription && this.renderEmpty(), /*#__PURE__*/_react.default.createElement("div", {
|
|
504
511
|
ref: ref => this.container = ref,
|
|
505
512
|
style: style,
|
|
506
513
|
className: "statistic-chart-container"
|
|
@@ -508,4 +515,4 @@ class LineChart extends BaseChart {
|
|
|
508
515
|
}
|
|
509
516
|
}
|
|
510
517
|
LineChart.propTypes = propTypes;
|
|
511
|
-
|
|
518
|
+
var _default = exports.default = LineChart;
|