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