@easyv/charts 1.4.14 → 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.
Files changed (53) hide show
  1. package/.husky/commit-msg +1 -1
  2. package/lib/components/AnimateData.js +8 -16
  3. package/lib/components/Axis.js +199 -191
  4. package/lib/components/Background.js +16 -24
  5. package/lib/components/Band.js +98 -91
  6. package/lib/components/BaseLine.js +39 -40
  7. package/lib/components/Brush.js +29 -46
  8. package/lib/components/Carousel.js +13 -40
  9. package/lib/components/CartesianChart.js +66 -86
  10. package/lib/components/Chart.js +23 -36
  11. package/lib/components/ChartContainer.js +18 -27
  12. package/lib/components/ConicalGradient.js +35 -68
  13. package/lib/components/ExtentData.js +9 -17
  14. package/lib/components/FilterData.js +16 -27
  15. package/lib/components/Indicator.js +6 -8
  16. package/lib/components/Label.js +120 -134
  17. package/lib/components/Legend.js +41 -66
  18. package/lib/components/Lighter.js +19 -48
  19. package/lib/components/Line.js +39 -59
  20. package/lib/components/LinearGradient.js +14 -20
  21. package/lib/components/Mapping.js +9 -34
  22. package/lib/components/Marquee.js +14 -30
  23. package/lib/components/PieChart.js +306 -400
  24. package/lib/components/StackData.js +8 -18
  25. package/lib/components/StereoBar.js +65 -105
  26. package/lib/components/TextOverflow.js +9 -22
  27. package/lib/components/Tooltip.js +41 -55
  28. package/lib/components/index.js +0 -27
  29. package/lib/context/index.js +0 -2
  30. package/lib/element/ConicGradient.js +29 -35
  31. package/lib/element/Line.js +9 -13
  32. package/lib/element/index.js +0 -2
  33. package/lib/formatter/index.js +0 -2
  34. package/lib/formatter/legend.js +30 -41
  35. package/lib/hooks/index.js +0 -8
  36. package/lib/hooks/useAnimateData.js +3 -16
  37. package/lib/hooks/useAxes.js +253 -114
  38. package/lib/hooks/useCarouselAxisX.js +26 -56
  39. package/lib/hooks/useExtentData.js +47 -44
  40. package/lib/hooks/useFilterData.js +8 -29
  41. package/lib/hooks/useStackData.js +7 -30
  42. package/lib/hooks/useTooltip.js +26 -43
  43. package/lib/index.js +0 -15
  44. package/lib/utils/index.js +95 -247
  45. package/package.json +55 -54
  46. package/src/components/Axis.tsx +246 -157
  47. package/src/components/Band.tsx +91 -56
  48. package/src/components/BaseLine.js +22 -5
  49. package/src/components/CartesianChart.js +1 -0
  50. package/src/components/Label.js +56 -46
  51. package/src/components/TextOverflow.tsx +1 -2
  52. package/src/hooks/useAxes.js +336 -117
  53. package/src/hooks/useExtentData.js +37 -10
@@ -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
- num_ = Math.abs(num);
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
- max = domain[1];
28
+ max = domain[1];
41
29
  var minCount = Math.pow(10, getCount(min)),
42
- maxCount = Math.pow(10, getCount(max));
43
-
30
+ maxCount = Math.pow(10, getCount(max));
44
31
  switch (mode) {
45
- case 'count':
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
- _ref$context = _ref.context,
90
- width = _ref$context.width,
91
- height = _ref$context.height;
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
- _item$config$label$sh = _item$config$label.showLast,
99
- showLast = _item$config$label$sh === void 0 ? false : _item$config$label$sh,
100
- _item$config$label$de = _item$config$label.decimal,
101
- decimal = _item$config$label$de === void 0 ? 0 : _item$config$label$de,
102
- type = item.type,
103
- orientation = item.orientation,
104
- ticks = item.ticks,
105
- _item$tickCount = item.tickCount,
106
- count = _item$tickCount === void 0 ? 1 : _item$tickCount,
107
- _item$step = item.step,
108
- step = _item$step === void 0 ? 1 : _item$step,
109
- domain = item.domain,
110
- axisType = item.axisType,
111
- _item$paddingOuter = item.paddingOuter,
112
- paddingOuter = _item$paddingOuter === void 0 ? 0 : _item$paddingOuter,
113
- auto = item.auto,
114
- mode = item.mode,
115
- carousel = item.carousel,
116
- config = item.config; //计算真正需要的tickCount,如果domain区间太小,不能完全按照count来,需要减少count数
117
-
118
- var tickCount = type == "ordinal" ? count : getTickCount(domain, count, decimal);
119
- var direction = orientation === 'top' || orientation === 'bottom' ? 'horizontal' : orientation === 'left' || orientation === 'right' ? 'vertical' : '';
120
- var length = direction === 'horizontal' ? width : direction === 'vertical' ? height : 0;
121
-
122
- var _paddingOuter = paddingOuter * length;
123
-
124
- var start = _paddingOuter / 2;
125
- var end = length - start;
126
- var range = direction === 'horizontal' ? [start, end] : direction === 'vertical' ? [end, start] : [0, 0];
127
- var newDomain = domain;
128
-
129
- if (type !== 'ordinal' && !isNaN(domain[1]) && !auto) {
130
- newDomain = getNewDomain(domain, mode, step);
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
- var scaler = scales[type]().domain(newDomain).range(range);
134
- scaler.type = type;
135
- if (type !== 'ordinal') scaler.clamp(true); //scaler.nice().clamp(true)
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
- var allTicks = ticks ? ticks : scaler.ticks ? scaler.ticks(tickCount) : scaler.domain();
138
- var _ticks = allTicks; //
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
- if (type === 'ordinal') {
141
- if (carousel === false) {
142
- _ticks = (0, _utils.getTicksOfAxis)(_ticks, +tickCount, showLast);
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
- if (auto === false) {
146
- switch (mode) {
147
- case 'count':
148
- _ticks = (0, _utils2.getYTicks)(newDomain[1], newDomain[0], +tickCount);
149
- break;
150
-
151
- case 'step':
152
- _ticks = (0, _utils2.getYTicksByStep)(newDomain[1], newDomain[0], +step);
153
- break;
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
- var lengthWithoutPaddingOuter = length - _paddingOuter;
159
-
160
- if (type == 'linear' && config.on) {
161
- var zeroPosition = scaler(0);
162
-
163
- if (zeroPosition !== range[0] && !isNaN(zeroPosition)) {
164
- if (direction === 'horizontal') {
165
- xAxisPositions.push({
166
- x: zeroPosition,
167
- y: 0
168
- });
169
- } else if (direction === 'vertical') {
170
- xAxisPositions.push({
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('x') && (tmp.get('x').positions = xAxisPositions);
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
- interval = config.interval,
39
- duration = config.duration,
40
- hover = config.hover;
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
- allTicks = axis.allTicks,
44
- scaler = axis.scaler,
45
- start = axis.start,
46
- end = axis.end,
47
- step = axis.step,
48
- ticks = axis.ticks,
49
- lengthWithoutPaddingOuter = axis.lengthWithoutPaddingOuter;
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
- scaler: scaler,
54
- step: step,
55
- ticks: ticks
56
- }),
57
- _useState2 = (0, _slicedToArray2["default"])(_useState, 2),
58
- state = _useState2[0],
59
- setState = _useState2[1];
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
- _useState4 = (0, _slicedToArray2["default"])(_useState3, 2),
63
- status = _useState4[0],
64
- setStatus = _useState4[1];
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
- flag = status.flag;
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
- scaler = axis.scaler;
122
-
103
+ scaler = axis.scaler;
123
104
  var _ticks2 = (0, _slicedToArray2["default"])(ticks, 1),
124
- tick = _ticks2[0];
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
- step = axis.step;
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
- ticks = axis.ticks;
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
  };