@easyv/charts 1.3.9 → 1.3.11
This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.
- package/.babelrc +8 -8
- package/.husky/commit-msg +3 -3
- package/CHANGELOG.md +18 -18
- package/lib/components/Axis.js +10 -10
- package/lib/components/Background.js +2 -2
- package/lib/components/Band.js +22 -1
- package/lib/components/Carousel.js +2 -2
- package/lib/components/CartesianChart.js +1 -1
- package/lib/components/ConicalGradient.js +21 -21
- package/lib/components/Indicator.js +2 -2
- package/lib/components/Lighter.js +179 -179
- package/lib/components/Line.js +6 -0
- package/lib/components/LinearGradient.js +2 -2
- package/lib/components/Marquee.js +3 -3
- package/lib/components/TextOverflow.js +3 -3
- package/lib/css/index.module.css +41 -41
- package/lib/css/piechart.module.css +26 -26
- package/lib/element/ConicGradient.js +72 -72
- package/lib/hooks/useAnimateData.js +5 -5
- package/lib/hooks/useAxes.js +5 -5
- package/lib/hooks/useCarouselAxisX.js +5 -5
- package/lib/hooks/useExtentData.js +6 -6
- package/lib/hooks/useFilterData.js +5 -5
- package/lib/hooks/useStackData.js +5 -5
- package/lib/hooks/useTooltip.js +10 -10
- package/lib/utils/index.js +91 -74
- package/package.json +54 -54
- package/src/components/AnimateData.tsx +24 -24
- package/src/components/Axis.tsx +354 -354
- package/src/components/Background.tsx +62 -62
- package/src/components/Band.tsx +191 -169
- package/src/components/BaseLine.js +82 -82
- package/src/components/Brush.js +159 -159
- package/src/components/Carousel.tsx +144 -144
- package/src/components/CartesianChart.js +3 -1
- package/src/components/Chart.js +99 -99
- package/src/components/ChartContainer.tsx +63 -63
- package/src/components/ConicalGradient.js +258 -258
- package/src/components/ExtentData.js +17 -17
- package/src/components/FilterData.js +23 -23
- package/src/components/Indicator.js +13 -13
- package/src/components/Label.js +226 -226
- package/src/components/Legend.js +158 -158
- package/src/components/Lighter.jsx +173 -173
- package/src/components/Line.js +150 -145
- package/src/components/LinearGradient.js +29 -29
- package/src/components/Mapping.js +71 -71
- package/src/components/Marquee.js +97 -97
- package/src/components/PieChart.js +1278 -1278
- package/src/components/StackData.js +16 -16
- package/src/components/StereoBar.tsx +307 -307
- package/src/components/TextOverflow.js +51 -51
- package/src/components/Tooltip.js +169 -169
- package/src/components/index.js +55 -55
- package/src/context/index.js +2 -2
- package/src/css/index.module.css +41 -41
- package/src/css/piechart.module.css +26 -26
- package/src/element/ConicGradient.jsx +55 -55
- package/src/element/Line.tsx +33 -33
- package/src/element/index.ts +3 -3
- package/src/formatter/index.js +1 -1
- package/src/formatter/legend.js +90 -90
- package/src/hooks/index.js +17 -17
- package/src/hooks/useAnimateData.ts +67 -67
- package/src/hooks/useAxes.js +144 -144
- package/src/hooks/useCarouselAxisX.js +163 -163
- package/src/hooks/useExtentData.js +89 -89
- package/src/hooks/useFilterData.js +72 -72
- package/src/hooks/useStackData.js +101 -101
- package/src/hooks/useTooltip.ts +96 -96
- package/src/index.js +6 -6
- package/src/types/index.d.ts +67 -67
- package/src/utils/index.js +755 -738
- 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))
|
package/lib/components/Axis.js
CHANGED
|
@@ -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
|
|
package/lib/components/Band.js
CHANGED
|
@@ -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%',
|
|
@@ -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;
|
|
@@ -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
|
};
|
package/lib/components/Line.js
CHANGED
|
@@ -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
|