@easyv/charts 1.2.7 → 1.2.8
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/AnimateData.js +11 -7
- package/lib/components/Axis.js +18 -14
- package/lib/components/Background.js +2 -2
- package/lib/components/Band.js +8 -4
- package/lib/components/BaseLine.js +23 -12
- package/lib/components/Brush.js +2 -2
- package/lib/components/Carousel.js +15 -8
- package/lib/components/CartesianChart.js +14 -7
- package/lib/components/Chart.js +9 -6
- package/lib/components/ChartContainer.js +8 -4
- package/lib/components/ConicalGradient.js +27 -23
- package/lib/components/ExtentData.js +7 -4
- package/lib/components/FilterData.js +7 -4
- package/lib/components/Indicator.js +2 -2
- package/lib/components/Label.js +2 -2
- package/lib/components/Legend.js +11 -5
- package/lib/components/Lighter.js +179 -179
- package/lib/components/Line.js +49 -37
- package/lib/components/LinearGradient.js +2 -2
- package/lib/components/Mapping.js +8 -5
- package/lib/components/Marquee.js +5 -5
- package/lib/components/PieChart.js +17 -8
- package/lib/components/StackData.js +7 -4
- package/lib/components/StereoBar.js +8 -4
- package/lib/components/TextOverflow.js +5 -5
- package/lib/components/Tooltip.js +2 -2
- package/lib/components/index.js +49 -49
- 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/formatter/legend.js +2 -2
- package/lib/hooks/index.js +14 -14
- package/lib/hooks/useAnimateData.js +7 -7
- package/lib/hooks/useAxes.js +7 -7
- package/lib/hooks/useCarouselAxisX.js +7 -7
- package/lib/hooks/useExtentData.js +9 -8
- package/lib/hooks/useFilterData.js +8 -8
- package/lib/hooks/useStackData.js +10 -8
- package/lib/hooks/useTooltip.js +10 -10
- package/lib/index.js +6 -2
- package/lib/utils/index.js +8 -5
- package/package.json +53 -53
- package/src/components/AnimateData.tsx +24 -24
- package/src/components/Axis.tsx +354 -354
- package/src/components/Background.tsx +45 -45
- package/src/components/Band.tsx +173 -173
- package/src/components/BaseLine.js +83 -76
- package/src/components/Brush.js +159 -159
- package/src/components/Carousel.tsx +144 -144
- package/src/components/CartesianChart.js +3 -0
- 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 +206 -206
- package/src/components/Legend.js +158 -158
- package/src/components/Lighter.jsx +173 -173
- package/src/components/Line.js +145 -144
- package/src/components/LinearGradient.js +29 -29
- package/src/components/Mapping.js +71 -71
- package/src/components/Marquee.js +93 -93
- package/src/components/PieChart.js +1277 -1287
- package/src/components/StackData.js +20 -20
- package/src/components/StereoBar.tsx +310 -310
- 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 +88 -88
- package/src/hooks/useFilterData.js +72 -72
- package/src/hooks/useStackData.js +100 -100
- 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 +714 -714
- package/tsconfig.json +22 -22
|
@@ -19,17 +19,20 @@ var _react = require("react");
|
|
|
19
19
|
|
|
20
20
|
var _hooks = require("../hooks");
|
|
21
21
|
|
|
22
|
-
|
|
22
|
+
var _excluded = ["series"],
|
|
23
|
+
_excluded2 = ["config", "data"];
|
|
23
24
|
|
|
24
|
-
function
|
|
25
|
+
function ownKeys(object, enumerableOnly) { var keys = Object.keys(object); if (Object.getOwnPropertySymbols) { var symbols = Object.getOwnPropertySymbols(object); enumerableOnly && (symbols = symbols.filter(function (sym) { return Object.getOwnPropertyDescriptor(object, sym).enumerable; })), keys.push.apply(keys, symbols); } return keys; }
|
|
26
|
+
|
|
27
|
+
function _objectSpread(target) { for (var i = 1; i < arguments.length; i++) { var source = null != arguments[i] ? arguments[i] : {}; i % 2 ? ownKeys(Object(source), !0).forEach(function (key) { (0, _defineProperty2["default"])(target, key, source[key]); }) : Object.getOwnPropertyDescriptors ? Object.defineProperties(target, Object.getOwnPropertyDescriptors(source)) : ownKeys(Object(source)).forEach(function (key) { Object.defineProperty(target, key, Object.getOwnPropertyDescriptor(source, key)); }); } return target; }
|
|
25
28
|
|
|
26
29
|
var _default = function _default(Component) {
|
|
27
30
|
return /*#__PURE__*/(0, _react.memo)(function (_ref) {
|
|
28
31
|
var _ref$config = _ref.config,
|
|
29
32
|
series = _ref$config.series,
|
|
30
|
-
config = (0, _objectWithoutProperties2["default"])(_ref$config,
|
|
33
|
+
config = (0, _objectWithoutProperties2["default"])(_ref$config, _excluded),
|
|
31
34
|
data = _ref.data,
|
|
32
|
-
props = (0, _objectWithoutProperties2["default"])(_ref,
|
|
35
|
+
props = (0, _objectWithoutProperties2["default"])(_ref, _excluded2);
|
|
33
36
|
|
|
34
37
|
var _useFilterData = (0, _hooks.useFilterData)({
|
|
35
38
|
series: series,
|
package/lib/components/Label.js
CHANGED
|
@@ -19,9 +19,9 @@ var _utils = require("../utils");
|
|
|
19
19
|
|
|
20
20
|
var _context = require("../context");
|
|
21
21
|
|
|
22
|
-
function ownKeys(object, enumerableOnly) { var keys = Object.keys(object); if (Object.getOwnPropertySymbols) { var symbols = Object.getOwnPropertySymbols(object);
|
|
22
|
+
function ownKeys(object, enumerableOnly) { var keys = Object.keys(object); if (Object.getOwnPropertySymbols) { var symbols = Object.getOwnPropertySymbols(object); enumerableOnly && (symbols = symbols.filter(function (sym) { return Object.getOwnPropertyDescriptor(object, sym).enumerable; })), keys.push.apply(keys, symbols); } return keys; }
|
|
23
23
|
|
|
24
|
-
function _objectSpread(target) { for (var i = 1; i < arguments.length; i++) { var source = arguments[i]
|
|
24
|
+
function _objectSpread(target) { for (var i = 1; i < arguments.length; i++) { var source = null != arguments[i] ? arguments[i] : {}; i % 2 ? ownKeys(Object(source), !0).forEach(function (key) { (0, _defineProperty2["default"])(target, key, source[key]); }) : Object.getOwnPropertyDescriptors ? Object.defineProperties(target, Object.getOwnPropertyDescriptors(source)) : ownKeys(Object(source)).forEach(function (key) { Object.defineProperty(target, key, Object.getOwnPropertyDescriptor(source, key)); }); } return target; }
|
|
25
25
|
|
|
26
26
|
var _default = /*#__PURE__*/(0, _react.memo)(function (_ref) {
|
|
27
27
|
var _ref$config = _ref.config,
|
package/lib/components/Legend.js
CHANGED
|
@@ -1,9 +1,9 @@
|
|
|
1
1
|
"use strict";
|
|
2
2
|
|
|
3
|
-
var _interopRequireWildcard = require("@babel/runtime/helpers/interopRequireWildcard");
|
|
4
|
-
|
|
5
3
|
var _interopRequireDefault = require("@babel/runtime/helpers/interopRequireDefault");
|
|
6
4
|
|
|
5
|
+
var _typeof = require("@babel/runtime/helpers/typeof");
|
|
6
|
+
|
|
7
7
|
Object.defineProperty(exports, "__esModule", {
|
|
8
8
|
value: true
|
|
9
9
|
});
|
|
@@ -19,9 +19,15 @@ var _react = _interopRequireWildcard(require("react"));
|
|
|
19
19
|
|
|
20
20
|
var _utils = require("../utils");
|
|
21
21
|
|
|
22
|
-
|
|
22
|
+
var _excluded = ["italic", "bold"];
|
|
23
|
+
|
|
24
|
+
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); }
|
|
25
|
+
|
|
26
|
+
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; }
|
|
27
|
+
|
|
28
|
+
function ownKeys(object, enumerableOnly) { var keys = Object.keys(object); if (Object.getOwnPropertySymbols) { var symbols = Object.getOwnPropertySymbols(object); enumerableOnly && (symbols = symbols.filter(function (sym) { return Object.getOwnPropertyDescriptor(object, sym).enumerable; })), keys.push.apply(keys, symbols); } return keys; }
|
|
23
29
|
|
|
24
|
-
function _objectSpread(target) { for (var i = 1; i < arguments.length; i++) { var source = arguments[i]
|
|
30
|
+
function _objectSpread(target) { for (var i = 1; i < arguments.length; i++) { var source = null != arguments[i] ? arguments[i] : {}; i % 2 ? ownKeys(Object(source), !0).forEach(function (key) { (0, _defineProperty2["default"])(target, key, source[key]); }) : Object.getOwnPropertyDescriptors ? Object.defineProperties(target, Object.getOwnPropertyDescriptors(source)) : ownKeys(Object(source)).forEach(function (key) { Object.defineProperty(target, key, Object.getOwnPropertyDescriptor(source, key)); }); } return target; }
|
|
25
31
|
|
|
26
32
|
var defaultFont = {
|
|
27
33
|
fontStyle: 'normal',
|
|
@@ -50,7 +56,7 @@ var _default = /*#__PURE__*/(0, _react.memo)(function (_ref) {
|
|
|
50
56
|
_ref$config$font = _ref$config$font === void 0 ? defaultFont : _ref$config$font;
|
|
51
57
|
var italic = _ref$config$font.italic,
|
|
52
58
|
bold = _ref$config$font.bold,
|
|
53
|
-
font = (0, _objectWithoutProperties2["default"])(_ref$config$font,
|
|
59
|
+
font = (0, _objectWithoutProperties2["default"])(_ref$config$font, _excluded),
|
|
54
60
|
_ref$config$unselect = _ref$config.unselect;
|
|
55
61
|
_ref$config$unselect = _ref$config$unselect === void 0 ? {} : _ref$config$unselect;
|
|
56
62
|
var _ref$config$unselect$ = _ref$config$unselect.opacity,
|
|
@@ -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
|
@@ -1,14 +1,16 @@
|
|
|
1
1
|
"use strict";
|
|
2
2
|
|
|
3
|
-
var _interopRequireWildcard = require("@babel/runtime/helpers/interopRequireWildcard");
|
|
4
|
-
|
|
5
3
|
var _interopRequireDefault = require("@babel/runtime/helpers/interopRequireDefault");
|
|
6
4
|
|
|
5
|
+
var _typeof = require("@babel/runtime/helpers/typeof");
|
|
6
|
+
|
|
7
7
|
Object.defineProperty(exports, "__esModule", {
|
|
8
8
|
value: true
|
|
9
9
|
});
|
|
10
10
|
exports["default"] = void 0;
|
|
11
11
|
|
|
12
|
+
var _objectDestructuringEmpty2 = _interopRequireDefault(require("@babel/runtime/helpers/objectDestructuringEmpty"));
|
|
13
|
+
|
|
12
14
|
var _slicedToArray2 = _interopRequireDefault(require("@babel/runtime/helpers/slicedToArray"));
|
|
13
15
|
|
|
14
16
|
var _defineProperty2 = _interopRequireDefault(require("@babel/runtime/helpers/defineProperty"));
|
|
@@ -23,9 +25,15 @@ var _utils = require("../utils");
|
|
|
23
25
|
|
|
24
26
|
var _ = require(".");
|
|
25
27
|
|
|
26
|
-
|
|
28
|
+
var _excluded = ["data"];
|
|
29
|
+
|
|
30
|
+
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); }
|
|
31
|
+
|
|
32
|
+
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; }
|
|
33
|
+
|
|
34
|
+
function ownKeys(object, enumerableOnly) { var keys = Object.keys(object); if (Object.getOwnPropertySymbols) { var symbols = Object.getOwnPropertySymbols(object); enumerableOnly && (symbols = symbols.filter(function (sym) { return Object.getOwnPropertyDescriptor(object, sym).enumerable; })), keys.push.apply(keys, symbols); } return keys; }
|
|
27
35
|
|
|
28
|
-
function _objectSpread(target) { for (var i = 1; i < arguments.length; i++) { var source = arguments[i]
|
|
36
|
+
function _objectSpread(target) { for (var i = 1; i < arguments.length; i++) { var source = null != arguments[i] ? arguments[i] : {}; i % 2 ? ownKeys(Object(source), !0).forEach(function (key) { (0, _defineProperty2["default"])(target, key, source[key]); }) : Object.getOwnPropertyDescriptors ? Object.defineProperties(target, Object.getOwnPropertyDescriptors(source)) : ownKeys(Object(source)).forEach(function (key) { Object.defineProperty(target, key, Object.getOwnPropertyDescriptor(source, key)); }); } return target; }
|
|
29
37
|
|
|
30
38
|
var defined = function defined(d) {
|
|
31
39
|
return d.data.y != null;
|
|
@@ -34,7 +42,7 @@ var defined = function defined(d) {
|
|
|
34
42
|
var getLineData = function getLineData(data, connectNulls) {
|
|
35
43
|
return connectNulls ? data.map(function (_ref) {
|
|
36
44
|
var data = _ref.data,
|
|
37
|
-
item = (0, _objectWithoutProperties2["default"])(_ref,
|
|
45
|
+
item = (0, _objectWithoutProperties2["default"])(_ref, _excluded);
|
|
38
46
|
return _objectSpread(_objectSpread({}, item), {}, {
|
|
39
47
|
data: _objectSpread(_objectSpread({}, data), {}, {
|
|
40
48
|
y: +data.y
|
|
@@ -74,7 +82,11 @@ var Area = function Area(_ref2) {
|
|
|
74
82
|
}).y1(function (_ref4) {
|
|
75
83
|
var y = _ref4.data.y;
|
|
76
84
|
return yScaler(y);
|
|
77
|
-
}).y0(height)
|
|
85
|
+
}) // .y0(height)
|
|
86
|
+
.y0(function (_ref5) {
|
|
87
|
+
(0, _objectDestructuringEmpty2["default"])(_ref5);
|
|
88
|
+
return yScaler(0);
|
|
89
|
+
}).defined(defined);
|
|
78
90
|
curve && areaGen.curve(_d3v.curveCatmullRom.alpha(tension));
|
|
79
91
|
curve && areaGen.curve(_d3v.curveMonotoneX);
|
|
80
92
|
return areaGen;
|
|
@@ -100,34 +112,34 @@ var Area = function Area(_ref2) {
|
|
|
100
112
|
})));
|
|
101
113
|
};
|
|
102
114
|
|
|
103
|
-
var _default = /*#__PURE__*/(0, _react.memo)(function (
|
|
104
|
-
var type =
|
|
105
|
-
|
|
106
|
-
lineType =
|
|
107
|
-
lineWidth =
|
|
108
|
-
curve =
|
|
109
|
-
tension =
|
|
110
|
-
connectNulls =
|
|
111
|
-
lighter =
|
|
112
|
-
|
|
113
|
-
lineId =
|
|
114
|
-
stroke =
|
|
115
|
-
area =
|
|
116
|
-
data =
|
|
117
|
-
|
|
118
|
-
xScaler =
|
|
119
|
-
direction =
|
|
120
|
-
yScaler =
|
|
115
|
+
var _default = /*#__PURE__*/(0, _react.memo)(function (_ref6) {
|
|
116
|
+
var type = _ref6.type,
|
|
117
|
+
_ref6$config$line = _ref6.config.line,
|
|
118
|
+
lineType = _ref6$config$line.type,
|
|
119
|
+
lineWidth = _ref6$config$line.lineWidth,
|
|
120
|
+
curve = _ref6$config$line.curve,
|
|
121
|
+
tension = _ref6$config$line.tension,
|
|
122
|
+
connectNulls = _ref6$config$line.connectNulls,
|
|
123
|
+
lighter = _ref6$config$line.lighter,
|
|
124
|
+
_ref6$line = _ref6.line,
|
|
125
|
+
lineId = _ref6$line.id,
|
|
126
|
+
stroke = _ref6$line.stroke,
|
|
127
|
+
area = _ref6.area,
|
|
128
|
+
data = _ref6.data,
|
|
129
|
+
_ref6$xAxis = _ref6.xAxis,
|
|
130
|
+
xScaler = _ref6$xAxis.scaler,
|
|
131
|
+
direction = _ref6$xAxis.direction,
|
|
132
|
+
yScaler = _ref6.yAxis.scaler;
|
|
121
133
|
if (!data.length) return null;
|
|
122
134
|
var ticks = xScaler.domain();
|
|
123
135
|
var sortData = (0, _react.useMemo)(function () {
|
|
124
|
-
var usefulData = data.filter(function (
|
|
125
|
-
var x =
|
|
136
|
+
var usefulData = data.filter(function (_ref7) {
|
|
137
|
+
var x = _ref7.data.x;
|
|
126
138
|
return ticks.indexOf(x) > -1;
|
|
127
139
|
});
|
|
128
|
-
return usefulData.sort(function (
|
|
129
|
-
var a =
|
|
130
|
-
var b =
|
|
140
|
+
return usefulData.sort(function (_ref8, _ref9) {
|
|
141
|
+
var a = _ref8.data.x;
|
|
142
|
+
var b = _ref9.data.x;
|
|
131
143
|
return ticks.indexOf(a) - ticks.indexOf(b);
|
|
132
144
|
});
|
|
133
145
|
}, [data, ticks]);
|
|
@@ -138,17 +150,17 @@ var _default = /*#__PURE__*/(0, _react.memo)(function (_ref5) {
|
|
|
138
150
|
|
|
139
151
|
var lineGen = (0, _react.useMemo)(function () {
|
|
140
152
|
var isVertical = direction === 'vertical';
|
|
141
|
-
var lineGen = (isVertical ? (0, _d3v.line)().y(function (
|
|
142
|
-
var x =
|
|
153
|
+
var lineGen = (isVertical ? (0, _d3v.line)().y(function (_ref10) {
|
|
154
|
+
var x = _ref10.data.x;
|
|
143
155
|
return xScaler(x);
|
|
144
|
-
}).x(function (
|
|
145
|
-
var y =
|
|
156
|
+
}).x(function (_ref11) {
|
|
157
|
+
var y = _ref11.data.y;
|
|
146
158
|
return yScaler(y);
|
|
147
|
-
}) : (0, _d3v.line)().x(function (
|
|
148
|
-
var x =
|
|
159
|
+
}) : (0, _d3v.line)().x(function (_ref12) {
|
|
160
|
+
var x = _ref12.data.x;
|
|
149
161
|
return xScaler(x);
|
|
150
|
-
}).y(function (
|
|
151
|
-
var y =
|
|
162
|
+
}).y(function (_ref13) {
|
|
163
|
+
var y = _ref13.data.y;
|
|
152
164
|
return yScaler(y);
|
|
153
165
|
})).defined(defined);
|
|
154
166
|
curve && lineGen.curve(_d3v.curveCatmullRom.alpha(tension));
|