@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.
Files changed (89) hide show
  1. package/.babelrc +8 -8
  2. package/.husky/commit-msg +3 -3
  3. package/CHANGELOG.md +18 -18
  4. package/lib/components/AnimateData.js +11 -7
  5. package/lib/components/Axis.js +18 -14
  6. package/lib/components/Background.js +2 -2
  7. package/lib/components/Band.js +8 -4
  8. package/lib/components/Brush.js +2 -2
  9. package/lib/components/Carousel.js +15 -8
  10. package/lib/components/CartesianChart.js +11 -7
  11. package/lib/components/Chart.js +9 -6
  12. package/lib/components/ChartContainer.js +8 -4
  13. package/lib/components/ConicalGradient.js +27 -23
  14. package/lib/components/ExtentData.js +7 -4
  15. package/lib/components/FilterData.js +7 -4
  16. package/lib/components/Indicator.js +2 -2
  17. package/lib/components/Label.js +2 -2
  18. package/lib/components/Legend.js +11 -5
  19. package/lib/components/Lighter.js +179 -179
  20. package/lib/components/Line.js +11 -5
  21. package/lib/components/LinearGradient.js +2 -2
  22. package/lib/components/Mapping.js +8 -5
  23. package/lib/components/Marquee.js +14 -14
  24. package/lib/components/PieChart.js +17 -8
  25. package/lib/components/StackData.js +7 -4
  26. package/lib/components/StereoBar.js +8 -4
  27. package/lib/components/TextOverflow.js +65 -0
  28. package/lib/components/Tooltip.js +2 -2
  29. package/lib/components/index.js +50 -50
  30. package/lib/css/index.module.css +41 -41
  31. package/lib/css/piechart.module.css +26 -26
  32. package/lib/element/ConicGradient.js +72 -72
  33. package/lib/formatter/legend.js +2 -2
  34. package/lib/hooks/index.js +14 -14
  35. package/lib/hooks/useAnimateData.js +7 -7
  36. package/lib/hooks/useAxes.js +7 -7
  37. package/lib/hooks/useCarouselAxisX.js +7 -7
  38. package/lib/hooks/useExtentData.js +8 -8
  39. package/lib/hooks/useFilterData.js +8 -8
  40. package/lib/hooks/useStackData.js +10 -8
  41. package/lib/hooks/useTooltip.js +10 -10
  42. package/lib/index.js +6 -2
  43. package/lib/utils/index.js +8 -5
  44. package/package.json +53 -51
  45. package/src/components/AnimateData.tsx +24 -24
  46. package/src/components/Axis.tsx +354 -354
  47. package/src/components/Background.tsx +45 -45
  48. package/src/components/Band.tsx +173 -173
  49. package/src/components/Brush.js +159 -159
  50. package/src/components/Carousel.tsx +144 -144
  51. package/src/components/Chart.js +99 -99
  52. package/src/components/ChartContainer.tsx +63 -63
  53. package/src/components/ConicalGradient.js +258 -258
  54. package/src/components/ExtentData.js +17 -17
  55. package/src/components/FilterData.js +23 -23
  56. package/src/components/Indicator.js +13 -13
  57. package/src/components/Label.js +206 -206
  58. package/src/components/Legend.js +158 -158
  59. package/src/components/Lighter.jsx +173 -173
  60. package/src/components/Line.js +144 -144
  61. package/src/components/LinearGradient.js +29 -29
  62. package/src/components/Mapping.js +71 -71
  63. package/src/components/Marquee.js +93 -93
  64. package/src/components/PieChart.js +1288 -1288
  65. package/src/components/StackData.js +20 -20
  66. package/src/components/StereoBar.tsx +310 -310
  67. package/src/components/TextOverflow.js +51 -0
  68. package/src/components/Tooltip.js +169 -169
  69. package/src/components/index.js +53 -53
  70. package/src/context/index.js +2 -2
  71. package/src/css/index.module.css +41 -41
  72. package/src/css/piechart.module.css +26 -26
  73. package/src/element/ConicGradient.jsx +55 -55
  74. package/src/element/Line.tsx +33 -33
  75. package/src/element/index.ts +3 -3
  76. package/src/formatter/index.js +1 -1
  77. package/src/formatter/legend.js +90 -90
  78. package/src/hooks/index.js +17 -17
  79. package/src/hooks/useAnimateData.ts +67 -67
  80. package/src/hooks/useAxes.js +144 -144
  81. package/src/hooks/useCarouselAxisX.js +163 -163
  82. package/src/hooks/useExtentData.js +88 -88
  83. package/src/hooks/useFilterData.js +72 -72
  84. package/src/hooks/useStackData.js +100 -100
  85. package/src/hooks/useTooltip.ts +96 -96
  86. package/src/index.js +6 -6
  87. package/src/types/index.d.ts +67 -67
  88. package/src/utils/index.js +696 -696
  89. 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 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; }
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] != 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; }
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); if (enumerableOnly) symbols = symbols.filter(function (sym) { return Object.getOwnPropertyDescriptor(object, sym).enumerable; }); keys.push.apply(keys, symbols); } return keys; }
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] != 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; }
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,
@@ -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, "Mapping", {
8
+ Object.defineProperty(exports, "AnimateData", {
9
9
  enumerable: true,
10
10
  get: function get() {
11
- return _Mapping["default"];
11
+ return _AnimateData["default"];
12
12
  }
13
13
  });
14
- Object.defineProperty(exports, "AnimateData", {
14
+ exports.Area = void 0;
15
+ Object.defineProperty(exports, "Axis", {
15
16
  enumerable: true,
16
17
  get: function get() {
17
- return _AnimateData["default"];
18
+ return _Axis["default"];
18
19
  }
19
20
  });
20
- Object.defineProperty(exports, "FilterData", {
21
+ Object.defineProperty(exports, "Background", {
21
22
  enumerable: true,
22
23
  get: function get() {
23
- return _FilterData["default"];
24
+ return _Background["default"];
24
25
  }
25
26
  });
26
- Object.defineProperty(exports, "ExtentData", {
27
+ Object.defineProperty(exports, "Band", {
27
28
  enumerable: true,
28
29
  get: function get() {
29
- return _ExtentData["default"];
30
+ return _Band["default"];
30
31
  }
31
32
  });
32
- Object.defineProperty(exports, "StackData", {
33
+ Object.defineProperty(exports, "Brush", {
33
34
  enumerable: true,
34
35
  get: function get() {
35
- return _StackData["default"];
36
+ return _Brush["default"];
36
37
  }
37
38
  });
38
- Object.defineProperty(exports, "ChartContainer", {
39
+ Object.defineProperty(exports, "Carousel", {
39
40
  enumerable: true,
40
41
  get: function get() {
41
- return _ChartContainer["default"];
42
+ return _Carousel["default"];
42
43
  }
43
44
  });
44
- Object.defineProperty(exports, "Legend", {
45
+ Object.defineProperty(exports, "CartesianChart", {
45
46
  enumerable: true,
46
47
  get: function get() {
47
- return _Legend["default"];
48
+ return _CartesianChart["default"];
48
49
  }
49
50
  });
50
- Object.defineProperty(exports, "Axis", {
51
+ Object.defineProperty(exports, "Chart", {
51
52
  enumerable: true,
52
53
  get: function get() {
53
- return _Axis["default"];
54
+ return _Chart["default"];
54
55
  }
55
56
  });
56
- Object.defineProperty(exports, "Tooltip", {
57
+ Object.defineProperty(exports, "ChartContainer", {
57
58
  enumerable: true,
58
59
  get: function get() {
59
- return _Tooltip["default"];
60
+ return _ChartContainer["default"];
60
61
  }
61
62
  });
62
- Object.defineProperty(exports, "Indicator", {
63
+ Object.defineProperty(exports, "ConicalGradient", {
63
64
  enumerable: true,
64
65
  get: function get() {
65
- return _Indicator["default"];
66
+ return _ConicalGradient["default"];
66
67
  }
67
68
  });
68
- Object.defineProperty(exports, "Band", {
69
+ Object.defineProperty(exports, "ExtentData", {
69
70
  enumerable: true,
70
71
  get: function get() {
71
- return _Band["default"];
72
+ return _ExtentData["default"];
72
73
  }
73
74
  });
74
- Object.defineProperty(exports, "Lighter", {
75
+ Object.defineProperty(exports, "FilterData", {
75
76
  enumerable: true,
76
77
  get: function get() {
77
- return _Lighter["default"];
78
+ return _FilterData["default"];
78
79
  }
79
80
  });
80
- Object.defineProperty(exports, "Line", {
81
+ Object.defineProperty(exports, "Indicator", {
81
82
  enumerable: true,
82
83
  get: function get() {
83
- return _Line["default"];
84
+ return _Indicator["default"];
84
85
  }
85
86
  });
86
- Object.defineProperty(exports, "Background", {
87
+ Object.defineProperty(exports, "Label", {
87
88
  enumerable: true,
88
89
  get: function get() {
89
- return _Background["default"];
90
+ return _Label["default"];
90
91
  }
91
92
  });
92
- Object.defineProperty(exports, "LinearGradient", {
93
+ Object.defineProperty(exports, "Legend", {
93
94
  enumerable: true,
94
95
  get: function get() {
95
- return _LinearGradient["default"];
96
+ return _Legend["default"];
96
97
  }
97
98
  });
98
- Object.defineProperty(exports, "Brush", {
99
+ Object.defineProperty(exports, "Lighter", {
99
100
  enumerable: true,
100
101
  get: function get() {
101
- return _Brush["default"];
102
+ return _Lighter["default"];
102
103
  }
103
104
  });
104
- Object.defineProperty(exports, "Label", {
105
+ Object.defineProperty(exports, "Line", {
105
106
  enumerable: true,
106
107
  get: function get() {
107
- return _Label["default"];
108
+ return _Line["default"];
108
109
  }
109
110
  });
110
- Object.defineProperty(exports, "StereoBar", {
111
+ Object.defineProperty(exports, "LinearGradient", {
111
112
  enumerable: true,
112
113
  get: function get() {
113
- return _StereoBar["default"];
114
+ return _LinearGradient["default"];
114
115
  }
115
116
  });
116
- Object.defineProperty(exports, "Carousel", {
117
+ Object.defineProperty(exports, "Mapping", {
117
118
  enumerable: true,
118
119
  get: function get() {
119
- return _Carousel["default"];
120
+ return _Mapping["default"];
120
121
  }
121
122
  });
122
- Object.defineProperty(exports, "Chart", {
123
+ Object.defineProperty(exports, "PieChart", {
123
124
  enumerable: true,
124
125
  get: function get() {
125
- return _Chart["default"];
126
+ return _PieChart["default"];
126
127
  }
127
128
  });
128
- Object.defineProperty(exports, "ConicalGradient", {
129
+ Object.defineProperty(exports, "StackData", {
129
130
  enumerable: true,
130
131
  get: function get() {
131
- return _ConicalGradient["default"];
132
+ return _StackData["default"];
132
133
  }
133
134
  });
134
- Object.defineProperty(exports, "CartesianChart", {
135
+ Object.defineProperty(exports, "StereoBar", {
135
136
  enumerable: true,
136
137
  get: function get() {
137
- return _CartesianChart["default"];
138
+ return _StereoBar["default"];
138
139
  }
139
140
  });
140
- Object.defineProperty(exports, "PieChart", {
141
+ Object.defineProperty(exports, "TextOverflow", {
141
142
  enumerable: true,
142
143
  get: function get() {
143
- return _PieChart["default"];
144
+ return _TextOverflow["default"];
144
145
  }
145
146
  });
146
- Object.defineProperty(exports, "Marquee", {
147
+ Object.defineProperty(exports, "Tooltip", {
147
148
  enumerable: true,
148
149
  get: function get() {
149
- return _Marquee["default"];
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 _Marquee = _interopRequireDefault(require("./Marquee"));
200
+ var _TextOverflow = _interopRequireDefault(require("./TextOverflow"));
201
201
 
202
202
  var Area = _Line["default"];
203
203
  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
  }
@@ -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); if (enumerableOnly) symbols = symbols.filter(function (sym) { return Object.getOwnPropertyDescriptor(object, sym).enumerable; }); keys.push.apply(keys, symbols); } return keys; }
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] != 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; }
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,