@easyv/charts 1.2.6 → 1.2.7
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/AnimateData.js +7 -11
- package/lib/components/Axis.js +14 -18
- package/lib/components/Background.js +2 -2
- package/lib/components/Band.js +4 -8
- package/lib/components/BaseLine.js +7 -9
- package/lib/components/Brush.js +2 -2
- package/lib/components/Carousel.js +8 -15
- package/lib/components/CartesianChart.js +7 -11
- package/lib/components/Chart.js +6 -9
- package/lib/components/ChartContainer.js +4 -8
- package/lib/components/ConicalGradient.js +23 -27
- package/lib/components/ExtentData.js +4 -7
- package/lib/components/FilterData.js +4 -7
- package/lib/components/Indicator.js +2 -2
- package/lib/components/Label.js +2 -2
- package/lib/components/Legend.js +5 -11
- package/lib/components/Lighter.js +179 -179
- package/lib/components/Line.js +5 -11
- package/lib/components/LinearGradient.js +2 -2
- package/lib/components/Mapping.js +5 -8
- package/lib/components/Marquee.js +5 -5
- package/lib/components/PieChart.js +12 -22
- package/lib/components/StackData.js +4 -7
- package/lib/components/StereoBar.js +4 -8
- package/lib/components/TextOverflow.js +5 -5
- package/lib/components/Tooltip.js +2 -2
- package/lib/components/index.js +49 -49
- 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 +2 -2
- package/lib/hooks/index.js +14 -14
- package/lib/hooks/useAnimateData.js +7 -7
- package/lib/hooks/useAxes.js +7 -7
- package/lib/hooks/useCarouselAxisX.js +7 -7
- package/lib/hooks/useExtentData.js +8 -8
- package/lib/hooks/useFilterData.js +8 -8
- package/lib/hooks/useStackData.js +8 -10
- package/lib/hooks/useTooltip.js +10 -10
- package/lib/index.js +2 -6
- package/lib/utils/index.js +5 -8
- 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 +76 -76
- 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 +93 -93
- package/src/components/PieChart.js +1287 -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
|
@@ -17,20 +17,17 @@ var _react = require("react");
|
|
|
17
17
|
|
|
18
18
|
var _hooks = require("../hooks");
|
|
19
19
|
|
|
20
|
-
var
|
|
21
|
-
_excluded2 = ["config", "data"];
|
|
20
|
+
function ownKeys(object, enumerableOnly) { var keys = Object.keys(object); if (Object.getOwnPropertySymbols) { var symbols = Object.getOwnPropertySymbols(object); if (enumerableOnly) symbols = symbols.filter(function (sym) { return Object.getOwnPropertyDescriptor(object, sym).enumerable; }); keys.push.apply(keys, symbols); } return keys; }
|
|
22
21
|
|
|
23
|
-
function
|
|
24
|
-
|
|
25
|
-
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; }
|
|
22
|
+
function _objectSpread(target) { for (var i = 1; i < arguments.length; i++) { var source = arguments[i] != null ? arguments[i] : {}; if (i % 2) { ownKeys(Object(source), true).forEach(function (key) { (0, _defineProperty2["default"])(target, key, source[key]); }); } else if (Object.getOwnPropertyDescriptors) { Object.defineProperties(target, Object.getOwnPropertyDescriptors(source)); } else { ownKeys(Object(source)).forEach(function (key) { Object.defineProperty(target, key, Object.getOwnPropertyDescriptor(source, key)); }); } } return target; }
|
|
26
23
|
|
|
27
24
|
var _default = function _default(Component) {
|
|
28
25
|
return /*#__PURE__*/(0, _react.memo)(function (_ref) {
|
|
29
26
|
var _ref$config = _ref.config,
|
|
30
27
|
series = _ref$config.series,
|
|
31
|
-
config = (0, _objectWithoutProperties2["default"])(_ref$config,
|
|
28
|
+
config = (0, _objectWithoutProperties2["default"])(_ref$config, ["series"]),
|
|
32
29
|
data = _ref.data,
|
|
33
|
-
props = (0, _objectWithoutProperties2["default"])(_ref,
|
|
30
|
+
props = (0, _objectWithoutProperties2["default"])(_ref, ["config", "data"]);
|
|
34
31
|
|
|
35
32
|
var _series = (0, _hooks.useStackData)({
|
|
36
33
|
series: series,
|
|
@@ -1,8 +1,8 @@
|
|
|
1
1
|
"use strict";
|
|
2
2
|
|
|
3
|
-
var
|
|
3
|
+
var _interopRequireWildcard = require("@babel/runtime/helpers/interopRequireWildcard");
|
|
4
4
|
|
|
5
|
-
var
|
|
5
|
+
var _interopRequireDefault = require("@babel/runtime/helpers/interopRequireDefault");
|
|
6
6
|
|
|
7
7
|
Object.defineProperty(exports, "__esModule", {
|
|
8
8
|
value: true
|
|
@@ -23,13 +23,9 @@ var _d3v = require("d3v7");
|
|
|
23
23
|
|
|
24
24
|
var _utils = require("../utils");
|
|
25
25
|
|
|
26
|
-
function
|
|
27
|
-
|
|
28
|
-
function _interopRequireWildcard(obj, nodeInterop) { if (!nodeInterop && obj && obj.__esModule) { return obj; } if (obj === null || _typeof3(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; }
|
|
29
|
-
|
|
30
|
-
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; }
|
|
26
|
+
function ownKeys(object, enumerableOnly) { var keys = Object.keys(object); if (Object.getOwnPropertySymbols) { var symbols = Object.getOwnPropertySymbols(object); if (enumerableOnly) symbols = symbols.filter(function (sym) { return Object.getOwnPropertyDescriptor(object, sym).enumerable; }); keys.push.apply(keys, symbols); } return keys; }
|
|
31
27
|
|
|
32
|
-
function _objectSpread(target) { for (var i = 1; i < arguments.length; i++) { var source =
|
|
28
|
+
function _objectSpread(target) { for (var i = 1; i < arguments.length; i++) { var source = arguments[i] != null ? arguments[i] : {}; if (i % 2) { ownKeys(Object(source), true).forEach(function (key) { (0, _defineProperty2["default"])(target, key, source[key]); }); } else if (Object.getOwnPropertyDescriptors) { Object.defineProperties(target, Object.getOwnPropertyDescriptors(source)); } else { ownKeys(Object(source)).forEach(function (key) { Object.defineProperty(target, key, Object.getOwnPropertyDescriptor(source, key)); }); } } return target; }
|
|
33
29
|
|
|
34
30
|
var getHighlightData = function getHighlightData(data, extent) {
|
|
35
31
|
switch (extent) {
|
|
@@ -13,13 +13,13 @@ var _react = require("react");
|
|
|
13
13
|
|
|
14
14
|
var _Marquee = _interopRequireDefault(require("./Marquee"));
|
|
15
15
|
|
|
16
|
-
function ownKeys(object, enumerableOnly) { var keys = Object.keys(object); if (Object.getOwnPropertySymbols) { var symbols = Object.getOwnPropertySymbols(object); enumerableOnly
|
|
16
|
+
function ownKeys(object, enumerableOnly) { var keys = Object.keys(object); if (Object.getOwnPropertySymbols) { var symbols = Object.getOwnPropertySymbols(object); if (enumerableOnly) symbols = symbols.filter(function (sym) { return Object.getOwnPropertyDescriptor(object, sym).enumerable; }); keys.push.apply(keys, symbols); } return keys; }
|
|
17
17
|
|
|
18
|
-
function _objectSpread(target) { for (var i = 1; i < arguments.length; i++) { var source =
|
|
18
|
+
function _objectSpread(target) { for (var i = 1; i < arguments.length; i++) { var source = arguments[i] != null ? arguments[i] : {}; if (i % 2) { ownKeys(Object(source), true).forEach(function (key) { (0, _defineProperty2["default"])(target, key, source[key]); }); } else if (Object.getOwnPropertyDescriptors) { Object.defineProperties(target, Object.getOwnPropertyDescriptors(source)); } else { 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,
|
|
@@ -13,9 +13,9 @@ var _react = require("react");
|
|
|
13
13
|
|
|
14
14
|
var _utils = require("../utils");
|
|
15
15
|
|
|
16
|
-
function ownKeys(object, enumerableOnly) { var keys = Object.keys(object); if (Object.getOwnPropertySymbols) { var symbols = Object.getOwnPropertySymbols(object); enumerableOnly
|
|
16
|
+
function ownKeys(object, enumerableOnly) { var keys = Object.keys(object); if (Object.getOwnPropertySymbols) { var symbols = Object.getOwnPropertySymbols(object); if (enumerableOnly) symbols = symbols.filter(function (sym) { return Object.getOwnPropertyDescriptor(object, sym).enumerable; }); keys.push.apply(keys, symbols); } return keys; }
|
|
17
17
|
|
|
18
|
-
function _objectSpread(target) { for (var i = 1; i < arguments.length; i++) { var source =
|
|
18
|
+
function _objectSpread(target) { for (var i = 1; i < arguments.length; i++) { var source = arguments[i] != null ? arguments[i] : {}; if (i % 2) { ownKeys(Object(source), true).forEach(function (key) { (0, _defineProperty2["default"])(target, key, source[key]); }); } else if (Object.getOwnPropertyDescriptors) { Object.defineProperties(target, Object.getOwnPropertyDescriptors(source)); } else { ownKeys(Object(source)).forEach(function (key) { Object.defineProperty(target, key, Object.getOwnPropertyDescriptor(source, key)); }); } } return target; }
|
|
19
19
|
|
|
20
20
|
var _default = /*#__PURE__*/(0, _react.memo)(function (_ref) {
|
|
21
21
|
var position = _ref.x,
|
package/lib/components/index.js
CHANGED
|
@@ -5,143 +5,142 @@ var _interopRequireDefault = require("@babel/runtime/helpers/interopRequireDefau
|
|
|
5
5
|
Object.defineProperty(exports, "__esModule", {
|
|
6
6
|
value: true
|
|
7
7
|
});
|
|
8
|
-
Object.defineProperty(exports, "
|
|
8
|
+
Object.defineProperty(exports, "Mapping", {
|
|
9
9
|
enumerable: true,
|
|
10
10
|
get: function get() {
|
|
11
|
-
return
|
|
11
|
+
return _Mapping["default"];
|
|
12
12
|
}
|
|
13
13
|
});
|
|
14
|
-
exports
|
|
15
|
-
Object.defineProperty(exports, "Axis", {
|
|
14
|
+
Object.defineProperty(exports, "AnimateData", {
|
|
16
15
|
enumerable: true,
|
|
17
16
|
get: function get() {
|
|
18
|
-
return
|
|
17
|
+
return _AnimateData["default"];
|
|
19
18
|
}
|
|
20
19
|
});
|
|
21
|
-
Object.defineProperty(exports, "
|
|
20
|
+
Object.defineProperty(exports, "FilterData", {
|
|
22
21
|
enumerable: true,
|
|
23
22
|
get: function get() {
|
|
24
|
-
return
|
|
23
|
+
return _FilterData["default"];
|
|
25
24
|
}
|
|
26
25
|
});
|
|
27
|
-
Object.defineProperty(exports, "
|
|
26
|
+
Object.defineProperty(exports, "ExtentData", {
|
|
28
27
|
enumerable: true,
|
|
29
28
|
get: function get() {
|
|
30
|
-
return
|
|
29
|
+
return _ExtentData["default"];
|
|
31
30
|
}
|
|
32
31
|
});
|
|
33
|
-
Object.defineProperty(exports, "
|
|
32
|
+
Object.defineProperty(exports, "StackData", {
|
|
34
33
|
enumerable: true,
|
|
35
34
|
get: function get() {
|
|
36
|
-
return
|
|
35
|
+
return _StackData["default"];
|
|
37
36
|
}
|
|
38
37
|
});
|
|
39
|
-
Object.defineProperty(exports, "
|
|
38
|
+
Object.defineProperty(exports, "ChartContainer", {
|
|
40
39
|
enumerable: true,
|
|
41
40
|
get: function get() {
|
|
42
|
-
return
|
|
41
|
+
return _ChartContainer["default"];
|
|
43
42
|
}
|
|
44
43
|
});
|
|
45
|
-
Object.defineProperty(exports, "
|
|
44
|
+
Object.defineProperty(exports, "Legend", {
|
|
46
45
|
enumerable: true,
|
|
47
46
|
get: function get() {
|
|
48
|
-
return
|
|
47
|
+
return _Legend["default"];
|
|
49
48
|
}
|
|
50
49
|
});
|
|
51
|
-
Object.defineProperty(exports, "
|
|
50
|
+
Object.defineProperty(exports, "Axis", {
|
|
52
51
|
enumerable: true,
|
|
53
52
|
get: function get() {
|
|
54
|
-
return
|
|
53
|
+
return _Axis["default"];
|
|
55
54
|
}
|
|
56
55
|
});
|
|
57
|
-
Object.defineProperty(exports, "
|
|
56
|
+
Object.defineProperty(exports, "Tooltip", {
|
|
58
57
|
enumerable: true,
|
|
59
58
|
get: function get() {
|
|
60
|
-
return
|
|
59
|
+
return _Tooltip["default"];
|
|
61
60
|
}
|
|
62
61
|
});
|
|
63
|
-
Object.defineProperty(exports, "
|
|
62
|
+
Object.defineProperty(exports, "Indicator", {
|
|
64
63
|
enumerable: true,
|
|
65
64
|
get: function get() {
|
|
66
|
-
return
|
|
65
|
+
return _Indicator["default"];
|
|
67
66
|
}
|
|
68
67
|
});
|
|
69
|
-
Object.defineProperty(exports, "
|
|
68
|
+
Object.defineProperty(exports, "Band", {
|
|
70
69
|
enumerable: true,
|
|
71
70
|
get: function get() {
|
|
72
|
-
return
|
|
71
|
+
return _Band["default"];
|
|
73
72
|
}
|
|
74
73
|
});
|
|
75
|
-
Object.defineProperty(exports, "
|
|
74
|
+
Object.defineProperty(exports, "Lighter", {
|
|
76
75
|
enumerable: true,
|
|
77
76
|
get: function get() {
|
|
78
|
-
return
|
|
77
|
+
return _Lighter["default"];
|
|
79
78
|
}
|
|
80
79
|
});
|
|
81
|
-
Object.defineProperty(exports, "
|
|
80
|
+
Object.defineProperty(exports, "Line", {
|
|
82
81
|
enumerable: true,
|
|
83
82
|
get: function get() {
|
|
84
|
-
return
|
|
83
|
+
return _Line["default"];
|
|
85
84
|
}
|
|
86
85
|
});
|
|
87
|
-
Object.defineProperty(exports, "
|
|
86
|
+
Object.defineProperty(exports, "Background", {
|
|
88
87
|
enumerable: true,
|
|
89
88
|
get: function get() {
|
|
90
|
-
return
|
|
89
|
+
return _Background["default"];
|
|
91
90
|
}
|
|
92
91
|
});
|
|
93
|
-
Object.defineProperty(exports, "
|
|
92
|
+
Object.defineProperty(exports, "LinearGradient", {
|
|
94
93
|
enumerable: true,
|
|
95
94
|
get: function get() {
|
|
96
|
-
return
|
|
95
|
+
return _LinearGradient["default"];
|
|
97
96
|
}
|
|
98
97
|
});
|
|
99
|
-
Object.defineProperty(exports, "
|
|
98
|
+
Object.defineProperty(exports, "Brush", {
|
|
100
99
|
enumerable: true,
|
|
101
100
|
get: function get() {
|
|
102
|
-
return
|
|
101
|
+
return _Brush["default"];
|
|
103
102
|
}
|
|
104
103
|
});
|
|
105
|
-
Object.defineProperty(exports, "
|
|
104
|
+
Object.defineProperty(exports, "Label", {
|
|
106
105
|
enumerable: true,
|
|
107
106
|
get: function get() {
|
|
108
|
-
return
|
|
107
|
+
return _Label["default"];
|
|
109
108
|
}
|
|
110
109
|
});
|
|
111
|
-
Object.defineProperty(exports, "
|
|
110
|
+
Object.defineProperty(exports, "StereoBar", {
|
|
112
111
|
enumerable: true,
|
|
113
112
|
get: function get() {
|
|
114
|
-
return
|
|
113
|
+
return _StereoBar["default"];
|
|
115
114
|
}
|
|
116
115
|
});
|
|
117
|
-
Object.defineProperty(exports, "
|
|
116
|
+
Object.defineProperty(exports, "Carousel", {
|
|
118
117
|
enumerable: true,
|
|
119
118
|
get: function get() {
|
|
120
|
-
return
|
|
119
|
+
return _Carousel["default"];
|
|
121
120
|
}
|
|
122
121
|
});
|
|
123
|
-
Object.defineProperty(exports, "
|
|
122
|
+
Object.defineProperty(exports, "Chart", {
|
|
124
123
|
enumerable: true,
|
|
125
124
|
get: function get() {
|
|
126
|
-
return
|
|
125
|
+
return _Chart["default"];
|
|
127
126
|
}
|
|
128
127
|
});
|
|
129
|
-
Object.defineProperty(exports, "
|
|
128
|
+
Object.defineProperty(exports, "ConicalGradient", {
|
|
130
129
|
enumerable: true,
|
|
131
130
|
get: function get() {
|
|
132
|
-
return
|
|
131
|
+
return _ConicalGradient["default"];
|
|
133
132
|
}
|
|
134
133
|
});
|
|
135
|
-
Object.defineProperty(exports, "
|
|
134
|
+
Object.defineProperty(exports, "CartesianChart", {
|
|
136
135
|
enumerable: true,
|
|
137
136
|
get: function get() {
|
|
138
|
-
return
|
|
137
|
+
return _CartesianChart["default"];
|
|
139
138
|
}
|
|
140
139
|
});
|
|
141
|
-
Object.defineProperty(exports, "
|
|
140
|
+
Object.defineProperty(exports, "PieChart", {
|
|
142
141
|
enumerable: true,
|
|
143
142
|
get: function get() {
|
|
144
|
-
return
|
|
143
|
+
return _PieChart["default"];
|
|
145
144
|
}
|
|
146
145
|
});
|
|
147
146
|
Object.defineProperty(exports, "TextOverflow", {
|
|
@@ -150,12 +149,13 @@ Object.defineProperty(exports, "TextOverflow", {
|
|
|
150
149
|
return _TextOverflow["default"];
|
|
151
150
|
}
|
|
152
151
|
});
|
|
153
|
-
Object.defineProperty(exports, "
|
|
152
|
+
Object.defineProperty(exports, "BaseLine", {
|
|
154
153
|
enumerable: true,
|
|
155
154
|
get: function get() {
|
|
156
|
-
return
|
|
155
|
+
return _BaseLine["default"];
|
|
157
156
|
}
|
|
158
157
|
});
|
|
158
|
+
exports.Area = void 0;
|
|
159
159
|
|
|
160
160
|
var _Mapping = _interopRequireDefault(require("./Mapping"));
|
|
161
161
|
|
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
|
}
|
package/lib/formatter/legend.js
CHANGED
|
@@ -13,9 +13,9 @@ var _indexModule = _interopRequireDefault(require("../css/index.module.css"));
|
|
|
13
13
|
|
|
14
14
|
var _utils = require("../utils");
|
|
15
15
|
|
|
16
|
-
function ownKeys(object, enumerableOnly) { var keys = Object.keys(object); if (Object.getOwnPropertySymbols) { var symbols = Object.getOwnPropertySymbols(object); enumerableOnly
|
|
16
|
+
function ownKeys(object, enumerableOnly) { var keys = Object.keys(object); if (Object.getOwnPropertySymbols) { var symbols = Object.getOwnPropertySymbols(object); if (enumerableOnly) symbols = symbols.filter(function (sym) { return Object.getOwnPropertyDescriptor(object, sym).enumerable; }); keys.push.apply(keys, symbols); } return keys; }
|
|
17
17
|
|
|
18
|
-
function _objectSpread(target) { for (var i = 1; i < arguments.length; i++) { var source =
|
|
18
|
+
function _objectSpread(target) { for (var i = 1; i < arguments.length; i++) { var source = arguments[i] != null ? arguments[i] : {}; if (i % 2) { ownKeys(Object(source), true).forEach(function (key) { (0, _defineProperty2["default"])(target, key, source[key]); }); } else if (Object.getOwnPropertyDescriptors) { Object.defineProperties(target, Object.getOwnPropertyDescriptors(source)); } else { ownKeys(Object(source)).forEach(function (key) { Object.defineProperty(target, key, Object.getOwnPropertyDescriptor(source, key)); }); } } return target; }
|
|
19
19
|
|
|
20
20
|
var pieLegendFormatter = function pieLegendFormatter(_ref, _ref2) {
|
|
21
21
|
var displayName = _ref.displayName,
|