@easyv/charts 1.3.9 → 1.3.10

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 (74) 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/Band.js +22 -1
  7. package/lib/components/Carousel.js +2 -2
  8. package/lib/components/CartesianChart.js +1 -1
  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 +6 -0
  13. package/lib/components/LinearGradient.js +2 -2
  14. package/lib/components/Marquee.js +3 -3
  15. package/lib/components/TextOverflow.js +3 -3
  16. package/lib/css/index.module.css +41 -41
  17. package/lib/css/piechart.module.css +26 -26
  18. package/lib/element/ConicGradient.js +72 -72
  19. package/lib/hooks/useAnimateData.js +5 -5
  20. package/lib/hooks/useAxes.js +5 -5
  21. package/lib/hooks/useCarouselAxisX.js +5 -5
  22. package/lib/hooks/useExtentData.js +6 -6
  23. package/lib/hooks/useFilterData.js +5 -5
  24. package/lib/hooks/useStackData.js +5 -5
  25. package/lib/hooks/useTooltip.js +10 -10
  26. package/lib/utils/index.js +48 -48
  27. package/package.json +54 -54
  28. package/src/components/AnimateData.tsx +24 -24
  29. package/src/components/Axis.tsx +354 -354
  30. package/src/components/Background.tsx +62 -62
  31. package/src/components/Band.tsx +191 -169
  32. package/src/components/BaseLine.js +82 -82
  33. package/src/components/Brush.js +159 -159
  34. package/src/components/Carousel.tsx +144 -144
  35. package/src/components/CartesianChart.js +3 -1
  36. package/src/components/Chart.js +99 -99
  37. package/src/components/ChartContainer.tsx +63 -63
  38. package/src/components/ConicalGradient.js +258 -258
  39. package/src/components/ExtentData.js +17 -17
  40. package/src/components/FilterData.js +23 -23
  41. package/src/components/Indicator.js +13 -13
  42. package/src/components/Label.js +226 -226
  43. package/src/components/Legend.js +158 -158
  44. package/src/components/Lighter.jsx +173 -173
  45. package/src/components/Line.js +150 -145
  46. package/src/components/LinearGradient.js +29 -29
  47. package/src/components/Mapping.js +71 -71
  48. package/src/components/Marquee.js +97 -97
  49. package/src/components/PieChart.js +1278 -1278
  50. package/src/components/StackData.js +16 -16
  51. package/src/components/StereoBar.tsx +307 -307
  52. package/src/components/TextOverflow.js +51 -51
  53. package/src/components/Tooltip.js +169 -169
  54. package/src/components/index.js +55 -55
  55. package/src/context/index.js +2 -2
  56. package/src/css/index.module.css +41 -41
  57. package/src/css/piechart.module.css +26 -26
  58. package/src/element/ConicGradient.jsx +55 -55
  59. package/src/element/Line.tsx +33 -33
  60. package/src/element/index.ts +3 -3
  61. package/src/formatter/index.js +1 -1
  62. package/src/formatter/legend.js +90 -90
  63. package/src/hooks/index.js +17 -17
  64. package/src/hooks/useAnimateData.ts +67 -67
  65. package/src/hooks/useAxes.js +144 -144
  66. package/src/hooks/useCarouselAxisX.js +163 -163
  67. package/src/hooks/useExtentData.js +89 -89
  68. package/src/hooks/useFilterData.js +72 -72
  69. package/src/hooks/useStackData.js +101 -101
  70. package/src/hooks/useTooltip.ts +96 -96
  71. package/src/index.js +6 -6
  72. package/src/types/index.d.ts +67 -67
  73. package/src/utils/index.js +738 -738
  74. package/tsconfig.json +23 -23
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,
@@ -102,6 +102,7 @@ var _default = /*#__PURE__*/(0, _react.memo)(function (_ref3) {
102
102
  showHighlight = _ref3$config$highligh.show,
103
103
  extent = _ref3$config$highligh.extent,
104
104
  highlightFill = _ref3$config$highligh.fill,
105
+ headDecorate = _ref3$config.headDecorate,
105
106
  _ref3$bandLength = _ref3.bandLength,
106
107
  bandLength = _ref3$bandLength === void 0 ? 0 : _ref3$bandLength,
107
108
  data = _ref3.data,
@@ -142,6 +143,12 @@ var _default = /*#__PURE__*/(0, _react.memo)(function (_ref3) {
142
143
  var y1 = yScaler(isVertical ? end : start);
143
144
  var y2 = yScaler(isVertical ? start : end);
144
145
  var positionX = xScaler(x) - step / 2 + seriesStart + index * seriesStep;
146
+ var showHead, headUrl, headWidth, headHeight, headTranslate;
147
+
148
+ if (headDecorate) {
149
+ showHead = headDecorate.show, headUrl = headDecorate.url, headWidth = headDecorate.size.width, headHeight = headDecorate.size.height, headTranslate = headDecorate.headTranslate;
150
+ }
151
+
145
152
  if (isNaN(positionX)) return null;
146
153
  var positionY = y < 0 ? y1 : y2;
147
154
  var attr = getAttr({
@@ -152,10 +159,24 @@ var _default = /*#__PURE__*/(0, _react.memo)(function (_ref3) {
152
159
  seriesWidth: seriesWidth
153
160
  });
154
161
  return /*#__PURE__*/_react["default"].createElement("foreignObject", (0, _extends2["default"])({
155
- key: i
162
+ key: i,
163
+ style: {
164
+ overflow: "visible",
165
+ position: "relative"
166
+ }
156
167
  }, attr, {
157
168
  onClick: triggerClick,
158
169
  "data-data": JSON.stringify(data)
170
+ }), headUrl && showHead && /*#__PURE__*/_react["default"].createElement("div", {
171
+ style: {
172
+ position: "absolute",
173
+ background: "url(".concat(window.appConfig.ASSETS_URL + headUrl, ") 0 0/100% 100%"),
174
+ width: headWidth,
175
+ height: headHeight,
176
+ left: "50%",
177
+ zIndex: 1,
178
+ transform: "translate(calc(-50% + ".concat(headTranslate.x, "px), ").concat(headTranslate.y, "px)")
179
+ }
159
180
  }), /*#__PURE__*/_react["default"].createElement("div", {
160
181
  style: {
161
182
  width: '100%',
@@ -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) {
@@ -136,7 +136,7 @@ var Chart = /*#__PURE__*/(0, _react.memo)(function (_ref) {
136
136
  axis: axisX,
137
137
  config: background,
138
138
  bandLength: bandLength
139
- }), (0, _toConsumableArray2["default"])(axes.values()).map(function (item, index) {
139
+ }), (0, _toConsumableArray2["default"])(axes.values()).reverse().map(function (item, index) {
140
140
  var config = item.axisType == 'x' ? axisX : item;
141
141
  return /*#__PURE__*/_react["default"].createElement(_.Axis, (0, _extends2["default"])({
142
142
  triggerClick: onInteraction
@@ -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
  };
@@ -120,6 +120,7 @@ var _default = /*#__PURE__*/(0, _react.memo)(function (_ref6) {
120
120
  curve = _ref6$config$line.curve,
121
121
  tension = _ref6$config$line.tension,
122
122
  connectNulls = _ref6$config$line.connectNulls,
123
+ lineShadow = _ref6$config$line.lineShadow,
123
124
  lighter = _ref6$config$line.lighter,
124
125
  _ref6$line = _ref6.line,
125
126
  lineId = _ref6$line.id,
@@ -169,11 +170,16 @@ var _default = /*#__PURE__*/(0, _react.memo)(function (_ref6) {
169
170
  }, [direction, xScaler, yScaler, tension, curve]);
170
171
  var path = lineGen(_data);
171
172
  var showLighter = lighter && lighter.show;
173
+ var show = lineShadow && lineShadow.show;
174
+ var shadow = lineShadow && lineShadow.shadow;
172
175
  return /*#__PURE__*/_react["default"].createElement("g", {
173
176
  className: "__easyv-line"
174
177
  }, /*#__PURE__*/_react["default"].createElement("path", {
175
178
  d: path,
176
179
  stroke: stroke,
180
+ style: {
181
+ filter: show ? "drop-shadow(".concat(shadow.hShadow, "px ").concat(shadow.vShadow, "px ").concat(shadow.blur, "px ").concat(shadow.color, ")") : "none"
182
+ },
177
183
  fill: "none",
178
184
  strokeDasharray: lineType === 'dash' ? '3 3' : null,
179
185
  strokeWidth: lineWidth
@@ -9,8 +9,8 @@ exports["default"] = void 0;
9
9
 
10
10
  var _slicedToArray2 = _interopRequireDefault(require("@babel/runtime/helpers/slicedToArray"));
11
11
 
12
- /**
13
- * svg渐变滤镜
12
+ /**
13
+ * svg渐变滤镜
14
14
  */
15
15
  var _default = function _default(_ref) {
16
16
  var id = _ref.id,