sea-chart 2.0.46 → 2.0.48
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 +18 -10
- 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 +22 -15
- 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 +274 -145
- 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 +18 -11
- 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 +74 -66
- 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 +60 -52
- 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 +77 -69
- package/dist/settings/completeness-settings/callbacks/callbacks.js +27 -16
- package/dist/settings/completeness-settings/data-settings/completion-settings.js +28 -21
- package/dist/settings/completeness-settings/data-settings/data-settings.js +32 -25
- package/dist/settings/completeness-settings/index.js +20 -3
- package/dist/settings/completeness-settings/style-settings.js +26 -19
- package/dist/settings/dashboard-settings/data-settings.js +51 -43
- package/dist/settings/dashboard-settings/index.js +13 -2
- package/dist/settings/data-settings.js +79 -72
- package/dist/settings/funnel-settings/components/dnd-item/dnd-item.js +19 -12
- package/dist/settings/funnel-settings/components/dnd-list.js +23 -15
- package/dist/settings/funnel-settings/components/funnel-label-setting.js +40 -32
- package/dist/settings/funnel-settings/components/funnel-layer-setting.js +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 +53 -45
- 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/axis-title-font-settings/index.js +17 -10
- 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 +28 -18
- package/dist/utils/cell-value-utils.js +12 -5
- package/dist/utils/chart-utils/base-utils.js +354 -343
- package/dist/utils/chart-utils/index.js +41 -28
- package/dist/utils/chart-utils/original-data-utils/basic-chart-calculator.js +85 -78
- 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 +28 -21
- package/dist/utils/chart-utils/original-data-utils/pivot-table-calculator.js +97 -91
- 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 +240 -232
- 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 +180 -168
- 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 +156 -146
- 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 +47 -39
- package/dist/view/wrapper/area.js +45 -37
- package/dist/view/wrapper/bar-compare.js +41 -33
- package/dist/view/wrapper/bar-custom-stack.js +39 -31
- package/dist/view/wrapper/bar-group.js +48 -40
- package/dist/view/wrapper/bar-stack.js +51 -43
- package/dist/view/wrapper/bar.js +43 -35
- package/dist/view/wrapper/basic-number-card.js +26 -18
- package/dist/view/wrapper/chart-component.js +112 -104
- package/dist/view/wrapper/combination.js +55 -47
- package/dist/view/wrapper/completeness-group.js +38 -30
- package/dist/view/wrapper/completeness.js +36 -28
- package/dist/view/wrapper/dashboard.js +33 -25
- package/dist/view/wrapper/funnel.js +38 -30
- package/dist/view/wrapper/heat-map.js +64 -56
- package/dist/view/wrapper/horizontal-bar-group.js +55 -47
- package/dist/view/wrapper/horizontal-bar-stack.js +49 -41
- package/dist/view/wrapper/horizontal-bar.js +43 -35
- package/dist/view/wrapper/index.js +115 -107
- package/dist/view/wrapper/line-group.js +45 -37
- package/dist/view/wrapper/line.js +44 -36
- package/dist/view/wrapper/map-bubble.js +46 -38
- package/dist/view/wrapper/map-world-bubble.js +45 -37
- package/dist/view/wrapper/map-world.js +47 -39
- package/dist/view/wrapper/map.js +48 -40
- package/dist/view/wrapper/mirror.js +41 -33
- package/dist/view/wrapper/pie.js +47 -39
- package/dist/view/wrapper/ring.js +50 -42
- package/dist/view/wrapper/scatter.js +45 -37
- 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 +91 -83
- 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 +105 -96
- 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 +41 -33
- package/dist/view/wrapper/trend.js +49 -41
- package/package.json +6 -1
|
@@ -1,11 +1,19 @@
|
|
|
1
|
-
|
|
2
|
-
|
|
3
|
-
|
|
4
|
-
|
|
5
|
-
|
|
6
|
-
|
|
7
|
-
|
|
8
|
-
|
|
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 d3 = _interopRequireWildcard(require("d3"));
|
|
12
|
+
var _constants = require("../../constants");
|
|
13
|
+
var _utils = require("../../utils");
|
|
14
|
+
var _tooltip = _interopRequireDefault(require("../../components/tooltip"));
|
|
15
|
+
var _chartComponent = _interopRequireDefault(require("./chart-component"));
|
|
16
|
+
class Funnel extends _chartComponent.default {
|
|
9
17
|
constructor(props) {
|
|
10
18
|
super(props);
|
|
11
19
|
this.createChart = () => {
|
|
@@ -27,7 +35,7 @@ class Funnel extends ChartComponent {
|
|
|
27
35
|
funnel_accumulate_values
|
|
28
36
|
} = chart.config;
|
|
29
37
|
if (!x_axis_option_list.length) return;
|
|
30
|
-
const sortedData = getSortedDataByGivenOrder(data, x_axis_option_list);
|
|
38
|
+
const sortedData = (0, _utils.getSortedDataByGivenOrder)(data, x_axis_option_list);
|
|
31
39
|
const formatSortedData = this.formatSortedData(sortedData, funnel_accumulate_values);
|
|
32
40
|
this.draw(formatSortedData);
|
|
33
41
|
};
|
|
@@ -48,7 +56,7 @@ class Funnel extends ChartComponent {
|
|
|
48
56
|
items: [{
|
|
49
57
|
color: colorScale(data === null || data === void 0 ? void 0 : data.name),
|
|
50
58
|
name: data === null || data === void 0 ? void 0 : data.name,
|
|
51
|
-
value: BaseUtils.getSummaryValueDisplayString(summaryColumn, Number(data === null || data === void 0 ? void 0 : data.value), y_axis_summary_method)
|
|
59
|
+
value: _utils.BaseUtils.getSummaryValueDisplayString(summaryColumn, Number(data === null || data === void 0 ? void 0 : data.value), y_axis_summary_method)
|
|
52
60
|
}]
|
|
53
61
|
};
|
|
54
62
|
this.setState({
|
|
@@ -101,8 +109,8 @@ class Funnel extends ChartComponent {
|
|
|
101
109
|
height: chartHeight,
|
|
102
110
|
insertPadding
|
|
103
111
|
} = this.chartBoundingClientRect;
|
|
104
|
-
const theme = CHART_THEME_COLOR[globalTheme];
|
|
105
|
-
const isInside = funnel_label_position === FUNNEL_LABEL_POSITIONS.INSIDE;
|
|
112
|
+
const theme = _constants.CHART_THEME_COLOR[globalTheme];
|
|
113
|
+
const isInside = funnel_label_position === _constants.FUNNEL_LABEL_POSITIONS.INSIDE;
|
|
106
114
|
const title = this.getTitle(tables, table_id, y_axis_summary_type, y_axis_column_key || y_axis_summary_column_key);
|
|
107
115
|
|
|
108
116
|
// Only the visible stages are laid out; the legend still shows every stage.
|
|
@@ -258,9 +266,9 @@ class Funnel extends ChartComponent {
|
|
|
258
266
|
toolTipPosition: null
|
|
259
267
|
};
|
|
260
268
|
this.contentFormatterMap = {
|
|
261
|
-
[FUNNEL_LABEL_FORMAT.NUMBER]: obj => obj === null || obj === void 0 ? void 0 : obj.value,
|
|
262
|
-
[FUNNEL_LABEL_FORMAT.PERCENTAGE]: obj => ((obj === null || obj === void 0 ? void 0 : obj.percent) || 0) + '%',
|
|
263
|
-
[FUNNEL_LABEL_FORMAT.NUMBER_AND_PERCENTAGE]: obj => `${obj === null || obj === void 0 ? void 0 : obj.value} (${(obj === null || obj === void 0 ? void 0 : obj.percent) || 0}%)`
|
|
269
|
+
[_constants.FUNNEL_LABEL_FORMAT.NUMBER]: obj => obj === null || obj === void 0 ? void 0 : obj.value,
|
|
270
|
+
[_constants.FUNNEL_LABEL_FORMAT.PERCENTAGE]: obj => ((obj === null || obj === void 0 ? void 0 : obj.percent) || 0) + '%',
|
|
271
|
+
[_constants.FUNNEL_LABEL_FORMAT.NUMBER_AND_PERCENTAGE]: obj => `${obj === null || obj === void 0 ? void 0 : obj.value} (${(obj === null || obj === void 0 ? void 0 : obj.percent) || 0}%)`
|
|
264
272
|
};
|
|
265
273
|
}
|
|
266
274
|
componentDidMount() {
|
|
@@ -270,7 +278,7 @@ class Funnel extends ChartComponent {
|
|
|
270
278
|
}
|
|
271
279
|
componentDidUpdate(prevProps) {
|
|
272
280
|
super.componentDidUpdate(prevProps);
|
|
273
|
-
if (BaseUtils.shouldChartComponentUpdate(prevProps, this.props)) {
|
|
281
|
+
if (_utils.BaseUtils.shouldChartComponentUpdate(prevProps, this.props)) {
|
|
274
282
|
this.destroyChart();
|
|
275
283
|
this.createChart();
|
|
276
284
|
this.drawChart();
|
|
@@ -285,10 +293,10 @@ class Funnel extends ChartComponent {
|
|
|
285
293
|
tooltipData,
|
|
286
294
|
toolTipPosition
|
|
287
295
|
} = this.state;
|
|
288
|
-
return /*#__PURE__*/
|
|
296
|
+
return /*#__PURE__*/_react.default.createElement("div", {
|
|
289
297
|
ref: ref => this.container = ref,
|
|
290
298
|
className: "sea-chart-container"
|
|
291
|
-
}, /*#__PURE__*/
|
|
299
|
+
}, /*#__PURE__*/_react.default.createElement(_tooltip.default, {
|
|
292
300
|
tooltipData: tooltipData,
|
|
293
301
|
toolTipPosition: toolTipPosition,
|
|
294
302
|
chart: this.chart
|
|
@@ -296,16 +304,16 @@ class Funnel extends ChartComponent {
|
|
|
296
304
|
}
|
|
297
305
|
}
|
|
298
306
|
Funnel.propTypes = {
|
|
299
|
-
canvasStyle:
|
|
300
|
-
chart:
|
|
301
|
-
groupbyColumn:
|
|
302
|
-
columnGroupbyColumn:
|
|
303
|
-
summaryColumn:
|
|
304
|
-
result:
|
|
305
|
-
tables:
|
|
306
|
-
globalTheme:
|
|
307
|
-
chartColorTheme:
|
|
308
|
-
toggleRecords:
|
|
309
|
-
customRender:
|
|
307
|
+
canvasStyle: _propTypes.default.object,
|
|
308
|
+
chart: _propTypes.default.object,
|
|
309
|
+
groupbyColumn: _propTypes.default.object,
|
|
310
|
+
columnGroupbyColumn: _propTypes.default.object,
|
|
311
|
+
summaryColumn: _propTypes.default.object,
|
|
312
|
+
result: _propTypes.default.array,
|
|
313
|
+
tables: _propTypes.default.array,
|
|
314
|
+
globalTheme: _propTypes.default.string,
|
|
315
|
+
chartColorTheme: _propTypes.default.string,
|
|
316
|
+
toggleRecords: _propTypes.default.func,
|
|
317
|
+
customRender: _propTypes.default.func
|
|
310
318
|
};
|
|
311
|
-
|
|
319
|
+
var _default = exports.default = Funnel;
|
|
@@ -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 d3 = _interopRequireWildcard(require("d3"));
|
|
12
|
+
var _dayjs = _interopRequireDefault(require("dayjs"));
|
|
13
|
+
var _dtableUtils = require("dtable-utils");
|
|
14
|
+
var _style = require("../../constants/style");
|
|
15
|
+
var _constants = require("../../constants");
|
|
16
|
+
var _utils = require("../../utils");
|
|
17
|
+
var _intl = _interopRequireDefault(require("../../intl"));
|
|
18
|
+
var _tooltip = _interopRequireDefault(require("../../components/tooltip"));
|
|
19
|
+
var _chartComponent = _interopRequireDefault(require("./chart-component"));
|
|
20
|
+
class HeatMap extends _chartComponent.default {
|
|
13
21
|
constructor(props) {
|
|
14
22
|
super(props);
|
|
15
23
|
this.createChart = () => {
|
|
@@ -51,8 +59,8 @@ class HeatMap extends ChartComponent {
|
|
|
51
59
|
grid_size,
|
|
52
60
|
grid_distance
|
|
53
61
|
} = chartConfig;
|
|
54
|
-
grid_size = grid_size || DEFAULT_GRID_SIZE;
|
|
55
|
-
grid_distance = grid_distance || DEFAULT_GRID_DISTANCE;
|
|
62
|
+
grid_size = grid_size || _constants.DEFAULT_GRID_SIZE;
|
|
63
|
+
grid_distance = grid_distance || _constants.DEFAULT_GRID_DISTANCE;
|
|
56
64
|
const yearHeight = grid_size * 7 + grid_distance * 6; // height for 1 year
|
|
57
65
|
const height = (titleHeight + yearHeight + monthAxisHeight) * count + (insertPadding + insertPadding);
|
|
58
66
|
const weekCount = Math.max(...years.map(year => this.getYearWeekCount(year)), 53);
|
|
@@ -63,7 +71,7 @@ class HeatMap extends ChartComponent {
|
|
|
63
71
|
};
|
|
64
72
|
};
|
|
65
73
|
this.shouldHeatMapUpdate = prevProps => {
|
|
66
|
-
if (BaseUtils.shouldChartComponentUpdate(prevProps, this.props)) return true;
|
|
74
|
+
if (_utils.BaseUtils.shouldChartComponentUpdate(prevProps, this.props)) return true;
|
|
67
75
|
const prevResult = prevProps.result || {};
|
|
68
76
|
const currentResult = this.props.result || {};
|
|
69
77
|
const prevYears = prevResult.years || [];
|
|
@@ -83,19 +91,19 @@ class HeatMap extends ChartComponent {
|
|
|
83
91
|
return false;
|
|
84
92
|
};
|
|
85
93
|
this.getDayOfYear = date => {
|
|
86
|
-
const dateObj =
|
|
87
|
-
const yearStart =
|
|
94
|
+
const dateObj = (0, _dayjs.default)(date);
|
|
95
|
+
const yearStart = (0, _dayjs.default)(`${dateObj.year()}-01-01`);
|
|
88
96
|
return dateObj.diff(yearStart, 'day') + 1;
|
|
89
97
|
};
|
|
90
98
|
this.getWeekIndex = date => {
|
|
91
|
-
const dateObj =
|
|
92
|
-
const yearStart =
|
|
99
|
+
const dateObj = (0, _dayjs.default)(date);
|
|
100
|
+
const yearStart = (0, _dayjs.default)(`${dateObj.year()}-01-01`);
|
|
93
101
|
const dayOfYear = this.getDayOfYear(date);
|
|
94
102
|
const firstDayOfYear = yearStart.day();
|
|
95
103
|
return Math.floor((dayOfYear - 1 + firstDayOfYear) / 7) + 1;
|
|
96
104
|
};
|
|
97
105
|
this.getYearWeekCount = year => {
|
|
98
|
-
return this.getWeekIndex(
|
|
106
|
+
return this.getWeekIndex((0, _dayjs.default)(`${year}-12-31`));
|
|
99
107
|
};
|
|
100
108
|
this.showTooltip = (event, data, columnData) => {
|
|
101
109
|
const {
|
|
@@ -106,8 +114,8 @@ class HeatMap extends ChartComponent {
|
|
|
106
114
|
title: data.name,
|
|
107
115
|
items: [{
|
|
108
116
|
color: '',
|
|
109
|
-
name:
|
|
110
|
-
value: getNumberDisplayString(data.value, columnData)
|
|
117
|
+
name: _intl.default.get(_constants.TITLE_AMOUNT),
|
|
118
|
+
value: (0, _dtableUtils.getNumberDisplayString)(data.value, columnData)
|
|
111
119
|
}]
|
|
112
120
|
};
|
|
113
121
|
this.setState({
|
|
@@ -163,18 +171,18 @@ class HeatMap extends ChartComponent {
|
|
|
163
171
|
grid_size,
|
|
164
172
|
grid_distance
|
|
165
173
|
} = chart.config;
|
|
166
|
-
grid_size = grid_size ? grid_size : DEFAULT_GRID_SIZE;
|
|
167
|
-
grid_distance = grid_distance ? grid_distance : DEFAULT_GRID_DISTANCE;
|
|
168
|
-
const currentColorOption = COLOR_OPTIONS.filter(item => item.name === data_color)[0] || COLOR_OPTIONS[0];
|
|
174
|
+
grid_size = grid_size ? grid_size : _constants.DEFAULT_GRID_SIZE;
|
|
175
|
+
grid_distance = grid_distance ? grid_distance : _constants.DEFAULT_GRID_DISTANCE;
|
|
176
|
+
const currentColorOption = _style.COLOR_OPTIONS.filter(item => item.name === data_color)[0] || _style.COLOR_OPTIONS[0];
|
|
169
177
|
const {
|
|
170
178
|
exampleColors
|
|
171
179
|
} = currentColorOption;
|
|
172
180
|
const themeColors = this.getThemeColors();
|
|
173
|
-
let columnData = DEFAULT_NUMBER_FORMAT_OBJECT;
|
|
174
|
-
if (summary_type === CHART_SUMMARY_TYPE.ADVANCED) {
|
|
175
|
-
const table = getTableById(tables, table_id);
|
|
176
|
-
const summaryColumn = getTableColumnByKey(table, summary_column) || {};
|
|
177
|
-
columnData = summaryColumn.data || DEFAULT_NUMBER_FORMAT_OBJECT;
|
|
181
|
+
let columnData = _constants.DEFAULT_NUMBER_FORMAT_OBJECT;
|
|
182
|
+
if (summary_type === _constants.CHART_SUMMARY_TYPE.ADVANCED) {
|
|
183
|
+
const table = (0, _dtableUtils.getTableById)(tables, table_id);
|
|
184
|
+
const summaryColumn = (0, _dtableUtils.getTableColumnByKey)(table, summary_column) || {};
|
|
185
|
+
columnData = summaryColumn.data || _constants.DEFAULT_NUMBER_FORMAT_OBJECT;
|
|
178
186
|
}
|
|
179
187
|
const yAxisWrapper = this.chart.append('g').attr('class', 'y-axis-wrapper');
|
|
180
188
|
const xAxisWrapper = this.chart.append('g').attr('class', 'x-axis-wrapper');
|
|
@@ -190,7 +198,7 @@ class HeatMap extends ChartComponent {
|
|
|
190
198
|
// Y axis
|
|
191
199
|
const weekYScale = d3.scaleOrdinal().domain(this.weeks).range(this.weeks.map((_, i) => bandTop + i * (grid_size + grid_distance)));
|
|
192
200
|
const yAxisScale = d3.scaleOrdinal().domain(this.weeks).range(this.weeks.map((_, i) => bandTop + i * (grid_size + grid_distance) + grid_size / 2));
|
|
193
|
-
yAxisWrapper.append('g').attr('class', `y-axis-${year}`).attr('transform', `translate(${insertPadding}, 0)`).call(d3.axisLeft(yAxisScale).tickSizeInner(0).tickSizeOuter(0).tickFormat(d =>
|
|
201
|
+
yAxisWrapper.append('g').attr('class', `y-axis-${year}`).attr('transform', `translate(${insertPadding}, 0)`).call(d3.axisLeft(yAxisScale).tickSizeInner(0).tickSizeOuter(0).tickFormat(d => _intl.default.get(d))).call(g => {
|
|
194
202
|
g.select('.domain').remove();
|
|
195
203
|
g.selectAll('text').attr('font-size', 12);
|
|
196
204
|
g.selectAll('text').attr('fill', themeColors.textColor);
|
|
@@ -219,20 +227,20 @@ class HeatMap extends ChartComponent {
|
|
|
219
227
|
}
|
|
220
228
|
return weekScale(curWeek);
|
|
221
229
|
}).attr('y', () => {
|
|
222
|
-
const curWeek = this.weeks[
|
|
230
|
+
const curWeek = this.weeks[(0, _dayjs.default)(d).day()];
|
|
223
231
|
return weekYScale(curWeek);
|
|
224
232
|
}).attr('width', grid_size).attr('height', grid_size).attr('rx', grid_size * borderRadius).attr('fill', () => this.getRectColor(d, data, 'fill', exampleColors)).attr('stroke', () => this.getRectColor(d, data, 'stroke', exampleColors)).attr('stroke-width', 1).on('click', () => {
|
|
225
|
-
const curDate = data.find(item => item.name ===
|
|
233
|
+
const curDate = data.find(item => item.name === (0, _dayjs.default)(d).format('YYYY-MM-DD'));
|
|
226
234
|
if (curDate) {
|
|
227
235
|
this.props.toggleRecords(curDate);
|
|
228
236
|
}
|
|
229
237
|
}).on('mouseover', event => {
|
|
230
|
-
const curDate = data.find(item => item.name ===
|
|
238
|
+
const curDate = data.find(item => item.name === (0, _dayjs.default)(d).format('YYYY-MM-DD'));
|
|
231
239
|
if (curDate) {
|
|
232
240
|
this.showTooltip(event, curDate, columnData);
|
|
233
241
|
}
|
|
234
242
|
}).on('mousemove', event => {
|
|
235
|
-
const curDate = data.find(item => item.name ===
|
|
243
|
+
const curDate = data.find(item => item.name === (0, _dayjs.default)(d).format('YYYY-MM-DD'));
|
|
236
244
|
if (curDate) {
|
|
237
245
|
this.moveTooltip(event);
|
|
238
246
|
}
|
|
@@ -244,7 +252,7 @@ class HeatMap extends ChartComponent {
|
|
|
244
252
|
|
|
245
253
|
// X axis
|
|
246
254
|
const x = d3.scalePoint().domain(this.months).range([insertPadding, chartWidth - insertPadding]);
|
|
247
|
-
xAxisWrapper.append('g').attr('class', `x-axis-${year}`).attr('transform', `translate(0, ${bandTop + (grid_size * 7 + grid_distance * 6)})`).call(d3.axisBottom(x).tickSizeInner(0).tickSizeOuter(0).tickFormat(d =>
|
|
255
|
+
xAxisWrapper.append('g').attr('class', `x-axis-${year}`).attr('transform', `translate(0, ${bandTop + (grid_size * 7 + grid_distance * 6)})`).call(d3.axisBottom(x).tickSizeInner(0).tickSizeOuter(0).tickFormat(d => _intl.default.get(d))).call(g => {
|
|
248
256
|
g.select('.domain').remove();
|
|
249
257
|
g.selectAll('.tick').nodes().forEach((item, index) => {
|
|
250
258
|
const monthX = monthTranslateX[index];
|
|
@@ -271,24 +279,24 @@ class HeatMap extends ChartComponent {
|
|
|
271
279
|
const isLeapYear = year % 4 === 0 && year % 100 !== 0 || year % 400 === 0;
|
|
272
280
|
const dayCount = isLeapYear ? 366 : 365;
|
|
273
281
|
for (let i = 0; i < dayCount; i++) {
|
|
274
|
-
dates.push(
|
|
282
|
+
dates.push((0, _dayjs.default)(`${year}-01-01`).add(i, 'day'));
|
|
275
283
|
}
|
|
276
284
|
const weekCount = this.getYearWeekCount(year);
|
|
277
|
-
return [d3.groups(dates, d =>
|
|
285
|
+
return [d3.groups(dates, d => (0, _dayjs.default)(d).month()), weekCount];
|
|
278
286
|
};
|
|
279
287
|
this.getRectColor = (d, data, type, exampleColors) => {
|
|
280
288
|
const maxVal = d3.max(data, d => d.value);
|
|
281
289
|
const defaultColor = type === 'stroke' ? '#E1E3E6' : '#EBEDF0';
|
|
282
|
-
const curDate = data.find(item => item.name ===
|
|
290
|
+
const curDate = data.find(item => item.name === (0, _dayjs.default)(d).format('YYYY-MM-DD'));
|
|
283
291
|
if (curDate) {
|
|
284
292
|
if (curDate.value <= 0) return defaultColor;
|
|
285
|
-
if (curDate.value === maxVal) return type === 'stroke' ? FILL_BORDER_COLOR_MAP[exampleColors[8]] : exampleColors[8];
|
|
293
|
+
if (curDate.value === maxVal) return type === 'stroke' ? _style.FILL_BORDER_COLOR_MAP[exampleColors[8]] : exampleColors[8];
|
|
286
294
|
const curColor = Math.floor(curDate.value / (maxVal / 9));
|
|
287
|
-
return type === 'stroke' ? FILL_BORDER_COLOR_MAP[exampleColors[curColor]] : exampleColors[curColor];
|
|
295
|
+
return type === 'stroke' ? _style.FILL_BORDER_COLOR_MAP[exampleColors[curColor]] : exampleColors[curColor];
|
|
288
296
|
}
|
|
289
297
|
return defaultColor;
|
|
290
298
|
};
|
|
291
|
-
|
|
299
|
+
_dayjs.default.locale('en');
|
|
292
300
|
this.weeks = ['Sun', 'Mon', 'Tue', 'Wed', 'Thu', 'Fri', 'Sat'];
|
|
293
301
|
this.months = ['Jan', 'Feb', 'Mar', 'Apr', 'May', 'Jun', 'Jul', 'Aug', 'Sep', 'Oct', 'Nov', 'Dec'];
|
|
294
302
|
this.chart = null;
|
|
@@ -319,10 +327,10 @@ class HeatMap extends ChartComponent {
|
|
|
319
327
|
tooltipData,
|
|
320
328
|
toolTipPosition
|
|
321
329
|
} = this.state;
|
|
322
|
-
return /*#__PURE__*/
|
|
330
|
+
return /*#__PURE__*/_react.default.createElement("div", {
|
|
323
331
|
ref: ref => this.container = ref,
|
|
324
332
|
className: "sea-chart-container"
|
|
325
|
-
}, /*#__PURE__*/
|
|
333
|
+
}, /*#__PURE__*/_react.default.createElement(_tooltip.default, {
|
|
326
334
|
tooltipData: tooltipData,
|
|
327
335
|
toolTipPosition: toolTipPosition,
|
|
328
336
|
chart: this.chart
|
|
@@ -330,16 +338,16 @@ class HeatMap extends ChartComponent {
|
|
|
330
338
|
}
|
|
331
339
|
}
|
|
332
340
|
HeatMap.propTypes = {
|
|
333
|
-
canvasStyle:
|
|
334
|
-
chart:
|
|
335
|
-
groupbyColumn:
|
|
336
|
-
columnGroupbyColumn:
|
|
337
|
-
summaryColumn:
|
|
338
|
-
result:
|
|
339
|
-
tables:
|
|
340
|
-
globalTheme:
|
|
341
|
-
chartColorTheme:
|
|
342
|
-
toggleRecords:
|
|
343
|
-
customRender:
|
|
341
|
+
canvasStyle: _propTypes.default.object,
|
|
342
|
+
chart: _propTypes.default.object,
|
|
343
|
+
groupbyColumn: _propTypes.default.object,
|
|
344
|
+
columnGroupbyColumn: _propTypes.default.object,
|
|
345
|
+
summaryColumn: _propTypes.default.object,
|
|
346
|
+
result: _propTypes.default.object,
|
|
347
|
+
tables: _propTypes.default.array,
|
|
348
|
+
globalTheme: _propTypes.default.string,
|
|
349
|
+
chartColorTheme: _propTypes.default.string,
|
|
350
|
+
toggleRecords: _propTypes.default.func,
|
|
351
|
+
customRender: _propTypes.default.func
|
|
344
352
|
};
|
|
345
|
-
|
|
353
|
+
var _default = exports.default = HeatMap;
|
|
@@ -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 _lodashEs = require("lodash-es");
|
|
12
|
+
var d3 = _interopRequireWildcard(require("d3"));
|
|
13
|
+
var _dtableUtils = require("dtable-utils");
|
|
14
|
+
var _dayjs = _interopRequireDefault(require("dayjs"));
|
|
15
|
+
var _constants = require("../../constants");
|
|
16
|
+
var _utils = require("../../utils");
|
|
17
|
+
var _intl = _interopRequireDefault(require("../../intl"));
|
|
18
|
+
var _colorRules = require("../../constants/color-rules");
|
|
19
|
+
var _columnUtils = require("../../utils/column-utils");
|
|
20
|
+
var _tooltip = _interopRequireDefault(require("../../components/tooltip"));
|
|
21
|
+
var _chartComponent = _interopRequireDefault(require("./chart-component"));
|
|
22
|
+
class HorizontalBarGroup extends _chartComponent.default {
|
|
15
23
|
constructor(props) {
|
|
16
24
|
super(props);
|
|
17
25
|
this.createChart = () => {
|
|
@@ -41,17 +49,17 @@ class HorizontalBarGroup extends ChartComponent {
|
|
|
41
49
|
const {
|
|
42
50
|
column_groupby_column_key
|
|
43
51
|
} = chart.config || {};
|
|
44
|
-
data = BaseUtils.formatEmptyName(data, column_groupby_column_key,
|
|
52
|
+
data = _utils.BaseUtils.formatEmptyName(data, column_groupby_column_key, _intl.default.get(_constants.EMPTY_NAME));
|
|
45
53
|
if (!Array.isArray(data)) return;
|
|
46
54
|
const {
|
|
47
55
|
sort_type,
|
|
48
56
|
type
|
|
49
57
|
} = chart.config;
|
|
50
|
-
if (type === CHART_TYPE.STACKED_HORIZONTAL_BAR && sort_type) {
|
|
51
|
-
data = sortDataByGroupSum(data, sort_type);
|
|
58
|
+
if (type === _constants.CHART_TYPE.STACKED_HORIZONTAL_BAR && sort_type) {
|
|
59
|
+
data = (0, _columnUtils.sortDataByGroupSum)(data, sort_type);
|
|
52
60
|
}
|
|
53
61
|
this.draw(data);
|
|
54
|
-
isFunction(customRender) && customRender(this.chart);
|
|
62
|
+
(0, _utils.isFunction)(customRender) && customRender(this.chart);
|
|
55
63
|
this.renderHorizontalLabel(this.props.chart, this.props.tables, this.container);
|
|
56
64
|
};
|
|
57
65
|
this.draw = data => {
|
|
@@ -63,7 +71,7 @@ class HorizontalBarGroup extends ChartComponent {
|
|
|
63
71
|
columnGroupbyColumn,
|
|
64
72
|
summaryColumn
|
|
65
73
|
} = this.props;
|
|
66
|
-
const theme = CHART_THEME_COLOR[globalTheme];
|
|
74
|
+
const theme = _constants.CHART_THEME_COLOR[globalTheme];
|
|
67
75
|
const {
|
|
68
76
|
display_data,
|
|
69
77
|
label_font_size,
|
|
@@ -82,14 +90,14 @@ class HorizontalBarGroup extends ChartComponent {
|
|
|
82
90
|
marginRight
|
|
83
91
|
} = this.chartBoundingClientRect;
|
|
84
92
|
const groupByColumn = this.getColumn(tables, table_id, column_groupby_column_key);
|
|
85
|
-
const isGroupByDate = [CellType.DATE, CellType.CTIME, CellType.MTIME].includes(groupByColumn === null || groupByColumn === void 0 ? void 0 : groupByColumn.type);
|
|
93
|
+
const isGroupByDate = [_dtableUtils.CellType.DATE, _dtableUtils.CellType.CTIME, _dtableUtils.CellType.MTIME].includes(groupByColumn === null || groupByColumn === void 0 ? void 0 : groupByColumn.type);
|
|
86
94
|
if (isGroupByDate) {
|
|
87
|
-
const emptyName =
|
|
95
|
+
const emptyName = _intl.default.get(_constants.EMPTY_NAME);
|
|
88
96
|
data = data.map(item => {
|
|
89
97
|
const rawGroupName = item.group_name;
|
|
90
|
-
if (isEmpty(rawGroupName)) return item;
|
|
98
|
+
if ((0, _dtableUtils.isEmpty)(rawGroupName)) return item;
|
|
91
99
|
if (rawGroupName === emptyName) return item;
|
|
92
|
-
const dateValue =
|
|
100
|
+
const dateValue = (0, _dayjs.default)(rawGroupName);
|
|
93
101
|
if (!dateValue.isValid()) return item;
|
|
94
102
|
return {
|
|
95
103
|
...item,
|
|
@@ -99,10 +107,10 @@ class HorizontalBarGroup extends ChartComponent {
|
|
|
99
107
|
}
|
|
100
108
|
const fullData = data;
|
|
101
109
|
data = this.getVisibleLegendData(data, 'group_name');
|
|
102
|
-
const useSingleSelectColumnColor = (groupByColumn === null || groupByColumn === void 0 ? void 0 : groupByColumn.type) === CellType.SINGLE_SELECT && color_theme === SUPPORT_SINGLE_SELECT_THEMES_OPTIONS.SINGLE_SELECT_COLUMN_COLORS;
|
|
110
|
+
const useSingleSelectColumnColor = (groupByColumn === null || groupByColumn === void 0 ? void 0 : groupByColumn.type) === _dtableUtils.CellType.SINGLE_SELECT && color_theme === _colorRules.SUPPORT_SINGLE_SELECT_THEMES_OPTIONS.SINGLE_SELECT_COLUMN_COLORS;
|
|
103
111
|
useSingleSelectColumnColor ? this.setSingleSelectColorMap(fullData) : this.setColorMap(fullData, chartColorTheme);
|
|
104
112
|
const fy = d3.scaleBand().domain(new Set(data.map(d => d.name))).range([chartHeight - insertPadding, insertPadding]).paddingInner(0.3).paddingOuter(0.1);
|
|
105
|
-
const sortedData = BaseUtils.sortDataByGroupName(cloneDeep(data), 'group_name', columnGroupbyColumn, chart);
|
|
113
|
+
const sortedData = _utils.BaseUtils.sortDataByGroupName((0, _lodashEs.cloneDeep)(data), 'group_name', columnGroupbyColumn, chart);
|
|
106
114
|
const y = d3.scaleBand().domain(new Set(sortedData.map(d => d.group_name))).range([0, fy.bandwidth()]).paddingInner(0).paddingOuter(0);
|
|
107
115
|
|
|
108
116
|
// Y axis
|
|
@@ -122,7 +130,7 @@ class HorizontalBarGroup extends ChartComponent {
|
|
|
122
130
|
const x = d3.scaleLinear().domain(horizontal_axis_auto_range ? [0, niceEnd] : [horizontal_axis_min || 0, horizontal_axis_max || niceEnd]).range([Number(yAxis.node().getAttribute('data-axisWidth')), chartWidth - insertPadding - marginRight]);
|
|
123
131
|
|
|
124
132
|
// X axis
|
|
125
|
-
this.chart.append('g').attr('class', 'x-axis-wrapper').attr('transform', `translate(0, ${chartHeight - insertPadding})`).call(d3.axisBottom(x).tickSizeInner(0).ticks(5).tickFormat(d => BaseUtils.getSummaryValueDisplayString(summaryColumn, d, horizontal_axis_summary_method))).call(g => {
|
|
133
|
+
this.chart.append('g').attr('class', 'x-axis-wrapper').attr('transform', `translate(0, ${chartHeight - insertPadding})`).call(d3.axisBottom(x).tickSizeInner(0).ticks(5).tickFormat(d => _utils.BaseUtils.getSummaryValueDisplayString(summaryColumn, d, horizontal_axis_summary_method))).call(g => {
|
|
126
134
|
g.selectAll('.domain').remove();
|
|
127
135
|
g.selectAll('.tick line').node() && g.selectAll('.tick line').node().remove(); // delete the first line
|
|
128
136
|
g.selectAll('.tick line').attr('y2', -(chartHeight - insertPadding * 2)).attr('stroke', theme.gridColor).attr('stroke-dasharray', '8,3');
|
|
@@ -144,7 +152,7 @@ class HorizontalBarGroup extends ChartComponent {
|
|
|
144
152
|
}).join('rect').attr('opacity', 1).attr('x', 0).attr('y', (d, index) => index * y.bandwidth()).attr('width', d => x(d.value) - x(0)).attr('height', y.bandwidth()).attr('fill', d => {
|
|
145
153
|
var _this$colorMap$colorK;
|
|
146
154
|
const colorKey = d.group_name || d.group_name === 0 ? d.group_name : '';
|
|
147
|
-
return (_this$colorMap$colorK = this.colorMap[colorKey]) !== null && _this$colorMap$colorK !== void 0 ? _this$colorMap$colorK : CHART_STYLE_COLORS[0];
|
|
155
|
+
return (_this$colorMap$colorK = this.colorMap[colorKey]) !== null && _this$colorMap$colorK !== void 0 ? _this$colorMap$colorK : _constants.CHART_STYLE_COLORS[0];
|
|
148
156
|
}).attr('value', d => d.value).attr('data-groupName', d => d.name).call(g => {
|
|
149
157
|
// add rect borderRadius
|
|
150
158
|
g.nodes().forEach(rect => {
|
|
@@ -165,7 +173,7 @@ class HorizontalBarGroup extends ChartComponent {
|
|
|
165
173
|
y: Number(rect.getAttribute('y')),
|
|
166
174
|
theme,
|
|
167
175
|
label_font_size,
|
|
168
|
-
text: BaseUtils.getSummaryValueDisplayString(summaryColumn, Number(rect.getAttribute('value')), horizontal_axis_summary_method)
|
|
176
|
+
text: _utils.BaseUtils.getSummaryValueDisplayString(summaryColumn, Number(rect.getAttribute('value')), horizontal_axis_summary_method)
|
|
169
177
|
});
|
|
170
178
|
}
|
|
171
179
|
});
|
|
@@ -212,14 +220,14 @@ class HorizontalBarGroup extends ChartComponent {
|
|
|
212
220
|
const title = event.currentTarget.getAttribute('data-groupName');
|
|
213
221
|
const children = Array.from(event.currentTarget.parentNode.children).filter(item => item.tagName === 'rect');
|
|
214
222
|
const newTooltipData = {
|
|
215
|
-
title: !title && typeof title !== 'number' ?
|
|
223
|
+
title: !title && typeof title !== 'number' ? _intl.default.get(_constants.EMPTY_NAME) : title,
|
|
216
224
|
items: children.map(child => {
|
|
217
225
|
const data = child.__data__;
|
|
218
|
-
const groupName = isEmpty(data.group_name) ?
|
|
226
|
+
const groupName = (0, _dtableUtils.isEmpty)(data.group_name) ? _intl.default.get(_constants.EMPTY_NAME) : data.group_name;
|
|
219
227
|
return {
|
|
220
|
-
color: this.colorMap[groupName] || CHART_STYLE_COLORS[0],
|
|
228
|
+
color: this.colorMap[groupName] || _constants.CHART_STYLE_COLORS[0],
|
|
221
229
|
name: groupName,
|
|
222
|
-
value: BaseUtils.getSummaryValueDisplayString(summaryColumn, Number(child.getAttribute('value')), horizontal_axis_summary_method)
|
|
230
|
+
value: _utils.BaseUtils.getSummaryValueDisplayString(summaryColumn, Number(child.getAttribute('value')), horizontal_axis_summary_method)
|
|
223
231
|
};
|
|
224
232
|
})
|
|
225
233
|
};
|
|
@@ -263,7 +271,7 @@ class HorizontalBarGroup extends ChartComponent {
|
|
|
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();
|
|
@@ -278,10 +286,10 @@ class HorizontalBarGroup extends ChartComponent {
|
|
|
278
286
|
tooltipData,
|
|
279
287
|
toolTipPosition
|
|
280
288
|
} = this.state;
|
|
281
|
-
return /*#__PURE__*/
|
|
289
|
+
return /*#__PURE__*/_react.default.createElement("div", {
|
|
282
290
|
ref: ref => this.container = ref,
|
|
283
291
|
className: "sea-chart-container"
|
|
284
|
-
}, /*#__PURE__*/
|
|
292
|
+
}, /*#__PURE__*/_react.default.createElement(_tooltip.default, {
|
|
285
293
|
tooltipData: tooltipData,
|
|
286
294
|
toolTipPosition: toolTipPosition,
|
|
287
295
|
chart: this.chart
|
|
@@ -289,16 +297,16 @@ class HorizontalBarGroup extends ChartComponent {
|
|
|
289
297
|
}
|
|
290
298
|
}
|
|
291
299
|
HorizontalBarGroup.propTypes = {
|
|
292
|
-
canvasStyle:
|
|
293
|
-
chart:
|
|
294
|
-
groupbyColumn:
|
|
295
|
-
columnGroupbyColumn:
|
|
296
|
-
summaryColumn:
|
|
297
|
-
result:
|
|
298
|
-
tables:
|
|
299
|
-
globalTheme:
|
|
300
|
-
chartColorTheme:
|
|
301
|
-
toggleRecords:
|
|
302
|
-
customRender:
|
|
300
|
+
canvasStyle: _propTypes.default.object,
|
|
301
|
+
chart: _propTypes.default.object,
|
|
302
|
+
groupbyColumn: _propTypes.default.object,
|
|
303
|
+
columnGroupbyColumn: _propTypes.default.object,
|
|
304
|
+
summaryColumn: _propTypes.default.object,
|
|
305
|
+
result: _propTypes.default.array,
|
|
306
|
+
tables: _propTypes.default.array,
|
|
307
|
+
globalTheme: _propTypes.default.string,
|
|
308
|
+
chartColorTheme: _propTypes.default.string,
|
|
309
|
+
toggleRecords: _propTypes.default.func,
|
|
310
|
+
customRender: _propTypes.default.func
|
|
303
311
|
};
|
|
304
|
-
|
|
312
|
+
var _default = exports.default = HorizontalBarGroup;
|