@easyv/charts 1.4.15 → 1.4.16
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/.husky/commit-msg +1 -1
- package/lib/components/AnimateData.js +8 -16
- package/lib/components/Axis.js +199 -191
- package/lib/components/Background.js +16 -24
- package/lib/components/Band.js +98 -91
- package/lib/components/BaseLine.js +39 -40
- package/lib/components/Brush.js +29 -46
- package/lib/components/Carousel.js +13 -40
- package/lib/components/CartesianChart.js +66 -86
- package/lib/components/Chart.js +23 -36
- package/lib/components/ChartContainer.js +18 -27
- package/lib/components/ConicalGradient.js +35 -68
- package/lib/components/ExtentData.js +9 -17
- package/lib/components/FilterData.js +16 -27
- package/lib/components/Indicator.js +6 -8
- package/lib/components/Label.js +120 -134
- package/lib/components/Legend.js +41 -66
- package/lib/components/Lighter.js +19 -48
- package/lib/components/Line.js +39 -59
- package/lib/components/LinearGradient.js +14 -20
- package/lib/components/Mapping.js +9 -34
- package/lib/components/Marquee.js +14 -30
- package/lib/components/PieChart.js +306 -400
- package/lib/components/StackData.js +8 -18
- package/lib/components/StereoBar.js +65 -105
- package/lib/components/TextOverflow.js +8 -21
- package/lib/components/Tooltip.js +41 -55
- package/lib/components/index.js +0 -27
- package/lib/context/index.js +0 -2
- package/lib/element/ConicGradient.js +29 -35
- package/lib/element/Line.js +9 -13
- package/lib/element/index.js +0 -2
- package/lib/formatter/index.js +0 -2
- package/lib/formatter/legend.js +30 -41
- package/lib/hooks/index.js +0 -8
- package/lib/hooks/useAnimateData.js +3 -16
- package/lib/hooks/useAxes.js +253 -114
- package/lib/hooks/useCarouselAxisX.js +26 -56
- package/lib/hooks/useExtentData.js +47 -44
- package/lib/hooks/useFilterData.js +8 -29
- package/lib/hooks/useStackData.js +7 -30
- package/lib/hooks/useTooltip.js +26 -43
- package/lib/index.js +0 -15
- package/lib/utils/index.js +95 -247
- package/package.json +55 -54
- package/src/components/Axis.tsx +246 -157
- package/src/components/Band.tsx +91 -56
- package/src/components/BaseLine.js +22 -5
- package/src/components/CartesianChart.js +1 -0
- package/src/components/Label.js +56 -46
- package/src/hooks/useAxes.js +336 -117
- package/src/hooks/useExtentData.js +37 -10
package/lib/hooks/useAxes.js
CHANGED
|
@@ -1,75 +1,54 @@
|
|
|
1
1
|
"use strict";
|
|
2
2
|
|
|
3
3
|
var _interopRequireDefault = require("@babel/runtime/helpers/interopRequireDefault");
|
|
4
|
-
|
|
5
4
|
Object.defineProperty(exports, "__esModule", {
|
|
6
5
|
value: true
|
|
7
6
|
});
|
|
8
7
|
exports["default"] = void 0;
|
|
9
|
-
|
|
10
8
|
var _defineProperty2 = _interopRequireDefault(require("@babel/runtime/helpers/defineProperty"));
|
|
11
|
-
|
|
12
9
|
var _react = require("react");
|
|
13
|
-
|
|
14
10
|
var _d3Scale = require("d3-scale");
|
|
15
|
-
|
|
16
11
|
var _utils = require("../utils");
|
|
17
|
-
|
|
18
12
|
var _utils2 = require("@easyv/utils/lib/common/utils");
|
|
19
|
-
|
|
20
13
|
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; }
|
|
21
|
-
|
|
22
14
|
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; }
|
|
23
|
-
|
|
24
15
|
var getCount = function getCount(num) {
|
|
25
16
|
var i = 0,
|
|
26
|
-
|
|
17
|
+
num_ = Math.abs(num);
|
|
27
18
|
if (num_ < 1) return i;
|
|
28
|
-
|
|
29
19
|
while (num_ > 10) {
|
|
30
20
|
i++;
|
|
31
21
|
num_ = Math.floor(num_ / 10);
|
|
32
22
|
}
|
|
33
|
-
|
|
34
23
|
return i;
|
|
35
24
|
};
|
|
36
|
-
|
|
37
25
|
var getNewDomain = function getNewDomain(domain, mode, step) {
|
|
38
26
|
var newDomain = [];
|
|
39
27
|
var min = domain[0],
|
|
40
|
-
|
|
28
|
+
max = domain[1];
|
|
41
29
|
var minCount = Math.pow(10, getCount(min)),
|
|
42
|
-
|
|
43
|
-
|
|
30
|
+
maxCount = Math.pow(10, getCount(max));
|
|
44
31
|
switch (mode) {
|
|
45
|
-
case
|
|
32
|
+
case "count":
|
|
46
33
|
newDomain[0] = Math.floor(domain[0] / minCount) * minCount;
|
|
47
34
|
newDomain[1] = Math.ceil(domain[1] / maxCount) * maxCount;
|
|
48
35
|
break;
|
|
49
|
-
|
|
50
|
-
case 'step':
|
|
36
|
+
case "step":
|
|
51
37
|
newDomain = [domain[0], domain[0]];
|
|
52
|
-
|
|
53
38
|
while (newDomain[1] < domain[1]) {
|
|
54
39
|
newDomain[1] += step;
|
|
55
40
|
}
|
|
56
|
-
|
|
57
41
|
}
|
|
58
|
-
|
|
59
42
|
return newDomain;
|
|
60
43
|
};
|
|
61
|
-
|
|
62
44
|
var getTickCount = function getTickCount(domain, count, decimal) {
|
|
63
45
|
var multiple = Math.pow(10, decimal);
|
|
64
46
|
var gap = domain[1] * multiple - domain[0] * multiple;
|
|
65
|
-
|
|
66
47
|
if (gap < count) {
|
|
67
48
|
return Math.max(2, 1 + gap);
|
|
68
49
|
}
|
|
69
|
-
|
|
70
50
|
return count;
|
|
71
51
|
};
|
|
72
|
-
|
|
73
52
|
var scales = {
|
|
74
53
|
linear: _d3Scale.scaleLinear,
|
|
75
54
|
log: _d3Scale.scaleLog,
|
|
@@ -77,121 +56,281 @@ var scales = {
|
|
|
77
56
|
utc: _d3Scale.scaleUtc,
|
|
78
57
|
ordinal: _utils.band
|
|
79
58
|
};
|
|
59
|
+
|
|
80
60
|
/**
|
|
81
61
|
* x/y/z轴
|
|
82
62
|
* @param {Array} axes 轴列表数组
|
|
83
63
|
* @param {Object} context 其中需要包括
|
|
84
64
|
* @returns {Map} 返回所有轴
|
|
85
65
|
*/
|
|
86
|
-
|
|
87
66
|
var _default = function _default(_ref) {
|
|
88
67
|
var axes = _ref.axes,
|
|
89
|
-
|
|
90
|
-
|
|
91
|
-
|
|
92
|
-
|
|
68
|
+
_ref$context = _ref.context,
|
|
69
|
+
width = _ref$context.width,
|
|
70
|
+
height = _ref$context.height;
|
|
93
71
|
var _axes = (0, _react.useMemo)(function () {
|
|
94
72
|
var tmp = new Map();
|
|
95
73
|
var xAxisPositions = [];
|
|
96
74
|
axes.forEach(function (item) {
|
|
97
75
|
var _item$config$label = item.config.label,
|
|
98
|
-
|
|
99
|
-
|
|
100
|
-
|
|
101
|
-
|
|
102
|
-
|
|
103
|
-
|
|
104
|
-
|
|
105
|
-
|
|
106
|
-
|
|
107
|
-
|
|
108
|
-
|
|
109
|
-
|
|
110
|
-
|
|
111
|
-
|
|
112
|
-
|
|
113
|
-
|
|
114
|
-
|
|
115
|
-
|
|
116
|
-
|
|
117
|
-
|
|
118
|
-
|
|
119
|
-
|
|
120
|
-
|
|
121
|
-
|
|
122
|
-
|
|
123
|
-
|
|
124
|
-
|
|
125
|
-
|
|
126
|
-
|
|
127
|
-
|
|
128
|
-
|
|
129
|
-
|
|
130
|
-
|
|
76
|
+
_item$config$label$sh = _item$config$label.showLast,
|
|
77
|
+
showLast = _item$config$label$sh === void 0 ? false : _item$config$label$sh,
|
|
78
|
+
_item$config$label$de = _item$config$label.decimal,
|
|
79
|
+
decimal = _item$config$label$de === void 0 ? 0 : _item$config$label$de,
|
|
80
|
+
type = item.type,
|
|
81
|
+
orientation = item.orientation,
|
|
82
|
+
ticks = item.ticks,
|
|
83
|
+
_item$tickCount = item.tickCount,
|
|
84
|
+
count = _item$tickCount === void 0 ? 1 : _item$tickCount,
|
|
85
|
+
_item$step = item.step,
|
|
86
|
+
step = _item$step === void 0 ? 1 : _item$step,
|
|
87
|
+
domain = item.domain,
|
|
88
|
+
axisType = item.axisType,
|
|
89
|
+
_item$paddingOuter = item.paddingOuter,
|
|
90
|
+
paddingOuter = _item$paddingOuter === void 0 ? 0 : _item$paddingOuter,
|
|
91
|
+
auto = item.auto,
|
|
92
|
+
mode = item.mode,
|
|
93
|
+
carousel = item.carousel,
|
|
94
|
+
config = item.config,
|
|
95
|
+
isClipAxis = item.isClipAxis,
|
|
96
|
+
bottomClipAxisCount = item.bottomClipAxisCount,
|
|
97
|
+
topClipAxisCount = item.topClipAxisCount,
|
|
98
|
+
bottomClipAxisStep = item.bottomClipAxisStep,
|
|
99
|
+
topClipAxisStep = item.topClipAxisStep,
|
|
100
|
+
clipValue = item.clipValue,
|
|
101
|
+
clipPosition = item.clipPosition,
|
|
102
|
+
clipDifferenceValue = item.clipDifferenceValue,
|
|
103
|
+
clipAxisMode = item.clipAxisMode;
|
|
104
|
+
//如果是断轴类型,输出一套完全不同的values
|
|
105
|
+
|
|
106
|
+
/**
|
|
107
|
+
* 获取轴的:朝向direction,起点位置start,终点位置end
|
|
108
|
+
* @param {*} orientation
|
|
109
|
+
* @param {*} width
|
|
110
|
+
* @param {*} height
|
|
111
|
+
* @param {*} paddingOuter
|
|
112
|
+
* @returns {start,end,direction}
|
|
113
|
+
*/
|
|
114
|
+
function getChartsConfig(orientation, width, height, paddingOuter) {
|
|
115
|
+
var direction = orientation === "top" || orientation === "bottom" ? "horizontal" : orientation === "left" || orientation === "right" ? "vertical" : "";
|
|
116
|
+
var length = direction === "horizontal" ? width : direction === "vertical" ? height : 0;
|
|
117
|
+
var _paddingOuter = paddingOuter * length;
|
|
118
|
+
var start = _paddingOuter / 2;
|
|
119
|
+
var end = length - start;
|
|
120
|
+
return {
|
|
121
|
+
start: start,
|
|
122
|
+
end: end,
|
|
123
|
+
direction: direction,
|
|
124
|
+
length: length,
|
|
125
|
+
_paddingOuter: _paddingOuter
|
|
126
|
+
};
|
|
131
127
|
}
|
|
132
128
|
|
|
133
|
-
|
|
134
|
-
|
|
135
|
-
|
|
129
|
+
/**
|
|
130
|
+
* 设置scaler
|
|
131
|
+
* @param {*} scales
|
|
132
|
+
* @param {*} type 轴类型
|
|
133
|
+
* @param {*} domain 数据的范围
|
|
134
|
+
* @param {*} range 屏幕坐标的范围
|
|
135
|
+
* @returns
|
|
136
|
+
*/
|
|
137
|
+
function setScaler(scales, type, domain, range) {
|
|
138
|
+
//比例将抽象数据的维度映射到可视表示形式。虽然最常用于将数据编码为位置,例如将时间和温度映射到散点图中的水平和垂直位置
|
|
139
|
+
var scaler = scales[type]().domain(domain).range(range);
|
|
140
|
+
scaler.type = type;
|
|
141
|
+
if (type !== "ordinal") scaler.clamp(true); //scaler.nice().clamp(true)
|
|
142
|
+
return scaler;
|
|
143
|
+
}
|
|
136
144
|
|
|
137
|
-
|
|
138
|
-
|
|
145
|
+
/**
|
|
146
|
+
* 获取所有标签数据
|
|
147
|
+
* @param {*} scaler
|
|
148
|
+
* @param {*} ticks 传入的ticks
|
|
149
|
+
* @param {*} tickCount
|
|
150
|
+
* @returns
|
|
151
|
+
*/
|
|
152
|
+
function getAllTicks(scaler, ticks, tickCount) {
|
|
153
|
+
return ticks ? ticks : scaler.ticks ? scaler.ticks(tickCount) : scaler.domain();
|
|
154
|
+
}
|
|
139
155
|
|
|
140
|
-
|
|
141
|
-
|
|
142
|
-
|
|
156
|
+
/**
|
|
157
|
+
* 计算非自动模式下的标签集合
|
|
158
|
+
* @param {*} allTicks
|
|
159
|
+
* @param {*} type
|
|
160
|
+
* @param {*} carousel
|
|
161
|
+
* @param {*} showLast
|
|
162
|
+
* @param {*} auto
|
|
163
|
+
* @param {*} mode
|
|
164
|
+
* @param {*} newDomain
|
|
165
|
+
* @param {*} tickCount
|
|
166
|
+
* @param {*} step
|
|
167
|
+
* @returns
|
|
168
|
+
*/
|
|
169
|
+
function getTicks(allTicks, type, carousel, showLast, auto, mode, newDomain, tickCount, step) {
|
|
170
|
+
var _ticks = allTicks;
|
|
171
|
+
if (type === "ordinal") {
|
|
172
|
+
if (carousel === false) {
|
|
173
|
+
_ticks = (0, _utils.getTicksOfAxis)(_ticks, +tickCount, showLast);
|
|
174
|
+
}
|
|
175
|
+
} else {
|
|
176
|
+
if (auto === false) {
|
|
177
|
+
switch (mode) {
|
|
178
|
+
case "count":
|
|
179
|
+
_ticks = (0, _utils2.getYTicks)(newDomain[1], newDomain[0], +tickCount);
|
|
180
|
+
break;
|
|
181
|
+
case "step":
|
|
182
|
+
_ticks = (0, _utils2.getYTicksByStep)(newDomain[1], newDomain[0], +step);
|
|
183
|
+
break;
|
|
184
|
+
}
|
|
185
|
+
}
|
|
143
186
|
}
|
|
187
|
+
return _ticks;
|
|
188
|
+
}
|
|
189
|
+
//断轴相关
|
|
190
|
+
var _isClipAxis = isClipAxis,
|
|
191
|
+
clipAxisDomain = [],
|
|
192
|
+
clipAxisCount = [],
|
|
193
|
+
clipAxisTickCount = [],
|
|
194
|
+
clipAxisStep = [];
|
|
195
|
+
var _count = count,
|
|
196
|
+
_step = step;
|
|
197
|
+
//计算topDomain,bottomDomain,当断轴值为设置不合理的时候,不开启断轴
|
|
198
|
+
if (isClipAxis && (clipValue > domain[1] || clipValue < domain[0])) {
|
|
199
|
+
_isClipAxis = false;
|
|
200
|
+
_count = topClipAxisCount;
|
|
201
|
+
_step = topClipAxisStep;
|
|
144
202
|
} else {
|
|
145
|
-
|
|
146
|
-
|
|
147
|
-
|
|
148
|
-
|
|
149
|
-
|
|
150
|
-
|
|
151
|
-
|
|
152
|
-
|
|
153
|
-
|
|
203
|
+
clipAxisDomain = [[clipValue, domain[1]], [domain[0], clipValue]];
|
|
204
|
+
clipAxisCount = [topClipAxisCount, bottomClipAxisCount];
|
|
205
|
+
clipAxisStep = [topClipAxisStep, bottomClipAxisStep];
|
|
206
|
+
}
|
|
207
|
+
if (_isClipAxis) {
|
|
208
|
+
var getClipAxisRange = function getClipAxisRange(start, end, clipPosition, clipMargin) {
|
|
209
|
+
var topRange = [(end - start) * (clipPosition / 100) - clipMargin / 2, start];
|
|
210
|
+
var bottomRange = [end, (end - start) * (clipPosition / 100) + clipMargin / 2];
|
|
211
|
+
return [topRange, bottomRange];
|
|
212
|
+
}; //计算range填入scaler参数
|
|
213
|
+
clipAxisDomain.forEach(function (domain, index) {
|
|
214
|
+
clipAxisTickCount.push(getTickCount(domain, clipAxisCount[index], decimal));
|
|
215
|
+
});
|
|
216
|
+
var _getChartsConfig = getChartsConfig(orientation, width, height, paddingOuter),
|
|
217
|
+
start = _getChartsConfig.start,
|
|
218
|
+
end = _getChartsConfig.end,
|
|
219
|
+
direction = _getChartsConfig.direction,
|
|
220
|
+
_paddingOuter = _getChartsConfig._paddingOuter,
|
|
221
|
+
length = _getChartsConfig.length;
|
|
222
|
+
var clipMargin = 10;
|
|
223
|
+
var clipAxisRange = getClipAxisRange(start, end, clipPosition, clipMargin);
|
|
224
|
+
var newClipAxisDomain = [];
|
|
225
|
+
//如果非自适应模式,计算新的domain,传入scaler,适配强制步长或者数量强制
|
|
226
|
+
if (!isNaN(domain[1]) && !auto) {
|
|
227
|
+
clipAxisDomain.forEach(function (domain, index) {
|
|
228
|
+
newClipAxisDomain.push(getNewDomain(domain, mode, clipAxisStep[index]));
|
|
229
|
+
});
|
|
230
|
+
} else {
|
|
231
|
+
//如果为刻度自适应,使用原先domain直接传入scaler,使用scaler.ticks来计算出标签集合
|
|
232
|
+
newClipAxisDomain = clipAxisDomain;
|
|
233
|
+
}
|
|
234
|
+
//设置scaler,scaler会将数值映射真实的坐标(svg坐标)
|
|
235
|
+
var clipAxisScaler = [];
|
|
236
|
+
newClipAxisDomain.forEach(function (domain, index) {
|
|
237
|
+
clipAxisScaler.push(setScaler(scales, type, domain, clipAxisRange[index]));
|
|
238
|
+
});
|
|
239
|
+
//clipAxisAllTicks作用是使用scaler.ticks方法,来计算标签集合
|
|
240
|
+
var clipAxisAllTicks = [];
|
|
241
|
+
clipAxisScaler.forEach(function (scaler, index) {
|
|
242
|
+
clipAxisAllTicks.push(getAllTicks(scaler, ticks, clipAxisTickCount[index]));
|
|
243
|
+
});
|
|
244
|
+
var clipAxisTicks = [];
|
|
245
|
+
clipAxisAllTicks.forEach(function (allTicks, index) {
|
|
246
|
+
clipAxisTicks.push(getTicks(allTicks, type, carousel, showLast, auto, mode, newClipAxisDomain[index], clipAxisTickCount[index], clipAxisStep[index]));
|
|
247
|
+
});
|
|
248
|
+
var lengthWithoutPaddingOuter = length - _paddingOuter;
|
|
249
|
+
tmp.set(axisType, _objectSpread(_objectSpread({}, item), {}, {
|
|
250
|
+
isClipAxis: _isClipAxis,
|
|
251
|
+
scaler: clipAxisScaler,
|
|
252
|
+
length: length,
|
|
253
|
+
direction: direction,
|
|
254
|
+
start: start,
|
|
255
|
+
end: end,
|
|
256
|
+
clipAxisRange: clipAxisRange,
|
|
257
|
+
lengthWithoutPaddingOuter: lengthWithoutPaddingOuter,
|
|
258
|
+
step: [lengthWithoutPaddingOuter / clipAxisAllTicks[0].length, lengthWithoutPaddingOuter / clipAxisAllTicks[1].length],
|
|
259
|
+
allTicks: clipAxisAllTicks,
|
|
260
|
+
ticks: clipAxisTicks,
|
|
261
|
+
clipValue: clipValue
|
|
262
|
+
}));
|
|
263
|
+
} else {
|
|
264
|
+
//计算真正需要的tickCount,如果domain区间太小,不能完全按照count来,需要减少count数
|
|
265
|
+
var tickCount = type == "ordinal" ? _count : getTickCount(domain, _count, decimal);
|
|
266
|
+
var _getChartsConfig2 = getChartsConfig(orientation, width, height, paddingOuter),
|
|
267
|
+
_start = _getChartsConfig2.start,
|
|
268
|
+
_end = _getChartsConfig2.end,
|
|
269
|
+
_direction = _getChartsConfig2.direction,
|
|
270
|
+
_paddingOuter2 = _getChartsConfig2._paddingOuter,
|
|
271
|
+
_length = _getChartsConfig2.length;
|
|
272
|
+
var range = _direction === "horizontal" ? [_start, _end] : _direction === "vertical" ? [_end, _start] : [0, 0];
|
|
273
|
+
var newDomain = domain;
|
|
274
|
+
if (type !== "ordinal" && !isNaN(domain[1]) && !auto) {
|
|
275
|
+
newDomain = getNewDomain(domain, mode, _step);
|
|
276
|
+
}
|
|
277
|
+
var scaler = scales[type]().domain(newDomain).range(range);
|
|
278
|
+
scaler.type = type;
|
|
279
|
+
if (type !== "ordinal") scaler.clamp(true); //scaler.nice().clamp(true)
|
|
280
|
+
var allTicks = ticks ? ticks : scaler.ticks ? scaler.ticks(tickCount) : scaler.domain();
|
|
281
|
+
var _ticks = allTicks;
|
|
282
|
+
//
|
|
283
|
+
if (type === "ordinal") {
|
|
284
|
+
if (carousel === false) {
|
|
285
|
+
_ticks = (0, _utils.getTicksOfAxis)(_ticks, +tickCount, showLast);
|
|
286
|
+
}
|
|
287
|
+
} else {
|
|
288
|
+
if (auto === false) {
|
|
289
|
+
switch (mode) {
|
|
290
|
+
case "count":
|
|
291
|
+
_ticks = (0, _utils2.getYTicks)(newDomain[1], newDomain[0], +tickCount);
|
|
292
|
+
break;
|
|
293
|
+
case "step":
|
|
294
|
+
_ticks = (0, _utils2.getYTicksByStep)(newDomain[1], newDomain[0], +_step);
|
|
295
|
+
break;
|
|
296
|
+
}
|
|
154
297
|
}
|
|
155
298
|
}
|
|
156
|
-
|
|
157
|
-
|
|
158
|
-
|
|
159
|
-
|
|
160
|
-
|
|
161
|
-
|
|
162
|
-
|
|
163
|
-
|
|
164
|
-
|
|
165
|
-
|
|
166
|
-
|
|
167
|
-
|
|
168
|
-
|
|
169
|
-
|
|
170
|
-
|
|
171
|
-
x: 0,
|
|
172
|
-
y: zeroPosition
|
|
173
|
-
});
|
|
299
|
+
var _lengthWithoutPaddingOuter = _length - _paddingOuter2;
|
|
300
|
+
if (type == "linear" && config.on) {
|
|
301
|
+
var zeroPosition = scaler(0);
|
|
302
|
+
if (zeroPosition !== range[0] && !isNaN(zeroPosition)) {
|
|
303
|
+
if (_direction === "horizontal") {
|
|
304
|
+
xAxisPositions.push({
|
|
305
|
+
x: zeroPosition,
|
|
306
|
+
y: 0
|
|
307
|
+
});
|
|
308
|
+
} else if (_direction === "vertical") {
|
|
309
|
+
xAxisPositions.push({
|
|
310
|
+
x: 0,
|
|
311
|
+
y: zeroPosition
|
|
312
|
+
});
|
|
313
|
+
}
|
|
174
314
|
}
|
|
175
315
|
}
|
|
316
|
+
tmp.set(axisType, _objectSpread(_objectSpread({}, item), {}, {
|
|
317
|
+
count: _count,
|
|
318
|
+
isClipAxis: _isClipAxis,
|
|
319
|
+
scaler: scaler,
|
|
320
|
+
length: _length,
|
|
321
|
+
direction: _direction,
|
|
322
|
+
start: _start,
|
|
323
|
+
end: _end,
|
|
324
|
+
lengthWithoutPaddingOuter: _lengthWithoutPaddingOuter,
|
|
325
|
+
step: _lengthWithoutPaddingOuter / allTicks.length,
|
|
326
|
+
allTicks: allTicks,
|
|
327
|
+
ticks: _ticks
|
|
328
|
+
}));
|
|
176
329
|
}
|
|
177
|
-
|
|
178
|
-
tmp.set(axisType, _objectSpread(_objectSpread({}, item), {}, {
|
|
179
|
-
scaler: scaler,
|
|
180
|
-
length: length,
|
|
181
|
-
direction: direction,
|
|
182
|
-
start: start,
|
|
183
|
-
end: end,
|
|
184
|
-
lengthWithoutPaddingOuter: lengthWithoutPaddingOuter,
|
|
185
|
-
step: lengthWithoutPaddingOuter / allTicks.length,
|
|
186
|
-
allTicks: allTicks,
|
|
187
|
-
ticks: _ticks
|
|
188
|
-
}));
|
|
189
330
|
});
|
|
190
|
-
tmp.get(
|
|
331
|
+
tmp.get("x") && (tmp.get("x").positions = xAxisPositions);
|
|
191
332
|
return tmp;
|
|
192
333
|
}, [axes]);
|
|
193
|
-
|
|
194
334
|
return _axes;
|
|
195
335
|
};
|
|
196
|
-
|
|
197
336
|
exports["default"] = _default;
|
|
@@ -1,68 +1,55 @@
|
|
|
1
1
|
"use strict";
|
|
2
2
|
|
|
3
3
|
var _interopRequireDefault = require("@babel/runtime/helpers/interopRequireDefault");
|
|
4
|
-
|
|
5
4
|
Object.defineProperty(exports, "__esModule", {
|
|
6
5
|
value: true
|
|
7
6
|
});
|
|
8
7
|
exports["default"] = void 0;
|
|
9
|
-
|
|
10
8
|
var _defineProperty2 = _interopRequireDefault(require("@babel/runtime/helpers/defineProperty"));
|
|
11
|
-
|
|
12
9
|
var _toConsumableArray2 = _interopRequireDefault(require("@babel/runtime/helpers/toConsumableArray"));
|
|
13
|
-
|
|
14
10
|
var _slicedToArray2 = _interopRequireDefault(require("@babel/runtime/helpers/slicedToArray"));
|
|
15
|
-
|
|
16
11
|
var _react = require("react");
|
|
17
|
-
|
|
18
12
|
var _popmotion = require("popmotion");
|
|
19
|
-
|
|
20
13
|
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; }
|
|
21
|
-
|
|
22
14
|
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; }
|
|
23
|
-
|
|
24
15
|
var initialState = {
|
|
25
16
|
currentIndex: null,
|
|
26
17
|
flag: false //表示是否为首次加载,true表示首次加载,不需要立刻执行动画,false表示可以执行轮播动画
|
|
27
|
-
|
|
28
18
|
};
|
|
19
|
+
|
|
29
20
|
/**
|
|
30
21
|
* x轴滚动逻辑
|
|
31
22
|
* @param {Object} axis x轴配置项
|
|
32
23
|
* @param {Object} config x轴轮播动画的配置项
|
|
33
24
|
* @returns {Map} 返回经过改变后的x轴,主要是ticks和scaler的range发生了改变
|
|
34
25
|
*/
|
|
35
|
-
|
|
36
26
|
var _default = function _default(axis, config, isHover) {
|
|
37
27
|
var show = config.show,
|
|
38
|
-
|
|
39
|
-
|
|
40
|
-
|
|
28
|
+
interval = config.interval,
|
|
29
|
+
duration = config.duration,
|
|
30
|
+
hover = config.hover;
|
|
41
31
|
var time = duration + interval;
|
|
42
32
|
var tickCount = axis.tickCount,
|
|
43
|
-
|
|
44
|
-
|
|
45
|
-
|
|
46
|
-
|
|
47
|
-
|
|
48
|
-
|
|
49
|
-
|
|
33
|
+
allTicks = axis.allTicks,
|
|
34
|
+
scaler = axis.scaler,
|
|
35
|
+
start = axis.start,
|
|
36
|
+
end = axis.end,
|
|
37
|
+
step = axis.step,
|
|
38
|
+
ticks = axis.ticks,
|
|
39
|
+
lengthWithoutPaddingOuter = axis.lengthWithoutPaddingOuter;
|
|
50
40
|
var tickLength = ticks.length;
|
|
51
|
-
|
|
52
41
|
var _useState = (0, _react.useState)({
|
|
53
|
-
|
|
54
|
-
|
|
55
|
-
|
|
56
|
-
|
|
57
|
-
|
|
58
|
-
|
|
59
|
-
|
|
60
|
-
|
|
42
|
+
scaler: scaler,
|
|
43
|
+
step: step,
|
|
44
|
+
ticks: ticks
|
|
45
|
+
}),
|
|
46
|
+
_useState2 = (0, _slicedToArray2["default"])(_useState, 2),
|
|
47
|
+
state = _useState2[0],
|
|
48
|
+
setState = _useState2[1];
|
|
61
49
|
var _useState3 = (0, _react.useState)(initialState),
|
|
62
|
-
|
|
63
|
-
|
|
64
|
-
|
|
65
|
-
|
|
50
|
+
_useState4 = (0, _slicedToArray2["default"])(_useState3, 2),
|
|
51
|
+
status = _useState4[0],
|
|
52
|
+
setStatus = _useState4[1];
|
|
66
53
|
(0, _react.useEffect)(function () {
|
|
67
54
|
if (show && time && tickLength > tickCount) {
|
|
68
55
|
setStatus({
|
|
@@ -75,7 +62,6 @@ var _default = function _default(axis, config, isHover) {
|
|
|
75
62
|
}, [show, time, tickCount, tickLength]);
|
|
76
63
|
(0, _react.useEffect)(function () {
|
|
77
64
|
var handler;
|
|
78
|
-
|
|
79
65
|
if (!(hover && isHover) && show && time && tickLength > tickCount) {
|
|
80
66
|
handler = setInterval(function () {
|
|
81
67
|
setStatus(function (_ref) {
|
|
@@ -88,7 +74,6 @@ var _default = function _default(axis, config, isHover) {
|
|
|
88
74
|
});
|
|
89
75
|
}, time * 1000);
|
|
90
76
|
}
|
|
91
|
-
|
|
92
77
|
return function () {
|
|
93
78
|
handler && clearInterval(handler);
|
|
94
79
|
};
|
|
@@ -96,14 +81,11 @@ var _default = function _default(axis, config, isHover) {
|
|
|
96
81
|
(0, _react.useEffect)(function () {
|
|
97
82
|
var animation;
|
|
98
83
|
var currentIndex = status.currentIndex,
|
|
99
|
-
|
|
100
|
-
|
|
84
|
+
flag = status.flag;
|
|
101
85
|
if (currentIndex !== null) {
|
|
102
86
|
var _step = lengthWithoutPaddingOuter / tickCount;
|
|
103
|
-
|
|
104
87
|
if (flag) {
|
|
105
88
|
var _ticks = allTicks.slice(currentIndex, tickCount);
|
|
106
|
-
|
|
107
89
|
setState({
|
|
108
90
|
step: _step,
|
|
109
91
|
ticks: _ticks,
|
|
@@ -118,13 +100,10 @@ var _default = function _default(axis, config, isHover) {
|
|
|
118
100
|
onPlay: function onPlay() {
|
|
119
101
|
setState(function (axis) {
|
|
120
102
|
var ticks = axis.ticks,
|
|
121
|
-
|
|
122
|
-
|
|
103
|
+
scaler = axis.scaler;
|
|
123
104
|
var _ticks2 = (0, _slicedToArray2["default"])(ticks, 1),
|
|
124
|
-
|
|
125
|
-
|
|
105
|
+
tick = _ticks2[0];
|
|
126
106
|
var _ticks = [tick].concat((0, _toConsumableArray2["default"])(getTicks(allTicks, currentIndex, tickCount)));
|
|
127
|
-
|
|
128
107
|
return _objectSpread(_objectSpread({}, axis), {}, {
|
|
129
108
|
ticks: _ticks,
|
|
130
109
|
scaler: scaler.copy().range([start, end + _step]).domain(_ticks)
|
|
@@ -134,7 +113,7 @@ var _default = function _default(axis, config, isHover) {
|
|
|
134
113
|
onUpdate: function onUpdate(v) {
|
|
135
114
|
setState(function (axis) {
|
|
136
115
|
var scaler = axis.scaler,
|
|
137
|
-
|
|
116
|
+
step = axis.step;
|
|
138
117
|
return _objectSpread(_objectSpread({}, axis), {}, {
|
|
139
118
|
scaler: scaler.copy().range([start + step * v, end + step + step * v])
|
|
140
119
|
});
|
|
@@ -143,10 +122,8 @@ var _default = function _default(axis, config, isHover) {
|
|
|
143
122
|
onComplete: function onComplete() {
|
|
144
123
|
setState(function (axis) {
|
|
145
124
|
var scaler = axis.scaler,
|
|
146
|
-
|
|
147
|
-
|
|
125
|
+
ticks = axis.ticks;
|
|
148
126
|
var _ticks = ticks.slice(1, ticks.length);
|
|
149
|
-
|
|
150
127
|
return _objectSpread(_objectSpread({}, axis), {}, {
|
|
151
128
|
ticks: _ticks,
|
|
152
129
|
scaler: scaler.copy().range([start, end]).domain(_ticks)
|
|
@@ -157,35 +134,28 @@ var _default = function _default(axis, config, isHover) {
|
|
|
157
134
|
}
|
|
158
135
|
} else {
|
|
159
136
|
var _ticks3 = scaler.type == 'linear' ? scaler.domain() : allTicks;
|
|
160
|
-
|
|
161
137
|
setState({
|
|
162
138
|
step: step,
|
|
163
139
|
scaler: scaler.copy().domain(_ticks3).range([start, end]),
|
|
164
140
|
ticks: ticks
|
|
165
141
|
});
|
|
166
142
|
}
|
|
167
|
-
|
|
168
143
|
return function () {
|
|
169
144
|
animation && animation.stop();
|
|
170
145
|
};
|
|
171
146
|
}, [tickCount, allTicks, scaler, start, end, step, ticks, lengthWithoutPaddingOuter, status, duration]);
|
|
172
147
|
return _objectSpread(_objectSpread({}, axis), state);
|
|
173
148
|
};
|
|
174
|
-
|
|
175
149
|
exports["default"] = _default;
|
|
176
|
-
|
|
177
150
|
var getTicks = function getTicks(ticks, currentIndex, length) {
|
|
178
151
|
var _currentIndex = +currentIndex;
|
|
179
|
-
|
|
180
152
|
var ticksLength = ticks.length;
|
|
181
153
|
if (ticksLength <= length) return ticks;
|
|
182
154
|
var end = _currentIndex + length;
|
|
183
|
-
|
|
184
155
|
if (ticksLength < end) {
|
|
185
156
|
var prev = ticks.slice(_currentIndex, ticksLength);
|
|
186
157
|
var next = ticks.slice(0, end - ticksLength);
|
|
187
158
|
return [].concat((0, _toConsumableArray2["default"])(prev), (0, _toConsumableArray2["default"])(next));
|
|
188
159
|
}
|
|
189
|
-
|
|
190
160
|
return ticks.slice(_currentIndex, end);
|
|
191
161
|
};
|