sea-chart 2.0.42 → 2.0.43
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 +11 -4
- 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 +34 -26
- 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 +11 -4
- 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 +15 -8
- package/dist/components/popover/hide-column-popover/hide-column-popover.js +33 -25
- package/dist/components/popover/sort-popover/sort-popover-widgets/sort-utils.js +18 -9
- package/dist/components/popover/sort-popover/sort-popover.js +64 -54
- 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 +64 -56
- package/dist/components/tooltip/index.js +20 -13
- package/dist/components/types-dialog/index.js +64 -56
- 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 -8
- 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 +19 -12
- 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 +44 -36
- package/dist/settings/advance-bar-settings/index.js +20 -3
- package/dist/settings/advance-bar-settings/style-settings.js +71 -63
- package/dist/settings/bar-settings/data-settings.js +47 -39
- package/dist/settings/bar-settings/index.js +20 -3
- package/dist/settings/bar-settings/style-settings.js +57 -49
- 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 +63 -55
- package/dist/settings/combination-settings/index.js +20 -3
- package/dist/settings/combination-settings/style-settings.js +73 -65
- 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 +28 -20
- 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 +70 -52
- 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 +38 -30
- 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 +63 -55
- package/dist/settings/widgets/chart-type/index.js +26 -18
- package/dist/settings/widgets/color-settings/index.js +80 -72
- package/dist/settings/widgets/common-data-settings.js +29 -21
- package/dist/settings/widgets/data-filter/index.js +43 -35
- 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 +27 -17
- package/dist/utils/cell-value-utils.js +12 -5
- package/dist/utils/chart-utils/base-utils.js +325 -317
- package/dist/utils/chart-utils/index.js +41 -28
- 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 +26 -19
- package/dist/utils/chart-utils/original-data-utils/trend-calculator.js +38 -31
- package/dist/utils/chart-utils/sql-statistics-utils.js +230 -222
- 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 +92 -65
- package/dist/utils/common-utils.js +52 -27
- package/dist/utils/concurrency-manager.js +7 -1
- package/dist/utils/contexts.js +12 -5
- 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 +221 -54
- 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 +176 -164
- 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 +154 -144
- package/dist/utils/sql/index.js +27 -3
- package/dist/utils/trend-utils.js +47 -39
- package/dist/view/index.js +95 -89
- package/dist/view/title/index.js +23 -15
- package/dist/view/wrapper/area-group.js +51 -43
- package/dist/view/wrapper/area.js +49 -41
- package/dist/view/wrapper/bar-compare.js +43 -35
- package/dist/view/wrapper/bar-custom-stack.js +43 -35
- package/dist/view/wrapper/bar-group.js +51 -43
- package/dist/view/wrapper/bar-stack.js +54 -46
- package/dist/view/wrapper/bar.js +47 -39
- package/dist/view/wrapper/basic-number-card.js +26 -18
- package/dist/view/wrapper/chart-component.js +89 -81
- package/dist/view/wrapper/combination.js +59 -51
- package/dist/view/wrapper/completeness-group.js +41 -33
- package/dist/view/wrapper/completeness.js +40 -32
- package/dist/view/wrapper/dashboard.js +35 -27
- package/dist/view/wrapper/funnel.js +42 -34
- package/dist/view/wrapper/heat-map.js +66 -58
- package/dist/view/wrapper/horizontal-bar-group.js +57 -49
- package/dist/view/wrapper/horizontal-bar-stack.js +52 -44
- package/dist/view/wrapper/horizontal-bar.js +47 -39
- package/dist/view/wrapper/index.js +115 -107
- package/dist/view/wrapper/line-group.js +49 -41
- package/dist/view/wrapper/line.js +48 -40
- package/dist/view/wrapper/map-bubble.js +48 -40
- package/dist/view/wrapper/map-world-bubble.js +47 -39
- package/dist/view/wrapper/map-world.js +49 -41
- package/dist/view/wrapper/map.js +50 -42
- package/dist/view/wrapper/mirror.js +45 -37
- package/dist/view/wrapper/pie.js +49 -41
- package/dist/view/wrapper/ring.js +52 -44
- package/dist/view/wrapper/scatter.js +48 -40
- 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 +104 -95
- 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 +15 -7
- 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 +12 -5
- 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 +26 -18
- package/dist/view/wrapper/treemap.js +44 -36
- package/dist/view/wrapper/trend.js +48 -40
- package/package.json +2 -2
|
@@ -1,15 +1,23 @@
|
|
|
1
|
-
|
|
2
|
-
|
|
3
|
-
|
|
4
|
-
|
|
5
|
-
|
|
6
|
-
|
|
7
|
-
|
|
8
|
-
|
|
9
|
-
|
|
10
|
-
|
|
11
|
-
|
|
12
|
-
|
|
1
|
+
"use strict";
|
|
2
|
+
|
|
3
|
+
var _interopRequireWildcard = require("@babel/runtime/helpers/interopRequireWildcard").default;
|
|
4
|
+
var _interopRequireDefault = require("@babel/runtime/helpers/interopRequireDefault").default;
|
|
5
|
+
Object.defineProperty(exports, "__esModule", {
|
|
6
|
+
value: true
|
|
7
|
+
});
|
|
8
|
+
exports.default = void 0;
|
|
9
|
+
var _react = _interopRequireDefault(require("react"));
|
|
10
|
+
var _propTypes = _interopRequireDefault(require("prop-types"));
|
|
11
|
+
var _dtableUtils = require("dtable-utils");
|
|
12
|
+
var _lodashEs = require("lodash-es");
|
|
13
|
+
var d3 = _interopRequireWildcard(require("d3"));
|
|
14
|
+
var _classnames = _interopRequireDefault(require("classnames"));
|
|
15
|
+
var _intl = _interopRequireDefault(require("../../intl"));
|
|
16
|
+
var _constants = require("../../constants");
|
|
17
|
+
var _utils = require("../../utils");
|
|
18
|
+
var _tooltip = _interopRequireDefault(require("../../components/tooltip"));
|
|
19
|
+
var _chartComponent = _interopRequireDefault(require("./chart-component"));
|
|
20
|
+
class Combination extends _chartComponent.default {
|
|
13
21
|
constructor(props) {
|
|
14
22
|
super(props);
|
|
15
23
|
this.handleResize = () => {
|
|
@@ -44,11 +52,11 @@ class Combination extends ChartComponent {
|
|
|
44
52
|
let {
|
|
45
53
|
result: data
|
|
46
54
|
} = this.props;
|
|
47
|
-
data = BaseUtils.formatEmptyName(data, '',
|
|
55
|
+
data = _utils.BaseUtils.formatEmptyName(data, '', _intl.default.get('Empty'));
|
|
48
56
|
if (!Array.isArray(data)) return;
|
|
49
57
|
this.draw(data);
|
|
50
58
|
this.renderAxisLabel(this.props.chart, this.props.tables, this.container);
|
|
51
|
-
isFunction(customRender) && customRender(this.chart);
|
|
59
|
+
(0, _utils.isFunction)(customRender) && customRender(this.chart);
|
|
52
60
|
};
|
|
53
61
|
this.draw = data => {
|
|
54
62
|
const {
|
|
@@ -57,8 +65,8 @@ class Combination extends ChartComponent {
|
|
|
57
65
|
tables,
|
|
58
66
|
chartColorTheme
|
|
59
67
|
} = this.props;
|
|
60
|
-
const theme = CHART_THEME_COLOR[globalTheme];
|
|
61
|
-
const currentTheme = BaseUtils.getCurrentTheme(chartColorTheme);
|
|
68
|
+
const theme = _constants.CHART_THEME_COLOR[globalTheme];
|
|
69
|
+
const currentTheme = _utils.BaseUtils.getCurrentTheme(chartColorTheme);
|
|
62
70
|
const {
|
|
63
71
|
display_goal_line,
|
|
64
72
|
goal_value,
|
|
@@ -88,9 +96,9 @@ class Combination extends ChartComponent {
|
|
|
88
96
|
display_data_field,
|
|
89
97
|
label_font_size
|
|
90
98
|
} = chart.config;
|
|
91
|
-
const table = getTableById(tables, table_id);
|
|
92
|
-
const leftSummaryColumn = getTableColumnByKey(table, y_axis_left_summary_column) || {};
|
|
93
|
-
const rightSummaryColumn = getTableColumnByKey(table, y_axis_right_summary_column) || {};
|
|
99
|
+
const table = (0, _dtableUtils.getTableById)(tables, table_id);
|
|
100
|
+
const leftSummaryColumn = (0, _dtableUtils.getTableColumnByKey)(table, y_axis_left_summary_column) || {};
|
|
101
|
+
const rightSummaryColumn = (0, _dtableUtils.getTableColumnByKey)(table, y_axis_right_summary_column) || {};
|
|
94
102
|
const leftTitle = this.getTitle(tables, table_id, y_axis_left_summary_type, y_axis_left_summary_column);
|
|
95
103
|
const rightTitle = this.getTitle(tables, table_id, y_axis_right_summary_type, y_axis_right_summary_column);
|
|
96
104
|
const showLeftValue = display_data && this.valueFieldMap['value_left'].includes(display_data_field);
|
|
@@ -104,7 +112,7 @@ class Combination extends ChartComponent {
|
|
|
104
112
|
const rightY = d3.scaleLinear().domain(y_axis_auto_range_right ? [d3.min(data, d => d.value_right), rightNiceEnd] : [y_axis_min_right, y_axis_max_right]).range([chartHeight - insertPadding, insertPadding + marginTop]);
|
|
105
113
|
|
|
106
114
|
// Y axis (right)
|
|
107
|
-
const rightAxisWrapper = this.chart.append('g').attr('class', 'y-axis-wrapper-right').attr('transform', `translate(${chartWidth - insertPadding},0)`).call(d3.axisRight(rightY).tickSizeInner(0).ticks(5).tickFormat(d => BaseUtils.getSummaryValueDisplayString(rightSummaryColumn, d, y_axis_right_summary_column))).call(g => {
|
|
115
|
+
const rightAxisWrapper = this.chart.append('g').attr('class', 'y-axis-wrapper-right').attr('transform', `translate(${chartWidth - insertPadding},0)`).call(d3.axisRight(rightY).tickSizeInner(0).ticks(5).tickFormat(d => _utils.BaseUtils.getSummaryValueDisplayString(rightSummaryColumn, d, y_axis_right_summary_column))).call(g => {
|
|
108
116
|
g.select('.domain').remove();
|
|
109
117
|
g.selectAll('text').attr('font-size', theme.fontSize);
|
|
110
118
|
g.selectAll('text').attr('fill', theme.textColor);
|
|
@@ -114,7 +122,7 @@ class Combination extends ChartComponent {
|
|
|
114
122
|
const leftY = d3.scaleLinear().domain(y_axis_auto_range_left ? [0, leftNiceEnd] : [y_axis_min_left, y_axis_max_left]).range([chartHeight - insertPadding, insertPadding + marginTop]);
|
|
115
123
|
|
|
116
124
|
// Y axis (left)
|
|
117
|
-
this.chart.append('g').attr('class', 'y-axis-wrapper-left').attr('transform', `translate(${insertPadding},0)`).call(d3.axisLeft(leftY).tickSizeInner(0).ticks(5).tickFormat(d => BaseUtils.getSummaryValueDisplayString(leftSummaryColumn, d, y_axis_left_summary_method))).call(g => this.drawYaxis(g, theme, rightAxisOffset));
|
|
125
|
+
this.chart.append('g').attr('class', 'y-axis-wrapper-left').attr('transform', `translate(${insertPadding},0)`).call(d3.axisLeft(leftY).tickSizeInner(0).ticks(5).tickFormat(d => _utils.BaseUtils.getSummaryValueDisplayString(leftSummaryColumn, d, y_axis_left_summary_method))).call(g => this.drawYaxis(g, theme, rightAxisOffset));
|
|
118
126
|
const fx = d3.scaleBand().domain(new Set(data.map(d => d.name))).range([insertPadding + this.horizontalOverflowOffset, chartWidth - insertPadding - rightAxisOffset]).paddingInner(0.5).paddingOuter(0.1);
|
|
119
127
|
const x = d3.scaleBand().domain(y_axis_left_group_by_multiple_numeric_column ? new Set(data.map(d => d.group_name)) : new Set([data[0]])).range([0, fx.bandwidth()]).paddingInner(y_axis_left_group_by_multiple_numeric_column ? 0.2 : 0).paddingOuter(0);
|
|
120
128
|
|
|
@@ -146,7 +154,7 @@ class Combination extends ChartComponent {
|
|
|
146
154
|
return currentTheme.colors[0];
|
|
147
155
|
}
|
|
148
156
|
return d.color;
|
|
149
|
-
}).attr('data-value', d => BaseUtils.getSummaryValueDisplayString(leftSummaryColumn, d.value_left, y_axis_left_summary_method)).attr('data-groupName', d => d.name).attr('data-slugid', d => d.slugId).call(g => {
|
|
157
|
+
}).attr('data-value', d => _utils.BaseUtils.getSummaryValueDisplayString(leftSummaryColumn, d.value_left, y_axis_left_summary_method)).attr('data-groupName', d => d.name).attr('data-slugid', d => d.slugId).call(g => {
|
|
150
158
|
g.nodes().forEach(rect => {
|
|
151
159
|
const parentNode = rect.parentNode;
|
|
152
160
|
// add rect borderRadius
|
|
@@ -236,14 +244,14 @@ class Combination extends ChartComponent {
|
|
|
236
244
|
});
|
|
237
245
|
});
|
|
238
246
|
} else {
|
|
239
|
-
if (leftSummaryColumn
|
|
247
|
+
if (leftSummaryColumn !== null && leftSummaryColumn !== void 0 && leftSummaryColumn.name) {
|
|
240
248
|
newData.push({
|
|
241
249
|
group_name: leftSummaryColumn.name
|
|
242
250
|
});
|
|
243
251
|
}
|
|
244
252
|
}
|
|
245
253
|
// right legend item
|
|
246
|
-
if (rightSummaryColumn
|
|
254
|
+
if (rightSummaryColumn !== null && rightSummaryColumn !== void 0 && rightSummaryColumn.name) {
|
|
247
255
|
newData.push({
|
|
248
256
|
group_name: String(rightSummaryColumn.name) + ' '
|
|
249
257
|
}); // Add a space character to avoid merging with the previous left legend
|
|
@@ -258,7 +266,7 @@ class Combination extends ChartComponent {
|
|
|
258
266
|
const {
|
|
259
267
|
y_axis_left_group_by_multiple_numeric_column
|
|
260
268
|
} = chart.config;
|
|
261
|
-
const currentTheme = BaseUtils.getCurrentTheme(chartColorTheme);
|
|
269
|
+
const currentTheme = _utils.BaseUtils.getCurrentTheme(chartColorTheme);
|
|
262
270
|
|
|
263
271
|
// left color map
|
|
264
272
|
if (y_axis_left_group_by_multiple_numeric_column) {
|
|
@@ -284,8 +292,8 @@ class Combination extends ChartComponent {
|
|
|
284
292
|
chartColorTheme,
|
|
285
293
|
globalTheme
|
|
286
294
|
} = this.props;
|
|
287
|
-
const theme = CHART_THEME_COLOR[globalTheme];
|
|
288
|
-
const currentTheme = BaseUtils.getCurrentTheme(chartColorTheme);
|
|
295
|
+
const theme = _constants.CHART_THEME_COLOR[globalTheme];
|
|
296
|
+
const currentTheme = _utils.BaseUtils.getCurrentTheme(chartColorTheme);
|
|
289
297
|
const {
|
|
290
298
|
line_type,
|
|
291
299
|
label_font_size,
|
|
@@ -302,7 +310,7 @@ class Combination extends ChartComponent {
|
|
|
302
310
|
circleData[index]['y'] = y;
|
|
303
311
|
circleData[index]['value'] = d.value_right;
|
|
304
312
|
return y;
|
|
305
|
-
}).curve(line_type === CHART_LINE_TYPES[1] ? d3.curveBumpX : d3.curveLinear);
|
|
313
|
+
}).curve(line_type === _constants.CHART_LINE_TYPES[1] ? d3.curveBumpX : d3.curveLinear);
|
|
306
314
|
const rightContentWrapper = this.chart.append('g').attr('class', 'lines-wrapper');
|
|
307
315
|
|
|
308
316
|
// line
|
|
@@ -314,7 +322,7 @@ class Combination extends ChartComponent {
|
|
|
314
322
|
// circle label
|
|
315
323
|
if (showRightValue) {
|
|
316
324
|
const curCircleEl = g.node();
|
|
317
|
-
rightContentWrapper.append('text').attr('stroke', '#fff').attr('stroke-width', 1).attr('paint-order', 'stroke').attr('fill', theme.labelColor).attr('font-size', BaseUtils.getLabelFontSize(label_font_size)).text(BaseUtils.getSummaryValueDisplayString(rightSummaryColumn, Number(curCircleEl.getAttribute('data-text')), y_axis_right_summary_column)).call(g => {
|
|
325
|
+
rightContentWrapper.append('text').attr('stroke', '#fff').attr('stroke-width', 1).attr('paint-order', 'stroke').attr('fill', theme.labelColor).attr('font-size', _utils.BaseUtils.getLabelFontSize(label_font_size)).text(_utils.BaseUtils.getSummaryValueDisplayString(rightSummaryColumn, Number(curCircleEl.getAttribute('data-text')), y_axis_right_summary_column)).call(g => {
|
|
318
326
|
const {
|
|
319
327
|
width
|
|
320
328
|
} = g.node().getBoundingClientRect();
|
|
@@ -355,28 +363,28 @@ class Combination extends ChartComponent {
|
|
|
355
363
|
y_axis_left_group_by_multiple_numeric_column,
|
|
356
364
|
y_axis_right_summary_method
|
|
357
365
|
} = chart.config;
|
|
358
|
-
const currentTheme = BaseUtils.getCurrentTheme(chartColorTheme);
|
|
366
|
+
const currentTheme = _utils.BaseUtils.getCurrentTheme(chartColorTheme);
|
|
359
367
|
const {
|
|
360
368
|
offsetX,
|
|
361
369
|
offsetY
|
|
362
370
|
} = event;
|
|
363
371
|
const newTooltipData = {};
|
|
364
372
|
if (isCircle) {
|
|
365
|
-
newTooltipData['title'] = !rightTitle && typeof rightTitle !== 'number' ?
|
|
373
|
+
newTooltipData['title'] = !rightTitle && typeof rightTitle !== 'number' ? _intl.default.get(_constants.EMPTY_NAME) : rightTitle;
|
|
366
374
|
newTooltipData['items'] = [{
|
|
367
375
|
color: currentTheme.colors[1],
|
|
368
376
|
name: event.target.getAttribute('data-name'),
|
|
369
|
-
value: BaseUtils.getSummaryValueDisplayString(rightSummaryColumn, Number(event.target.getAttribute('data-text')), y_axis_right_summary_method)
|
|
377
|
+
value: _utils.BaseUtils.getSummaryValueDisplayString(rightSummaryColumn, Number(event.target.getAttribute('data-text')), y_axis_right_summary_method)
|
|
370
378
|
}];
|
|
371
379
|
} else {
|
|
372
380
|
const curGroup = event.target.parentNode;
|
|
373
381
|
const [curGroupName, data] = curGroup.__data__;
|
|
374
|
-
newTooltipData['title'] = !curGroupName && typeof curGroupName !== 'number' ?
|
|
382
|
+
newTooltipData['title'] = !curGroupName && typeof curGroupName !== 'number' ? _intl.default.get(_constants.EMPTY_NAME) : curGroupName;
|
|
375
383
|
newTooltipData['items'] = data.map(item => {
|
|
376
384
|
return {
|
|
377
385
|
color: y_axis_left_group_by_multiple_numeric_column ? this.colorMap[item.group_name] : currentTheme.colors[0],
|
|
378
386
|
name: y_axis_left_group_by_multiple_numeric_column ? item.group_name : leftTitle,
|
|
379
|
-
value: BaseUtils.getSummaryValueDisplayString(leftSummaryColumn, Number(item.value_left), y_axis_left_summary_method)
|
|
387
|
+
value: _utils.BaseUtils.getSummaryValueDisplayString(leftSummaryColumn, Number(item.value_left), y_axis_left_summary_method)
|
|
380
388
|
};
|
|
381
389
|
});
|
|
382
390
|
}
|
|
@@ -444,12 +452,12 @@ class Combination extends ChartComponent {
|
|
|
444
452
|
componentDidMount() {
|
|
445
453
|
this.createChart();
|
|
446
454
|
this.drawChart();
|
|
447
|
-
this.debouncedHandleResize = debounce(this.handleResize, 300);
|
|
455
|
+
this.debouncedHandleResize = (0, _lodashEs.debounce)(this.handleResize, 300);
|
|
448
456
|
window.addEventListener('resize', this.debouncedHandleResize);
|
|
449
457
|
}
|
|
450
458
|
componentDidUpdate(prevProps) {
|
|
451
459
|
super.componentDidUpdate(prevProps);
|
|
452
|
-
if (BaseUtils.shouldChartComponentUpdate(prevProps, this.props)) {
|
|
460
|
+
if (_utils.BaseUtils.shouldChartComponentUpdate(prevProps, this.props)) {
|
|
453
461
|
this.destroyChart();
|
|
454
462
|
this.createChart();
|
|
455
463
|
this.drawChart();
|
|
@@ -467,14 +475,14 @@ class Combination extends ChartComponent {
|
|
|
467
475
|
tooltipData,
|
|
468
476
|
toolTipPosition
|
|
469
477
|
} = this.state;
|
|
470
|
-
return /*#__PURE__*/
|
|
478
|
+
return /*#__PURE__*/_react.default.createElement("div", {
|
|
471
479
|
ref: ref => this.container = ref,
|
|
472
|
-
className:
|
|
480
|
+
className: (0, _classnames.default)('sea-chart-container', {
|
|
473
481
|
'show-x-axis-label': this.isShowXAxisLabel(chart),
|
|
474
482
|
'show-y-axis-left-label': this.isShowYAxisLeftLabel(chart),
|
|
475
483
|
'show-y-axis-right-label': this.isShowYAxisRightLabel(chart)
|
|
476
484
|
})
|
|
477
|
-
}, /*#__PURE__*/
|
|
485
|
+
}, /*#__PURE__*/_react.default.createElement(_tooltip.default, {
|
|
478
486
|
tooltipData: tooltipData,
|
|
479
487
|
toolTipPosition: toolTipPosition,
|
|
480
488
|
chart: this.chart
|
|
@@ -482,16 +490,16 @@ class Combination extends ChartComponent {
|
|
|
482
490
|
}
|
|
483
491
|
}
|
|
484
492
|
Combination.propTypes = {
|
|
485
|
-
canvasStyle:
|
|
486
|
-
chart:
|
|
487
|
-
groupbyColumn:
|
|
488
|
-
columnGroupbyColumn:
|
|
489
|
-
summaryColumn:
|
|
490
|
-
result:
|
|
491
|
-
tables:
|
|
492
|
-
globalTheme:
|
|
493
|
-
chartColorTheme:
|
|
494
|
-
toggleRecords:
|
|
495
|
-
customRender:
|
|
493
|
+
canvasStyle: _propTypes.default.object,
|
|
494
|
+
chart: _propTypes.default.object,
|
|
495
|
+
groupbyColumn: _propTypes.default.object,
|
|
496
|
+
columnGroupbyColumn: _propTypes.default.object,
|
|
497
|
+
summaryColumn: _propTypes.default.object,
|
|
498
|
+
result: _propTypes.default.array,
|
|
499
|
+
tables: _propTypes.default.array,
|
|
500
|
+
globalTheme: _propTypes.default.string,
|
|
501
|
+
chartColorTheme: _propTypes.default.string,
|
|
502
|
+
toggleRecords: _propTypes.default.func,
|
|
503
|
+
customRender: _propTypes.default.func
|
|
496
504
|
};
|
|
497
|
-
|
|
505
|
+
var _default = exports.default = Combination;
|
|
@@ -1,14 +1,22 @@
|
|
|
1
|
-
|
|
2
|
-
|
|
3
|
-
|
|
4
|
-
|
|
5
|
-
|
|
6
|
-
|
|
7
|
-
|
|
8
|
-
|
|
9
|
-
|
|
10
|
-
|
|
11
|
-
|
|
1
|
+
"use strict";
|
|
2
|
+
|
|
3
|
+
var _interopRequireWildcard = require("@babel/runtime/helpers/interopRequireWildcard").default;
|
|
4
|
+
var _interopRequireDefault = require("@babel/runtime/helpers/interopRequireDefault").default;
|
|
5
|
+
Object.defineProperty(exports, "__esModule", {
|
|
6
|
+
value: true
|
|
7
|
+
});
|
|
8
|
+
exports.default = void 0;
|
|
9
|
+
var _react = _interopRequireDefault(require("react"));
|
|
10
|
+
var _propTypes = _interopRequireDefault(require("prop-types"));
|
|
11
|
+
var _lodashEs = require("lodash-es");
|
|
12
|
+
var d3 = _interopRequireWildcard(require("d3"));
|
|
13
|
+
var _classnames = _interopRequireDefault(require("classnames"));
|
|
14
|
+
var _constants = require("../../constants");
|
|
15
|
+
var _utils = require("../../utils");
|
|
16
|
+
var _intl = _interopRequireDefault(require("../../intl"));
|
|
17
|
+
var _tooltip = _interopRequireDefault(require("../../components/tooltip"));
|
|
18
|
+
var _chartComponent = _interopRequireDefault(require("./chart-component"));
|
|
19
|
+
class Completeness extends _chartComponent.default {
|
|
12
20
|
constructor(props) {
|
|
13
21
|
super(props);
|
|
14
22
|
this.handleResize = () => {
|
|
@@ -35,7 +43,7 @@ class Completeness extends ChartComponent {
|
|
|
35
43
|
let {
|
|
36
44
|
result: data
|
|
37
45
|
} = this.props;
|
|
38
|
-
data = BaseUtils.formatEmptyName(data, (_this$props$chart = this.props.chart) === null || _this$props$chart === void 0 ? void 0 : (_this$props$chart$con = _this$props$chart.config) === null || _this$props$chart$con === void 0 ? void 0 : _this$props$chart$con.column_groupby_column_key,
|
|
46
|
+
data = _utils.BaseUtils.formatEmptyName(data, (_this$props$chart = this.props.chart) === null || _this$props$chart === void 0 ? void 0 : (_this$props$chart$con = _this$props$chart.config) === null || _this$props$chart$con === void 0 ? void 0 : _this$props$chart$con.column_groupby_column_key, _intl.default.get('Empty'));
|
|
39
47
|
if (!Array.isArray(data)) return;
|
|
40
48
|
this.draw(data);
|
|
41
49
|
};
|
|
@@ -46,7 +54,7 @@ class Completeness extends ChartComponent {
|
|
|
46
54
|
chartColorTheme,
|
|
47
55
|
columnGroupbyColumn
|
|
48
56
|
} = this.props;
|
|
49
|
-
const theme = CHART_THEME_COLOR[globalTheme];
|
|
57
|
+
const theme = _constants.CHART_THEME_COLOR[globalTheme];
|
|
50
58
|
const {
|
|
51
59
|
y_axis_auto_range,
|
|
52
60
|
y_axis_min,
|
|
@@ -62,7 +70,7 @@ class Completeness extends ChartComponent {
|
|
|
62
70
|
marginRight
|
|
63
71
|
} = this.chartBoundingClientRect;
|
|
64
72
|
this.markLastForCompleteness(data);
|
|
65
|
-
const colors = BaseUtils.getCurrentTheme(chartColorTheme).colors;
|
|
73
|
+
const colors = _utils.BaseUtils.getCurrentTheme(chartColorTheme).colors;
|
|
66
74
|
// Normalize groupby to string before setColorMap to ensure consistent keys
|
|
67
75
|
data.forEach(item => {
|
|
68
76
|
if (Array.isArray(item.groupby)) {
|
|
@@ -233,7 +241,7 @@ class Completeness extends ChartComponent {
|
|
|
233
241
|
title: event.currentTarget.getAttribute('data-tooltipTitle'),
|
|
234
242
|
items: [{
|
|
235
243
|
color: event.currentTarget.getAttribute('data-tooltipName') === 'rest' ? '#bdbdbd' : this.colorMap[groupby],
|
|
236
|
-
name:
|
|
244
|
+
name: _intl.default.get(event.currentTarget.getAttribute('data-tooltipName')),
|
|
237
245
|
value: event.currentTarget.getAttribute('data-value')
|
|
238
246
|
}]
|
|
239
247
|
};
|
|
@@ -271,7 +279,7 @@ class Completeness extends ChartComponent {
|
|
|
271
279
|
});
|
|
272
280
|
};
|
|
273
281
|
this.getGroupSeries = (data, columnGroupbyColumn, chart) => {
|
|
274
|
-
const sortedData = BaseUtils.sortDataByGroupName(cloneDeep(data), 'groupby', columnGroupbyColumn, chart);
|
|
282
|
+
const sortedData = _utils.BaseUtils.sortDataByGroupName((0, _lodashEs.cloneDeep)(data), 'groupby', columnGroupbyColumn, chart);
|
|
275
283
|
sortedData.forEach(item => {
|
|
276
284
|
if (Array.isArray(item.groupby)) {
|
|
277
285
|
item.groupby = item.groupby.join(', ');
|
|
@@ -281,7 +289,7 @@ class Completeness extends ChartComponent {
|
|
|
281
289
|
// Sort main groups by name for stable order
|
|
282
290
|
groups.sort((a, b) => String(a[0]).localeCompare(String(b[0])));
|
|
283
291
|
groups.forEach((item, index) => {
|
|
284
|
-
const itemData = cloneDeep(item[1]);
|
|
292
|
+
const itemData = (0, _lodashEs.cloneDeep)(item[1]);
|
|
285
293
|
const valueMap = d3.rollup(itemData, v => d3.sum(v, d => d.value), d => d.groupby, d => d.group_name);
|
|
286
294
|
const rawDataMap = d3.rollup(itemData, v => v[0], d => d.groupby, d => d.group_name);
|
|
287
295
|
|
|
@@ -398,12 +406,12 @@ class Completeness extends ChartComponent {
|
|
|
398
406
|
super.componentDidMount();
|
|
399
407
|
this.createChart();
|
|
400
408
|
this.drawChart();
|
|
401
|
-
this.debouncedHandleResize = debounce(this.handleResize, 300);
|
|
409
|
+
this.debouncedHandleResize = (0, _lodashEs.debounce)(this.handleResize, 300);
|
|
402
410
|
window.addEventListener('resize', this.debouncedHandleResize);
|
|
403
411
|
}
|
|
404
412
|
componentDidUpdate(prevProps) {
|
|
405
413
|
super.componentDidUpdate(prevProps);
|
|
406
|
-
if (BaseUtils.shouldChartComponentUpdate(prevProps, this.props)) {
|
|
414
|
+
if (_utils.BaseUtils.shouldChartComponentUpdate(prevProps, this.props)) {
|
|
407
415
|
this.destroyChart();
|
|
408
416
|
this.createChart();
|
|
409
417
|
this.drawChart();
|
|
@@ -422,13 +430,13 @@ class Completeness extends ChartComponent {
|
|
|
422
430
|
tooltipData,
|
|
423
431
|
toolTipPosition
|
|
424
432
|
} = this.state;
|
|
425
|
-
return /*#__PURE__*/
|
|
433
|
+
return /*#__PURE__*/_react.default.createElement("div", {
|
|
426
434
|
ref: ref => this.container = ref,
|
|
427
|
-
className:
|
|
435
|
+
className: (0, _classnames.default)('sea-chart-container', {
|
|
428
436
|
'show-x-axis-label': this.isShowHorizontalAxisLabel(chart),
|
|
429
437
|
'show-y-axis-label': this.isShowVerticalAxisLabel(chart)
|
|
430
438
|
})
|
|
431
|
-
}, /*#__PURE__*/
|
|
439
|
+
}, /*#__PURE__*/_react.default.createElement(_tooltip.default, {
|
|
432
440
|
tooltipData: tooltipData,
|
|
433
441
|
toolTipPosition: toolTipPosition,
|
|
434
442
|
chart: this.chart
|
|
@@ -436,15 +444,15 @@ class Completeness extends ChartComponent {
|
|
|
436
444
|
}
|
|
437
445
|
}
|
|
438
446
|
Completeness.propTypes = {
|
|
439
|
-
canvasStyle:
|
|
440
|
-
chart:
|
|
441
|
-
groupbyColumn:
|
|
442
|
-
columnGroupbyColumn:
|
|
443
|
-
summaryColumn:
|
|
444
|
-
result:
|
|
445
|
-
tables:
|
|
446
|
-
globalTheme:
|
|
447
|
-
chartColorTheme:
|
|
448
|
-
toggleRecords:
|
|
447
|
+
canvasStyle: _propTypes.default.object,
|
|
448
|
+
chart: _propTypes.default.object,
|
|
449
|
+
groupbyColumn: _propTypes.default.object,
|
|
450
|
+
columnGroupbyColumn: _propTypes.default.object,
|
|
451
|
+
summaryColumn: _propTypes.default.object,
|
|
452
|
+
result: _propTypes.default.array,
|
|
453
|
+
tables: _propTypes.default.array,
|
|
454
|
+
globalTheme: _propTypes.default.string,
|
|
455
|
+
chartColorTheme: _propTypes.default.string,
|
|
456
|
+
toggleRecords: _propTypes.default.func
|
|
449
457
|
};
|
|
450
|
-
|
|
458
|
+
var _default = exports.default = Completeness;
|
|
@@ -1,14 +1,22 @@
|
|
|
1
|
-
|
|
2
|
-
|
|
3
|
-
|
|
4
|
-
|
|
5
|
-
|
|
6
|
-
|
|
7
|
-
|
|
8
|
-
|
|
9
|
-
|
|
10
|
-
|
|
11
|
-
|
|
1
|
+
"use strict";
|
|
2
|
+
|
|
3
|
+
var _interopRequireWildcard = require("@babel/runtime/helpers/interopRequireWildcard").default;
|
|
4
|
+
var _interopRequireDefault = require("@babel/runtime/helpers/interopRequireDefault").default;
|
|
5
|
+
Object.defineProperty(exports, "__esModule", {
|
|
6
|
+
value: true
|
|
7
|
+
});
|
|
8
|
+
exports.default = void 0;
|
|
9
|
+
var _react = _interopRequireDefault(require("react"));
|
|
10
|
+
var _propTypes = _interopRequireDefault(require("prop-types"));
|
|
11
|
+
var _lodashEs = require("lodash-es");
|
|
12
|
+
var d3 = _interopRequireWildcard(require("d3"));
|
|
13
|
+
var _classnames = _interopRequireDefault(require("classnames"));
|
|
14
|
+
var _constants = require("../../constants");
|
|
15
|
+
var _utils = require("../../utils");
|
|
16
|
+
var _intl = _interopRequireDefault(require("../../intl"));
|
|
17
|
+
var _tooltip = _interopRequireDefault(require("../../components/tooltip"));
|
|
18
|
+
var _chartComponent = _interopRequireDefault(require("./chart-component"));
|
|
19
|
+
class Completeness extends _chartComponent.default {
|
|
12
20
|
constructor(props) {
|
|
13
21
|
super(props);
|
|
14
22
|
this.handleResize = () => {
|
|
@@ -34,7 +42,7 @@ class Completeness extends ChartComponent {
|
|
|
34
42
|
let {
|
|
35
43
|
result: data
|
|
36
44
|
} = this.props;
|
|
37
|
-
data = BaseUtils.formatEmptyName(data, '',
|
|
45
|
+
data = _utils.BaseUtils.formatEmptyName(data, '', _intl.default.get('Empty'));
|
|
38
46
|
if (!Array.isArray(data)) return;
|
|
39
47
|
this.draw(data);
|
|
40
48
|
};
|
|
@@ -44,7 +52,7 @@ class Completeness extends ChartComponent {
|
|
|
44
52
|
globalTheme,
|
|
45
53
|
chartColorTheme
|
|
46
54
|
} = this.props;
|
|
47
|
-
const theme = CHART_THEME_COLOR[globalTheme];
|
|
55
|
+
const theme = _constants.CHART_THEME_COLOR[globalTheme];
|
|
48
56
|
const {
|
|
49
57
|
y_axis_auto_range,
|
|
50
58
|
y_axis_min,
|
|
@@ -58,7 +66,7 @@ class Completeness extends ChartComponent {
|
|
|
58
66
|
insertPadding,
|
|
59
67
|
marginRight
|
|
60
68
|
} = this.chartBoundingClientRect;
|
|
61
|
-
const colors = BaseUtils.getCurrentTheme(chartColorTheme).colors;
|
|
69
|
+
const colors = _utils.BaseUtils.getCurrentTheme(chartColorTheme).colors;
|
|
62
70
|
this.markFirstOrLast(data, 'last');
|
|
63
71
|
const series = d3.stack().keys(d3.union(data.map(d => d.group_name))).value((_ref, key) => {
|
|
64
72
|
var _group$get;
|
|
@@ -171,12 +179,12 @@ class Completeness extends ChartComponent {
|
|
|
171
179
|
const {
|
|
172
180
|
chartColorTheme
|
|
173
181
|
} = this.props;
|
|
174
|
-
const colors = BaseUtils.getCurrentTheme(chartColorTheme).colors;
|
|
182
|
+
const colors = _utils.BaseUtils.getCurrentTheme(chartColorTheme).colors;
|
|
175
183
|
const newTooltipData = {
|
|
176
184
|
title: event.currentTarget.getAttribute('data-tooltipTitle'),
|
|
177
185
|
items: [{
|
|
178
186
|
color: event.currentTarget.getAttribute('data-tooltipTitle') === 'rest' ? '#bdbdbd' : colors[0],
|
|
179
|
-
name:
|
|
187
|
+
name: _intl.default.get(event.currentTarget.getAttribute('data-tooltipName')),
|
|
180
188
|
value: event.currentTarget.getAttribute('data-value')
|
|
181
189
|
}]
|
|
182
190
|
};
|
|
@@ -286,12 +294,12 @@ class Completeness extends ChartComponent {
|
|
|
286
294
|
super.componentDidMount();
|
|
287
295
|
this.createChart();
|
|
288
296
|
this.drawChart();
|
|
289
|
-
this.debouncedHandleResize = debounce(this.handleResize, 300);
|
|
297
|
+
this.debouncedHandleResize = (0, _lodashEs.debounce)(this.handleResize, 300);
|
|
290
298
|
window.addEventListener('resize', this.debouncedHandleResize);
|
|
291
299
|
}
|
|
292
300
|
componentDidUpdate(prevProps) {
|
|
293
301
|
super.componentDidUpdate(prevProps);
|
|
294
|
-
if (BaseUtils.shouldChartComponentUpdate(prevProps, this.props)) {
|
|
302
|
+
if (_utils.BaseUtils.shouldChartComponentUpdate(prevProps, this.props)) {
|
|
295
303
|
this.destroyChart();
|
|
296
304
|
this.createChart();
|
|
297
305
|
this.drawChart();
|
|
@@ -310,13 +318,13 @@ class Completeness extends ChartComponent {
|
|
|
310
318
|
tooltipData,
|
|
311
319
|
toolTipPosition
|
|
312
320
|
} = this.state;
|
|
313
|
-
return /*#__PURE__*/
|
|
321
|
+
return /*#__PURE__*/_react.default.createElement("div", {
|
|
314
322
|
ref: ref => this.container = ref,
|
|
315
|
-
className:
|
|
323
|
+
className: (0, _classnames.default)('sea-chart-container', {
|
|
316
324
|
'show-x-axis-label': this.isShowHorizontalAxisLabel(chart),
|
|
317
325
|
'show-y-axis-label': this.isShowVerticalAxisLabel(chart)
|
|
318
326
|
})
|
|
319
|
-
}, /*#__PURE__*/
|
|
327
|
+
}, /*#__PURE__*/_react.default.createElement(_tooltip.default, {
|
|
320
328
|
tooltipData: tooltipData,
|
|
321
329
|
toolTipPosition: toolTipPosition,
|
|
322
330
|
chart: this.chart
|
|
@@ -324,15 +332,15 @@ class Completeness extends ChartComponent {
|
|
|
324
332
|
}
|
|
325
333
|
}
|
|
326
334
|
Completeness.propTypes = {
|
|
327
|
-
canvasStyle:
|
|
328
|
-
chart:
|
|
329
|
-
groupbyColumn:
|
|
330
|
-
columnGroupbyColumn:
|
|
331
|
-
summaryColumn:
|
|
332
|
-
result:
|
|
333
|
-
tables:
|
|
334
|
-
globalTheme:
|
|
335
|
-
chartColorTheme:
|
|
336
|
-
toggleRecords:
|
|
335
|
+
canvasStyle: _propTypes.default.object,
|
|
336
|
+
chart: _propTypes.default.object,
|
|
337
|
+
groupbyColumn: _propTypes.default.object,
|
|
338
|
+
columnGroupbyColumn: _propTypes.default.object,
|
|
339
|
+
summaryColumn: _propTypes.default.object,
|
|
340
|
+
result: _propTypes.default.array,
|
|
341
|
+
tables: _propTypes.default.array,
|
|
342
|
+
globalTheme: _propTypes.default.string,
|
|
343
|
+
chartColorTheme: _propTypes.default.string,
|
|
344
|
+
toggleRecords: _propTypes.default.func
|
|
337
345
|
};
|
|
338
|
-
|
|
346
|
+
var _default = exports.default = Completeness;
|
|
@@ -1,12 +1,20 @@
|
|
|
1
|
-
|
|
2
|
-
|
|
3
|
-
|
|
4
|
-
|
|
5
|
-
|
|
6
|
-
|
|
7
|
-
|
|
8
|
-
|
|
9
|
-
|
|
1
|
+
"use strict";
|
|
2
|
+
|
|
3
|
+
var _interopRequireWildcard = require("@babel/runtime/helpers/interopRequireWildcard").default;
|
|
4
|
+
var _interopRequireDefault = require("@babel/runtime/helpers/interopRequireDefault").default;
|
|
5
|
+
Object.defineProperty(exports, "__esModule", {
|
|
6
|
+
value: true
|
|
7
|
+
});
|
|
8
|
+
exports.default = void 0;
|
|
9
|
+
var _react = _interopRequireDefault(require("react"));
|
|
10
|
+
var _propTypes = _interopRequireDefault(require("prop-types"));
|
|
11
|
+
var _lodashEs = require("lodash-es");
|
|
12
|
+
var d3 = _interopRequireWildcard(require("d3"));
|
|
13
|
+
var _constants = require("../../constants");
|
|
14
|
+
var _utils = require("../../utils");
|
|
15
|
+
var _tooltip = _interopRequireDefault(require("../../components/tooltip"));
|
|
16
|
+
var _chartComponent = _interopRequireDefault(require("./chart-component"));
|
|
17
|
+
class Dashboard extends _chartComponent.default {
|
|
10
18
|
constructor(props) {
|
|
11
19
|
super(props);
|
|
12
20
|
this.handleClickNumber = () => {
|
|
@@ -28,7 +36,7 @@ class Dashboard extends ChartComponent {
|
|
|
28
36
|
this.componentDidMount = () => {
|
|
29
37
|
this.createChart();
|
|
30
38
|
this.drawChart();
|
|
31
|
-
this.debouncedHandleResize = debounce(this.handleResize, 300);
|
|
39
|
+
this.debouncedHandleResize = (0, _lodashEs.debounce)(this.handleResize, 300);
|
|
32
40
|
window.addEventListener('resize', this.debouncedHandleResize);
|
|
33
41
|
};
|
|
34
42
|
this.handleResize = () => {
|
|
@@ -51,7 +59,7 @@ class Dashboard extends ChartComponent {
|
|
|
51
59
|
customRender
|
|
52
60
|
} = this.props;
|
|
53
61
|
this.draw(data);
|
|
54
|
-
isFunction(customRender) && customRender(this.chart);
|
|
62
|
+
(0, _utils.isFunction)(customRender) && customRender(this.chart);
|
|
55
63
|
};
|
|
56
64
|
this.draw = data => {
|
|
57
65
|
const {
|
|
@@ -103,7 +111,7 @@ class Dashboard extends ChartComponent {
|
|
|
103
111
|
const {
|
|
104
112
|
globalTheme
|
|
105
113
|
} = this.props;
|
|
106
|
-
const theme = CHART_THEME_COLOR[globalTheme];
|
|
114
|
+
const theme = _constants.CHART_THEME_COLOR[globalTheme];
|
|
107
115
|
const ticks = Array.from({
|
|
108
116
|
length: 51
|
|
109
117
|
}, (_, i) => i);
|
|
@@ -165,7 +173,7 @@ class Dashboard extends ChartComponent {
|
|
|
165
173
|
const {
|
|
166
174
|
name
|
|
167
175
|
} = chart.config;
|
|
168
|
-
const theme = CHART_THEME_COLOR[globalTheme];
|
|
176
|
+
const theme = _constants.CHART_THEME_COLOR[globalTheme];
|
|
169
177
|
const {
|
|
170
178
|
height: chartHeight
|
|
171
179
|
} = this.chartBoundingClientRect;
|
|
@@ -228,7 +236,7 @@ class Dashboard extends ChartComponent {
|
|
|
228
236
|
}
|
|
229
237
|
componentDidUpdate(prevProps) {
|
|
230
238
|
super.componentDidUpdate(prevProps);
|
|
231
|
-
if (BaseUtils.shouldChartComponentUpdate(prevProps, this.props)) {
|
|
239
|
+
if (_utils.BaseUtils.shouldChartComponentUpdate(prevProps, this.props)) {
|
|
232
240
|
this.destroyChart();
|
|
233
241
|
this.createChart();
|
|
234
242
|
this.drawChart();
|
|
@@ -243,10 +251,10 @@ class Dashboard extends ChartComponent {
|
|
|
243
251
|
tooltipData,
|
|
244
252
|
toolTipPosition
|
|
245
253
|
} = this.state;
|
|
246
|
-
return /*#__PURE__*/
|
|
254
|
+
return /*#__PURE__*/_react.default.createElement("div", {
|
|
247
255
|
ref: ref => this.container = ref,
|
|
248
256
|
className: "sea-chart-container"
|
|
249
|
-
}, /*#__PURE__*/
|
|
257
|
+
}, /*#__PURE__*/_react.default.createElement(_tooltip.default, {
|
|
250
258
|
tooltipData: tooltipData,
|
|
251
259
|
toolTipPosition: toolTipPosition,
|
|
252
260
|
chart: this.chart
|
|
@@ -254,15 +262,15 @@ class Dashboard extends ChartComponent {
|
|
|
254
262
|
}
|
|
255
263
|
}
|
|
256
264
|
Dashboard.propTypes = {
|
|
257
|
-
canvasStyle:
|
|
258
|
-
chart:
|
|
259
|
-
groupbyColumn:
|
|
260
|
-
summaryColumn:
|
|
261
|
-
result:
|
|
262
|
-
tables:
|
|
263
|
-
globalTheme:
|
|
264
|
-
chartColorTheme:
|
|
265
|
-
toggleRecords:
|
|
266
|
-
customRender:
|
|
265
|
+
canvasStyle: _propTypes.default.object,
|
|
266
|
+
chart: _propTypes.default.object,
|
|
267
|
+
groupbyColumn: _propTypes.default.object,
|
|
268
|
+
summaryColumn: _propTypes.default.object,
|
|
269
|
+
result: _propTypes.default.oneOfType([_propTypes.default.number, _propTypes.default.object]),
|
|
270
|
+
tables: _propTypes.default.array,
|
|
271
|
+
globalTheme: _propTypes.default.string,
|
|
272
|
+
chartColorTheme: _propTypes.default.string,
|
|
273
|
+
toggleRecords: _propTypes.default.func,
|
|
274
|
+
customRender: _propTypes.default.func
|
|
267
275
|
};
|
|
268
|
-
|
|
276
|
+
var _default = exports.default = Dashboard;
|