@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.
- 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 +36 -36
- package/lib/components/Axis.js +329 -329
- package/lib/components/Background.js +2 -2
- package/lib/components/Band.js +173 -173
- package/lib/components/Brush.js +201 -201
- package/lib/components/Carousel.js +164 -164
- package/lib/components/Chart.js +111 -111
- package/lib/components/ChartContainer.js +58 -58
- package/lib/components/ConicalGradient.js +264 -264
- package/lib/components/ExtentData.js +45 -45
- package/lib/components/FilterData.js +53 -53
- package/lib/components/Indicator.js +2 -2
- package/lib/components/Label.js +278 -278
- package/lib/components/Legend.js +154 -154
- package/lib/components/Lighter.js +179 -179
- package/lib/components/Line.js +181 -181
- package/lib/components/LinearGradient.js +2 -2
- package/lib/components/Mapping.js +127 -127
- package/lib/components/PieChart.js +1061 -1061
- package/lib/components/StackData.js +45 -45
- package/lib/components/StereoBar.js +336 -336
- package/lib/components/Tooltip.js +155 -155
- package/lib/components/index.js +194 -194
- 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/formatter/legend.js +91 -91
- package/lib/hooks/index.js +62 -62
- package/lib/hooks/useAnimateData.js +88 -88
- package/lib/hooks/useAxes.js +135 -135
- package/lib/hooks/useCarouselAxisX.js +184 -184
- package/lib/hooks/useExtentData.js +128 -128
- package/lib/hooks/useFilterData.js +112 -112
- package/lib/hooks/useStackData.js +134 -134
- package/lib/hooks/useTooltip.js +10 -10
- package/lib/index.js +84 -84
- package/lib/utils/index.js +832 -832
- package/package.json +51 -51
- 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/Brush.js +159 -159
- package/src/components/Carousel.tsx +144 -144
- 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 +144 -144
- package/src/components/LinearGradient.js +29 -29
- package/src/components/Mapping.js +71 -71
- package/src/components/Marquee.js +74 -0
- package/src/components/PieChart.js +1097 -1097
- package/src/components/StackData.js +20 -20
- package/src/components/StereoBar.tsx +310 -310
- package/src/components/Tooltip.js +169 -169
- package/src/components/index.js +51 -51
- 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 +696 -696
- package/tsconfig.json +22 -22
package/lib/components/index.js
CHANGED
|
@@ -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;
|
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
|
}
|