@easyv/charts 1.2.6 → 1.2.9

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 (75) hide show
  1. package/.babelrc +8 -8
  2. package/.husky/commit-msg +3 -3
  3. package/CHANGELOG.md +18 -18
  4. package/lib/components/Axis.js +10 -10
  5. package/lib/components/Background.js +2 -2
  6. package/lib/components/BaseLine.js +19 -10
  7. package/lib/components/Carousel.js +2 -2
  8. package/lib/components/CartesianChart.js +3 -0
  9. package/lib/components/ConicalGradient.js +21 -21
  10. package/lib/components/Indicator.js +2 -2
  11. package/lib/components/Lighter.js +179 -179
  12. package/lib/components/Line.js +38 -32
  13. package/lib/components/LinearGradient.js +2 -2
  14. package/lib/components/Marquee.js +3 -3
  15. package/lib/components/PieChart.js +11 -6
  16. package/lib/components/TextOverflow.js +3 -3
  17. package/lib/css/index.module.css +41 -41
  18. package/lib/css/piechart.module.css +26 -26
  19. package/lib/element/ConicGradient.js +72 -72
  20. package/lib/hooks/useAnimateData.js +5 -5
  21. package/lib/hooks/useAxes.js +5 -5
  22. package/lib/hooks/useCarouselAxisX.js +5 -5
  23. package/lib/hooks/useExtentData.js +6 -6
  24. package/lib/hooks/useFilterData.js +5 -5
  25. package/lib/hooks/useStackData.js +5 -5
  26. package/lib/hooks/useTooltip.js +10 -10
  27. package/lib/utils/index.js +1 -1
  28. package/package.json +53 -53
  29. package/src/components/AnimateData.tsx +24 -24
  30. package/src/components/Axis.tsx +354 -354
  31. package/src/components/Background.tsx +45 -45
  32. package/src/components/Band.tsx +173 -173
  33. package/src/components/BaseLine.js +83 -76
  34. package/src/components/Brush.js +159 -159
  35. package/src/components/Carousel.tsx +144 -144
  36. package/src/components/CartesianChart.js +3 -0
  37. package/src/components/Chart.js +99 -99
  38. package/src/components/ChartContainer.tsx +63 -63
  39. package/src/components/ConicalGradient.js +258 -258
  40. package/src/components/ExtentData.js +17 -17
  41. package/src/components/FilterData.js +23 -23
  42. package/src/components/Indicator.js +13 -13
  43. package/src/components/Label.js +206 -206
  44. package/src/components/Legend.js +158 -158
  45. package/src/components/Lighter.jsx +173 -173
  46. package/src/components/Line.js +145 -144
  47. package/src/components/LinearGradient.js +29 -29
  48. package/src/components/Mapping.js +71 -71
  49. package/src/components/Marquee.js +93 -93
  50. package/src/components/PieChart.js +1278 -1288
  51. package/src/components/StackData.js +20 -20
  52. package/src/components/StereoBar.tsx +310 -310
  53. package/src/components/TextOverflow.js +51 -51
  54. package/src/components/Tooltip.js +169 -169
  55. package/src/components/index.js +55 -55
  56. package/src/context/index.js +2 -2
  57. package/src/css/index.module.css +41 -41
  58. package/src/css/piechart.module.css +26 -26
  59. package/src/element/ConicGradient.jsx +55 -55
  60. package/src/element/Line.tsx +33 -33
  61. package/src/element/index.ts +3 -3
  62. package/src/formatter/index.js +1 -1
  63. package/src/formatter/legend.js +90 -90
  64. package/src/hooks/index.js +17 -17
  65. package/src/hooks/useAnimateData.ts +67 -67
  66. package/src/hooks/useAxes.js +144 -144
  67. package/src/hooks/useCarouselAxisX.js +163 -163
  68. package/src/hooks/useExtentData.js +88 -88
  69. package/src/hooks/useFilterData.js +72 -72
  70. package/src/hooks/useStackData.js +100 -100
  71. package/src/hooks/useTooltip.ts +96 -96
  72. package/src/index.js +6 -6
  73. package/src/types/index.d.ts +67 -67
  74. package/src/utils/index.js +714 -714
  75. package/tsconfig.json +22 -22
package/.babelrc CHANGED
@@ -1,8 +1,8 @@
1
- {
2
- "presets": ["@babel/preset-env", "@babel/preset-react", "@babel/preset-typescript"],
3
- "plugins": [
4
- "@babel/plugin-proposal-export-default-from",
5
- "@babel/plugin-transform-runtime",
6
- "@babel/plugin-proposal-class-properties"
7
- ]
8
- }
1
+ {
2
+ "presets": ["@babel/preset-env", "@babel/preset-react", "@babel/preset-typescript"],
3
+ "plugins": [
4
+ "@babel/plugin-proposal-export-default-from",
5
+ "@babel/plugin-transform-runtime",
6
+ "@babel/plugin-proposal-class-properties"
7
+ ]
8
+ }
package/.husky/commit-msg CHANGED
@@ -1,4 +1,4 @@
1
- #!/bin/sh
2
- . "$(dirname "$0")/_/husky.sh"
3
-
1
+ #!/bin/sh
2
+ . "$(dirname "$0")/_/husky.sh"
3
+
4
4
  yarn commitlint --edit $1
package/CHANGELOG.md CHANGED
@@ -1,18 +1,18 @@
1
- # Changelog
2
-
3
- All notable changes to this project will be documented in this file. See [standard-version](https://github.com/conventional-changelog/standard-version) for commit guidelines.
4
-
5
- ### [1.1.1](https://gitlab.prod.dtstack.cn:10022/visdev/visApplication/easyv-charts/compare/v1.1.0...v1.1.1) (2022-04-13)
6
-
7
- ## 1.1.0 (2022-04-02)
8
-
9
-
10
- ### Features
11
-
12
- * 轴标签,label支持样式传入 ([749a595](https://gitlab.prod.dtstack.cn:10022/visdev/visApplication/easyv-charts/commit/749a595a96b95917dafdc1766f63efec73398d64))
13
- * axis轴标签支持点击触发回调 ([1f636e1](https://gitlab.prod.dtstack.cn:10022/visdev/visApplication/easyv-charts/commit/1f636e1840f4f3b48c2b9765ce6087759d82fb17))
14
-
15
-
16
- ### Bug Fixes
17
-
18
- * **band组件:** 修复foreignObject在Safari浏览器下的位置诡异偏离问题 ([1a65d54](https://gitlab.prod.dtstack.cn:10022/visdev/visApplication/easyv-charts/commit/1a65d54abbcf6c9e84cc85cc8b6a9d28b24fa4c4))
1
+ # Changelog
2
+
3
+ All notable changes to this project will be documented in this file. See [standard-version](https://github.com/conventional-changelog/standard-version) for commit guidelines.
4
+
5
+ ### [1.1.1](https://gitlab.prod.dtstack.cn:10022/visdev/visApplication/easyv-charts/compare/v1.1.0...v1.1.1) (2022-04-13)
6
+
7
+ ## 1.1.0 (2022-04-02)
8
+
9
+
10
+ ### Features
11
+
12
+ * 轴标签,label支持样式传入 ([749a595](https://gitlab.prod.dtstack.cn:10022/visdev/visApplication/easyv-charts/commit/749a595a96b95917dafdc1766f63efec73398d64))
13
+ * axis轴标签支持点击触发回调 ([1f636e1](https://gitlab.prod.dtstack.cn:10022/visdev/visApplication/easyv-charts/commit/1f636e1840f4f3b48c2b9765ce6087759d82fb17))
14
+
15
+
16
+ ### Bug Fixes
17
+
18
+ * **band组件:** 修复foreignObject在Safari浏览器下的位置诡异偏离问题 ([1a65d54](https://gitlab.prod.dtstack.cn:10022/visdev/visApplication/easyv-charts/commit/1a65d54abbcf6c9e84cc85cc8b6a9d28b24fa4c4))
@@ -59,16 +59,16 @@ var getAxesPath = function getAxesPath(orientation, _ref2) {
59
59
  return 'M0, -0.5V' + (height + 0.5);
60
60
  }
61
61
  };
62
- /**
63
- * 根据坐标轴位置来确定轴标签的垂直对齐方式,水平对齐方式,以及轴标签位于坐标轴的哪个方向
64
- * @param orientation 坐标轴位置
65
- * @param rotate 旋转角度
66
- * @returns {
67
- * dominantBaseline,
68
- * textAnchor,
69
- * directionX,
70
- * directionY
71
- * }
62
+ /**
63
+ * 根据坐标轴位置来确定轴标签的垂直对齐方式,水平对齐方式,以及轴标签位于坐标轴的哪个方向
64
+ * @param orientation 坐标轴位置
65
+ * @param rotate 旋转角度
66
+ * @returns {
67
+ * dominantBaseline,
68
+ * textAnchor,
69
+ * directionX,
70
+ * directionY
71
+ * }
72
72
  */
73
73
 
74
74
 
@@ -13,8 +13,8 @@ var _react = _interopRequireDefault(require("react"));
13
13
 
14
14
  var _utils = require("../utils");
15
15
 
16
- /**
17
- * 轴类图背景
16
+ /**
17
+ * 轴类图背景
18
18
  */
19
19
  var _default = function _default(_ref) {
20
20
  var _ref$axis = _ref.axis,
@@ -13,6 +13,8 @@ var _defineProperty2 = _interopRequireDefault(require("@babel/runtime/helpers/de
13
13
 
14
14
  var _react = _interopRequireWildcard(require("react"));
15
15
 
16
+ var _utils = require("../utils");
17
+
16
18
  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); }
17
19
 
18
20
  function _interopRequireWildcard(obj, nodeInterop) { if (!nodeInterop && obj && obj.__esModule) { return obj; } if (obj === null || _typeof(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; }
@@ -23,6 +25,8 @@ function _objectSpread(target) { for (var i = 1; i < arguments.length; i++) { va
23
25
 
24
26
  var _default = /*#__PURE__*/(0, _react.memo)(function (_ref) {
25
27
  var width = _ref.width,
28
+ height = _ref.height,
29
+ orientation = _ref.baseLineOri,
26
30
  _ref$config = _ref.config,
27
31
  _ref$config$dataStyle = _ref$config.dataStyle,
28
32
  _ref$config$dataStyle2 = _ref$config$dataStyle.data,
@@ -45,13 +49,18 @@ var _default = /*#__PURE__*/(0, _react.memo)(function (_ref) {
45
49
  yScaler = _ref.yAxis.scaler,
46
50
  data = _ref.data;
47
51
  if (!data.value) return null;
52
+ console.log(orientation, 'orientation');
53
+ var x1 = orientation == 'left' ? yScaler(data.value) : marginLeft,
54
+ x2 = orientation == 'left' ? yScaler(data.value) : width - marginRight,
55
+ y1 = orientation == 'left' ? marginLeft : yScaler(data.value),
56
+ y2 = orientation == 'left' ? height - marginRight : yScaler(data.value);
48
57
  return /*#__PURE__*/_react["default"].createElement(_react["default"].Fragment, null, /*#__PURE__*/_react["default"].createElement("g", {
49
58
  className: "__easyv-baseLine"
50
59
  }, /*#__PURE__*/_react["default"].createElement("line", {
51
- x1: marginLeft,
52
- x2: width - marginRight,
53
- y1: yScaler(data.value),
54
- y2: yScaler(data.value),
60
+ x1: x1,
61
+ x2: x2,
62
+ y1: y1,
63
+ y2: y2,
55
64
  stroke: color,
56
65
  fill: "none",
57
66
  strokeDasharray: lineType === 'dash' ? strokeDasharray : null,
@@ -59,17 +68,17 @@ var _default = /*#__PURE__*/(0, _react.memo)(function (_ref) {
59
68
  })), labelShow && /*#__PURE__*/_react["default"].createElement("foreignObject", {
60
69
  width: 100,
61
70
  height: 100,
62
- x: width - marginRight + labelTranslate.x,
63
- y: yScaler(data.value) - textStyle.fontSize + labelTranslate.y
71
+ x: x2 + labelTranslate.x,
72
+ y: y2 - textStyle.fontSize + labelTranslate.y
64
73
  }, /*#__PURE__*/_react["default"].createElement("div", null, /*#__PURE__*/_react["default"].createElement("span", {
65
- style: _objectSpread({}, textStyle)
74
+ style: _objectSpread({}, (0, _utils.getFontStyle)(textStyle))
66
75
  }, label))), dataShow && /*#__PURE__*/_react["default"].createElement("foreignObject", {
67
76
  width: 100,
68
77
  height: 100,
69
- x: width - marginRight + dataTranslate.x,
70
- y: yScaler(data.value) + dataTranslate.y
78
+ x: x2 + dataTranslate.x,
79
+ y: y2 + dataTranslate.y
71
80
  }, /*#__PURE__*/_react["default"].createElement("div", null, /*#__PURE__*/_react["default"].createElement("span", {
72
- style: _objectSpread({}, dataStyle)
81
+ style: _objectSpread({}, (0, _utils.getFontStyle)(dataStyle))
73
82
  }, data.value))));
74
83
  });
75
84
 
@@ -49,8 +49,8 @@ var defaultAnimation = {
49
49
  opacity: 100
50
50
  }
51
51
  };
52
- /**
53
- * 饼图类图表轮播逻辑,用来管理currentIndex,及回调逻辑(HOC)
52
+ /**
53
+ * 饼图类图表轮播逻辑,用来管理currentIndex,及回调逻辑(HOC)
54
54
  */
55
55
 
56
56
  var _default = function _default(Component) {
@@ -46,6 +46,7 @@ var Chart = /*#__PURE__*/(0, _react.memo)(function (_ref) {
46
46
  series = _ref$config.series,
47
47
  tooltip = _ref$config.tooltip,
48
48
  _ref$config$baseLine = _ref$config.baseLine,
49
+ baseLineOri = _ref$config$baseLine.orientation,
49
50
  _ref$config$baseLine$ = _ref$config$baseLine.config,
50
51
  baseLineConfig = _ref$config$baseLine$ === void 0 ? {} : _ref$config$baseLine$,
51
52
  _ref$config$baseLine$2 = _ref$config$baseLine.data,
@@ -167,9 +168,11 @@ var Chart = /*#__PURE__*/(0, _react.memo)(function (_ref) {
167
168
  var yOrZ = baseLineConfig[index].line.yOrZ;
168
169
  var yAxis = axes.get(yOrZ);
169
170
  return yAxis && /*#__PURE__*/_react["default"].createElement(_.BaseLine, {
171
+ height: height,
170
172
  width: width,
171
173
  key: index,
172
174
  config: baseLineConfig[index],
175
+ baseLineOri: baseLineOri,
173
176
  yAxis: yAxis,
174
177
  data: item
175
178
  });
@@ -23,8 +23,8 @@ function _getRequireWildcardCache(nodeInterop) { if (typeof WeakMap !== "functio
23
23
 
24
24
  function _interopRequireWildcard(obj, nodeInterop) { if (!nodeInterop && obj && obj.__esModule) { return obj; } if (obj === null || _typeof(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; }
25
25
 
26
- /**
27
- * 饼图装饰内圈
26
+ /**
27
+ * 饼图装饰内圈
28
28
  */
29
29
  var _default = function _default(_ref) {
30
30
  var width = _ref.width,
@@ -127,8 +127,8 @@ var _default = function _default(_ref) {
127
127
  }
128
128
  });
129
129
  };
130
- /**
131
- * ConicalGradient
130
+ /**
131
+ * ConicalGradient
132
132
  */
133
133
 
134
134
 
@@ -140,11 +140,11 @@ function ConicalGradient() {
140
140
  }
141
141
 
142
142
  ConicalGradient.prototype = {
143
- /**
144
- * addColorStop
145
- *
146
- * @param {Number} offset
147
- * @param {Array} color RGBA值
143
+ /**
144
+ * addColorStop
145
+ *
146
+ * @param {Number} offset
147
+ * @param {Array} color RGBA值
148
148
  */
149
149
  addColorStop: function addColorStop(offset, color) {
150
150
  this._offsets.push(offset);
@@ -154,23 +154,23 @@ ConicalGradient.prototype = {
154
154
  return this;
155
155
  },
156
156
 
157
- /**
158
- * _offsetsReverse (array.forEach callback)
157
+ /**
158
+ * _offsetsReverse (array.forEach callback)
159
159
  */
160
160
  _offsetsReverse: function _offsetsReverse(offset, index, array) {
161
161
  array[index] = 1 - offset;
162
162
  },
163
163
 
164
- /**
165
- * fill
166
- *
167
- * @param {Number} context
168
- * @param {Number} x
169
- * @param {Number} y
170
- * @param {Number} radius
171
- * @param {Number} startAngle
172
- * @param {Number} endAngle
173
- * @param {Boolean} anticlockwise
164
+ /**
165
+ * fill
166
+ *
167
+ * @param {Number} context
168
+ * @param {Number} x
169
+ * @param {Number} y
170
+ * @param {Number} radius
171
+ * @param {Number} startAngle
172
+ * @param {Number} endAngle
173
+ * @param {Boolean} anticlockwise
174
174
  */
175
175
  fill: function fill(context, x, y, radius, startAngle, endAngle, anticlockwise) {
176
176
  var offsets = this._offsets;
@@ -5,8 +5,8 @@ Object.defineProperty(exports, "__esModule", {
5
5
  });
6
6
  exports["default"] = void 0;
7
7
 
8
- /**
9
- * 轴类图表移上去的指示框背景
8
+ /**
9
+ * 轴类图表移上去的指示框背景
10
10
  */
11
11
  var _default = function _default(_ref) {
12
12
  var color = _ref.color,
@@ -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
  };