@easyv/charts 1.2.0 → 1.2.1
This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.
- package/.babelrc +8 -8
- package/.husky/commit-msg +3 -3
- package/CHANGELOG.md +18 -18
- package/commitlint.config.js +1 -1
- package/lib/components/AnimateData.js +36 -36
- package/lib/components/Axis.js +329 -329
- package/lib/components/Background.js +2 -2
- package/lib/components/Band.js +173 -173
- package/lib/components/Brush.js +201 -201
- package/lib/components/Carousel.js +164 -164
- package/lib/components/Chart.js +111 -111
- package/lib/components/ChartContainer.js +58 -58
- package/lib/components/ConicalGradient.js +264 -264
- package/lib/components/ExtentData.js +45 -45
- package/lib/components/FilterData.js +53 -53
- package/lib/components/Indicator.js +2 -2
- package/lib/components/Label.js +278 -278
- package/lib/components/Legend.js +154 -154
- package/lib/components/Lighter.js +179 -179
- package/lib/components/Line.js +181 -181
- package/lib/components/LinearGradient.js +2 -2
- package/lib/components/Mapping.js +127 -127
- package/lib/components/PieChart.js +1061 -1061
- package/lib/components/StackData.js +45 -45
- package/lib/components/StereoBar.js +336 -336
- package/lib/components/Tooltip.js +155 -155
- package/lib/components/index.js +194 -194
- 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 +91 -91
- package/lib/hooks/index.js +62 -62
- package/lib/hooks/useAnimateData.js +88 -88
- package/lib/hooks/useAxes.js +135 -135
- package/lib/hooks/useCarouselAxisX.js +184 -184
- package/lib/hooks/useExtentData.js +128 -128
- package/lib/hooks/useFilterData.js +112 -112
- package/lib/hooks/useStackData.js +134 -134
- package/lib/hooks/useTooltip.js +10 -10
- package/lib/index.js +84 -84
- package/lib/utils/index.js +832 -832
- package/package.json +51 -51
- 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/Brush.js +159 -159
- package/src/components/Carousel.tsx +144 -144
- 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 +144 -144
- package/src/components/LinearGradient.js +29 -29
- package/src/components/Mapping.js +71 -71
- package/src/components/Marquee.js +74 -0
- package/src/components/PieChart.js +1097 -1097
- package/src/components/StackData.js +20 -20
- package/src/components/StereoBar.tsx +310 -310
- package/src/components/Tooltip.js +169 -169
- package/src/components/index.js +51 -51
- 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 +696 -696
- package/tsconfig.json +22 -22
package/lib/hooks/useAxes.js
CHANGED
|
@@ -1,136 +1,136 @@
|
|
|
1
|
-
"use strict";
|
|
2
|
-
|
|
3
|
-
var _interopRequireDefault = require("@babel/runtime/helpers/interopRequireDefault");
|
|
4
|
-
|
|
5
|
-
Object.defineProperty(exports, "__esModule", {
|
|
6
|
-
value: true
|
|
7
|
-
});
|
|
8
|
-
exports["default"] = void 0;
|
|
9
|
-
|
|
10
|
-
var _defineProperty2 = _interopRequireDefault(require("@babel/runtime/helpers/defineProperty"));
|
|
11
|
-
|
|
12
|
-
var _react = require("react");
|
|
13
|
-
|
|
14
|
-
var _d3Scale = require("d3-scale");
|
|
15
|
-
|
|
16
|
-
var _utils = require("../utils");
|
|
17
|
-
|
|
18
|
-
var _utils2 = require("@easyv/utils/lib/common/utils");
|
|
19
|
-
|
|
20
|
-
function ownKeys(object, enumerableOnly) { var keys = Object.keys(object); if (Object.getOwnPropertySymbols) { var symbols = Object.getOwnPropertySymbols(object); if (enumerableOnly) symbols = symbols.filter(function (sym) { return Object.getOwnPropertyDescriptor(object, sym).enumerable; }); keys.push.apply(keys, symbols); } return keys; }
|
|
21
|
-
|
|
22
|
-
function _objectSpread(target) { for (var i = 1; i < arguments.length; i++) { var source = arguments[i] != null ? arguments[i] : {}; if (i % 2) { ownKeys(Object(source), true).forEach(function (key) { (0, _defineProperty2["default"])(target, key, source[key]); }); } else if (Object.getOwnPropertyDescriptors) { Object.defineProperties(target, Object.getOwnPropertyDescriptors(source)); } else { ownKeys(Object(source)).forEach(function (key) { Object.defineProperty(target, key, Object.getOwnPropertyDescriptor(source, key)); }); } } return target; }
|
|
23
|
-
|
|
24
|
-
var scales = {
|
|
25
|
-
linear: _d3Scale.scaleLinear,
|
|
26
|
-
log: _d3Scale.scaleLog,
|
|
27
|
-
time: _d3Scale.scaleTime,
|
|
28
|
-
utc: _d3Scale.scaleUtc,
|
|
29
|
-
ordinal: _utils.band
|
|
30
|
-
};
|
|
31
|
-
/**
|
|
32
|
-
* x/y/z轴
|
|
33
|
-
* @param {Array} axes 轴列表数组
|
|
34
|
-
* @param {Object} context 其中需要包括
|
|
35
|
-
* @returns {Map} 返回所有轴
|
|
36
|
-
*/
|
|
37
|
-
|
|
38
|
-
var _default = function _default(_ref) {
|
|
39
|
-
var axes = _ref.axes,
|
|
40
|
-
_ref$context = _ref.context,
|
|
41
|
-
width = _ref$context.width,
|
|
42
|
-
height = _ref$context.height;
|
|
43
|
-
|
|
44
|
-
var _axes = (0, _react.useMemo)(function () {
|
|
45
|
-
var tmp = new Map();
|
|
46
|
-
var xAxisPositions = [];
|
|
47
|
-
axes.forEach(function (item) {
|
|
48
|
-
var _item$config$label$sh = item.config.label.showLast,
|
|
49
|
-
showLast = _item$config$label$sh === void 0 ? false : _item$config$label$sh,
|
|
50
|
-
type = item.type,
|
|
51
|
-
orientation = item.orientation,
|
|
52
|
-
ticks = item.ticks,
|
|
53
|
-
_item$tickCount = item.tickCount,
|
|
54
|
-
tickCount = _item$tickCount === void 0 ? 1 : _item$tickCount,
|
|
55
|
-
_item$step = item.step,
|
|
56
|
-
step = _item$step === void 0 ? 1 : _item$step,
|
|
57
|
-
domain = item.domain,
|
|
58
|
-
axisType = item.axisType,
|
|
59
|
-
_item$paddingOuter = item.paddingOuter,
|
|
60
|
-
paddingOuter = _item$paddingOuter === void 0 ? 0 : _item$paddingOuter,
|
|
61
|
-
auto = item.auto,
|
|
62
|
-
mode = item.mode,
|
|
63
|
-
carousel = item.carousel,
|
|
64
|
-
config = item.config;
|
|
65
|
-
var direction = orientation === 'top' || orientation === 'bottom' ? 'horizontal' : orientation === 'left' || orientation === 'right' ? 'vertical' : '';
|
|
66
|
-
var length = direction === 'horizontal' ? width : direction === 'vertical' ? height : 0;
|
|
67
|
-
|
|
68
|
-
var _paddingOuter = paddingOuter * length;
|
|
69
|
-
|
|
70
|
-
var start = _paddingOuter / 2;
|
|
71
|
-
var end = length - start;
|
|
72
|
-
var range = direction === 'horizontal' ? [start, end] : direction === 'vertical' ? [end, start] : [0, 0];
|
|
73
|
-
var scaler = scales[type]().domain(domain).range(range);
|
|
74
|
-
scaler.type = type;
|
|
75
|
-
if (type !== 'ordinal') scaler.nice().clamp(true);
|
|
76
|
-
var allTicks = ticks ? ticks : scaler.ticks ? scaler.ticks(tickCount) : scaler.domain();
|
|
77
|
-
var _ticks = allTicks;
|
|
78
|
-
|
|
79
|
-
if (type === 'ordinal') {
|
|
80
|
-
if (carousel === false) {
|
|
81
|
-
_ticks = (0, _utils.getTicksOfAxis)(_ticks, +tickCount, showLast);
|
|
82
|
-
}
|
|
83
|
-
} else {
|
|
84
|
-
if (auto === false) {
|
|
85
|
-
switch (mode) {
|
|
86
|
-
case 'count':
|
|
87
|
-
_ticks = (0, _utils2.getYTicks)(_ticks[_ticks.length - 1], _ticks[0], +tickCount);
|
|
88
|
-
break;
|
|
89
|
-
|
|
90
|
-
case 'step':
|
|
91
|
-
_ticks = (0, _utils2.getYTicksByStep)(_ticks[_ticks.length - 1], _ticks[0], +step);
|
|
92
|
-
break;
|
|
93
|
-
}
|
|
94
|
-
}
|
|
95
|
-
}
|
|
96
|
-
|
|
97
|
-
var lengthWithoutPaddingOuter = length - _paddingOuter;
|
|
98
|
-
|
|
99
|
-
if (type == 'linear' && config.on) {
|
|
100
|
-
var zeroPosition = scaler(0);
|
|
101
|
-
|
|
102
|
-
if (zeroPosition !== range[0]) {
|
|
103
|
-
if (direction === 'horizontal') {
|
|
104
|
-
xAxisPositions.push({
|
|
105
|
-
x: zeroPosition,
|
|
106
|
-
y: 0
|
|
107
|
-
});
|
|
108
|
-
} else if (direction === 'vertical') {
|
|
109
|
-
xAxisPositions.push({
|
|
110
|
-
x: 0,
|
|
111
|
-
y: zeroPosition
|
|
112
|
-
});
|
|
113
|
-
}
|
|
114
|
-
}
|
|
115
|
-
}
|
|
116
|
-
|
|
117
|
-
tmp.set(axisType, _objectSpread(_objectSpread({}, item), {}, {
|
|
118
|
-
scaler: scaler,
|
|
119
|
-
length: length,
|
|
120
|
-
direction: direction,
|
|
121
|
-
start: start,
|
|
122
|
-
end: end,
|
|
123
|
-
lengthWithoutPaddingOuter: lengthWithoutPaddingOuter,
|
|
124
|
-
step: lengthWithoutPaddingOuter / allTicks.length,
|
|
125
|
-
allTicks: allTicks,
|
|
126
|
-
ticks: _ticks
|
|
127
|
-
}));
|
|
128
|
-
});
|
|
129
|
-
tmp.get('x') && (tmp.get('x').positions = xAxisPositions);
|
|
130
|
-
return tmp;
|
|
131
|
-
}, [axes]);
|
|
132
|
-
|
|
133
|
-
return _axes;
|
|
134
|
-
};
|
|
135
|
-
|
|
1
|
+
"use strict";
|
|
2
|
+
|
|
3
|
+
var _interopRequireDefault = require("@babel/runtime/helpers/interopRequireDefault");
|
|
4
|
+
|
|
5
|
+
Object.defineProperty(exports, "__esModule", {
|
|
6
|
+
value: true
|
|
7
|
+
});
|
|
8
|
+
exports["default"] = void 0;
|
|
9
|
+
|
|
10
|
+
var _defineProperty2 = _interopRequireDefault(require("@babel/runtime/helpers/defineProperty"));
|
|
11
|
+
|
|
12
|
+
var _react = require("react");
|
|
13
|
+
|
|
14
|
+
var _d3Scale = require("d3-scale");
|
|
15
|
+
|
|
16
|
+
var _utils = require("../utils");
|
|
17
|
+
|
|
18
|
+
var _utils2 = require("@easyv/utils/lib/common/utils");
|
|
19
|
+
|
|
20
|
+
function ownKeys(object, enumerableOnly) { var keys = Object.keys(object); if (Object.getOwnPropertySymbols) { var symbols = Object.getOwnPropertySymbols(object); if (enumerableOnly) symbols = symbols.filter(function (sym) { return Object.getOwnPropertyDescriptor(object, sym).enumerable; }); keys.push.apply(keys, symbols); } return keys; }
|
|
21
|
+
|
|
22
|
+
function _objectSpread(target) { for (var i = 1; i < arguments.length; i++) { var source = arguments[i] != null ? arguments[i] : {}; if (i % 2) { ownKeys(Object(source), true).forEach(function (key) { (0, _defineProperty2["default"])(target, key, source[key]); }); } else if (Object.getOwnPropertyDescriptors) { Object.defineProperties(target, Object.getOwnPropertyDescriptors(source)); } else { ownKeys(Object(source)).forEach(function (key) { Object.defineProperty(target, key, Object.getOwnPropertyDescriptor(source, key)); }); } } return target; }
|
|
23
|
+
|
|
24
|
+
var scales = {
|
|
25
|
+
linear: _d3Scale.scaleLinear,
|
|
26
|
+
log: _d3Scale.scaleLog,
|
|
27
|
+
time: _d3Scale.scaleTime,
|
|
28
|
+
utc: _d3Scale.scaleUtc,
|
|
29
|
+
ordinal: _utils.band
|
|
30
|
+
};
|
|
31
|
+
/**
|
|
32
|
+
* x/y/z轴
|
|
33
|
+
* @param {Array} axes 轴列表数组
|
|
34
|
+
* @param {Object} context 其中需要包括
|
|
35
|
+
* @returns {Map} 返回所有轴
|
|
36
|
+
*/
|
|
37
|
+
|
|
38
|
+
var _default = function _default(_ref) {
|
|
39
|
+
var axes = _ref.axes,
|
|
40
|
+
_ref$context = _ref.context,
|
|
41
|
+
width = _ref$context.width,
|
|
42
|
+
height = _ref$context.height;
|
|
43
|
+
|
|
44
|
+
var _axes = (0, _react.useMemo)(function () {
|
|
45
|
+
var tmp = new Map();
|
|
46
|
+
var xAxisPositions = [];
|
|
47
|
+
axes.forEach(function (item) {
|
|
48
|
+
var _item$config$label$sh = item.config.label.showLast,
|
|
49
|
+
showLast = _item$config$label$sh === void 0 ? false : _item$config$label$sh,
|
|
50
|
+
type = item.type,
|
|
51
|
+
orientation = item.orientation,
|
|
52
|
+
ticks = item.ticks,
|
|
53
|
+
_item$tickCount = item.tickCount,
|
|
54
|
+
tickCount = _item$tickCount === void 0 ? 1 : _item$tickCount,
|
|
55
|
+
_item$step = item.step,
|
|
56
|
+
step = _item$step === void 0 ? 1 : _item$step,
|
|
57
|
+
domain = item.domain,
|
|
58
|
+
axisType = item.axisType,
|
|
59
|
+
_item$paddingOuter = item.paddingOuter,
|
|
60
|
+
paddingOuter = _item$paddingOuter === void 0 ? 0 : _item$paddingOuter,
|
|
61
|
+
auto = item.auto,
|
|
62
|
+
mode = item.mode,
|
|
63
|
+
carousel = item.carousel,
|
|
64
|
+
config = item.config;
|
|
65
|
+
var direction = orientation === 'top' || orientation === 'bottom' ? 'horizontal' : orientation === 'left' || orientation === 'right' ? 'vertical' : '';
|
|
66
|
+
var length = direction === 'horizontal' ? width : direction === 'vertical' ? height : 0;
|
|
67
|
+
|
|
68
|
+
var _paddingOuter = paddingOuter * length;
|
|
69
|
+
|
|
70
|
+
var start = _paddingOuter / 2;
|
|
71
|
+
var end = length - start;
|
|
72
|
+
var range = direction === 'horizontal' ? [start, end] : direction === 'vertical' ? [end, start] : [0, 0];
|
|
73
|
+
var scaler = scales[type]().domain(domain).range(range);
|
|
74
|
+
scaler.type = type;
|
|
75
|
+
if (type !== 'ordinal') scaler.nice().clamp(true);
|
|
76
|
+
var allTicks = ticks ? ticks : scaler.ticks ? scaler.ticks(tickCount) : scaler.domain();
|
|
77
|
+
var _ticks = allTicks;
|
|
78
|
+
|
|
79
|
+
if (type === 'ordinal') {
|
|
80
|
+
if (carousel === false) {
|
|
81
|
+
_ticks = (0, _utils.getTicksOfAxis)(_ticks, +tickCount, showLast);
|
|
82
|
+
}
|
|
83
|
+
} else {
|
|
84
|
+
if (auto === false) {
|
|
85
|
+
switch (mode) {
|
|
86
|
+
case 'count':
|
|
87
|
+
_ticks = (0, _utils2.getYTicks)(_ticks[_ticks.length - 1], _ticks[0], +tickCount);
|
|
88
|
+
break;
|
|
89
|
+
|
|
90
|
+
case 'step':
|
|
91
|
+
_ticks = (0, _utils2.getYTicksByStep)(_ticks[_ticks.length - 1], _ticks[0], +step);
|
|
92
|
+
break;
|
|
93
|
+
}
|
|
94
|
+
}
|
|
95
|
+
}
|
|
96
|
+
|
|
97
|
+
var lengthWithoutPaddingOuter = length - _paddingOuter;
|
|
98
|
+
|
|
99
|
+
if (type == 'linear' && config.on) {
|
|
100
|
+
var zeroPosition = scaler(0);
|
|
101
|
+
|
|
102
|
+
if (zeroPosition !== range[0]) {
|
|
103
|
+
if (direction === 'horizontal') {
|
|
104
|
+
xAxisPositions.push({
|
|
105
|
+
x: zeroPosition,
|
|
106
|
+
y: 0
|
|
107
|
+
});
|
|
108
|
+
} else if (direction === 'vertical') {
|
|
109
|
+
xAxisPositions.push({
|
|
110
|
+
x: 0,
|
|
111
|
+
y: zeroPosition
|
|
112
|
+
});
|
|
113
|
+
}
|
|
114
|
+
}
|
|
115
|
+
}
|
|
116
|
+
|
|
117
|
+
tmp.set(axisType, _objectSpread(_objectSpread({}, item), {}, {
|
|
118
|
+
scaler: scaler,
|
|
119
|
+
length: length,
|
|
120
|
+
direction: direction,
|
|
121
|
+
start: start,
|
|
122
|
+
end: end,
|
|
123
|
+
lengthWithoutPaddingOuter: lengthWithoutPaddingOuter,
|
|
124
|
+
step: lengthWithoutPaddingOuter / allTicks.length,
|
|
125
|
+
allTicks: allTicks,
|
|
126
|
+
ticks: _ticks
|
|
127
|
+
}));
|
|
128
|
+
});
|
|
129
|
+
tmp.get('x') && (tmp.get('x').positions = xAxisPositions);
|
|
130
|
+
return tmp;
|
|
131
|
+
}, [axes]);
|
|
132
|
+
|
|
133
|
+
return _axes;
|
|
134
|
+
};
|
|
135
|
+
|
|
136
136
|
exports["default"] = _default;
|
|
@@ -1,185 +1,185 @@
|
|
|
1
|
-
"use strict";
|
|
2
|
-
|
|
3
|
-
var _interopRequireDefault = require("@babel/runtime/helpers/interopRequireDefault");
|
|
4
|
-
|
|
5
|
-
Object.defineProperty(exports, "__esModule", {
|
|
6
|
-
value: true
|
|
7
|
-
});
|
|
8
|
-
exports["default"] = void 0;
|
|
9
|
-
|
|
10
|
-
var _defineProperty2 = _interopRequireDefault(require("@babel/runtime/helpers/defineProperty"));
|
|
11
|
-
|
|
12
|
-
var _toConsumableArray2 = _interopRequireDefault(require("@babel/runtime/helpers/toConsumableArray"));
|
|
13
|
-
|
|
14
|
-
var _slicedToArray2 = _interopRequireDefault(require("@babel/runtime/helpers/slicedToArray"));
|
|
15
|
-
|
|
16
|
-
var _react = require("react");
|
|
17
|
-
|
|
18
|
-
var _popmotion = require("popmotion");
|
|
19
|
-
|
|
20
|
-
function ownKeys(object, enumerableOnly) { var keys = Object.keys(object); if (Object.getOwnPropertySymbols) { var symbols = Object.getOwnPropertySymbols(object); if (enumerableOnly) symbols = symbols.filter(function (sym) { return Object.getOwnPropertyDescriptor(object, sym).enumerable; }); keys.push.apply(keys, symbols); } return keys; }
|
|
21
|
-
|
|
22
|
-
function _objectSpread(target) { for (var i = 1; i < arguments.length; i++) { var source = arguments[i] != null ? arguments[i] : {}; if (i % 2) { ownKeys(Object(source), true).forEach(function (key) { (0, _defineProperty2["default"])(target, key, source[key]); }); } else if (Object.getOwnPropertyDescriptors) { Object.defineProperties(target, Object.getOwnPropertyDescriptors(source)); } else { ownKeys(Object(source)).forEach(function (key) { Object.defineProperty(target, key, Object.getOwnPropertyDescriptor(source, key)); }); } } return target; }
|
|
23
|
-
|
|
24
|
-
var initialState = {
|
|
25
|
-
currentIndex: null,
|
|
26
|
-
flag: false
|
|
27
|
-
};
|
|
28
|
-
/**
|
|
29
|
-
* x轴滚动逻辑
|
|
30
|
-
* @param {Object} axis x轴配置项
|
|
31
|
-
* @param {Object} config x轴轮播动画的配置项
|
|
32
|
-
* @returns {Map} 返回经过改变后的x轴,主要是ticks和scaler的range发生了改变
|
|
33
|
-
*/
|
|
34
|
-
|
|
35
|
-
var _default = function _default(axis, config) {
|
|
36
|
-
var show = config.show,
|
|
37
|
-
interval = config.interval,
|
|
38
|
-
duration = config.duration;
|
|
39
|
-
var time = duration + interval;
|
|
40
|
-
var tickCount = axis.tickCount,
|
|
41
|
-
allTicks = axis.allTicks,
|
|
42
|
-
scaler = axis.scaler,
|
|
43
|
-
start = axis.start,
|
|
44
|
-
end = axis.end,
|
|
45
|
-
step = axis.step,
|
|
46
|
-
ticks = axis.ticks,
|
|
47
|
-
lengthWithoutPaddingOuter = axis.lengthWithoutPaddingOuter;
|
|
48
|
-
var tickLength = ticks.length;
|
|
49
|
-
|
|
50
|
-
var _useState = (0, _react.useState)({
|
|
51
|
-
scaler: scaler,
|
|
52
|
-
step: step,
|
|
53
|
-
ticks: ticks
|
|
54
|
-
}),
|
|
55
|
-
_useState2 = (0, _slicedToArray2["default"])(_useState, 2),
|
|
56
|
-
state = _useState2[0],
|
|
57
|
-
setState = _useState2[1];
|
|
58
|
-
|
|
59
|
-
var _useState3 = (0, _react.useState)(initialState),
|
|
60
|
-
_useState4 = (0, _slicedToArray2["default"])(_useState3, 2),
|
|
61
|
-
status = _useState4[0],
|
|
62
|
-
setStatus = _useState4[1];
|
|
63
|
-
|
|
64
|
-
(0, _react.useEffect)(function () {
|
|
65
|
-
var handler;
|
|
66
|
-
|
|
67
|
-
if (show && time && tickLength > tickCount) {
|
|
68
|
-
setStatus({
|
|
69
|
-
currentIndex: 0,
|
|
70
|
-
flag: true
|
|
71
|
-
});
|
|
72
|
-
handler = setInterval(function () {
|
|
73
|
-
setStatus(function (_ref) {
|
|
74
|
-
var currentIndex = _ref.currentIndex;
|
|
75
|
-
var tmp = +currentIndex + 1;
|
|
76
|
-
return {
|
|
77
|
-
currentIndex: tmp >= tickLength ? 0 : tmp,
|
|
78
|
-
flag: false
|
|
79
|
-
};
|
|
80
|
-
});
|
|
81
|
-
}, time * 1000);
|
|
82
|
-
} else {
|
|
83
|
-
setStatus(initialState);
|
|
84
|
-
}
|
|
85
|
-
|
|
86
|
-
return function () {
|
|
87
|
-
handler && clearInterval(handler);
|
|
88
|
-
};
|
|
89
|
-
}, [show, time, tickCount, tickLength]);
|
|
90
|
-
(0, _react.useEffect)(function () {
|
|
91
|
-
var animation;
|
|
92
|
-
var currentIndex = status.currentIndex,
|
|
93
|
-
flag = status.flag;
|
|
94
|
-
|
|
95
|
-
if (currentIndex !== null) {
|
|
96
|
-
var _step = lengthWithoutPaddingOuter / tickCount;
|
|
97
|
-
|
|
98
|
-
if (flag) {
|
|
99
|
-
var _ticks = allTicks.slice(currentIndex, tickCount);
|
|
100
|
-
|
|
101
|
-
setState({
|
|
102
|
-
step: _step,
|
|
103
|
-
ticks: _ticks,
|
|
104
|
-
scaler: scaler.copy().domain(_ticks).range([start, end])
|
|
105
|
-
});
|
|
106
|
-
} else {
|
|
107
|
-
animation = (0, _popmotion.animate)({
|
|
108
|
-
from: 0,
|
|
109
|
-
to: -1,
|
|
110
|
-
duration: duration * 1000,
|
|
111
|
-
ease: _popmotion.linear,
|
|
112
|
-
onPlay: function onPlay() {
|
|
113
|
-
setState(function (axis) {
|
|
114
|
-
var ticks = axis.ticks,
|
|
115
|
-
scaler = axis.scaler;
|
|
116
|
-
|
|
117
|
-
var _ticks2 = (0, _slicedToArray2["default"])(ticks, 1),
|
|
118
|
-
tick = _ticks2[0];
|
|
119
|
-
|
|
120
|
-
var _ticks = [tick].concat((0, _toConsumableArray2["default"])(getTicks(allTicks, currentIndex, tickCount)));
|
|
121
|
-
|
|
122
|
-
return _objectSpread(_objectSpread({}, axis), {}, {
|
|
123
|
-
ticks: _ticks,
|
|
124
|
-
scaler: scaler.copy().range([start, end + _step]).domain(_ticks)
|
|
125
|
-
});
|
|
126
|
-
});
|
|
127
|
-
},
|
|
128
|
-
onUpdate: function onUpdate(v) {
|
|
129
|
-
setState(function (axis) {
|
|
130
|
-
var scaler = axis.scaler,
|
|
131
|
-
step = axis.step;
|
|
132
|
-
return _objectSpread(_objectSpread({}, axis), {}, {
|
|
133
|
-
scaler: scaler.copy().range([start + step * v, end + step + step * v])
|
|
134
|
-
});
|
|
135
|
-
});
|
|
136
|
-
},
|
|
137
|
-
onComplete: function onComplete() {
|
|
138
|
-
setState(function (axis) {
|
|
139
|
-
var scaler = axis.scaler,
|
|
140
|
-
ticks = axis.ticks;
|
|
141
|
-
|
|
142
|
-
var _ticks = ticks.slice(1, ticks.length);
|
|
143
|
-
|
|
144
|
-
return _objectSpread(_objectSpread({}, axis), {}, {
|
|
145
|
-
ticks: _ticks,
|
|
146
|
-
scaler: scaler.copy().range([start, end]).domain(_ticks)
|
|
147
|
-
});
|
|
148
|
-
});
|
|
149
|
-
}
|
|
150
|
-
});
|
|
151
|
-
}
|
|
152
|
-
} else {
|
|
153
|
-
var _ticks3 = scaler.type == 'linear' ? scaler.domain() : allTicks;
|
|
154
|
-
|
|
155
|
-
setState({
|
|
156
|
-
step: step,
|
|
157
|
-
scaler: scaler.copy().domain(_ticks3).range([start, end]),
|
|
158
|
-
ticks: ticks
|
|
159
|
-
});
|
|
160
|
-
}
|
|
161
|
-
|
|
162
|
-
return function () {
|
|
163
|
-
animation && animation.stop();
|
|
164
|
-
};
|
|
165
|
-
}, [tickCount, allTicks, scaler, start, end, step, ticks, lengthWithoutPaddingOuter, status, duration]);
|
|
166
|
-
return _objectSpread(_objectSpread({}, axis), state);
|
|
167
|
-
};
|
|
168
|
-
|
|
169
|
-
exports["default"] = _default;
|
|
170
|
-
|
|
171
|
-
var getTicks = function getTicks(ticks, currentIndex, length) {
|
|
172
|
-
var _currentIndex = +currentIndex;
|
|
173
|
-
|
|
174
|
-
var ticksLength = ticks.length;
|
|
175
|
-
if (ticksLength <= length) return ticks;
|
|
176
|
-
var end = _currentIndex + length;
|
|
177
|
-
|
|
178
|
-
if (ticksLength < end) {
|
|
179
|
-
var prev = ticks.slice(_currentIndex, ticksLength);
|
|
180
|
-
var next = ticks.slice(0, end - ticksLength);
|
|
181
|
-
return [].concat((0, _toConsumableArray2["default"])(prev), (0, _toConsumableArray2["default"])(next));
|
|
182
|
-
}
|
|
183
|
-
|
|
184
|
-
return ticks.slice(_currentIndex, end);
|
|
1
|
+
"use strict";
|
|
2
|
+
|
|
3
|
+
var _interopRequireDefault = require("@babel/runtime/helpers/interopRequireDefault");
|
|
4
|
+
|
|
5
|
+
Object.defineProperty(exports, "__esModule", {
|
|
6
|
+
value: true
|
|
7
|
+
});
|
|
8
|
+
exports["default"] = void 0;
|
|
9
|
+
|
|
10
|
+
var _defineProperty2 = _interopRequireDefault(require("@babel/runtime/helpers/defineProperty"));
|
|
11
|
+
|
|
12
|
+
var _toConsumableArray2 = _interopRequireDefault(require("@babel/runtime/helpers/toConsumableArray"));
|
|
13
|
+
|
|
14
|
+
var _slicedToArray2 = _interopRequireDefault(require("@babel/runtime/helpers/slicedToArray"));
|
|
15
|
+
|
|
16
|
+
var _react = require("react");
|
|
17
|
+
|
|
18
|
+
var _popmotion = require("popmotion");
|
|
19
|
+
|
|
20
|
+
function ownKeys(object, enumerableOnly) { var keys = Object.keys(object); if (Object.getOwnPropertySymbols) { var symbols = Object.getOwnPropertySymbols(object); if (enumerableOnly) symbols = symbols.filter(function (sym) { return Object.getOwnPropertyDescriptor(object, sym).enumerable; }); keys.push.apply(keys, symbols); } return keys; }
|
|
21
|
+
|
|
22
|
+
function _objectSpread(target) { for (var i = 1; i < arguments.length; i++) { var source = arguments[i] != null ? arguments[i] : {}; if (i % 2) { ownKeys(Object(source), true).forEach(function (key) { (0, _defineProperty2["default"])(target, key, source[key]); }); } else if (Object.getOwnPropertyDescriptors) { Object.defineProperties(target, Object.getOwnPropertyDescriptors(source)); } else { ownKeys(Object(source)).forEach(function (key) { Object.defineProperty(target, key, Object.getOwnPropertyDescriptor(source, key)); }); } } return target; }
|
|
23
|
+
|
|
24
|
+
var initialState = {
|
|
25
|
+
currentIndex: null,
|
|
26
|
+
flag: false
|
|
27
|
+
};
|
|
28
|
+
/**
|
|
29
|
+
* x轴滚动逻辑
|
|
30
|
+
* @param {Object} axis x轴配置项
|
|
31
|
+
* @param {Object} config x轴轮播动画的配置项
|
|
32
|
+
* @returns {Map} 返回经过改变后的x轴,主要是ticks和scaler的range发生了改变
|
|
33
|
+
*/
|
|
34
|
+
|
|
35
|
+
var _default = function _default(axis, config) {
|
|
36
|
+
var show = config.show,
|
|
37
|
+
interval = config.interval,
|
|
38
|
+
duration = config.duration;
|
|
39
|
+
var time = duration + interval;
|
|
40
|
+
var tickCount = axis.tickCount,
|
|
41
|
+
allTicks = axis.allTicks,
|
|
42
|
+
scaler = axis.scaler,
|
|
43
|
+
start = axis.start,
|
|
44
|
+
end = axis.end,
|
|
45
|
+
step = axis.step,
|
|
46
|
+
ticks = axis.ticks,
|
|
47
|
+
lengthWithoutPaddingOuter = axis.lengthWithoutPaddingOuter;
|
|
48
|
+
var tickLength = ticks.length;
|
|
49
|
+
|
|
50
|
+
var _useState = (0, _react.useState)({
|
|
51
|
+
scaler: scaler,
|
|
52
|
+
step: step,
|
|
53
|
+
ticks: ticks
|
|
54
|
+
}),
|
|
55
|
+
_useState2 = (0, _slicedToArray2["default"])(_useState, 2),
|
|
56
|
+
state = _useState2[0],
|
|
57
|
+
setState = _useState2[1];
|
|
58
|
+
|
|
59
|
+
var _useState3 = (0, _react.useState)(initialState),
|
|
60
|
+
_useState4 = (0, _slicedToArray2["default"])(_useState3, 2),
|
|
61
|
+
status = _useState4[0],
|
|
62
|
+
setStatus = _useState4[1];
|
|
63
|
+
|
|
64
|
+
(0, _react.useEffect)(function () {
|
|
65
|
+
var handler;
|
|
66
|
+
|
|
67
|
+
if (show && time && tickLength > tickCount) {
|
|
68
|
+
setStatus({
|
|
69
|
+
currentIndex: 0,
|
|
70
|
+
flag: true
|
|
71
|
+
});
|
|
72
|
+
handler = setInterval(function () {
|
|
73
|
+
setStatus(function (_ref) {
|
|
74
|
+
var currentIndex = _ref.currentIndex;
|
|
75
|
+
var tmp = +currentIndex + 1;
|
|
76
|
+
return {
|
|
77
|
+
currentIndex: tmp >= tickLength ? 0 : tmp,
|
|
78
|
+
flag: false
|
|
79
|
+
};
|
|
80
|
+
});
|
|
81
|
+
}, time * 1000);
|
|
82
|
+
} else {
|
|
83
|
+
setStatus(initialState);
|
|
84
|
+
}
|
|
85
|
+
|
|
86
|
+
return function () {
|
|
87
|
+
handler && clearInterval(handler);
|
|
88
|
+
};
|
|
89
|
+
}, [show, time, tickCount, tickLength]);
|
|
90
|
+
(0, _react.useEffect)(function () {
|
|
91
|
+
var animation;
|
|
92
|
+
var currentIndex = status.currentIndex,
|
|
93
|
+
flag = status.flag;
|
|
94
|
+
|
|
95
|
+
if (currentIndex !== null) {
|
|
96
|
+
var _step = lengthWithoutPaddingOuter / tickCount;
|
|
97
|
+
|
|
98
|
+
if (flag) {
|
|
99
|
+
var _ticks = allTicks.slice(currentIndex, tickCount);
|
|
100
|
+
|
|
101
|
+
setState({
|
|
102
|
+
step: _step,
|
|
103
|
+
ticks: _ticks,
|
|
104
|
+
scaler: scaler.copy().domain(_ticks).range([start, end])
|
|
105
|
+
});
|
|
106
|
+
} else {
|
|
107
|
+
animation = (0, _popmotion.animate)({
|
|
108
|
+
from: 0,
|
|
109
|
+
to: -1,
|
|
110
|
+
duration: duration * 1000,
|
|
111
|
+
ease: _popmotion.linear,
|
|
112
|
+
onPlay: function onPlay() {
|
|
113
|
+
setState(function (axis) {
|
|
114
|
+
var ticks = axis.ticks,
|
|
115
|
+
scaler = axis.scaler;
|
|
116
|
+
|
|
117
|
+
var _ticks2 = (0, _slicedToArray2["default"])(ticks, 1),
|
|
118
|
+
tick = _ticks2[0];
|
|
119
|
+
|
|
120
|
+
var _ticks = [tick].concat((0, _toConsumableArray2["default"])(getTicks(allTicks, currentIndex, tickCount)));
|
|
121
|
+
|
|
122
|
+
return _objectSpread(_objectSpread({}, axis), {}, {
|
|
123
|
+
ticks: _ticks,
|
|
124
|
+
scaler: scaler.copy().range([start, end + _step]).domain(_ticks)
|
|
125
|
+
});
|
|
126
|
+
});
|
|
127
|
+
},
|
|
128
|
+
onUpdate: function onUpdate(v) {
|
|
129
|
+
setState(function (axis) {
|
|
130
|
+
var scaler = axis.scaler,
|
|
131
|
+
step = axis.step;
|
|
132
|
+
return _objectSpread(_objectSpread({}, axis), {}, {
|
|
133
|
+
scaler: scaler.copy().range([start + step * v, end + step + step * v])
|
|
134
|
+
});
|
|
135
|
+
});
|
|
136
|
+
},
|
|
137
|
+
onComplete: function onComplete() {
|
|
138
|
+
setState(function (axis) {
|
|
139
|
+
var scaler = axis.scaler,
|
|
140
|
+
ticks = axis.ticks;
|
|
141
|
+
|
|
142
|
+
var _ticks = ticks.slice(1, ticks.length);
|
|
143
|
+
|
|
144
|
+
return _objectSpread(_objectSpread({}, axis), {}, {
|
|
145
|
+
ticks: _ticks,
|
|
146
|
+
scaler: scaler.copy().range([start, end]).domain(_ticks)
|
|
147
|
+
});
|
|
148
|
+
});
|
|
149
|
+
}
|
|
150
|
+
});
|
|
151
|
+
}
|
|
152
|
+
} else {
|
|
153
|
+
var _ticks3 = scaler.type == 'linear' ? scaler.domain() : allTicks;
|
|
154
|
+
|
|
155
|
+
setState({
|
|
156
|
+
step: step,
|
|
157
|
+
scaler: scaler.copy().domain(_ticks3).range([start, end]),
|
|
158
|
+
ticks: ticks
|
|
159
|
+
});
|
|
160
|
+
}
|
|
161
|
+
|
|
162
|
+
return function () {
|
|
163
|
+
animation && animation.stop();
|
|
164
|
+
};
|
|
165
|
+
}, [tickCount, allTicks, scaler, start, end, step, ticks, lengthWithoutPaddingOuter, status, duration]);
|
|
166
|
+
return _objectSpread(_objectSpread({}, axis), state);
|
|
167
|
+
};
|
|
168
|
+
|
|
169
|
+
exports["default"] = _default;
|
|
170
|
+
|
|
171
|
+
var getTicks = function getTicks(ticks, currentIndex, length) {
|
|
172
|
+
var _currentIndex = +currentIndex;
|
|
173
|
+
|
|
174
|
+
var ticksLength = ticks.length;
|
|
175
|
+
if (ticksLength <= length) return ticks;
|
|
176
|
+
var end = _currentIndex + length;
|
|
177
|
+
|
|
178
|
+
if (ticksLength < end) {
|
|
179
|
+
var prev = ticks.slice(_currentIndex, ticksLength);
|
|
180
|
+
var next = ticks.slice(0, end - ticksLength);
|
|
181
|
+
return [].concat((0, _toConsumableArray2["default"])(prev), (0, _toConsumableArray2["default"])(next));
|
|
182
|
+
}
|
|
183
|
+
|
|
184
|
+
return ticks.slice(_currentIndex, end);
|
|
185
185
|
};
|