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,18 +1,26 @@
|
|
|
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 _lodashEs = require("lodash-es");
|
|
12
|
+
var d3 = _interopRequireWildcard(require("d3"));
|
|
13
|
+
var _slugid = _interopRequireDefault(require("slugid"));
|
|
14
|
+
var _classnames = _interopRequireDefault(require("classnames"));
|
|
15
|
+
var _intl = _interopRequireDefault(require("../../intl"));
|
|
16
|
+
var _chartUtils = require("../../utils/chart-utils");
|
|
17
|
+
var _constants = require("../../constants");
|
|
18
|
+
var _tooltip = _interopRequireDefault(require("../../components/tooltip"));
|
|
19
|
+
var _chartComponent = _interopRequireDefault(require("./chart-component"));
|
|
20
|
+
class BarCustom extends _chartComponent.default {
|
|
13
21
|
constructor(props) {
|
|
14
22
|
super(props);
|
|
15
|
-
this.handleResize = debounce(() => {
|
|
23
|
+
this.handleResize = (0, _lodashEs.debounce)(() => {
|
|
16
24
|
this.destroyChart();
|
|
17
25
|
this.createChart();
|
|
18
26
|
this.drawChart();
|
|
@@ -37,7 +45,7 @@ class BarCustom extends ChartComponent {
|
|
|
37
45
|
let {
|
|
38
46
|
result: data
|
|
39
47
|
} = this.props;
|
|
40
|
-
data = BaseUtils.formatEmptyName(data, '',
|
|
48
|
+
data = _chartUtils.BaseUtils.formatEmptyName(data, '', _intl.default.get('Empty'));
|
|
41
49
|
if (!Array.isArray(data)) return;
|
|
42
50
|
this.draw(data);
|
|
43
51
|
this.renderAxisLabel(this.props.chart, this.props.tables, this.container);
|
|
@@ -98,7 +106,7 @@ class BarCustom extends ChartComponent {
|
|
|
98
106
|
key: itemKey,
|
|
99
107
|
value,
|
|
100
108
|
series,
|
|
101
|
-
slugid:
|
|
109
|
+
slugid: _slugid.default.nice()
|
|
102
110
|
});
|
|
103
111
|
});
|
|
104
112
|
stacksData.push({
|
|
@@ -125,7 +133,7 @@ class BarCustom extends ChartComponent {
|
|
|
125
133
|
globalTheme,
|
|
126
134
|
chartColorTheme
|
|
127
135
|
} = this.props;
|
|
128
|
-
const theme = CHART_THEME_COLOR[globalTheme];
|
|
136
|
+
const theme = _constants.CHART_THEME_COLOR[globalTheme];
|
|
129
137
|
const {
|
|
130
138
|
display_each_block_data
|
|
131
139
|
} = chart.config;
|
|
@@ -140,7 +148,7 @@ class BarCustom extends ChartComponent {
|
|
|
140
148
|
insertPadding
|
|
141
149
|
} = this.chartBoundingClientRect;
|
|
142
150
|
const organizedData = this.organizeData(data);
|
|
143
|
-
const color = d3.scaleOrdinal().domain(d3.group(data, d => d.group_name).keys()).range(BaseUtils.getCurrentTheme(chartColorTheme).colors).unknown('#ccc');
|
|
151
|
+
const color = d3.scaleOrdinal().domain(d3.group(data, d => d.group_name).keys()).range(_chartUtils.BaseUtils.getCurrentTheme(chartColorTheme).colors).unknown('#ccc');
|
|
144
152
|
const allSeries = this.getAllSeries(organizedData);
|
|
145
153
|
const niceEnd = d3.nice(0, d3.max(allSeries, d => d[1]), 5)[1];
|
|
146
154
|
const y = d3.scaleLinear().domain([0, niceEnd]).range([chartHeight - insertPadding, insertPadding]);
|
|
@@ -238,7 +246,7 @@ class BarCustom extends ChartComponent {
|
|
|
238
246
|
const {
|
|
239
247
|
label_font_size
|
|
240
248
|
} = chart.config;
|
|
241
|
-
const theme = CHART_THEME_COLOR[globalTheme];
|
|
249
|
+
const theme = _constants.CHART_THEME_COLOR[globalTheme];
|
|
242
250
|
Array.from(g._parents).forEach(group => {
|
|
243
251
|
Array.from(group.children).forEach(rect => {
|
|
244
252
|
// The height is 0, and the label is not displayed.
|
|
@@ -325,10 +333,10 @@ class BarCustom extends ChartComponent {
|
|
|
325
333
|
const name = event.currentTarget.getAttribute('data-groupName');
|
|
326
334
|
const value = event.currentTarget.getAttribute('data-value');
|
|
327
335
|
const newTooltipData = {
|
|
328
|
-
title: !title && typeof title !== 'number' ?
|
|
336
|
+
title: !title && typeof title !== 'number' ? _intl.default.get(_constants.EMPTY_NAME) : title,
|
|
329
337
|
items: [{
|
|
330
338
|
color: colorScale(name),
|
|
331
|
-
name: !name && typeof name !== 'number' ?
|
|
339
|
+
name: !name && typeof name !== 'number' ? _intl.default.get(_constants.EMPTY_NAME) : name,
|
|
332
340
|
value
|
|
333
341
|
}]
|
|
334
342
|
};
|
|
@@ -378,7 +386,7 @@ class BarCustom extends ChartComponent {
|
|
|
378
386
|
}
|
|
379
387
|
componentDidUpdate(prevProps) {
|
|
380
388
|
super.componentDidUpdate(prevProps);
|
|
381
|
-
if (BaseUtils.shouldChartComponentUpdate(prevProps, this.props)) {
|
|
389
|
+
if (_chartUtils.BaseUtils.shouldChartComponentUpdate(prevProps, this.props)) {
|
|
382
390
|
this.destroyChart();
|
|
383
391
|
this.createChart();
|
|
384
392
|
this.drawChart();
|
|
@@ -396,13 +404,13 @@ class BarCustom extends ChartComponent {
|
|
|
396
404
|
tooltipData,
|
|
397
405
|
toolTipPosition
|
|
398
406
|
} = this.state;
|
|
399
|
-
return /*#__PURE__*/
|
|
407
|
+
return /*#__PURE__*/_react.default.createElement("div", {
|
|
400
408
|
ref: ref => this.container = ref,
|
|
401
|
-
className:
|
|
409
|
+
className: (0, _classnames.default)('sea-chart-container', {
|
|
402
410
|
'show-x-axis-label': this.isShowXAxisLabel(chart),
|
|
403
411
|
'show-y-axis-label': this.isShowYAxisLabel(chart)
|
|
404
412
|
})
|
|
405
|
-
}, /*#__PURE__*/
|
|
413
|
+
}, /*#__PURE__*/_react.default.createElement(_tooltip.default, {
|
|
406
414
|
tooltipData: tooltipData,
|
|
407
415
|
toolTipPosition: toolTipPosition,
|
|
408
416
|
chart: this.chart
|
|
@@ -410,15 +418,15 @@ class BarCustom extends ChartComponent {
|
|
|
410
418
|
}
|
|
411
419
|
}
|
|
412
420
|
BarCustom.propTypes = {
|
|
413
|
-
canvasStyle:
|
|
414
|
-
chart:
|
|
415
|
-
groupbyColumn:
|
|
416
|
-
columnGroupbyColumn:
|
|
417
|
-
summaryColumn:
|
|
418
|
-
result:
|
|
419
|
-
tables:
|
|
420
|
-
globalTheme:
|
|
421
|
-
chartColorTheme:
|
|
422
|
-
toggleRecords:
|
|
421
|
+
canvasStyle: _propTypes.default.object,
|
|
422
|
+
chart: _propTypes.default.object,
|
|
423
|
+
groupbyColumn: _propTypes.default.object,
|
|
424
|
+
columnGroupbyColumn: _propTypes.default.object,
|
|
425
|
+
summaryColumn: _propTypes.default.object,
|
|
426
|
+
result: _propTypes.default.array,
|
|
427
|
+
tables: _propTypes.default.array,
|
|
428
|
+
globalTheme: _propTypes.default.string,
|
|
429
|
+
chartColorTheme: _propTypes.default.string,
|
|
430
|
+
toggleRecords: _propTypes.default.func
|
|
423
431
|
};
|
|
424
|
-
|
|
432
|
+
var _default = exports.default = BarCustom;
|
|
@@ -1,17 +1,25 @@
|
|
|
1
|
-
|
|
2
|
-
|
|
3
|
-
|
|
4
|
-
|
|
5
|
-
|
|
6
|
-
|
|
7
|
-
|
|
8
|
-
|
|
9
|
-
|
|
10
|
-
|
|
11
|
-
|
|
12
|
-
|
|
13
|
-
|
|
14
|
-
|
|
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 _dayjs = _interopRequireDefault(require("dayjs"));
|
|
16
|
+
var _intl = _interopRequireDefault(require("../../intl"));
|
|
17
|
+
var _constants = require("../../constants");
|
|
18
|
+
var _utils = require("../../utils");
|
|
19
|
+
var _colorRules = require("../../constants/color-rules");
|
|
20
|
+
var _tooltip = _interopRequireDefault(require("../../components/tooltip"));
|
|
21
|
+
var _chartComponent = _interopRequireDefault(require("./chart-component"));
|
|
22
|
+
class BarGroup extends _chartComponent.default {
|
|
15
23
|
constructor(props) {
|
|
16
24
|
super(props);
|
|
17
25
|
this.handleResize = () => {
|
|
@@ -48,11 +56,11 @@ class BarGroup extends ChartComponent {
|
|
|
48
56
|
const {
|
|
49
57
|
column_groupby_column_key
|
|
50
58
|
} = chart.config || {};
|
|
51
|
-
data = BaseUtils.formatEmptyName(data, column_groupby_column_key,
|
|
59
|
+
data = _utils.BaseUtils.formatEmptyName(data, column_groupby_column_key, _intl.default.get(_constants.EMPTY_NAME));
|
|
52
60
|
if (!Array.isArray(data)) return;
|
|
53
61
|
this.draw(data);
|
|
54
62
|
this.renderAxisLabel(this.props.chart, this.props.tables, this.container);
|
|
55
|
-
isFunction(customRender) && customRender(this.chart);
|
|
63
|
+
(0, _utils.isFunction)(customRender) && customRender(this.chart);
|
|
56
64
|
};
|
|
57
65
|
this.draw = data => {
|
|
58
66
|
const {
|
|
@@ -85,17 +93,17 @@ class BarGroup extends ChartComponent {
|
|
|
85
93
|
y_axis_min,
|
|
86
94
|
y_axis_auto_range
|
|
87
95
|
} = chart.config;
|
|
88
|
-
const theme = CHART_THEME_COLOR[globalTheme];
|
|
96
|
+
const theme = _constants.CHART_THEME_COLOR[globalTheme];
|
|
89
97
|
const column_groupby_column = this.getColumn(tables, table_id, column_groupby_column_key);
|
|
90
|
-
const useSingleSelectColumnColor = (column_groupby_column === null || column_groupby_column === void 0 ? void 0 : column_groupby_column.type) === CellType.SINGLE_SELECT && color_theme === SUPPORT_SINGLE_SELECT_THEMES_OPTIONS.SINGLE_SELECT_COLUMN_COLORS;
|
|
98
|
+
const useSingleSelectColumnColor = (column_groupby_column === null || column_groupby_column === void 0 ? void 0 : column_groupby_column.type) === _dtableUtils.CellType.SINGLE_SELECT && color_theme === _colorRules.SUPPORT_SINGLE_SELECT_THEMES_OPTIONS.SINGLE_SELECT_COLUMN_COLORS;
|
|
91
99
|
useSingleSelectColumnColor ? this.setSingleSelectColorMap(data) : this.setColorMap(data, chartColorTheme, 'group_name', columnGroupbyColumn, chart); // use single select column color
|
|
92
100
|
|
|
93
101
|
const y = d3.scaleLinear().domain(y_axis_auto_range ? [0, d3.max(data, d => d.value)] : [y_axis_min, y_axis_max]).range([chartHeight - insertPadding, insertPadding + marginTop]);
|
|
94
102
|
|
|
95
103
|
// Y axis
|
|
96
|
-
this.chart.append('g').attr('class', 'y-axis-wrapper').attr('transform', `translate(${insertPadding},0)`).call(d3.axisLeft(y).tickSizeInner(0).ticks(5).tickFormat(d => BaseUtils.getSummaryValueDisplayString(summaryColumn, d, y_axis_summary_method))).call(g => this.drawYaxis(g, theme));
|
|
104
|
+
this.chart.append('g').attr('class', 'y-axis-wrapper').attr('transform', `translate(${insertPadding},0)`).call(d3.axisLeft(y).tickSizeInner(0).ticks(5).tickFormat(d => _utils.BaseUtils.getSummaryValueDisplayString(summaryColumn, d, y_axis_summary_method))).call(g => this.drawYaxis(g, theme));
|
|
97
105
|
const fx = d3.scaleBand().domain(new Set(data.map(d => d.name))).range([insertPadding + this.horizontalOverflowOffset, chartWidth - insertPadding]).paddingInner(0.25).paddingOuter(0.1);
|
|
98
|
-
const sortedData = BaseUtils.sortDataByGroupName(cloneDeep(data), 'group_name', columnGroupbyColumn, chart);
|
|
106
|
+
const sortedData = _utils.BaseUtils.sortDataByGroupName((0, _lodashEs.cloneDeep)(data), 'group_name', columnGroupbyColumn, chart);
|
|
99
107
|
|
|
100
108
|
// X axis
|
|
101
109
|
this.chart.append('g').attr('class', 'x-axis-wrapper').attr('transform', `translate(0,${chartHeight - insertPadding})`).call(d3.axisBottom(fx).tickSizeOuter(0).tickSizeInner(5)).call(g => {
|
|
@@ -120,7 +128,7 @@ class BarGroup extends ChartComponent {
|
|
|
120
128
|
const rectSelection = d3.select(groupNode).selectAll('rect').data(dum).join('rect').attr('opacity', 1).attr('x', d => localX(d.group_name)).attr('y', d => y(d.value)).attr('width', localX.bandwidth()).attr('height', d => y(0) - y(d.value)).attr('fill', d => {
|
|
121
129
|
var _this$colorMap$colorK;
|
|
122
130
|
const colorKey = d.group_name || d.group_name === 0 ? d.group_name : '';
|
|
123
|
-
return (_this$colorMap$colorK = this.colorMap[colorKey]) !== null && _this$colorMap$colorK !== void 0 ? _this$colorMap$colorK : CHART_STYLE_COLORS[0];
|
|
131
|
+
return (_this$colorMap$colorK = this.colorMap[colorKey]) !== null && _this$colorMap$colorK !== void 0 ? _this$colorMap$colorK : _constants.CHART_STYLE_COLORS[0];
|
|
124
132
|
}).attr('data-value', d => d.value).attr('data-groupName', d => d.name).attr('data-slugid', d => d.slugId);
|
|
125
133
|
const {
|
|
126
134
|
borderRadius
|
|
@@ -160,7 +168,7 @@ class BarGroup extends ChartComponent {
|
|
|
160
168
|
y: Number(rect.getAttribute('y')),
|
|
161
169
|
theme,
|
|
162
170
|
label_font_size,
|
|
163
|
-
text: BaseUtils.getSummaryValueDisplayString(summaryColumn, Number(rect.dataset.value), y_axis_summary_method)
|
|
171
|
+
text: _utils.BaseUtils.getSummaryValueDisplayString(summaryColumn, Number(rect.dataset.value), y_axis_summary_method)
|
|
164
172
|
});
|
|
165
173
|
}
|
|
166
174
|
});
|
|
@@ -197,7 +205,7 @@ class BarGroup extends ChartComponent {
|
|
|
197
205
|
const {
|
|
198
206
|
y_axis_summary_method
|
|
199
207
|
} = chart.config;
|
|
200
|
-
const isGroupByDate = [CellType.DATE, CellType.CTIME, CellType.MTIME].includes((_this$props$columnGro = this.props.columnGroupbyColumn) === null || _this$props$columnGro === void 0 ? void 0 : _this$props$columnGro.type);
|
|
208
|
+
const isGroupByDate = [_dtableUtils.CellType.DATE, _dtableUtils.CellType.CTIME, _dtableUtils.CellType.MTIME].includes((_this$props$columnGro = this.props.columnGroupbyColumn) === null || _this$props$columnGro === void 0 ? void 0 : _this$props$columnGro.type);
|
|
201
209
|
const {
|
|
202
210
|
offsetX,
|
|
203
211
|
offsetY
|
|
@@ -205,14 +213,14 @@ class BarGroup extends ChartComponent {
|
|
|
205
213
|
const curGroup = event.target.parentNode;
|
|
206
214
|
let [curGroupName, data] = curGroup.__data__;
|
|
207
215
|
const newTooltipData = {
|
|
208
|
-
title: !curGroupName && typeof curGroupName !== 'number' ?
|
|
216
|
+
title: !curGroupName && typeof curGroupName !== 'number' ? _intl.default.get(_constants.EMPTY_NAME) : curGroupName,
|
|
209
217
|
items: data.map(item => {
|
|
210
218
|
const rawGroupName = item.group_name;
|
|
211
|
-
const groupName = rawGroupName === null || rawGroupName === undefined || rawGroupName === '' ?
|
|
219
|
+
const groupName = rawGroupName === null || rawGroupName === undefined || rawGroupName === '' ? _intl.default.get(_constants.EMPTY_NAME) : isGroupByDate ? (0, _dayjs.default)(rawGroupName).format('YYYY-MM-DD') : rawGroupName;
|
|
212
220
|
return {
|
|
213
221
|
color: this.colorMap[groupName],
|
|
214
222
|
name: groupName,
|
|
215
|
-
value: BaseUtils.getSummaryValueDisplayString(summaryColumn, Number(item.value), y_axis_summary_method)
|
|
223
|
+
value: _utils.BaseUtils.getSummaryValueDisplayString(summaryColumn, Number(item.value), y_axis_summary_method)
|
|
216
224
|
};
|
|
217
225
|
})
|
|
218
226
|
};
|
|
@@ -258,12 +266,12 @@ class BarGroup extends ChartComponent {
|
|
|
258
266
|
componentDidMount() {
|
|
259
267
|
this.createChart();
|
|
260
268
|
this.drawChart();
|
|
261
|
-
this.debouncedHandleResize = debounce(this.handleResize, 300);
|
|
269
|
+
this.debouncedHandleResize = (0, _lodashEs.debounce)(this.handleResize, 300);
|
|
262
270
|
window.addEventListener('resize', this.debouncedHandleResize);
|
|
263
271
|
}
|
|
264
272
|
componentDidUpdate(prevProps) {
|
|
265
273
|
super.componentDidUpdate(prevProps);
|
|
266
|
-
if (BaseUtils.shouldChartComponentUpdate(prevProps, this.props)) {
|
|
274
|
+
if (_utils.BaseUtils.shouldChartComponentUpdate(prevProps, this.props)) {
|
|
267
275
|
this.destroyChart();
|
|
268
276
|
this.createChart();
|
|
269
277
|
this.drawChart();
|
|
@@ -281,13 +289,13 @@ class BarGroup extends ChartComponent {
|
|
|
281
289
|
tooltipData,
|
|
282
290
|
toolTipPosition
|
|
283
291
|
} = this.state;
|
|
284
|
-
return /*#__PURE__*/
|
|
292
|
+
return /*#__PURE__*/_react.default.createElement("div", {
|
|
285
293
|
ref: ref => this.container = ref,
|
|
286
|
-
className:
|
|
294
|
+
className: (0, _classnames.default)('sea-chart-container', {
|
|
287
295
|
'show-x-axis-label': this.isShowXAxisLabel(chart),
|
|
288
296
|
'show-y-axis-label': this.isShowYAxisLabel(chart)
|
|
289
297
|
})
|
|
290
|
-
}, /*#__PURE__*/
|
|
298
|
+
}, /*#__PURE__*/_react.default.createElement(_tooltip.default, {
|
|
291
299
|
tooltipData: tooltipData,
|
|
292
300
|
toolTipPosition: toolTipPosition,
|
|
293
301
|
chart: this.chart
|
|
@@ -295,16 +303,16 @@ class BarGroup extends ChartComponent {
|
|
|
295
303
|
}
|
|
296
304
|
}
|
|
297
305
|
BarGroup.propTypes = {
|
|
298
|
-
canvasStyle:
|
|
299
|
-
chart:
|
|
300
|
-
groupbyColumn:
|
|
301
|
-
columnGroupbyColumn:
|
|
302
|
-
summaryColumn:
|
|
303
|
-
result:
|
|
304
|
-
tables:
|
|
305
|
-
globalTheme:
|
|
306
|
-
chartColorTheme:
|
|
307
|
-
toggleRecords:
|
|
308
|
-
customRender:
|
|
306
|
+
canvasStyle: _propTypes.default.object,
|
|
307
|
+
chart: _propTypes.default.object,
|
|
308
|
+
groupbyColumn: _propTypes.default.object,
|
|
309
|
+
columnGroupbyColumn: _propTypes.default.object,
|
|
310
|
+
summaryColumn: _propTypes.default.object,
|
|
311
|
+
result: _propTypes.default.array,
|
|
312
|
+
tables: _propTypes.default.array,
|
|
313
|
+
globalTheme: _propTypes.default.string,
|
|
314
|
+
chartColorTheme: _propTypes.default.string,
|
|
315
|
+
toggleRecords: _propTypes.default.func,
|
|
316
|
+
customRender: _propTypes.default.func
|
|
309
317
|
};
|
|
310
|
-
|
|
318
|
+
var _default = exports.default = BarGroup;
|
|
@@ -1,17 +1,25 @@
|
|
|
1
|
-
|
|
2
|
-
|
|
3
|
-
|
|
4
|
-
|
|
5
|
-
|
|
6
|
-
|
|
7
|
-
|
|
8
|
-
|
|
9
|
-
|
|
10
|
-
|
|
11
|
-
|
|
12
|
-
|
|
13
|
-
|
|
14
|
-
|
|
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 _columnUtils = require("../../utils/column-utils");
|
|
17
|
+
var _constants = require("../../constants");
|
|
18
|
+
var _utils = require("../../utils");
|
|
19
|
+
var _colorRules = require("../../constants/color-rules");
|
|
20
|
+
var _tooltip = _interopRequireDefault(require("../../components/tooltip"));
|
|
21
|
+
var _chartComponent = _interopRequireDefault(require("./chart-component"));
|
|
22
|
+
class BarStack extends _chartComponent.default {
|
|
15
23
|
constructor(props) {
|
|
16
24
|
super(props);
|
|
17
25
|
this.handleResize = () => {
|
|
@@ -48,12 +56,12 @@ class BarStack extends ChartComponent {
|
|
|
48
56
|
let {
|
|
49
57
|
result: data
|
|
50
58
|
} = this.props;
|
|
51
|
-
data = BaseUtils.formatEmptyName(data, chart.config.column_groupby_column_key,
|
|
59
|
+
data = _utils.BaseUtils.formatEmptyName(data, chart.config.column_groupby_column_key, _intl.default.get('Empty'));
|
|
52
60
|
if (!Array.isArray(data)) return;
|
|
53
|
-
sort_type && (data = sortDataByGroupSum(data, sort_type));
|
|
61
|
+
sort_type && (data = (0, _columnUtils.sortDataByGroupSum)(data, sort_type));
|
|
54
62
|
this.draw(data);
|
|
55
63
|
this.renderAxisLabel(this.props.chart, this.props.tables, this.container);
|
|
56
|
-
isFunction(customRender) && customRender(this.chart);
|
|
64
|
+
(0, _utils.isFunction)(customRender) && customRender(this.chart);
|
|
57
65
|
};
|
|
58
66
|
this.draw = data => {
|
|
59
67
|
const {
|
|
@@ -80,9 +88,9 @@ class BarStack extends ChartComponent {
|
|
|
80
88
|
y_axis_min,
|
|
81
89
|
y_axis_auto_range
|
|
82
90
|
} = chart.config;
|
|
83
|
-
const theme = CHART_THEME_COLOR[globalTheme];
|
|
91
|
+
const theme = _constants.CHART_THEME_COLOR[globalTheme];
|
|
84
92
|
const column_groupby_column = this.getColumn(tables, table_id, column_groupby_column_key);
|
|
85
|
-
const useSingleSelectColumnColor = (column_groupby_column === null || column_groupby_column === void 0 ? void 0 : column_groupby_column.type) === CellType.SINGLE_SELECT && color_theme === SUPPORT_SINGLE_SELECT_THEMES_OPTIONS.SINGLE_SELECT_COLUMN_COLORS;
|
|
93
|
+
const useSingleSelectColumnColor = (column_groupby_column === null || column_groupby_column === void 0 ? void 0 : column_groupby_column.type) === _dtableUtils.CellType.SINGLE_SELECT && color_theme === _colorRules.SUPPORT_SINGLE_SELECT_THEMES_OPTIONS.SINGLE_SELECT_COLUMN_COLORS;
|
|
86
94
|
// use single select column color
|
|
87
95
|
useSingleSelectColumnColor ? this.setSingleSelectColorMap(data) : this.setColorMap(data, chartColorTheme, 'group_name', columnGroupbyColumn, chart);
|
|
88
96
|
const {
|
|
@@ -91,7 +99,7 @@ class BarStack extends ChartComponent {
|
|
|
91
99
|
insertPadding,
|
|
92
100
|
marginTop
|
|
93
101
|
} = this.chartBoundingClientRect;
|
|
94
|
-
const sortedData = BaseUtils.sortDataByGroupName(cloneDeep(data), 'group_name', columnGroupbyColumn, chart).reverse();
|
|
102
|
+
const sortedData = _utils.BaseUtils.sortDataByGroupName((0, _lodashEs.cloneDeep)(data), 'group_name', columnGroupbyColumn, chart).reverse();
|
|
95
103
|
const series = d3.stack().keys(d3.union(sortedData.map(d => d.group_name))).value((_ref, key) => {
|
|
96
104
|
var _group$get;
|
|
97
105
|
let [_, group] = _ref;
|
|
@@ -101,7 +109,7 @@ class BarStack extends ChartComponent {
|
|
|
101
109
|
const y = d3.scaleLinear().domain(y_axis_auto_range ? [0, niceEnd] : [y_axis_min, y_axis_max]).range([chartHeight - insertPadding, insertPadding + marginTop]);
|
|
102
110
|
|
|
103
111
|
// Y axis
|
|
104
|
-
this.chart.append('g').attr('class', 'y-axis-wrapper').attr('transform', `translate(${insertPadding},0)`).call(d3.axisLeft(y).tickSizeInner(0).ticks(5).tickFormat(d => BaseUtils.getSummaryValueDisplayString(summaryColumn, d, y_axis_summary_method))).call(g => this.drawYaxis(g, theme));
|
|
112
|
+
this.chart.append('g').attr('class', 'y-axis-wrapper').attr('transform', `translate(${insertPadding},0)`).call(d3.axisLeft(y).tickSizeInner(0).ticks(5).tickFormat(d => _utils.BaseUtils.getSummaryValueDisplayString(summaryColumn, d, y_axis_summary_method))).call(g => this.drawYaxis(g, theme));
|
|
105
113
|
const x = d3.scaleBand().domain(d3.group(data, d => d.name).keys()).range([insertPadding + this.horizontalOverflowOffset, chartWidth - insertPadding]).paddingInner(0.5).paddingOuter(0.1);
|
|
106
114
|
|
|
107
115
|
// X axis
|
|
@@ -123,8 +131,8 @@ class BarStack extends ChartComponent {
|
|
|
123
131
|
return data;
|
|
124
132
|
}).join('rect').attr('opacity', 1).attr('x', d => x(d.data[0])).attr('y', d => y(d[1])).attr('height', d => {
|
|
125
133
|
const height = y(d[0]) - y(d[1]);
|
|
126
|
-
return isNaN(height) ? 0 : height;
|
|
127
|
-
}).attr('width', x.bandwidth()).attr('fill', d => this.colorMap[d.key] || CHART_STYLE_COLORS[0]).attr('data-value', d => {
|
|
134
|
+
return (0, _lodashEs.isNaN)(height) ? 0 : height;
|
|
135
|
+
}).attr('width', x.bandwidth()).attr('fill', d => this.colorMap[d.key] || _constants.CHART_STYLE_COLORS[0]).attr('data-value', d => {
|
|
128
136
|
const {
|
|
129
137
|
data,
|
|
130
138
|
key
|
|
@@ -209,11 +217,11 @@ class BarStack extends ChartComponent {
|
|
|
209
217
|
const curGroup = curRect.parentNode;
|
|
210
218
|
const curGroupName = event.currentTarget.getAttribute('data-groupName');
|
|
211
219
|
const newTooltipData = {
|
|
212
|
-
title: !curGroupName && typeof curGroupName !== 'number' ?
|
|
220
|
+
title: !curGroupName && typeof curGroupName !== 'number' ? _intl.default.get(_constants.EMPTY_NAME) : curGroupName,
|
|
213
221
|
items: [{
|
|
214
222
|
color: this.colorMap[curGroup.getAttribute('data-key')],
|
|
215
223
|
name: curGroup.getAttribute('data-key'),
|
|
216
|
-
value: BaseUtils.getSummaryValueDisplayString(summaryColumn, Number(curRect.getAttribute('data-value')), y_axis_summary_method)
|
|
224
|
+
value: _utils.BaseUtils.getSummaryValueDisplayString(summaryColumn, Number(curRect.getAttribute('data-value')), y_axis_summary_method)
|
|
217
225
|
}]
|
|
218
226
|
};
|
|
219
227
|
this.setState({
|
|
@@ -276,7 +284,7 @@ class BarStack extends ChartComponent {
|
|
|
276
284
|
label_font_size,
|
|
277
285
|
y_axis_summary_method
|
|
278
286
|
} = chart.config;
|
|
279
|
-
const theme = CHART_THEME_COLOR[globalTheme];
|
|
287
|
+
const theme = _constants.CHART_THEME_COLOR[globalTheme];
|
|
280
288
|
const groupData = d3.group(data, d => d.name);
|
|
281
289
|
const group_name = rect.getAttribute('data-groupName');
|
|
282
290
|
let stackSum = 0;
|
|
@@ -288,7 +296,7 @@ class BarStack extends ChartComponent {
|
|
|
288
296
|
y: Number(rect.getAttribute('y')),
|
|
289
297
|
theme,
|
|
290
298
|
label_font_size,
|
|
291
|
-
text: BaseUtils.getSummaryValueDisplayString(summaryColumn, Number(stackSum), y_axis_summary_method)
|
|
299
|
+
text: _utils.BaseUtils.getSummaryValueDisplayString(summaryColumn, Number(stackSum), y_axis_summary_method)
|
|
292
300
|
});
|
|
293
301
|
};
|
|
294
302
|
this.handleLabelToRectCenter = (g, xWidth) => {
|
|
@@ -301,7 +309,7 @@ class BarStack extends ChartComponent {
|
|
|
301
309
|
label_font_size,
|
|
302
310
|
y_axis_summary_method
|
|
303
311
|
} = chart.config;
|
|
304
|
-
const theme = CHART_THEME_COLOR[globalTheme];
|
|
312
|
+
const theme = _constants.CHART_THEME_COLOR[globalTheme];
|
|
305
313
|
g._parents.forEach(group => {
|
|
306
314
|
Array.from(group.children).forEach(rect => {
|
|
307
315
|
// The height is 0, and the label is not displayed.
|
|
@@ -314,7 +322,7 @@ class BarStack extends ChartComponent {
|
|
|
314
322
|
yheight: Number(rect.getAttribute('height')),
|
|
315
323
|
theme,
|
|
316
324
|
label_font_size,
|
|
317
|
-
text: BaseUtils.getSummaryValueDisplayString(summaryColumn, Number(rect.getAttribute('data-value')), y_axis_summary_method)
|
|
325
|
+
text: _utils.BaseUtils.getSummaryValueDisplayString(summaryColumn, Number(rect.getAttribute('data-value')), y_axis_summary_method)
|
|
318
326
|
});
|
|
319
327
|
});
|
|
320
328
|
});
|
|
@@ -328,12 +336,12 @@ class BarStack extends ChartComponent {
|
|
|
328
336
|
componentDidMount() {
|
|
329
337
|
this.createChart();
|
|
330
338
|
this.drawChart();
|
|
331
|
-
this.debouncedHandleResize = debounce(this.handleResize, 300);
|
|
339
|
+
this.debouncedHandleResize = (0, _lodashEs.debounce)(this.handleResize, 300);
|
|
332
340
|
window.addEventListener('resize', this.debouncedHandleResize);
|
|
333
341
|
}
|
|
334
342
|
componentDidUpdate(prevProps) {
|
|
335
343
|
super.componentDidUpdate(prevProps);
|
|
336
|
-
if (BaseUtils.shouldChartComponentUpdate(prevProps, this.props)) {
|
|
344
|
+
if (_utils.BaseUtils.shouldChartComponentUpdate(prevProps, this.props)) {
|
|
337
345
|
this.destroyChart();
|
|
338
346
|
this.createChart();
|
|
339
347
|
this.drawChart();
|
|
@@ -351,13 +359,13 @@ class BarStack extends ChartComponent {
|
|
|
351
359
|
tooltipData,
|
|
352
360
|
toolTipPosition
|
|
353
361
|
} = this.state;
|
|
354
|
-
return /*#__PURE__*/
|
|
362
|
+
return /*#__PURE__*/_react.default.createElement("div", {
|
|
355
363
|
ref: ref => this.container = ref,
|
|
356
|
-
className:
|
|
364
|
+
className: (0, _classnames.default)('sea-chart-container', {
|
|
357
365
|
'show-x-axis-label': this.isShowXAxisLabel(chart),
|
|
358
366
|
'show-y-axis-label': this.isShowYAxisLabel(chart)
|
|
359
367
|
})
|
|
360
|
-
}, /*#__PURE__*/
|
|
368
|
+
}, /*#__PURE__*/_react.default.createElement(_tooltip.default, {
|
|
361
369
|
tooltipData: tooltipData,
|
|
362
370
|
toolTipPosition: toolTipPosition,
|
|
363
371
|
chart: this.chart
|
|
@@ -365,16 +373,16 @@ class BarStack extends ChartComponent {
|
|
|
365
373
|
}
|
|
366
374
|
}
|
|
367
375
|
BarStack.propTypes = {
|
|
368
|
-
canvasStyle:
|
|
369
|
-
chart:
|
|
370
|
-
groupbyColumn:
|
|
371
|
-
columnGroupbyColumn:
|
|
372
|
-
summaryColumn:
|
|
373
|
-
result:
|
|
374
|
-
tables:
|
|
375
|
-
globalTheme:
|
|
376
|
-
chartColorTheme:
|
|
377
|
-
toggleRecords:
|
|
378
|
-
customRender:
|
|
376
|
+
canvasStyle: _propTypes.default.object,
|
|
377
|
+
chart: _propTypes.default.object,
|
|
378
|
+
groupbyColumn: _propTypes.default.object,
|
|
379
|
+
columnGroupbyColumn: _propTypes.default.object,
|
|
380
|
+
summaryColumn: _propTypes.default.object,
|
|
381
|
+
result: _propTypes.default.array,
|
|
382
|
+
tables: _propTypes.default.array,
|
|
383
|
+
globalTheme: _propTypes.default.string,
|
|
384
|
+
chartColorTheme: _propTypes.default.string,
|
|
385
|
+
toggleRecords: _propTypes.default.func,
|
|
386
|
+
customRender: _propTypes.default.func
|
|
379
387
|
};
|
|
380
|
-
|
|
388
|
+
var _default = exports.default = BarStack;
|