@easyv/charts 1.4.21 → 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.
Files changed (90) hide show
  1. package/.babelrc +8 -8
  2. package/.husky/commit-msg +3 -3
  3. package/CHANGELOG.md +18 -18
  4. package/commitlint.config.js +1 -1
  5. package/lib/components/AnimateData.js +8 -16
  6. package/lib/components/Axis.js +106 -138
  7. package/lib/components/Background.js +18 -26
  8. package/lib/components/Band.js +105 -91
  9. package/lib/components/BaseLine.js +33 -46
  10. package/lib/components/Brush.js +29 -46
  11. package/lib/components/Carousel.js +13 -40
  12. package/lib/components/CartesianChart.js +292 -113
  13. package/lib/components/Chart.js +23 -36
  14. package/lib/components/ChartContainer.js +21 -29
  15. package/lib/components/ConicalGradient.js +56 -89
  16. package/lib/components/Control.js +65 -0
  17. package/lib/components/ExtentData.js +9 -17
  18. package/lib/components/FilterData.js +16 -27
  19. package/lib/components/Indicator.js +66 -12
  20. package/lib/components/Label.js +128 -118
  21. package/lib/components/Legend.js +41 -66
  22. package/lib/components/Lighter.js +21 -50
  23. package/lib/components/Line.js +39 -59
  24. package/lib/components/LinearGradient.js +16 -22
  25. package/lib/components/Mapping.js +9 -34
  26. package/lib/components/Marquee.js +14 -30
  27. package/lib/components/PieChart.js +312 -406
  28. package/lib/components/StackData.js +8 -18
  29. package/lib/components/StereoBar.js +65 -105
  30. package/lib/components/TextOverflow.js +8 -21
  31. package/lib/components/Tooltip.js +41 -55
  32. package/lib/components/index.js +7 -27
  33. package/lib/context/index.js +0 -2
  34. package/lib/css/index.module.css +42 -42
  35. package/lib/css/piechart.module.css +26 -26
  36. package/lib/element/ConicGradient.js +29 -35
  37. package/lib/element/Line.js +9 -13
  38. package/lib/element/index.js +0 -2
  39. package/lib/formatter/index.js +0 -2
  40. package/lib/formatter/legend.js +30 -41
  41. package/lib/hooks/index.js +0 -9
  42. package/lib/hooks/useAiData.js +12 -20
  43. package/lib/hooks/useAnimateData.js +8 -21
  44. package/lib/hooks/useAxes.js +69 -115
  45. package/lib/hooks/useCarouselAxisX.js +47 -68
  46. package/lib/hooks/useExtentData.js +14 -46
  47. package/lib/hooks/useFilterData.js +13 -34
  48. package/lib/hooks/useStackData.js +12 -35
  49. package/lib/hooks/useTooltip.js +37 -54
  50. package/lib/index.js +0 -15
  51. package/lib/utils/index.js +95 -247
  52. package/package.json +55 -55
  53. package/src/components/Axis.tsx +223 -183
  54. package/src/components/Background.tsx +61 -61
  55. package/src/components/Band.tsx +274 -239
  56. package/src/components/Brush.js +159 -159
  57. package/src/components/CartesianChart.js +320 -44
  58. package/src/components/Chart.js +99 -99
  59. package/src/components/ChartContainer.tsx +71 -64
  60. package/src/components/ConicalGradient.js +258 -258
  61. package/src/components/Control.jsx +51 -0
  62. package/src/components/ExtentData.js +17 -17
  63. package/src/components/Indicator.js +61 -13
  64. package/src/components/Label.js +275 -242
  65. package/src/components/Legend.js +165 -165
  66. package/src/components/Lighter.jsx +173 -173
  67. package/src/components/Line.js +150 -150
  68. package/src/components/LinearGradient.js +29 -29
  69. package/src/components/PieChart.js +8 -4
  70. package/src/components/StereoBar.tsx +307 -307
  71. package/src/components/index.js +57 -55
  72. package/src/context/index.js +2 -2
  73. package/src/css/index.module.css +42 -42
  74. package/src/css/piechart.module.css +26 -26
  75. package/src/element/ConicGradient.jsx +55 -55
  76. package/src/element/Line.tsx +33 -33
  77. package/src/element/index.ts +3 -3
  78. package/src/formatter/index.js +1 -1
  79. package/src/formatter/legend.js +92 -92
  80. package/src/hooks/index.js +20 -20
  81. package/src/hooks/useAnimateData.ts +67 -67
  82. package/src/hooks/useAxes.js +9 -2
  83. package/src/hooks/useCarouselAxisX.js +35 -18
  84. package/src/hooks/useFilterData.js +72 -72
  85. package/src/hooks/useStackData.js +101 -101
  86. package/src/hooks/useTooltip.ts +100 -100
  87. package/src/index.js +6 -6
  88. package/src/types/index.d.ts +67 -67
  89. package/src/utils/index.js +757 -757
  90. package/tsconfig.json +23 -23
@@ -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
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
- _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,
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
- _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,
117
- isClipAxis = item.isClipAxis,
118
- bottomClipAxisCount = item.bottomClipAxisCount,
119
- topClipAxisCount = item.topClipAxisCount,
120
- bottomClipAxisStep = item.bottomClipAxisStep,
121
- topClipAxisStep = item.topClipAxisStep,
122
- clipValue = item.clipValue,
123
- clipPosition = item.clipPosition,
124
- clipDifferenceValue = item.clipDifferenceValue,
125
- clipAxisMode = item.clipAxisMode; //如果是断轴类型,输出一套完全不同的values
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
- clipAxisDomain = [],
224
- clipAxisCount = [],
225
- clipAxisTickCount = [],
226
- clipAxisStep = [];
193
+ clipAxisDomain = [],
194
+ clipAxisCount = [],
195
+ clipAxisTickCount = [],
196
+ clipAxisStep = [];
227
197
  var _count = count,
228
- _step = step; //计算topDomain,bottomDomain,当断轴值为设置不合理的时候,不开启断轴
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
- start = _getChartsConfig.start,
254
- end = _getChartsConfig.end,
255
- direction = _getChartsConfig.direction,
256
- _paddingOuter = _getChartsConfig._paddingOuter,
257
- length = _getChartsConfig.length;
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 = []; //如果非自适应模式,计算新的domain,传入scaler,适配强制步长或者数量强制
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
- } //设置scaler,scaler会将数值映射真实的坐标(svg坐标)
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
- }); //clipAxisAllTicks作用是使用scaler.ticks方法,来计算标签集合
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
- _start = _getChartsConfig2.start,
307
- _end = _getChartsConfig2.end,
308
- _direction = _getChartsConfig2.direction,
309
- _paddingOuter2 = _getChartsConfig2._paddingOuter,
310
- _length = _getChartsConfig2.length;
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
- interval = config.interval,
39
- duration = config.duration,
40
- hover = config.hover;
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
- 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;
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
- 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
-
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
- _useState4 = (0, _slicedToArray2["default"])(_useState3, 2),
63
- status = _useState4[0],
64
- setStatus = _useState4[1];
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
- flag = status.flag;
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, end])
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
- scaler = axis.scaler;
122
-
107
+ scaler = axis.scaler;
123
108
  var _ticks2 = (0, _slicedToArray2["default"])(ticks, 1),
124
- tick = _ticks2[0];
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, end + _step]).domain(_ticks)
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
- step = axis.step;
120
+ step = axis.step;
138
121
  return _objectSpread(_objectSpread({}, axis), {}, {
139
- scaler: scaler.copy().range([start + step * v, end + step + 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
- ticks = axis.ticks;
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, end]).domain(_ticks)
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 == 'linear' ? scaler.domain() : allTicks;
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, end]),
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, end, step, ticks, lengthWithoutPaddingOuter, status, duration]);
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 end = _currentIndex + length;
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, end - ticksLength);
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
  };