sea-chart 2.0.37 → 2.0.38
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 +20 -69
- package/dist/assets/css/sea-chart-d3-tooltip.css +0 -1
- package/dist/components/cell-factory/FormatterConfig.js +55 -62
- package/dist/components/cell-factory/SimpleCellFormatter.js +5 -12
- package/dist/components/cell-factory/SingleSelectOption.js +11 -18
- package/dist/components/cell-factory/cell-editor-factory.js +5 -12
- package/dist/components/cell-factory/cell-formatter-factory.js +4 -11
- package/dist/components/cell-factory/link-content.js +30 -38
- package/dist/components/chart-color-selector/color-selector.js +11 -18
- package/dist/components/collaborator/index.js +7 -14
- package/dist/components/color-picker/index.js +12 -19
- package/dist/components/color-popover/color-rules/color-rule.js +26 -34
- package/dist/components/color-popover/color-rules/index.js +7 -15
- package/dist/components/color-popover/color-rules/rule-filters/filter.js +27 -34
- package/dist/components/color-popover/color-rules/rule-filters/index.js +17 -25
- package/dist/components/color-popover/color-rules/rule-filters/number-input.js +9 -17
- package/dist/components/color-popover/color-rules-popover.js +31 -37
- package/dist/components/color-popover/color-selector-popover.js +12 -20
- package/dist/components/color-setting/color-group-selector.js +13 -21
- package/dist/components/common-add-tool/index.js +8 -15
- package/dist/components/data-process-setter/data-setting-header.js +7 -14
- package/dist/components/data-process-setter/hide-column-setter.js +13 -20
- package/dist/components/data-process-setter/index.js +4 -27
- package/dist/components/data-process-setter/sort-setter.js +18 -26
- package/dist/components/draggable/Draggable.js +7 -13
- package/dist/components/drill-down-settings/drill-down-fields-popover/index.js +41 -48
- package/dist/components/drill-down-settings/drill-down-fields-settings/index.js +10 -18
- package/dist/components/drill-down-settings/index.js +11 -18
- package/dist/components/dtable-popover/index.js +13 -20
- package/dist/components/dtable-search-input/index.js +13 -21
- package/dist/components/font-settings/index.js +14 -22
- package/dist/components/goal-line-setting/goal-setting-item.js +6 -14
- package/dist/components/goal-line-setting/index.js +12 -19
- package/dist/components/highlighter/highlighter.js +7 -14
- package/dist/components/icon/index.js +12 -23
- package/dist/components/index.js +7 -48
- package/dist/components/loading/index.js +6 -13
- package/dist/components/number-input/index.js +11 -24
- package/dist/components/pixel-editor/index.js +15 -23
- package/dist/components/popover/hide-column-popover/hide-column-popover-widgets/hide-column-item.js +13 -16
- package/dist/components/popover/hide-column-popover/hide-column-popover.css +5 -1
- package/dist/components/popover/hide-column-popover/hide-column-popover.js +28 -38
- package/dist/components/popover/sort-popover/sort-popover-widgets/sort-utils.js +9 -18
- package/dist/components/popover/sort-popover/sort-popover.js +58 -69
- package/dist/components/resize-handle/ResizeHandle.js +6 -13
- package/dist/components/row-card/row-card-header-cell.js +17 -24
- package/dist/components/row-card/row-card-header.js +15 -22
- package/dist/components/row-card/row-card-item.js +35 -43
- package/dist/components/row-card/row-card.js +17 -25
- package/dist/components/statistic-record-dialog/index.js +61 -68
- package/dist/components/tooltip/index.js +39 -28
- package/dist/components/types-dialog/index.js +62 -70
- package/dist/components/types-dialog/use-force-update.js +4 -10
- package/dist/constants/color-rules.js +8 -14
- package/dist/constants/common-constants.js +8 -14
- package/dist/constants/error.js +2 -8
- package/dist/constants/geolocation.js +9 -15
- package/dist/constants/index.js +142 -271
- package/dist/constants/key-codes.js +0 -2
- package/dist/constants/model.js +3 -9
- package/dist/constants/regions.js +3 -8
- package/dist/constants/style.js +6 -12
- package/dist/constants/table.js +1 -7
- package/dist/constants/type-image.js +33 -39
- package/dist/constants/type.js +3 -9
- package/dist/context.js +13 -20
- package/dist/editor/index.js +13 -16
- package/dist/index.js +13 -104
- package/dist/intl.js +10 -17
- package/dist/locale/index.js +16 -23
- package/dist/locale/lang/de.js +2 -7
- package/dist/locale/lang/en.js +2 -7
- package/dist/locale/lang/es.js +2 -7
- package/dist/locale/lang/fr.js +2 -7
- package/dist/locale/lang/pt.js +2 -7
- package/dist/locale/lang/ru.js +2 -7
- package/dist/locale/lang/zh_CN.js +2 -7
- package/dist/model/area-group.js +12 -19
- package/dist/model/area.js +12 -19
- package/dist/model/bar-custom.js +11 -18
- package/dist/model/bar-group.js +12 -19
- package/dist/model/bar-stack.js +10 -17
- package/dist/model/bar.js +11 -18
- package/dist/model/base-model.js +4 -11
- package/dist/model/basic-number-card.js +13 -20
- package/dist/model/chart.js +7 -13
- package/dist/model/combination.js +15 -22
- package/dist/model/compare-bar.js +14 -21
- package/dist/model/completeness-group.js +11 -18
- package/dist/model/completeness.js +10 -17
- package/dist/model/dashboard.js +7 -14
- package/dist/model/funnel.js +14 -21
- package/dist/model/generic-model.js +135 -143
- package/dist/model/heat-map.js +9 -16
- package/dist/model/horizontal-bar.js +11 -18
- package/dist/model/horizontal-group-bar.js +10 -17
- package/dist/model/index.js +69 -93
- package/dist/model/line-group.js +13 -20
- package/dist/model/line.js +12 -19
- package/dist/model/map-bubble.js +14 -17
- package/dist/model/map.js +12 -19
- package/dist/model/mirror.js +13 -20
- package/dist/model/pie.js +12 -19
- package/dist/model/ring.js +12 -19
- package/dist/model/scatter.js +10 -17
- package/dist/model/stacked-horizontal-bar.js +11 -18
- package/dist/model/table-element.js +5 -12
- package/dist/model/table.js +7 -14
- package/dist/model/tree-map.js +7 -14
- package/dist/model/trend.js +11 -18
- package/dist/model/user.js +1 -7
- package/dist/model/world-map-bubble.js +12 -19
- package/dist/model/world-map.js +12 -19
- package/dist/services/map-json.js +14 -17
- package/dist/settings/advance-bar-settings/data-settings.js +36 -44
- package/dist/settings/advance-bar-settings/index.js +3 -20
- package/dist/settings/advance-bar-settings/style-settings.js +66 -73
- package/dist/settings/bar-settings/data-settings.js +39 -47
- package/dist/settings/bar-settings/index.js +3 -20
- package/dist/settings/bar-settings/style-settings.js +51 -59
- package/dist/settings/basic-number-card/data-settings.js +50 -57
- package/dist/settings/basic-number-card/index.js +3 -20
- package/dist/settings/basic-number-card/style-settings.js +19 -27
- package/dist/settings/combination-settings/data-settings.js +55 -64
- package/dist/settings/combination-settings/index.js +3 -20
- package/dist/settings/combination-settings/style-settings.js +67 -75
- package/dist/settings/completeness-settings/callbacks/callbacks.js +16 -27
- package/dist/settings/completeness-settings/data-settings/completion-settings.js +21 -28
- package/dist/settings/completeness-settings/data-settings/data-settings.js +25 -32
- package/dist/settings/completeness-settings/index.js +3 -20
- package/dist/settings/completeness-settings/style-settings.js +19 -26
- package/dist/settings/dashboard-settings/data-settings.js +44 -51
- package/dist/settings/dashboard-settings/index.js +2 -13
- package/dist/settings/data-settings.js +72 -79
- package/dist/settings/funnel-settings/components/dnd-item/dnd-item.js +12 -19
- package/dist/settings/funnel-settings/components/dnd-list.js +15 -23
- package/dist/settings/funnel-settings/components/funnel-label-setting.js +32 -40
- package/dist/settings/funnel-settings/components/funnel-layer-setting.js +22 -30
- package/dist/settings/funnel-settings/data-settings.js +23 -31
- package/dist/settings/funnel-settings/index.js +3 -20
- package/dist/settings/funnel-settings/style-settings.js +11 -19
- package/dist/settings/heat-map-settings/data-settings.js +18 -26
- package/dist/settings/heat-map-settings/index.js +3 -20
- package/dist/settings/heat-map-settings/style-settings.js +18 -26
- package/dist/settings/horizontal-bar-settings/data-settings.js +12 -19
- package/dist/settings/horizontal-bar-settings/index.js +3 -20
- package/dist/settings/horizontal-bar-settings/style-settings.js +12 -19
- package/dist/settings/index.js +57 -70
- package/dist/settings/map-settings/components/location-field-selector.js +10 -17
- package/dist/settings/map-settings/components/map-level-selector.js +11 -18
- package/dist/settings/map-settings/components/map-province-city-selector.js +19 -26
- package/dist/settings/map-settings/index.js +3 -20
- package/dist/settings/map-settings/map-data-settings.js +23 -30
- package/dist/settings/map-settings/map-style-settings.js +27 -35
- package/dist/settings/mirror-settings/data-settings.js +26 -34
- package/dist/settings/mirror-settings/index.js +2 -13
- package/dist/settings/pie-settings/data-settings.js +33 -41
- package/dist/settings/pie-settings/index.js +3 -20
- package/dist/settings/pie-settings/style-settings.js +47 -55
- package/dist/settings/scatter/data-settings.js +27 -34
- package/dist/settings/scatter/index.js +3 -12
- package/dist/settings/stacks-settings/index.js +19 -27
- package/dist/settings/stacks-settings/stack-item-settings.js +19 -27
- package/dist/settings/style-settings.js +65 -73
- package/dist/settings/table-element-settings/components/data-filter.js +49 -58
- package/dist/settings/table-element-settings/data-settings.js +21 -29
- package/dist/settings/table-element-settings/index.css +1 -31
- package/dist/settings/table-element-settings/index.js +2 -13
- package/dist/settings/table-settings/data-settings.js +113 -120
- package/dist/settings/table-settings/index.js +2 -13
- package/dist/settings/time-comparison-settings/data-settings.js +43 -51
- package/dist/settings/time-comparison-settings/index.js +3 -20
- package/dist/settings/time-comparison-settings/style-settings.js +44 -52
- package/dist/settings/trend-settings/data-settings.js +24 -32
- package/dist/settings/trend-settings/index.js +3 -20
- package/dist/settings/trend-settings/style-setting.js +19 -27
- package/dist/settings/widgets/basic-summary/index.js +59 -66
- package/dist/settings/widgets/chart-type/index.js +18 -26
- package/dist/settings/widgets/color-settings/index.js +72 -80
- package/dist/settings/widgets/common-data-settings.js +27 -34
- package/dist/settings/widgets/data-filter/index.js +59 -59
- package/dist/settings/widgets/data-sort.js +16 -24
- package/dist/settings/widgets/date-summary-item.js +26 -34
- package/dist/settings/widgets/display-values-settings/index.js +14 -22
- package/dist/settings/widgets/divider/index.js +8 -16
- package/dist/settings/widgets/font-settings/font-color-settings.js +11 -19
- package/dist/settings/widgets/font-settings/font-size-settings.js +14 -22
- package/dist/settings/widgets/font-settings/font-weight-settings.js +17 -25
- package/dist/settings/widgets/font-settings/index.js +4 -27
- package/dist/settings/widgets/group-by.js +52 -59
- package/dist/settings/widgets/min-max-setting.js +10 -18
- package/dist/settings/widgets/mininum-slice-percent.js +10 -18
- package/dist/settings/widgets/numeric-summary-item.js +25 -33
- package/dist/settings/widgets/select-line-type/index.js +10 -17
- package/dist/settings/widgets/select-table/index.js +9 -16
- package/dist/settings/widgets/select-view/index.js +20 -28
- package/dist/settings/widgets/stack.js +14 -22
- package/dist/settings/widgets/summary-method-setting.js +17 -25
- package/dist/settings/widgets/summary-settings.js +75 -82
- package/dist/settings/widgets/switch/index.js +9 -16
- package/dist/settings/widgets/text-horizontal-settings.js +15 -23
- package/dist/settings/widgets/time-picker.js +29 -37
- package/dist/settings/widgets/title-settings/index.js +29 -37
- package/dist/settings/widgets/title-settings/title-text.js +5 -12
- package/dist/settings/widgets/x-axios.js +0 -1
- package/dist/settings/widgets/y-axis-group-settings.js +65 -72
- package/dist/utils/cell-format-utils.js +25 -33
- package/dist/utils/cell-value-utils.js +4 -11
- package/dist/utils/chart-utils/base-utils.js +467 -367
- package/dist/utils/chart-utils/index.js +29 -40
- package/dist/utils/chart-utils/original-data-utils/basic-chart-calculator.js +78 -85
- package/dist/utils/chart-utils/original-data-utils/card-calculator.js +20 -21
- package/dist/utils/chart-utils/original-data-utils/combination-calculator.js +45 -52
- package/dist/utils/chart-utils/original-data-utils/compare-bar-chart-calculator.js +21 -28
- package/dist/utils/chart-utils/original-data-utils/completeness-calculator.js +33 -40
- package/dist/utils/chart-utils/original-data-utils/dashboard-calculator.js +28 -26
- package/dist/utils/chart-utils/original-data-utils/index.js +50 -57
- package/dist/utils/chart-utils/original-data-utils/mirror-calculator.js +19 -26
- package/dist/utils/chart-utils/original-data-utils/pivot-table-calculator.js +94 -97
- package/dist/utils/chart-utils/original-data-utils/scatter-calculator.js +19 -25
- package/dist/utils/chart-utils/original-data-utils/trend-calculator.js +50 -36
- package/dist/utils/chart-utils/sql-statistics-utils.js +385 -388
- package/dist/utils/chart.js +9 -17
- package/dist/utils/collaborator-manager.js +3 -9
- package/dist/utils/collaborator-utils.js +19 -31
- package/dist/utils/collaborator.js +6 -15
- package/dist/utils/color-utils.js +18 -29
- package/dist/utils/column-utils.js +88 -102
- package/dist/utils/common-utils.js +28 -53
- package/dist/utils/concurrency-manager.js +1 -7
- package/dist/utils/contexts.js +7 -11
- package/dist/utils/date-translate.js +12 -20
- package/dist/utils/digital-sign-utils.js +7 -14
- package/dist/utils/event-bus.js +1 -7
- package/dist/utils/hotkey.js +5 -11
- package/dist/utils/index.js +73 -219
- package/dist/utils/key-generator.js +2 -9
- package/dist/utils/map.js +22 -31
- package/dist/utils/object-utils.js +2 -8
- package/dist/utils/options-utils.js +10 -18
- package/dist/utils/row-record-utils.js +251 -183
- package/dist/utils/row-utils.js +27 -38
- package/dist/utils/search.js +24 -32
- package/dist/utils/sql/chart-data-sql.js +106 -112
- package/dist/utils/sql/column-2-sql-column.js +162 -172
- package/dist/utils/sql/index.js +3 -27
- package/dist/utils/trend-utils.js +50 -45
- package/dist/view/index.css +2 -8
- package/dist/view/index.js +102 -103
- package/dist/view/title/index.js +16 -24
- package/dist/view/wrapper/area-group.js +57 -57
- package/dist/view/wrapper/area.js +43 -51
- package/dist/view/wrapper/bar-compare.js +56 -48
- package/dist/view/wrapper/bar-custom-stack.js +73 -55
- package/dist/view/wrapper/bar-group.js +94 -73
- package/dist/view/wrapper/bar-stack.js +49 -57
- package/dist/view/wrapper/bar.js +40 -48
- package/dist/view/wrapper/basic-number-card.js +50 -34
- package/dist/view/wrapper/chart-component.js +164 -569
- package/dist/view/wrapper/combination.js +55 -63
- package/dist/view/wrapper/completeness-group.js +140 -93
- package/dist/view/wrapper/completeness.js +36 -44
- package/dist/view/wrapper/dashboard.js +104 -59
- package/dist/view/wrapper/funnel.js +40 -43
- package/dist/view/wrapper/heat-map.js +62 -70
- package/dist/view/wrapper/horizontal-bar-group.js +70 -58
- package/dist/view/wrapper/horizontal-bar-stack.js +48 -56
- package/dist/view/wrapper/horizontal-bar.js +41 -49
- package/dist/view/wrapper/index.js +107 -115
- package/dist/view/wrapper/line-group.js +49 -52
- package/dist/view/wrapper/line.js +42 -50
- package/dist/view/wrapper/map-bubble.js +40 -48
- package/dist/view/wrapper/map-world-bubble.js +40 -47
- package/dist/view/wrapper/map-world.js +42 -49
- package/dist/view/wrapper/map.js +42 -50
- package/dist/view/wrapper/mirror.js +41 -49
- package/dist/view/wrapper/pie.js +45 -53
- package/dist/view/wrapper/ring.js +50 -58
- package/dist/view/wrapper/scatter.js +50 -56
- package/dist/view/wrapper/table/index.js +14 -22
- package/dist/view/wrapper/table/one-dimension-table-no-numeric-columns.js +49 -57
- package/dist/view/wrapper/table/one-dimension-table-with-numeric-columns.js +53 -61
- package/dist/view/wrapper/table/pivot-table-display-name.js +82 -90
- package/dist/view/wrapper/table/two-dimension-table.js +85 -92
- package/dist/view/wrapper/table-element/components/dataset-utils.js +23 -36
- package/dist/view/wrapper/table-element/components/formatter.js +90 -99
- package/dist/view/wrapper/table-element/components/formatters/FileFormatter/index.js +23 -32
- package/dist/view/wrapper/table-element/components/formatters/formula-formatter.js +9 -16
- package/dist/view/wrapper/table-element/components/formatters/link-formatter.js +90 -97
- package/dist/view/wrapper/table-element/components/formula-formatter.js +9 -16
- package/dist/view/wrapper/table-element/components/link-formatter.js +90 -97
- package/dist/view/wrapper/table-element/components/record.js +13 -20
- package/dist/view/wrapper/table-element/components/records-body.js +9 -17
- package/dist/view/wrapper/table-element/components/records-header/index.js +7 -16
- package/dist/view/wrapper/table-element/components/records-header/records-header-cell.js +8 -16
- package/dist/view/wrapper/table-element/components/records.js +25 -33
- package/dist/view/wrapper/table-element/components/resize-column-handle/resize-column-handle.js +8 -13
- package/dist/view/wrapper/table-element/components/utils.js +6 -16
- package/dist/view/wrapper/table-element/components/value-display-utils.js +4 -11
- package/dist/view/wrapper/table-element/components/vertical-scrollbar/index.js +6 -13
- package/dist/view/wrapper/table-element/index.js +30 -43
- package/dist/view/wrapper/treemap.js +38 -46
- package/dist/view/wrapper/trend.js +80 -65
- package/package.json +15 -12
|
@@ -1,22 +1,14 @@
|
|
|
1
|
-
|
|
2
|
-
|
|
3
|
-
|
|
4
|
-
|
|
5
|
-
|
|
6
|
-
|
|
7
|
-
}
|
|
8
|
-
|
|
9
|
-
|
|
10
|
-
|
|
11
|
-
|
|
12
|
-
var d3 = _interopRequireWildcard(require("d3"));
|
|
13
|
-
var _classnames = _interopRequireDefault(require("classnames"));
|
|
14
|
-
var _constants = require("../../constants");
|
|
15
|
-
var _utils = require("../../utils");
|
|
16
|
-
var _intl = _interopRequireDefault(require("../../intl"));
|
|
17
|
-
var _tooltip = _interopRequireDefault(require("../../components/tooltip"));
|
|
18
|
-
var _chartComponent = _interopRequireDefault(require("./chart-component"));
|
|
19
|
-
class Line extends _chartComponent.default {
|
|
1
|
+
import React from 'react';
|
|
2
|
+
import PropTypes from 'prop-types';
|
|
3
|
+
import { debounce } from 'lodash-es';
|
|
4
|
+
import * as d3 from 'd3';
|
|
5
|
+
import classNames from 'classnames';
|
|
6
|
+
import { TYPE_COLOR_USING, CHART_STYLE_COLORS, CHART_THEME_COLOR, CHART_LINE_TYPES } from '../../constants';
|
|
7
|
+
import { BaseUtils, isFunction } from '../../utils';
|
|
8
|
+
import intl from '../../intl';
|
|
9
|
+
import ToolTip from '../../components/tooltip';
|
|
10
|
+
import ChartComponent from './chart-component';
|
|
11
|
+
class Line extends ChartComponent {
|
|
20
12
|
constructor(props) {
|
|
21
13
|
super(props);
|
|
22
14
|
this.handleResize = () => {
|
|
@@ -48,11 +40,11 @@ class Line extends _chartComponent.default {
|
|
|
48
40
|
let {
|
|
49
41
|
result: data
|
|
50
42
|
} = this.props;
|
|
51
|
-
data =
|
|
43
|
+
data = BaseUtils.formatEmptyName(data, '', intl.get('Empty'));
|
|
52
44
|
if (!Array.isArray(data)) return;
|
|
53
45
|
this.draw(data);
|
|
54
46
|
this.renderAxisLabel(this.props.chart, this.props.tables, this.container);
|
|
55
|
-
|
|
47
|
+
isFunction(customRender) && customRender(this.chart);
|
|
56
48
|
};
|
|
57
49
|
this.showTooltip = (event, data, title) => {
|
|
58
50
|
const {
|
|
@@ -71,7 +63,7 @@ class Line extends _chartComponent.default {
|
|
|
71
63
|
items: [{
|
|
72
64
|
color: this.getLineColor(),
|
|
73
65
|
name: data.name,
|
|
74
|
-
value:
|
|
66
|
+
value: BaseUtils.getSummaryValueDisplayString(summaryColumn, Number(data.value), y_axis_summary_method)
|
|
75
67
|
}]
|
|
76
68
|
};
|
|
77
69
|
this.setState({
|
|
@@ -101,7 +93,7 @@ class Line extends _chartComponent.default {
|
|
|
101
93
|
items: [{
|
|
102
94
|
color: this.getLineColor(),
|
|
103
95
|
name: data.name,
|
|
104
|
-
value:
|
|
96
|
+
value: BaseUtils.getSummaryValueDisplayString(summaryColumn, Number(data.value), y_axis_summary_method)
|
|
105
97
|
}]
|
|
106
98
|
};
|
|
107
99
|
this.setState({
|
|
@@ -126,7 +118,7 @@ class Line extends _chartComponent.default {
|
|
|
126
118
|
tables,
|
|
127
119
|
summaryColumn
|
|
128
120
|
} = this.props;
|
|
129
|
-
const theme =
|
|
121
|
+
const theme = CHART_THEME_COLOR[globalTheme];
|
|
130
122
|
const {
|
|
131
123
|
display_goal_line,
|
|
132
124
|
goal_value,
|
|
@@ -157,12 +149,12 @@ class Line extends _chartComponent.default {
|
|
|
157
149
|
// Y axis
|
|
158
150
|
const niceEnd = d3.nice(0, d3.max(data, d => d.value), 5)[1];
|
|
159
151
|
const y = d3.scaleLinear().domain(y_axis_auto_range ? [0, niceEnd] : [y_axis_min || 0, y_axis_max || niceEnd]).range([chartHeight - insertPadding, insertPadding + marginTop]);
|
|
160
|
-
this.chart.append('g').attr('class', 'y-axis-wrapper').attr('transform',
|
|
152
|
+
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));
|
|
161
153
|
|
|
162
154
|
// X axis
|
|
163
155
|
const xDomain = data.map(item => item.name);
|
|
164
156
|
const x = d3.scaleBand().domain(xDomain).range([insertPadding + this.horizontalOverflowOffset, chartWidth - insertPadding]).paddingInner(0.4).paddingOuter(0.1);
|
|
165
|
-
this.chart.append('g').attr('class', 'x-axis-wrapper').attr('transform',
|
|
157
|
+
this.chart.append('g').attr('class', 'x-axis-wrapper').attr('transform', `translate(0, ${chartHeight - insertPadding})`).call(d3.axisBottom(x).tickSizeOuter(0).tickSizeInner(5)).call(g => {
|
|
166
158
|
this.ticksAddName(g);
|
|
167
159
|
g.selectAll('.domain').attr('stroke', theme.XAxisColor);
|
|
168
160
|
g.selectAll('.tick line').attr('stroke', theme.XAxisColor);
|
|
@@ -183,7 +175,7 @@ class Line extends _chartComponent.default {
|
|
|
183
175
|
circleData[index]['y'] = yVal;
|
|
184
176
|
circleData[index]['value'] = d.value;
|
|
185
177
|
return yVal;
|
|
186
|
-
}).curve(line_type ===
|
|
178
|
+
}).curve(line_type === CHART_LINE_TYPES[1] ? d3.curveBumpX : d3.curveLinear);
|
|
187
179
|
const contentWrapper = this.chart.append('g').attr('class', 'content-wrapper');
|
|
188
180
|
contentWrapper.append('path').attr('fill', 'none').attr('stroke', chartBarColor).attr('stroke-width', 2).attr('d', () => line(data));
|
|
189
181
|
|
|
@@ -193,13 +185,13 @@ class Line extends _chartComponent.default {
|
|
|
193
185
|
// circle label
|
|
194
186
|
if (y_axis_show_value) {
|
|
195
187
|
const curCircleEl = g.node();
|
|
196
|
-
contentWrapper.append('text').attr('stroke', '#fff').attr('stroke-width', 1).attr('paint-order', 'stroke').attr('fill', theme.labelColor).attr('font-size',
|
|
188
|
+
contentWrapper.append('text').attr('stroke', '#fff').attr('stroke-width', 1).attr('paint-order', 'stroke').attr('fill', theme.labelColor).attr('font-size', BaseUtils.getLabelFontSize(label_font_size)).text(BaseUtils.getSummaryValueDisplayString(summaryColumn, Number(curCircleEl.getAttribute('data-text')), y_axis_summary_method)).call(g => {
|
|
197
189
|
const {
|
|
198
190
|
width
|
|
199
191
|
} = g.node().getBoundingClientRect();
|
|
200
192
|
const translateX = Number(curCircleEl.getAttribute('cx')) - width / 2;
|
|
201
193
|
const translateY = Number(curCircleEl.getAttribute('cy')) - 10;
|
|
202
|
-
g.attr('transform',
|
|
194
|
+
g.attr('transform', `translate(${translateX}, ${translateY})`);
|
|
203
195
|
});
|
|
204
196
|
}
|
|
205
197
|
}).on('click', (event, data) => {
|
|
@@ -273,7 +265,7 @@ class Line extends _chartComponent.default {
|
|
|
273
265
|
}
|
|
274
266
|
});
|
|
275
267
|
// line
|
|
276
|
-
const theme =
|
|
268
|
+
const theme = CHART_THEME_COLOR[globalTheme];
|
|
277
269
|
this.clearOldVerticalAnnotation(contentWrapper);
|
|
278
270
|
this.addVerticalAnnotation(contentWrapper, minDistanceItem, theme);
|
|
279
271
|
} else {
|
|
@@ -306,11 +298,11 @@ class Line extends _chartComponent.default {
|
|
|
306
298
|
y_axis_label_color,
|
|
307
299
|
color_option
|
|
308
300
|
} = chart.config;
|
|
309
|
-
let chartBarColor =
|
|
301
|
+
let chartBarColor = CHART_STYLE_COLORS[0];
|
|
310
302
|
if (chartColorTheme) {
|
|
311
|
-
chartBarColor =
|
|
303
|
+
chartBarColor = BaseUtils.getCurrentTheme(chartColorTheme).colors[0];
|
|
312
304
|
}
|
|
313
|
-
if (color_option ===
|
|
305
|
+
if (color_option === TYPE_COLOR_USING.USE_SPECIFIC_COLORS && y_axis_label_color) {
|
|
314
306
|
chartBarColor = y_axis_label_color;
|
|
315
307
|
}
|
|
316
308
|
return chartBarColor;
|
|
@@ -324,12 +316,12 @@ class Line extends _chartComponent.default {
|
|
|
324
316
|
componentDidMount() {
|
|
325
317
|
this.createChart();
|
|
326
318
|
this.drawChart();
|
|
327
|
-
this.debouncedHandleResize =
|
|
319
|
+
this.debouncedHandleResize = debounce(this.handleResize, 300);
|
|
328
320
|
window.addEventListener('resize', this.debouncedHandleResize);
|
|
329
321
|
}
|
|
330
322
|
componentDidUpdate(prevProps) {
|
|
331
323
|
super.componentDidUpdate(prevProps);
|
|
332
|
-
if (
|
|
324
|
+
if (BaseUtils.shouldChartComponentUpdate(prevProps, this.props)) {
|
|
333
325
|
this.destroyChart();
|
|
334
326
|
this.createChart();
|
|
335
327
|
this.drawChart();
|
|
@@ -347,13 +339,13 @@ class Line extends _chartComponent.default {
|
|
|
347
339
|
tooltipData,
|
|
348
340
|
toolTipPosition
|
|
349
341
|
} = this.state;
|
|
350
|
-
return /*#__PURE__*/
|
|
342
|
+
return /*#__PURE__*/React.createElement("div", {
|
|
351
343
|
ref: ref => this.container = ref,
|
|
352
|
-
className: (
|
|
344
|
+
className: classNames('sea-chart-container', {
|
|
353
345
|
'show-x-axis-label': this.isShowXAxisLabel(chart),
|
|
354
346
|
'show-y-axis-label': this.isShowYAxisLabel(chart)
|
|
355
347
|
})
|
|
356
|
-
}, /*#__PURE__*/
|
|
348
|
+
}, /*#__PURE__*/React.createElement(ToolTip, {
|
|
357
349
|
tooltipData: tooltipData,
|
|
358
350
|
toolTipPosition: toolTipPosition,
|
|
359
351
|
chart: this.chart
|
|
@@ -361,16 +353,16 @@ class Line extends _chartComponent.default {
|
|
|
361
353
|
}
|
|
362
354
|
}
|
|
363
355
|
Line.propTypes = {
|
|
364
|
-
canvasStyle:
|
|
365
|
-
chart:
|
|
366
|
-
groupbyColumn:
|
|
367
|
-
columnGroupbyColumn:
|
|
368
|
-
summaryColumn:
|
|
369
|
-
result:
|
|
370
|
-
tables:
|
|
371
|
-
globalTheme:
|
|
372
|
-
chartColorTheme:
|
|
373
|
-
toggleRecords:
|
|
374
|
-
customRender:
|
|
356
|
+
canvasStyle: PropTypes.object,
|
|
357
|
+
chart: PropTypes.object,
|
|
358
|
+
groupbyColumn: PropTypes.object,
|
|
359
|
+
columnGroupbyColumn: PropTypes.object,
|
|
360
|
+
summaryColumn: PropTypes.object,
|
|
361
|
+
result: PropTypes.array,
|
|
362
|
+
tables: PropTypes.array,
|
|
363
|
+
globalTheme: PropTypes.string,
|
|
364
|
+
chartColorTheme: PropTypes.string,
|
|
365
|
+
toggleRecords: PropTypes.func,
|
|
366
|
+
customRender: PropTypes.func
|
|
375
367
|
};
|
|
376
|
-
|
|
368
|
+
export default Line;
|
|
@@ -1,24 +1,16 @@
|
|
|
1
|
-
|
|
2
|
-
|
|
3
|
-
|
|
4
|
-
|
|
5
|
-
|
|
6
|
-
|
|
7
|
-
}
|
|
8
|
-
|
|
9
|
-
|
|
10
|
-
|
|
11
|
-
|
|
12
|
-
|
|
13
|
-
|
|
14
|
-
var _dtableUtils = require("dtable-utils");
|
|
15
|
-
var _constants = require("../../constants");
|
|
16
|
-
var _utils = require("../../utils");
|
|
17
|
-
var _context = _interopRequireDefault(require("../../context"));
|
|
18
|
-
var _mapJson = _interopRequireDefault(require("../../services/map-json"));
|
|
19
|
-
var _tooltip = _interopRequireDefault(require("../../components/tooltip"));
|
|
20
|
-
var _chartComponent = _interopRequireDefault(require("./chart-component"));
|
|
21
|
-
class MapBubble extends _chartComponent.default {
|
|
1
|
+
import React from 'react';
|
|
2
|
+
import PropTypes from 'prop-types';
|
|
3
|
+
import { debounce } from 'lodash-es';
|
|
4
|
+
import * as d3 from 'd3';
|
|
5
|
+
import { feature } from 'topojson';
|
|
6
|
+
import { getTableById, getTableColumnByKey } from 'dtable-utils';
|
|
7
|
+
import { CHART_SUMMARY_TYPE, MAP_LEVEL, DEFAULT_NUMBER_FORMAT_OBJECT, CHART_THEME_COLOR } from '../../constants';
|
|
8
|
+
import { BaseUtils } from '../../utils';
|
|
9
|
+
import context from '../../context';
|
|
10
|
+
import fetchMapJson from '../../services/map-json';
|
|
11
|
+
import ToolTip from '../../components/tooltip';
|
|
12
|
+
import ChartComponent from './chart-component';
|
|
13
|
+
class MapBubble extends ChartComponent {
|
|
22
14
|
constructor(props) {
|
|
23
15
|
super(props);
|
|
24
16
|
this.handleResize = () => {
|
|
@@ -43,13 +35,13 @@ class MapBubble extends _chartComponent.default {
|
|
|
43
35
|
if (!Array.isArray(data)) return;
|
|
44
36
|
const {
|
|
45
37
|
map_location,
|
|
46
|
-
map_level =
|
|
38
|
+
map_level = MAP_LEVEL.COUNTRY,
|
|
47
39
|
type
|
|
48
40
|
} = chart.config;
|
|
49
|
-
const mediaUrl =
|
|
50
|
-
const mapJson = await (
|
|
41
|
+
const mediaUrl = context.getSetting('mediaUrl');
|
|
42
|
+
const mapJson = await fetchMapJson(map_level, map_location, mediaUrl);
|
|
51
43
|
if (!mapJson) return;
|
|
52
|
-
const newMapJson = map_level ===
|
|
44
|
+
const newMapJson = map_level === MAP_LEVEL.COUNTRY ? feature(mapJson, mapJson.objects) : mapJson;
|
|
53
45
|
const statisticNewData = this.formatMapStatisticData(data, newMapJson, type);
|
|
54
46
|
this.draw(statisticNewData, newMapJson);
|
|
55
47
|
};
|
|
@@ -101,7 +93,7 @@ class MapBubble extends _chartComponent.default {
|
|
|
101
93
|
globalTheme,
|
|
102
94
|
canvasStyle
|
|
103
95
|
} = this.props;
|
|
104
|
-
const theme =
|
|
96
|
+
const theme = CHART_THEME_COLOR[globalTheme];
|
|
105
97
|
const {
|
|
106
98
|
legend_size,
|
|
107
99
|
legend_direction,
|
|
@@ -136,7 +128,7 @@ class MapBubble extends _chartComponent.default {
|
|
|
136
128
|
theme,
|
|
137
129
|
legendDirection: legend_direction,
|
|
138
130
|
legendSize: legend_size,
|
|
139
|
-
legendTextRange: [
|
|
131
|
+
legendTextRange: [BaseUtils.getSummaryValueDisplayString(columnData, d3.min(data, d => d.value), summary_method), BaseUtils.getSummaryValueDisplayString(columnData, d3.max(data, d => d.value), summary_method)],
|
|
140
132
|
type,
|
|
141
133
|
bubbleColor: bubble_color
|
|
142
134
|
});
|
|
@@ -157,11 +149,11 @@ class MapBubble extends _chartComponent.default {
|
|
|
157
149
|
summary_column_key,
|
|
158
150
|
table_id
|
|
159
151
|
} = chart.config;
|
|
160
|
-
let columnData =
|
|
161
|
-
if (summary_type ===
|
|
162
|
-
const table =
|
|
163
|
-
const summaryColumn =
|
|
164
|
-
columnData = summaryColumn.data ||
|
|
152
|
+
let columnData = DEFAULT_NUMBER_FORMAT_OBJECT;
|
|
153
|
+
if (summary_type === CHART_SUMMARY_TYPE.ADVANCED) {
|
|
154
|
+
const table = getTableById(table_id);
|
|
155
|
+
const summaryColumn = getTableColumnByKey(table, summary_column_key) || {};
|
|
156
|
+
columnData = summaryColumn.data || DEFAULT_NUMBER_FORMAT_OBJECT;
|
|
165
157
|
}
|
|
166
158
|
return columnData;
|
|
167
159
|
};
|
|
@@ -222,12 +214,12 @@ class MapBubble extends _chartComponent.default {
|
|
|
222
214
|
componentDidMount() {
|
|
223
215
|
this.createChart();
|
|
224
216
|
this.drawChart();
|
|
225
|
-
this.debouncedHandleResize =
|
|
217
|
+
this.debouncedHandleResize = debounce(this.handleResize, 300);
|
|
226
218
|
window.addEventListener('resize', this.debouncedHandleResize);
|
|
227
219
|
}
|
|
228
220
|
componentDidUpdate(prevProps) {
|
|
229
221
|
super.componentDidUpdate(prevProps);
|
|
230
|
-
if (
|
|
222
|
+
if (BaseUtils.shouldChartComponentUpdate(prevProps, this.props)) {
|
|
231
223
|
this.destroyChart();
|
|
232
224
|
this.createChart();
|
|
233
225
|
this.drawChart();
|
|
@@ -242,10 +234,10 @@ class MapBubble extends _chartComponent.default {
|
|
|
242
234
|
tooltipData,
|
|
243
235
|
toolTipPosition
|
|
244
236
|
} = this.state;
|
|
245
|
-
return /*#__PURE__*/
|
|
237
|
+
return /*#__PURE__*/React.createElement("div", {
|
|
246
238
|
ref: ref => this.container = ref,
|
|
247
239
|
className: "sea-chart-container"
|
|
248
|
-
}, /*#__PURE__*/
|
|
240
|
+
}, /*#__PURE__*/React.createElement(ToolTip, {
|
|
249
241
|
tooltipData: tooltipData,
|
|
250
242
|
toolTipPosition: toolTipPosition,
|
|
251
243
|
chart: this.chart
|
|
@@ -253,16 +245,16 @@ class MapBubble extends _chartComponent.default {
|
|
|
253
245
|
}
|
|
254
246
|
}
|
|
255
247
|
MapBubble.propTypes = {
|
|
256
|
-
canvasStyle:
|
|
257
|
-
chart:
|
|
258
|
-
groupbyColumn:
|
|
259
|
-
columnGroupbyColumn:
|
|
260
|
-
summaryColumn:
|
|
261
|
-
result:
|
|
262
|
-
tables:
|
|
263
|
-
globalTheme:
|
|
264
|
-
chartColorTheme:
|
|
265
|
-
toggleRecords:
|
|
266
|
-
customRender:
|
|
248
|
+
canvasStyle: PropTypes.object,
|
|
249
|
+
chart: PropTypes.object,
|
|
250
|
+
groupbyColumn: PropTypes.object,
|
|
251
|
+
columnGroupbyColumn: PropTypes.object,
|
|
252
|
+
summaryColumn: PropTypes.object,
|
|
253
|
+
result: PropTypes.array,
|
|
254
|
+
tables: PropTypes.array,
|
|
255
|
+
globalTheme: PropTypes.string,
|
|
256
|
+
chartColorTheme: PropTypes.string,
|
|
257
|
+
toggleRecords: PropTypes.func,
|
|
258
|
+
customRender: PropTypes.func
|
|
267
259
|
};
|
|
268
|
-
|
|
260
|
+
export default MapBubble;
|
|
@@ -1,24 +1,16 @@
|
|
|
1
|
-
|
|
2
|
-
|
|
3
|
-
|
|
4
|
-
|
|
5
|
-
|
|
6
|
-
|
|
7
|
-
}
|
|
8
|
-
|
|
9
|
-
|
|
10
|
-
|
|
11
|
-
|
|
12
|
-
|
|
13
|
-
|
|
14
|
-
var _dtableUtils = require("dtable-utils");
|
|
15
|
-
var _constants = require("../../constants");
|
|
16
|
-
var _utils = require("../../utils");
|
|
17
|
-
var _context = _interopRequireDefault(require("../../context"));
|
|
18
|
-
var _mapJson = _interopRequireDefault(require("../../services/map-json"));
|
|
19
|
-
var _tooltip = _interopRequireDefault(require("../../components/tooltip"));
|
|
20
|
-
var _chartComponent = _interopRequireDefault(require("./chart-component"));
|
|
21
|
-
class MapBubble extends _chartComponent.default {
|
|
1
|
+
import React from 'react';
|
|
2
|
+
import PropTypes from 'prop-types';
|
|
3
|
+
import { debounce } from 'lodash-es';
|
|
4
|
+
import * as d3 from 'd3';
|
|
5
|
+
import { feature } from 'topojson';
|
|
6
|
+
import { getTableById, getTableColumnByKey } from 'dtable-utils';
|
|
7
|
+
import { CHART_SUMMARY_TYPE, MAP_LEVEL, DEFAULT_NUMBER_FORMAT_OBJECT, CHART_THEME_COLOR } from '../../constants';
|
|
8
|
+
import { BaseUtils } from '../../utils';
|
|
9
|
+
import context from '../../context';
|
|
10
|
+
import fetchMapJson from '../../services/map-json';
|
|
11
|
+
import ToolTip from '../../components/tooltip';
|
|
12
|
+
import ChartComponent from './chart-component';
|
|
13
|
+
class MapBubble extends ChartComponent {
|
|
22
14
|
constructor(props) {
|
|
23
15
|
super(props);
|
|
24
16
|
this.handleResize = () => {
|
|
@@ -44,15 +36,16 @@ class MapBubble extends _chartComponent.default {
|
|
|
44
36
|
const {
|
|
45
37
|
type
|
|
46
38
|
} = chart.config;
|
|
47
|
-
const mediaUrl =
|
|
48
|
-
const mapJson = await (
|
|
39
|
+
const mediaUrl = context.getSetting('mediaUrl');
|
|
40
|
+
const mapJson = await fetchMapJson(MAP_LEVEL.WORLD, '', mediaUrl);
|
|
49
41
|
if (!mapJson) return;
|
|
50
|
-
const newMapJson =
|
|
42
|
+
const newMapJson = feature(mapJson, mapJson.objects);
|
|
51
43
|
const statisticNewData = this.formatWorldMapStatisticData(data, newMapJson, type);
|
|
52
44
|
this.draw(statisticNewData, newMapJson);
|
|
53
45
|
};
|
|
54
46
|
this.showTooltip = (event, data) => {
|
|
55
47
|
const curData = data.find(item => item.name.includes(event.currentTarget.getAttribute('data-name')));
|
|
48
|
+
if (!curData) return;
|
|
56
49
|
const title = curData.nameType === 'en' ? curData.name : curData.name_cn;
|
|
57
50
|
const value = Number(event.currentTarget.getAttribute('data-value'));
|
|
58
51
|
const {
|
|
@@ -100,7 +93,7 @@ class MapBubble extends _chartComponent.default {
|
|
|
100
93
|
globalTheme,
|
|
101
94
|
canvasStyle
|
|
102
95
|
} = this.props;
|
|
103
|
-
const theme =
|
|
96
|
+
const theme = CHART_THEME_COLOR[globalTheme];
|
|
104
97
|
const {
|
|
105
98
|
legend_size,
|
|
106
99
|
legend_direction,
|
|
@@ -135,7 +128,7 @@ class MapBubble extends _chartComponent.default {
|
|
|
135
128
|
theme,
|
|
136
129
|
legendDirection: legend_direction,
|
|
137
130
|
legendSize: legend_size,
|
|
138
|
-
legendTextRange: [
|
|
131
|
+
legendTextRange: [BaseUtils.getSummaryValueDisplayString(columnData, d3.min(data, d => d.value), summary_method), BaseUtils.getSummaryValueDisplayString(columnData, d3.max(data, d => d.value), summary_method)],
|
|
139
132
|
type,
|
|
140
133
|
bubbleColor: bubble_color || '#2a67d1'
|
|
141
134
|
});
|
|
@@ -156,11 +149,11 @@ class MapBubble extends _chartComponent.default {
|
|
|
156
149
|
summary_column_key,
|
|
157
150
|
table_id
|
|
158
151
|
} = chart.config;
|
|
159
|
-
let columnData =
|
|
160
|
-
if (summary_type ===
|
|
161
|
-
const table =
|
|
162
|
-
const summaryColumn =
|
|
163
|
-
columnData = summaryColumn.data ||
|
|
152
|
+
let columnData = DEFAULT_NUMBER_FORMAT_OBJECT;
|
|
153
|
+
if (summary_type === CHART_SUMMARY_TYPE.ADVANCED) {
|
|
154
|
+
const table = getTableById(table_id);
|
|
155
|
+
const summaryColumn = getTableColumnByKey(table, summary_column_key) || {};
|
|
156
|
+
columnData = summaryColumn.data || DEFAULT_NUMBER_FORMAT_OBJECT;
|
|
164
157
|
}
|
|
165
158
|
return columnData;
|
|
166
159
|
};
|
|
@@ -221,12 +214,12 @@ class MapBubble extends _chartComponent.default {
|
|
|
221
214
|
componentDidMount() {
|
|
222
215
|
this.createChart();
|
|
223
216
|
this.drawChart();
|
|
224
|
-
this.debouncedHandleResize =
|
|
217
|
+
this.debouncedHandleResize = debounce(this.handleResize, 300);
|
|
225
218
|
window.addEventListener('resize', this.debouncedHandleResize);
|
|
226
219
|
}
|
|
227
220
|
componentDidUpdate(prevProps) {
|
|
228
221
|
super.componentDidUpdate(prevProps);
|
|
229
|
-
if (
|
|
222
|
+
if (BaseUtils.shouldChartComponentUpdate(prevProps, this.props)) {
|
|
230
223
|
this.destroyChart();
|
|
231
224
|
this.createChart();
|
|
232
225
|
this.drawChart();
|
|
@@ -241,10 +234,10 @@ class MapBubble extends _chartComponent.default {
|
|
|
241
234
|
tooltipData,
|
|
242
235
|
toolTipPosition
|
|
243
236
|
} = this.state;
|
|
244
|
-
return /*#__PURE__*/
|
|
237
|
+
return /*#__PURE__*/React.createElement("div", {
|
|
245
238
|
ref: ref => this.container = ref,
|
|
246
239
|
className: "sea-chart-container"
|
|
247
|
-
}, /*#__PURE__*/
|
|
240
|
+
}, /*#__PURE__*/React.createElement(ToolTip, {
|
|
248
241
|
tooltipData: tooltipData,
|
|
249
242
|
toolTipPosition: toolTipPosition,
|
|
250
243
|
chart: this.chart
|
|
@@ -252,16 +245,16 @@ class MapBubble extends _chartComponent.default {
|
|
|
252
245
|
}
|
|
253
246
|
}
|
|
254
247
|
MapBubble.propTypes = {
|
|
255
|
-
canvasStyle:
|
|
256
|
-
chart:
|
|
257
|
-
groupbyColumn:
|
|
258
|
-
columnGroupbyColumn:
|
|
259
|
-
summaryColumn:
|
|
260
|
-
result:
|
|
261
|
-
tables:
|
|
262
|
-
globalTheme:
|
|
263
|
-
chartColorTheme:
|
|
264
|
-
toggleRecords:
|
|
265
|
-
customRender:
|
|
248
|
+
canvasStyle: PropTypes.object,
|
|
249
|
+
chart: PropTypes.object,
|
|
250
|
+
groupbyColumn: PropTypes.object,
|
|
251
|
+
columnGroupbyColumn: PropTypes.object,
|
|
252
|
+
summaryColumn: PropTypes.object,
|
|
253
|
+
result: PropTypes.array,
|
|
254
|
+
tables: PropTypes.array,
|
|
255
|
+
globalTheme: PropTypes.string,
|
|
256
|
+
chartColorTheme: PropTypes.string,
|
|
257
|
+
toggleRecords: PropTypes.func,
|
|
258
|
+
customRender: PropTypes.func
|
|
266
259
|
};
|
|
267
|
-
|
|
260
|
+
export default MapBubble;
|