@easyv/charts 1.2.3 → 1.2.4
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 +11 -7
- package/lib/components/Axis.js +18 -14
- package/lib/components/Background.js +2 -2
- package/lib/components/Band.js +8 -4
- package/lib/components/Brush.js +2 -2
- package/lib/components/Carousel.js +15 -8
- package/lib/components/CartesianChart.js +11 -7
- package/lib/components/Chart.js +9 -6
- package/lib/components/ChartContainer.js +8 -4
- package/lib/components/ConicalGradient.js +27 -23
- package/lib/components/ExtentData.js +7 -4
- package/lib/components/FilterData.js +7 -4
- package/lib/components/Indicator.js +2 -2
- package/lib/components/Label.js +2 -2
- package/lib/components/Legend.js +11 -5
- package/lib/components/Lighter.js +179 -179
- package/lib/components/Line.js +11 -5
- package/lib/components/LinearGradient.js +2 -2
- package/lib/components/Mapping.js +8 -5
- package/lib/components/Marquee.js +14 -14
- package/lib/components/PieChart.js +17 -8
- package/lib/components/StackData.js +7 -4
- package/lib/components/StereoBar.js +8 -4
- package/lib/components/TextOverflow.js +65 -0
- package/lib/components/Tooltip.js +2 -2
- package/lib/components/index.js +50 -50
- 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 +10 -8
- package/lib/hooks/useTooltip.js +10 -10
- package/lib/index.js +6 -2
- package/lib/utils/index.js +8 -5
- package/package.json +53 -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 +93 -93
- package/src/components/PieChart.js +1288 -1288
- package/src/components/StackData.js +20 -20
- package/src/components/StereoBar.tsx +310 -310
- package/src/components/TextOverflow.js +51 -0
- package/src/components/Tooltip.js +169 -169
- package/src/components/index.js +53 -53
- 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
|
@@ -1,9 +1,9 @@
|
|
|
1
1
|
"use strict";
|
|
2
2
|
|
|
3
|
-
var _interopRequireWildcard = require("@babel/runtime/helpers/interopRequireWildcard");
|
|
4
|
-
|
|
5
3
|
var _interopRequireDefault = require("@babel/runtime/helpers/interopRequireDefault");
|
|
6
4
|
|
|
5
|
+
var _typeof3 = require("@babel/runtime/helpers/typeof");
|
|
6
|
+
|
|
7
7
|
Object.defineProperty(exports, "__esModule", {
|
|
8
8
|
value: true
|
|
9
9
|
});
|
|
@@ -23,9 +23,13 @@ var _d3v = require("d3v7");
|
|
|
23
23
|
|
|
24
24
|
var _utils = require("../utils");
|
|
25
25
|
|
|
26
|
-
function
|
|
26
|
+
function _getRequireWildcardCache(nodeInterop) { if (typeof WeakMap !== "function") return null; var cacheBabelInterop = new WeakMap(); var cacheNodeInterop = new WeakMap(); return (_getRequireWildcardCache = function _getRequireWildcardCache(nodeInterop) { return nodeInterop ? cacheNodeInterop : cacheBabelInterop; })(nodeInterop); }
|
|
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; }
|
|
27
31
|
|
|
28
|
-
function _objectSpread(target) { for (var i = 1; i < arguments.length; i++) { var source = arguments[i]
|
|
32
|
+
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; }
|
|
29
33
|
|
|
30
34
|
var getHighlightData = function getHighlightData(data, extent) {
|
|
31
35
|
switch (extent) {
|
|
@@ -0,0 +1,65 @@
|
|
|
1
|
+
"use strict";
|
|
2
|
+
|
|
3
|
+
var _interopRequireDefault = require("@babel/runtime/helpers/interopRequireDefault");
|
|
4
|
+
|
|
5
|
+
Object.defineProperty(exports, "__esModule", {
|
|
6
|
+
value: true
|
|
7
|
+
});
|
|
8
|
+
exports["default"] = void 0;
|
|
9
|
+
|
|
10
|
+
var _defineProperty2 = _interopRequireDefault(require("@babel/runtime/helpers/defineProperty"));
|
|
11
|
+
|
|
12
|
+
var _react = require("react");
|
|
13
|
+
|
|
14
|
+
var _Marquee = _interopRequireDefault(require("./Marquee"));
|
|
15
|
+
|
|
16
|
+
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; }
|
|
17
|
+
|
|
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
|
+
|
|
20
|
+
/**
|
|
21
|
+
* 文本溢出组件
|
|
22
|
+
* eg: <TextOverflow type={溢出形式} value={文本内容} speed={跑马灯速度} style={额外样式}></Marquee>
|
|
23
|
+
*/
|
|
24
|
+
var _default = /*#__PURE__*/(0, _react.memo)(function (props) {
|
|
25
|
+
var type = props.type,
|
|
26
|
+
value = props.value,
|
|
27
|
+
style = props.style,
|
|
28
|
+
_props$speed = props.speed,
|
|
29
|
+
speed = _props$speed === void 0 ? 5 : _props$speed;
|
|
30
|
+
|
|
31
|
+
var getTextOverflow = function getTextOverflow(type) {
|
|
32
|
+
switch (type) {
|
|
33
|
+
case 'ellipsis':
|
|
34
|
+
return {
|
|
35
|
+
overflow: 'hidden',
|
|
36
|
+
textOverflow: 'ellipsis',
|
|
37
|
+
whiteSpace: 'nowrap'
|
|
38
|
+
};
|
|
39
|
+
|
|
40
|
+
case 'break-word':
|
|
41
|
+
return {
|
|
42
|
+
wordBreak: 'break-all',
|
|
43
|
+
wordWrap: 'break-word'
|
|
44
|
+
};
|
|
45
|
+
|
|
46
|
+
case 'marquee':
|
|
47
|
+
return {
|
|
48
|
+
whiteSpace: 'nowrap'
|
|
49
|
+
};
|
|
50
|
+
}
|
|
51
|
+
};
|
|
52
|
+
|
|
53
|
+
var styles = _objectSpread(_objectSpread({}, getTextOverflow(type)), style);
|
|
54
|
+
|
|
55
|
+
return type == 'marquee' ? /*#__PURE__*/React.createElement(_Marquee["default"], {
|
|
56
|
+
value: value,
|
|
57
|
+
speed: speed,
|
|
58
|
+
style: styles
|
|
59
|
+
}) : /*#__PURE__*/React.createElement("div", {
|
|
60
|
+
style: styles,
|
|
61
|
+
title: value || null
|
|
62
|
+
}, " ", value);
|
|
63
|
+
});
|
|
64
|
+
|
|
65
|
+
exports["default"] = _default;
|
|
@@ -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);
|
|
16
|
+
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; }
|
|
17
17
|
|
|
18
|
-
function _objectSpread(target) { for (var i = 1; i < arguments.length; i++) { var source = arguments[i]
|
|
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
20
|
var _default = /*#__PURE__*/(0, _react.memo)(function (_ref) {
|
|
21
21
|
var position = _ref.x,
|
package/lib/components/index.js
CHANGED
|
@@ -5,151 +5,151 @@ 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, "AnimateData", {
|
|
9
9
|
enumerable: true,
|
|
10
10
|
get: function get() {
|
|
11
|
-
return
|
|
11
|
+
return _AnimateData["default"];
|
|
12
12
|
}
|
|
13
13
|
});
|
|
14
|
-
|
|
14
|
+
exports.Area = void 0;
|
|
15
|
+
Object.defineProperty(exports, "Axis", {
|
|
15
16
|
enumerable: true,
|
|
16
17
|
get: function get() {
|
|
17
|
-
return
|
|
18
|
+
return _Axis["default"];
|
|
18
19
|
}
|
|
19
20
|
});
|
|
20
|
-
Object.defineProperty(exports, "
|
|
21
|
+
Object.defineProperty(exports, "Background", {
|
|
21
22
|
enumerable: true,
|
|
22
23
|
get: function get() {
|
|
23
|
-
return
|
|
24
|
+
return _Background["default"];
|
|
24
25
|
}
|
|
25
26
|
});
|
|
26
|
-
Object.defineProperty(exports, "
|
|
27
|
+
Object.defineProperty(exports, "Band", {
|
|
27
28
|
enumerable: true,
|
|
28
29
|
get: function get() {
|
|
29
|
-
return
|
|
30
|
+
return _Band["default"];
|
|
30
31
|
}
|
|
31
32
|
});
|
|
32
|
-
Object.defineProperty(exports, "
|
|
33
|
+
Object.defineProperty(exports, "Brush", {
|
|
33
34
|
enumerable: true,
|
|
34
35
|
get: function get() {
|
|
35
|
-
return
|
|
36
|
+
return _Brush["default"];
|
|
36
37
|
}
|
|
37
38
|
});
|
|
38
|
-
Object.defineProperty(exports, "
|
|
39
|
+
Object.defineProperty(exports, "Carousel", {
|
|
39
40
|
enumerable: true,
|
|
40
41
|
get: function get() {
|
|
41
|
-
return
|
|
42
|
+
return _Carousel["default"];
|
|
42
43
|
}
|
|
43
44
|
});
|
|
44
|
-
Object.defineProperty(exports, "
|
|
45
|
+
Object.defineProperty(exports, "CartesianChart", {
|
|
45
46
|
enumerable: true,
|
|
46
47
|
get: function get() {
|
|
47
|
-
return
|
|
48
|
+
return _CartesianChart["default"];
|
|
48
49
|
}
|
|
49
50
|
});
|
|
50
|
-
Object.defineProperty(exports, "
|
|
51
|
+
Object.defineProperty(exports, "Chart", {
|
|
51
52
|
enumerable: true,
|
|
52
53
|
get: function get() {
|
|
53
|
-
return
|
|
54
|
+
return _Chart["default"];
|
|
54
55
|
}
|
|
55
56
|
});
|
|
56
|
-
Object.defineProperty(exports, "
|
|
57
|
+
Object.defineProperty(exports, "ChartContainer", {
|
|
57
58
|
enumerable: true,
|
|
58
59
|
get: function get() {
|
|
59
|
-
return
|
|
60
|
+
return _ChartContainer["default"];
|
|
60
61
|
}
|
|
61
62
|
});
|
|
62
|
-
Object.defineProperty(exports, "
|
|
63
|
+
Object.defineProperty(exports, "ConicalGradient", {
|
|
63
64
|
enumerable: true,
|
|
64
65
|
get: function get() {
|
|
65
|
-
return
|
|
66
|
+
return _ConicalGradient["default"];
|
|
66
67
|
}
|
|
67
68
|
});
|
|
68
|
-
Object.defineProperty(exports, "
|
|
69
|
+
Object.defineProperty(exports, "ExtentData", {
|
|
69
70
|
enumerable: true,
|
|
70
71
|
get: function get() {
|
|
71
|
-
return
|
|
72
|
+
return _ExtentData["default"];
|
|
72
73
|
}
|
|
73
74
|
});
|
|
74
|
-
Object.defineProperty(exports, "
|
|
75
|
+
Object.defineProperty(exports, "FilterData", {
|
|
75
76
|
enumerable: true,
|
|
76
77
|
get: function get() {
|
|
77
|
-
return
|
|
78
|
+
return _FilterData["default"];
|
|
78
79
|
}
|
|
79
80
|
});
|
|
80
|
-
Object.defineProperty(exports, "
|
|
81
|
+
Object.defineProperty(exports, "Indicator", {
|
|
81
82
|
enumerable: true,
|
|
82
83
|
get: function get() {
|
|
83
|
-
return
|
|
84
|
+
return _Indicator["default"];
|
|
84
85
|
}
|
|
85
86
|
});
|
|
86
|
-
Object.defineProperty(exports, "
|
|
87
|
+
Object.defineProperty(exports, "Label", {
|
|
87
88
|
enumerable: true,
|
|
88
89
|
get: function get() {
|
|
89
|
-
return
|
|
90
|
+
return _Label["default"];
|
|
90
91
|
}
|
|
91
92
|
});
|
|
92
|
-
Object.defineProperty(exports, "
|
|
93
|
+
Object.defineProperty(exports, "Legend", {
|
|
93
94
|
enumerable: true,
|
|
94
95
|
get: function get() {
|
|
95
|
-
return
|
|
96
|
+
return _Legend["default"];
|
|
96
97
|
}
|
|
97
98
|
});
|
|
98
|
-
Object.defineProperty(exports, "
|
|
99
|
+
Object.defineProperty(exports, "Lighter", {
|
|
99
100
|
enumerable: true,
|
|
100
101
|
get: function get() {
|
|
101
|
-
return
|
|
102
|
+
return _Lighter["default"];
|
|
102
103
|
}
|
|
103
104
|
});
|
|
104
|
-
Object.defineProperty(exports, "
|
|
105
|
+
Object.defineProperty(exports, "Line", {
|
|
105
106
|
enumerable: true,
|
|
106
107
|
get: function get() {
|
|
107
|
-
return
|
|
108
|
+
return _Line["default"];
|
|
108
109
|
}
|
|
109
110
|
});
|
|
110
|
-
Object.defineProperty(exports, "
|
|
111
|
+
Object.defineProperty(exports, "LinearGradient", {
|
|
111
112
|
enumerable: true,
|
|
112
113
|
get: function get() {
|
|
113
|
-
return
|
|
114
|
+
return _LinearGradient["default"];
|
|
114
115
|
}
|
|
115
116
|
});
|
|
116
|
-
Object.defineProperty(exports, "
|
|
117
|
+
Object.defineProperty(exports, "Mapping", {
|
|
117
118
|
enumerable: true,
|
|
118
119
|
get: function get() {
|
|
119
|
-
return
|
|
120
|
+
return _Mapping["default"];
|
|
120
121
|
}
|
|
121
122
|
});
|
|
122
|
-
Object.defineProperty(exports, "
|
|
123
|
+
Object.defineProperty(exports, "PieChart", {
|
|
123
124
|
enumerable: true,
|
|
124
125
|
get: function get() {
|
|
125
|
-
return
|
|
126
|
+
return _PieChart["default"];
|
|
126
127
|
}
|
|
127
128
|
});
|
|
128
|
-
Object.defineProperty(exports, "
|
|
129
|
+
Object.defineProperty(exports, "StackData", {
|
|
129
130
|
enumerable: true,
|
|
130
131
|
get: function get() {
|
|
131
|
-
return
|
|
132
|
+
return _StackData["default"];
|
|
132
133
|
}
|
|
133
134
|
});
|
|
134
|
-
Object.defineProperty(exports, "
|
|
135
|
+
Object.defineProperty(exports, "StereoBar", {
|
|
135
136
|
enumerable: true,
|
|
136
137
|
get: function get() {
|
|
137
|
-
return
|
|
138
|
+
return _StereoBar["default"];
|
|
138
139
|
}
|
|
139
140
|
});
|
|
140
|
-
Object.defineProperty(exports, "
|
|
141
|
+
Object.defineProperty(exports, "TextOverflow", {
|
|
141
142
|
enumerable: true,
|
|
142
143
|
get: function get() {
|
|
143
|
-
return
|
|
144
|
+
return _TextOverflow["default"];
|
|
144
145
|
}
|
|
145
146
|
});
|
|
146
|
-
Object.defineProperty(exports, "
|
|
147
|
+
Object.defineProperty(exports, "Tooltip", {
|
|
147
148
|
enumerable: true,
|
|
148
149
|
get: function get() {
|
|
149
|
-
return
|
|
150
|
+
return _Tooltip["default"];
|
|
150
151
|
}
|
|
151
152
|
});
|
|
152
|
-
exports.Area = void 0;
|
|
153
153
|
|
|
154
154
|
var _Mapping = _interopRequireDefault(require("./Mapping"));
|
|
155
155
|
|
|
@@ -197,7 +197,7 @@ var _CartesianChart = _interopRequireDefault(require("./CartesianChart"));
|
|
|
197
197
|
|
|
198
198
|
var _PieChart = _interopRequireDefault(require("./PieChart"));
|
|
199
199
|
|
|
200
|
-
var
|
|
200
|
+
var _TextOverflow = _interopRequireDefault(require("./TextOverflow"));
|
|
201
201
|
|
|
202
202
|
var Area = _Line["default"];
|
|
203
203
|
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
|
}
|
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);
|
|
16
|
+
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; }
|
|
17
17
|
|
|
18
|
-
function _objectSpread(target) { for (var i = 1; i < arguments.length; i++) { var source = arguments[i]
|
|
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
20
|
var pieLegendFormatter = function pieLegendFormatter(_ref, _ref2) {
|
|
21
21
|
var displayName = _ref.displayName,
|