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