@easyv/charts 1.2.6 → 1.2.9
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/lib/components/Axis.js +10 -10
- package/lib/components/Background.js +2 -2
- package/lib/components/BaseLine.js +19 -10
- package/lib/components/Carousel.js +2 -2
- package/lib/components/CartesianChart.js +3 -0
- package/lib/components/ConicalGradient.js +21 -21
- package/lib/components/Indicator.js +2 -2
- package/lib/components/Lighter.js +179 -179
- package/lib/components/Line.js +38 -32
- package/lib/components/LinearGradient.js +2 -2
- package/lib/components/Marquee.js +3 -3
- package/lib/components/PieChart.js +11 -6
- package/lib/components/TextOverflow.js +3 -3
- package/lib/css/index.module.css +41 -41
- package/lib/css/piechart.module.css +26 -26
- package/lib/element/ConicGradient.js +72 -72
- package/lib/hooks/useAnimateData.js +5 -5
- package/lib/hooks/useAxes.js +5 -5
- package/lib/hooks/useCarouselAxisX.js +5 -5
- package/lib/hooks/useExtentData.js +6 -6
- package/lib/hooks/useFilterData.js +5 -5
- package/lib/hooks/useStackData.js +5 -5
- package/lib/hooks/useTooltip.js +10 -10
- package/lib/utils/index.js +1 -1
- package/package.json +53 -53
- package/src/components/AnimateData.tsx +24 -24
- package/src/components/Axis.tsx +354 -354
- package/src/components/Background.tsx +45 -45
- package/src/components/Band.tsx +173 -173
- package/src/components/BaseLine.js +83 -76
- package/src/components/Brush.js +159 -159
- package/src/components/Carousel.tsx +144 -144
- package/src/components/CartesianChart.js +3 -0
- package/src/components/Chart.js +99 -99
- package/src/components/ChartContainer.tsx +63 -63
- package/src/components/ConicalGradient.js +258 -258
- package/src/components/ExtentData.js +17 -17
- package/src/components/FilterData.js +23 -23
- package/src/components/Indicator.js +13 -13
- package/src/components/Label.js +206 -206
- package/src/components/Legend.js +158 -158
- package/src/components/Lighter.jsx +173 -173
- package/src/components/Line.js +145 -144
- package/src/components/LinearGradient.js +29 -29
- package/src/components/Mapping.js +71 -71
- package/src/components/Marquee.js +93 -93
- package/src/components/PieChart.js +1278 -1288
- package/src/components/StackData.js +20 -20
- package/src/components/StereoBar.tsx +310 -310
- package/src/components/TextOverflow.js +51 -51
- package/src/components/Tooltip.js +169 -169
- package/src/components/index.js +55 -55
- package/src/context/index.js +2 -2
- package/src/css/index.module.css +41 -41
- 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 +90 -90
- package/src/hooks/index.js +17 -17
- package/src/hooks/useAnimateData.ts +67 -67
- package/src/hooks/useAxes.js +144 -144
- package/src/hooks/useCarouselAxisX.js +163 -163
- package/src/hooks/useExtentData.js +88 -88
- package/src/hooks/useFilterData.js +72 -72
- package/src/hooks/useStackData.js +100 -100
- package/src/hooks/useTooltip.ts +96 -96
- package/src/index.js +6 -6
- package/src/types/index.d.ts +67 -67
- package/src/utils/index.js +714 -714
- package/tsconfig.json +22 -22
package/lib/components/Line.js
CHANGED
|
@@ -9,6 +9,8 @@ Object.defineProperty(exports, "__esModule", {
|
|
|
9
9
|
});
|
|
10
10
|
exports["default"] = void 0;
|
|
11
11
|
|
|
12
|
+
var _objectDestructuringEmpty2 = _interopRequireDefault(require("@babel/runtime/helpers/objectDestructuringEmpty"));
|
|
13
|
+
|
|
12
14
|
var _slicedToArray2 = _interopRequireDefault(require("@babel/runtime/helpers/slicedToArray"));
|
|
13
15
|
|
|
14
16
|
var _defineProperty2 = _interopRequireDefault(require("@babel/runtime/helpers/defineProperty"));
|
|
@@ -80,7 +82,11 @@ var Area = function Area(_ref2) {
|
|
|
80
82
|
}).y1(function (_ref4) {
|
|
81
83
|
var y = _ref4.data.y;
|
|
82
84
|
return yScaler(y);
|
|
83
|
-
}).y0(height)
|
|
85
|
+
}) // .y0(height)
|
|
86
|
+
.y0(function (_ref5) {
|
|
87
|
+
(0, _objectDestructuringEmpty2["default"])(_ref5);
|
|
88
|
+
return yScaler(0);
|
|
89
|
+
}).defined(defined);
|
|
84
90
|
curve && areaGen.curve(_d3v.curveCatmullRom.alpha(tension));
|
|
85
91
|
curve && areaGen.curve(_d3v.curveMonotoneX);
|
|
86
92
|
return areaGen;
|
|
@@ -106,34 +112,34 @@ var Area = function Area(_ref2) {
|
|
|
106
112
|
})));
|
|
107
113
|
};
|
|
108
114
|
|
|
109
|
-
var _default = /*#__PURE__*/(0, _react.memo)(function (
|
|
110
|
-
var type =
|
|
111
|
-
|
|
112
|
-
lineType =
|
|
113
|
-
lineWidth =
|
|
114
|
-
curve =
|
|
115
|
-
tension =
|
|
116
|
-
connectNulls =
|
|
117
|
-
lighter =
|
|
118
|
-
|
|
119
|
-
lineId =
|
|
120
|
-
stroke =
|
|
121
|
-
area =
|
|
122
|
-
data =
|
|
123
|
-
|
|
124
|
-
xScaler =
|
|
125
|
-
direction =
|
|
126
|
-
yScaler =
|
|
115
|
+
var _default = /*#__PURE__*/(0, _react.memo)(function (_ref6) {
|
|
116
|
+
var type = _ref6.type,
|
|
117
|
+
_ref6$config$line = _ref6.config.line,
|
|
118
|
+
lineType = _ref6$config$line.type,
|
|
119
|
+
lineWidth = _ref6$config$line.lineWidth,
|
|
120
|
+
curve = _ref6$config$line.curve,
|
|
121
|
+
tension = _ref6$config$line.tension,
|
|
122
|
+
connectNulls = _ref6$config$line.connectNulls,
|
|
123
|
+
lighter = _ref6$config$line.lighter,
|
|
124
|
+
_ref6$line = _ref6.line,
|
|
125
|
+
lineId = _ref6$line.id,
|
|
126
|
+
stroke = _ref6$line.stroke,
|
|
127
|
+
area = _ref6.area,
|
|
128
|
+
data = _ref6.data,
|
|
129
|
+
_ref6$xAxis = _ref6.xAxis,
|
|
130
|
+
xScaler = _ref6$xAxis.scaler,
|
|
131
|
+
direction = _ref6$xAxis.direction,
|
|
132
|
+
yScaler = _ref6.yAxis.scaler;
|
|
127
133
|
if (!data.length) return null;
|
|
128
134
|
var ticks = xScaler.domain();
|
|
129
135
|
var sortData = (0, _react.useMemo)(function () {
|
|
130
|
-
var usefulData = data.filter(function (
|
|
131
|
-
var x =
|
|
136
|
+
var usefulData = data.filter(function (_ref7) {
|
|
137
|
+
var x = _ref7.data.x;
|
|
132
138
|
return ticks.indexOf(x) > -1;
|
|
133
139
|
});
|
|
134
|
-
return usefulData.sort(function (
|
|
135
|
-
var a =
|
|
136
|
-
var b =
|
|
140
|
+
return usefulData.sort(function (_ref8, _ref9) {
|
|
141
|
+
var a = _ref8.data.x;
|
|
142
|
+
var b = _ref9.data.x;
|
|
137
143
|
return ticks.indexOf(a) - ticks.indexOf(b);
|
|
138
144
|
});
|
|
139
145
|
}, [data, ticks]);
|
|
@@ -144,17 +150,17 @@ var _default = /*#__PURE__*/(0, _react.memo)(function (_ref5) {
|
|
|
144
150
|
|
|
145
151
|
var lineGen = (0, _react.useMemo)(function () {
|
|
146
152
|
var isVertical = direction === 'vertical';
|
|
147
|
-
var lineGen = (isVertical ? (0, _d3v.line)().y(function (
|
|
148
|
-
var x =
|
|
153
|
+
var lineGen = (isVertical ? (0, _d3v.line)().y(function (_ref10) {
|
|
154
|
+
var x = _ref10.data.x;
|
|
149
155
|
return xScaler(x);
|
|
150
|
-
}).x(function (
|
|
151
|
-
var y =
|
|
156
|
+
}).x(function (_ref11) {
|
|
157
|
+
var y = _ref11.data.y;
|
|
152
158
|
return yScaler(y);
|
|
153
|
-
}) : (0, _d3v.line)().x(function (
|
|
154
|
-
var x =
|
|
159
|
+
}) : (0, _d3v.line)().x(function (_ref12) {
|
|
160
|
+
var x = _ref12.data.x;
|
|
155
161
|
return xScaler(x);
|
|
156
|
-
}).y(function (
|
|
157
|
-
var y =
|
|
162
|
+
}).y(function (_ref13) {
|
|
163
|
+
var y = _ref13.data.y;
|
|
158
164
|
return yScaler(y);
|
|
159
165
|
})).defined(defined);
|
|
160
166
|
curve && lineGen.curve(_d3v.curveCatmullRom.alpha(tension));
|
|
@@ -17,9 +17,9 @@ function ownKeys(object, enumerableOnly) { var keys = Object.keys(object); if (O
|
|
|
17
17
|
|
|
18
18
|
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; }
|
|
19
19
|
|
|
20
|
-
/**
|
|
21
|
-
* 文字跑马灯组件
|
|
22
|
-
* eg: <Marquee value={文本内容} speed={跑马灯速度} style={额外样式}></Marquee>
|
|
20
|
+
/**
|
|
21
|
+
* 文字跑马灯组件
|
|
22
|
+
* eg: <Marquee value={文本内容} speed={跑马灯速度} style={额外样式}></Marquee>
|
|
23
23
|
*/
|
|
24
24
|
var _default = /*#__PURE__*/(0, _react.memo)(function (props) {
|
|
25
25
|
var value = props.value,
|
|
@@ -324,7 +324,12 @@ var Component = /*#__PURE__*/(0, _react.memo)(function (_ref5) {
|
|
|
324
324
|
trigger = _ref5$state.trigger,
|
|
325
325
|
onEvent = _ref5.onEvent,
|
|
326
326
|
_ref5$data = _ref5.data,
|
|
327
|
-
|
|
327
|
+
originData = _ref5$data === void 0 ? [] : _ref5$data;
|
|
328
|
+
var data = originData.map(function (d) {
|
|
329
|
+
return _objectSpread(_objectSpread({}, d), {}, {
|
|
330
|
+
y: d.y < 0 ? 0 : d.y
|
|
331
|
+
});
|
|
332
|
+
});
|
|
328
333
|
var prevIndex = (0, _react.useRef)(null);
|
|
329
334
|
var legendPrecision = legend.config.percent.precision;
|
|
330
335
|
|
|
@@ -385,6 +390,7 @@ var Component = /*#__PURE__*/(0, _react.memo)(function (_ref5) {
|
|
|
385
390
|
|
|
386
391
|
var arcs = arcsFunc(data);
|
|
387
392
|
var legendDataWithPercent = (0, _utils.getDataWithPercent)(arcs, legendPrecision);
|
|
393
|
+
console.log(legendDataWithPercent);
|
|
388
394
|
|
|
389
395
|
var _legendDataWithPercent = (0, _utils.sortPie)(legendDataWithPercent, order);
|
|
390
396
|
|
|
@@ -522,8 +528,7 @@ var Component = /*#__PURE__*/(0, _react.memo)(function (_ref5) {
|
|
|
522
528
|
series = _ref7.series,
|
|
523
529
|
arc = _ref7.arc,
|
|
524
530
|
innerRadius = _ref7.innerRadius,
|
|
525
|
-
outerRadius = _ref7.outerRadius
|
|
526
|
-
dataIndex = _ref7.index;
|
|
531
|
+
outerRadius = _ref7.outerRadius;
|
|
527
532
|
var arcWidth = outerRadius - innerRadius;
|
|
528
533
|
var path = arc.innerRadius(centerRadius).outerRadius(centerRadius)(value);
|
|
529
534
|
var dashLength = Math.ceil(Math.PI * centerRadius * 2 / _arcs.length);
|
|
@@ -537,7 +542,7 @@ var Component = /*#__PURE__*/(0, _react.memo)(function (_ref5) {
|
|
|
537
542
|
strokeDashoffset: dashLength,
|
|
538
543
|
animationDelay: "".concat(index * 2000, "ms")
|
|
539
544
|
},
|
|
540
|
-
"data-index":
|
|
545
|
+
"data-index": index,
|
|
541
546
|
onClick: onClick,
|
|
542
547
|
onMouseEnter: onMouseEnter,
|
|
543
548
|
onMouseLeave: onMouseLeave,
|
|
@@ -601,7 +606,7 @@ var Component = /*#__PURE__*/(0, _react.memo)(function (_ref5) {
|
|
|
601
606
|
return /*#__PURE__*/_react["default"].createElement(_react.Fragment, {
|
|
602
607
|
key: index
|
|
603
608
|
}, /*#__PURE__*/_react["default"].createElement("path", {
|
|
604
|
-
"data-index":
|
|
609
|
+
"data-index": index,
|
|
605
610
|
onClick: onClick,
|
|
606
611
|
onMouseEnter: onMouseEnter,
|
|
607
612
|
onMouseLeave: onMouseLeave,
|
|
@@ -612,7 +617,7 @@ var Component = /*#__PURE__*/(0, _react.memo)(function (_ref5) {
|
|
|
612
617
|
fillOpacity: fillOpacity
|
|
613
618
|
}), //装饰物2,产生于每个弧的外部
|
|
614
619
|
decorate2 && decorate2.show && /*#__PURE__*/_react["default"].createElement("path", {
|
|
615
|
-
"data-index":
|
|
620
|
+
"data-index": index,
|
|
616
621
|
onClick: onClick,
|
|
617
622
|
onMouseEnter: onMouseEnter,
|
|
618
623
|
onMouseLeave: onMouseLeave,
|
|
@@ -17,9 +17,9 @@ function ownKeys(object, enumerableOnly) { var keys = Object.keys(object); if (O
|
|
|
17
17
|
|
|
18
18
|
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; }
|
|
19
19
|
|
|
20
|
-
/**
|
|
21
|
-
* 文本溢出组件
|
|
22
|
-
* eg: <TextOverflow type={溢出形式} value={文本内容} speed={跑马灯速度} style={额外样式}></Marquee>
|
|
20
|
+
/**
|
|
21
|
+
* 文本溢出组件
|
|
22
|
+
* eg: <TextOverflow type={溢出形式} value={文本内容} speed={跑马灯速度} style={额外样式}></Marquee>
|
|
23
23
|
*/
|
|
24
24
|
var _default = /*#__PURE__*/(0, _react.memo)(function (props) {
|
|
25
25
|
var type = props.type,
|
package/lib/css/index.module.css
CHANGED
|
@@ -1,42 +1,42 @@
|
|
|
1
|
-
.rotateClockwise {
|
|
2
|
-
animation-name: rotateClockwise;
|
|
3
|
-
}
|
|
4
|
-
|
|
5
|
-
@keyframes rotateClockwise {
|
|
6
|
-
0% {
|
|
7
|
-
transform: rotate(0deg);
|
|
8
|
-
}
|
|
9
|
-
100% {
|
|
10
|
-
transform: rotate(360deg);
|
|
11
|
-
}
|
|
12
|
-
}
|
|
13
|
-
|
|
14
|
-
.rotateCounterClockwise {
|
|
15
|
-
animation-name: rotateCounterClockwise;
|
|
16
|
-
}
|
|
17
|
-
|
|
18
|
-
@keyframes rotateCounterClockwise {
|
|
19
|
-
0% {
|
|
20
|
-
transform: rotate(360deg);
|
|
21
|
-
}
|
|
22
|
-
100% {
|
|
23
|
-
transform: rotate(0deg);
|
|
24
|
-
}
|
|
25
|
-
}
|
|
26
|
-
|
|
27
|
-
.showAllStyle {
|
|
28
|
-
display: grid;
|
|
29
|
-
width: 100%;
|
|
30
|
-
grid-template-columns: 40% 30% 30%;
|
|
31
|
-
align-items: center;
|
|
32
|
-
flex-direction: row;
|
|
33
|
-
justify-content: space-between;
|
|
34
|
-
}
|
|
35
|
-
|
|
36
|
-
.notShowAllStyle {
|
|
37
|
-
display: flex;
|
|
38
|
-
width: 100%;
|
|
39
|
-
align-items: center;
|
|
40
|
-
flex-direction: row;
|
|
41
|
-
justify-content: space-between;
|
|
1
|
+
.rotateClockwise {
|
|
2
|
+
animation-name: rotateClockwise;
|
|
3
|
+
}
|
|
4
|
+
|
|
5
|
+
@keyframes rotateClockwise {
|
|
6
|
+
0% {
|
|
7
|
+
transform: rotate(0deg);
|
|
8
|
+
}
|
|
9
|
+
100% {
|
|
10
|
+
transform: rotate(360deg);
|
|
11
|
+
}
|
|
12
|
+
}
|
|
13
|
+
|
|
14
|
+
.rotateCounterClockwise {
|
|
15
|
+
animation-name: rotateCounterClockwise;
|
|
16
|
+
}
|
|
17
|
+
|
|
18
|
+
@keyframes rotateCounterClockwise {
|
|
19
|
+
0% {
|
|
20
|
+
transform: rotate(360deg);
|
|
21
|
+
}
|
|
22
|
+
100% {
|
|
23
|
+
transform: rotate(0deg);
|
|
24
|
+
}
|
|
25
|
+
}
|
|
26
|
+
|
|
27
|
+
.showAllStyle {
|
|
28
|
+
display: grid;
|
|
29
|
+
width: 100%;
|
|
30
|
+
grid-template-columns: 40% 30% 30%;
|
|
31
|
+
align-items: center;
|
|
32
|
+
flex-direction: row;
|
|
33
|
+
justify-content: space-between;
|
|
34
|
+
}
|
|
35
|
+
|
|
36
|
+
.notShowAllStyle {
|
|
37
|
+
display: flex;
|
|
38
|
+
width: 100%;
|
|
39
|
+
align-items: center;
|
|
40
|
+
flex-direction: row;
|
|
41
|
+
justify-content: space-between;
|
|
42
42
|
}
|
|
@@ -1,27 +1,27 @@
|
|
|
1
|
-
/*甜甜圈图专用css*/
|
|
2
|
-
.label-line {
|
|
3
|
-
stroke-dasharray: 100;
|
|
4
|
-
stroke-dashoffset: 100;
|
|
5
|
-
animation: dash 800ms ease forwards;
|
|
6
|
-
}
|
|
7
|
-
|
|
8
|
-
.label-text {
|
|
9
|
-
opacity: 0;
|
|
10
|
-
animation: show 800ms ease forwards;
|
|
11
|
-
}
|
|
12
|
-
|
|
13
|
-
.inner-arc {
|
|
14
|
-
animation: dash 2s ease forwards;
|
|
15
|
-
}
|
|
16
|
-
|
|
17
|
-
@keyframes dash {
|
|
18
|
-
100% {
|
|
19
|
-
stroke-dashoffset: 0%;
|
|
20
|
-
}
|
|
21
|
-
}
|
|
22
|
-
|
|
23
|
-
@keyframes show {
|
|
24
|
-
100% {
|
|
25
|
-
opacity: 1;
|
|
26
|
-
}
|
|
1
|
+
/*甜甜圈图专用css*/
|
|
2
|
+
.label-line {
|
|
3
|
+
stroke-dasharray: 100;
|
|
4
|
+
stroke-dashoffset: 100;
|
|
5
|
+
animation: dash 800ms ease forwards;
|
|
6
|
+
}
|
|
7
|
+
|
|
8
|
+
.label-text {
|
|
9
|
+
opacity: 0;
|
|
10
|
+
animation: show 800ms ease forwards;
|
|
11
|
+
}
|
|
12
|
+
|
|
13
|
+
.inner-arc {
|
|
14
|
+
animation: dash 2s ease forwards;
|
|
15
|
+
}
|
|
16
|
+
|
|
17
|
+
@keyframes dash {
|
|
18
|
+
100% {
|
|
19
|
+
stroke-dashoffset: 0%;
|
|
20
|
+
}
|
|
21
|
+
}
|
|
22
|
+
|
|
23
|
+
@keyframes show {
|
|
24
|
+
100% {
|
|
25
|
+
opacity: 1;
|
|
26
|
+
}
|
|
27
27
|
}
|
|
@@ -1,73 +1,73 @@
|
|
|
1
|
-
"use strict";
|
|
2
|
-
|
|
3
|
-
var _interopRequireWildcard = require("@babel/runtime/helpers/interopRequireWildcard");
|
|
4
|
-
|
|
5
|
-
Object.defineProperty(exports, "__esModule", {
|
|
6
|
-
value: true
|
|
7
|
-
});
|
|
8
|
-
exports["default"] = ConicGradient;
|
|
9
|
-
|
|
10
|
-
var d3 = _interopRequireWildcard(require("d3"));
|
|
11
|
-
|
|
12
|
-
//只支持在svg中使用
|
|
13
|
-
//在<clipPath>标签中绘制圆环路径,在<foreignObject>中使用conic-gradient来制作角向渐变
|
|
14
|
-
//然后在foreignObject中调用clipPath来剪切dom元素,实现环形渐变效果
|
|
15
|
-
function ConicGradient(props) {
|
|
16
|
-
var gradientId = props.gradientId,
|
|
17
|
-
_props$colorConfig = props.colorConfig,
|
|
18
|
-
colorConfig = _props$colorConfig === void 0 ? {} : _props$colorConfig,
|
|
19
|
-
_props$circleConfig = props.circleConfig,
|
|
20
|
-
circleConfig = _props$circleConfig === void 0 ? {} : _props$circleConfig,
|
|
21
|
-
_colorConfig$colorTyp = colorConfig.colorType,
|
|
22
|
-
colorType = _colorConfig$colorTyp === void 0 ? "linear" : _colorConfig$colorTyp,
|
|
23
|
-
_colorConfig$colors = colorConfig.colors,
|
|
24
|
-
colors = _colorConfig$colors === void 0 ? [{
|
|
25
|
-
offset: 0,
|
|
26
|
-
color: "rgba(255,0,0,0.5)"
|
|
27
|
-
}, {
|
|
28
|
-
offset: 50,
|
|
29
|
-
color: "rgba(0,255,0,0.5)"
|
|
30
|
-
}, {
|
|
31
|
-
offset: 100,
|
|
32
|
-
color: "rgba(0,0,255,0.5)"
|
|
33
|
-
}] : _colorConfig$colors,
|
|
34
|
-
_circleConfig$innerRa = circleConfig.innerRadius,
|
|
35
|
-
innerRadius = _circleConfig$innerRa === void 0 ? 80 : _circleConfig$innerRa,
|
|
36
|
-
_circleConfig$outerRa = circleConfig.outerRadius,
|
|
37
|
-
outerRadius = _circleConfig$outerRa === void 0 ? 100 : _circleConfig$outerRa,
|
|
38
|
-
_circleConfig$startAn = circleConfig.startAngle,
|
|
39
|
-
startAngle = _circleConfig$startAn === void 0 ? 0 : _circleConfig$startAn,
|
|
40
|
-
_circleConfig$endAngl = circleConfig.endAngle,
|
|
41
|
-
endAngle = _circleConfig$endAngl === void 0 ? 360 : _circleConfig$endAngl,
|
|
42
|
-
_circleConfig$cornerR = circleConfig.cornerRadius,
|
|
43
|
-
cornerRadius = _circleConfig$cornerR === void 0 ? 0 : _circleConfig$cornerR,
|
|
44
|
-
_circleConfig$padAngl = circleConfig.padAngle,
|
|
45
|
-
padAngle = _circleConfig$padAngl === void 0 ? 0 : _circleConfig$padAngl;
|
|
46
|
-
var arc = d3.arc().innerRadius(innerRadius).outerRadius(outerRadius).startAngle(startAngle * Math.PI / 180).endAngle(endAngle * Math.PI / 180).cornerRadius(cornerRadius).padAngle(padAngle);
|
|
47
|
-
return /*#__PURE__*/React.createElement("g", null, /*#__PURE__*/React.createElement("clipPath", {
|
|
48
|
-
id: "" + gradientId,
|
|
49
|
-
style: {
|
|
50
|
-
transform: "translate(50%,50%)"
|
|
51
|
-
}
|
|
52
|
-
}, /*#__PURE__*/React.createElement("path", {
|
|
53
|
-
d: arc()
|
|
54
|
-
})), /*#__PURE__*/React.createElement("foreignObject", {
|
|
55
|
-
style: {
|
|
56
|
-
width: "100%",
|
|
57
|
-
height: "100%",
|
|
58
|
-
transform: "translate(-50%,-50%)",
|
|
59
|
-
background: colorType === "pure" ? colors : "conic-gradient(".concat(colorsToString(colors), ")"),
|
|
60
|
-
clipPath: "url(".concat('#' + gradientId, ")")
|
|
61
|
-
}
|
|
62
|
-
}));
|
|
63
|
-
}
|
|
64
|
-
|
|
65
|
-
function colorsToString(colors) {
|
|
66
|
-
var s = "";
|
|
67
|
-
colors.sort(function (a, b) {
|
|
68
|
-
return a.offset - b.offset;
|
|
69
|
-
}).map(function (d) {
|
|
70
|
-
s = s + d.color + " " + d.offset + "%,";
|
|
71
|
-
});
|
|
72
|
-
return s.slice(0, -1);
|
|
1
|
+
"use strict";
|
|
2
|
+
|
|
3
|
+
var _interopRequireWildcard = require("@babel/runtime/helpers/interopRequireWildcard");
|
|
4
|
+
|
|
5
|
+
Object.defineProperty(exports, "__esModule", {
|
|
6
|
+
value: true
|
|
7
|
+
});
|
|
8
|
+
exports["default"] = ConicGradient;
|
|
9
|
+
|
|
10
|
+
var d3 = _interopRequireWildcard(require("d3"));
|
|
11
|
+
|
|
12
|
+
//只支持在svg中使用
|
|
13
|
+
//在<clipPath>标签中绘制圆环路径,在<foreignObject>中使用conic-gradient来制作角向渐变
|
|
14
|
+
//然后在foreignObject中调用clipPath来剪切dom元素,实现环形渐变效果
|
|
15
|
+
function ConicGradient(props) {
|
|
16
|
+
var gradientId = props.gradientId,
|
|
17
|
+
_props$colorConfig = props.colorConfig,
|
|
18
|
+
colorConfig = _props$colorConfig === void 0 ? {} : _props$colorConfig,
|
|
19
|
+
_props$circleConfig = props.circleConfig,
|
|
20
|
+
circleConfig = _props$circleConfig === void 0 ? {} : _props$circleConfig,
|
|
21
|
+
_colorConfig$colorTyp = colorConfig.colorType,
|
|
22
|
+
colorType = _colorConfig$colorTyp === void 0 ? "linear" : _colorConfig$colorTyp,
|
|
23
|
+
_colorConfig$colors = colorConfig.colors,
|
|
24
|
+
colors = _colorConfig$colors === void 0 ? [{
|
|
25
|
+
offset: 0,
|
|
26
|
+
color: "rgba(255,0,0,0.5)"
|
|
27
|
+
}, {
|
|
28
|
+
offset: 50,
|
|
29
|
+
color: "rgba(0,255,0,0.5)"
|
|
30
|
+
}, {
|
|
31
|
+
offset: 100,
|
|
32
|
+
color: "rgba(0,0,255,0.5)"
|
|
33
|
+
}] : _colorConfig$colors,
|
|
34
|
+
_circleConfig$innerRa = circleConfig.innerRadius,
|
|
35
|
+
innerRadius = _circleConfig$innerRa === void 0 ? 80 : _circleConfig$innerRa,
|
|
36
|
+
_circleConfig$outerRa = circleConfig.outerRadius,
|
|
37
|
+
outerRadius = _circleConfig$outerRa === void 0 ? 100 : _circleConfig$outerRa,
|
|
38
|
+
_circleConfig$startAn = circleConfig.startAngle,
|
|
39
|
+
startAngle = _circleConfig$startAn === void 0 ? 0 : _circleConfig$startAn,
|
|
40
|
+
_circleConfig$endAngl = circleConfig.endAngle,
|
|
41
|
+
endAngle = _circleConfig$endAngl === void 0 ? 360 : _circleConfig$endAngl,
|
|
42
|
+
_circleConfig$cornerR = circleConfig.cornerRadius,
|
|
43
|
+
cornerRadius = _circleConfig$cornerR === void 0 ? 0 : _circleConfig$cornerR,
|
|
44
|
+
_circleConfig$padAngl = circleConfig.padAngle,
|
|
45
|
+
padAngle = _circleConfig$padAngl === void 0 ? 0 : _circleConfig$padAngl;
|
|
46
|
+
var arc = d3.arc().innerRadius(innerRadius).outerRadius(outerRadius).startAngle(startAngle * Math.PI / 180).endAngle(endAngle * Math.PI / 180).cornerRadius(cornerRadius).padAngle(padAngle);
|
|
47
|
+
return /*#__PURE__*/React.createElement("g", null, /*#__PURE__*/React.createElement("clipPath", {
|
|
48
|
+
id: "" + gradientId,
|
|
49
|
+
style: {
|
|
50
|
+
transform: "translate(50%,50%)"
|
|
51
|
+
}
|
|
52
|
+
}, /*#__PURE__*/React.createElement("path", {
|
|
53
|
+
d: arc()
|
|
54
|
+
})), /*#__PURE__*/React.createElement("foreignObject", {
|
|
55
|
+
style: {
|
|
56
|
+
width: "100%",
|
|
57
|
+
height: "100%",
|
|
58
|
+
transform: "translate(-50%,-50%)",
|
|
59
|
+
background: colorType === "pure" ? colors : "conic-gradient(".concat(colorsToString(colors), ")"),
|
|
60
|
+
clipPath: "url(".concat('#' + gradientId, ")")
|
|
61
|
+
}
|
|
62
|
+
}));
|
|
63
|
+
}
|
|
64
|
+
|
|
65
|
+
function colorsToString(colors) {
|
|
66
|
+
var s = "";
|
|
67
|
+
colors.sort(function (a, b) {
|
|
68
|
+
return a.offset - b.offset;
|
|
69
|
+
}).map(function (d) {
|
|
70
|
+
s = s + d.color + " " + d.offset + "%,";
|
|
71
|
+
});
|
|
72
|
+
return s.slice(0, -1);
|
|
73
73
|
}
|
|
@@ -19,11 +19,11 @@ function ownKeys(object, enumerableOnly) { var keys = Object.keys(object); if (O
|
|
|
19
19
|
|
|
20
20
|
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; }
|
|
21
21
|
|
|
22
|
-
/**
|
|
23
|
-
* 图表数据动画
|
|
24
|
-
* @param {Array} data data列表
|
|
25
|
-
* @param {boolean} dataAnimation 是否开启数据增长动画
|
|
26
|
-
* @returns 改变后的数据
|
|
22
|
+
/**
|
|
23
|
+
* 图表数据动画
|
|
24
|
+
* @param {Array} data data列表
|
|
25
|
+
* @param {boolean} dataAnimation 是否开启数据增长动画
|
|
26
|
+
* @returns 改变后的数据
|
|
27
27
|
*/
|
|
28
28
|
var _default = function _default(data, dataAnimation) {
|
|
29
29
|
var _useState = (0, _react.useState)([]),
|
package/lib/hooks/useAxes.js
CHANGED
|
@@ -28,11 +28,11 @@ var scales = {
|
|
|
28
28
|
utc: _d3Scale.scaleUtc,
|
|
29
29
|
ordinal: _utils.band
|
|
30
30
|
};
|
|
31
|
-
/**
|
|
32
|
-
* x/y/z轴
|
|
33
|
-
* @param {Array} axes 轴列表数组
|
|
34
|
-
* @param {Object} context 其中需要包括
|
|
35
|
-
* @returns {Map} 返回所有轴
|
|
31
|
+
/**
|
|
32
|
+
* x/y/z轴
|
|
33
|
+
* @param {Array} axes 轴列表数组
|
|
34
|
+
* @param {Object} context 其中需要包括
|
|
35
|
+
* @returns {Map} 返回所有轴
|
|
36
36
|
*/
|
|
37
37
|
|
|
38
38
|
var _default = function _default(_ref) {
|
|
@@ -25,11 +25,11 @@ var initialState = {
|
|
|
25
25
|
currentIndex: null,
|
|
26
26
|
flag: false
|
|
27
27
|
};
|
|
28
|
-
/**
|
|
29
|
-
* x轴滚动逻辑
|
|
30
|
-
* @param {Object} axis x轴配置项
|
|
31
|
-
* @param {Object} config x轴轮播动画的配置项
|
|
32
|
-
* @returns {Map} 返回经过改变后的x轴,主要是ticks和scaler的range发生了改变
|
|
28
|
+
/**
|
|
29
|
+
* x轴滚动逻辑
|
|
30
|
+
* @param {Object} axis x轴配置项
|
|
31
|
+
* @param {Object} config x轴轮播动画的配置项
|
|
32
|
+
* @returns {Map} 返回经过改变后的x轴,主要是ticks和scaler的range发生了改变
|
|
33
33
|
*/
|
|
34
34
|
|
|
35
35
|
var _default = function _default(axis, config) {
|
|
@@ -61,12 +61,12 @@ var stackData = function stackData(data, series) {
|
|
|
61
61
|
dataMap.clear();
|
|
62
62
|
return [min, max];
|
|
63
63
|
};
|
|
64
|
-
/**
|
|
65
|
-
* 计算轴的domain
|
|
66
|
-
* @param {Array} axes x轴列表
|
|
67
|
-
* @param {Object} series 图表的系列,主要是为了读取type, stack, yOrZ三个字段
|
|
68
|
-
* @param {Object} data 数据列表
|
|
69
|
-
* @returns {Array} 返回带domain的轴
|
|
64
|
+
/**
|
|
65
|
+
* 计算轴的domain
|
|
66
|
+
* @param {Array} axes x轴列表
|
|
67
|
+
* @param {Object} series 图表的系列,主要是为了读取type, stack, yOrZ三个字段
|
|
68
|
+
* @param {Object} data 数据列表
|
|
69
|
+
* @returns {Array} 返回带domain的轴
|
|
70
70
|
*/
|
|
71
71
|
|
|
72
72
|
|
|
@@ -56,11 +56,11 @@ var getSelected = function getSelected(selected, name) {
|
|
|
56
56
|
});
|
|
57
57
|
return tmp;
|
|
58
58
|
};
|
|
59
|
-
/**
|
|
60
|
-
* 图例点击状态管理
|
|
61
|
-
* @param {Array} data 数据
|
|
62
|
-
* @param {Map} series 系列
|
|
63
|
-
* @returns {Array} 返回筛选后的数据和是否选中状态,及控制选中函数
|
|
59
|
+
/**
|
|
60
|
+
* 图例点击状态管理
|
|
61
|
+
* @param {Array} data 数据
|
|
62
|
+
* @param {Map} series 系列
|
|
63
|
+
* @returns {Array} 返回筛选后的数据和是否选中状态,及控制选中函数
|
|
64
64
|
*/
|
|
65
65
|
|
|
66
66
|
|
|
@@ -91,11 +91,11 @@ var setStackData = function setStackData(data, series, stacks) {
|
|
|
91
91
|
dataMap.clear();
|
|
92
92
|
return series;
|
|
93
93
|
};
|
|
94
|
-
/**
|
|
95
|
-
* 计算堆叠数据
|
|
96
|
-
* @param {Array} data 数据
|
|
97
|
-
* @param {Map} series 系列
|
|
98
|
-
* @returns {Array} 返回堆叠后的数据,由一开始的{x, y, s}变成{data: {x, y, s}, bound: [start, end], index}
|
|
94
|
+
/**
|
|
95
|
+
* 计算堆叠数据
|
|
96
|
+
* @param {Array} data 数据
|
|
97
|
+
* @param {Map} series 系列
|
|
98
|
+
* @returns {Array} 返回堆叠后的数据,由一开始的{x, y, s}变成{data: {x, y, s}, bound: [start, end], index}
|
|
99
99
|
*/
|
|
100
100
|
|
|
101
101
|
|
package/lib/hooks/useTooltip.js
CHANGED
|
@@ -14,16 +14,16 @@ var _react = require("react");
|
|
|
14
14
|
var _utils = require("../utils");
|
|
15
15
|
|
|
16
16
|
var callback = function callback() {};
|
|
17
|
-
/**
|
|
18
|
-
* 主要用于轴类图表,返回当前选中的是哪一个x
|
|
19
|
-
* @param {Array} svg svg的dom实例
|
|
20
|
-
* @param {Number} marginLeft 左间距
|
|
21
|
-
* @param {Number} marginTop 上间距
|
|
22
|
-
* @param {Number} width 宽
|
|
23
|
-
* @param {Number} height 高
|
|
24
|
-
* @param {Number} axisX 类目轴
|
|
25
|
-
* @param {Object} config 轮播动画参数
|
|
26
|
-
* @returns {Object} 返回被选中的名称,坐标,选中方法
|
|
17
|
+
/**
|
|
18
|
+
* 主要用于轴类图表,返回当前选中的是哪一个x
|
|
19
|
+
* @param {Array} svg svg的dom实例
|
|
20
|
+
* @param {Number} marginLeft 左间距
|
|
21
|
+
* @param {Number} marginTop 上间距
|
|
22
|
+
* @param {Number} width 宽
|
|
23
|
+
* @param {Number} height 高
|
|
24
|
+
* @param {Number} axisX 类目轴
|
|
25
|
+
* @param {Object} config 轮播动画参数
|
|
26
|
+
* @returns {Object} 返回被选中的名称,坐标,选中方法
|
|
27
27
|
*/
|
|
28
28
|
|
|
29
29
|
|
package/lib/utils/index.js
CHANGED
|
@@ -798,7 +798,7 @@ var getDataWithPercent = function getDataWithPercent() {
|
|
|
798
798
|
var targetSeats = digits * 100;
|
|
799
799
|
var total = (0, _d3v.sum)(data, function (d) {
|
|
800
800
|
return d.value;
|
|
801
|
-
});
|
|
801
|
+
}) || 1;
|
|
802
802
|
var votesPerQuota = data.map(function (d, index) {
|
|
803
803
|
return _objectSpread(_objectSpread({}, d), {}, {
|
|
804
804
|
vote: Math.round(d.value / total * digits * 100),
|