@easyv/charts 1.1.7 → 1.2.1

This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.
Files changed (86) hide show
  1. package/.babelrc +8 -8
  2. package/.husky/commit-msg +3 -3
  3. package/CHANGELOG.md +18 -18
  4. package/commitlint.config.js +1 -1
  5. package/lib/components/AnimateData.js +36 -36
  6. package/lib/components/Axis.js +329 -329
  7. package/lib/components/Background.js +2 -2
  8. package/lib/components/Band.js +173 -173
  9. package/lib/components/Brush.js +201 -201
  10. package/lib/components/Carousel.js +164 -164
  11. package/lib/components/Chart.js +111 -111
  12. package/lib/components/ChartContainer.js +58 -58
  13. package/lib/components/ConicalGradient.js +264 -264
  14. package/lib/components/ExtentData.js +45 -45
  15. package/lib/components/FilterData.js +53 -53
  16. package/lib/components/Indicator.js +2 -2
  17. package/lib/components/Label.js +278 -278
  18. package/lib/components/Legend.js +154 -154
  19. package/lib/components/Lighter.js +179 -179
  20. package/lib/components/Line.js +181 -181
  21. package/lib/components/LinearGradient.js +2 -2
  22. package/lib/components/Mapping.js +127 -127
  23. package/lib/components/PieChart.js +1061 -1061
  24. package/lib/components/StackData.js +45 -45
  25. package/lib/components/StereoBar.js +336 -336
  26. package/lib/components/Tooltip.js +155 -155
  27. package/lib/components/index.js +194 -194
  28. package/lib/css/index.module.css +41 -41
  29. package/lib/css/piechart.module.css +26 -26
  30. package/lib/element/ConicGradient.js +72 -72
  31. package/lib/formatter/legend.js +91 -91
  32. package/lib/hooks/index.js +62 -62
  33. package/lib/hooks/useAnimateData.js +88 -88
  34. package/lib/hooks/useAxes.js +135 -135
  35. package/lib/hooks/useCarouselAxisX.js +184 -184
  36. package/lib/hooks/useExtentData.js +128 -128
  37. package/lib/hooks/useFilterData.js +112 -112
  38. package/lib/hooks/useStackData.js +134 -134
  39. package/lib/hooks/useTooltip.js +10 -10
  40. package/lib/index.js +84 -84
  41. package/lib/utils/index.js +832 -832
  42. package/package.json +51 -51
  43. package/src/components/AnimateData.tsx +24 -24
  44. package/src/components/Axis.tsx +354 -354
  45. package/src/components/Background.tsx +45 -45
  46. package/src/components/Band.tsx +173 -173
  47. package/src/components/Brush.js +159 -159
  48. package/src/components/Carousel.tsx +144 -144
  49. package/src/components/Chart.js +99 -99
  50. package/src/components/ChartContainer.tsx +63 -63
  51. package/src/components/ConicalGradient.js +258 -258
  52. package/src/components/ExtentData.js +17 -17
  53. package/src/components/FilterData.js +23 -23
  54. package/src/components/Indicator.js +13 -13
  55. package/src/components/Label.js +206 -206
  56. package/src/components/Legend.js +158 -158
  57. package/src/components/Lighter.jsx +173 -173
  58. package/src/components/Line.js +144 -144
  59. package/src/components/LinearGradient.js +29 -29
  60. package/src/components/Mapping.js +71 -71
  61. package/src/components/Marquee.js +74 -0
  62. package/src/components/PieChart.js +1097 -1097
  63. package/src/components/StackData.js +20 -20
  64. package/src/components/StereoBar.tsx +310 -310
  65. package/src/components/Tooltip.js +169 -168
  66. package/src/components/index.js +51 -51
  67. package/src/context/index.js +2 -2
  68. package/src/css/index.module.css +41 -41
  69. package/src/css/piechart.module.css +26 -26
  70. package/src/element/ConicGradient.jsx +55 -55
  71. package/src/element/Line.tsx +33 -33
  72. package/src/element/index.ts +3 -3
  73. package/src/formatter/index.js +1 -1
  74. package/src/formatter/legend.js +90 -90
  75. package/src/hooks/index.js +17 -17
  76. package/src/hooks/useAnimateData.ts +67 -62
  77. package/src/hooks/useAxes.js +144 -144
  78. package/src/hooks/useCarouselAxisX.js +163 -163
  79. package/src/hooks/useExtentData.js +88 -88
  80. package/src/hooks/useFilterData.js +72 -72
  81. package/src/hooks/useStackData.js +100 -100
  82. package/src/hooks/useTooltip.ts +96 -96
  83. package/src/index.js +6 -6
  84. package/src/types/index.d.ts +67 -62
  85. package/src/utils/index.js +696 -696
  86. package/tsconfig.json +22 -22
@@ -1,155 +1,155 @@
1
- "use strict";
2
-
3
- var _interopRequireWildcard = require("@babel/runtime/helpers/interopRequireWildcard");
4
-
5
- var _interopRequireDefault = require("@babel/runtime/helpers/interopRequireDefault");
6
-
7
- Object.defineProperty(exports, "__esModule", {
8
- value: true
9
- });
10
- exports["default"] = void 0;
11
-
12
- var _defineProperty2 = _interopRequireDefault(require("@babel/runtime/helpers/defineProperty"));
13
-
14
- var _slicedToArray2 = _interopRequireDefault(require("@babel/runtime/helpers/slicedToArray"));
15
-
16
- var _objectWithoutProperties2 = _interopRequireDefault(require("@babel/runtime/helpers/objectWithoutProperties"));
17
-
18
- var _react = _interopRequireWildcard(require("react"));
19
-
20
- var _utils = require("../utils");
21
-
22
- 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; }
23
-
24
- 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; }
25
-
26
- var defaultFont = {
27
- fontStyle: 'normal',
28
- fontWeight: 'normal'
29
- };
30
-
31
- var _default = /*#__PURE__*/(0, _react.memo)(function (_ref) {
32
- var series = _ref.series,
33
- config = _ref.config,
34
- _ref$config = _ref.config,
35
- show = _ref$config.show,
36
- _ref$config$order = _ref$config.order,
37
- order = _ref$config$order === void 0 ? '' : _ref$config$order,
38
- interactive = _ref$config.interactive,
39
- _ref$config$layout = _ref$config.layout,
40
- _ref$config$layout$al = _ref$config$layout.alignment,
41
- alignment = _ref$config$layout$al === void 0 ? 'right center' : _ref$config$layout$al,
42
- gridTemplateColumns = _ref$config$layout.gridTemplateColumns,
43
- _ref$config$layout$gr = _ref$config$layout.gridGap,
44
- gridColumnGap = _ref$config$layout$gr.gridColumnGap,
45
- gridRowGap = _ref$config$layout$gr.gridRowGap,
46
- _ref$config$layout$tr = _ref$config$layout.translate,
47
- x = _ref$config$layout$tr.x,
48
- y = _ref$config$layout$tr.y,
49
- _ref$config$font = _ref$config.font;
50
- _ref$config$font = _ref$config$font === void 0 ? defaultFont : _ref$config$font;
51
- var italic = _ref$config$font.italic,
52
- bold = _ref$config$font.bold,
53
- font = (0, _objectWithoutProperties2["default"])(_ref$config$font, ["italic", "bold"]),
54
- _ref$config$unselect = _ref$config.unselect;
55
- _ref$config$unselect = _ref$config$unselect === void 0 ? {} : _ref$config$unselect;
56
- var _ref$config$unselect$ = _ref$config$unselect.opacity,
57
- opacity = _ref$config$unselect$ === void 0 ? 1 : _ref$config$unselect$,
58
- filterData = _ref.filterData,
59
- formatter = _ref.formatter;
60
- if (!show) return null;
61
-
62
- var _series = (0, _utils.sortPie)(series, order);
63
-
64
- var _alignment$split = alignment.split(' '),
65
- _alignment$split2 = (0, _slicedToArray2["default"])(_alignment$split, 2),
66
- _alignment = _alignment$split2[0],
67
- position = _alignment$split2[1];
68
-
69
- var length = _series.length;
70
- var onClick = (0, _react.useCallback)(function (e) {
71
- var dataset = e.currentTarget.dataset;
72
- var name = dataset.name;
73
- filterData && interactive && filterData(name);
74
- }, [interactive, filterData]);
75
- return /*#__PURE__*/_react["default"].createElement("div", {
76
- className: "__easyv-legend-wrapper",
77
- style: _objectSpread({
78
- position: 'absolute',
79
- height: 'auto',
80
- display: 'flex',
81
- transform: 'translate3d(' + x + 'px, ' + y + 'px, 0px)'
82
- }, getPosition(position, _alignment))
83
- }, /*#__PURE__*/_react["default"].createElement("ul", {
84
- style: {
85
- display: 'grid',
86
- gridGap: gridRowGap + 'px ' + gridColumnGap + 'px',
87
- gridTemplateColumns: 'repeat(' + Math.min(gridTemplateColumns, length) + ', 1fr)'
88
- }
89
- }, _series.map(function (series, index) {
90
- var type = series.type,
91
- name = series.name,
92
- displayName = series.displayName,
93
- icon = series.icon,
94
- selected = series.selected;
95
-
96
- var _icon = (0, _utils.getIcon)(type, icon);
97
-
98
- return /*#__PURE__*/_react["default"].createElement("li", {
99
- key: index,
100
- onClick: onClick,
101
- "data-name": name,
102
- style: {
103
- display: 'flex',
104
- opacity: selected === false ? opacity / 100 : 1,
105
- alignItems: 'center',
106
- gap: _icon.gap
107
- }
108
- }, formatter ? formatter(series, config) : /*#__PURE__*/_react["default"].createElement(_react["default"].Fragment, null, /*#__PURE__*/_react["default"].createElement("span", {
109
- style: _icon
110
- }), /*#__PURE__*/_react["default"].createElement("span", {
111
- style: _objectSpread(_objectSpread({}, font), {}, {
112
- fontStyle: italic ? 'italic' : 'normal',
113
- fontWeight: bold ? 'bold' : 'normal'
114
- })
115
- }, displayName || name)));
116
- })));
117
- });
118
-
119
- exports["default"] = _default;
120
-
121
- var getPosition = function getPosition(position, alignment) {
122
- switch (position) {
123
- case 'top':
124
- return {
125
- left: 0,
126
- right: 0,
127
- top: 5,
128
- justifyContent: alignment === 'center' ? 'center' : alignment === 'left' ? 'flex-start' : 'flex-end'
129
- };
130
-
131
- case 'right':
132
- return {
133
- top: 0,
134
- bottom: 0,
135
- right: 10,
136
- alignItems: alignment === 'center' ? 'center' : alignment === 'left' ? 'flex-start' : 'flex-end'
137
- };
138
-
139
- case 'left':
140
- return {
141
- top: 0,
142
- bottom: 0,
143
- left: 10,
144
- alignItems: alignment === 'center' ? 'center' : alignment === 'left' ? 'flex-start' : 'flex-end'
145
- };
146
-
147
- default:
148
- return {
149
- left: 0,
150
- right: 0,
151
- bottom: 5,
152
- justifyContent: alignment === 'center' ? 'center' : alignment === 'left' ? 'flex-start' : 'flex-end'
153
- };
154
- }
1
+ "use strict";
2
+
3
+ var _interopRequireWildcard = require("@babel/runtime/helpers/interopRequireWildcard");
4
+
5
+ var _interopRequireDefault = require("@babel/runtime/helpers/interopRequireDefault");
6
+
7
+ Object.defineProperty(exports, "__esModule", {
8
+ value: true
9
+ });
10
+ exports["default"] = void 0;
11
+
12
+ var _defineProperty2 = _interopRequireDefault(require("@babel/runtime/helpers/defineProperty"));
13
+
14
+ var _slicedToArray2 = _interopRequireDefault(require("@babel/runtime/helpers/slicedToArray"));
15
+
16
+ var _objectWithoutProperties2 = _interopRequireDefault(require("@babel/runtime/helpers/objectWithoutProperties"));
17
+
18
+ var _react = _interopRequireWildcard(require("react"));
19
+
20
+ var _utils = require("../utils");
21
+
22
+ 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; }
23
+
24
+ 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; }
25
+
26
+ var defaultFont = {
27
+ fontStyle: 'normal',
28
+ fontWeight: 'normal'
29
+ };
30
+
31
+ var _default = /*#__PURE__*/(0, _react.memo)(function (_ref) {
32
+ var series = _ref.series,
33
+ config = _ref.config,
34
+ _ref$config = _ref.config,
35
+ show = _ref$config.show,
36
+ _ref$config$order = _ref$config.order,
37
+ order = _ref$config$order === void 0 ? '' : _ref$config$order,
38
+ interactive = _ref$config.interactive,
39
+ _ref$config$layout = _ref$config.layout,
40
+ _ref$config$layout$al = _ref$config$layout.alignment,
41
+ alignment = _ref$config$layout$al === void 0 ? 'right center' : _ref$config$layout$al,
42
+ gridTemplateColumns = _ref$config$layout.gridTemplateColumns,
43
+ _ref$config$layout$gr = _ref$config$layout.gridGap,
44
+ gridColumnGap = _ref$config$layout$gr.gridColumnGap,
45
+ gridRowGap = _ref$config$layout$gr.gridRowGap,
46
+ _ref$config$layout$tr = _ref$config$layout.translate,
47
+ x = _ref$config$layout$tr.x,
48
+ y = _ref$config$layout$tr.y,
49
+ _ref$config$font = _ref$config.font;
50
+ _ref$config$font = _ref$config$font === void 0 ? defaultFont : _ref$config$font;
51
+ var italic = _ref$config$font.italic,
52
+ bold = _ref$config$font.bold,
53
+ font = (0, _objectWithoutProperties2["default"])(_ref$config$font, ["italic", "bold"]),
54
+ _ref$config$unselect = _ref$config.unselect;
55
+ _ref$config$unselect = _ref$config$unselect === void 0 ? {} : _ref$config$unselect;
56
+ var _ref$config$unselect$ = _ref$config$unselect.opacity,
57
+ opacity = _ref$config$unselect$ === void 0 ? 1 : _ref$config$unselect$,
58
+ filterData = _ref.filterData,
59
+ formatter = _ref.formatter;
60
+ if (!show) return null;
61
+
62
+ var _series = (0, _utils.sortPie)(series, order);
63
+
64
+ var _alignment$split = alignment.split(' '),
65
+ _alignment$split2 = (0, _slicedToArray2["default"])(_alignment$split, 2),
66
+ _alignment = _alignment$split2[0],
67
+ position = _alignment$split2[1];
68
+
69
+ var length = _series.length;
70
+ var onClick = (0, _react.useCallback)(function (e) {
71
+ var dataset = e.currentTarget.dataset;
72
+ var name = dataset.name;
73
+ filterData && interactive && filterData(name);
74
+ }, [interactive, filterData]);
75
+ return /*#__PURE__*/_react["default"].createElement("div", {
76
+ className: "__easyv-legend-wrapper",
77
+ style: _objectSpread({
78
+ position: 'absolute',
79
+ height: 'auto',
80
+ display: 'flex',
81
+ transform: 'translate3d(' + x + 'px, ' + y + 'px, 0px)'
82
+ }, getPosition(position, _alignment))
83
+ }, /*#__PURE__*/_react["default"].createElement("ul", {
84
+ style: {
85
+ display: 'grid',
86
+ gridGap: gridRowGap + 'px ' + gridColumnGap + 'px',
87
+ gridTemplateColumns: 'repeat(' + Math.min(gridTemplateColumns, length) + ', 1fr)'
88
+ }
89
+ }, _series.map(function (series, index) {
90
+ var type = series.type,
91
+ name = series.name,
92
+ displayName = series.displayName,
93
+ icon = series.icon,
94
+ selected = series.selected;
95
+
96
+ var _icon = (0, _utils.getIcon)(type, icon);
97
+
98
+ return /*#__PURE__*/_react["default"].createElement("li", {
99
+ key: index,
100
+ onClick: onClick,
101
+ "data-name": name,
102
+ style: {
103
+ display: 'flex',
104
+ opacity: selected === false ? opacity / 100 : 1,
105
+ alignItems: 'center',
106
+ gap: _icon.gap
107
+ }
108
+ }, formatter ? formatter(series, config) : /*#__PURE__*/_react["default"].createElement(_react["default"].Fragment, null, /*#__PURE__*/_react["default"].createElement("span", {
109
+ style: _icon
110
+ }), /*#__PURE__*/_react["default"].createElement("span", {
111
+ style: _objectSpread(_objectSpread({}, font), {}, {
112
+ fontStyle: italic ? 'italic' : 'normal',
113
+ fontWeight: bold ? 'bold' : 'normal'
114
+ })
115
+ }, displayName || name)));
116
+ })));
117
+ });
118
+
119
+ exports["default"] = _default;
120
+
121
+ var getPosition = function getPosition(position, alignment) {
122
+ switch (position) {
123
+ case 'top':
124
+ return {
125
+ left: 0,
126
+ right: 0,
127
+ top: 5,
128
+ justifyContent: alignment === 'center' ? 'center' : alignment === 'left' ? 'flex-start' : 'flex-end'
129
+ };
130
+
131
+ case 'right':
132
+ return {
133
+ top: 0,
134
+ bottom: 0,
135
+ right: 10,
136
+ alignItems: alignment === 'center' ? 'center' : alignment === 'left' ? 'flex-start' : 'flex-end'
137
+ };
138
+
139
+ case 'left':
140
+ return {
141
+ top: 0,
142
+ bottom: 0,
143
+ left: 10,
144
+ alignItems: alignment === 'center' ? 'center' : alignment === 'left' ? 'flex-start' : 'flex-end'
145
+ };
146
+
147
+ default:
148
+ return {
149
+ left: 0,
150
+ right: 0,
151
+ bottom: 5,
152
+ justifyContent: alignment === 'center' ? 'center' : alignment === 'left' ? 'flex-start' : 'flex-end'
153
+ };
154
+ }
155
155
  };
@@ -1,180 +1,180 @@
1
- "use strict";
2
-
3
- var _interopRequireWildcard = require("@babel/runtime/helpers/interopRequireWildcard");
4
-
5
- var _interopRequireDefault = require("@babel/runtime/helpers/interopRequireDefault");
6
-
7
- Object.defineProperty(exports, "__esModule", {
8
- value: true
9
- });
10
- exports["default"] = void 0;
11
-
12
- var _toConsumableArray2 = _interopRequireDefault(require("@babel/runtime/helpers/toConsumableArray"));
13
-
14
- var _slicedToArray2 = _interopRequireDefault(require("@babel/runtime/helpers/slicedToArray"));
15
-
16
- var _react = _interopRequireWildcard(require("react"));
17
-
18
- var _d3v = require("d3v7");
19
-
20
- var _utils = require("../utils");
21
-
22
- var _svgPathProperties = require("svg-path-properties");
23
-
24
- /**
25
- * 区域图发光跟踪路径
26
- */
27
- var _default = function _default(_ref) {
28
- var d = _ref.path,
29
- config = _ref.config,
30
- _ref$config = _ref.config,
31
- curveLength = _ref$config.length,
32
- width = _ref$config.width,
33
- fill = _ref$config.fill,
34
- unitStep = _ref$config.unitStep;
35
- var pointIndexRef = (0, _react.useRef)(0);
36
- var raf = (0, _react.useRef)(null);
37
-
38
- var _useState = (0, _react.useState)([]),
39
- _useState2 = (0, _slicedToArray2["default"])(_useState, 2),
40
- points = _useState2[0],
41
- setPoints = _useState2[1];
42
-
43
- var _useState3 = (0, _react.useState)(null),
44
- _useState4 = (0, _slicedToArray2["default"])(_useState3, 2),
45
- lighter = _useState4[0],
46
- setLighter = _useState4[1];
47
-
48
- var pointLength = points.length;
49
- var totalLength = getLength(pointLength, curveLength);
50
- var easingFunc = easing.linear;
51
- var interpolateList = (0, _react.useMemo)(function () {
52
- return getColorsInterpolate((0, _utils.getColorList)(fill));
53
- }, [fill]);
54
- var drawLigher = (0, _react.useCallback)(function () {
55
- var STEP = 2;
56
- var LOOP = false;
57
-
58
- if (lighter && lighter.children) {
59
- var currentPointLength = pointIndexRef.current;
60
- var pointIndex = currentPointLength >= totalLength ? LOOP ? curveLength : 0 : currentPointLength + unitStep + Math.floor(easingFunc(pointIndexRef.current / totalLength) * STEP);
61
- var overstep = pointIndex - pointLength;
62
- var startIndex = getPointIndex(pointIndex, pointLength, curveLength);
63
- var endIndex = getPointIndex(pointIndex + curveLength, pointLength, curveLength);
64
- var overstepPoints = LOOP && overstep > 0 ? points.slice(0, overstep) : [];
65
- drawCircle(Array.from(lighter.children), [].concat((0, _toConsumableArray2["default"])(points.slice(startIndex, endIndex)), (0, _toConsumableArray2["default"])(overstepPoints)), interpolateList);
66
- pointIndexRef.current = pointIndex;
67
- }
68
-
69
- raf.current = requestAnimationFrame(drawLigher);
70
- }, [lighter, totalLength, curveLength, unitStep, points, interpolateList]);
71
- (0, _react.useEffect)(function () {
72
- var path = new _svgPathProperties.svgPathProperties(d);
73
- var totalLength = path.getTotalLength();
74
- var points = [];
75
-
76
- for (var i = 0; i < totalLength; i++) {
77
- var _path$getPointAtLengt = path.getPointAtLength(i),
78
- x = _path$getPointAtLengt.x,
79
- y = _path$getPointAtLengt.y;
80
-
81
- points.push({
82
- index: i,
83
- x: x,
84
- y: y
85
- });
86
- }
87
-
88
- setPoints(points);
89
- }, [d, config]);
90
- (0, _react.useEffect)(function () {
91
- raf.current = requestAnimationFrame(drawLigher);
92
- return function () {
93
- cancelAnimationFrame(raf.current);
94
- };
95
- }, [drawLigher]);
96
- return /*#__PURE__*/_react["default"].createElement("g", {
97
- ref: setLighter
98
- }, points.map(function (_ref2, index) {
99
- var x = _ref2.x,
100
- y = _ref2.y;
101
- return /*#__PURE__*/_react["default"].createElement("circle", {
102
- cx: x,
103
- cy: y,
104
- key: index,
105
- r: width,
106
- fill: "none"
107
- });
108
- }));
109
- };
110
-
111
- exports["default"] = _default;
112
-
113
- var drawCircle = function drawCircle(children, points, interpolateList) {
114
- var pointLength = points.length; // const [startPoint] = points;
115
- // const startIndex = startPoint ? startPoint.index : 0;
116
-
117
- children.forEach(function (child, index) {
118
- var pointIndex = points.findIndex(function (_ref3) {
119
- var i = _ref3.index;
120
- return i == index;
121
- });
122
- child.setAttribute('fill', pointIndex > -1 ? getColor(pointIndex / pointLength, //TODO: 颜色插值尚需完善
123
- interpolateList) : 'none');
124
- });
125
- };
126
-
127
- var getColor = function getColor(x, interpolateList) {
128
- return interpolateList(x);
129
- };
130
-
131
- var getLength = function getLength(pointLength, length) {
132
- if (length > pointLength) {
133
- return pointLength * 2;
134
- }
135
-
136
- return pointLength + length;
137
- };
138
-
139
- var getColorsInterpolate = function getColorsInterpolate(colors) {
140
- var length = colors.length;
141
- if (!!(length < 2)) return (0, _d3v.scaleLinear)().domain([0, 1]).range([colors[0].color || '#000', colors[0].color || '#000']);
142
- var linear = (0, _d3v.scaleLinear)().domain(colors.map(function (d) {
143
- return d.offset;
144
- })).range(colors.map(function (d) {
145
- return d.color;
146
- }));
147
- return linear;
148
- };
149
-
150
- var easing = {
151
- linear: function linear() {
152
- return 0;
153
- },
154
- easeIn: function easeIn(k) {
155
- return Math.pow(k, 3);
156
- },
157
- easeOut: function easeOut(k) {
158
- return 1 - easing.easeIn(1 - k);
159
- },
160
- easeInOut: function easeInOut(k) {
161
- return k < 0.5 ? easing.easeIn(k * 2) / 2 : 1 - easing.easeIn(2 - 2 * k) / 2;
162
- },
163
- easeOutIn: function easeOutIn(k) {
164
- return k < 0.5 ? 0.5 * (1 - easing.easeIn(1 - 2 * k)) : 0.5 * easing.easeIn(k * 2 - 1) + 0.5;
165
- }
166
- };
167
-
168
- var getPointIndex = function getPointIndex(pointIndex, pointLength, curveLength) {
169
- var index = pointIndex - curveLength;
170
-
171
- if (index < 0) {
172
- return 0;
173
- }
174
-
175
- if (index >= pointLength) {
176
- return pointLength - 1;
177
- }
178
-
179
- return index;
1
+ "use strict";
2
+
3
+ var _interopRequireWildcard = require("@babel/runtime/helpers/interopRequireWildcard");
4
+
5
+ var _interopRequireDefault = require("@babel/runtime/helpers/interopRequireDefault");
6
+
7
+ Object.defineProperty(exports, "__esModule", {
8
+ value: true
9
+ });
10
+ exports["default"] = void 0;
11
+
12
+ var _toConsumableArray2 = _interopRequireDefault(require("@babel/runtime/helpers/toConsumableArray"));
13
+
14
+ var _slicedToArray2 = _interopRequireDefault(require("@babel/runtime/helpers/slicedToArray"));
15
+
16
+ var _react = _interopRequireWildcard(require("react"));
17
+
18
+ var _d3v = require("d3v7");
19
+
20
+ var _utils = require("../utils");
21
+
22
+ var _svgPathProperties = require("svg-path-properties");
23
+
24
+ /**
25
+ * 区域图发光跟踪路径
26
+ */
27
+ var _default = function _default(_ref) {
28
+ var d = _ref.path,
29
+ config = _ref.config,
30
+ _ref$config = _ref.config,
31
+ curveLength = _ref$config.length,
32
+ width = _ref$config.width,
33
+ fill = _ref$config.fill,
34
+ unitStep = _ref$config.unitStep;
35
+ var pointIndexRef = (0, _react.useRef)(0);
36
+ var raf = (0, _react.useRef)(null);
37
+
38
+ var _useState = (0, _react.useState)([]),
39
+ _useState2 = (0, _slicedToArray2["default"])(_useState, 2),
40
+ points = _useState2[0],
41
+ setPoints = _useState2[1];
42
+
43
+ var _useState3 = (0, _react.useState)(null),
44
+ _useState4 = (0, _slicedToArray2["default"])(_useState3, 2),
45
+ lighter = _useState4[0],
46
+ setLighter = _useState4[1];
47
+
48
+ var pointLength = points.length;
49
+ var totalLength = getLength(pointLength, curveLength);
50
+ var easingFunc = easing.linear;
51
+ var interpolateList = (0, _react.useMemo)(function () {
52
+ return getColorsInterpolate((0, _utils.getColorList)(fill));
53
+ }, [fill]);
54
+ var drawLigher = (0, _react.useCallback)(function () {
55
+ var STEP = 2;
56
+ var LOOP = false;
57
+
58
+ if (lighter && lighter.children) {
59
+ var currentPointLength = pointIndexRef.current;
60
+ var pointIndex = currentPointLength >= totalLength ? LOOP ? curveLength : 0 : currentPointLength + unitStep + Math.floor(easingFunc(pointIndexRef.current / totalLength) * STEP);
61
+ var overstep = pointIndex - pointLength;
62
+ var startIndex = getPointIndex(pointIndex, pointLength, curveLength);
63
+ var endIndex = getPointIndex(pointIndex + curveLength, pointLength, curveLength);
64
+ var overstepPoints = LOOP && overstep > 0 ? points.slice(0, overstep) : [];
65
+ drawCircle(Array.from(lighter.children), [].concat((0, _toConsumableArray2["default"])(points.slice(startIndex, endIndex)), (0, _toConsumableArray2["default"])(overstepPoints)), interpolateList);
66
+ pointIndexRef.current = pointIndex;
67
+ }
68
+
69
+ raf.current = requestAnimationFrame(drawLigher);
70
+ }, [lighter, totalLength, curveLength, unitStep, points, interpolateList]);
71
+ (0, _react.useEffect)(function () {
72
+ var path = new _svgPathProperties.svgPathProperties(d);
73
+ var totalLength = path.getTotalLength();
74
+ var points = [];
75
+
76
+ for (var i = 0; i < totalLength; i++) {
77
+ var _path$getPointAtLengt = path.getPointAtLength(i),
78
+ x = _path$getPointAtLengt.x,
79
+ y = _path$getPointAtLengt.y;
80
+
81
+ points.push({
82
+ index: i,
83
+ x: x,
84
+ y: y
85
+ });
86
+ }
87
+
88
+ setPoints(points);
89
+ }, [d, config]);
90
+ (0, _react.useEffect)(function () {
91
+ raf.current = requestAnimationFrame(drawLigher);
92
+ return function () {
93
+ cancelAnimationFrame(raf.current);
94
+ };
95
+ }, [drawLigher]);
96
+ return /*#__PURE__*/_react["default"].createElement("g", {
97
+ ref: setLighter
98
+ }, points.map(function (_ref2, index) {
99
+ var x = _ref2.x,
100
+ y = _ref2.y;
101
+ return /*#__PURE__*/_react["default"].createElement("circle", {
102
+ cx: x,
103
+ cy: y,
104
+ key: index,
105
+ r: width,
106
+ fill: "none"
107
+ });
108
+ }));
109
+ };
110
+
111
+ exports["default"] = _default;
112
+
113
+ var drawCircle = function drawCircle(children, points, interpolateList) {
114
+ var pointLength = points.length; // const [startPoint] = points;
115
+ // const startIndex = startPoint ? startPoint.index : 0;
116
+
117
+ children.forEach(function (child, index) {
118
+ var pointIndex = points.findIndex(function (_ref3) {
119
+ var i = _ref3.index;
120
+ return i == index;
121
+ });
122
+ child.setAttribute('fill', pointIndex > -1 ? getColor(pointIndex / pointLength, //TODO: 颜色插值尚需完善
123
+ interpolateList) : 'none');
124
+ });
125
+ };
126
+
127
+ var getColor = function getColor(x, interpolateList) {
128
+ return interpolateList(x);
129
+ };
130
+
131
+ var getLength = function getLength(pointLength, length) {
132
+ if (length > pointLength) {
133
+ return pointLength * 2;
134
+ }
135
+
136
+ return pointLength + length;
137
+ };
138
+
139
+ var getColorsInterpolate = function getColorsInterpolate(colors) {
140
+ var length = colors.length;
141
+ if (!!(length < 2)) return (0, _d3v.scaleLinear)().domain([0, 1]).range([colors[0].color || '#000', colors[0].color || '#000']);
142
+ var linear = (0, _d3v.scaleLinear)().domain(colors.map(function (d) {
143
+ return d.offset;
144
+ })).range(colors.map(function (d) {
145
+ return d.color;
146
+ }));
147
+ return linear;
148
+ };
149
+
150
+ var easing = {
151
+ linear: function linear() {
152
+ return 0;
153
+ },
154
+ easeIn: function easeIn(k) {
155
+ return Math.pow(k, 3);
156
+ },
157
+ easeOut: function easeOut(k) {
158
+ return 1 - easing.easeIn(1 - k);
159
+ },
160
+ easeInOut: function easeInOut(k) {
161
+ return k < 0.5 ? easing.easeIn(k * 2) / 2 : 1 - easing.easeIn(2 - 2 * k) / 2;
162
+ },
163
+ easeOutIn: function easeOutIn(k) {
164
+ return k < 0.5 ? 0.5 * (1 - easing.easeIn(1 - 2 * k)) : 0.5 * easing.easeIn(k * 2 - 1) + 0.5;
165
+ }
166
+ };
167
+
168
+ var getPointIndex = function getPointIndex(pointIndex, pointLength, curveLength) {
169
+ var index = pointIndex - curveLength;
170
+
171
+ if (index < 0) {
172
+ return 0;
173
+ }
174
+
175
+ if (index >= pointLength) {
176
+ return pointLength - 1;
177
+ }
178
+
179
+ return index;
180
180
  };