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