@easyv/charts 1.8.15 → 1.8.17
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/lib/components/Band.js +356 -356
- package/lib/components/Carousel.js +31 -21
- package/lib/components/Label.js +356 -356
- package/lib/components/Legend.js +312 -312
- package/lib/components/PieChart.js +8 -6
- package/lib/components/pieTooltip.js +202 -202
- package/lib/utils/index.js +823 -822
- package/package.json +1 -1
- package/src/components/Band.tsx +1 -1
- package/src/components/PieChart.js +36 -9
- package/src/utils/index.js +1 -0
package/lib/components/Label.js
CHANGED
|
@@ -1,359 +1,359 @@
|
|
|
1
|
-
"use strict";
|
|
2
|
-
|
|
3
|
-
var _interopRequireDefault = require("@babel/runtime/helpers/interopRequireDefault");
|
|
4
|
-
Object.defineProperty(exports, "__esModule", {
|
|
5
|
-
value: true
|
|
6
|
-
});
|
|
7
|
-
exports["default"] = void 0;
|
|
8
|
-
var _extends2 = _interopRequireDefault(require("@babel/runtime/helpers/extends"));
|
|
9
|
-
var _slicedToArray2 = _interopRequireDefault(require("@babel/runtime/helpers/slicedToArray"));
|
|
10
|
-
var _objectWithoutProperties2 = _interopRequireDefault(require("@babel/runtime/helpers/objectWithoutProperties"));
|
|
11
|
-
var _defineProperty2 = _interopRequireDefault(require("@babel/runtime/helpers/defineProperty"));
|
|
12
|
-
var _react = require("react");
|
|
13
|
-
var _d3v = require("d3v7");
|
|
14
|
-
var _utils = require("../utils");
|
|
15
|
-
var _context = require("../context");
|
|
16
|
-
var _excluded = ["show", "extent"],
|
|
17
|
-
_excluded2 = ["seriesIntervalWidth", "paddingInner", "showType", "highlight"];
|
|
18
|
-
function ownKeys(e, r) { var t = Object.keys(e); if (Object.getOwnPropertySymbols) { var o = Object.getOwnPropertySymbols(e); r && (o = o.filter(function (r) { return Object.getOwnPropertyDescriptor(e, r).enumerable; })), t.push.apply(t, o); } return t; }
|
|
1
|
+
"use strict";
|
|
2
|
+
|
|
3
|
+
var _interopRequireDefault = require("@babel/runtime/helpers/interopRequireDefault");
|
|
4
|
+
Object.defineProperty(exports, "__esModule", {
|
|
5
|
+
value: true
|
|
6
|
+
});
|
|
7
|
+
exports["default"] = void 0;
|
|
8
|
+
var _extends2 = _interopRequireDefault(require("@babel/runtime/helpers/extends"));
|
|
9
|
+
var _slicedToArray2 = _interopRequireDefault(require("@babel/runtime/helpers/slicedToArray"));
|
|
10
|
+
var _objectWithoutProperties2 = _interopRequireDefault(require("@babel/runtime/helpers/objectWithoutProperties"));
|
|
11
|
+
var _defineProperty2 = _interopRequireDefault(require("@babel/runtime/helpers/defineProperty"));
|
|
12
|
+
var _react = require("react");
|
|
13
|
+
var _d3v = require("d3v7");
|
|
14
|
+
var _utils = require("../utils");
|
|
15
|
+
var _context = require("../context");
|
|
16
|
+
var _excluded = ["show", "extent"],
|
|
17
|
+
_excluded2 = ["seriesIntervalWidth", "paddingInner", "showType", "highlight"];
|
|
18
|
+
function ownKeys(e, r) { var t = Object.keys(e); if (Object.getOwnPropertySymbols) { var o = Object.getOwnPropertySymbols(e); r && (o = o.filter(function (r) { return Object.getOwnPropertyDescriptor(e, r).enumerable; })), t.push.apply(t, o); } return t; }
|
|
19
19
|
function _objectSpread(e) { for (var r = 1; r < arguments.length; r++) { var t = null != arguments[r] ? arguments[r] : {}; r % 2 ? ownKeys(Object(t), !0).forEach(function (r) { (0, _defineProperty2["default"])(e, r, t[r]); }) : Object.getOwnPropertyDescriptors ? Object.defineProperties(e, Object.getOwnPropertyDescriptors(t)) : ownKeys(Object(t)).forEach(function (r) { Object.defineProperty(e, r, Object.getOwnPropertyDescriptor(t, r)); }); } return e; } /**
|
|
20
20
|
* 轴类图表标签
|
|
21
|
-
*/
|
|
22
|
-
var getHighlightData = function getHighlightData(data, extent) {
|
|
23
|
-
switch (extent) {
|
|
24
|
-
case "min":
|
|
25
|
-
var minData = (0, _d3v.min)(data, function (d) {
|
|
26
|
-
return d.data.y;
|
|
27
|
-
});
|
|
28
|
-
return data.map(function (item) {
|
|
29
|
-
return _objectSpread(_objectSpread({}, item), {}, {
|
|
30
|
-
flag: minData == item.data.y ? "min" : ""
|
|
31
|
-
});
|
|
32
|
-
});
|
|
33
|
-
case "max":
|
|
34
|
-
var maxData = (0, _d3v.max)(data, function (d) {
|
|
35
|
-
return d.data.y;
|
|
36
|
-
});
|
|
37
|
-
return data.map(function (item) {
|
|
38
|
-
return _objectSpread(_objectSpread({}, item), {}, {
|
|
39
|
-
flag: maxData == item.data.y ? "max" : ""
|
|
40
|
-
});
|
|
41
|
-
});
|
|
42
|
-
default:
|
|
43
|
-
return data;
|
|
44
|
-
}
|
|
45
|
-
};
|
|
46
|
-
var _default = exports["default"] = /*#__PURE__*/(0, _react.memo)(function (_ref) {
|
|
47
|
-
var _ref$config = _ref.config,
|
|
48
|
-
_ref$config$seriesInt = _ref$config.seriesIntervalWidth,
|
|
49
|
-
paddingInner = _ref$config$seriesInt === void 0 ? 0 : _ref$config$seriesInt,
|
|
50
|
-
_ref$config$paddingIn = _ref$config.paddingInner,
|
|
51
|
-
paddingOuter = _ref$config$paddingIn === void 0 ? 0 : _ref$config$paddingIn,
|
|
52
|
-
_ref$config$showType = _ref$config.showType,
|
|
53
|
-
seriesType = _ref$config$showType === void 0 ? 'bar' : _ref$config$showType,
|
|
54
|
-
_ref$config$highlight = _ref$config.highlight,
|
|
55
|
-
showHighlight = _ref$config$highlight.show,
|
|
56
|
-
extent = _ref$config$highlight.extent,
|
|
57
|
-
highlightStyle = (0, _objectWithoutProperties2["default"])(_ref$config$highlight, _excluded),
|
|
58
|
-
other = (0, _objectWithoutProperties2["default"])(_ref$config, _excluded2),
|
|
59
|
-
config = _ref.config,
|
|
60
|
-
curXLabel = _ref.curXLabel,
|
|
61
|
-
selectStyle = _ref.selectStyle,
|
|
62
|
-
_ref$bandLength = _ref.bandLength,
|
|
63
|
-
bandLength = _ref$bandLength === void 0 ? 0 : _ref$bandLength,
|
|
64
|
-
data = _ref.data,
|
|
65
|
-
_ref$xAxis = _ref.xAxis,
|
|
66
|
-
xScaler = _ref$xAxis.scaler,
|
|
67
|
-
step = _ref$xAxis.step,
|
|
68
|
-
direction = _ref$xAxis.direction,
|
|
69
|
-
_ref$yAxis = _ref.yAxis,
|
|
70
|
-
yScaler = _ref$yAxis.scaler,
|
|
71
|
-
isClipAxis = _ref$yAxis.isClipAxis,
|
|
72
|
-
clipValue = _ref$yAxis.clipValue,
|
|
73
|
-
triggerClick = _ref.triggerClick;
|
|
74
|
-
var selectConfig = other;
|
|
75
|
-
if (selectStyle) {
|
|
76
|
-
var show = selectStyle.show,
|
|
77
|
-
showType = selectStyle.showType,
|
|
78
|
-
icon = selectStyle.icon,
|
|
79
|
-
label = selectStyle.numlabel;
|
|
80
|
-
if (show && seriesType == showType) {
|
|
81
|
-
if (showType == "bar") {
|
|
82
|
-
selectConfig = {
|
|
83
|
-
label: label
|
|
84
|
-
};
|
|
85
|
-
} else {
|
|
86
|
-
selectConfig = {
|
|
87
|
-
icon: icon,
|
|
88
|
-
label: label
|
|
89
|
-
};
|
|
90
|
-
}
|
|
91
|
-
}
|
|
92
|
-
}
|
|
93
|
-
var highlightConfig = other;
|
|
94
|
-
if (highlightStyle) {
|
|
95
|
-
highlightConfig = _objectSpread(_objectSpread({}, other), {}, {
|
|
96
|
-
label: highlightStyle.numlabel
|
|
97
|
-
});
|
|
98
|
-
}
|
|
99
|
-
var lineType = config.hasOwnProperty("line"); // 堆叠处理
|
|
100
|
-
|
|
101
|
-
if (!data.length) return null;
|
|
102
|
-
var _useContext = (0, _react.useContext)(_context.chartContext),
|
|
103
|
-
width = _useContext.width,
|
|
104
|
-
height = _useContext.height;
|
|
105
|
-
var _getSeriesInfo = (0, _utils.getSeriesInfo)({
|
|
106
|
-
step: step,
|
|
107
|
-
bandLength: bandLength,
|
|
108
|
-
paddingInner: paddingInner,
|
|
109
|
-
paddingOuter: paddingOuter
|
|
110
|
-
}),
|
|
111
|
-
seriesStep = _getSeriesInfo.seriesStep,
|
|
112
|
-
seriesWidth = _getSeriesInfo.seriesWidth,
|
|
113
|
-
seriesStart = _getSeriesInfo.seriesStart;
|
|
114
|
-
var _data = showHighlight ? getHighlightData(data, extent) : data;
|
|
115
|
-
var isVertical = direction === "vertical";
|
|
116
|
-
return /*#__PURE__*/React.createElement("g", {
|
|
117
|
-
className: "__easyv-label"
|
|
118
|
-
}, _data.map(function (_ref2, i) {
|
|
119
|
-
var flag = _ref2.flag,
|
|
120
|
-
index = _ref2.index,
|
|
121
|
-
_ref2$bound = (0, _slicedToArray2["default"])(_ref2.bound, 2),
|
|
122
|
-
start = _ref2$bound[0],
|
|
123
|
-
end = _ref2$bound[1],
|
|
124
|
-
data = _ref2.data,
|
|
125
|
-
_ref2$data = _ref2.data,
|
|
126
|
-
x = _ref2$data.x,
|
|
127
|
-
y = _ref2$data.y,
|
|
128
|
-
showY = _ref2$data.showY,
|
|
129
|
-
s = _ref2$data.s;
|
|
130
|
-
var y1, y2;
|
|
131
|
-
var _ref3 = x == curXLabel ? selectConfig : flag ? highlightConfig : other,
|
|
132
|
-
icon = _ref3.icon,
|
|
133
|
-
label = _ref3.label;
|
|
134
|
-
var showIcon = icon && icon.show;
|
|
135
|
-
var showLabel = label && label.show;
|
|
136
|
-
var _ref4 = label || {},
|
|
137
|
-
_ref4$position = _ref4.position,
|
|
138
|
-
_position = _ref4$position === void 0 ? "outerStart" : _ref4$position,
|
|
139
|
-
_ref4$reverse = _ref4.reverse,
|
|
140
|
-
reverse = _ref4$reverse === void 0 ? true : _ref4$reverse;
|
|
141
|
-
if (isClipAxis) {
|
|
142
|
-
if (end > +clipValue) {
|
|
143
|
-
y1 = yScaler[1](start);
|
|
144
|
-
y2 = yScaler[0](end);
|
|
145
|
-
} else {
|
|
146
|
-
y1 = yScaler[1](start);
|
|
147
|
-
y2 = yScaler[1](end);
|
|
148
|
-
}
|
|
149
|
-
} else {
|
|
150
|
-
y1 = yScaler(isVertical ? end : start);
|
|
151
|
-
// 处理z型折线图和堆叠柱图的逻辑冲突
|
|
152
|
-
y2 = lineType ? start ? yScaler(isVertical ? start : end - start) : yScaler(isVertical ? start : end) : yScaler(isVertical ? start : end);
|
|
153
|
-
}
|
|
154
|
-
|
|
155
|
-
// const y2 = yScaler(isVertical ? start : end);
|
|
156
|
-
var positionX = xScaler(x) - step / 2 + seriesStart + index * seriesStep;
|
|
157
|
-
if (isNaN(positionX)) return null;
|
|
158
|
-
var position = positionX + (config.line ? step : seriesWidth) / 2;
|
|
159
|
-
var labelPosition = isVertical ? getVerticalLabel({
|
|
160
|
-
position: _position,
|
|
161
|
-
y: y,
|
|
162
|
-
y1: y1,
|
|
163
|
-
y2: y2,
|
|
164
|
-
width: width,
|
|
165
|
-
reverse: reverse
|
|
166
|
-
}) : getHorizontalLabel({
|
|
167
|
-
position: _position,
|
|
168
|
-
y: y,
|
|
169
|
-
y1: y1,
|
|
170
|
-
y2: y2,
|
|
171
|
-
height: height,
|
|
172
|
-
reverse: reverse
|
|
173
|
-
});
|
|
174
|
-
var attr = isVertical ? _objectSpread(_objectSpread({}, labelPosition), {}, {
|
|
175
|
-
y: position,
|
|
176
|
-
dominantBaseline: "middle"
|
|
177
|
-
}) : _objectSpread(_objectSpread({}, labelPosition), {}, {
|
|
178
|
-
x: position,
|
|
179
|
-
textAnchor: "middle"
|
|
180
|
-
});
|
|
181
|
-
return /*#__PURE__*/React.createElement("g", {
|
|
182
|
-
key: i,
|
|
183
|
-
onClick: function onClick(e) {
|
|
184
|
-
return triggerClick(e, "setCurrent");
|
|
185
|
-
},
|
|
186
|
-
style: {
|
|
187
|
-
cursor: "pointer"
|
|
188
|
-
},
|
|
189
|
-
"data-data": JSON.stringify(data)
|
|
190
|
-
}, showIcon && !isNaN(attr.y) && /*#__PURE__*/React.createElement(Icon, {
|
|
191
|
-
cx: attr.x,
|
|
192
|
-
cy: y2,
|
|
193
|
-
config: icon
|
|
194
|
-
}), showLabel && /*#__PURE__*/React.createElement(Label, (0, _extends2["default"])({
|
|
195
|
-
value: showY,
|
|
196
|
-
config: label,
|
|
197
|
-
reverse: reverse
|
|
198
|
-
}, attr)));
|
|
199
|
-
}));
|
|
200
|
-
});
|
|
201
|
-
var Label = function Label(_ref5) {
|
|
202
|
-
var x = _ref5.x,
|
|
203
|
-
y = _ref5.y,
|
|
204
|
-
value = _ref5.value,
|
|
205
|
-
_ref5$config = _ref5.config,
|
|
206
|
-
font = _ref5$config.font,
|
|
207
|
-
_ref5$config$translat = _ref5$config.translate,
|
|
208
|
-
_ref5$config$translat2 = _ref5$config$translat.x,
|
|
209
|
-
translateX = _ref5$config$translat2 === void 0 ? 0 : _ref5$config$translat2,
|
|
210
|
-
_ref5$config$translat3 = _ref5$config$translat.y,
|
|
211
|
-
translateY = _ref5$config$translat3 === void 0 ? 0 : _ref5$config$translat3,
|
|
212
|
-
_ref5$config$suffix = _ref5$config.suffix,
|
|
213
|
-
content = _ref5$config$suffix.content,
|
|
214
|
-
suffixFont = _ref5$config$suffix.font,
|
|
215
|
-
_ref5$config$suffix$t = _ref5$config$suffix.translate,
|
|
216
|
-
suffixX = _ref5$config$suffix$t.x,
|
|
217
|
-
suffixY = _ref5$config$suffix$t.y,
|
|
218
|
-
_ref5$textAnchor = _ref5.textAnchor,
|
|
219
|
-
textAnchor = _ref5$textAnchor === void 0 ? "middle" : _ref5$textAnchor,
|
|
220
|
-
_ref5$dominantBaselin = _ref5.dominantBaseline,
|
|
221
|
-
dominantBaseline = _ref5$dominantBaselin === void 0 ? "middle" : _ref5$dominantBaselin,
|
|
222
|
-
reverse = _ref5.reverse;
|
|
223
|
-
return /*#__PURE__*/React.createElement("text", {
|
|
224
|
-
x: x,
|
|
225
|
-
y: y,
|
|
226
|
-
transform: (0, _utils.getTranslate2d)({
|
|
227
|
-
x: translateX,
|
|
228
|
-
y: translateY * (value < 0 && reverse ? -1 : 1)
|
|
229
|
-
}),
|
|
230
|
-
textAnchor: textAnchor,
|
|
231
|
-
dominantBaseline: dominantBaseline,
|
|
232
|
-
style: _objectSpread({}, (0, _utils.formatFont)(font, "svg"))
|
|
233
|
-
}, /*#__PURE__*/React.createElement("tspan", null, value), /*#__PURE__*/React.createElement("tspan", {
|
|
234
|
-
dx: suffixX,
|
|
235
|
-
dy: suffixY,
|
|
236
|
-
style: _objectSpread({}, (0, _utils.getFontStyle)(suffixFont, "svg"))
|
|
237
|
-
}, content));
|
|
238
|
-
};
|
|
239
|
-
var Icon = function Icon(_ref6) {
|
|
240
|
-
var cx = _ref6.cx,
|
|
241
|
-
cy = _ref6.cy,
|
|
242
|
-
_ref6$config = _ref6.config,
|
|
243
|
-
mode = _ref6$config.mode,
|
|
244
|
-
inner = _ref6$config.inner,
|
|
245
|
-
outer = _ref6$config.outer,
|
|
246
|
-
color = _ref6$config.color,
|
|
247
|
-
radius = _ref6$config.radius,
|
|
248
|
-
image = _ref6$config.image,
|
|
249
|
-
_ref6$config$size = _ref6$config.size,
|
|
250
|
-
width = _ref6$config$size.width,
|
|
251
|
-
height = _ref6$config$size.height;
|
|
252
|
-
return mode == "single" ? /*#__PURE__*/React.createElement(Circle, {
|
|
253
|
-
cx: cx,
|
|
254
|
-
cy: cy,
|
|
255
|
-
color: color,
|
|
256
|
-
radius: radius
|
|
257
|
-
}) : mode == "double" ? /*#__PURE__*/React.createElement(React.Fragment, null, /*#__PURE__*/React.createElement(Circle, (0, _extends2["default"])({
|
|
258
|
-
cx: cx,
|
|
259
|
-
cy: cy
|
|
260
|
-
}, outer)), /*#__PURE__*/React.createElement(Circle, (0, _extends2["default"])({
|
|
261
|
-
cx: cx,
|
|
262
|
-
cy: cy
|
|
263
|
-
}, inner))) : /*#__PURE__*/React.createElement(React.Fragment, null, /*#__PURE__*/React.createElement("image", {
|
|
264
|
-
width: width,
|
|
265
|
-
height: height,
|
|
266
|
-
x: cx - width / 2,
|
|
267
|
-
y: cy - height / 2,
|
|
268
|
-
xlinkHref: window.appConfig.ASSETS_URL + image
|
|
269
|
-
}));
|
|
270
|
-
};
|
|
271
|
-
var Circle = function Circle(_ref7) {
|
|
272
|
-
var cx = _ref7.cx,
|
|
273
|
-
cy = _ref7.cy,
|
|
274
|
-
color = _ref7.color,
|
|
275
|
-
radius = _ref7.radius;
|
|
276
|
-
return /*#__PURE__*/React.createElement("circle", {
|
|
277
|
-
cx: cx,
|
|
278
|
-
cy: cy,
|
|
279
|
-
fill: color,
|
|
280
|
-
r: radius,
|
|
281
|
-
stroke: "none"
|
|
282
|
-
});
|
|
283
|
-
};
|
|
284
|
-
var getVerticalLabel = function getVerticalLabel(_ref8) {
|
|
285
|
-
var _ref8$position = _ref8.position,
|
|
286
|
-
position = _ref8$position === void 0 ? "outerStart" : _ref8$position,
|
|
287
|
-
width = _ref8.width,
|
|
288
|
-
y = _ref8.y,
|
|
289
|
-
y1 = _ref8.y1,
|
|
290
|
-
y2 = _ref8.y2,
|
|
291
|
-
_ref8$reverse = _ref8.reverse,
|
|
292
|
-
reverse = _ref8$reverse === void 0 ? true : _ref8$reverse;
|
|
293
|
-
var needReverse = reverse && y < 0;
|
|
294
|
-
switch (position) {
|
|
295
|
-
case "start":
|
|
296
|
-
return {
|
|
297
|
-
x: y2,
|
|
298
|
-
textAnchor: needReverse ? "end" : "start"
|
|
299
|
-
};
|
|
300
|
-
case "middle":
|
|
301
|
-
return {
|
|
302
|
-
x: (y1 + y2) / 2,
|
|
303
|
-
textAnchor: "middle"
|
|
304
|
-
};
|
|
305
|
-
case "end":
|
|
306
|
-
return {
|
|
307
|
-
x: y1,
|
|
308
|
-
textAnchor: needReverse ? "start" : "end"
|
|
309
|
-
};
|
|
310
|
-
case "outerStart":
|
|
311
|
-
return {
|
|
312
|
-
x: y1,
|
|
313
|
-
textAnchor: needReverse ? "end" : "start"
|
|
314
|
-
};
|
|
315
|
-
case "chartStart":
|
|
316
|
-
return {
|
|
317
|
-
x: y > 0 ? width : 0,
|
|
318
|
-
textAnchor: y >= 0 ? "start" : "end"
|
|
319
|
-
};
|
|
320
|
-
}
|
|
321
|
-
};
|
|
322
|
-
var getHorizontalLabel = function getHorizontalLabel(_ref9) {
|
|
323
|
-
var _ref9$position = _ref9.position,
|
|
324
|
-
position = _ref9$position === void 0 ? "outerStart" : _ref9$position,
|
|
325
|
-
height = _ref9.height,
|
|
326
|
-
y = _ref9.y,
|
|
327
|
-
y1 = _ref9.y1,
|
|
328
|
-
y2 = _ref9.y2,
|
|
329
|
-
_ref9$reverse = _ref9.reverse,
|
|
330
|
-
reverse = _ref9$reverse === void 0 ? true : _ref9$reverse;
|
|
331
|
-
var needReverse = reverse && y < 0;
|
|
332
|
-
switch (position) {
|
|
333
|
-
case "start":
|
|
334
|
-
return {
|
|
335
|
-
y: y1,
|
|
336
|
-
dominantBaseline: needReverse ? "text-before-edge" : "text-after-edge"
|
|
337
|
-
};
|
|
338
|
-
case "middle":
|
|
339
|
-
return {
|
|
340
|
-
y: (y1 + y2) / 2,
|
|
341
|
-
dominantBaseline: "middle"
|
|
342
|
-
};
|
|
343
|
-
case "end":
|
|
344
|
-
return {
|
|
345
|
-
y: y2,
|
|
346
|
-
dominantBaseline: needReverse ? "text-after-edge" : "text-before-edge"
|
|
347
|
-
};
|
|
348
|
-
case "outerStart":
|
|
349
|
-
return {
|
|
350
|
-
y: y2,
|
|
351
|
-
dominantBaseline: needReverse ? "text-before-edge" : "text-after-edge"
|
|
352
|
-
};
|
|
353
|
-
case "chartStart":
|
|
354
|
-
return {
|
|
355
|
-
y: y > 0 ? 0 : height,
|
|
356
|
-
dominantBaseline: y > 0 ? "text-after-edge" : "text-before-edge"
|
|
357
|
-
};
|
|
358
|
-
}
|
|
21
|
+
*/
|
|
22
|
+
var getHighlightData = function getHighlightData(data, extent) {
|
|
23
|
+
switch (extent) {
|
|
24
|
+
case "min":
|
|
25
|
+
var minData = (0, _d3v.min)(data, function (d) {
|
|
26
|
+
return d.data.y;
|
|
27
|
+
});
|
|
28
|
+
return data.map(function (item) {
|
|
29
|
+
return _objectSpread(_objectSpread({}, item), {}, {
|
|
30
|
+
flag: minData == item.data.y ? "min" : ""
|
|
31
|
+
});
|
|
32
|
+
});
|
|
33
|
+
case "max":
|
|
34
|
+
var maxData = (0, _d3v.max)(data, function (d) {
|
|
35
|
+
return d.data.y;
|
|
36
|
+
});
|
|
37
|
+
return data.map(function (item) {
|
|
38
|
+
return _objectSpread(_objectSpread({}, item), {}, {
|
|
39
|
+
flag: maxData == item.data.y ? "max" : ""
|
|
40
|
+
});
|
|
41
|
+
});
|
|
42
|
+
default:
|
|
43
|
+
return data;
|
|
44
|
+
}
|
|
45
|
+
};
|
|
46
|
+
var _default = exports["default"] = /*#__PURE__*/(0, _react.memo)(function (_ref) {
|
|
47
|
+
var _ref$config = _ref.config,
|
|
48
|
+
_ref$config$seriesInt = _ref$config.seriesIntervalWidth,
|
|
49
|
+
paddingInner = _ref$config$seriesInt === void 0 ? 0 : _ref$config$seriesInt,
|
|
50
|
+
_ref$config$paddingIn = _ref$config.paddingInner,
|
|
51
|
+
paddingOuter = _ref$config$paddingIn === void 0 ? 0 : _ref$config$paddingIn,
|
|
52
|
+
_ref$config$showType = _ref$config.showType,
|
|
53
|
+
seriesType = _ref$config$showType === void 0 ? 'bar' : _ref$config$showType,
|
|
54
|
+
_ref$config$highlight = _ref$config.highlight,
|
|
55
|
+
showHighlight = _ref$config$highlight.show,
|
|
56
|
+
extent = _ref$config$highlight.extent,
|
|
57
|
+
highlightStyle = (0, _objectWithoutProperties2["default"])(_ref$config$highlight, _excluded),
|
|
58
|
+
other = (0, _objectWithoutProperties2["default"])(_ref$config, _excluded2),
|
|
59
|
+
config = _ref.config,
|
|
60
|
+
curXLabel = _ref.curXLabel,
|
|
61
|
+
selectStyle = _ref.selectStyle,
|
|
62
|
+
_ref$bandLength = _ref.bandLength,
|
|
63
|
+
bandLength = _ref$bandLength === void 0 ? 0 : _ref$bandLength,
|
|
64
|
+
data = _ref.data,
|
|
65
|
+
_ref$xAxis = _ref.xAxis,
|
|
66
|
+
xScaler = _ref$xAxis.scaler,
|
|
67
|
+
step = _ref$xAxis.step,
|
|
68
|
+
direction = _ref$xAxis.direction,
|
|
69
|
+
_ref$yAxis = _ref.yAxis,
|
|
70
|
+
yScaler = _ref$yAxis.scaler,
|
|
71
|
+
isClipAxis = _ref$yAxis.isClipAxis,
|
|
72
|
+
clipValue = _ref$yAxis.clipValue,
|
|
73
|
+
triggerClick = _ref.triggerClick;
|
|
74
|
+
var selectConfig = other;
|
|
75
|
+
if (selectStyle) {
|
|
76
|
+
var show = selectStyle.show,
|
|
77
|
+
showType = selectStyle.showType,
|
|
78
|
+
icon = selectStyle.icon,
|
|
79
|
+
label = selectStyle.numlabel;
|
|
80
|
+
if (show && seriesType == showType) {
|
|
81
|
+
if (showType == "bar") {
|
|
82
|
+
selectConfig = {
|
|
83
|
+
label: label
|
|
84
|
+
};
|
|
85
|
+
} else {
|
|
86
|
+
selectConfig = {
|
|
87
|
+
icon: icon,
|
|
88
|
+
label: label
|
|
89
|
+
};
|
|
90
|
+
}
|
|
91
|
+
}
|
|
92
|
+
}
|
|
93
|
+
var highlightConfig = other;
|
|
94
|
+
if (highlightStyle) {
|
|
95
|
+
highlightConfig = _objectSpread(_objectSpread({}, other), {}, {
|
|
96
|
+
label: highlightStyle.numlabel
|
|
97
|
+
});
|
|
98
|
+
}
|
|
99
|
+
var lineType = config.hasOwnProperty("line"); // 堆叠处理
|
|
100
|
+
|
|
101
|
+
if (!data.length) return null;
|
|
102
|
+
var _useContext = (0, _react.useContext)(_context.chartContext),
|
|
103
|
+
width = _useContext.width,
|
|
104
|
+
height = _useContext.height;
|
|
105
|
+
var _getSeriesInfo = (0, _utils.getSeriesInfo)({
|
|
106
|
+
step: step,
|
|
107
|
+
bandLength: bandLength,
|
|
108
|
+
paddingInner: paddingInner,
|
|
109
|
+
paddingOuter: paddingOuter
|
|
110
|
+
}),
|
|
111
|
+
seriesStep = _getSeriesInfo.seriesStep,
|
|
112
|
+
seriesWidth = _getSeriesInfo.seriesWidth,
|
|
113
|
+
seriesStart = _getSeriesInfo.seriesStart;
|
|
114
|
+
var _data = showHighlight ? getHighlightData(data, extent) : data;
|
|
115
|
+
var isVertical = direction === "vertical";
|
|
116
|
+
return /*#__PURE__*/React.createElement("g", {
|
|
117
|
+
className: "__easyv-label"
|
|
118
|
+
}, _data.map(function (_ref2, i) {
|
|
119
|
+
var flag = _ref2.flag,
|
|
120
|
+
index = _ref2.index,
|
|
121
|
+
_ref2$bound = (0, _slicedToArray2["default"])(_ref2.bound, 2),
|
|
122
|
+
start = _ref2$bound[0],
|
|
123
|
+
end = _ref2$bound[1],
|
|
124
|
+
data = _ref2.data,
|
|
125
|
+
_ref2$data = _ref2.data,
|
|
126
|
+
x = _ref2$data.x,
|
|
127
|
+
y = _ref2$data.y,
|
|
128
|
+
showY = _ref2$data.showY,
|
|
129
|
+
s = _ref2$data.s;
|
|
130
|
+
var y1, y2;
|
|
131
|
+
var _ref3 = x == curXLabel ? selectConfig : flag ? highlightConfig : other,
|
|
132
|
+
icon = _ref3.icon,
|
|
133
|
+
label = _ref3.label;
|
|
134
|
+
var showIcon = icon && icon.show;
|
|
135
|
+
var showLabel = label && label.show;
|
|
136
|
+
var _ref4 = label || {},
|
|
137
|
+
_ref4$position = _ref4.position,
|
|
138
|
+
_position = _ref4$position === void 0 ? "outerStart" : _ref4$position,
|
|
139
|
+
_ref4$reverse = _ref4.reverse,
|
|
140
|
+
reverse = _ref4$reverse === void 0 ? true : _ref4$reverse;
|
|
141
|
+
if (isClipAxis) {
|
|
142
|
+
if (end > +clipValue) {
|
|
143
|
+
y1 = yScaler[1](start);
|
|
144
|
+
y2 = yScaler[0](end);
|
|
145
|
+
} else {
|
|
146
|
+
y1 = yScaler[1](start);
|
|
147
|
+
y2 = yScaler[1](end);
|
|
148
|
+
}
|
|
149
|
+
} else {
|
|
150
|
+
y1 = yScaler(isVertical ? end : start);
|
|
151
|
+
// 处理z型折线图和堆叠柱图的逻辑冲突
|
|
152
|
+
y2 = lineType ? start ? yScaler(isVertical ? start : end - start) : yScaler(isVertical ? start : end) : yScaler(isVertical ? start : end);
|
|
153
|
+
}
|
|
154
|
+
|
|
155
|
+
// const y2 = yScaler(isVertical ? start : end);
|
|
156
|
+
var positionX = xScaler(x) - step / 2 + seriesStart + index * seriesStep;
|
|
157
|
+
if (isNaN(positionX)) return null;
|
|
158
|
+
var position = positionX + (config.line ? step : seriesWidth) / 2;
|
|
159
|
+
var labelPosition = isVertical ? getVerticalLabel({
|
|
160
|
+
position: _position,
|
|
161
|
+
y: y,
|
|
162
|
+
y1: y1,
|
|
163
|
+
y2: y2,
|
|
164
|
+
width: width,
|
|
165
|
+
reverse: reverse
|
|
166
|
+
}) : getHorizontalLabel({
|
|
167
|
+
position: _position,
|
|
168
|
+
y: y,
|
|
169
|
+
y1: y1,
|
|
170
|
+
y2: y2,
|
|
171
|
+
height: height,
|
|
172
|
+
reverse: reverse
|
|
173
|
+
});
|
|
174
|
+
var attr = isVertical ? _objectSpread(_objectSpread({}, labelPosition), {}, {
|
|
175
|
+
y: position,
|
|
176
|
+
dominantBaseline: "middle"
|
|
177
|
+
}) : _objectSpread(_objectSpread({}, labelPosition), {}, {
|
|
178
|
+
x: position,
|
|
179
|
+
textAnchor: "middle"
|
|
180
|
+
});
|
|
181
|
+
return /*#__PURE__*/React.createElement("g", {
|
|
182
|
+
key: i,
|
|
183
|
+
onClick: function onClick(e) {
|
|
184
|
+
return triggerClick(e, "setCurrent");
|
|
185
|
+
},
|
|
186
|
+
style: {
|
|
187
|
+
cursor: "pointer"
|
|
188
|
+
},
|
|
189
|
+
"data-data": JSON.stringify(data)
|
|
190
|
+
}, showIcon && !isNaN(attr.y) && /*#__PURE__*/React.createElement(Icon, {
|
|
191
|
+
cx: attr.x,
|
|
192
|
+
cy: y2,
|
|
193
|
+
config: icon
|
|
194
|
+
}), showLabel && /*#__PURE__*/React.createElement(Label, (0, _extends2["default"])({
|
|
195
|
+
value: showY,
|
|
196
|
+
config: label,
|
|
197
|
+
reverse: reverse
|
|
198
|
+
}, attr)));
|
|
199
|
+
}));
|
|
200
|
+
});
|
|
201
|
+
var Label = function Label(_ref5) {
|
|
202
|
+
var x = _ref5.x,
|
|
203
|
+
y = _ref5.y,
|
|
204
|
+
value = _ref5.value,
|
|
205
|
+
_ref5$config = _ref5.config,
|
|
206
|
+
font = _ref5$config.font,
|
|
207
|
+
_ref5$config$translat = _ref5$config.translate,
|
|
208
|
+
_ref5$config$translat2 = _ref5$config$translat.x,
|
|
209
|
+
translateX = _ref5$config$translat2 === void 0 ? 0 : _ref5$config$translat2,
|
|
210
|
+
_ref5$config$translat3 = _ref5$config$translat.y,
|
|
211
|
+
translateY = _ref5$config$translat3 === void 0 ? 0 : _ref5$config$translat3,
|
|
212
|
+
_ref5$config$suffix = _ref5$config.suffix,
|
|
213
|
+
content = _ref5$config$suffix.content,
|
|
214
|
+
suffixFont = _ref5$config$suffix.font,
|
|
215
|
+
_ref5$config$suffix$t = _ref5$config$suffix.translate,
|
|
216
|
+
suffixX = _ref5$config$suffix$t.x,
|
|
217
|
+
suffixY = _ref5$config$suffix$t.y,
|
|
218
|
+
_ref5$textAnchor = _ref5.textAnchor,
|
|
219
|
+
textAnchor = _ref5$textAnchor === void 0 ? "middle" : _ref5$textAnchor,
|
|
220
|
+
_ref5$dominantBaselin = _ref5.dominantBaseline,
|
|
221
|
+
dominantBaseline = _ref5$dominantBaselin === void 0 ? "middle" : _ref5$dominantBaselin,
|
|
222
|
+
reverse = _ref5.reverse;
|
|
223
|
+
return /*#__PURE__*/React.createElement("text", {
|
|
224
|
+
x: x,
|
|
225
|
+
y: y,
|
|
226
|
+
transform: (0, _utils.getTranslate2d)({
|
|
227
|
+
x: translateX,
|
|
228
|
+
y: translateY * (value < 0 && reverse ? -1 : 1)
|
|
229
|
+
}),
|
|
230
|
+
textAnchor: textAnchor,
|
|
231
|
+
dominantBaseline: dominantBaseline,
|
|
232
|
+
style: _objectSpread({}, (0, _utils.formatFont)(font, "svg"))
|
|
233
|
+
}, /*#__PURE__*/React.createElement("tspan", null, value), /*#__PURE__*/React.createElement("tspan", {
|
|
234
|
+
dx: suffixX,
|
|
235
|
+
dy: suffixY,
|
|
236
|
+
style: _objectSpread({}, (0, _utils.getFontStyle)(suffixFont, "svg"))
|
|
237
|
+
}, content));
|
|
238
|
+
};
|
|
239
|
+
var Icon = function Icon(_ref6) {
|
|
240
|
+
var cx = _ref6.cx,
|
|
241
|
+
cy = _ref6.cy,
|
|
242
|
+
_ref6$config = _ref6.config,
|
|
243
|
+
mode = _ref6$config.mode,
|
|
244
|
+
inner = _ref6$config.inner,
|
|
245
|
+
outer = _ref6$config.outer,
|
|
246
|
+
color = _ref6$config.color,
|
|
247
|
+
radius = _ref6$config.radius,
|
|
248
|
+
image = _ref6$config.image,
|
|
249
|
+
_ref6$config$size = _ref6$config.size,
|
|
250
|
+
width = _ref6$config$size.width,
|
|
251
|
+
height = _ref6$config$size.height;
|
|
252
|
+
return mode == "single" ? /*#__PURE__*/React.createElement(Circle, {
|
|
253
|
+
cx: cx,
|
|
254
|
+
cy: cy,
|
|
255
|
+
color: color,
|
|
256
|
+
radius: radius
|
|
257
|
+
}) : mode == "double" ? /*#__PURE__*/React.createElement(React.Fragment, null, /*#__PURE__*/React.createElement(Circle, (0, _extends2["default"])({
|
|
258
|
+
cx: cx,
|
|
259
|
+
cy: cy
|
|
260
|
+
}, outer)), /*#__PURE__*/React.createElement(Circle, (0, _extends2["default"])({
|
|
261
|
+
cx: cx,
|
|
262
|
+
cy: cy
|
|
263
|
+
}, inner))) : /*#__PURE__*/React.createElement(React.Fragment, null, /*#__PURE__*/React.createElement("image", {
|
|
264
|
+
width: width,
|
|
265
|
+
height: height,
|
|
266
|
+
x: cx - width / 2,
|
|
267
|
+
y: cy - height / 2,
|
|
268
|
+
xlinkHref: window.appConfig.ASSETS_URL + image
|
|
269
|
+
}));
|
|
270
|
+
};
|
|
271
|
+
var Circle = function Circle(_ref7) {
|
|
272
|
+
var cx = _ref7.cx,
|
|
273
|
+
cy = _ref7.cy,
|
|
274
|
+
color = _ref7.color,
|
|
275
|
+
radius = _ref7.radius;
|
|
276
|
+
return /*#__PURE__*/React.createElement("circle", {
|
|
277
|
+
cx: cx,
|
|
278
|
+
cy: cy,
|
|
279
|
+
fill: color,
|
|
280
|
+
r: radius,
|
|
281
|
+
stroke: "none"
|
|
282
|
+
});
|
|
283
|
+
};
|
|
284
|
+
var getVerticalLabel = function getVerticalLabel(_ref8) {
|
|
285
|
+
var _ref8$position = _ref8.position,
|
|
286
|
+
position = _ref8$position === void 0 ? "outerStart" : _ref8$position,
|
|
287
|
+
width = _ref8.width,
|
|
288
|
+
y = _ref8.y,
|
|
289
|
+
y1 = _ref8.y1,
|
|
290
|
+
y2 = _ref8.y2,
|
|
291
|
+
_ref8$reverse = _ref8.reverse,
|
|
292
|
+
reverse = _ref8$reverse === void 0 ? true : _ref8$reverse;
|
|
293
|
+
var needReverse = reverse && y < 0;
|
|
294
|
+
switch (position) {
|
|
295
|
+
case "start":
|
|
296
|
+
return {
|
|
297
|
+
x: y2,
|
|
298
|
+
textAnchor: needReverse ? "end" : "start"
|
|
299
|
+
};
|
|
300
|
+
case "middle":
|
|
301
|
+
return {
|
|
302
|
+
x: (y1 + y2) / 2,
|
|
303
|
+
textAnchor: "middle"
|
|
304
|
+
};
|
|
305
|
+
case "end":
|
|
306
|
+
return {
|
|
307
|
+
x: y1,
|
|
308
|
+
textAnchor: needReverse ? "start" : "end"
|
|
309
|
+
};
|
|
310
|
+
case "outerStart":
|
|
311
|
+
return {
|
|
312
|
+
x: y1,
|
|
313
|
+
textAnchor: needReverse ? "end" : "start"
|
|
314
|
+
};
|
|
315
|
+
case "chartStart":
|
|
316
|
+
return {
|
|
317
|
+
x: y > 0 ? width : 0,
|
|
318
|
+
textAnchor: y >= 0 ? "start" : "end"
|
|
319
|
+
};
|
|
320
|
+
}
|
|
321
|
+
};
|
|
322
|
+
var getHorizontalLabel = function getHorizontalLabel(_ref9) {
|
|
323
|
+
var _ref9$position = _ref9.position,
|
|
324
|
+
position = _ref9$position === void 0 ? "outerStart" : _ref9$position,
|
|
325
|
+
height = _ref9.height,
|
|
326
|
+
y = _ref9.y,
|
|
327
|
+
y1 = _ref9.y1,
|
|
328
|
+
y2 = _ref9.y2,
|
|
329
|
+
_ref9$reverse = _ref9.reverse,
|
|
330
|
+
reverse = _ref9$reverse === void 0 ? true : _ref9$reverse;
|
|
331
|
+
var needReverse = reverse && y < 0;
|
|
332
|
+
switch (position) {
|
|
333
|
+
case "start":
|
|
334
|
+
return {
|
|
335
|
+
y: y1,
|
|
336
|
+
dominantBaseline: needReverse ? "text-before-edge" : "text-after-edge"
|
|
337
|
+
};
|
|
338
|
+
case "middle":
|
|
339
|
+
return {
|
|
340
|
+
y: (y1 + y2) / 2,
|
|
341
|
+
dominantBaseline: "middle"
|
|
342
|
+
};
|
|
343
|
+
case "end":
|
|
344
|
+
return {
|
|
345
|
+
y: y2,
|
|
346
|
+
dominantBaseline: needReverse ? "text-after-edge" : "text-before-edge"
|
|
347
|
+
};
|
|
348
|
+
case "outerStart":
|
|
349
|
+
return {
|
|
350
|
+
y: y2,
|
|
351
|
+
dominantBaseline: needReverse ? "text-before-edge" : "text-after-edge"
|
|
352
|
+
};
|
|
353
|
+
case "chartStart":
|
|
354
|
+
return {
|
|
355
|
+
y: y > 0 ? 0 : height,
|
|
356
|
+
dominantBaseline: y > 0 ? "text-after-edge" : "text-before-edge"
|
|
357
|
+
};
|
|
358
|
+
}
|
|
359
359
|
};
|