@easyv/charts 1.4.29 → 1.4.31
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 +16 -8
- package/lib/components/Axis.js +134 -87
- package/lib/components/Background.js +26 -18
- package/lib/components/Band.js +98 -72
- package/lib/components/BaseLine.js +46 -33
- package/lib/components/Brush.js +46 -29
- package/lib/components/Carousel.js +40 -13
- package/lib/components/CartesianChart.js +146 -97
- package/lib/components/Chart.js +39 -26
- package/lib/components/ChartContainer.js +27 -18
- package/lib/components/ConicalGradient.js +89 -56
- package/lib/components/Control.js +28 -12
- package/lib/components/ExtentData.js +17 -9
- package/lib/components/FilterData.js +27 -16
- package/lib/components/Indicator.js +30 -23
- package/lib/components/Label.js +126 -96
- package/lib/components/Legend.js +66 -41
- package/lib/components/Lighter.js +50 -21
- package/lib/components/Line.js +59 -39
- package/lib/components/LinearGradient.js +22 -16
- package/lib/components/Mapping.js +34 -9
- package/lib/components/Marquee.js +30 -14
- package/lib/components/PieChart.js +420 -318
- package/lib/components/StackData.js +18 -8
- package/lib/components/StereoBar.js +105 -65
- package/lib/components/TextOverflow.js +21 -8
- package/lib/components/Tooltip.js +55 -41
- package/lib/components/index.js +29 -0
- package/lib/components/pieTooltip.js +67 -40
- package/lib/context/index.js +2 -0
- package/lib/css/index.module.css +42 -42
- package/lib/css/piechart.module.css +26 -26
- package/lib/element/ConicGradient.js +35 -29
- package/lib/element/Line.js +13 -9
- package/lib/element/index.js +2 -0
- package/lib/formatter/index.js +2 -0
- package/lib/formatter/legend.js +41 -30
- package/lib/hooks/index.js +9 -0
- package/lib/hooks/useAiData.js +20 -12
- package/lib/hooks/useAnimateData.js +21 -8
- package/lib/hooks/useAxes.js +117 -67
- package/lib/hooks/useCarouselAxisX.js +59 -26
- package/lib/hooks/useExtentData.js +47 -15
- package/lib/hooks/useFilterData.js +34 -13
- package/lib/hooks/useStackData.js +35 -12
- package/lib/hooks/useTooltip.js +53 -36
- package/lib/index.js +15 -0
- package/lib/utils/index.js +247 -95
- package/package.json +55 -55
- package/src/components/Axis.tsx +1 -1
- package/src/components/Background.tsx +61 -61
- package/src/components/Band.tsx +274 -274
- package/src/components/Brush.js +159 -159
- package/src/components/CartesianChart.js +1 -0
- package/src/components/Chart.js +100 -101
- package/src/components/ChartContainer.tsx +71 -71
- package/src/components/ConicalGradient.js +258 -258
- package/src/components/Control.jsx +51 -51
- package/src/components/ExtentData.js +17 -17
- package/src/components/Indicator.js +61 -61
- package/src/components/Label.js +275 -275
- 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/PieTooltip.jsx +160 -160
- package/src/components/StereoBar.tsx +307 -307
- package/src/components/index.js +59 -59
- 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/useExtentData.js +1 -1
- 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
|
@@ -1,23 +1,37 @@
|
|
|
1
1
|
"use strict";
|
|
2
2
|
|
|
3
3
|
var _interopRequireDefault = require("@babel/runtime/helpers/interopRequireDefault");
|
|
4
|
+
|
|
4
5
|
var _typeof = require("@babel/runtime/helpers/typeof");
|
|
6
|
+
|
|
5
7
|
Object.defineProperty(exports, "__esModule", {
|
|
6
8
|
value: true
|
|
7
9
|
});
|
|
8
10
|
exports["default"] = void 0;
|
|
11
|
+
|
|
9
12
|
var _extends2 = _interopRequireDefault(require("@babel/runtime/helpers/extends"));
|
|
13
|
+
|
|
10
14
|
var _defineProperty2 = _interopRequireDefault(require("@babel/runtime/helpers/defineProperty"));
|
|
15
|
+
|
|
11
16
|
var _slicedToArray2 = _interopRequireDefault(require("@babel/runtime/helpers/slicedToArray"));
|
|
17
|
+
|
|
12
18
|
var _objectWithoutProperties2 = _interopRequireDefault(require("@babel/runtime/helpers/objectWithoutProperties"));
|
|
19
|
+
|
|
13
20
|
var _react = _interopRequireWildcard(require("react"));
|
|
21
|
+
|
|
14
22
|
var _d3v = require("d3v7");
|
|
23
|
+
|
|
15
24
|
var _excluded = ["animation"],
|
|
16
|
-
|
|
25
|
+
_excluded2 = ["config", "data"];
|
|
26
|
+
|
|
17
27
|
function _getRequireWildcardCache(nodeInterop) { if (typeof WeakMap !== "function") return null; var cacheBabelInterop = new WeakMap(); var cacheNodeInterop = new WeakMap(); return (_getRequireWildcardCache = function _getRequireWildcardCache(nodeInterop) { return nodeInterop ? cacheNodeInterop : cacheBabelInterop; })(nodeInterop); }
|
|
28
|
+
|
|
18
29
|
function _interopRequireWildcard(obj, nodeInterop) { if (!nodeInterop && obj && obj.__esModule) { return obj; } if (obj === null || _typeof(obj) !== "object" && typeof obj !== "function") { return { "default": obj }; } var cache = _getRequireWildcardCache(nodeInterop); if (cache && cache.has(obj)) { return cache.get(obj); } var newObj = {}; var hasPropertyDescriptor = Object.defineProperty && Object.getOwnPropertyDescriptor; for (var key in obj) { if (key !== "default" && Object.prototype.hasOwnProperty.call(obj, key)) { var desc = hasPropertyDescriptor ? Object.getOwnPropertyDescriptor(obj, key) : null; if (desc && (desc.get || desc.set)) { Object.defineProperty(newObj, key, desc); } else { newObj[key] = obj[key]; } } } newObj["default"] = obj; if (cache) { cache.set(obj, newObj); } return newObj; }
|
|
30
|
+
|
|
19
31
|
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; }
|
|
32
|
+
|
|
20
33
|
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; }
|
|
34
|
+
|
|
21
35
|
var initialState = {
|
|
22
36
|
currentIndex: null,
|
|
23
37
|
trigger: ''
|
|
@@ -38,24 +52,29 @@ var defaultAnimation = {
|
|
|
38
52
|
/**
|
|
39
53
|
* 饼图类图表轮播逻辑,用来管理currentIndex,及回调逻辑(HOC)
|
|
40
54
|
*/
|
|
55
|
+
|
|
41
56
|
var _default = function _default(Component) {
|
|
42
57
|
return /*#__PURE__*/(0, _react.memo)(function (_ref) {
|
|
43
58
|
var _ref$config = _ref.config,
|
|
44
|
-
|
|
45
|
-
|
|
46
|
-
|
|
47
|
-
|
|
48
|
-
|
|
59
|
+
animation = _ref$config.animation,
|
|
60
|
+
config = (0, _objectWithoutProperties2["default"])(_ref$config, _excluded),
|
|
61
|
+
_ref$data = _ref.data,
|
|
62
|
+
data = _ref$data === void 0 ? [] : _ref$data,
|
|
63
|
+
rest = (0, _objectWithoutProperties2["default"])(_ref, _excluded2);
|
|
49
64
|
var dataLength = data.length;
|
|
65
|
+
|
|
50
66
|
var _animation = Object.assign({}, defaultAnimation, animation);
|
|
67
|
+
|
|
51
68
|
var on = _animation.on,
|
|
52
|
-
|
|
53
|
-
|
|
54
|
-
|
|
69
|
+
interval = _animation.interval,
|
|
70
|
+
interactive = _animation.interactive,
|
|
71
|
+
hoverStop = _animation.hoverStop;
|
|
72
|
+
|
|
55
73
|
var _useState = (0, _react.useState)(on ? carouselState : initialState),
|
|
56
|
-
|
|
57
|
-
|
|
58
|
-
|
|
74
|
+
_useState2 = (0, _slicedToArray2["default"])(_useState, 2),
|
|
75
|
+
state = _useState2[0],
|
|
76
|
+
setState = _useState2[1];
|
|
77
|
+
|
|
59
78
|
var timer = (0, _react.useRef)(null);
|
|
60
79
|
var hoverState = (0, _react.useRef)(false);
|
|
61
80
|
var animationOn = on && interval && dataLength;
|
|
@@ -91,7 +110,8 @@ var _default = function _default(Component) {
|
|
|
91
110
|
}, [carousel]);
|
|
92
111
|
var onEvent = (0, _react.useCallback)(function (_ref3) {
|
|
93
112
|
var currentIndex = _ref3.currentIndex,
|
|
94
|
-
|
|
113
|
+
type = _ref3.type;
|
|
114
|
+
|
|
95
115
|
switch (interactive) {
|
|
96
116
|
case true:
|
|
97
117
|
case 'click':
|
|
@@ -103,7 +123,9 @@ var _default = function _default(Component) {
|
|
|
103
123
|
currentIndex: currentIndex
|
|
104
124
|
});
|
|
105
125
|
}
|
|
126
|
+
|
|
106
127
|
break;
|
|
128
|
+
|
|
107
129
|
case 'hover':
|
|
108
130
|
if (type == 'onMouseEnter') {
|
|
109
131
|
setState({
|
|
@@ -114,10 +136,13 @@ var _default = function _default(Component) {
|
|
|
114
136
|
} else if (type == 'onMouseLeave') {
|
|
115
137
|
!hoverState.current && animationOn && carousel();
|
|
116
138
|
}
|
|
139
|
+
|
|
117
140
|
break;
|
|
141
|
+
|
|
118
142
|
case false:
|
|
119
143
|
case '':
|
|
120
144
|
break;
|
|
145
|
+
|
|
121
146
|
case 'carousel':
|
|
122
147
|
default:
|
|
123
148
|
setState({
|
|
@@ -134,6 +159,7 @@ var _default = function _default(Component) {
|
|
|
134
159
|
timer.current && timer.current.stop();
|
|
135
160
|
} else {
|
|
136
161
|
hoverState.current = false;
|
|
162
|
+
|
|
137
163
|
if (animationOn) {
|
|
138
164
|
timer.current = (0, _d3v.interval)(function () {
|
|
139
165
|
setState(function (_ref4) {
|
|
@@ -160,4 +186,5 @@ var _default = function _default(Component) {
|
|
|
160
186
|
}));
|
|
161
187
|
});
|
|
162
188
|
};
|
|
189
|
+
|
|
163
190
|
exports["default"] = _default;
|
|
@@ -1,82 +1,97 @@
|
|
|
1
1
|
"use strict";
|
|
2
2
|
|
|
3
3
|
var _interopRequireDefault = require("@babel/runtime/helpers/interopRequireDefault");
|
|
4
|
+
|
|
4
5
|
var _typeof = require("@babel/runtime/helpers/typeof");
|
|
6
|
+
|
|
5
7
|
Object.defineProperty(exports, "__esModule", {
|
|
6
8
|
value: true
|
|
7
9
|
});
|
|
8
10
|
exports["default"] = void 0;
|
|
11
|
+
|
|
9
12
|
var _objectWithoutProperties2 = _interopRequireDefault(require("@babel/runtime/helpers/objectWithoutProperties"));
|
|
13
|
+
|
|
10
14
|
var _extends2 = _interopRequireDefault(require("@babel/runtime/helpers/extends"));
|
|
15
|
+
|
|
11
16
|
var _toConsumableArray2 = _interopRequireDefault(require("@babel/runtime/helpers/toConsumableArray"));
|
|
17
|
+
|
|
12
18
|
var _slicedToArray2 = _interopRequireDefault(require("@babel/runtime/helpers/slicedToArray"));
|
|
19
|
+
|
|
13
20
|
var _react = _interopRequireWildcard(require("react"));
|
|
21
|
+
|
|
14
22
|
var _hooks = require("../hooks");
|
|
23
|
+
|
|
15
24
|
var _context = require("../context");
|
|
25
|
+
|
|
16
26
|
var _ = require(".");
|
|
27
|
+
|
|
17
28
|
var _utils = require("../utils");
|
|
29
|
+
|
|
18
30
|
var _excluded = ["Component", "yOrZ"],
|
|
19
|
-
|
|
20
|
-
|
|
21
|
-
* 轴类图表
|
|
22
|
-
*/
|
|
31
|
+
_excluded2 = ["Component", "yOrZ"];
|
|
32
|
+
|
|
23
33
|
function _getRequireWildcardCache(nodeInterop) { if (typeof WeakMap !== "function") return null; var cacheBabelInterop = new WeakMap(); var cacheNodeInterop = new WeakMap(); return (_getRequireWildcardCache = function _getRequireWildcardCache(nodeInterop) { return nodeInterop ? cacheNodeInterop : cacheBabelInterop; })(nodeInterop); }
|
|
34
|
+
|
|
24
35
|
function _interopRequireWildcard(obj, nodeInterop) { if (!nodeInterop && obj && obj.__esModule) { return obj; } if (obj === null || _typeof(obj) !== "object" && typeof obj !== "function") { return { "default": obj }; } var cache = _getRequireWildcardCache(nodeInterop); if (cache && cache.has(obj)) { return cache.get(obj); } var newObj = {}; var hasPropertyDescriptor = Object.defineProperty && Object.getOwnPropertyDescriptor; for (var key in obj) { if (key !== "default" && Object.prototype.hasOwnProperty.call(obj, key)) { var desc = hasPropertyDescriptor ? Object.getOwnPropertyDescriptor(obj, key) : null; if (desc && (desc.get || desc.set)) { Object.defineProperty(newObj, key, desc); } else { newObj[key] = obj[key]; } } } newObj["default"] = obj; if (cache) { cache.set(obj, newObj); } return newObj; }
|
|
36
|
+
|
|
25
37
|
var Chart = /*#__PURE__*/(0, _react.memo)(function (_ref) {
|
|
26
38
|
var _ref$config = _ref.config,
|
|
27
|
-
|
|
28
|
-
|
|
29
|
-
|
|
30
|
-
|
|
31
|
-
|
|
32
|
-
|
|
33
|
-
|
|
34
|
-
|
|
35
|
-
|
|
36
|
-
|
|
37
|
-
|
|
38
|
-
|
|
39
|
-
|
|
40
|
-
|
|
41
|
-
|
|
42
|
-
|
|
43
|
-
|
|
44
|
-
|
|
45
|
-
|
|
46
|
-
|
|
47
|
-
|
|
48
|
-
|
|
49
|
-
|
|
50
|
-
|
|
51
|
-
|
|
52
|
-
|
|
53
|
-
|
|
54
|
-
|
|
55
|
-
|
|
56
|
-
|
|
57
|
-
|
|
58
|
-
|
|
59
|
-
|
|
60
|
-
|
|
61
|
-
|
|
62
|
-
|
|
63
|
-
|
|
64
|
-
|
|
65
|
-
|
|
66
|
-
|
|
67
|
-
|
|
68
|
-
|
|
69
|
-
|
|
39
|
+
axesConfig = _ref$config.axes,
|
|
40
|
+
background = _ref$config.background,
|
|
41
|
+
_ref$config$chart = _ref$config.chart,
|
|
42
|
+
_ref$config$chart$dim = _ref$config$chart.dimension.chartDimension,
|
|
43
|
+
height = _ref$config$chart$dim.height,
|
|
44
|
+
width = _ref$config$chart$dim.width,
|
|
45
|
+
_ref$config$chart$mar = _ref$config$chart.margin,
|
|
46
|
+
marginLeft = _ref$config$chart$mar.marginLeft,
|
|
47
|
+
marginTop = _ref$config$chart$mar.marginTop,
|
|
48
|
+
marginRight = _ref$config$chart$mar.marginRight,
|
|
49
|
+
marginBottom = _ref$config$chart$mar.marginBottom,
|
|
50
|
+
animation = _ref$config$chart.animation,
|
|
51
|
+
legend = _ref$config$chart.legend,
|
|
52
|
+
series = _ref$config.series,
|
|
53
|
+
bandLength = _ref$config.bandLength,
|
|
54
|
+
tooltip = _ref$config.tooltip,
|
|
55
|
+
_ref$config$baseLine = _ref$config.baseLine,
|
|
56
|
+
_ref$config$baseLine$ = _ref$config$baseLine.orientation,
|
|
57
|
+
baseLineOri = _ref$config$baseLine$ === void 0 ? "" : _ref$config$baseLine$,
|
|
58
|
+
_ref$config$baseLine$2 = _ref$config$baseLine.config,
|
|
59
|
+
baseLineConfig = _ref$config$baseLine$2 === void 0 ? {} : _ref$config$baseLine$2,
|
|
60
|
+
_ref$config$baseLine$3 = _ref$config$baseLine.data,
|
|
61
|
+
baseLineData = _ref$config$baseLine$3 === void 0 ? [] : _ref$config$baseLine$3,
|
|
62
|
+
_ref$config$tooltip = _ref$config.tooltip;
|
|
63
|
+
_ref$config$tooltip = _ref$config$tooltip === void 0 ? {} : _ref$config$tooltip;
|
|
64
|
+
var _ref$config$tooltip$c = _ref$config$tooltip.config,
|
|
65
|
+
tooltipConfig = _ref$config$tooltip$c === void 0 ? {} : _ref$config$tooltip$c,
|
|
66
|
+
_ref$config$tooltip$c2 = _ref$config$tooltip.config;
|
|
67
|
+
_ref$config$tooltip$c2 = _ref$config$tooltip$c2 === void 0 ? {} : _ref$config$tooltip$c2;
|
|
68
|
+
var auto = _ref$config$tooltip$c2.auto,
|
|
69
|
+
manual = _ref$config$tooltip$c2.manual,
|
|
70
|
+
_ref$config$tooltip$c3 = _ref$config$tooltip$c2.indicator,
|
|
71
|
+
indicator = _ref$config$tooltip$c3 === void 0 ? {} : _ref$config$tooltip$c3,
|
|
72
|
+
brush = _ref$config.brush,
|
|
73
|
+
_ref$config$isControl = _ref$config.isControlChart,
|
|
74
|
+
isControlChart = _ref$config$isControl === void 0 ? false : _ref$config$isControl,
|
|
75
|
+
_ref$config$control = _ref$config.control,
|
|
76
|
+
control = _ref$config$control === void 0 ? null : _ref$config$control,
|
|
77
|
+
style = _ref.style,
|
|
78
|
+
originData = _ref.originData,
|
|
79
|
+
filterData = _ref.filterData,
|
|
80
|
+
aiFormatter = _ref.aiFormatter,
|
|
81
|
+
id = _ref.id;
|
|
70
82
|
var context = (0, _react.useContext)(_context.chartContext);
|
|
83
|
+
|
|
71
84
|
var _useState = (0, _react.useState)(false),
|
|
72
|
-
|
|
73
|
-
|
|
74
|
-
|
|
85
|
+
_useState2 = (0, _slicedToArray2["default"])(_useState, 2),
|
|
86
|
+
isHover = _useState2[0],
|
|
87
|
+
setIsHover = _useState2[1];
|
|
88
|
+
|
|
75
89
|
var _useContext = (0, _react.useContext)(_context.chartContext),
|
|
76
|
-
|
|
77
|
-
|
|
78
|
-
|
|
79
|
-
|
|
90
|
+
chartWidth = _useContext.width,
|
|
91
|
+
chartHeight = _useContext.height,
|
|
92
|
+
triggerOnRelative = _useContext.triggerOnRelative,
|
|
93
|
+
onEmit = _useContext.onEmit;
|
|
94
|
+
|
|
80
95
|
var svg = (0, _react.useRef)();
|
|
81
96
|
var axes = (0, _hooks.useAxes)({
|
|
82
97
|
axes: axesConfig,
|
|
@@ -93,29 +108,33 @@ var Chart = /*#__PURE__*/(0, _react.memo)(function (_ref) {
|
|
|
93
108
|
if (!window.aiData) {
|
|
94
109
|
window.aiData = {};
|
|
95
110
|
}
|
|
111
|
+
|
|
96
112
|
window.aiData[id] = {
|
|
97
113
|
getAI: function getAI() {
|
|
98
114
|
return aiData;
|
|
99
115
|
}
|
|
100
116
|
};
|
|
101
117
|
}
|
|
118
|
+
|
|
102
119
|
return function () {
|
|
103
120
|
window.aiData && window.aiData[id] && delete window.aiData[id];
|
|
104
121
|
};
|
|
105
122
|
}, [JSON.stringify(aiData), id]);
|
|
123
|
+
|
|
106
124
|
var _useTooltip = (0, _hooks.useTooltip)({
|
|
107
|
-
|
|
108
|
-
|
|
109
|
-
|
|
110
|
-
|
|
111
|
-
|
|
112
|
-
|
|
113
|
-
|
|
114
|
-
|
|
115
|
-
|
|
116
|
-
|
|
117
|
-
|
|
118
|
-
|
|
125
|
+
svg: svg,
|
|
126
|
+
marginLeft: marginLeft,
|
|
127
|
+
marginTop: marginTop,
|
|
128
|
+
width: chartWidth,
|
|
129
|
+
height: chartHeight,
|
|
130
|
+
axisX: axisX,
|
|
131
|
+
isHover: isHover,
|
|
132
|
+
config: tooltipConfig
|
|
133
|
+
}),
|
|
134
|
+
tooltipX = _useTooltip.x,
|
|
135
|
+
tickName = _useTooltip.name,
|
|
136
|
+
setIndex = _useTooltip.setIndex;
|
|
137
|
+
|
|
119
138
|
var tooltipData = (0, _react.useMemo)(function () {
|
|
120
139
|
return tickName !== undefined && originData.filter(function (d) {
|
|
121
140
|
return d.x === tickName;
|
|
@@ -137,14 +156,16 @@ var Chart = /*#__PURE__*/(0, _react.memo)(function (_ref) {
|
|
|
137
156
|
var onInteraction = (0, _react.useCallback)(function (e) {
|
|
138
157
|
e.stopPropagation();
|
|
139
158
|
var data = e.currentTarget.dataset.data;
|
|
159
|
+
|
|
140
160
|
var _data = JSON.parse(data);
|
|
161
|
+
|
|
141
162
|
triggerOnRelative('click', _data);
|
|
142
163
|
onEmit("click", _data);
|
|
143
164
|
}, [triggerOnRelative, onEmit]);
|
|
144
|
-
|
|
145
165
|
/**
|
|
146
166
|
* 控制图相关
|
|
147
167
|
*/
|
|
168
|
+
|
|
148
169
|
var controlEl = (0, _react.useRef)();
|
|
149
170
|
var seriesEl = (0, _react.useRef)(null);
|
|
150
171
|
var axisElList = (0, _react.useRef)([]);
|
|
@@ -156,6 +177,7 @@ var Chart = /*#__PURE__*/(0, _react.memo)(function (_ref) {
|
|
|
156
177
|
var rawTranslateX = 0;
|
|
157
178
|
var percent = 0;
|
|
158
179
|
var controlWidth = xLineRange * control.drag.width / 100;
|
|
180
|
+
|
|
159
181
|
var range = function range(num) {
|
|
160
182
|
var _num = num;
|
|
161
183
|
var min = 0;
|
|
@@ -164,15 +186,17 @@ var Chart = /*#__PURE__*/(0, _react.memo)(function (_ref) {
|
|
|
164
186
|
_num = Math.min(_num, max);
|
|
165
187
|
return _num;
|
|
166
188
|
};
|
|
189
|
+
|
|
167
190
|
var setControlTranslate = function setControlTranslate(x) {
|
|
168
191
|
var moveLen = range(x);
|
|
169
|
-
controlEl.current.style.transform = "translateX(".concat(moveLen, "px)");
|
|
170
|
-
|
|
192
|
+
controlEl.current.style.transform = "translateX(".concat(moveLen, "px)"); //计算出当前位移的百分比
|
|
193
|
+
|
|
171
194
|
percent = moveLen / (xLineRange - controlWidth);
|
|
172
195
|
curControlPercent.current = percent;
|
|
173
196
|
seriesEl.current.style.transform = "translate(".concat(-(axisX.controlEnd - axisX.end) * percent, "px,").concat(marginTop, "px)");
|
|
174
197
|
axisElList.current[2].style.transform = "translate(".concat(-(axisX.controlEnd - axisX.end) * percent, "px,", 0, "px)");
|
|
175
198
|
};
|
|
199
|
+
|
|
176
200
|
var mouseDownHandle = function mouseDownHandle(e) {
|
|
177
201
|
var mouseMoveHandle = function mouseMoveHandle(e) {
|
|
178
202
|
//当前位移的距离
|
|
@@ -181,6 +205,7 @@ var Chart = /*#__PURE__*/(0, _react.memo)(function (_ref) {
|
|
|
181
205
|
setControlTranslate(movementX + rawTranslateX);
|
|
182
206
|
}
|
|
183
207
|
};
|
|
208
|
+
|
|
184
209
|
var mouseUpHandle = function mouseUpHandle(e) {
|
|
185
210
|
rawTranslateX = range(movementX + rawTranslateX);
|
|
186
211
|
movementX = 0;
|
|
@@ -188,27 +213,32 @@ var Chart = /*#__PURE__*/(0, _react.memo)(function (_ref) {
|
|
|
188
213
|
document.removeEventListener("mousemove", mouseMoveHandle);
|
|
189
214
|
document.removeEventListener("mouseup", mouseUpHandle);
|
|
190
215
|
};
|
|
216
|
+
|
|
191
217
|
document.addEventListener("mousemove", mouseMoveHandle);
|
|
192
218
|
document.addEventListener("mouseup", mouseUpHandle);
|
|
193
219
|
isDragging = true;
|
|
194
220
|
};
|
|
221
|
+
|
|
195
222
|
var animationHoverStop;
|
|
223
|
+
|
|
196
224
|
var setAnimationHoverStopTrue = function setAnimationHoverStopTrue() {
|
|
197
225
|
animationHoverStop = true;
|
|
198
226
|
};
|
|
227
|
+
|
|
199
228
|
var setAnimationHoverStopFalse = function setAnimationHoverStopFalse() {
|
|
200
229
|
animationHoverStop = false;
|
|
201
230
|
};
|
|
231
|
+
|
|
202
232
|
svg.current.addEventListener("mouseenter", setAnimationHoverStopTrue);
|
|
203
|
-
svg.current.addEventListener("mouseleave", setAnimationHoverStopFalse);
|
|
233
|
+
svg.current.addEventListener("mouseleave", setAnimationHoverStopFalse); //控制图轮播动画逻辑
|
|
204
234
|
|
|
205
|
-
//控制图轮播动画逻辑
|
|
206
235
|
var show = animation.show,
|
|
207
|
-
|
|
208
|
-
|
|
209
|
-
|
|
236
|
+
duration = animation.duration,
|
|
237
|
+
interval = animation.interval,
|
|
238
|
+
hover = animation.hover;
|
|
210
239
|
var times = Math.floor(xLineRange / controlWidth);
|
|
211
240
|
var animatePos = [];
|
|
241
|
+
|
|
212
242
|
for (var i = 0; i <= times; i++) {
|
|
213
243
|
if (i * controlWidth <= xLineRange) {
|
|
214
244
|
animatePos.push(i * controlWidth);
|
|
@@ -216,31 +246,40 @@ var Chart = /*#__PURE__*/(0, _react.memo)(function (_ref) {
|
|
|
216
246
|
animatePos.push(xLineRange - controlWidth);
|
|
217
247
|
}
|
|
218
248
|
}
|
|
249
|
+
|
|
219
250
|
var index = 0;
|
|
220
251
|
var animationId;
|
|
252
|
+
|
|
221
253
|
if (animation.show) {
|
|
222
254
|
var initTime, timeGap;
|
|
255
|
+
|
|
223
256
|
var _animation = function _animation(timestamp) {
|
|
224
257
|
if (!initTime) {
|
|
225
258
|
initTime = timestamp;
|
|
226
259
|
}
|
|
260
|
+
|
|
227
261
|
if (animationHoverStop && hover) {
|
|
228
262
|
initTime = timestamp - timeGap;
|
|
229
263
|
}
|
|
264
|
+
|
|
230
265
|
timeGap = timestamp - initTime;
|
|
266
|
+
|
|
231
267
|
if (timeGap < (interval + duration) * 1000) {
|
|
232
268
|
if (timeGap < duration * 1000) {
|
|
233
269
|
var p = timeGap / (duration * 1000);
|
|
234
270
|
var nextIndex = index + 1;
|
|
235
271
|
var v;
|
|
272
|
+
|
|
236
273
|
if (nextIndex < animatePos.length) {
|
|
237
274
|
v = p * (animatePos[nextIndex] - animatePos[index]) + animatePos[index];
|
|
238
275
|
} else {
|
|
239
276
|
nextIndex = 0;
|
|
240
277
|
v = (1 - p) * animatePos[index];
|
|
241
278
|
}
|
|
279
|
+
|
|
242
280
|
setControlTranslate(v);
|
|
243
281
|
}
|
|
282
|
+
|
|
244
283
|
animationId = window.requestAnimationFrame(_animation);
|
|
245
284
|
} else {
|
|
246
285
|
index = index < times ? index + 1 : 0;
|
|
@@ -248,8 +287,10 @@ var Chart = /*#__PURE__*/(0, _react.memo)(function (_ref) {
|
|
|
248
287
|
animationId = window.requestAnimationFrame(_animation);
|
|
249
288
|
}
|
|
250
289
|
};
|
|
290
|
+
|
|
251
291
|
animationId = window.requestAnimationFrame(_animation);
|
|
252
292
|
}
|
|
293
|
+
|
|
253
294
|
controlEl.current.addEventListener("mousedown", mouseDownHandle);
|
|
254
295
|
return function () {
|
|
255
296
|
controlEl.current.removeEventListener("mousedown", mouseDownHandle);
|
|
@@ -259,32 +300,38 @@ var Chart = /*#__PURE__*/(0, _react.memo)(function (_ref) {
|
|
|
259
300
|
};
|
|
260
301
|
}
|
|
261
302
|
}, [JSON.stringify(animation), control]);
|
|
303
|
+
|
|
262
304
|
var _useState3 = (0, _react.useState)(false),
|
|
263
|
-
|
|
264
|
-
|
|
265
|
-
|
|
305
|
+
_useState4 = (0, _slicedToArray2["default"])(_useState3, 2),
|
|
306
|
+
controlChartTooltipShow = _useState4[0],
|
|
307
|
+
setControlChartTooltipShow = _useState4[1];
|
|
308
|
+
|
|
266
309
|
var _useState5 = (0, _react.useState)(undefined),
|
|
267
|
-
|
|
268
|
-
|
|
269
|
-
|
|
310
|
+
_useState6 = (0, _slicedToArray2["default"])(_useState5, 2),
|
|
311
|
+
controlChartTooltipXName = _useState6[0],
|
|
312
|
+
setControlChartTooltipXName = _useState6[1];
|
|
313
|
+
|
|
270
314
|
var _useState7 = (0, _react.useState)(undefined),
|
|
271
|
-
|
|
272
|
-
|
|
273
|
-
|
|
315
|
+
_useState8 = (0, _slicedToArray2["default"])(_useState7, 2),
|
|
316
|
+
controlChartTooltipX = _useState8[0],
|
|
317
|
+
setControlChartTooltipX = _useState8[1];
|
|
318
|
+
|
|
274
319
|
var controlChartTooltipData = (0, _react.useMemo)(function () {
|
|
275
320
|
return controlChartTooltipXName !== undefined && originData.filter(function (d) {
|
|
276
321
|
return d.x === controlChartTooltipXName;
|
|
277
322
|
});
|
|
278
323
|
}, [controlChartTooltipXName, originData]);
|
|
324
|
+
|
|
279
325
|
var _useState9 = (0, _react.useState)(axisX.ticks.map(function (tick) {
|
|
280
|
-
|
|
281
|
-
|
|
282
|
-
|
|
283
|
-
|
|
284
|
-
|
|
285
|
-
|
|
286
|
-
|
|
287
|
-
|
|
326
|
+
return {
|
|
327
|
+
tick: tick,
|
|
328
|
+
isShow: false
|
|
329
|
+
};
|
|
330
|
+
})),
|
|
331
|
+
_useState10 = (0, _slicedToArray2["default"])(_useState9, 2),
|
|
332
|
+
controlChartIndicatorList = _useState10[0],
|
|
333
|
+
setControlChartIndicatorList = _useState10[1];
|
|
334
|
+
|
|
288
335
|
return /*#__PURE__*/_react["default"].createElement(_react["default"].Fragment, null, /*#__PURE__*/_react["default"].createElement(_.ChartContainer, {
|
|
289
336
|
style: style,
|
|
290
337
|
width: width,
|
|
@@ -294,6 +341,7 @@ var Chart = /*#__PURE__*/(0, _react.memo)(function (_ref) {
|
|
|
294
341
|
onMouseEnter: function onMouseEnter() {
|
|
295
342
|
setIsHover(true);
|
|
296
343
|
},
|
|
344
|
+
onMouseMove: setIndex,
|
|
297
345
|
onMouseLeave: function onMouseLeave(e) {
|
|
298
346
|
setIsHover(false);
|
|
299
347
|
setIndex(e);
|
|
@@ -374,16 +422,15 @@ var Chart = /*#__PURE__*/(0, _react.memo)(function (_ref) {
|
|
|
374
422
|
}));
|
|
375
423
|
})), series.map(function (_ref2, index) {
|
|
376
424
|
var Component = _ref2.Component,
|
|
377
|
-
|
|
378
|
-
|
|
425
|
+
yOrZ = _ref2.yOrZ,
|
|
426
|
+
config = (0, _objectWithoutProperties2["default"])(_ref2, _excluded);
|
|
379
427
|
var yAxis = axes.get(yOrZ);
|
|
380
428
|
return yAxis && Component && /*#__PURE__*/_react["default"].createElement(Component, (0, _extends2["default"])({
|
|
381
429
|
key: index
|
|
382
430
|
}, config, {
|
|
383
431
|
bandLength: bandLength,
|
|
384
432
|
xAxis: axisX,
|
|
385
|
-
yAxis: yAxis
|
|
386
|
-
// 控制图部分,主要是为了,当鼠标悬浮在指示器上时,显示对应的tooltip
|
|
433
|
+
yAxis: yAxis // 控制图部分,主要是为了,当鼠标悬浮在指示器上时,显示对应的tooltip
|
|
387
434
|
,
|
|
388
435
|
isControlChart: isControlChart,
|
|
389
436
|
setControlChartTooltipXName: setControlChartTooltipXName,
|
|
@@ -395,8 +442,8 @@ var Chart = /*#__PURE__*/(0, _react.memo)(function (_ref) {
|
|
|
395
442
|
}));
|
|
396
443
|
}), series.map(function (_ref3, index) {
|
|
397
444
|
var Component = _ref3.Component,
|
|
398
|
-
|
|
399
|
-
|
|
445
|
+
yOrZ = _ref3.yOrZ,
|
|
446
|
+
config = (0, _objectWithoutProperties2["default"])(_ref3, _excluded2);
|
|
400
447
|
var yAxis = axes.get(yOrZ);
|
|
401
448
|
return yAxis && /*#__PURE__*/_react["default"].createElement(_.Label, (0, _extends2["default"])({
|
|
402
449
|
key: index
|
|
@@ -450,5 +497,7 @@ var Chart = /*#__PURE__*/(0, _react.memo)(function (_ref) {
|
|
|
450
497
|
width: width
|
|
451
498
|
}));
|
|
452
499
|
});
|
|
500
|
+
|
|
453
501
|
var _default = (0, _.Mapping)((0, _.FilterData)((0, _.ExtentData)((0, _.AnimateData)((0, _.StackData)(Chart)))));
|
|
502
|
+
|
|
454
503
|
exports["default"] = _default;
|