@easyv/charts 1.6.8 → 1.6.10
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/AnimateData.js +13 -22
- package/lib/components/Axis.js +106 -153
- package/lib/components/Background.js +18 -27
- package/lib/components/Band.js +79 -105
- package/lib/components/BaseLine.js +38 -52
- package/lib/components/Brush.js +31 -49
- package/lib/components/Carousel.js +20 -48
- package/lib/components/CartesianChart.js +136 -195
- package/lib/components/Chart.js +37 -59
- package/lib/components/ChartContainer.js +23 -33
- package/lib/components/ConicalGradient.js +38 -72
- package/lib/components/Control.js +61 -101
- package/lib/components/ExtentData.js +13 -22
- package/lib/components/FilterData.js +20 -32
- package/lib/components/Indicator.js +18 -26
- package/lib/components/Label.js +90 -121
- package/lib/components/Legend.js +48 -74
- package/lib/components/Lighter.js +22 -52
- package/lib/components/Line.js +41 -62
- package/lib/components/LinearGradient.js +16 -23
- package/lib/components/Mapping.js +15 -41
- package/lib/components/Marquee.js +23 -40
- package/lib/components/PieChart.js +352 -456
- package/lib/components/StackData.js +12 -23
- package/lib/components/StereoBar.js +69 -110
- package/lib/components/TextOverflow.js +17 -31
- package/lib/components/Tooltip.js +50 -65
- package/lib/components/index.js +1 -31
- package/lib/components/pieTooltip.js +46 -74
- package/lib/context/index.js +1 -4
- package/lib/css/index.module.css +1 -1
- package/lib/element/ConicGradient.js +31 -37
- package/lib/element/Line.js +11 -16
- package/lib/element/index.js +0 -2
- package/lib/formatter/index.js +0 -2
- package/lib/formatter/legend.js +48 -48
- package/lib/hooks/index.js +0 -9
- package/lib/hooks/useAiData.js +16 -27
- package/lib/hooks/useAnimateData.js +7 -21
- package/lib/hooks/useAxes.js +89 -151
- package/lib/hooks/useCarouselAxisX.js +30 -64
- package/lib/hooks/useExtentData.js +24 -65
- package/lib/hooks/useFilterData.js +16 -42
- package/lib/hooks/useStackData.js +11 -35
- package/lib/hooks/useTooltip.js +29 -47
- package/lib/index.js +2 -17
- package/lib/utils/index.js +138 -325
- package/package.json +1 -1
- package/src/components/Band.tsx +1 -1
- package/src/components/CartesianChart.js +2 -2
- package/src/css/index.module.css +1 -1
- package/src/formatter/legend.js +13 -1
|
@@ -1,61 +1,39 @@
|
|
|
1
1
|
"use strict";
|
|
2
2
|
|
|
3
3
|
var _interopRequireDefault = require("@babel/runtime/helpers/interopRequireDefault");
|
|
4
|
-
|
|
5
4
|
var _typeof = require("@babel/runtime/helpers/typeof");
|
|
6
|
-
|
|
7
5
|
Object.defineProperty(exports, "__esModule", {
|
|
8
6
|
value: true
|
|
9
7
|
});
|
|
10
8
|
exports["default"] = void 0;
|
|
11
|
-
|
|
12
9
|
var _extends2 = _interopRequireDefault(require("@babel/runtime/helpers/extends"));
|
|
13
|
-
|
|
14
10
|
var _toConsumableArray2 = _interopRequireDefault(require("@babel/runtime/helpers/toConsumableArray"));
|
|
15
|
-
|
|
16
11
|
var _slicedToArray2 = _interopRequireDefault(require("@babel/runtime/helpers/slicedToArray"));
|
|
17
|
-
|
|
18
12
|
var _defineProperty2 = _interopRequireDefault(require("@babel/runtime/helpers/defineProperty"));
|
|
19
|
-
|
|
20
13
|
var _objectWithoutProperties2 = _interopRequireDefault(require("@babel/runtime/helpers/objectWithoutProperties"));
|
|
21
|
-
|
|
22
14
|
var _react = _interopRequireWildcard(require("react"));
|
|
23
|
-
|
|
24
15
|
var _ = require(".");
|
|
25
|
-
|
|
26
16
|
var _context = require("../context");
|
|
27
|
-
|
|
28
17
|
var _utils = require("../utils");
|
|
29
|
-
|
|
30
18
|
var _d3v = require("d3v7");
|
|
31
|
-
|
|
32
19
|
var _popmotion = require("popmotion");
|
|
33
|
-
|
|
34
20
|
var _LinearGradient = _interopRequireDefault(require("./LinearGradient"));
|
|
35
|
-
|
|
36
21
|
var _formatter = require("../formatter");
|
|
37
|
-
|
|
38
22
|
var _piechartModule = _interopRequireDefault(require("../css/piechart.module.css"));
|
|
39
|
-
|
|
40
23
|
var _hooks = require("../hooks");
|
|
41
|
-
|
|
42
24
|
var _PieTooltip = require("./PieTooltip");
|
|
43
|
-
|
|
44
25
|
var _utils2 = require("@easyv/utils/lib/common/utils");
|
|
45
|
-
|
|
46
26
|
var _excluded = ["startAngle", "endAngle", "antiClockwise"],
|
|
47
|
-
|
|
48
|
-
|
|
49
|
-
|
|
50
|
-
|
|
51
|
-
|
|
52
|
-
|
|
53
|
-
function
|
|
54
|
-
|
|
55
|
-
function ownKeys(
|
|
56
|
-
|
|
57
|
-
function _objectSpread(target) { for (var i = 1; i < arguments.length; i++) { var source = null != arguments[i] ? arguments[i] : {}; i % 2 ? ownKeys(Object(source), !0).forEach(function (key) { (0, _defineProperty2["default"])(target, key, source[key]); }) : Object.getOwnPropertyDescriptors ? Object.defineProperties(target, Object.getOwnPropertyDescriptors(source)) : ownKeys(Object(source)).forEach(function (key) { Object.defineProperty(target, key, Object.getOwnPropertyDescriptor(source, key)); }); } return target; }
|
|
58
|
-
|
|
27
|
+
_excluded2 = ["padAngle", "innerRadius", "outerRadius", "cornerRadius", "startAngle", "endAngle"],
|
|
28
|
+
_excluded3 = ["formatter"],
|
|
29
|
+
_excluded4 = ["startAngle", "endAngle"];
|
|
30
|
+
/**
|
|
31
|
+
* 饼环图
|
|
32
|
+
*/
|
|
33
|
+
function _getRequireWildcardCache(e) { if ("function" != typeof WeakMap) return null; var r = new WeakMap(), t = new WeakMap(); return (_getRequireWildcardCache = function _getRequireWildcardCache(e) { return e ? t : r; })(e); }
|
|
34
|
+
function _interopRequireWildcard(e, r) { if (!r && e && e.__esModule) return e; if (null === e || "object" != _typeof(e) && "function" != typeof e) return { "default": e }; var t = _getRequireWildcardCache(r); if (t && t.has(e)) return t.get(e); var n = { __proto__: null }, a = Object.defineProperty && Object.getOwnPropertyDescriptor; for (var u in e) if ("default" !== u && {}.hasOwnProperty.call(e, u)) { var i = a ? Object.getOwnPropertyDescriptor(e, u) : null; i && (i.get || i.set) ? Object.defineProperty(n, u, i) : n[u] = e[u]; } return n["default"] = e, t && t.set(e, n), n; }
|
|
35
|
+
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; }
|
|
36
|
+
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; }
|
|
59
37
|
var PI = Math.PI;
|
|
60
38
|
var defaultChart = {
|
|
61
39
|
outerRadius: 1,
|
|
@@ -71,7 +49,6 @@ var defaultAngle = {
|
|
|
71
49
|
endAngle: 360,
|
|
72
50
|
antiClockwise: false
|
|
73
51
|
};
|
|
74
|
-
|
|
75
52
|
var nameDy = function nameDy(showValue, showPercent, mode, dir) {
|
|
76
53
|
if (showValue || showPercent) {
|
|
77
54
|
if (mode == "vertical") {
|
|
@@ -87,7 +64,6 @@ var nameDy = function nameDy(showValue, showPercent, mode, dir) {
|
|
|
87
64
|
}
|
|
88
65
|
}
|
|
89
66
|
};
|
|
90
|
-
|
|
91
67
|
var valueDy = function valueDy(value1, mode, dir) {
|
|
92
68
|
if (value1) {
|
|
93
69
|
if (mode == "vertical") {
|
|
@@ -103,12 +79,10 @@ var valueDy = function valueDy(value1, mode, dir) {
|
|
|
103
79
|
}
|
|
104
80
|
}
|
|
105
81
|
};
|
|
106
|
-
|
|
107
82
|
var percentDy_ = function percentDy_(showName, showValue, mode, dir) {
|
|
108
83
|
if (showValue) {
|
|
109
84
|
return 0;
|
|
110
85
|
}
|
|
111
|
-
|
|
112
86
|
if (showName) {
|
|
113
87
|
if (mode == "vertical") {
|
|
114
88
|
return "1.5em";
|
|
@@ -123,12 +97,10 @@ var percentDy_ = function percentDy_(showName, showValue, mode, dir) {
|
|
|
123
97
|
}
|
|
124
98
|
}
|
|
125
99
|
};
|
|
126
|
-
|
|
127
100
|
var percentX = function percentX(showName, showValue, mode, x) {
|
|
128
101
|
if (showValue) {
|
|
129
102
|
return "";
|
|
130
103
|
}
|
|
131
|
-
|
|
132
104
|
if (showName) {
|
|
133
105
|
if (mode == "vertical") {
|
|
134
106
|
return x;
|
|
@@ -139,12 +111,10 @@ var percentX = function percentX(showName, showValue, mode, x) {
|
|
|
139
111
|
return x;
|
|
140
112
|
}
|
|
141
113
|
};
|
|
142
|
-
|
|
143
114
|
var percentDx = function percentDx(showName, showValue, mode) {
|
|
144
115
|
if (showValue) {
|
|
145
116
|
return "0.5em";
|
|
146
117
|
}
|
|
147
|
-
|
|
148
118
|
if (showName) {
|
|
149
119
|
if (mode == "vertical") {
|
|
150
120
|
return 0;
|
|
@@ -155,12 +125,10 @@ var percentDx = function percentDx(showName, showValue, mode) {
|
|
|
155
125
|
return 0;
|
|
156
126
|
}
|
|
157
127
|
};
|
|
158
|
-
|
|
159
128
|
var percentDy = function percentDy(showName, showValue, mode) {
|
|
160
129
|
if (showValue) {
|
|
161
130
|
return 0;
|
|
162
131
|
}
|
|
163
|
-
|
|
164
132
|
if (showName) {
|
|
165
133
|
if (mode == "vertical") {
|
|
166
134
|
return "1.5em";
|
|
@@ -171,36 +139,31 @@ var percentDy = function percentDy(showName, showValue, mode) {
|
|
|
171
139
|
return 0;
|
|
172
140
|
}
|
|
173
141
|
};
|
|
174
|
-
|
|
175
142
|
var valueDx = function valueDx(showName, mode) {
|
|
176
143
|
if (!showName) {
|
|
177
144
|
return "";
|
|
178
145
|
}
|
|
179
|
-
|
|
180
146
|
if (mode == "vertical") {
|
|
181
147
|
return "";
|
|
182
148
|
} else {
|
|
183
149
|
return "0.5em";
|
|
184
150
|
}
|
|
185
151
|
};
|
|
186
|
-
|
|
187
152
|
var getCoord = function getCoord(deg, radius) {
|
|
188
153
|
var x = Math.cos(deg) * radius,
|
|
189
|
-
|
|
154
|
+
y = Math.sin(deg) * radius;
|
|
190
155
|
return [x, y];
|
|
191
156
|
};
|
|
192
|
-
|
|
193
157
|
var getRoseRadius = function getRoseRadius(_ref) {
|
|
194
158
|
var innerRadius = _ref.innerRadius,
|
|
195
|
-
|
|
159
|
+
baseRadius = _ref.baseRadius;
|
|
196
160
|
return innerRadius + (1 - innerRadius) * baseRadius;
|
|
197
161
|
};
|
|
198
|
-
|
|
199
162
|
var getAngle = function getAngle(_ref2) {
|
|
200
163
|
var startAngle = _ref2.startAngle,
|
|
201
|
-
|
|
202
|
-
|
|
203
|
-
|
|
164
|
+
endAngle = _ref2.endAngle,
|
|
165
|
+
antiClockwise = _ref2.antiClockwise,
|
|
166
|
+
rest = (0, _objectWithoutProperties2["default"])(_ref2, _excluded);
|
|
204
167
|
if (antiClockwise) return _objectSpread(_objectSpread({}, rest), {}, {
|
|
205
168
|
startAngle: endAngle - 180,
|
|
206
169
|
endAngle: startAngle - 180
|
|
@@ -210,21 +173,20 @@ var getAngle = function getAngle(_ref2) {
|
|
|
210
173
|
endAngle: endAngle
|
|
211
174
|
});
|
|
212
175
|
};
|
|
213
|
-
|
|
214
176
|
var getArc = function getArc(radius, _ref3, series_, index) {
|
|
215
177
|
var _ref3$padAngle = _ref3.padAngle,
|
|
216
|
-
|
|
217
|
-
|
|
218
|
-
|
|
219
|
-
|
|
220
|
-
|
|
221
|
-
|
|
222
|
-
|
|
223
|
-
|
|
224
|
-
|
|
225
|
-
|
|
226
|
-
|
|
227
|
-
|
|
178
|
+
padAngle = _ref3$padAngle === void 0 ? 0 : _ref3$padAngle,
|
|
179
|
+
_ref3$innerRadius = _ref3.innerRadius,
|
|
180
|
+
innerRadius = _ref3$innerRadius === void 0 ? 0 : _ref3$innerRadius,
|
|
181
|
+
_ref3$outerRadius = _ref3.outerRadius,
|
|
182
|
+
outerRadius = _ref3$outerRadius === void 0 ? 1 : _ref3$outerRadius,
|
|
183
|
+
_ref3$cornerRadius = _ref3.cornerRadius,
|
|
184
|
+
cornerRadius = _ref3$cornerRadius === void 0 ? 0 : _ref3$cornerRadius,
|
|
185
|
+
_ref3$startAngle = _ref3.startAngle,
|
|
186
|
+
startAngle = _ref3$startAngle === void 0 ? 0 : _ref3$startAngle,
|
|
187
|
+
_ref3$endAngle = _ref3.endAngle,
|
|
188
|
+
endAngle = _ref3$endAngle === void 0 ? 360 : _ref3$endAngle,
|
|
189
|
+
rest = (0, _objectWithoutProperties2["default"])(_ref3, _excluded2);
|
|
228
190
|
var series = series_.find(function (s) {
|
|
229
191
|
return s.fieldName == rest.data.s;
|
|
230
192
|
}) || series_[index % series_.length];
|
|
@@ -238,33 +200,28 @@ var getArc = function getArc(radius, _ref3, series_, index) {
|
|
|
238
200
|
arc: (0, _d3v.arc)().innerRadius(innerRadius * radius).outerRadius(outerRadius * radius).cornerRadius(cornerRadius).startAngle(startAngle).endAngle(endAngle).padAngle(padAngle)
|
|
239
201
|
});
|
|
240
202
|
};
|
|
241
|
-
|
|
242
203
|
var getCircleScale = function getCircleScale() {
|
|
243
204
|
var _ref4 = arguments.length > 0 && arguments[0] !== undefined ? arguments[0] : tick,
|
|
244
|
-
|
|
245
|
-
|
|
246
|
-
|
|
247
|
-
|
|
248
|
-
|
|
205
|
+
count = _ref4.count,
|
|
206
|
+
color = _ref4.color,
|
|
207
|
+
width = _ref4.width,
|
|
208
|
+
length = _ref4.length;
|
|
249
209
|
var radius = arguments.length > 1 ? arguments[1] : undefined;
|
|
250
210
|
var data = [],
|
|
251
|
-
|
|
252
|
-
|
|
253
|
-
|
|
211
|
+
arcs = [],
|
|
212
|
+
centroids = [];
|
|
254
213
|
for (var i = 0; i < count; i++) {
|
|
255
214
|
data.push(1);
|
|
256
215
|
}
|
|
257
|
-
|
|
258
216
|
var scaleData = (0, _d3v.pie)()(data);
|
|
259
217
|
scaleData.map(function (data) {
|
|
260
218
|
var _arc = (0, _d3v.arc)().innerRadius(radius + length / 2).outerRadius(radius + length / 2).startAngle(data.startAngle).endAngle(data.endAngle);
|
|
261
|
-
|
|
262
219
|
arcs.push(_arc());
|
|
263
220
|
centroids.push(_arc.centroid());
|
|
264
221
|
});
|
|
265
222
|
return /*#__PURE__*/_react["default"].createElement("g", null, centroids.map(function (center, index) {
|
|
266
223
|
var x = center[0],
|
|
267
|
-
|
|
224
|
+
y = center[1];
|
|
268
225
|
var rate = length / Math.sqrt(Math.pow(x, 2) + Math.pow(y, 2));
|
|
269
226
|
return /*#__PURE__*/_react["default"].createElement("path", {
|
|
270
227
|
key: index,
|
|
@@ -274,76 +231,75 @@ var getCircleScale = function getCircleScale() {
|
|
|
274
231
|
});
|
|
275
232
|
}));
|
|
276
233
|
};
|
|
277
|
-
|
|
278
234
|
var Component = /*#__PURE__*/(0, _react.memo)(function (_ref5) {
|
|
279
235
|
var _ref5$config = _ref5.config,
|
|
280
|
-
|
|
281
|
-
|
|
282
|
-
|
|
283
|
-
|
|
284
|
-
|
|
285
|
-
|
|
286
|
-
|
|
287
|
-
|
|
288
|
-
|
|
289
|
-
|
|
290
|
-
|
|
291
|
-
|
|
292
|
-
|
|
293
|
-
|
|
294
|
-
|
|
295
|
-
|
|
296
|
-
|
|
297
|
-
|
|
298
|
-
|
|
299
|
-
|
|
300
|
-
|
|
301
|
-
|
|
302
|
-
|
|
303
|
-
|
|
304
|
-
|
|
305
|
-
|
|
306
|
-
|
|
307
|
-
|
|
308
|
-
|
|
309
|
-
|
|
310
|
-
|
|
311
|
-
|
|
312
|
-
|
|
313
|
-
|
|
314
|
-
|
|
315
|
-
|
|
316
|
-
|
|
317
|
-
|
|
318
|
-
|
|
319
|
-
|
|
320
|
-
|
|
321
|
-
|
|
322
|
-
|
|
323
|
-
|
|
324
|
-
|
|
325
|
-
|
|
326
|
-
|
|
327
|
-
|
|
328
|
-
|
|
329
|
-
|
|
330
|
-
|
|
331
|
-
|
|
332
|
-
|
|
333
|
-
|
|
334
|
-
|
|
335
|
-
|
|
336
|
-
|
|
337
|
-
|
|
338
|
-
|
|
339
|
-
|
|
340
|
-
|
|
341
|
-
|
|
342
|
-
|
|
343
|
-
|
|
344
|
-
|
|
345
|
-
|
|
346
|
-
|
|
236
|
+
_ref5$config$chart = _ref5$config.chart,
|
|
237
|
+
_ref5$config$chart$di = _ref5$config$chart.dimension.chartDimension,
|
|
238
|
+
width = _ref5$config$chart$di.width,
|
|
239
|
+
height = _ref5$config$chart$di.height,
|
|
240
|
+
label = _ref5$config$chart.label,
|
|
241
|
+
_ref5$config$chart$le = _ref5$config$chart.legend,
|
|
242
|
+
_ref5$config$chart$le2 = _ref5$config$chart$le.formatter,
|
|
243
|
+
formatter = _ref5$config$chart$le2 === void 0 ? _formatter.pieLegendFormatter : _ref5$config$chart$le2,
|
|
244
|
+
legend = (0, _objectWithoutProperties2["default"])(_ref5$config$chart$le, _excluded3),
|
|
245
|
+
_ref5$config$chart$an = _ref5$config$chart.animation,
|
|
246
|
+
_ref5$config$chart$an2 = _ref5$config$chart$an === void 0 ? {} : _ref5$config$chart$an,
|
|
247
|
+
ringDuration = _ref5$config$chart$an2.ringDuration,
|
|
248
|
+
labelDuration = _ref5$config$chart$an2.labelDuration,
|
|
249
|
+
_ref5$config$chart$ma = _ref5$config$chart.margin,
|
|
250
|
+
marginLeft = _ref5$config$chart$ma.marginLeft,
|
|
251
|
+
marginTop = _ref5$config$chart$ma.marginTop,
|
|
252
|
+
_ref5$config$fan = _ref5$config.fan,
|
|
253
|
+
_ref5$config$fan2 = _ref5$config$fan === void 0 ? {} : _ref5$config$fan,
|
|
254
|
+
_ref5$config$fan2$cha = _ref5$config$fan2.chart,
|
|
255
|
+
chart = _ref5$config$fan2$cha === void 0 ? defaultChart : _ref5$config$fan2$cha,
|
|
256
|
+
_ref5$config$fan2$cha2 = _ref5$config$fan2.chart,
|
|
257
|
+
_ref5$config$fan2$cha3 = _ref5$config$fan2$cha2.outerRadius,
|
|
258
|
+
outerRadius = _ref5$config$fan2$cha3 === void 0 ? defaultChart.outerRadius : _ref5$config$fan2$cha3,
|
|
259
|
+
padAngle = _ref5$config$fan2$cha2.padAngle,
|
|
260
|
+
_ref5$config$fan2$ang = _ref5$config$fan2.angle,
|
|
261
|
+
angle = _ref5$config$fan2$ang === void 0 ? defaultAngle : _ref5$config$fan2$ang,
|
|
262
|
+
_ref5$config$fan2$str = _ref5$config$fan2.stroke,
|
|
263
|
+
_ref5$config$fan2$str2 = _ref5$config$fan2$str === void 0 ? {
|
|
264
|
+
show: false
|
|
265
|
+
} : _ref5$config$fan2$str,
|
|
266
|
+
show = _ref5$config$fan2$str2.show,
|
|
267
|
+
strokeWidth = _ref5$config$fan2$str2.strokeWidth,
|
|
268
|
+
color = _ref5$config$fan2$str2.color,
|
|
269
|
+
decorate = _ref5$config$fan2.decorate,
|
|
270
|
+
decorate2 = _ref5$config$fan2.decorate2,
|
|
271
|
+
categoryText = _ref5$config$fan2.categoryText,
|
|
272
|
+
outerDecorate = _ref5$config$fan2.outerDecorate,
|
|
273
|
+
current = _ref5$config$fan2.current,
|
|
274
|
+
order = _ref5$config.order,
|
|
275
|
+
series = _ref5$config.series,
|
|
276
|
+
_ref5$config$animatio = _ref5$config.animation,
|
|
277
|
+
on = _ref5$config$animatio.on,
|
|
278
|
+
_ref5$config$animatio2 = _ref5$config$animatio.current,
|
|
279
|
+
_ref5$config$animatio3 = _ref5$config$animatio2.widthen,
|
|
280
|
+
widthen = _ref5$config$animatio3 === void 0 ? 0 : _ref5$config$animatio3,
|
|
281
|
+
_ref5$config$animatio4 = _ref5$config$animatio2.heighten,
|
|
282
|
+
heighten = _ref5$config$animatio4 === void 0 ? 0 : _ref5$config$animatio4,
|
|
283
|
+
_ref5$config$animatio5 = _ref5$config$animatio2.opacity,
|
|
284
|
+
opacity = _ref5$config$animatio5 === void 0 ? 0 : _ref5$config$animatio5,
|
|
285
|
+
_ref5$config$animatio6 = _ref5$config$animatio2.width,
|
|
286
|
+
radiusWidthAdd = _ref5$config$animatio6 === void 0 ? 0 : _ref5$config$animatio6,
|
|
287
|
+
animateColor = _ref5$config$animatio2.color,
|
|
288
|
+
animateCTS = _ref5$config$animatio2.textStyle,
|
|
289
|
+
_ref5$config$animatio7 = _ref5$config$animatio2.gap,
|
|
290
|
+
gap = _ref5$config$animatio7 === void 0 ? 0 : _ref5$config$animatio7,
|
|
291
|
+
_ref5$config$animatio8 = _ref5$config$animatio.rotate,
|
|
292
|
+
rotate = _ref5$config$animatio8 === void 0 ? 0 : _ref5$config$animatio8,
|
|
293
|
+
_ref5$config$tooltip = _ref5$config.tooltip,
|
|
294
|
+
tooltip = _ref5$config$tooltip === void 0 ? {} : _ref5$config$tooltip,
|
|
295
|
+
config = _ref5.config,
|
|
296
|
+
_ref5$state = _ref5.state,
|
|
297
|
+
currentIndex = _ref5$state.currentIndex,
|
|
298
|
+
trigger = _ref5$state.trigger,
|
|
299
|
+
onEvent = _ref5.onEvent,
|
|
300
|
+
hoverEvent = _ref5.hoverEvent,
|
|
301
|
+
_ref5$data = _ref5.data,
|
|
302
|
+
originData = _ref5$data === void 0 ? [] : _ref5$data;
|
|
347
303
|
var data = originData.map(function (d) {
|
|
348
304
|
return _objectSpread(_objectSpread({}, d), {}, {
|
|
349
305
|
y: d.y < 0 ? 0 : d.y
|
|
@@ -351,108 +307,93 @@ var Component = /*#__PURE__*/(0, _react.memo)(function (_ref5) {
|
|
|
351
307
|
});
|
|
352
308
|
var prevIndex = (0, _react.useRef)(null);
|
|
353
309
|
var legendPrecision = legend.config.percent.precision;
|
|
354
|
-
|
|
355
310
|
var _useContext = (0, _react.useContext)(_context.chartContext),
|
|
356
|
-
|
|
357
|
-
|
|
358
|
-
|
|
359
|
-
|
|
360
|
-
|
|
361
|
-
|
|
362
|
-
|
|
311
|
+
id = _useContext.id,
|
|
312
|
+
isIOS = _useContext.isIOS,
|
|
313
|
+
chartWidth = _useContext.width,
|
|
314
|
+
chartHeight = _useContext.height,
|
|
315
|
+
triggerOnRelative = _useContext.triggerOnRelative,
|
|
316
|
+
onEmit = _useContext.onEmit;
|
|
363
317
|
var _useState = (0, _react.useState)(1),
|
|
364
|
-
|
|
365
|
-
|
|
366
|
-
|
|
367
|
-
|
|
318
|
+
_useState2 = (0, _slicedToArray2["default"])(_useState, 2),
|
|
319
|
+
y = _useState2[0],
|
|
320
|
+
setY = _useState2[1];
|
|
368
321
|
var radius = Math.min(chartWidth, chartHeight) / 2 * outerRadius;
|
|
369
322
|
var arcsFunc = (0, _react.useMemo)(function () {
|
|
370
323
|
var _getAngle = getAngle(angle),
|
|
371
|
-
|
|
372
|
-
|
|
373
|
-
|
|
374
|
-
|
|
375
|
-
|
|
324
|
+
_getAngle$startAngle = _getAngle.startAngle,
|
|
325
|
+
startAngle = _getAngle$startAngle === void 0 ? 0 : _getAngle$startAngle,
|
|
326
|
+
_getAngle$endAngle = _getAngle.endAngle,
|
|
327
|
+
endAngle = _getAngle$endAngle === void 0 ? 360 : _getAngle$endAngle;
|
|
376
328
|
var arcsFunc = (0, _d3v.pie)().startAngle(startAngle * PI / 180).endAngle(endAngle * PI / 180).value(function (d) {
|
|
377
329
|
return d.y;
|
|
378
330
|
});
|
|
379
331
|
return arcsFunc;
|
|
380
|
-
}, [angle]);
|
|
381
|
-
|
|
332
|
+
}, [angle]);
|
|
333
|
+
//此处创建arcsFuncTwo的原因是为了兼容数据全为零
|
|
382
334
|
var arcsFuncTwo = (0, _react.useMemo)(function () {
|
|
383
335
|
var _getAngle2 = getAngle(angle),
|
|
384
|
-
|
|
385
|
-
|
|
386
|
-
|
|
387
|
-
|
|
388
|
-
|
|
336
|
+
_getAngle2$startAngle = _getAngle2.startAngle,
|
|
337
|
+
startAngle = _getAngle2$startAngle === void 0 ? 0 : _getAngle2$startAngle,
|
|
338
|
+
_getAngle2$endAngle = _getAngle2.endAngle,
|
|
339
|
+
endAngle = _getAngle2$endAngle === void 0 ? 360 : _getAngle2$endAngle;
|
|
389
340
|
var arcsFunc = (0, _d3v.pie)().startAngle(startAngle * PI / 180).endAngle(endAngle * PI / 180).value(function (d) {
|
|
390
341
|
return d.y == 0 ? 1 : d.y;
|
|
391
342
|
});
|
|
392
343
|
return arcsFunc;
|
|
393
344
|
}, [angle]);
|
|
394
345
|
var judgeData = 0; //此处声明全局变量是为了父子组件传递值来判断数据是否都为零
|
|
395
|
-
|
|
396
346
|
var arcs = (0, _react.useMemo)(function () {
|
|
397
347
|
var _chart = Object.assign(defaultChart, chart);
|
|
398
|
-
|
|
399
348
|
var innerRadius = _chart.innerRadius,
|
|
400
|
-
|
|
401
|
-
|
|
402
|
-
|
|
403
|
-
|
|
404
|
-
|
|
405
|
-
|
|
349
|
+
outerRadius = _chart.outerRadius,
|
|
350
|
+
rose = _chart.rose,
|
|
351
|
+
cornerRadius = _chart.cornerRadius,
|
|
352
|
+
padAngle = _chart.padAngle,
|
|
353
|
+
roseType = _chart.roseType;
|
|
406
354
|
var _padAngle = padAngle * Math.PI / 180;
|
|
407
|
-
|
|
408
355
|
switch (order) {
|
|
409
356
|
case "":
|
|
410
357
|
arcsFunc.sort(null);
|
|
411
358
|
break;
|
|
412
|
-
|
|
413
359
|
case "desc":
|
|
414
360
|
arcsFunc.sort(function (a, b) {
|
|
415
361
|
return b.y - a.y;
|
|
416
362
|
});
|
|
417
363
|
break;
|
|
418
|
-
|
|
419
364
|
case "asc":
|
|
420
365
|
arcsFunc.sort(function (a, b) {
|
|
421
366
|
return a.y - b.y;
|
|
422
367
|
});
|
|
423
368
|
break;
|
|
424
|
-
}
|
|
369
|
+
}
|
|
425
370
|
|
|
371
|
+
//此处判断data中的y是否都为零,方便饼图都为零时展示
|
|
426
372
|
|
|
427
373
|
var arcs = 0;
|
|
428
374
|
data.forEach(function (item) {
|
|
429
375
|
judgeData += item.y;
|
|
430
376
|
});
|
|
431
|
-
|
|
432
377
|
if (judgeData == 0) {
|
|
433
378
|
arcs = arcsFuncTwo(data);
|
|
434
379
|
} else {
|
|
435
380
|
arcs = arcsFunc(data);
|
|
436
|
-
}
|
|
437
|
-
|
|
381
|
+
}
|
|
438
382
|
|
|
383
|
+
//const arcs = arcsFunc(data); 此处是原本的传输饼图data流程
|
|
439
384
|
var legendDataWithPercent = (0, _utils.getDataWithPercent)(arcs, legendPrecision);
|
|
440
|
-
|
|
441
385
|
var _legendDataWithPercent = (0, _utils.sortPie)(legendDataWithPercent, order);
|
|
442
|
-
|
|
443
386
|
if (rose) {
|
|
444
387
|
var domain = (0, _d3v.extent)(_legendDataWithPercent, function (d) {
|
|
445
388
|
return d.value;
|
|
446
389
|
});
|
|
447
390
|
var roseRadius = getRoseRadius(_chart);
|
|
448
391
|
var scaler = (0, _d3v.scaleLinear)().domain(domain).range([roseRadius, 1]);
|
|
449
|
-
|
|
450
392
|
var _angle = PI * 2 / _legendDataWithPercent.length;
|
|
451
|
-
|
|
452
393
|
return _legendDataWithPercent.map(function (_ref6, index) {
|
|
453
394
|
var startAngle = _ref6.startAngle,
|
|
454
|
-
|
|
455
|
-
|
|
395
|
+
endAngle = _ref6.endAngle,
|
|
396
|
+
arc = (0, _objectWithoutProperties2["default"])(_ref6, _excluded4);
|
|
456
397
|
return _objectSpread(_objectSpread({}, arc), {}, {
|
|
457
398
|
id: id + "_linear_" + index,
|
|
458
399
|
startAngle: roseType == "area" ? _angle * index : startAngle,
|
|
@@ -464,7 +405,6 @@ var Component = /*#__PURE__*/(0, _react.memo)(function (_ref5) {
|
|
|
464
405
|
});
|
|
465
406
|
});
|
|
466
407
|
}
|
|
467
|
-
|
|
468
408
|
return _legendDataWithPercent.map(function (arc, index) {
|
|
469
409
|
return _objectSpread(_objectSpread({}, arc), {}, {
|
|
470
410
|
id: id + "_linear_" + index,
|
|
@@ -475,19 +415,15 @@ var Component = /*#__PURE__*/(0, _react.memo)(function (_ref5) {
|
|
|
475
415
|
});
|
|
476
416
|
});
|
|
477
417
|
}, [data, arcsFunc, arcsFuncTwo, chart, legendPrecision, order]);
|
|
478
|
-
|
|
479
418
|
var _arcs = (0, _react.useMemo)(function () {
|
|
480
419
|
var seriesLength = series.size;
|
|
481
420
|
if (!seriesLength) return [];
|
|
482
|
-
|
|
483
421
|
var _series = (0, _toConsumableArray2["default"])(series.values());
|
|
484
|
-
|
|
485
422
|
if (_series.length < arcs.length) console.warn("请检查数据中是否存在相同的s");
|
|
486
423
|
return arcs.map(function (arc, index) {
|
|
487
424
|
return getArc(radius, arc, _series, index);
|
|
488
425
|
});
|
|
489
426
|
}, [series, arcs, radius]);
|
|
490
|
-
|
|
491
427
|
var onClick = (0, _react.useCallback)(function (e) {
|
|
492
428
|
var _data = arcs[+e.currentTarget.dataset.index].data;
|
|
493
429
|
triggerOnRelative('onClick', _data);
|
|
@@ -518,7 +454,6 @@ var Component = /*#__PURE__*/(0, _react.memo)(function (_ref5) {
|
|
|
518
454
|
}, [onEvent]);
|
|
519
455
|
(0, _react.useLayoutEffect)(function () {
|
|
520
456
|
var animation;
|
|
521
|
-
|
|
522
457
|
if (!!on) {
|
|
523
458
|
animation = (0, _popmotion.animate)({
|
|
524
459
|
from: 0,
|
|
@@ -542,7 +477,6 @@ var Component = /*#__PURE__*/(0, _react.memo)(function (_ref5) {
|
|
|
542
477
|
onEmit('click', _data);
|
|
543
478
|
}
|
|
544
479
|
}
|
|
545
|
-
|
|
546
480
|
return function () {
|
|
547
481
|
prevIndex.current = currentIndex;
|
|
548
482
|
animation && animation.stop();
|
|
@@ -555,14 +489,12 @@ var Component = /*#__PURE__*/(0, _react.memo)(function (_ref5) {
|
|
|
555
489
|
if (!window.aiData) {
|
|
556
490
|
window.aiData = {};
|
|
557
491
|
}
|
|
558
|
-
|
|
559
492
|
window.aiData[id] = {
|
|
560
493
|
getAI: function getAI() {
|
|
561
494
|
return aiData;
|
|
562
495
|
}
|
|
563
496
|
};
|
|
564
497
|
}
|
|
565
|
-
|
|
566
498
|
return function () {
|
|
567
499
|
window.aiData && window.aiData[id] && delete window.aiData[id];
|
|
568
500
|
};
|
|
@@ -571,26 +503,21 @@ var Component = /*#__PURE__*/(0, _react.memo)(function (_ref5) {
|
|
|
571
503
|
var halfChartHeight = chartHeight / 2;
|
|
572
504
|
var rotate_ = decorate2 ? -(arcs[+currentIndex].startAngle + arcs[+currentIndex].endAngle) * 90 / Math.PI + rotate : 0;
|
|
573
505
|
var maxRadius = 0;
|
|
574
|
-
|
|
575
506
|
_arcs.map(function (d) {
|
|
576
507
|
maxRadius = Math.max(maxRadius, d.outerRadius);
|
|
577
508
|
});
|
|
578
|
-
|
|
579
509
|
var centerRadius = 0.5 * maxRadius + 0.5 * _arcs[0].innerRadius;
|
|
580
|
-
|
|
581
510
|
var _useState3 = (0, _react.useState)({
|
|
582
|
-
|
|
583
|
-
|
|
584
|
-
|
|
585
|
-
|
|
586
|
-
|
|
587
|
-
|
|
588
|
-
|
|
511
|
+
x: 0,
|
|
512
|
+
y: 0
|
|
513
|
+
}),
|
|
514
|
+
_useState4 = (0, _slicedToArray2["default"])(_useState3, 2),
|
|
515
|
+
mousePos = _useState4[0],
|
|
516
|
+
setMousePos = _useState4[1];
|
|
589
517
|
var _useState5 = (0, _react.useState)(null),
|
|
590
|
-
|
|
591
|
-
|
|
592
|
-
|
|
593
|
-
|
|
518
|
+
_useState6 = (0, _slicedToArray2["default"])(_useState5, 2),
|
|
519
|
+
hoverData = _useState6[0],
|
|
520
|
+
setHoverData = _useState6[1];
|
|
594
521
|
var pieWarpEl = (0, _react.useRef)(null);
|
|
595
522
|
return outerDecorate ? /*#__PURE__*/_react["default"].createElement(_react["default"].Fragment, null, /*#__PURE__*/_react["default"].createElement(_.ChartContainer //用于生成甜甜圈图,判断依据是外环装饰这个配置项(outerDecorate)
|
|
596
523
|
, {
|
|
@@ -606,7 +533,8 @@ var Component = /*#__PURE__*/(0, _react.memo)(function (_ref5) {
|
|
|
606
533
|
transition: "transform ease-in-out 0.3s",
|
|
607
534
|
transform: "translate(" + halfChartWidth + "px, " + halfChartHeight + "px) rotate(" + rotate_ + "deg)"
|
|
608
535
|
}
|
|
609
|
-
},
|
|
536
|
+
},
|
|
537
|
+
//用于生成外环装饰的刻度
|
|
610
538
|
outerDecorate.tick.show && getCircleScale(outerDecorate.tick, maxRadius), /*#__PURE__*/_react["default"].createElement("circle", {
|
|
611
539
|
//外环装饰
|
|
612
540
|
cx: "0",
|
|
@@ -617,11 +545,11 @@ var Component = /*#__PURE__*/(0, _react.memo)(function (_ref5) {
|
|
|
617
545
|
strokeWidth: outerDecorate.width
|
|
618
546
|
}), _arcs.map(function (_ref7, index) {
|
|
619
547
|
var id = _ref7.id,
|
|
620
|
-
|
|
621
|
-
|
|
622
|
-
|
|
623
|
-
|
|
624
|
-
|
|
548
|
+
value = _ref7.value,
|
|
549
|
+
series = _ref7.series,
|
|
550
|
+
arc = _ref7.arc,
|
|
551
|
+
innerRadius = _ref7.innerRadius,
|
|
552
|
+
outerRadius = _ref7.outerRadius;
|
|
625
553
|
var arcWidth = outerRadius - innerRadius;
|
|
626
554
|
var path = arc.innerRadius(centerRadius).outerRadius(centerRadius)(value);
|
|
627
555
|
var dashLength = Math.ceil(Math.PI * centerRadius * 2 / _arcs.length);
|
|
@@ -658,8 +586,8 @@ var Component = /*#__PURE__*/(0, _react.memo)(function (_ref5) {
|
|
|
658
586
|
}), /*#__PURE__*/_react["default"].createElement("defs", null, /*#__PURE__*/_react["default"].createElement(_LinearGradient["default"], {
|
|
659
587
|
id: id,
|
|
660
588
|
colors: pie,
|
|
661
|
-
rotate: series.color.linear.angle + 180
|
|
662
|
-
|
|
589
|
+
rotate: series.color.linear.angle + 180
|
|
590
|
+
// gradientUnits='objectBoundingBox'
|
|
663
591
|
})));
|
|
664
592
|
}), label && /*#__PURE__*/_react["default"].createElement(RingLabel, {
|
|
665
593
|
config: _objectSpread(_objectSpread({}, label), {}, {
|
|
@@ -710,12 +638,12 @@ var Component = /*#__PURE__*/(0, _react.memo)(function (_ref5) {
|
|
|
710
638
|
}
|
|
711
639
|
}, _arcs.map(function (_ref8, index) {
|
|
712
640
|
var id = _ref8.id,
|
|
713
|
-
|
|
714
|
-
|
|
715
|
-
|
|
716
|
-
|
|
717
|
-
|
|
718
|
-
|
|
641
|
+
value = _ref8.value,
|
|
642
|
+
series = _ref8.series,
|
|
643
|
+
arc = _ref8.arc,
|
|
644
|
+
innerRadius = _ref8.innerRadius,
|
|
645
|
+
outerRadius = _ref8.outerRadius,
|
|
646
|
+
dataIndex = _ref8.index;
|
|
719
647
|
var current = index == currentIndex;
|
|
720
648
|
var prev = index == prevIndex.current;
|
|
721
649
|
var offset = current ? y : prev ? 1 - y : 0;
|
|
@@ -726,18 +654,15 @@ var Component = /*#__PURE__*/(0, _react.memo)(function (_ref5) {
|
|
|
726
654
|
var pie = (0, _utils.getColorList)(series.color);
|
|
727
655
|
var currentPie = animateColor ? (0, _utils.getColorList)(animateColor) : (0, _utils.getColorList)(series.color);
|
|
728
656
|
var textPath = "",
|
|
729
|
-
|
|
730
|
-
|
|
657
|
+
categoryTextStyle = {};
|
|
731
658
|
if (categoryText && categoryText.show) {
|
|
732
659
|
//如果有类目文本,则需要计算文字路径
|
|
733
660
|
//let offsetWidth=decorate2.radiusWidth/2 + radiusWidthAdd/2; //当前文字需生成在装饰物内,故而半径需要减小
|
|
734
661
|
var textArc = arc.innerRadius(outerRadius + (current ? gap : categoryText.gap)).outerRadius(outerRadius + (current ? gap : categoryText.gap))(value);
|
|
735
662
|
var lastA = textArc.lastIndexOf("A");
|
|
736
663
|
textPath = textArc.slice(0, lastA > 0 ? lastA : textArc.length); //文字路径
|
|
737
|
-
|
|
738
664
|
categoryTextStyle = current ? animateCTS : categoryText.textStyle; //这里把textstyle拿出来
|
|
739
665
|
}
|
|
740
|
-
|
|
741
666
|
return /*#__PURE__*/_react["default"].createElement(_react.Fragment, {
|
|
742
667
|
key: index
|
|
743
668
|
}, /*#__PURE__*/_react["default"].createElement("path", {
|
|
@@ -762,7 +687,8 @@ var Component = /*#__PURE__*/(0, _react.memo)(function (_ref5) {
|
|
|
762
687
|
strokeWidth: show ? strokeWidth : "0",
|
|
763
688
|
fill: "url(#" + id + ")",
|
|
764
689
|
fillOpacity: fillOpacity
|
|
765
|
-
}),
|
|
690
|
+
}),
|
|
691
|
+
//装饰物2,产生于每个弧的外部
|
|
766
692
|
decorate2 && decorate2.show && /*#__PURE__*/_react["default"].createElement("path", {
|
|
767
693
|
"data-index": index,
|
|
768
694
|
onClick: onClick,
|
|
@@ -773,7 +699,8 @@ var Component = /*#__PURE__*/(0, _react.memo)(function (_ref5) {
|
|
|
773
699
|
strokeWidth: show ? strokeWidth : "0",
|
|
774
700
|
fill: "url(#" + id + ")",
|
|
775
701
|
fillOpacity: decorate2.opacity / 100
|
|
776
|
-
}),
|
|
702
|
+
}),
|
|
703
|
+
//类目文本
|
|
777
704
|
value && categoryText && categoryText.show && /*#__PURE__*/_react["default"].createElement("g", null, /*#__PURE__*/_react["default"].createElement("path", {
|
|
778
705
|
onClick: onClick,
|
|
779
706
|
onMouseEnter: onMouseEnter,
|
|
@@ -796,8 +723,8 @@ var Component = /*#__PURE__*/(0, _react.memo)(function (_ref5) {
|
|
|
796
723
|
}, _arcs[index].displayName || _arcs[index].fieldName))), /*#__PURE__*/_react["default"].createElement("defs", null, /*#__PURE__*/_react["default"].createElement(_LinearGradient["default"], {
|
|
797
724
|
id: id,
|
|
798
725
|
colors: current ? currentPie : pie,
|
|
799
|
-
rotate: current ? animateColor ? animateColor.linear.angle + 180 : series.color.linear.angle + 180 : series.color.linear.angle + 180
|
|
800
|
-
|
|
726
|
+
rotate: current ? animateColor ? animateColor.linear.angle + 180 : series.color.linear.angle + 180 : series.color.linear.angle + 180
|
|
727
|
+
// gradientUnits='objectBoundingBox'
|
|
801
728
|
})));
|
|
802
729
|
}), label && /*#__PURE__*/_react["default"].createElement(Label, {
|
|
803
730
|
config: label,
|
|
@@ -852,94 +779,91 @@ var Component = /*#__PURE__*/(0, _react.memo)(function (_ref5) {
|
|
|
852
779
|
judge: judgeData
|
|
853
780
|
})));
|
|
854
781
|
});
|
|
855
|
-
|
|
856
782
|
var Current = function Current(_ref9) {
|
|
857
783
|
var _ref9$config = _ref9.config,
|
|
858
|
-
|
|
859
|
-
|
|
860
|
-
|
|
861
|
-
|
|
862
|
-
|
|
863
|
-
|
|
864
|
-
|
|
865
|
-
|
|
866
|
-
|
|
867
|
-
|
|
868
|
-
|
|
869
|
-
|
|
870
|
-
|
|
871
|
-
|
|
872
|
-
|
|
873
|
-
|
|
874
|
-
|
|
875
|
-
|
|
876
|
-
|
|
877
|
-
|
|
878
|
-
|
|
879
|
-
|
|
880
|
-
|
|
881
|
-
|
|
882
|
-
|
|
883
|
-
|
|
884
|
-
|
|
885
|
-
|
|
886
|
-
|
|
887
|
-
|
|
888
|
-
|
|
889
|
-
|
|
890
|
-
|
|
891
|
-
|
|
892
|
-
|
|
893
|
-
|
|
894
|
-
|
|
895
|
-
|
|
896
|
-
|
|
897
|
-
|
|
898
|
-
|
|
899
|
-
|
|
900
|
-
|
|
901
|
-
|
|
902
|
-
|
|
903
|
-
|
|
784
|
+
show = _ref9$config.show,
|
|
785
|
+
gap = _ref9$config.gap,
|
|
786
|
+
_ref9$config$name = _ref9$config.name,
|
|
787
|
+
showName = _ref9$config$name.show,
|
|
788
|
+
nameColor = _ref9$config$name.sameColor,
|
|
789
|
+
nameFont = _ref9$config$name.font,
|
|
790
|
+
_ref9$config$name$tra = _ref9$config$name.translate,
|
|
791
|
+
translate = _ref9$config$name$tra === void 0 ? {
|
|
792
|
+
x: 0,
|
|
793
|
+
y: 0
|
|
794
|
+
} : _ref9$config$name$tra,
|
|
795
|
+
maxWidth = _ref9$config$name.maxWidth,
|
|
796
|
+
textOverflow = _ref9$config$name.textOverflow,
|
|
797
|
+
speed = _ref9$config$name.speed,
|
|
798
|
+
_ref9$config$percent = _ref9$config.percent,
|
|
799
|
+
showPercent = _ref9$config$percent.show,
|
|
800
|
+
percentColor = _ref9$config$percent.sameColor,
|
|
801
|
+
percentFont = _ref9$config$percent.font,
|
|
802
|
+
precision = _ref9$config$percent.precision,
|
|
803
|
+
_ref9$config$percent$ = _ref9$config$percent.translate,
|
|
804
|
+
translatePercentX = _ref9$config$percent$.x,
|
|
805
|
+
translatePercentY = _ref9$config$percent$.y,
|
|
806
|
+
_ref9$config$value = _ref9$config.value,
|
|
807
|
+
showValue = _ref9$config$value.show,
|
|
808
|
+
valueColor = _ref9$config$value.sameColor,
|
|
809
|
+
valueFont = _ref9$config$value.font,
|
|
810
|
+
_ref9$config$value$tr = _ref9$config$value.translate,
|
|
811
|
+
translateValueX = _ref9$config$value$tr.x,
|
|
812
|
+
translateValueY = _ref9$config$value$tr.y,
|
|
813
|
+
_ref9$config$value$su = _ref9$config$value.suffix,
|
|
814
|
+
showSuffix = _ref9$config$value$su.show,
|
|
815
|
+
fontSize = _ref9$config$value$su.fontSize,
|
|
816
|
+
text = _ref9$config$value$su.text,
|
|
817
|
+
_ref9$config$value$su2 = _ref9$config$value$su.translate,
|
|
818
|
+
translateSuffixX = _ref9$config$value$su2.x,
|
|
819
|
+
translateSuffixY = _ref9$config$value$su2.y,
|
|
820
|
+
_ref9$iosStyle = _ref9.iosStyle,
|
|
821
|
+
isIOS = _ref9$iosStyle.isIOS,
|
|
822
|
+
marginLeft = _ref9$iosStyle.marginLeft,
|
|
823
|
+
marginTop = _ref9$iosStyle.marginTop,
|
|
824
|
+
width = _ref9.width,
|
|
825
|
+
height = _ref9.height,
|
|
826
|
+
data = _ref9.data,
|
|
827
|
+
judge = _ref9.judge,
|
|
828
|
+
currentIndex = _ref9.currentIndex;
|
|
904
829
|
var _data = (0, _react.useMemo)(function () {
|
|
905
830
|
var legendDataWithPercent = (0, _utils.getDataWithPercent)(data, precision);
|
|
906
831
|
return (0, _utils.sortPie)(legendDataWithPercent, "");
|
|
907
|
-
}, [data, precision]);
|
|
908
|
-
|
|
832
|
+
}, [data, precision]);
|
|
909
833
|
|
|
834
|
+
//数据容错,当data都为零那么需要进行以下容错
|
|
910
835
|
if (judge == 0) {
|
|
911
836
|
_data.forEach(function (d) {
|
|
912
837
|
d.percent = 0, d.value = 0;
|
|
913
838
|
});
|
|
914
839
|
}
|
|
915
|
-
|
|
916
840
|
var currentData = _data[currentIndex];
|
|
917
841
|
if (!currentData) return null;
|
|
918
842
|
var displayName = currentData.displayName,
|
|
919
|
-
|
|
920
|
-
|
|
921
|
-
|
|
843
|
+
fieldName = currentData.fieldName,
|
|
844
|
+
value = currentData.value,
|
|
845
|
+
percent = currentData.percent;
|
|
922
846
|
var nameTemp = displayName ? displayName : fieldName; //类目名
|
|
923
847
|
|
|
924
848
|
var foreignStyle = {
|
|
925
|
-
|
|
926
|
-
|
|
927
|
-
|
|
928
|
-
|
|
929
|
-
|
|
930
|
-
|
|
931
|
-
|
|
932
|
-
|
|
933
|
-
|
|
934
|
-
|
|
935
|
-
|
|
936
|
-
|
|
937
|
-
|
|
938
|
-
|
|
939
|
-
|
|
940
|
-
|
|
941
|
-
|
|
942
|
-
|
|
849
|
+
//foreignObject标签样式,
|
|
850
|
+
width: width,
|
|
851
|
+
height: height,
|
|
852
|
+
position: "relative",
|
|
853
|
+
overflow: "visible",
|
|
854
|
+
pointerEvents: "none"
|
|
855
|
+
},
|
|
856
|
+
boxStyle = {
|
|
857
|
+
//弹性盒子样式,用于当前值的上下居中对齐等
|
|
858
|
+
width: width,
|
|
859
|
+
height: height,
|
|
860
|
+
position: "absolute",
|
|
861
|
+
display: "flex",
|
|
862
|
+
flexDirection: "column",
|
|
863
|
+
justifyContent: "center",
|
|
864
|
+
alignItems: "center",
|
|
865
|
+
transform: isIOS ? "translate(".concat(marginLeft, "px,").concat(marginTop, "px)") : "translate(-".concat(width / 2, "px,-").concat(height / 2, "px)")
|
|
866
|
+
};
|
|
943
867
|
var seriesColor = currentData.series.color;
|
|
944
868
|
seriesColor = seriesColor.type == "pure" ? seriesColor.pure : seriesColor.linear.stops[0].color;
|
|
945
869
|
return show && /*#__PURE__*/_react["default"].createElement("foreignObject", {
|
|
@@ -959,7 +883,8 @@ var Current = function Current(_ref9) {
|
|
|
959
883
|
color: nameColor ? seriesColor : nameFont.color,
|
|
960
884
|
transform: "translate(".concat(translate.x, "px,").concat(translate.y, "px)")
|
|
961
885
|
})
|
|
962
|
-
}),
|
|
886
|
+
}),
|
|
887
|
+
//真实值
|
|
963
888
|
showValue && /*#__PURE__*/_react["default"].createElement("span", {
|
|
964
889
|
style: _objectSpread(_objectSpread({}, (0, _utils.getFontStyle)(valueFont)), {}, {
|
|
965
890
|
transform: "translate(" + translateValueX + "px," + translateValueY + "px)",
|
|
@@ -972,7 +897,8 @@ var Current = function Current(_ref9) {
|
|
|
972
897
|
transform: "translate(" + translateSuffixX + "px," + translateSuffixY + "px)",
|
|
973
898
|
fontSize: fontSize
|
|
974
899
|
}
|
|
975
|
-
}, text)),
|
|
900
|
+
}, text)),
|
|
901
|
+
//百分比值
|
|
976
902
|
showPercent && /*#__PURE__*/_react["default"].createElement("span", {
|
|
977
903
|
style: _objectSpread(_objectSpread({
|
|
978
904
|
transform: "translate(" + translatePercentX + "px," + translatePercentY + "px)"
|
|
@@ -982,99 +908,85 @@ var Current = function Current(_ref9) {
|
|
|
982
908
|
})
|
|
983
909
|
}, percent + "%")));
|
|
984
910
|
};
|
|
985
|
-
|
|
986
911
|
var Label = function Label(_ref10) {
|
|
987
912
|
var _ref10$config = _ref10.config,
|
|
988
|
-
|
|
989
|
-
|
|
990
|
-
|
|
991
|
-
|
|
992
|
-
|
|
993
|
-
|
|
994
|
-
|
|
995
|
-
|
|
996
|
-
|
|
997
|
-
|
|
998
|
-
|
|
999
|
-
|
|
1000
|
-
|
|
1001
|
-
|
|
1002
|
-
|
|
1003
|
-
|
|
1004
|
-
|
|
1005
|
-
|
|
1006
|
-
|
|
1007
|
-
|
|
1008
|
-
|
|
1009
|
-
|
|
1010
|
-
|
|
1011
|
-
|
|
1012
|
-
|
|
1013
|
-
|
|
1014
|
-
|
|
1015
|
-
|
|
1016
|
-
|
|
1017
|
-
|
|
1018
|
-
|
|
1019
|
-
|
|
1020
|
-
|
|
1021
|
-
|
|
1022
|
-
|
|
1023
|
-
|
|
1024
|
-
|
|
1025
|
-
|
|
913
|
+
_ref10$config$maxRadi = _ref10$config.maxRadius,
|
|
914
|
+
maxRadius = _ref10$config$maxRadi === void 0 ? 0 : _ref10$config$maxRadi,
|
|
915
|
+
lineLength = _ref10$config.lineLength,
|
|
916
|
+
lineColor = _ref10$config.lineColor,
|
|
917
|
+
distance = _ref10$config.distance,
|
|
918
|
+
mode = _ref10$config.mode,
|
|
919
|
+
show = _ref10$config.show,
|
|
920
|
+
_ref10$config$transla = _ref10$config.translate,
|
|
921
|
+
translateX = _ref10$config$transla.x,
|
|
922
|
+
translateY = _ref10$config$transla.y,
|
|
923
|
+
_ref10$config$name = _ref10$config.name,
|
|
924
|
+
showName = _ref10$config$name.show,
|
|
925
|
+
nameFont = _ref10$config$name.font,
|
|
926
|
+
maxWidth = _ref10$config$name.maxWidth,
|
|
927
|
+
textOverflow = _ref10$config$name.textOverflow,
|
|
928
|
+
speed = _ref10$config$name.speed,
|
|
929
|
+
_ref10$config$value = _ref10$config.value,
|
|
930
|
+
showValue = _ref10$config$value.show,
|
|
931
|
+
valueFont = _ref10$config$value.font,
|
|
932
|
+
_ref10$config$value$s = _ref10$config$value.suffix,
|
|
933
|
+
showSuffix = _ref10$config$value$s.show,
|
|
934
|
+
text = _ref10$config$value$s.text,
|
|
935
|
+
suffixFontSize = _ref10$config$value$s.fontSize,
|
|
936
|
+
_ref10$config$value$s2 = _ref10$config$value$s.translate,
|
|
937
|
+
suffixTranslateX = _ref10$config$value$s2.x,
|
|
938
|
+
suffixTranslateY = _ref10$config$value$s2.y,
|
|
939
|
+
_ref10$config$percent = _ref10$config.percent,
|
|
940
|
+
showPercent = _ref10$config$percent.show,
|
|
941
|
+
percentFont = _ref10$config$percent.font,
|
|
942
|
+
precision = _ref10$config$percent.precision,
|
|
943
|
+
_ref10$iosStyle = _ref10.iosStyle,
|
|
944
|
+
isIOS = _ref10$iosStyle.isIOS,
|
|
945
|
+
left = _ref10$iosStyle.left,
|
|
946
|
+
top = _ref10$iosStyle.top,
|
|
947
|
+
arcs = _ref10.arcs,
|
|
948
|
+
judge = _ref10.judge,
|
|
949
|
+
animation = _ref10.animation;
|
|
1026
950
|
var _arcs = (0, _react.useMemo)(function () {
|
|
1027
951
|
return (0, _utils.getDataWithPercent)(arcs, precision);
|
|
1028
|
-
}, [arcs, precision]);
|
|
1029
|
-
|
|
1030
|
-
|
|
952
|
+
}, [arcs, precision]);
|
|
953
|
+
//数据做出容错
|
|
1031
954
|
if (judge == 0) {
|
|
1032
955
|
_arcs.forEach(function (d) {
|
|
1033
956
|
d.percent = 0;
|
|
1034
957
|
});
|
|
1035
958
|
}
|
|
1036
|
-
|
|
1037
959
|
return /*#__PURE__*/_react["default"].createElement("g", null, _arcs.map(function (_ref11, index) {
|
|
1038
960
|
var _ref11$series$color = _ref11.series.color,
|
|
1039
|
-
|
|
1040
|
-
|
|
1041
|
-
|
|
1042
|
-
|
|
1043
|
-
|
|
1044
|
-
|
|
1045
|
-
|
|
1046
|
-
|
|
1047
|
-
|
|
1048
|
-
|
|
1049
|
-
|
|
961
|
+
type = _ref11$series$color.type,
|
|
962
|
+
pure = _ref11$series$color.pure,
|
|
963
|
+
stops = _ref11$series$color.linear.stops,
|
|
964
|
+
data = _ref11.data,
|
|
965
|
+
displayName = _ref11.displayName,
|
|
966
|
+
value = _ref11.value,
|
|
967
|
+
percent = _ref11.percent,
|
|
968
|
+
arc = _ref11.arc,
|
|
969
|
+
outerRadius = _ref11.outerRadius,
|
|
970
|
+
actualIndex = _ref11.index;
|
|
1050
971
|
var _arc$centroid = arc.centroid(),
|
|
1051
|
-
|
|
1052
|
-
|
|
1053
|
-
|
|
1054
|
-
|
|
972
|
+
_arc$centroid2 = (0, _slicedToArray2["default"])(_arc$centroid, 2),
|
|
973
|
+
x = _arc$centroid2[0],
|
|
974
|
+
y = _arc$centroid2[1];
|
|
1055
975
|
var midAngle = Math.atan2(y, x);
|
|
1056
|
-
|
|
1057
976
|
var _getCoord = getCoord(midAngle, maxRadius ? maxRadius : outerRadius),
|
|
1058
|
-
|
|
1059
|
-
|
|
1060
|
-
|
|
1061
|
-
|
|
977
|
+
_getCoord2 = (0, _slicedToArray2["default"])(_getCoord, 2),
|
|
978
|
+
x1 = _getCoord2[0],
|
|
979
|
+
y1 = _getCoord2[1];
|
|
1062
980
|
var radius = (maxRadius ? maxRadius : outerRadius) + distance;
|
|
1063
|
-
|
|
1064
981
|
var _getCoord3 = getCoord(midAngle, radius),
|
|
1065
|
-
|
|
1066
|
-
|
|
1067
|
-
|
|
1068
|
-
|
|
982
|
+
_getCoord4 = (0, _slicedToArray2["default"])(_getCoord3, 2),
|
|
983
|
+
x2 = _getCoord4[0],
|
|
984
|
+
y2 = _getCoord4[1];
|
|
1069
985
|
var direction = x2 < 0 ? -1 : 1;
|
|
1070
986
|
var x3 = x2 + lineLength * direction;
|
|
1071
|
-
|
|
1072
987
|
var _x = x3 + (translateX + 6) * direction;
|
|
1073
|
-
|
|
1074
988
|
var _showName = showName && displayName;
|
|
1075
|
-
|
|
1076
989
|
var _showValue = showValue && (value || showSuffix);
|
|
1077
|
-
|
|
1078
990
|
var nameStyle = (0, _utils.getFontStyle)(nameFont);
|
|
1079
991
|
return show && (_showName || showPercent || showValue) && /*#__PURE__*/_react["default"].createElement("g", {
|
|
1080
992
|
key: index
|
|
@@ -1129,101 +1041,88 @@ var Label = function Label(_ref10) {
|
|
|
1129
1041
|
}, (_showValue ? "(" : "") + percent + "%" + (_showValue ? ")" : "")))));
|
|
1130
1042
|
}));
|
|
1131
1043
|
};
|
|
1132
|
-
|
|
1133
1044
|
var RingLabel = function RingLabel(_ref12) {
|
|
1134
1045
|
var _ref12$config = _ref12.config,
|
|
1135
|
-
|
|
1136
|
-
|
|
1137
|
-
|
|
1138
|
-
|
|
1139
|
-
|
|
1140
|
-
|
|
1141
|
-
|
|
1142
|
-
|
|
1143
|
-
|
|
1144
|
-
|
|
1145
|
-
|
|
1146
|
-
|
|
1147
|
-
|
|
1148
|
-
|
|
1149
|
-
|
|
1150
|
-
|
|
1151
|
-
|
|
1152
|
-
|
|
1153
|
-
|
|
1154
|
-
|
|
1155
|
-
|
|
1156
|
-
|
|
1157
|
-
|
|
1158
|
-
|
|
1159
|
-
|
|
1160
|
-
|
|
1161
|
-
|
|
1162
|
-
|
|
1163
|
-
|
|
1164
|
-
|
|
1165
|
-
|
|
1166
|
-
|
|
1167
|
-
|
|
1168
|
-
|
|
1169
|
-
|
|
1170
|
-
|
|
1171
|
-
|
|
1172
|
-
|
|
1173
|
-
|
|
1046
|
+
ringDuration = _ref12$config.ringDuration,
|
|
1047
|
+
labelDuration = _ref12$config.labelDuration,
|
|
1048
|
+
_ref12$config$maxRadi = _ref12$config.maxRadius,
|
|
1049
|
+
maxRadius = _ref12$config$maxRadi === void 0 ? 0 : _ref12$config$maxRadi,
|
|
1050
|
+
lineLength = _ref12$config.lineLength,
|
|
1051
|
+
lineColor = _ref12$config.lineColor,
|
|
1052
|
+
distance = _ref12$config.distance,
|
|
1053
|
+
mode = _ref12$config.mode,
|
|
1054
|
+
show = _ref12$config.show,
|
|
1055
|
+
_ref12$config$transla = _ref12$config.translate,
|
|
1056
|
+
translateX = _ref12$config$transla.x,
|
|
1057
|
+
translateY = _ref12$config$transla.y,
|
|
1058
|
+
_ref12$config$name = _ref12$config.name,
|
|
1059
|
+
showName = _ref12$config$name.show,
|
|
1060
|
+
nameFont = _ref12$config$name.font,
|
|
1061
|
+
maxWidth = _ref12$config$name.maxWidth,
|
|
1062
|
+
textOverflow = _ref12$config$name.textOverflow,
|
|
1063
|
+
speed = _ref12$config$name.speed,
|
|
1064
|
+
_ref12$config$value = _ref12$config.value,
|
|
1065
|
+
showValue = _ref12$config$value.show,
|
|
1066
|
+
valueFont = _ref12$config$value.font,
|
|
1067
|
+
_ref12$config$value$s = _ref12$config$value.suffix,
|
|
1068
|
+
showSuffix = _ref12$config$value$s.show,
|
|
1069
|
+
text = _ref12$config$value$s.text,
|
|
1070
|
+
suffixFontSize = _ref12$config$value$s.fontSize,
|
|
1071
|
+
_ref12$config$value$s2 = _ref12$config$value$s.translate,
|
|
1072
|
+
suffixTranslateX = _ref12$config$value$s2.x,
|
|
1073
|
+
suffixTranslateY = _ref12$config$value$s2.y,
|
|
1074
|
+
_ref12$config$percent = _ref12$config.percent,
|
|
1075
|
+
showPercent = _ref12$config$percent.show,
|
|
1076
|
+
percentFont = _ref12$config$percent.font,
|
|
1077
|
+
precision = _ref12$config$percent.precision,
|
|
1078
|
+
_ref12$iosStyle = _ref12.iosStyle,
|
|
1079
|
+
isIOS = _ref12$iosStyle.isIOS,
|
|
1080
|
+
left = _ref12$iosStyle.left,
|
|
1081
|
+
top = _ref12$iosStyle.top,
|
|
1082
|
+
judge = _ref12.judge,
|
|
1083
|
+
arcs = _ref12.arcs;
|
|
1174
1084
|
var _arcs = (0, _react.useMemo)(function () {
|
|
1175
1085
|
return (0, _utils.getDataWithPercent)(arcs, precision);
|
|
1176
|
-
}, [arcs, precision]);
|
|
1177
|
-
|
|
1086
|
+
}, [arcs, precision]);
|
|
1178
1087
|
|
|
1088
|
+
//数据做出容错
|
|
1179
1089
|
if (judge == 0) {
|
|
1180
1090
|
_arcs.forEach(function (d) {
|
|
1181
1091
|
d.percent = 0;
|
|
1182
1092
|
});
|
|
1183
1093
|
}
|
|
1184
|
-
|
|
1185
1094
|
return /*#__PURE__*/_react["default"].createElement("g", null, _arcs.map(function (_ref13, index) {
|
|
1186
1095
|
var _ref13$series$color = _ref13.series.color,
|
|
1187
|
-
|
|
1188
|
-
|
|
1189
|
-
|
|
1190
|
-
|
|
1191
|
-
|
|
1192
|
-
|
|
1193
|
-
|
|
1194
|
-
|
|
1195
|
-
|
|
1196
|
-
|
|
1197
|
-
|
|
1096
|
+
type = _ref13$series$color.type,
|
|
1097
|
+
pure = _ref13$series$color.pure,
|
|
1098
|
+
stops = _ref13$series$color.linear.stops,
|
|
1099
|
+
realData = _ref13.data,
|
|
1100
|
+
displayName = _ref13.displayName,
|
|
1101
|
+
value = _ref13.value,
|
|
1102
|
+
percent = _ref13.percent,
|
|
1103
|
+
arc = _ref13.arc,
|
|
1104
|
+
outerRadius = _ref13.outerRadius,
|
|
1105
|
+
actualIndex = _ref13.index;
|
|
1198
1106
|
var _arc$centroid3 = arc.centroid(),
|
|
1199
|
-
|
|
1200
|
-
|
|
1201
|
-
|
|
1202
|
-
|
|
1107
|
+
_arc$centroid4 = (0, _slicedToArray2["default"])(_arc$centroid3, 2),
|
|
1108
|
+
x = _arc$centroid4[0],
|
|
1109
|
+
y = _arc$centroid4[1];
|
|
1203
1110
|
var midAngle = Math.atan2(y, x);
|
|
1204
|
-
|
|
1205
1111
|
var _getCoord5 = getCoord(midAngle, maxRadius ? maxRadius : outerRadius),
|
|
1206
|
-
|
|
1207
|
-
|
|
1208
|
-
|
|
1209
|
-
|
|
1112
|
+
_getCoord6 = (0, _slicedToArray2["default"])(_getCoord5, 2),
|
|
1113
|
+
x1 = _getCoord6[0],
|
|
1114
|
+
y1 = _getCoord6[1];
|
|
1210
1115
|
var radius = (maxRadius ? maxRadius : outerRadius) + distance;
|
|
1211
|
-
|
|
1212
1116
|
var _getCoord7 = getCoord(midAngle, radius),
|
|
1213
|
-
|
|
1214
|
-
|
|
1215
|
-
|
|
1216
|
-
|
|
1117
|
+
_getCoord8 = (0, _slicedToArray2["default"])(_getCoord7, 2),
|
|
1118
|
+
x2 = _getCoord8[0],
|
|
1119
|
+
y2 = _getCoord8[1];
|
|
1217
1120
|
var directionX = x2 < 0 ? -1 : 1;
|
|
1218
1121
|
var directionY = y2 < 0 ? -1 : 1;
|
|
1219
1122
|
var x3 = x2 + lineLength * directionX;
|
|
1220
|
-
|
|
1221
1123
|
var _x = x3 + (translateX + 6) * directionX;
|
|
1222
|
-
|
|
1223
1124
|
var _showName = showName && displayName;
|
|
1224
|
-
|
|
1225
1125
|
var _showValue = showValue && (value || showSuffix);
|
|
1226
|
-
|
|
1227
1126
|
return show && (_showName || showPercent || _showValue) && /*#__PURE__*/_react["default"].createElement("g", {
|
|
1228
1127
|
key: index
|
|
1229
1128
|
}, /*#__PURE__*/_react["default"].createElement("path", {
|
|
@@ -1278,7 +1177,4 @@ var RingLabel = function RingLabel(_ref12) {
|
|
|
1278
1177
|
}, (_showValue ? "(" : "") + percent + "%" + (_showValue ? ")" : "")))));
|
|
1279
1178
|
}));
|
|
1280
1179
|
};
|
|
1281
|
-
|
|
1282
|
-
var _default = (0, _.Mapping)((0, _.Carousel)(Component));
|
|
1283
|
-
|
|
1284
|
-
exports["default"] = _default;
|
|
1180
|
+
var _default = exports["default"] = (0, _.Mapping)((0, _.Carousel)(Component));
|