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