sea-chart 2.0.32 → 2.0.33
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.
|
@@ -69,7 +69,7 @@ const TypesDialog = _ref => {
|
|
|
69
69
|
}, [onChange, selectedType, onToggle]);
|
|
70
70
|
const handleFilterTypes = (0, _react.useCallback)(() => {
|
|
71
71
|
if (hideTypeToggle) {
|
|
72
|
-
const newChartTypes = _constants.CHART_TYPES.filter(item => ['Histogram', 'Bar_chart', 'Line_chart', 'Area', 'Pie_chart', 'Scatter_chart', 'Combination_chart', 'Map', 'Heat_map', 'Facet_chart', 'Gauge'].includes(item.name));
|
|
72
|
+
const newChartTypes = _constants.CHART_TYPES.filter(item => ['Histogram', 'Bar_chart', 'Line_chart', 'Area', 'Pie_chart', 'Scatter_chart', 'Combination_chart', 'Map', 'Heat_map', 'Facet_chart', 'Gauge', 'Tree_map'].includes(item.name));
|
|
73
73
|
return newChartTypes;
|
|
74
74
|
}
|
|
75
75
|
return _constants.CHART_TYPES;
|
|
@@ -37,6 +37,7 @@ var _mapWorldBubble = _interopRequireDefault(require("./map-world-bubble"));
|
|
|
37
37
|
var _heatMap = _interopRequireDefault(require("./heat-map"));
|
|
38
38
|
var _mirror = _interopRequireDefault(require("./mirror"));
|
|
39
39
|
var _dashboard = _interopRequireDefault(require("./dashboard"));
|
|
40
|
+
var _treemap = _interopRequireDefault(require("./treemap"));
|
|
40
41
|
var _trend = _interopRequireDefault(require("./trend"));
|
|
41
42
|
var _tableElement = _interopRequireDefault(require("./table-element"));
|
|
42
43
|
const Wrapper = _ref => {
|
|
@@ -302,6 +303,12 @@ const Wrapper = _ref => {
|
|
|
302
303
|
canvasStyle: canvasStyle
|
|
303
304
|
}));
|
|
304
305
|
}
|
|
306
|
+
case _constants.CHART_TYPE.TREE_MAP:
|
|
307
|
+
{
|
|
308
|
+
return /*#__PURE__*/_react.default.createElement(_treemap.default, Object.assign({}, baseProps, {
|
|
309
|
+
canvasStyle: canvasStyle
|
|
310
|
+
}));
|
|
311
|
+
}
|
|
305
312
|
case _constants.CHART_TYPE.BASIC_NUMBER_CARD:
|
|
306
313
|
{
|
|
307
314
|
return /*#__PURE__*/_react.default.createElement(_basicNumberCard.default, Object.assign({}, baseProps, {
|
|
@@ -0,0 +1,220 @@
|
|
|
1
|
+
"use strict";
|
|
2
|
+
|
|
3
|
+
var _interopRequireWildcard = require("@babel/runtime/helpers/interopRequireWildcard").default;
|
|
4
|
+
var _interopRequireDefault = require("@babel/runtime/helpers/interopRequireDefault").default;
|
|
5
|
+
Object.defineProperty(exports, "__esModule", {
|
|
6
|
+
value: true
|
|
7
|
+
});
|
|
8
|
+
exports.default = void 0;
|
|
9
|
+
var _react = _interopRequireDefault(require("react"));
|
|
10
|
+
var _propTypes = _interopRequireDefault(require("prop-types"));
|
|
11
|
+
var _lodashEs = require("lodash-es");
|
|
12
|
+
var d3 = _interopRequireWildcard(require("d3"));
|
|
13
|
+
var _classnames = _interopRequireDefault(require("classnames"));
|
|
14
|
+
var _constants = require("../../constants");
|
|
15
|
+
var _utils = require("../../utils");
|
|
16
|
+
var _intl = _interopRequireDefault(require("../../intl"));
|
|
17
|
+
var _tooltip = _interopRequireDefault(require("../../components/tooltip"));
|
|
18
|
+
var _chartComponent = _interopRequireDefault(require("./chart-component"));
|
|
19
|
+
class Treemap extends _chartComponent.default {
|
|
20
|
+
constructor(props) {
|
|
21
|
+
super(props);
|
|
22
|
+
this.handleResize = () => {
|
|
23
|
+
this.destroyChart();
|
|
24
|
+
this.createChart();
|
|
25
|
+
this.drawChart();
|
|
26
|
+
};
|
|
27
|
+
this.createChart = () => {
|
|
28
|
+
const {
|
|
29
|
+
chart
|
|
30
|
+
} = this.props;
|
|
31
|
+
const initConfig = {
|
|
32
|
+
insertPadding: 30
|
|
33
|
+
};
|
|
34
|
+
this.initChart(this.container, chart === null || chart === void 0 ? void 0 : chart.id, initConfig);
|
|
35
|
+
};
|
|
36
|
+
this.drawChart = () => {
|
|
37
|
+
const {
|
|
38
|
+
customRender
|
|
39
|
+
} = this.props;
|
|
40
|
+
let {
|
|
41
|
+
result: data
|
|
42
|
+
} = this.props;
|
|
43
|
+
data = _utils.BaseUtils.formatEmptyName(data, '', _intl.default.get('Empty'));
|
|
44
|
+
if (!Array.isArray(data)) return;
|
|
45
|
+
this.draw(data);
|
|
46
|
+
(0, _utils.isFunction)(customRender) && customRender(this.chart);
|
|
47
|
+
};
|
|
48
|
+
this.showTooltip = (event, _ref) => {
|
|
49
|
+
let {
|
|
50
|
+
data
|
|
51
|
+
} = _ref;
|
|
52
|
+
const {
|
|
53
|
+
summaryColumn,
|
|
54
|
+
chart
|
|
55
|
+
} = this.props;
|
|
56
|
+
const {
|
|
57
|
+
y_axis_summary_method
|
|
58
|
+
} = chart.config;
|
|
59
|
+
const {
|
|
60
|
+
offsetX,
|
|
61
|
+
offsetY
|
|
62
|
+
} = event;
|
|
63
|
+
const newTooltipData = {
|
|
64
|
+
title: data.name,
|
|
65
|
+
items: [{
|
|
66
|
+
color: '',
|
|
67
|
+
name: _intl.default.get('Amount'),
|
|
68
|
+
value: _utils.BaseUtils.getSummaryValueDisplayString(summaryColumn, Number(data.value), y_axis_summary_method)
|
|
69
|
+
}]
|
|
70
|
+
};
|
|
71
|
+
this.setState({
|
|
72
|
+
tooltipData: newTooltipData
|
|
73
|
+
});
|
|
74
|
+
this.setState({
|
|
75
|
+
toolTipPosition: {
|
|
76
|
+
offsetX,
|
|
77
|
+
offsetY
|
|
78
|
+
}
|
|
79
|
+
});
|
|
80
|
+
};
|
|
81
|
+
this.moveTooltip = event => {
|
|
82
|
+
const {
|
|
83
|
+
offsetX,
|
|
84
|
+
offsetY
|
|
85
|
+
} = event;
|
|
86
|
+
this.setState({
|
|
87
|
+
toolTipPosition: {
|
|
88
|
+
offsetX,
|
|
89
|
+
offsetY
|
|
90
|
+
}
|
|
91
|
+
});
|
|
92
|
+
};
|
|
93
|
+
this.hiddenTooltip = event => {
|
|
94
|
+
this.setState({
|
|
95
|
+
toolTipPosition: null
|
|
96
|
+
});
|
|
97
|
+
};
|
|
98
|
+
this.draw = data => {
|
|
99
|
+
const {
|
|
100
|
+
chart,
|
|
101
|
+
tables,
|
|
102
|
+
chartColorTheme
|
|
103
|
+
} = this.props;
|
|
104
|
+
const colorsTheme = _utils.BaseUtils.getCurrentTheme(chartColorTheme);
|
|
105
|
+
const {
|
|
106
|
+
data: newData
|
|
107
|
+
} = _utils.BaseUtils.formatPieChartData(data, chart, tables, colorsTheme);
|
|
108
|
+
if (!Array.isArray(newData)) return;
|
|
109
|
+
const {
|
|
110
|
+
width: chartWidth,
|
|
111
|
+
height: chartHeight,
|
|
112
|
+
insertPadding
|
|
113
|
+
} = this.chartBoundingClientRect;
|
|
114
|
+
const fullData = this.getFullData(newData);
|
|
115
|
+
const root = d3.treemap().size([chartWidth - insertPadding * 2, chartHeight - insertPadding * 2]).padding(1)(d3.hierarchy(fullData).sum(d => d.value)).sort((a, b) => a.value - b.value);
|
|
116
|
+
const contentWrapper = this.chart.append('g').attr('class', 'content-wrapper').attr('transform', "translate(".concat(insertPadding, ",").concat(insertPadding, ")"));
|
|
117
|
+
contentWrapper.selectAll().data(root.leaves()).join('g').attr('transform', d => "translate(".concat(d.x0, ",").concat(d.y0, ")")).append('rect').attr('opacity', 1).attr('fill', d => {
|
|
118
|
+
const {
|
|
119
|
+
data
|
|
120
|
+
} = d;
|
|
121
|
+
return data.color;
|
|
122
|
+
}).attr('width', d => d.x1 - d.x0).attr('height', d => d.y1 - d.y0).attr('data-name', d => d.data.name).call(g => {
|
|
123
|
+
g.nodes().forEach(group => {
|
|
124
|
+
const name = group.getAttribute('data-name');
|
|
125
|
+
const {
|
|
126
|
+
width,
|
|
127
|
+
height
|
|
128
|
+
} = group.getBoundingClientRect();
|
|
129
|
+
d3.select(group.parentNode).append('text').attr('stroke', '#fff').attr('stroke-width', 0.5).attr('paint-order', 'stroke').attr('fill', '#fff').text(name).call(t => {
|
|
130
|
+
const {
|
|
131
|
+
width: tWidth,
|
|
132
|
+
height: tHeight
|
|
133
|
+
} = t.node().getBoundingClientRect();
|
|
134
|
+
t.attr('x', width / 2 - tWidth / 2);
|
|
135
|
+
t.attr('y', height / 2 - tHeight / 2);
|
|
136
|
+
});
|
|
137
|
+
});
|
|
138
|
+
}).on('click', (event, data) => {
|
|
139
|
+
this.props.toggleRecords(data);
|
|
140
|
+
}).on('mouseover', (event, data) => {
|
|
141
|
+
this.showTooltip(event, data);
|
|
142
|
+
}).on('mousemove', event => {
|
|
143
|
+
this.moveTooltip(event);
|
|
144
|
+
}).on('mouseleave', event => {
|
|
145
|
+
this.hiddenTooltip(event);
|
|
146
|
+
});
|
|
147
|
+
};
|
|
148
|
+
this.getFullData = data => {
|
|
149
|
+
const fullData = {
|
|
150
|
+
name: 'root',
|
|
151
|
+
children: data.map(item => {
|
|
152
|
+
let name = item.name;
|
|
153
|
+
item.name = name || name === 0 ? name : _intl.default.get(_constants.EMPTY_NAME);
|
|
154
|
+
if (name === '_Others') {
|
|
155
|
+
item.name = _intl.default.get('Others');
|
|
156
|
+
}
|
|
157
|
+
return item;
|
|
158
|
+
})
|
|
159
|
+
};
|
|
160
|
+
return fullData;
|
|
161
|
+
};
|
|
162
|
+
this.chart = null;
|
|
163
|
+
this.state = {
|
|
164
|
+
tooltipData: null,
|
|
165
|
+
toolTipPosition: null
|
|
166
|
+
};
|
|
167
|
+
}
|
|
168
|
+
componentDidMount() {
|
|
169
|
+
this.createChart();
|
|
170
|
+
this.drawChart();
|
|
171
|
+
this.debouncedHandleResize = (0, _lodashEs.debounce)(this.handleResize, 300);
|
|
172
|
+
window.addEventListener('resize', this.debouncedHandleResize);
|
|
173
|
+
}
|
|
174
|
+
componentDidUpdate(prevProps) {
|
|
175
|
+
super.componentDidUpdate(prevProps);
|
|
176
|
+
if (_utils.BaseUtils.shouldChartComponentUpdate(prevProps, this.props)) {
|
|
177
|
+
this.destroyChart();
|
|
178
|
+
this.createChart();
|
|
179
|
+
this.drawChart();
|
|
180
|
+
}
|
|
181
|
+
}
|
|
182
|
+
componentWillUnmount() {
|
|
183
|
+
this.destroyChart();
|
|
184
|
+
window.removeEventListener('resize', this.debouncedHandleResize);
|
|
185
|
+
}
|
|
186
|
+
render() {
|
|
187
|
+
const {
|
|
188
|
+
chart
|
|
189
|
+
} = this.props;
|
|
190
|
+
const {
|
|
191
|
+
tooltipData,
|
|
192
|
+
toolTipPosition
|
|
193
|
+
} = this.state;
|
|
194
|
+
return /*#__PURE__*/_react.default.createElement("div", {
|
|
195
|
+
ref: ref => this.container = ref,
|
|
196
|
+
className: (0, _classnames.default)('sea-chart-container', {
|
|
197
|
+
'show-x-axis-label': this.isShowXAxisLabel(chart),
|
|
198
|
+
'show-y-axis-label': this.isShowYAxisLabel(chart)
|
|
199
|
+
})
|
|
200
|
+
}, /*#__PURE__*/_react.default.createElement(_tooltip.default, {
|
|
201
|
+
tooltipData: tooltipData,
|
|
202
|
+
toolTipPosition: toolTipPosition,
|
|
203
|
+
chart: this.chart
|
|
204
|
+
}));
|
|
205
|
+
}
|
|
206
|
+
}
|
|
207
|
+
Treemap.propTypes = {
|
|
208
|
+
canvasStyle: _propTypes.default.object,
|
|
209
|
+
chart: _propTypes.default.object,
|
|
210
|
+
groupbyColumn: _propTypes.default.object,
|
|
211
|
+
columnGroupbyColumn: _propTypes.default.object,
|
|
212
|
+
summaryColumn: _propTypes.default.object,
|
|
213
|
+
result: _propTypes.default.array,
|
|
214
|
+
tables: _propTypes.default.array,
|
|
215
|
+
globalTheme: _propTypes.default.string,
|
|
216
|
+
chartColorTheme: _propTypes.default.string,
|
|
217
|
+
toggleRecords: _propTypes.default.func,
|
|
218
|
+
customRender: _propTypes.default.func
|
|
219
|
+
};
|
|
220
|
+
var _default = exports.default = Treemap;
|