sea-chart 1.1.64 → 2.0.0
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/dist/api/index.js +13 -6
- package/dist/assets/css/sea-chart-d3-tooltip.css +64 -0
- package/dist/components/cell-factory/FormatterConfig.js +62 -55
- package/dist/components/cell-factory/SimpleCellFormatter.js +11 -4
- package/dist/components/cell-factory/SingleSelectOption.js +18 -11
- package/dist/components/cell-factory/cell-editor-factory.js +12 -5
- package/dist/components/cell-factory/cell-formatter-factory.js +11 -4
- package/dist/components/cell-factory/link-content.js +35 -27
- package/dist/components/chart-color-selector/color-selector.js +18 -11
- package/dist/components/collaborator/index.js +14 -7
- package/dist/components/color-picker/index.js +18 -11
- package/dist/components/color-popover/color-rules/color-rule.js +33 -25
- package/dist/components/color-popover/color-rules/index.js +14 -6
- package/dist/components/color-popover/color-rules/rule-filters/filter.js +34 -27
- package/dist/components/color-popover/color-rules/rule-filters/index.js +25 -17
- package/dist/components/color-popover/color-rules/rule-filters/number-input.js +17 -9
- package/dist/components/color-popover/color-rules-popover.js +33 -25
- package/dist/components/color-popover/color-selector-popover.js +18 -10
- package/dist/components/color-setting/color-group-selector.js +20 -12
- package/dist/components/common-add-tool/index.js +13 -6
- package/dist/components/data-process-setter/data-setting-header.js +14 -7
- package/dist/components/data-process-setter/hide-column-setter.js +19 -12
- package/dist/components/data-process-setter/index.js +27 -4
- package/dist/components/data-process-setter/sort-setter.js +24 -16
- package/dist/components/draggable/Draggable.js +13 -7
- package/dist/components/drill-down-settings/drill-down-fields-popover/index.js +48 -40
- package/dist/components/drill-down-settings/drill-down-fields-settings/index.js +18 -10
- package/dist/components/drill-down-settings/index.js +18 -11
- package/dist/components/dtable-popover/index.js +20 -13
- package/dist/components/dtable-search-input/index.js +21 -13
- package/dist/components/font-settings/index.js +22 -14
- package/dist/components/goal-line-setting/goal-setting-item.js +14 -6
- package/dist/components/goal-line-setting/index.js +19 -12
- package/dist/components/highlighter/highlighter.js +14 -7
- package/dist/components/icon/index.js +12 -5
- package/dist/components/index.js +48 -7
- package/dist/components/loading/index.js +13 -6
- package/dist/components/number-input/index.js +11 -4
- package/dist/components/pixel-editor/index.js +23 -15
- package/dist/components/popover/hide-column-popover/hide-column-popover-widgets/hide-column-item.js +14 -7
- package/dist/components/popover/hide-column-popover/hide-column-popover.js +35 -27
- package/dist/components/popover/sort-popover/sort-popover-widgets/sort-utils.js +18 -9
- package/dist/components/popover/sort-popover/sort-popover.js +65 -55
- package/dist/components/resize-handle/ResizeHandle.js +13 -6
- package/dist/components/row-card/row-card-header-cell.js +22 -15
- package/dist/components/row-card/row-card-header.js +21 -14
- package/dist/components/row-card/row-card-item.js +41 -33
- package/dist/components/row-card/row-card.js +23 -15
- package/dist/components/statistic-record-dialog/index.js +63 -55
- package/dist/components/types-dialog/index.js +63 -55
- package/dist/components/types-dialog/use-force-update.js +10 -4
- package/dist/constants/color-rules.js +14 -8
- package/dist/constants/common-constants.js +14 -8
- package/dist/constants/error.js +8 -2
- package/dist/constants/geolocation.js +15 -9
- package/dist/constants/index.js +271 -142
- package/dist/constants/key-codes.js +2 -0
- package/dist/constants/model.js +9 -3
- package/dist/constants/regions.js +8 -3
- package/dist/constants/style.js +12 -6
- package/dist/constants/table.js +7 -1
- package/dist/constants/type-image.js +39 -33
- package/dist/constants/type.js +9 -3
- package/dist/context.js +19 -12
- package/dist/editor/index.js +15 -12
- package/dist/index.js +104 -13
- package/dist/intl.js +17 -10
- package/dist/locale/index.js +23 -16
- package/dist/locale/lang/de.js +7 -1
- package/dist/locale/lang/en.js +7 -1
- package/dist/locale/lang/es.js +7 -1
- package/dist/locale/lang/fr.js +7 -1
- package/dist/locale/lang/pt.js +7 -1
- package/dist/locale/lang/ru.js +7 -1
- package/dist/locale/lang/zh_CN.js +7 -1
- package/dist/model/area-group.js +19 -12
- package/dist/model/area.js +19 -12
- package/dist/model/bar-custom.js +18 -11
- package/dist/model/bar-group.js +19 -12
- package/dist/model/bar-stack.js +17 -10
- package/dist/model/bar.js +18 -11
- package/dist/model/base-model.js +11 -4
- package/dist/model/basic-number-card.js +20 -13
- package/dist/model/chart.js +13 -7
- package/dist/model/combination.js +22 -15
- package/dist/model/compare-bar.js +21 -14
- package/dist/model/completeness-group.js +18 -11
- package/dist/model/completeness.js +17 -10
- package/dist/model/dashboard.js +14 -7
- package/dist/model/funnel.js +21 -14
- package/dist/model/generic-model.js +143 -135
- package/dist/model/heat-map.js +16 -9
- package/dist/model/horizontal-bar.js +18 -11
- package/dist/model/horizontal-group-bar.js +17 -10
- package/dist/model/index.js +93 -69
- package/dist/model/line-group.js +20 -13
- package/dist/model/line.js +19 -12
- package/dist/model/map-bubble.js +17 -10
- package/dist/model/map.js +19 -12
- package/dist/model/mirror.js +20 -13
- package/dist/model/pie.js +19 -12
- package/dist/model/ring.js +19 -12
- package/dist/model/scatter.js +17 -10
- package/dist/model/stacked-horizontal-bar.js +18 -11
- package/dist/model/table-element.js +12 -5
- package/dist/model/table.js +14 -7
- package/dist/model/tree-map.js +14 -7
- package/dist/model/trend.js +18 -11
- package/dist/model/user.js +7 -1
- package/dist/model/world-map-bubble.js +19 -12
- package/dist/model/world-map.js +19 -12
- package/dist/services/map-json.js +13 -7
- package/dist/settings/advance-bar-settings/data-settings.js +46 -42
- package/dist/settings/advance-bar-settings/index.js +20 -3
- package/dist/settings/advance-bar-settings/style-settings.js +73 -69
- package/dist/settings/bar-settings/data-settings.js +49 -45
- package/dist/settings/bar-settings/index.js +20 -3
- package/dist/settings/bar-settings/style-settings.js +59 -55
- package/dist/settings/basic-number-card/data-settings.js +57 -49
- package/dist/settings/basic-number-card/index.js +20 -3
- package/dist/settings/basic-number-card/style-settings.js +26 -18
- package/dist/settings/combination-settings/data-settings.js +65 -60
- package/dist/settings/combination-settings/index.js +20 -3
- package/dist/settings/combination-settings/style-settings.js +74 -69
- package/dist/settings/completeness-settings/callbacks/callbacks.js +27 -16
- package/dist/settings/completeness-settings/data-settings/completion-settings.js +28 -21
- package/dist/settings/completeness-settings/data-settings/data-settings.js +32 -25
- package/dist/settings/completeness-settings/index.js +20 -3
- package/dist/settings/completeness-settings/style-settings.js +26 -19
- package/dist/settings/dashboard-settings/data-settings.js +51 -43
- package/dist/settings/dashboard-settings/index.js +13 -2
- package/dist/settings/data-settings.js +79 -72
- package/dist/settings/funnel-settings/components/dnd-item/dnd-item.js +19 -12
- package/dist/settings/funnel-settings/components/dnd-list.js +23 -15
- package/dist/settings/funnel-settings/components/funnel-label-setting.js +40 -32
- package/dist/settings/funnel-settings/components/funnel-layer-setting.js +30 -22
- package/dist/settings/funnel-settings/data-settings.js +31 -23
- package/dist/settings/funnel-settings/index.js +20 -3
- package/dist/settings/funnel-settings/style-settings.js +19 -11
- package/dist/settings/heat-map-settings/data-settings.js +26 -18
- package/dist/settings/heat-map-settings/index.js +20 -3
- package/dist/settings/heat-map-settings/style-settings.js +26 -18
- package/dist/settings/horizontal-bar-settings/data-settings.js +19 -12
- package/dist/settings/horizontal-bar-settings/index.js +20 -3
- package/dist/settings/horizontal-bar-settings/style-settings.js +19 -12
- package/dist/settings/index.js +75 -58
- package/dist/settings/map-settings/components/location-field-selector.js +17 -10
- package/dist/settings/map-settings/components/map-level-selector.js +18 -11
- package/dist/settings/map-settings/components/map-province-city-selector.js +26 -19
- package/dist/settings/map-settings/index.js +20 -3
- package/dist/settings/map-settings/map-data-settings.js +30 -23
- package/dist/settings/map-settings/map-style-settings.js +34 -26
- package/dist/settings/mirror-settings/data-settings.js +34 -26
- package/dist/settings/mirror-settings/index.js +13 -2
- package/dist/settings/pie-settings/data-settings.js +41 -33
- package/dist/settings/pie-settings/index.js +20 -3
- package/dist/settings/pie-settings/style-settings.js +55 -47
- package/dist/settings/scatter/data-settings.js +34 -27
- package/dist/settings/scatter/index.js +12 -3
- package/dist/settings/stacks-settings/index.js +27 -19
- package/dist/settings/stacks-settings/stack-item-settings.js +27 -19
- package/dist/settings/style-settings.js +72 -64
- package/dist/settings/table-element-settings/components/data-filter.js +37 -29
- package/dist/settings/table-element-settings/data-settings.js +29 -21
- package/dist/settings/table-element-settings/index.js +13 -2
- package/dist/settings/table-settings/data-settings.js +119 -111
- package/dist/settings/table-settings/index.js +13 -2
- package/dist/settings/time-comparison-settings/data-settings.js +51 -43
- package/dist/settings/time-comparison-settings/index.js +20 -3
- package/dist/settings/time-comparison-settings/style-settings.js +50 -42
- package/dist/settings/trend-settings/data-settings.js +32 -24
- package/dist/settings/trend-settings/index.js +20 -3
- package/dist/settings/trend-settings/style-setting.js +25 -17
- package/dist/settings/widgets/basic-summary/index.js +66 -66
- package/dist/settings/widgets/chart-type/index.js +34 -19
- package/dist/settings/widgets/color-settings/index.js +80 -72
- package/dist/settings/widgets/common-data-settings.js +30 -25
- package/dist/settings/widgets/data-filter/index.js +40 -32
- package/dist/settings/widgets/data-sort.js +24 -16
- package/dist/settings/widgets/date-summary-item.js +32 -24
- package/dist/settings/widgets/display-values-settings/index.js +22 -14
- package/dist/settings/widgets/divider/index.js +16 -8
- package/dist/settings/widgets/font-settings/font-color-settings.js +19 -11
- package/dist/settings/widgets/font-settings/font-size-settings.js +22 -14
- package/dist/settings/widgets/font-settings/font-weight-settings.js +25 -17
- package/dist/settings/widgets/font-settings/index.js +27 -4
- package/dist/settings/widgets/group-by.js +59 -51
- package/dist/settings/widgets/min-max-setting.js +18 -10
- package/dist/settings/widgets/mininum-slice-percent.js +18 -10
- package/dist/settings/widgets/numeric-summary-item.js +31 -23
- package/dist/settings/widgets/select-line-type/index.js +17 -10
- package/dist/settings/widgets/select-table/index.js +16 -9
- package/dist/settings/widgets/select-view/index.js +28 -20
- package/dist/settings/widgets/stack.js +22 -14
- package/dist/settings/widgets/summary-method-setting.js +25 -17
- package/dist/settings/widgets/summary-settings.js +80 -72
- package/dist/settings/widgets/switch/index.js +15 -8
- package/dist/settings/widgets/text-horizontal-settings.js +23 -15
- package/dist/settings/widgets/time-picker.js +37 -29
- package/dist/settings/widgets/title-settings/index.js +37 -29
- package/dist/settings/widgets/title-settings/title-text.js +12 -5
- package/dist/settings/widgets/x-axios.js +1 -0
- package/dist/settings/widgets/y-axis-group-settings.js +71 -63
- package/dist/utils/cell-format-utils.js +29 -19
- package/dist/utils/cell-value-utils.js +11 -4
- package/dist/utils/chart-utils/base-utils.js +290 -279
- package/dist/utils/chart-utils/index.js +39 -26
- package/dist/utils/chart-utils/original-data-utils/basic-chart-calculator.js +84 -77
- package/dist/utils/chart-utils/original-data-utils/card-calculator.js +20 -13
- package/dist/utils/chart-utils/original-data-utils/combination-calculator.js +52 -45
- package/dist/utils/chart-utils/original-data-utils/compare-bar-chart-calculator.js +26 -19
- package/dist/utils/chart-utils/original-data-utils/completeness-calculator.js +39 -32
- package/dist/utils/chart-utils/original-data-utils/dashboard-calculator.js +23 -16
- package/dist/utils/chart-utils/original-data-utils/index.js +57 -50
- package/dist/utils/chart-utils/original-data-utils/mirror-calculator.js +26 -19
- package/dist/utils/chart-utils/original-data-utils/pivot-table-calculator.js +96 -90
- package/dist/utils/chart-utils/original-data-utils/scatter-calculator.js +25 -18
- package/dist/utils/chart-utils/original-data-utils/trend-calculator.js +34 -27
- package/dist/utils/chart-utils/sql-statistics-utils.js +237 -229
- package/dist/utils/chart.js +17 -9
- package/dist/utils/collaborator-manager.js +9 -3
- package/dist/utils/collaborator-utils.js +30 -18
- package/dist/utils/collaborator.js +13 -4
- package/dist/utils/color-utils.js +29 -18
- package/dist/utils/column-utils.js +88 -63
- package/dist/utils/common-utils.js +52 -27
- package/dist/utils/concurrency-manager.js +7 -1
- package/dist/utils/contexts.js +11 -4
- package/dist/utils/custom-g2.js +241 -212
- package/dist/utils/date-translate.js +19 -11
- package/dist/utils/digital-sign-utils.js +14 -7
- package/dist/utils/event-bus.js +7 -1
- package/dist/utils/hotkey.js +11 -5
- package/dist/utils/index.js +219 -53
- package/dist/utils/key-generator.js +9 -2
- package/dist/utils/map.js +31 -22
- package/dist/utils/object-utils.js +7 -1
- package/dist/utils/options-utils.js +16 -8
- package/dist/utils/row-record-utils.js +164 -152
- package/dist/utils/row-utils.js +38 -27
- package/dist/utils/search.js +32 -24
- package/dist/utils/sql/chart-data-sql.js +55 -49
- package/dist/utils/sql/column-2-sql-column.js +153 -143
- package/dist/utils/sql/index.js +27 -3
- package/dist/utils/trend-utils.js +45 -37
- package/dist/view/index.js +96 -87
- package/dist/view/title/index.js +23 -15
- package/dist/view/wrapper/area.js +46 -39
- package/dist/view/wrapper/bar-custom.js +40 -33
- package/dist/view/wrapper/bar-group.js +58 -51
- package/dist/view/wrapper/bar.js +42 -35
- package/dist/view/wrapper/basic-number-card.js +25 -17
- package/dist/view/wrapper/chart-component.js +116 -54
- package/dist/view/wrapper/combination.js +82 -75
- package/dist/view/wrapper/compare.js +57 -50
- package/dist/view/wrapper/completeness.js +32 -24
- package/dist/view/wrapper/dashboard.js +21 -14
- package/dist/view/wrapper/funnel.js +26 -19
- package/dist/view/wrapper/heat-map.js +60 -53
- package/dist/view/wrapper/horizontal-bar-group.js +48 -41
- package/dist/view/wrapper/horizontal-bar.js +39 -32
- package/dist/view/wrapper/horizontal-component.js +23 -15
- package/dist/view/wrapper/index.js +148 -96
- package/dist/view/wrapper/line-group.js +41 -34
- package/dist/view/wrapper/line.js +39 -32
- package/dist/view/wrapper/map.js +54 -46
- package/dist/view/wrapper/mirror.js +38 -31
- package/dist/view/wrapper/pie.js +50 -43
- package/dist/view/wrapper/ring.js +59 -52
- package/dist/view/wrapper/scatter.js +30 -22
- package/dist/view/wrapper/table/index.js +21 -13
- package/dist/view/wrapper/table/one-dimension-table-no-numeric-columns.js +57 -49
- package/dist/view/wrapper/table/one-dimension-table-with-numeric-columns.js +58 -50
- package/dist/view/wrapper/table/pivot-table-display-name.js +90 -82
- package/dist/view/wrapper/table/two-dimension-table.js +84 -76
- package/dist/view/wrapper/table-element/components/dataset-utils.js +36 -23
- package/dist/view/wrapper/table-element/components/formatter.js +98 -89
- package/dist/view/wrapper/table-element/components/formatters/FileFormatter/index.js +31 -22
- package/dist/view/wrapper/table-element/components/formatters/formula-formatter.js +16 -9
- package/dist/view/wrapper/table-element/components/formatters/link-formatter.js +80 -73
- package/dist/view/wrapper/table-element/components/formula-formatter.js +16 -9
- package/dist/view/wrapper/table-element/components/link-formatter.js +80 -73
- package/dist/view/wrapper/table-element/components/record.js +17 -10
- package/dist/view/wrapper/table-element/components/records-body.js +17 -9
- package/dist/view/wrapper/table-element/components/records-header/index.js +16 -8
- package/dist/view/wrapper/table-element/components/records-header/records-header-cell.js +16 -8
- package/dist/view/wrapper/table-element/components/records.js +29 -21
- package/dist/view/wrapper/table-element/components/resize-column-handle/resize-column-handle.js +13 -6
- package/dist/view/wrapper/table-element/components/utils.js +15 -5
- package/dist/view/wrapper/table-element/components/value-display-utils.js +11 -4
- package/dist/view/wrapper/table-element/components/vertical-scrollbar/index.js +13 -6
- package/dist/view/wrapper/table-element/index.js +24 -16
- package/dist/view/wrapper/treemap.js +43 -36
- package/dist/view/wrapper/trend.js +47 -39
- package/dist/view/wrapper/world-map.js +60 -52
- package/dist/view/wrapper/wrappers-d3/bar.js +262 -0
- package/package.json +15 -17
|
@@ -1,18 +1,25 @@
|
|
|
1
|
-
|
|
2
|
-
|
|
3
|
-
|
|
4
|
-
|
|
5
|
-
|
|
6
|
-
|
|
7
|
-
|
|
8
|
-
|
|
9
|
-
|
|
10
|
-
|
|
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 _classnames = _interopRequireDefault(require("classnames"));
|
|
11
|
+
var _dtableUtils = require("dtable-utils");
|
|
12
|
+
var _lodashEs = require("lodash-es");
|
|
13
|
+
var _customG = require("../../utils/custom-g2");
|
|
14
|
+
var _utils = require("../../utils");
|
|
15
|
+
var _constants = require("../../constants");
|
|
16
|
+
var _intl = _interopRequireDefault(require("../../intl"));
|
|
17
|
+
var _chartComponent = _interopRequireDefault(require("./chart-component"));
|
|
11
18
|
const valueFieldMap = {
|
|
12
19
|
value_left: ['Y_axis_(lift_side)', 'All'],
|
|
13
20
|
value_right: ['Y_axis_(right_side)', 'All']
|
|
14
21
|
};
|
|
15
|
-
class Combination extends
|
|
22
|
+
class Combination extends _chartComponent.default {
|
|
16
23
|
constructor(props) {
|
|
17
24
|
super(props);
|
|
18
25
|
this.clearChart = () => {
|
|
@@ -23,7 +30,7 @@ class Combination extends ChartComponent {
|
|
|
23
30
|
let {
|
|
24
31
|
result: data
|
|
25
32
|
} = this.props;
|
|
26
|
-
data = BaseUtils.formatEmptyName(data, '',
|
|
33
|
+
data = _utils.BaseUtils.formatEmptyName(data, '', _intl.default.get('Empty'));
|
|
27
34
|
this.draw(data);
|
|
28
35
|
};
|
|
29
36
|
this.draw = data => {
|
|
@@ -35,7 +42,7 @@ class Combination extends ChartComponent {
|
|
|
35
42
|
chartColorTheme,
|
|
36
43
|
customRender
|
|
37
44
|
} = this.props;
|
|
38
|
-
const theme = CHART_THEME_COLOR[globalTheme];
|
|
45
|
+
const theme = _constants.CHART_THEME_COLOR[globalTheme];
|
|
39
46
|
const {
|
|
40
47
|
table_id,
|
|
41
48
|
y_axis_left_summary_column,
|
|
@@ -61,14 +68,14 @@ class Combination extends ChartComponent {
|
|
|
61
68
|
goal_value,
|
|
62
69
|
goal_label
|
|
63
70
|
} = chart.style_config || {};
|
|
64
|
-
this.chart = new Chart({
|
|
71
|
+
this.chart = new _customG.Chart({
|
|
65
72
|
container: this.container,
|
|
66
73
|
autoFit: true,
|
|
67
74
|
width: '100%',
|
|
68
75
|
height: '100%',
|
|
69
76
|
appendPadding: [display_data ? 17 : 0, 0, 0, 0]
|
|
70
77
|
});
|
|
71
|
-
const isSmooth = line_type === CHART_LINE_TYPES[1] || !line_type;
|
|
78
|
+
const isSmooth = line_type === _constants.CHART_LINE_TYPES[1] || !line_type;
|
|
72
79
|
const showLeftValue = display_data && valueFieldMap['value_left'].includes(display_data_field);
|
|
73
80
|
let showRightValue = display_data && valueFieldMap['value_right'].includes(display_data_field);
|
|
74
81
|
// if display_data is open, default show right value
|
|
@@ -96,7 +103,7 @@ class Combination extends ChartComponent {
|
|
|
96
103
|
}, ['', -Infinity])[0];
|
|
97
104
|
const singleBarWidth = Math.round(chartWidth / (2 * nameNums * mostCommonCount));
|
|
98
105
|
const singleBarRadius = Math.min(singleBarWidth / 5, 10);
|
|
99
|
-
const currentTheme = BaseUtils.getCurrentTheme(chartColorTheme);
|
|
106
|
+
const currentTheme = _utils.BaseUtils.getCurrentTheme(chartColorTheme);
|
|
100
107
|
this.colorMap = data.reduce((acc, cur, index) => {
|
|
101
108
|
if (!acc[cur.group_name]) {
|
|
102
109
|
acc[cur.group_name] = cur.color;
|
|
@@ -105,21 +112,21 @@ class Combination extends ChartComponent {
|
|
|
105
112
|
}, {});
|
|
106
113
|
this.chart.data(data);
|
|
107
114
|
this.chart.coordinate('rect');
|
|
108
|
-
const table = getTableById(tables, table_id);
|
|
109
|
-
const leftSummaryColumn = getTableColumnByKey(table, y_axis_left_summary_column) || {};
|
|
110
|
-
const rightSummaryColumn = getTableColumnByKey(table, y_axis_right_summary_column) || {};
|
|
115
|
+
const table = (0, _dtableUtils.getTableById)(tables, table_id);
|
|
116
|
+
const leftSummaryColumn = (0, _dtableUtils.getTableColumnByKey)(table, y_axis_left_summary_column) || {};
|
|
117
|
+
const rightSummaryColumn = (0, _dtableUtils.getTableColumnByKey)(table, y_axis_right_summary_column) || {};
|
|
111
118
|
// const xAxisColumn = getTableColumnByKey(table, x_axis_column_key);
|
|
112
119
|
|
|
113
120
|
const leftTitle = this.getTitle(tables, table_id, y_axis_left_summary_type, y_axis_left_summary_column);
|
|
114
121
|
const rightTitle = this.getTitle(tables, table_id, y_axis_right_summary_type, y_axis_right_summary_column);
|
|
115
122
|
let leftValueScaleOptions = {
|
|
116
123
|
formatter: value => {
|
|
117
|
-
return BaseUtils.getSummaryValueDisplayString(leftSummaryColumn, value, y_axis_left_summary_method);
|
|
124
|
+
return _utils.BaseUtils.getSummaryValueDisplayString(leftSummaryColumn, value, y_axis_left_summary_method);
|
|
118
125
|
}
|
|
119
126
|
};
|
|
120
127
|
let rightValueScaleOptions = {
|
|
121
128
|
formatter: value => {
|
|
122
|
-
return BaseUtils.getSummaryValueDisplayString(rightSummaryColumn, value, y_axis_right_summary_method);
|
|
129
|
+
return _utils.BaseUtils.getSummaryValueDisplayString(rightSummaryColumn, value, y_axis_right_summary_method);
|
|
123
130
|
}
|
|
124
131
|
};
|
|
125
132
|
if (!y_axis_auto_range_left) {
|
|
@@ -166,7 +173,7 @@ class Combination extends ChartComponent {
|
|
|
166
173
|
const isString = typeof name === 'string';
|
|
167
174
|
if (!isString) name = String(name);
|
|
168
175
|
if (name === 'undefined') {
|
|
169
|
-
return
|
|
176
|
+
return _intl.default.get(_constants.EMPTY_NAME);
|
|
170
177
|
}
|
|
171
178
|
if (name.length > 10) {
|
|
172
179
|
return "".concat(name.slice(0, 10), "...");
|
|
@@ -216,11 +223,11 @@ class Combination extends ChartComponent {
|
|
|
216
223
|
},
|
|
217
224
|
formatter: name => {
|
|
218
225
|
if (!name && typeof name !== 'number') {
|
|
219
|
-
return
|
|
226
|
+
return _intl.default.get(_constants.EMPTY_NAME);
|
|
220
227
|
} else if (name === '_Others') {
|
|
221
|
-
return
|
|
228
|
+
return _intl.default.get('Others');
|
|
222
229
|
} else {
|
|
223
|
-
return
|
|
230
|
+
return _intl.default.get(name) || name;
|
|
224
231
|
}
|
|
225
232
|
}
|
|
226
233
|
},
|
|
@@ -252,8 +259,8 @@ class Combination extends ChartComponent {
|
|
|
252
259
|
}
|
|
253
260
|
return {
|
|
254
261
|
title,
|
|
255
|
-
value: BaseUtils.getSummaryValueDisplayString(leftSummaryColumn, value, y_axis_left_summary_method),
|
|
256
|
-
name: !name && typeof name !== 'number' ?
|
|
262
|
+
value: _utils.BaseUtils.getSummaryValueDisplayString(leftSummaryColumn, value, y_axis_left_summary_method),
|
|
263
|
+
name: !name && typeof name !== 'number' ? _intl.default.get(_constants.EMPTY_NAME) : name
|
|
257
264
|
};
|
|
258
265
|
}).state({
|
|
259
266
|
active: {
|
|
@@ -266,7 +273,7 @@ class Combination extends ChartComponent {
|
|
|
266
273
|
radius: [singleBarRadius, singleBarRadius, 0, 0]
|
|
267
274
|
}).label(showLeftValue ? 'value_left' : false, {
|
|
268
275
|
style: {
|
|
269
|
-
fontSize: BaseUtils.getLabelFontSize(label_font_size),
|
|
276
|
+
fontSize: _utils.BaseUtils.getLabelFontSize(label_font_size),
|
|
270
277
|
fill: theme.labelColor,
|
|
271
278
|
stroke: '#fff',
|
|
272
279
|
lineWidth: 1
|
|
@@ -293,7 +300,7 @@ class Combination extends ChartComponent {
|
|
|
293
300
|
fillOpacity: 1
|
|
294
301
|
}).label(showRightValue ? 'value_right' : false, {
|
|
295
302
|
style: {
|
|
296
|
-
fontSize: BaseUtils.getLabelFontSize(label_font_size),
|
|
303
|
+
fontSize: _utils.BaseUtils.getLabelFontSize(label_font_size),
|
|
297
304
|
fill: theme.labelColor,
|
|
298
305
|
stroke: '#fff',
|
|
299
306
|
lineWidth: 1
|
|
@@ -301,8 +308,8 @@ class Combination extends ChartComponent {
|
|
|
301
308
|
}).tooltip('name*value_right', (name, value) => {
|
|
302
309
|
return {
|
|
303
310
|
title: rightTitle,
|
|
304
|
-
value: BaseUtils.getSummaryValueDisplayString(rightSummaryColumn, value, y_axis_right_summary_method),
|
|
305
|
-
name: !name && typeof name !== 'number' ?
|
|
311
|
+
value: _utils.BaseUtils.getSummaryValueDisplayString(rightSummaryColumn, value, y_axis_right_summary_method),
|
|
312
|
+
name: !name && typeof name !== 'number' ? _intl.default.get(_constants.EMPTY_NAME) : name
|
|
306
313
|
};
|
|
307
314
|
}).state({
|
|
308
315
|
active: {
|
|
@@ -312,13 +319,13 @@ class Combination extends ChartComponent {
|
|
|
312
319
|
}
|
|
313
320
|
});
|
|
314
321
|
if (display_data) {
|
|
315
|
-
this.chart.on('point:mouseenter', throttle(e => {
|
|
322
|
+
this.chart.on('point:mouseenter', (0, _lodashEs.throttle)(e => {
|
|
316
323
|
const currentName = e.data.data.name;
|
|
317
324
|
if (this.currentName && this.currentName === currentName) return;
|
|
318
325
|
this.currentName = currentName;
|
|
319
326
|
this.chart.render(true);
|
|
320
327
|
}, 100));
|
|
321
|
-
this.chart.on('point:mouseleave', throttle(e => {
|
|
328
|
+
this.chart.on('point:mouseleave', (0, _lodashEs.throttle)(e => {
|
|
322
329
|
if (!this.currentName) return;
|
|
323
330
|
this.currentName = null;
|
|
324
331
|
this.chart.render(true);
|
|
@@ -353,8 +360,8 @@ class Combination extends ChartComponent {
|
|
|
353
360
|
}
|
|
354
361
|
return {
|
|
355
362
|
title,
|
|
356
|
-
value: BaseUtils.getSummaryValueDisplayString(rightSummaryColumn, value, y_axis_right_summary_method),
|
|
357
|
-
name: !name && typeof name !== 'number' ?
|
|
363
|
+
value: _utils.BaseUtils.getSummaryValueDisplayString(rightSummaryColumn, value, y_axis_right_summary_method),
|
|
364
|
+
name: !name && typeof name !== 'number' ? _intl.default.get(_constants.EMPTY_NAME) : name
|
|
358
365
|
};
|
|
359
366
|
});
|
|
360
367
|
point.tooltip(false);
|
|
@@ -374,14 +381,14 @@ class Combination extends ChartComponent {
|
|
|
374
381
|
point.tooltip('name*value_right', (name, value) => {
|
|
375
382
|
return {
|
|
376
383
|
title: rightTitle,
|
|
377
|
-
value: BaseUtils.getSummaryValueDisplayString(rightSummaryColumn, value, y_axis_right_summary_method),
|
|
378
|
-
name: !name && typeof name !== 'number' ?
|
|
384
|
+
value: _utils.BaseUtils.getSummaryValueDisplayString(rightSummaryColumn, value, y_axis_right_summary_method),
|
|
385
|
+
name: !name && typeof name !== 'number' ? _intl.default.get(_constants.EMPTY_NAME) : name
|
|
379
386
|
};
|
|
380
387
|
});
|
|
381
388
|
this.setToolTipForPointView();
|
|
382
389
|
this.chart.render(true);
|
|
383
390
|
});
|
|
384
|
-
this.chart.on('point:mouseenter', throttle(e => {
|
|
391
|
+
this.chart.on('point:mouseenter', (0, _lodashEs.throttle)(e => {
|
|
385
392
|
if (this.isInsidePoint) return;
|
|
386
393
|
this.isInsidePoint = true;
|
|
387
394
|
// interval.style({
|
|
@@ -401,7 +408,7 @@ class Combination extends ChartComponent {
|
|
|
401
408
|
});
|
|
402
409
|
this.chart.render(true);
|
|
403
410
|
}, 100));
|
|
404
|
-
this.chart.on('point:mouseleave', throttle(e => {
|
|
411
|
+
this.chart.on('point:mouseleave', (0, _lodashEs.throttle)(e => {
|
|
405
412
|
if (!this.isInsidePoint) return;
|
|
406
413
|
this.isInsidePoint = false;
|
|
407
414
|
// interval.style({
|
|
@@ -421,7 +428,7 @@ class Combination extends ChartComponent {
|
|
|
421
428
|
if (display_goal_line && goal_label && goal_value) {
|
|
422
429
|
this.setDispalyGoalLine(goal_label, goal_value, chartWidth);
|
|
423
430
|
}
|
|
424
|
-
isFunction(customRender) && customRender(this.chart);
|
|
431
|
+
(0, _utils.isFunction)(customRender) && customRender(this.chart);
|
|
425
432
|
this.chart.removeInteraction('legend-filter');
|
|
426
433
|
requestAnimationFrame(() => {
|
|
427
434
|
this.chart.render();
|
|
@@ -452,7 +459,7 @@ class Combination extends ChartComponent {
|
|
|
452
459
|
y_axis_left_summary_type,
|
|
453
460
|
y_axis_right_summary_type
|
|
454
461
|
} = config;
|
|
455
|
-
const table = getTableById(tables, table_id);
|
|
462
|
+
const table = (0, _dtableUtils.getTableById)(tables, table_id);
|
|
456
463
|
const autoPadding = ((_this$chart = this.chart) === null || _this$chart === void 0 ? void 0 : _this$chart.autoPadding) || 0;
|
|
457
464
|
const textColor = '#999';
|
|
458
465
|
const xAxisID = "chart-x-axis-label_".concat(chart.id);
|
|
@@ -462,7 +469,7 @@ class Combination extends ChartComponent {
|
|
|
462
469
|
const div = document.createElement('div');
|
|
463
470
|
div.id = xAxisID;
|
|
464
471
|
div.className = 'chart-axis-label text-truncate';
|
|
465
|
-
const column = getTableColumnByKey(table, x_axis_column_key);
|
|
472
|
+
const column = (0, _dtableUtils.getTableColumnByKey)(table, x_axis_column_key);
|
|
466
473
|
div.innerHTML = "".concat(column ? column.name : '');
|
|
467
474
|
div.setAttribute('style', "color:".concat(textColor, "; width: 100%; text-align: ").concat(x_axis_label_position, "; bottom: -20px; position: absolute"));
|
|
468
475
|
chartContainer.appendChild(div);
|
|
@@ -479,16 +486,16 @@ class Combination extends ChartComponent {
|
|
|
479
486
|
const div = document.createElement('div');
|
|
480
487
|
div.id = yAxisLeftID;
|
|
481
488
|
div.className = 'chart-axis-label text-truncate';
|
|
482
|
-
if (y_axis_left_summary_type === CHART_SUMMARY_TYPE.COUNT) {
|
|
483
|
-
div.innerHTML =
|
|
489
|
+
if (y_axis_left_summary_type === _constants.CHART_SUMMARY_TYPE.COUNT) {
|
|
490
|
+
div.innerHTML = _intl.default.get('Amount');
|
|
484
491
|
} else {
|
|
485
|
-
const column = getTableColumnByKey(table, y_axis_left_summary_column) || {};
|
|
492
|
+
const column = (0, _dtableUtils.getTableColumnByKey)(table, y_axis_left_summary_column) || {};
|
|
486
493
|
div.innerHTML = column.name || '';
|
|
487
494
|
}
|
|
488
495
|
const containerHeight = chartContainer.offsetHeight;
|
|
489
496
|
let textAlign = 'center';
|
|
490
|
-
if (y_axis_left_label_position === LABEL_POSITION_TYPE.BOTTOM) textAlign = 'left';
|
|
491
|
-
if (y_axis_left_label_position === LABEL_POSITION_TYPE.TOP) textAlign = 'right';
|
|
497
|
+
if (y_axis_left_label_position === _constants.LABEL_POSITION_TYPE.BOTTOM) textAlign = 'left';
|
|
498
|
+
if (y_axis_left_label_position === _constants.LABEL_POSITION_TYPE.TOP) textAlign = 'right';
|
|
492
499
|
div.setAttribute('style', "color:".concat(textColor, "; position: absolute; width: ").concat(containerHeight, "px; text-align: ").concat(textAlign, "; top: 0; left: 0; transform: translate(-").concat(containerHeight / 2 + 12, "px, ").concat((containerHeight - autoPadding.bottom) / 2 + autoPadding.bottom / 4, "px) rotate(-90deg)"));
|
|
493
500
|
chartContainer.appendChild(div);
|
|
494
501
|
}
|
|
@@ -508,16 +515,16 @@ class Combination extends ChartComponent {
|
|
|
508
515
|
const div = document.createElement('div');
|
|
509
516
|
div.id = yAxisRightID;
|
|
510
517
|
div.className = 'chart-axis-label text-truncate';
|
|
511
|
-
if (y_axis_right_summary_type === CHART_SUMMARY_TYPE.COUNT) {
|
|
512
|
-
div.innerHTML =
|
|
518
|
+
if (y_axis_right_summary_type === _constants.CHART_SUMMARY_TYPE.COUNT) {
|
|
519
|
+
div.innerHTML = _intl.default.get('Amount');
|
|
513
520
|
} else {
|
|
514
|
-
const column = getTableColumnByKey(table, y_axis_right_summary_column) || {};
|
|
521
|
+
const column = (0, _dtableUtils.getTableColumnByKey)(table, y_axis_right_summary_column) || {};
|
|
515
522
|
div.innerHTML = column.name || '';
|
|
516
523
|
}
|
|
517
524
|
const containerHeight = chartContainer.offsetHeight;
|
|
518
525
|
let textAlign = 'center';
|
|
519
|
-
if (y_axis_right_label_position === LABEL_POSITION_TYPE.BOTTOM) textAlign = 'left';
|
|
520
|
-
if (y_axis_right_label_position === LABEL_POSITION_TYPE.TOP) textAlign = 'right';
|
|
526
|
+
if (y_axis_right_label_position === _constants.LABEL_POSITION_TYPE.BOTTOM) textAlign = 'left';
|
|
527
|
+
if (y_axis_right_label_position === _constants.LABEL_POSITION_TYPE.TOP) textAlign = 'right';
|
|
521
528
|
div.setAttribute('style', "color:".concat(textColor, "; position: absolute; width: ").concat(containerHeight, "px; text-align: ").concat(textAlign, "; top: 0; right: 0; transform: translate(").concat(containerHeight / 2 + 12, "px, ").concat((containerHeight - autoPadding.bottom) / 2 + autoPadding.bottom / 4, "px) rotate(-90deg)"));
|
|
522
529
|
chartContainer.appendChild(div);
|
|
523
530
|
}
|
|
@@ -569,7 +576,7 @@ class Combination extends ChartComponent {
|
|
|
569
576
|
if (!y_axis_left_group_by_multiple_numeric_column) {
|
|
570
577
|
legendItems.push({
|
|
571
578
|
value: 'value_left',
|
|
572
|
-
name: leftSummaryColumn.name ||
|
|
579
|
+
name: leftSummaryColumn.name || _intl.default.get('Left'),
|
|
573
580
|
marker: {
|
|
574
581
|
symbol: this.drawLeftLegendSymbol,
|
|
575
582
|
style: {
|
|
@@ -578,7 +585,7 @@ class Combination extends ChartComponent {
|
|
|
578
585
|
}
|
|
579
586
|
}, {
|
|
580
587
|
value: 'value_right',
|
|
581
|
-
name: rightSummaryColumn.name ||
|
|
588
|
+
name: rightSummaryColumn.name || _intl.default.get('Right'),
|
|
582
589
|
marker: {
|
|
583
590
|
symbol: this.drawRightLegendSymbol,
|
|
584
591
|
style: {
|
|
@@ -589,7 +596,7 @@ class Combination extends ChartComponent {
|
|
|
589
596
|
} else {
|
|
590
597
|
legendItems.push({
|
|
591
598
|
value: 'value_left',
|
|
592
|
-
name: leftSummaryColumn.name ||
|
|
599
|
+
name: leftSummaryColumn.name || _intl.default.get('Left'),
|
|
593
600
|
marker: {
|
|
594
601
|
style: {
|
|
595
602
|
fill: this.colorMap[leftSummaryColumn.name] || currentTheme.colors[0]
|
|
@@ -598,11 +605,11 @@ class Combination extends ChartComponent {
|
|
|
598
605
|
}
|
|
599
606
|
});
|
|
600
607
|
y_axis_left_group_by_numeric_columns.forEach((item, index) => {
|
|
601
|
-
const column = getTableColumnByKey(table, item.column_key);
|
|
608
|
+
const column = (0, _dtableUtils.getTableColumnByKey)(table, item.column_key);
|
|
602
609
|
if (column) {
|
|
603
610
|
legendItems.push({
|
|
604
611
|
value: 'group_name',
|
|
605
|
-
name: column.name ||
|
|
612
|
+
name: column.name || _intl.default.get('Left'),
|
|
606
613
|
marker: {
|
|
607
614
|
symbol: this.drawLeftLegendSymbol,
|
|
608
615
|
style: {
|
|
@@ -614,7 +621,7 @@ class Combination extends ChartComponent {
|
|
|
614
621
|
});
|
|
615
622
|
legendItems.push({
|
|
616
623
|
value: 'value_right',
|
|
617
|
-
name: rightSummaryColumn.name ||
|
|
624
|
+
name: rightSummaryColumn.name || _intl.default.get('Right'),
|
|
618
625
|
marker: {
|
|
619
626
|
symbol: this.drawRightLegendSymbol,
|
|
620
627
|
style: {
|
|
@@ -640,11 +647,11 @@ class Combination extends ChartComponent {
|
|
|
640
647
|
const isMultiple = y_axis_left_group_by_multiple_numeric_column;
|
|
641
648
|
return this.formatedDataByName[name].map(item => {
|
|
642
649
|
const res = {
|
|
643
|
-
color: item.color || CHART_STYLE_COLORS[0],
|
|
650
|
+
color: item.color || _constants.CHART_STYLE_COLORS[0],
|
|
644
651
|
data: item,
|
|
645
|
-
name: !item.group_name && typeof item.group_name !== 'number' && isMultiple ?
|
|
646
|
-
title: isMultiple ? item.name :
|
|
647
|
-
value: BaseUtils.getSummaryValueDisplayString(summaryColumn, item.value_left, y_axis_summary_method)
|
|
652
|
+
name: !item.group_name && typeof item.group_name !== 'number' && isMultiple ? _intl.default.get(_constants.EMPTY_NAME) : item.group_name || item.name,
|
|
653
|
+
title: isMultiple ? item.name : _intl.default.get(_constants.CHART_SUMMARY_SHOW[y_axis_right_summary_method]),
|
|
654
|
+
value: _utils.BaseUtils.getSummaryValueDisplayString(summaryColumn, item.value_left, y_axis_summary_method)
|
|
648
655
|
};
|
|
649
656
|
return res;
|
|
650
657
|
});
|
|
@@ -676,7 +683,7 @@ class Combination extends ChartComponent {
|
|
|
676
683
|
}
|
|
677
684
|
componentDidUpdate(prevProps) {
|
|
678
685
|
super.componentDidUpdate(prevProps);
|
|
679
|
-
if (BaseUtils.shouldChartComponentUpdate(prevProps, this.props)) {
|
|
686
|
+
if (_utils.BaseUtils.shouldChartComponentUpdate(prevProps, this.props)) {
|
|
680
687
|
var _this$chart2;
|
|
681
688
|
((_this$chart2 = this.chart) === null || _this$chart2 === void 0 ? void 0 : _this$chart2.autoPadding) && this.chart.destroy();
|
|
682
689
|
this.drawChart();
|
|
@@ -691,8 +698,8 @@ class Combination extends ChartComponent {
|
|
|
691
698
|
const {
|
|
692
699
|
chart
|
|
693
700
|
} = this.props;
|
|
694
|
-
return /*#__PURE__*/
|
|
695
|
-
className:
|
|
701
|
+
return /*#__PURE__*/_react.default.createElement("div", {
|
|
702
|
+
className: (0, _classnames.default)('sea-chart-container ', {
|
|
696
703
|
'show-x-axis-label': this.isShowXAxisLabel(chart),
|
|
697
704
|
'show-y-axis-left-label': this.isShowYAxisLeftLabel(chart),
|
|
698
705
|
'show-y-axis-right-label': this.isShowYAxisRightLabel(chart)
|
|
@@ -702,14 +709,14 @@ class Combination extends ChartComponent {
|
|
|
702
709
|
}
|
|
703
710
|
}
|
|
704
711
|
Combination.propTypes = {
|
|
705
|
-
canvasStyle:
|
|
706
|
-
chart:
|
|
707
|
-
summaryColumn:
|
|
708
|
-
result:
|
|
709
|
-
tables:
|
|
710
|
-
globalTheme:
|
|
711
|
-
chartColorTheme:
|
|
712
|
-
toggleRecords:
|
|
713
|
-
customRender:
|
|
712
|
+
canvasStyle: _propTypes.default.object,
|
|
713
|
+
chart: _propTypes.default.object,
|
|
714
|
+
summaryColumn: _propTypes.default.object,
|
|
715
|
+
result: _propTypes.default.array,
|
|
716
|
+
tables: _propTypes.default.array,
|
|
717
|
+
globalTheme: _propTypes.default.string,
|
|
718
|
+
chartColorTheme: _propTypes.default.string,
|
|
719
|
+
toggleRecords: _propTypes.default.func,
|
|
720
|
+
customRender: _propTypes.default.func
|
|
714
721
|
};
|
|
715
|
-
|
|
722
|
+
var _default = exports.default = Combination;
|
|
@@ -1,13 +1,20 @@
|
|
|
1
|
-
|
|
2
|
-
|
|
3
|
-
|
|
4
|
-
|
|
5
|
-
|
|
6
|
-
|
|
7
|
-
|
|
8
|
-
|
|
9
|
-
|
|
10
|
-
|
|
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 _classnames = _interopRequireDefault(require("classnames"));
|
|
11
|
+
var _dtableUtils = require("dtable-utils");
|
|
12
|
+
var _lodashEs = require("lodash-es");
|
|
13
|
+
var _constants = require("../../constants");
|
|
14
|
+
var _chartUtils = require("../../utils/chart-utils");
|
|
15
|
+
var _intl = _interopRequireDefault(require("../../intl"));
|
|
16
|
+
var _chartComponent = _interopRequireDefault(require("./chart-component"));
|
|
17
|
+
class Compare extends _chartComponent.default {
|
|
11
18
|
constructor(props) {
|
|
12
19
|
super(props);
|
|
13
20
|
this.createChart = () => {
|
|
@@ -34,7 +41,7 @@ class Compare extends ChartComponent {
|
|
|
34
41
|
let {
|
|
35
42
|
result: data
|
|
36
43
|
} = this.props;
|
|
37
|
-
data = BaseUtils.formatEmptyName(data, '',
|
|
44
|
+
data = _chartUtils.BaseUtils.formatEmptyName(data, '', _intl.default.get('Empty'));
|
|
38
45
|
if (!Array.isArray(data)) return;
|
|
39
46
|
this.loadData(data);
|
|
40
47
|
this.draw(data);
|
|
@@ -48,7 +55,7 @@ class Compare extends ChartComponent {
|
|
|
48
55
|
globalTheme,
|
|
49
56
|
chartColorTheme
|
|
50
57
|
} = this.props;
|
|
51
|
-
const theme = CHART_THEME_COLOR[globalTheme];
|
|
58
|
+
const theme = _constants.CHART_THEME_COLOR[globalTheme];
|
|
52
59
|
const {
|
|
53
60
|
table_id,
|
|
54
61
|
y_axis_summary_type,
|
|
@@ -59,11 +66,11 @@ class Compare extends ChartComponent {
|
|
|
59
66
|
label_font_size,
|
|
60
67
|
display_increase
|
|
61
68
|
} = chart.config;
|
|
62
|
-
let summaryColumnData = DEFAULT_NUMBER_FORMAT_OBJECT;
|
|
63
|
-
if (y_axis_summary_type === CHART_SUMMARY_TYPE.ADVANCED) {
|
|
64
|
-
const table = getTableById(table_id);
|
|
65
|
-
const summaryColumn = getTableColumnByKey(table, y_axis_column_key) || {};
|
|
66
|
-
summaryColumnData = summaryColumn.data || DEFAULT_NUMBER_FORMAT_OBJECT;
|
|
69
|
+
let summaryColumnData = _constants.DEFAULT_NUMBER_FORMAT_OBJECT;
|
|
70
|
+
if (y_axis_summary_type === _constants.CHART_SUMMARY_TYPE.ADVANCED) {
|
|
71
|
+
const table = (0, _dtableUtils.getTableById)(table_id);
|
|
72
|
+
const summaryColumn = (0, _dtableUtils.getTableColumnByKey)(table, y_axis_column_key) || {};
|
|
73
|
+
summaryColumnData = summaryColumn.data || _constants.DEFAULT_NUMBER_FORMAT_OBJECT;
|
|
67
74
|
}
|
|
68
75
|
|
|
69
76
|
// x axis
|
|
@@ -92,18 +99,18 @@ class Compare extends ChartComponent {
|
|
|
92
99
|
let singleBarWidth, singleBarRadius;
|
|
93
100
|
// y-axis label width:6 + 10
|
|
94
101
|
const chartWidth = this.chart.width - 6 - 10; // 10 is y-axis number width and 6 is gap between number and y axis line
|
|
95
|
-
const maxCountGroup = maxBy(chartData, 'currentGroupCount');
|
|
102
|
+
const maxCountGroup = (0, _lodashEs.maxBy)(chartData, 'currentGroupCount');
|
|
96
103
|
singleBarWidth = Math.round(chartWidth / (2 * chartData.length * maxCountGroup.currentGroupCount));
|
|
97
104
|
singleBarRadius = Math.min(singleBarWidth / 5, 10);
|
|
98
105
|
const interval = this.chart.interval().label(display_data ? 'formatted_value' : false, {
|
|
99
106
|
style: {
|
|
100
|
-
fontSize: BaseUtils.getLabelFontSize(label_font_size),
|
|
107
|
+
fontSize: _chartUtils.BaseUtils.getLabelFontSize(label_font_size),
|
|
101
108
|
fill: theme.textColor,
|
|
102
109
|
...this.labelStroke
|
|
103
110
|
}
|
|
104
|
-
}).position('name*value').color('group_name', BaseUtils.getCurrentTheme(chartColorTheme).colors).tooltip('name*formatted_value*raw_name', (name, value, raw_name) => {
|
|
105
|
-
const nameContent = !raw_name && typeof raw_name !== 'number' ?
|
|
106
|
-
const titleContent = y_axis_summary_type === 'count' ?
|
|
111
|
+
}).position('name*value').color('group_name', _chartUtils.BaseUtils.getCurrentTheme(chartColorTheme).colors).tooltip('name*formatted_value*raw_name', (name, value, raw_name) => {
|
|
112
|
+
const nameContent = !raw_name && typeof raw_name !== 'number' ? _intl.default.get(_constants.EMPTY_NAME) : raw_name;
|
|
113
|
+
const titleContent = y_axis_summary_type === 'count' ? _intl.default.get(_constants.TITLE_AMOUNT) : _intl.default.get(_constants.CHART_SUMMARY_SHOW[y_axis_summary_method]);
|
|
107
114
|
return {
|
|
108
115
|
value,
|
|
109
116
|
title: titleContent,
|
|
@@ -138,8 +145,8 @@ class Compare extends ChartComponent {
|
|
|
138
145
|
};
|
|
139
146
|
});
|
|
140
147
|
interval.tooltip('name*formatted_value*raw_name', (name, value, raw_name) => {
|
|
141
|
-
const nameContent = !raw_name && typeof raw_name !== 'number' ?
|
|
142
|
-
const titleContent = y_axis_summary_type === 'count' ?
|
|
148
|
+
const nameContent = !raw_name && typeof raw_name !== 'number' ? _intl.default.get(_constants.EMPTY_NAME) : raw_name;
|
|
149
|
+
const titleContent = y_axis_summary_type === 'count' ? _intl.default.get(_constants.TITLE_AMOUNT) : _intl.default.get(_constants.CHART_SUMMARY_SHOW[y_axis_summary_method]);
|
|
143
150
|
return {
|
|
144
151
|
value,
|
|
145
152
|
title: titleContent,
|
|
@@ -161,11 +168,11 @@ class Compare extends ChartComponent {
|
|
|
161
168
|
});
|
|
162
169
|
this.point && this.point.tooltip('name*increase_value', (name, value) => {
|
|
163
170
|
return {
|
|
164
|
-
title:
|
|
165
|
-
value: getNumberDisplayString(value || 0, {
|
|
171
|
+
title: _intl.default.get(_constants.TITLE_INCREASE),
|
|
172
|
+
value: (0, _dtableUtils.getNumberDisplayString)(value || 0, {
|
|
166
173
|
format: 'percent'
|
|
167
174
|
}),
|
|
168
|
-
name: !name && typeof name !== 'number' ?
|
|
175
|
+
name: !name && typeof name !== 'number' ? _intl.default.get(_constants.EMPTY_NAME) : name
|
|
169
176
|
};
|
|
170
177
|
});
|
|
171
178
|
interval.tooltip(false);
|
|
@@ -219,11 +226,11 @@ class Compare extends ChartComponent {
|
|
|
219
226
|
}).tooltip(false);
|
|
220
227
|
const point = this.chart.point().label(display_increase_percentage ? 'increase_value' : false, value => {
|
|
221
228
|
return {
|
|
222
|
-
content: getNumberDisplayString(value || 0, {
|
|
229
|
+
content: (0, _dtableUtils.getNumberDisplayString)(value || 0, {
|
|
223
230
|
format: 'percent'
|
|
224
231
|
}),
|
|
225
232
|
style: {
|
|
226
|
-
fontSize: BaseUtils.getLabelFontSize(label_font_size),
|
|
233
|
+
fontSize: _chartUtils.BaseUtils.getLabelFontSize(label_font_size),
|
|
227
234
|
fill: theme.labelColor,
|
|
228
235
|
...this.labelStroke
|
|
229
236
|
}
|
|
@@ -239,14 +246,14 @@ class Compare extends ChartComponent {
|
|
|
239
246
|
fillOpacity: 1
|
|
240
247
|
}).tooltip('name*increase_value', (name, value) => {
|
|
241
248
|
return {
|
|
242
|
-
title:
|
|
243
|
-
value: getNumberDisplayString(value || 0, {
|
|
249
|
+
title: _intl.default.get(_constants.TITLE_INCREASE),
|
|
250
|
+
value: (0, _dtableUtils.getNumberDisplayString)(value || 0, {
|
|
244
251
|
format: 'percent'
|
|
245
252
|
}),
|
|
246
|
-
name: !name && typeof name !== 'number' ?
|
|
253
|
+
name: !name && typeof name !== 'number' ? _intl.default.get(_constants.EMPTY_NAME) : name
|
|
247
254
|
};
|
|
248
255
|
});
|
|
249
|
-
this.chart.on('point:mouseenter', throttle(e => {
|
|
256
|
+
this.chart.on('point:mouseenter', (0, _lodashEs.throttle)(e => {
|
|
250
257
|
if (this.isInsidePoint) return;
|
|
251
258
|
this.isInsidePoint = true;
|
|
252
259
|
point.style('name', name => {
|
|
@@ -262,7 +269,7 @@ class Compare extends ChartComponent {
|
|
|
262
269
|
});
|
|
263
270
|
this.chart.render(true);
|
|
264
271
|
}, 100));
|
|
265
|
-
this.chart.on('point:mouseleave', throttle(e => {
|
|
272
|
+
this.chart.on('point:mouseleave', (0, _lodashEs.throttle)(e => {
|
|
266
273
|
if (!this.isInsidePoint) return;
|
|
267
274
|
this.isInsidePoint = false;
|
|
268
275
|
point.style('name', name => {
|
|
@@ -293,10 +300,10 @@ class Compare extends ChartComponent {
|
|
|
293
300
|
} = chart.config;
|
|
294
301
|
let valueScaleOptions = {
|
|
295
302
|
formatter: value => {
|
|
296
|
-
if (y_axis_summary_method === CHART_SUMMARY_TYPE.DISTINCT_VALUES) {
|
|
303
|
+
if (y_axis_summary_method === _constants.CHART_SUMMARY_TYPE.DISTINCT_VALUES) {
|
|
297
304
|
return value;
|
|
298
305
|
}
|
|
299
|
-
return getNumberDisplayString(value, summaryColumnData);
|
|
306
|
+
return (0, _dtableUtils.getNumberDisplayString)(value, summaryColumnData);
|
|
300
307
|
}
|
|
301
308
|
};
|
|
302
309
|
|
|
@@ -336,7 +343,7 @@ class Compare extends ChartComponent {
|
|
|
336
343
|
}
|
|
337
344
|
componentDidUpdate(prevProps) {
|
|
338
345
|
super.componentDidUpdate(prevProps);
|
|
339
|
-
if (BaseUtils.shouldChartComponentUpdate(prevProps, this.props)) {
|
|
346
|
+
if (_chartUtils.BaseUtils.shouldChartComponentUpdate(prevProps, this.props)) {
|
|
340
347
|
var _this$chart;
|
|
341
348
|
((_this$chart = this.chart) === null || _this$chart === void 0 ? void 0 : _this$chart.autoPadding) && this.chart.destroy();
|
|
342
349
|
this.createChart();
|
|
@@ -352,8 +359,8 @@ class Compare extends ChartComponent {
|
|
|
352
359
|
const {
|
|
353
360
|
chart
|
|
354
361
|
} = this.props;
|
|
355
|
-
return /*#__PURE__*/
|
|
356
|
-
className:
|
|
362
|
+
return /*#__PURE__*/_react.default.createElement("div", {
|
|
363
|
+
className: (0, _classnames.default)('sea-chart-container ', {
|
|
357
364
|
'show-x-axis-label': this.isShowXAxisLabel(chart),
|
|
358
365
|
'show-y-axis-label': this.isShowYAxisLabel(chart)
|
|
359
366
|
}),
|
|
@@ -362,15 +369,15 @@ class Compare extends ChartComponent {
|
|
|
362
369
|
}
|
|
363
370
|
}
|
|
364
371
|
Compare.propTypes = {
|
|
365
|
-
canvasStyle:
|
|
366
|
-
chart:
|
|
367
|
-
groupbyColumn:
|
|
368
|
-
columnGroupbyColumn:
|
|
369
|
-
summaryColumn:
|
|
370
|
-
result:
|
|
371
|
-
tables:
|
|
372
|
-
globalTheme:
|
|
373
|
-
chartColorTheme:
|
|
374
|
-
toggleRecords:
|
|
372
|
+
canvasStyle: _propTypes.default.object,
|
|
373
|
+
chart: _propTypes.default.object,
|
|
374
|
+
groupbyColumn: _propTypes.default.object,
|
|
375
|
+
columnGroupbyColumn: _propTypes.default.object,
|
|
376
|
+
summaryColumn: _propTypes.default.object,
|
|
377
|
+
result: _propTypes.default.array,
|
|
378
|
+
tables: _propTypes.default.array,
|
|
379
|
+
globalTheme: _propTypes.default.string,
|
|
380
|
+
chartColorTheme: _propTypes.default.string,
|
|
381
|
+
toggleRecords: _propTypes.default.func
|
|
375
382
|
};
|
|
376
|
-
|
|
383
|
+
var _default = exports.default = Compare;
|