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