@easyv/charts 1.2.1 → 1.2.4
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 +40 -36
- package/lib/components/Axis.js +333 -329
- package/lib/components/Background.js +2 -2
- package/lib/components/Band.js +177 -173
- package/lib/components/Brush.js +201 -201
- package/lib/components/Carousel.js +171 -164
- package/lib/components/CartesianChart.js +11 -7
- package/lib/components/Chart.js +114 -111
- package/lib/components/ChartContainer.js +62 -58
- package/lib/components/ConicalGradient.js +268 -264
- package/lib/components/ExtentData.js +48 -45
- package/lib/components/FilterData.js +56 -53
- package/lib/components/Indicator.js +2 -2
- package/lib/components/Label.js +278 -278
- package/lib/components/Legend.js +160 -154
- package/lib/components/Lighter.js +179 -179
- package/lib/components/Line.js +187 -181
- package/lib/components/LinearGradient.js +2 -2
- package/lib/components/Mapping.js +130 -127
- package/lib/components/Marquee.js +98 -0
- package/lib/components/PieChart.js +1078 -1061
- package/lib/components/StackData.js +48 -45
- package/lib/components/StereoBar.js +340 -336
- package/lib/components/TextOverflow.js +65 -0
- package/lib/components/Tooltip.js +155 -155
- package/lib/components/index.js +202 -194
- package/lib/css/index.module.css +41 -41
- package/lib/css/piechart.module.css +26 -26
- package/lib/element/ConicGradient.js +72 -72
- package/lib/formatter/legend.js +91 -91
- package/lib/hooks/index.js +62 -62
- package/lib/hooks/useAnimateData.js +88 -88
- package/lib/hooks/useAxes.js +135 -135
- package/lib/hooks/useCarouselAxisX.js +184 -184
- package/lib/hooks/useExtentData.js +128 -128
- package/lib/hooks/useFilterData.js +112 -112
- package/lib/hooks/useStackData.js +136 -134
- package/lib/hooks/useTooltip.js +10 -10
- package/lib/index.js +89 -85
- package/lib/utils/index.js +835 -832
- package/package.json +53 -51
- package/src/components/AnimateData.tsx +24 -24
- package/src/components/Axis.tsx +354 -354
- package/src/components/Background.tsx +45 -45
- package/src/components/Band.tsx +173 -173
- package/src/components/Brush.js +159 -159
- package/src/components/Carousel.tsx +144 -144
- package/src/components/Chart.js +99 -99
- package/src/components/ChartContainer.tsx +63 -63
- package/src/components/ConicalGradient.js +258 -258
- package/src/components/ExtentData.js +17 -17
- package/src/components/FilterData.js +23 -23
- package/src/components/Indicator.js +13 -13
- package/src/components/Label.js +206 -206
- package/src/components/Legend.js +158 -158
- package/src/components/Lighter.jsx +173 -173
- package/src/components/Line.js +144 -144
- package/src/components/LinearGradient.js +29 -29
- package/src/components/Mapping.js +71 -71
- package/src/components/Marquee.js +93 -74
- package/src/components/PieChart.js +1288 -1097
- package/src/components/StackData.js +20 -20
- package/src/components/StereoBar.tsx +310 -310
- package/src/components/TextOverflow.js +51 -0
- package/src/components/Tooltip.js +169 -169
- package/src/components/index.js +53 -51
- package/src/context/index.js +2 -2
- package/src/css/index.module.css +41 -41
- 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 +90 -90
- package/src/hooks/index.js +17 -17
- package/src/hooks/useAnimateData.ts +67 -67
- package/src/hooks/useAxes.js +144 -144
- package/src/hooks/useCarouselAxisX.js +163 -163
- package/src/hooks/useExtentData.js +88 -88
- package/src/hooks/useFilterData.js +72 -72
- package/src/hooks/useStackData.js +100 -100
- package/src/hooks/useTooltip.ts +96 -96
- package/src/index.js +6 -6
- package/src/types/index.d.ts +67 -67
- package/src/utils/index.js +696 -696
- package/tsconfig.json +22 -22
|
@@ -1,73 +1,73 @@
|
|
|
1
|
-
"use strict";
|
|
2
|
-
|
|
3
|
-
var _interopRequireWildcard = require("@babel/runtime/helpers/interopRequireWildcard");
|
|
4
|
-
|
|
5
|
-
Object.defineProperty(exports, "__esModule", {
|
|
6
|
-
value: true
|
|
7
|
-
});
|
|
8
|
-
exports["default"] = ConicGradient;
|
|
9
|
-
|
|
10
|
-
var d3 = _interopRequireWildcard(require("d3"));
|
|
11
|
-
|
|
12
|
-
//只支持在svg中使用
|
|
13
|
-
//在<clipPath>标签中绘制圆环路径,在<foreignObject>中使用conic-gradient来制作角向渐变
|
|
14
|
-
//然后在foreignObject中调用clipPath来剪切dom元素,实现环形渐变效果
|
|
15
|
-
function ConicGradient(props) {
|
|
16
|
-
var gradientId = props.gradientId,
|
|
17
|
-
_props$colorConfig = props.colorConfig,
|
|
18
|
-
colorConfig = _props$colorConfig === void 0 ? {} : _props$colorConfig,
|
|
19
|
-
_props$circleConfig = props.circleConfig,
|
|
20
|
-
circleConfig = _props$circleConfig === void 0 ? {} : _props$circleConfig,
|
|
21
|
-
_colorConfig$colorTyp = colorConfig.colorType,
|
|
22
|
-
colorType = _colorConfig$colorTyp === void 0 ? "linear" : _colorConfig$colorTyp,
|
|
23
|
-
_colorConfig$colors = colorConfig.colors,
|
|
24
|
-
colors = _colorConfig$colors === void 0 ? [{
|
|
25
|
-
offset: 0,
|
|
26
|
-
color: "rgba(255,0,0,0.5)"
|
|
27
|
-
}, {
|
|
28
|
-
offset: 50,
|
|
29
|
-
color: "rgba(0,255,0,0.5)"
|
|
30
|
-
}, {
|
|
31
|
-
offset: 100,
|
|
32
|
-
color: "rgba(0,0,255,0.5)"
|
|
33
|
-
}] : _colorConfig$colors,
|
|
34
|
-
_circleConfig$innerRa = circleConfig.innerRadius,
|
|
35
|
-
innerRadius = _circleConfig$innerRa === void 0 ? 80 : _circleConfig$innerRa,
|
|
36
|
-
_circleConfig$outerRa = circleConfig.outerRadius,
|
|
37
|
-
outerRadius = _circleConfig$outerRa === void 0 ? 100 : _circleConfig$outerRa,
|
|
38
|
-
_circleConfig$startAn = circleConfig.startAngle,
|
|
39
|
-
startAngle = _circleConfig$startAn === void 0 ? 0 : _circleConfig$startAn,
|
|
40
|
-
_circleConfig$endAngl = circleConfig.endAngle,
|
|
41
|
-
endAngle = _circleConfig$endAngl === void 0 ? 360 : _circleConfig$endAngl,
|
|
42
|
-
_circleConfig$cornerR = circleConfig.cornerRadius,
|
|
43
|
-
cornerRadius = _circleConfig$cornerR === void 0 ? 0 : _circleConfig$cornerR,
|
|
44
|
-
_circleConfig$padAngl = circleConfig.padAngle,
|
|
45
|
-
padAngle = _circleConfig$padAngl === void 0 ? 0 : _circleConfig$padAngl;
|
|
46
|
-
var arc = d3.arc().innerRadius(innerRadius).outerRadius(outerRadius).startAngle(startAngle * Math.PI / 180).endAngle(endAngle * Math.PI / 180).cornerRadius(cornerRadius).padAngle(padAngle);
|
|
47
|
-
return /*#__PURE__*/React.createElement("g", null, /*#__PURE__*/React.createElement("clipPath", {
|
|
48
|
-
id: "" + gradientId,
|
|
49
|
-
style: {
|
|
50
|
-
transform: "translate(50%,50%)"
|
|
51
|
-
}
|
|
52
|
-
}, /*#__PURE__*/React.createElement("path", {
|
|
53
|
-
d: arc()
|
|
54
|
-
})), /*#__PURE__*/React.createElement("foreignObject", {
|
|
55
|
-
style: {
|
|
56
|
-
width: "100%",
|
|
57
|
-
height: "100%",
|
|
58
|
-
transform: "translate(-50%,-50%)",
|
|
59
|
-
background: colorType === "pure" ? colors : "conic-gradient(".concat(colorsToString(colors), ")"),
|
|
60
|
-
clipPath: "url(".concat('#' + gradientId, ")")
|
|
61
|
-
}
|
|
62
|
-
}));
|
|
63
|
-
}
|
|
64
|
-
|
|
65
|
-
function colorsToString(colors) {
|
|
66
|
-
var s = "";
|
|
67
|
-
colors.sort(function (a, b) {
|
|
68
|
-
return a.offset - b.offset;
|
|
69
|
-
}).map(function (d) {
|
|
70
|
-
s = s + d.color + " " + d.offset + "%,";
|
|
71
|
-
});
|
|
72
|
-
return s.slice(0, -1);
|
|
1
|
+
"use strict";
|
|
2
|
+
|
|
3
|
+
var _interopRequireWildcard = require("@babel/runtime/helpers/interopRequireWildcard");
|
|
4
|
+
|
|
5
|
+
Object.defineProperty(exports, "__esModule", {
|
|
6
|
+
value: true
|
|
7
|
+
});
|
|
8
|
+
exports["default"] = ConicGradient;
|
|
9
|
+
|
|
10
|
+
var d3 = _interopRequireWildcard(require("d3"));
|
|
11
|
+
|
|
12
|
+
//只支持在svg中使用
|
|
13
|
+
//在<clipPath>标签中绘制圆环路径,在<foreignObject>中使用conic-gradient来制作角向渐变
|
|
14
|
+
//然后在foreignObject中调用clipPath来剪切dom元素,实现环形渐变效果
|
|
15
|
+
function ConicGradient(props) {
|
|
16
|
+
var gradientId = props.gradientId,
|
|
17
|
+
_props$colorConfig = props.colorConfig,
|
|
18
|
+
colorConfig = _props$colorConfig === void 0 ? {} : _props$colorConfig,
|
|
19
|
+
_props$circleConfig = props.circleConfig,
|
|
20
|
+
circleConfig = _props$circleConfig === void 0 ? {} : _props$circleConfig,
|
|
21
|
+
_colorConfig$colorTyp = colorConfig.colorType,
|
|
22
|
+
colorType = _colorConfig$colorTyp === void 0 ? "linear" : _colorConfig$colorTyp,
|
|
23
|
+
_colorConfig$colors = colorConfig.colors,
|
|
24
|
+
colors = _colorConfig$colors === void 0 ? [{
|
|
25
|
+
offset: 0,
|
|
26
|
+
color: "rgba(255,0,0,0.5)"
|
|
27
|
+
}, {
|
|
28
|
+
offset: 50,
|
|
29
|
+
color: "rgba(0,255,0,0.5)"
|
|
30
|
+
}, {
|
|
31
|
+
offset: 100,
|
|
32
|
+
color: "rgba(0,0,255,0.5)"
|
|
33
|
+
}] : _colorConfig$colors,
|
|
34
|
+
_circleConfig$innerRa = circleConfig.innerRadius,
|
|
35
|
+
innerRadius = _circleConfig$innerRa === void 0 ? 80 : _circleConfig$innerRa,
|
|
36
|
+
_circleConfig$outerRa = circleConfig.outerRadius,
|
|
37
|
+
outerRadius = _circleConfig$outerRa === void 0 ? 100 : _circleConfig$outerRa,
|
|
38
|
+
_circleConfig$startAn = circleConfig.startAngle,
|
|
39
|
+
startAngle = _circleConfig$startAn === void 0 ? 0 : _circleConfig$startAn,
|
|
40
|
+
_circleConfig$endAngl = circleConfig.endAngle,
|
|
41
|
+
endAngle = _circleConfig$endAngl === void 0 ? 360 : _circleConfig$endAngl,
|
|
42
|
+
_circleConfig$cornerR = circleConfig.cornerRadius,
|
|
43
|
+
cornerRadius = _circleConfig$cornerR === void 0 ? 0 : _circleConfig$cornerR,
|
|
44
|
+
_circleConfig$padAngl = circleConfig.padAngle,
|
|
45
|
+
padAngle = _circleConfig$padAngl === void 0 ? 0 : _circleConfig$padAngl;
|
|
46
|
+
var arc = d3.arc().innerRadius(innerRadius).outerRadius(outerRadius).startAngle(startAngle * Math.PI / 180).endAngle(endAngle * Math.PI / 180).cornerRadius(cornerRadius).padAngle(padAngle);
|
|
47
|
+
return /*#__PURE__*/React.createElement("g", null, /*#__PURE__*/React.createElement("clipPath", {
|
|
48
|
+
id: "" + gradientId,
|
|
49
|
+
style: {
|
|
50
|
+
transform: "translate(50%,50%)"
|
|
51
|
+
}
|
|
52
|
+
}, /*#__PURE__*/React.createElement("path", {
|
|
53
|
+
d: arc()
|
|
54
|
+
})), /*#__PURE__*/React.createElement("foreignObject", {
|
|
55
|
+
style: {
|
|
56
|
+
width: "100%",
|
|
57
|
+
height: "100%",
|
|
58
|
+
transform: "translate(-50%,-50%)",
|
|
59
|
+
background: colorType === "pure" ? colors : "conic-gradient(".concat(colorsToString(colors), ")"),
|
|
60
|
+
clipPath: "url(".concat('#' + gradientId, ")")
|
|
61
|
+
}
|
|
62
|
+
}));
|
|
63
|
+
}
|
|
64
|
+
|
|
65
|
+
function colorsToString(colors) {
|
|
66
|
+
var s = "";
|
|
67
|
+
colors.sort(function (a, b) {
|
|
68
|
+
return a.offset - b.offset;
|
|
69
|
+
}).map(function (d) {
|
|
70
|
+
s = s + d.color + " " + d.offset + "%,";
|
|
71
|
+
});
|
|
72
|
+
return s.slice(0, -1);
|
|
73
73
|
}
|
package/lib/formatter/legend.js
CHANGED
|
@@ -1,92 +1,92 @@
|
|
|
1
|
-
"use strict";
|
|
2
|
-
|
|
3
|
-
var _interopRequireDefault = require("@babel/runtime/helpers/interopRequireDefault");
|
|
4
|
-
|
|
5
|
-
Object.defineProperty(exports, "__esModule", {
|
|
6
|
-
value: true
|
|
7
|
-
});
|
|
8
|
-
exports.pieLegendFormatter = void 0;
|
|
9
|
-
|
|
10
|
-
var _defineProperty2 = _interopRequireDefault(require("@babel/runtime/helpers/defineProperty"));
|
|
11
|
-
|
|
12
|
-
var _indexModule = _interopRequireDefault(require("../css/index.module.css"));
|
|
13
|
-
|
|
14
|
-
var _utils = require("../utils");
|
|
15
|
-
|
|
16
|
-
function ownKeys(object, enumerableOnly) { var keys = Object.keys(object); if (Object.getOwnPropertySymbols) { var symbols = Object.getOwnPropertySymbols(object);
|
|
17
|
-
|
|
18
|
-
function _objectSpread(target) { for (var i = 1; i < arguments.length; i++) { var source = arguments[i]
|
|
19
|
-
|
|
20
|
-
var pieLegendFormatter = function pieLegendFormatter(_ref, _ref2) {
|
|
21
|
-
var displayName = _ref.displayName,
|
|
22
|
-
data = _ref.data,
|
|
23
|
-
percent = _ref.percent,
|
|
24
|
-
_ref$series = _ref.series,
|
|
25
|
-
seriesColor = _ref$series.color,
|
|
26
|
-
_ref$series$icon = _ref$series.icon,
|
|
27
|
-
icon = _ref$series$icon === void 0 ? "" : _ref$series$icon;
|
|
28
|
-
var _ref2$name = _ref2.name,
|
|
29
|
-
showName = _ref2$name.show,
|
|
30
|
-
nameFont = _ref2$name.font,
|
|
31
|
-
_ref2$value = _ref2.value,
|
|
32
|
-
showValue = _ref2$value.show,
|
|
33
|
-
valueFont = _ref2$value.font,
|
|
34
|
-
valueSameColor = _ref2$value.sameColor,
|
|
35
|
-
valueGap = _ref2$value.gap,
|
|
36
|
-
_ref2$value$suffix = _ref2$value.suffix,
|
|
37
|
-
showSuffix = _ref2$value$suffix.show,
|
|
38
|
-
text = _ref2$value$suffix.text,
|
|
39
|
-
fontSize = _ref2$value$suffix.fontSize,
|
|
40
|
-
_ref2$value$suffix$tr = _ref2$value$suffix.translate,
|
|
41
|
-
x = _ref2$value$suffix$tr.x,
|
|
42
|
-
y = _ref2$value$suffix$tr.y,
|
|
43
|
-
_ref2$percent = _ref2.percent,
|
|
44
|
-
showPercent = _ref2$percent.show,
|
|
45
|
-
percentFont = _ref2$percent.font,
|
|
46
|
-
percentSameColor = _ref2$percent.sameColor,
|
|
47
|
-
percentGap = _ref2$percent.gap;
|
|
48
|
-
var seriesColorType = seriesColor.type,
|
|
49
|
-
pure = seriesColor.pure,
|
|
50
|
-
stops = seriesColor.linear.stops;
|
|
51
|
-
|
|
52
|
-
var _color = seriesColorType == 'pure' ? pure : stops[0].color;
|
|
53
|
-
|
|
54
|
-
return /*#__PURE__*/React.createElement(React.Fragment, null, icon && /*#__PURE__*/React.createElement("span", {
|
|
55
|
-
style: _objectSpread(_objectSpread({}, icon), {}, {
|
|
56
|
-
marginRight: icon.marginRight
|
|
57
|
-
})
|
|
58
|
-
}), /*#__PURE__*/React.createElement("span", {
|
|
59
|
-
className: showName && showValue && showPercent ? _indexModule["default"].showAllStyle : _indexModule["default"].notShowAllStyle
|
|
60
|
-
}, showName && /*#__PURE__*/React.createElement("span", {
|
|
61
|
-
style: _objectSpread(_objectSpread({
|
|
62
|
-
paddingLeft: 5
|
|
63
|
-
}, (0, _utils.getFontStyle)(nameFont)), {}, {
|
|
64
|
-
whiteSpace: "nowrap"
|
|
65
|
-
})
|
|
66
|
-
}, displayName), showValue && /*#__PURE__*/React.createElement("span", {
|
|
67
|
-
style: _objectSpread(_objectSpread({
|
|
68
|
-
whiteSpace: "nowrap"
|
|
69
|
-
}, (0, _utils.getFontStyle)(valueFont)), {}, {
|
|
70
|
-
marginLeft: valueGap,
|
|
71
|
-
display: 'flex',
|
|
72
|
-
color: valueSameColor ? _color : valueFont.color,
|
|
73
|
-
alignItems: 'center',
|
|
74
|
-
justifyContent: 'flex-start'
|
|
75
|
-
})
|
|
76
|
-
}, /*#__PURE__*/React.createElement("span", null, data.y), showSuffix && /*#__PURE__*/React.createElement("span", {
|
|
77
|
-
style: {
|
|
78
|
-
whiteSpace: "nowrap",
|
|
79
|
-
fontSize: fontSize,
|
|
80
|
-
transform: 'translate3d(' + x + 'px, ' + y + 'px, 0px)'
|
|
81
|
-
}
|
|
82
|
-
}, text)), showPercent && /*#__PURE__*/React.createElement("span", {
|
|
83
|
-
style: _objectSpread(_objectSpread({
|
|
84
|
-
whiteSpace: "nowrap"
|
|
85
|
-
}, (0, _utils.getFontStyle)(percentFont)), {}, {
|
|
86
|
-
marginLeft: percentGap,
|
|
87
|
-
color: percentSameColor ? _color : percentFont.color
|
|
88
|
-
})
|
|
89
|
-
}, percent + '%')));
|
|
90
|
-
};
|
|
91
|
-
|
|
1
|
+
"use strict";
|
|
2
|
+
|
|
3
|
+
var _interopRequireDefault = require("@babel/runtime/helpers/interopRequireDefault");
|
|
4
|
+
|
|
5
|
+
Object.defineProperty(exports, "__esModule", {
|
|
6
|
+
value: true
|
|
7
|
+
});
|
|
8
|
+
exports.pieLegendFormatter = void 0;
|
|
9
|
+
|
|
10
|
+
var _defineProperty2 = _interopRequireDefault(require("@babel/runtime/helpers/defineProperty"));
|
|
11
|
+
|
|
12
|
+
var _indexModule = _interopRequireDefault(require("../css/index.module.css"));
|
|
13
|
+
|
|
14
|
+
var _utils = require("../utils");
|
|
15
|
+
|
|
16
|
+
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; }
|
|
17
|
+
|
|
18
|
+
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; }
|
|
19
|
+
|
|
20
|
+
var pieLegendFormatter = function pieLegendFormatter(_ref, _ref2) {
|
|
21
|
+
var displayName = _ref.displayName,
|
|
22
|
+
data = _ref.data,
|
|
23
|
+
percent = _ref.percent,
|
|
24
|
+
_ref$series = _ref.series,
|
|
25
|
+
seriesColor = _ref$series.color,
|
|
26
|
+
_ref$series$icon = _ref$series.icon,
|
|
27
|
+
icon = _ref$series$icon === void 0 ? "" : _ref$series$icon;
|
|
28
|
+
var _ref2$name = _ref2.name,
|
|
29
|
+
showName = _ref2$name.show,
|
|
30
|
+
nameFont = _ref2$name.font,
|
|
31
|
+
_ref2$value = _ref2.value,
|
|
32
|
+
showValue = _ref2$value.show,
|
|
33
|
+
valueFont = _ref2$value.font,
|
|
34
|
+
valueSameColor = _ref2$value.sameColor,
|
|
35
|
+
valueGap = _ref2$value.gap,
|
|
36
|
+
_ref2$value$suffix = _ref2$value.suffix,
|
|
37
|
+
showSuffix = _ref2$value$suffix.show,
|
|
38
|
+
text = _ref2$value$suffix.text,
|
|
39
|
+
fontSize = _ref2$value$suffix.fontSize,
|
|
40
|
+
_ref2$value$suffix$tr = _ref2$value$suffix.translate,
|
|
41
|
+
x = _ref2$value$suffix$tr.x,
|
|
42
|
+
y = _ref2$value$suffix$tr.y,
|
|
43
|
+
_ref2$percent = _ref2.percent,
|
|
44
|
+
showPercent = _ref2$percent.show,
|
|
45
|
+
percentFont = _ref2$percent.font,
|
|
46
|
+
percentSameColor = _ref2$percent.sameColor,
|
|
47
|
+
percentGap = _ref2$percent.gap;
|
|
48
|
+
var seriesColorType = seriesColor.type,
|
|
49
|
+
pure = seriesColor.pure,
|
|
50
|
+
stops = seriesColor.linear.stops;
|
|
51
|
+
|
|
52
|
+
var _color = seriesColorType == 'pure' ? pure : stops[0].color;
|
|
53
|
+
|
|
54
|
+
return /*#__PURE__*/React.createElement(React.Fragment, null, icon && /*#__PURE__*/React.createElement("span", {
|
|
55
|
+
style: _objectSpread(_objectSpread({}, icon), {}, {
|
|
56
|
+
marginRight: icon.marginRight
|
|
57
|
+
})
|
|
58
|
+
}), /*#__PURE__*/React.createElement("span", {
|
|
59
|
+
className: showName && showValue && showPercent ? _indexModule["default"].showAllStyle : _indexModule["default"].notShowAllStyle
|
|
60
|
+
}, showName && /*#__PURE__*/React.createElement("span", {
|
|
61
|
+
style: _objectSpread(_objectSpread({
|
|
62
|
+
paddingLeft: 5
|
|
63
|
+
}, (0, _utils.getFontStyle)(nameFont)), {}, {
|
|
64
|
+
whiteSpace: "nowrap"
|
|
65
|
+
})
|
|
66
|
+
}, displayName), showValue && /*#__PURE__*/React.createElement("span", {
|
|
67
|
+
style: _objectSpread(_objectSpread({
|
|
68
|
+
whiteSpace: "nowrap"
|
|
69
|
+
}, (0, _utils.getFontStyle)(valueFont)), {}, {
|
|
70
|
+
marginLeft: valueGap,
|
|
71
|
+
display: 'flex',
|
|
72
|
+
color: valueSameColor ? _color : valueFont.color,
|
|
73
|
+
alignItems: 'center',
|
|
74
|
+
justifyContent: 'flex-start'
|
|
75
|
+
})
|
|
76
|
+
}, /*#__PURE__*/React.createElement("span", null, data.y), showSuffix && /*#__PURE__*/React.createElement("span", {
|
|
77
|
+
style: {
|
|
78
|
+
whiteSpace: "nowrap",
|
|
79
|
+
fontSize: fontSize,
|
|
80
|
+
transform: 'translate3d(' + x + 'px, ' + y + 'px, 0px)'
|
|
81
|
+
}
|
|
82
|
+
}, text)), showPercent && /*#__PURE__*/React.createElement("span", {
|
|
83
|
+
style: _objectSpread(_objectSpread({
|
|
84
|
+
whiteSpace: "nowrap"
|
|
85
|
+
}, (0, _utils.getFontStyle)(percentFont)), {}, {
|
|
86
|
+
marginLeft: percentGap,
|
|
87
|
+
color: percentSameColor ? _color : percentFont.color
|
|
88
|
+
})
|
|
89
|
+
}, percent + '%')));
|
|
90
|
+
};
|
|
91
|
+
|
|
92
92
|
exports.pieLegendFormatter = pieLegendFormatter;
|
package/lib/hooks/index.js
CHANGED
|
@@ -1,63 +1,63 @@
|
|
|
1
|
-
"use strict";
|
|
2
|
-
|
|
3
|
-
var _interopRequireDefault = require("@babel/runtime/helpers/interopRequireDefault");
|
|
4
|
-
|
|
5
|
-
Object.defineProperty(exports, "__esModule", {
|
|
6
|
-
value: true
|
|
7
|
-
});
|
|
8
|
-
Object.defineProperty(exports, "
|
|
9
|
-
enumerable: true,
|
|
10
|
-
get: function get() {
|
|
11
|
-
return
|
|
12
|
-
}
|
|
13
|
-
});
|
|
14
|
-
Object.defineProperty(exports, "
|
|
15
|
-
enumerable: true,
|
|
16
|
-
get: function get() {
|
|
17
|
-
return
|
|
18
|
-
}
|
|
19
|
-
});
|
|
20
|
-
Object.defineProperty(exports, "
|
|
21
|
-
enumerable: true,
|
|
22
|
-
get: function get() {
|
|
23
|
-
return
|
|
24
|
-
}
|
|
25
|
-
});
|
|
26
|
-
Object.defineProperty(exports, "
|
|
27
|
-
enumerable: true,
|
|
28
|
-
get: function get() {
|
|
29
|
-
return
|
|
30
|
-
}
|
|
31
|
-
});
|
|
32
|
-
Object.defineProperty(exports, "
|
|
33
|
-
enumerable: true,
|
|
34
|
-
get: function get() {
|
|
35
|
-
return
|
|
36
|
-
}
|
|
37
|
-
});
|
|
38
|
-
Object.defineProperty(exports, "
|
|
39
|
-
enumerable: true,
|
|
40
|
-
get: function get() {
|
|
41
|
-
return
|
|
42
|
-
}
|
|
43
|
-
});
|
|
44
|
-
Object.defineProperty(exports, "
|
|
45
|
-
enumerable: true,
|
|
46
|
-
get: function get() {
|
|
47
|
-
return
|
|
48
|
-
}
|
|
49
|
-
});
|
|
50
|
-
|
|
51
|
-
var _useFilterData = _interopRequireDefault(require("./useFilterData"));
|
|
52
|
-
|
|
53
|
-
var _useStackData = _interopRequireDefault(require("./useStackData"));
|
|
54
|
-
|
|
55
|
-
var _useAxes = _interopRequireDefault(require("./useAxes"));
|
|
56
|
-
|
|
57
|
-
var _useTooltip = _interopRequireDefault(require("./useTooltip"));
|
|
58
|
-
|
|
59
|
-
var _useAnimateData = _interopRequireDefault(require("./useAnimateData"));
|
|
60
|
-
|
|
61
|
-
var _useCarouselAxisX = _interopRequireDefault(require("./useCarouselAxisX"));
|
|
62
|
-
|
|
1
|
+
"use strict";
|
|
2
|
+
|
|
3
|
+
var _interopRequireDefault = require("@babel/runtime/helpers/interopRequireDefault");
|
|
4
|
+
|
|
5
|
+
Object.defineProperty(exports, "__esModule", {
|
|
6
|
+
value: true
|
|
7
|
+
});
|
|
8
|
+
Object.defineProperty(exports, "useAnimateData", {
|
|
9
|
+
enumerable: true,
|
|
10
|
+
get: function get() {
|
|
11
|
+
return _useAnimateData["default"];
|
|
12
|
+
}
|
|
13
|
+
});
|
|
14
|
+
Object.defineProperty(exports, "useAxes", {
|
|
15
|
+
enumerable: true,
|
|
16
|
+
get: function get() {
|
|
17
|
+
return _useAxes["default"];
|
|
18
|
+
}
|
|
19
|
+
});
|
|
20
|
+
Object.defineProperty(exports, "useCarouselAxisX", {
|
|
21
|
+
enumerable: true,
|
|
22
|
+
get: function get() {
|
|
23
|
+
return _useCarouselAxisX["default"];
|
|
24
|
+
}
|
|
25
|
+
});
|
|
26
|
+
Object.defineProperty(exports, "useExtentData", {
|
|
27
|
+
enumerable: true,
|
|
28
|
+
get: function get() {
|
|
29
|
+
return _useExtentData["default"];
|
|
30
|
+
}
|
|
31
|
+
});
|
|
32
|
+
Object.defineProperty(exports, "useFilterData", {
|
|
33
|
+
enumerable: true,
|
|
34
|
+
get: function get() {
|
|
35
|
+
return _useFilterData["default"];
|
|
36
|
+
}
|
|
37
|
+
});
|
|
38
|
+
Object.defineProperty(exports, "useStackData", {
|
|
39
|
+
enumerable: true,
|
|
40
|
+
get: function get() {
|
|
41
|
+
return _useStackData["default"];
|
|
42
|
+
}
|
|
43
|
+
});
|
|
44
|
+
Object.defineProperty(exports, "useTooltip", {
|
|
45
|
+
enumerable: true,
|
|
46
|
+
get: function get() {
|
|
47
|
+
return _useTooltip["default"];
|
|
48
|
+
}
|
|
49
|
+
});
|
|
50
|
+
|
|
51
|
+
var _useFilterData = _interopRequireDefault(require("./useFilterData"));
|
|
52
|
+
|
|
53
|
+
var _useStackData = _interopRequireDefault(require("./useStackData"));
|
|
54
|
+
|
|
55
|
+
var _useAxes = _interopRequireDefault(require("./useAxes"));
|
|
56
|
+
|
|
57
|
+
var _useTooltip = _interopRequireDefault(require("./useTooltip"));
|
|
58
|
+
|
|
59
|
+
var _useAnimateData = _interopRequireDefault(require("./useAnimateData"));
|
|
60
|
+
|
|
61
|
+
var _useCarouselAxisX = _interopRequireDefault(require("./useCarouselAxisX"));
|
|
62
|
+
|
|
63
63
|
var _useExtentData = _interopRequireDefault(require("./useExtentData"));
|
|
@@ -1,89 +1,89 @@
|
|
|
1
|
-
"use strict";
|
|
2
|
-
|
|
3
|
-
var _interopRequireDefault = require("@babel/runtime/helpers/interopRequireDefault");
|
|
4
|
-
|
|
5
|
-
Object.defineProperty(exports, "__esModule", {
|
|
6
|
-
value: true
|
|
7
|
-
});
|
|
8
|
-
exports["default"] = void 0;
|
|
9
|
-
|
|
10
|
-
var _defineProperty2 = _interopRequireDefault(require("@babel/runtime/helpers/defineProperty"));
|
|
11
|
-
|
|
12
|
-
var _slicedToArray2 = _interopRequireDefault(require("@babel/runtime/helpers/slicedToArray"));
|
|
13
|
-
|
|
14
|
-
var _react = require("react");
|
|
15
|
-
|
|
16
|
-
var _popmotion = require("popmotion");
|
|
17
|
-
|
|
18
|
-
function ownKeys(object, enumerableOnly) { var keys = Object.keys(object); if (Object.getOwnPropertySymbols) { var symbols = Object.getOwnPropertySymbols(object);
|
|
19
|
-
|
|
20
|
-
function _objectSpread(target) { for (var i = 1; i < arguments.length; i++) { var source = arguments[i]
|
|
21
|
-
|
|
22
|
-
/**
|
|
23
|
-
* 图表数据动画
|
|
24
|
-
* @param {Array} data data列表
|
|
25
|
-
* @param {boolean} dataAnimation 是否开启数据增长动画
|
|
26
|
-
* @returns 改变后的数据
|
|
27
|
-
*/
|
|
28
|
-
var _default = function _default(data, dataAnimation) {
|
|
29
|
-
var _useState = (0, _react.useState)([]),
|
|
30
|
-
_useState2 = (0, _slicedToArray2["default"])(_useState, 2),
|
|
31
|
-
animateData = _useState2[0],
|
|
32
|
-
setAnimateData = _useState2[1];
|
|
33
|
-
|
|
34
|
-
(0, _react.useEffect)(function () {
|
|
35
|
-
var animateRef = null;
|
|
36
|
-
|
|
37
|
-
if (dataAnimation && dataAnimation.show && dataAnimation.duration && data.length) {
|
|
38
|
-
animateRef = (0, _popmotion.animate)({
|
|
39
|
-
autoplay: true,
|
|
40
|
-
repeat: 0,
|
|
41
|
-
from: 0,
|
|
42
|
-
to: 1,
|
|
43
|
-
duration: dataAnimation.duration * 1000,
|
|
44
|
-
ease: _popmotion.linear,
|
|
45
|
-
onUpdate: function onUpdate(v) {
|
|
46
|
-
setAnimateData(function (oldData) {
|
|
47
|
-
var oldLength = oldData.length;
|
|
48
|
-
var newLength = data.length;
|
|
49
|
-
|
|
50
|
-
if (oldLength >= newLength) {
|
|
51
|
-
return oldData.map(function (_ref, i) {
|
|
52
|
-
var y = _ref.y;
|
|
53
|
-
var current = data[i] || {
|
|
54
|
-
y: 0
|
|
55
|
-
};
|
|
56
|
-
var delta = current.y - y;
|
|
57
|
-
return _objectSpread(_objectSpread({}, current), {}, {
|
|
58
|
-
y: Math.floor(y + delta * v)
|
|
59
|
-
});
|
|
60
|
-
});
|
|
61
|
-
} else {
|
|
62
|
-
return data.map(function (current, i) {
|
|
63
|
-
var oldCurrent = oldData[i] || {
|
|
64
|
-
y: 0
|
|
65
|
-
};
|
|
66
|
-
var delta = oldCurrent.y - current.y;
|
|
67
|
-
return _objectSpread(_objectSpread({}, current), {}, {
|
|
68
|
-
y: Math.floor(oldCurrent.y + delta * v)
|
|
69
|
-
});
|
|
70
|
-
});
|
|
71
|
-
}
|
|
72
|
-
});
|
|
73
|
-
},
|
|
74
|
-
onComplete: function onComplete() {
|
|
75
|
-
setAnimateData(data);
|
|
76
|
-
}
|
|
77
|
-
});
|
|
78
|
-
} else {
|
|
79
|
-
setAnimateData(data);
|
|
80
|
-
}
|
|
81
|
-
|
|
82
|
-
return function () {
|
|
83
|
-
animateRef && animateRef.stop();
|
|
84
|
-
};
|
|
85
|
-
}, [data, dataAnimation]);
|
|
86
|
-
return animateData;
|
|
87
|
-
};
|
|
88
|
-
|
|
1
|
+
"use strict";
|
|
2
|
+
|
|
3
|
+
var _interopRequireDefault = require("@babel/runtime/helpers/interopRequireDefault");
|
|
4
|
+
|
|
5
|
+
Object.defineProperty(exports, "__esModule", {
|
|
6
|
+
value: true
|
|
7
|
+
});
|
|
8
|
+
exports["default"] = void 0;
|
|
9
|
+
|
|
10
|
+
var _defineProperty2 = _interopRequireDefault(require("@babel/runtime/helpers/defineProperty"));
|
|
11
|
+
|
|
12
|
+
var _slicedToArray2 = _interopRequireDefault(require("@babel/runtime/helpers/slicedToArray"));
|
|
13
|
+
|
|
14
|
+
var _react = require("react");
|
|
15
|
+
|
|
16
|
+
var _popmotion = require("popmotion");
|
|
17
|
+
|
|
18
|
+
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; }
|
|
19
|
+
|
|
20
|
+
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; }
|
|
21
|
+
|
|
22
|
+
/**
|
|
23
|
+
* 图表数据动画
|
|
24
|
+
* @param {Array} data data列表
|
|
25
|
+
* @param {boolean} dataAnimation 是否开启数据增长动画
|
|
26
|
+
* @returns 改变后的数据
|
|
27
|
+
*/
|
|
28
|
+
var _default = function _default(data, dataAnimation) {
|
|
29
|
+
var _useState = (0, _react.useState)([]),
|
|
30
|
+
_useState2 = (0, _slicedToArray2["default"])(_useState, 2),
|
|
31
|
+
animateData = _useState2[0],
|
|
32
|
+
setAnimateData = _useState2[1];
|
|
33
|
+
|
|
34
|
+
(0, _react.useEffect)(function () {
|
|
35
|
+
var animateRef = null;
|
|
36
|
+
|
|
37
|
+
if (dataAnimation && dataAnimation.show && dataAnimation.duration && data.length) {
|
|
38
|
+
animateRef = (0, _popmotion.animate)({
|
|
39
|
+
autoplay: true,
|
|
40
|
+
repeat: 0,
|
|
41
|
+
from: 0,
|
|
42
|
+
to: 1,
|
|
43
|
+
duration: dataAnimation.duration * 1000,
|
|
44
|
+
ease: _popmotion.linear,
|
|
45
|
+
onUpdate: function onUpdate(v) {
|
|
46
|
+
setAnimateData(function (oldData) {
|
|
47
|
+
var oldLength = oldData.length;
|
|
48
|
+
var newLength = data.length;
|
|
49
|
+
|
|
50
|
+
if (oldLength >= newLength) {
|
|
51
|
+
return oldData.map(function (_ref, i) {
|
|
52
|
+
var y = _ref.y;
|
|
53
|
+
var current = data[i] || {
|
|
54
|
+
y: 0
|
|
55
|
+
};
|
|
56
|
+
var delta = current.y - y;
|
|
57
|
+
return _objectSpread(_objectSpread({}, current), {}, {
|
|
58
|
+
y: Math.floor(y + delta * v)
|
|
59
|
+
});
|
|
60
|
+
});
|
|
61
|
+
} else {
|
|
62
|
+
return data.map(function (current, i) {
|
|
63
|
+
var oldCurrent = oldData[i] || {
|
|
64
|
+
y: 0
|
|
65
|
+
};
|
|
66
|
+
var delta = oldCurrent.y - current.y;
|
|
67
|
+
return _objectSpread(_objectSpread({}, current), {}, {
|
|
68
|
+
y: Math.floor(oldCurrent.y + delta * v)
|
|
69
|
+
});
|
|
70
|
+
});
|
|
71
|
+
}
|
|
72
|
+
});
|
|
73
|
+
},
|
|
74
|
+
onComplete: function onComplete() {
|
|
75
|
+
setAnimateData(data);
|
|
76
|
+
}
|
|
77
|
+
});
|
|
78
|
+
} else {
|
|
79
|
+
setAnimateData(data);
|
|
80
|
+
}
|
|
81
|
+
|
|
82
|
+
return function () {
|
|
83
|
+
animateRef && animateRef.stop();
|
|
84
|
+
};
|
|
85
|
+
}, [data, dataAnimation]);
|
|
86
|
+
return animateData;
|
|
87
|
+
};
|
|
88
|
+
|
|
89
89
|
exports["default"] = _default;
|