@easyv/charts 1.2.0 → 1.2.1

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.
Files changed (86) hide show
  1. package/.babelrc +8 -8
  2. package/.husky/commit-msg +3 -3
  3. package/CHANGELOG.md +18 -18
  4. package/commitlint.config.js +1 -1
  5. package/lib/components/AnimateData.js +36 -36
  6. package/lib/components/Axis.js +329 -329
  7. package/lib/components/Background.js +2 -2
  8. package/lib/components/Band.js +173 -173
  9. package/lib/components/Brush.js +201 -201
  10. package/lib/components/Carousel.js +164 -164
  11. package/lib/components/Chart.js +111 -111
  12. package/lib/components/ChartContainer.js +58 -58
  13. package/lib/components/ConicalGradient.js +264 -264
  14. package/lib/components/ExtentData.js +45 -45
  15. package/lib/components/FilterData.js +53 -53
  16. package/lib/components/Indicator.js +2 -2
  17. package/lib/components/Label.js +278 -278
  18. package/lib/components/Legend.js +154 -154
  19. package/lib/components/Lighter.js +179 -179
  20. package/lib/components/Line.js +181 -181
  21. package/lib/components/LinearGradient.js +2 -2
  22. package/lib/components/Mapping.js +127 -127
  23. package/lib/components/PieChart.js +1061 -1061
  24. package/lib/components/StackData.js +45 -45
  25. package/lib/components/StereoBar.js +336 -336
  26. package/lib/components/Tooltip.js +155 -155
  27. package/lib/components/index.js +194 -194
  28. package/lib/css/index.module.css +41 -41
  29. package/lib/css/piechart.module.css +26 -26
  30. package/lib/element/ConicGradient.js +72 -72
  31. package/lib/formatter/legend.js +91 -91
  32. package/lib/hooks/index.js +62 -62
  33. package/lib/hooks/useAnimateData.js +88 -88
  34. package/lib/hooks/useAxes.js +135 -135
  35. package/lib/hooks/useCarouselAxisX.js +184 -184
  36. package/lib/hooks/useExtentData.js +128 -128
  37. package/lib/hooks/useFilterData.js +112 -112
  38. package/lib/hooks/useStackData.js +134 -134
  39. package/lib/hooks/useTooltip.js +10 -10
  40. package/lib/index.js +84 -84
  41. package/lib/utils/index.js +832 -832
  42. package/package.json +51 -51
  43. package/src/components/AnimateData.tsx +24 -24
  44. package/src/components/Axis.tsx +354 -354
  45. package/src/components/Background.tsx +45 -45
  46. package/src/components/Band.tsx +173 -173
  47. package/src/components/Brush.js +159 -159
  48. package/src/components/Carousel.tsx +144 -144
  49. package/src/components/Chart.js +99 -99
  50. package/src/components/ChartContainer.tsx +63 -63
  51. package/src/components/ConicalGradient.js +258 -258
  52. package/src/components/ExtentData.js +17 -17
  53. package/src/components/FilterData.js +23 -23
  54. package/src/components/Indicator.js +13 -13
  55. package/src/components/Label.js +206 -206
  56. package/src/components/Legend.js +158 -158
  57. package/src/components/Lighter.jsx +173 -173
  58. package/src/components/Line.js +144 -144
  59. package/src/components/LinearGradient.js +29 -29
  60. package/src/components/Mapping.js +71 -71
  61. package/src/components/Marquee.js +74 -0
  62. package/src/components/PieChart.js +1097 -1097
  63. package/src/components/StackData.js +20 -20
  64. package/src/components/StereoBar.tsx +310 -310
  65. package/src/components/Tooltip.js +169 -169
  66. package/src/components/index.js +51 -51
  67. package/src/context/index.js +2 -2
  68. package/src/css/index.module.css +41 -41
  69. package/src/css/piechart.module.css +26 -26
  70. package/src/element/ConicGradient.jsx +55 -55
  71. package/src/element/Line.tsx +33 -33
  72. package/src/element/index.ts +3 -3
  73. package/src/formatter/index.js +1 -1
  74. package/src/formatter/legend.js +90 -90
  75. package/src/hooks/index.js +17 -17
  76. package/src/hooks/useAnimateData.ts +67 -67
  77. package/src/hooks/useAxes.js +144 -144
  78. package/src/hooks/useCarouselAxisX.js +163 -163
  79. package/src/hooks/useExtentData.js +88 -88
  80. package/src/hooks/useFilterData.js +72 -72
  81. package/src/hooks/useStackData.js +100 -100
  82. package/src/hooks/useTooltip.ts +96 -96
  83. package/src/index.js +6 -6
  84. package/src/types/index.d.ts +67 -67
  85. package/src/utils/index.js +696 -696
  86. package/tsconfig.json +22 -22
@@ -1,195 +1,195 @@
1
- "use strict";
2
-
3
- var _interopRequireDefault = require("@babel/runtime/helpers/interopRequireDefault");
4
-
5
- Object.defineProperty(exports, "__esModule", {
6
- value: true
7
- });
8
- Object.defineProperty(exports, "Mapping", {
9
- enumerable: true,
10
- get: function get() {
11
- return _Mapping["default"];
12
- }
13
- });
14
- Object.defineProperty(exports, "AnimateData", {
15
- enumerable: true,
16
- get: function get() {
17
- return _AnimateData["default"];
18
- }
19
- });
20
- Object.defineProperty(exports, "FilterData", {
21
- enumerable: true,
22
- get: function get() {
23
- return _FilterData["default"];
24
- }
25
- });
26
- Object.defineProperty(exports, "ExtentData", {
27
- enumerable: true,
28
- get: function get() {
29
- return _ExtentData["default"];
30
- }
31
- });
32
- Object.defineProperty(exports, "StackData", {
33
- enumerable: true,
34
- get: function get() {
35
- return _StackData["default"];
36
- }
37
- });
38
- Object.defineProperty(exports, "ChartContainer", {
39
- enumerable: true,
40
- get: function get() {
41
- return _ChartContainer["default"];
42
- }
43
- });
44
- Object.defineProperty(exports, "Legend", {
45
- enumerable: true,
46
- get: function get() {
47
- return _Legend["default"];
48
- }
49
- });
50
- Object.defineProperty(exports, "Axis", {
51
- enumerable: true,
52
- get: function get() {
53
- return _Axis["default"];
54
- }
55
- });
56
- Object.defineProperty(exports, "Tooltip", {
57
- enumerable: true,
58
- get: function get() {
59
- return _Tooltip["default"];
60
- }
61
- });
62
- Object.defineProperty(exports, "Indicator", {
63
- enumerable: true,
64
- get: function get() {
65
- return _Indicator["default"];
66
- }
67
- });
68
- Object.defineProperty(exports, "Band", {
69
- enumerable: true,
70
- get: function get() {
71
- return _Band["default"];
72
- }
73
- });
74
- Object.defineProperty(exports, "Lighter", {
75
- enumerable: true,
76
- get: function get() {
77
- return _Lighter["default"];
78
- }
79
- });
80
- Object.defineProperty(exports, "Line", {
81
- enumerable: true,
82
- get: function get() {
83
- return _Line["default"];
84
- }
85
- });
86
- Object.defineProperty(exports, "Background", {
87
- enumerable: true,
88
- get: function get() {
89
- return _Background["default"];
90
- }
91
- });
92
- Object.defineProperty(exports, "LinearGradient", {
93
- enumerable: true,
94
- get: function get() {
95
- return _LinearGradient["default"];
96
- }
97
- });
98
- Object.defineProperty(exports, "Brush", {
99
- enumerable: true,
100
- get: function get() {
101
- return _Brush["default"];
102
- }
103
- });
104
- Object.defineProperty(exports, "Label", {
105
- enumerable: true,
106
- get: function get() {
107
- return _Label["default"];
108
- }
109
- });
110
- Object.defineProperty(exports, "StereoBar", {
111
- enumerable: true,
112
- get: function get() {
113
- return _StereoBar["default"];
114
- }
115
- });
116
- Object.defineProperty(exports, "Carousel", {
117
- enumerable: true,
118
- get: function get() {
119
- return _Carousel["default"];
120
- }
121
- });
122
- Object.defineProperty(exports, "Chart", {
123
- enumerable: true,
124
- get: function get() {
125
- return _Chart["default"];
126
- }
127
- });
128
- Object.defineProperty(exports, "ConicalGradient", {
129
- enumerable: true,
130
- get: function get() {
131
- return _ConicalGradient["default"];
132
- }
133
- });
134
- Object.defineProperty(exports, "CartesianChart", {
135
- enumerable: true,
136
- get: function get() {
137
- return _CartesianChart["default"];
138
- }
139
- });
140
- Object.defineProperty(exports, "PieChart", {
141
- enumerable: true,
142
- get: function get() {
143
- return _PieChart["default"];
144
- }
145
- });
146
- exports.Area = void 0;
147
-
148
- var _Mapping = _interopRequireDefault(require("./Mapping"));
149
-
150
- var _AnimateData = _interopRequireDefault(require("./AnimateData"));
151
-
152
- var _FilterData = _interopRequireDefault(require("./FilterData"));
153
-
154
- var _ExtentData = _interopRequireDefault(require("./ExtentData"));
155
-
156
- var _StackData = _interopRequireDefault(require("./StackData"));
157
-
158
- var _ChartContainer = _interopRequireDefault(require("./ChartContainer"));
159
-
160
- var _Legend = _interopRequireDefault(require("./Legend"));
161
-
162
- var _Axis = _interopRequireDefault(require("./Axis"));
163
-
164
- var _Tooltip = _interopRequireDefault(require("./Tooltip"));
165
-
166
- var _Indicator = _interopRequireDefault(require("./Indicator"));
167
-
168
- var _Band = _interopRequireDefault(require("./Band"));
169
-
170
- var _Lighter = _interopRequireDefault(require("./Lighter"));
171
-
172
- var _Line = _interopRequireDefault(require("./Line"));
173
-
174
- var _Background = _interopRequireDefault(require("./Background"));
175
-
176
- var _LinearGradient = _interopRequireDefault(require("./LinearGradient"));
177
-
178
- var _Brush = _interopRequireDefault(require("./Brush"));
179
-
180
- var _Label = _interopRequireDefault(require("./Label"));
181
-
182
- var _StereoBar = _interopRequireDefault(require("./StereoBar"));
183
-
184
- var _Carousel = _interopRequireDefault(require("./Carousel"));
185
-
186
- var _Chart = _interopRequireDefault(require("./Chart"));
187
-
188
- var _ConicalGradient = _interopRequireDefault(require("./ConicalGradient"));
189
-
190
- var _CartesianChart = _interopRequireDefault(require("./CartesianChart"));
191
-
192
- var _PieChart = _interopRequireDefault(require("./PieChart"));
193
-
194
- var Area = _Line["default"];
1
+ "use strict";
2
+
3
+ var _interopRequireDefault = require("@babel/runtime/helpers/interopRequireDefault");
4
+
5
+ Object.defineProperty(exports, "__esModule", {
6
+ value: true
7
+ });
8
+ Object.defineProperty(exports, "Mapping", {
9
+ enumerable: true,
10
+ get: function get() {
11
+ return _Mapping["default"];
12
+ }
13
+ });
14
+ Object.defineProperty(exports, "AnimateData", {
15
+ enumerable: true,
16
+ get: function get() {
17
+ return _AnimateData["default"];
18
+ }
19
+ });
20
+ Object.defineProperty(exports, "FilterData", {
21
+ enumerable: true,
22
+ get: function get() {
23
+ return _FilterData["default"];
24
+ }
25
+ });
26
+ Object.defineProperty(exports, "ExtentData", {
27
+ enumerable: true,
28
+ get: function get() {
29
+ return _ExtentData["default"];
30
+ }
31
+ });
32
+ Object.defineProperty(exports, "StackData", {
33
+ enumerable: true,
34
+ get: function get() {
35
+ return _StackData["default"];
36
+ }
37
+ });
38
+ Object.defineProperty(exports, "ChartContainer", {
39
+ enumerable: true,
40
+ get: function get() {
41
+ return _ChartContainer["default"];
42
+ }
43
+ });
44
+ Object.defineProperty(exports, "Legend", {
45
+ enumerable: true,
46
+ get: function get() {
47
+ return _Legend["default"];
48
+ }
49
+ });
50
+ Object.defineProperty(exports, "Axis", {
51
+ enumerable: true,
52
+ get: function get() {
53
+ return _Axis["default"];
54
+ }
55
+ });
56
+ Object.defineProperty(exports, "Tooltip", {
57
+ enumerable: true,
58
+ get: function get() {
59
+ return _Tooltip["default"];
60
+ }
61
+ });
62
+ Object.defineProperty(exports, "Indicator", {
63
+ enumerable: true,
64
+ get: function get() {
65
+ return _Indicator["default"];
66
+ }
67
+ });
68
+ Object.defineProperty(exports, "Band", {
69
+ enumerable: true,
70
+ get: function get() {
71
+ return _Band["default"];
72
+ }
73
+ });
74
+ Object.defineProperty(exports, "Lighter", {
75
+ enumerable: true,
76
+ get: function get() {
77
+ return _Lighter["default"];
78
+ }
79
+ });
80
+ Object.defineProperty(exports, "Line", {
81
+ enumerable: true,
82
+ get: function get() {
83
+ return _Line["default"];
84
+ }
85
+ });
86
+ Object.defineProperty(exports, "Background", {
87
+ enumerable: true,
88
+ get: function get() {
89
+ return _Background["default"];
90
+ }
91
+ });
92
+ Object.defineProperty(exports, "LinearGradient", {
93
+ enumerable: true,
94
+ get: function get() {
95
+ return _LinearGradient["default"];
96
+ }
97
+ });
98
+ Object.defineProperty(exports, "Brush", {
99
+ enumerable: true,
100
+ get: function get() {
101
+ return _Brush["default"];
102
+ }
103
+ });
104
+ Object.defineProperty(exports, "Label", {
105
+ enumerable: true,
106
+ get: function get() {
107
+ return _Label["default"];
108
+ }
109
+ });
110
+ Object.defineProperty(exports, "StereoBar", {
111
+ enumerable: true,
112
+ get: function get() {
113
+ return _StereoBar["default"];
114
+ }
115
+ });
116
+ Object.defineProperty(exports, "Carousel", {
117
+ enumerable: true,
118
+ get: function get() {
119
+ return _Carousel["default"];
120
+ }
121
+ });
122
+ Object.defineProperty(exports, "Chart", {
123
+ enumerable: true,
124
+ get: function get() {
125
+ return _Chart["default"];
126
+ }
127
+ });
128
+ Object.defineProperty(exports, "ConicalGradient", {
129
+ enumerable: true,
130
+ get: function get() {
131
+ return _ConicalGradient["default"];
132
+ }
133
+ });
134
+ Object.defineProperty(exports, "CartesianChart", {
135
+ enumerable: true,
136
+ get: function get() {
137
+ return _CartesianChart["default"];
138
+ }
139
+ });
140
+ Object.defineProperty(exports, "PieChart", {
141
+ enumerable: true,
142
+ get: function get() {
143
+ return _PieChart["default"];
144
+ }
145
+ });
146
+ exports.Area = void 0;
147
+
148
+ var _Mapping = _interopRequireDefault(require("./Mapping"));
149
+
150
+ var _AnimateData = _interopRequireDefault(require("./AnimateData"));
151
+
152
+ var _FilterData = _interopRequireDefault(require("./FilterData"));
153
+
154
+ var _ExtentData = _interopRequireDefault(require("./ExtentData"));
155
+
156
+ var _StackData = _interopRequireDefault(require("./StackData"));
157
+
158
+ var _ChartContainer = _interopRequireDefault(require("./ChartContainer"));
159
+
160
+ var _Legend = _interopRequireDefault(require("./Legend"));
161
+
162
+ var _Axis = _interopRequireDefault(require("./Axis"));
163
+
164
+ var _Tooltip = _interopRequireDefault(require("./Tooltip"));
165
+
166
+ var _Indicator = _interopRequireDefault(require("./Indicator"));
167
+
168
+ var _Band = _interopRequireDefault(require("./Band"));
169
+
170
+ var _Lighter = _interopRequireDefault(require("./Lighter"));
171
+
172
+ var _Line = _interopRequireDefault(require("./Line"));
173
+
174
+ var _Background = _interopRequireDefault(require("./Background"));
175
+
176
+ var _LinearGradient = _interopRequireDefault(require("./LinearGradient"));
177
+
178
+ var _Brush = _interopRequireDefault(require("./Brush"));
179
+
180
+ var _Label = _interopRequireDefault(require("./Label"));
181
+
182
+ var _StereoBar = _interopRequireDefault(require("./StereoBar"));
183
+
184
+ var _Carousel = _interopRequireDefault(require("./Carousel"));
185
+
186
+ var _Chart = _interopRequireDefault(require("./Chart"));
187
+
188
+ var _ConicalGradient = _interopRequireDefault(require("./ConicalGradient"));
189
+
190
+ var _CartesianChart = _interopRequireDefault(require("./CartesianChart"));
191
+
192
+ var _PieChart = _interopRequireDefault(require("./PieChart"));
193
+
194
+ var Area = _Line["default"];
195
195
  exports.Area = Area;
@@ -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
  }