@easyv/charts 1.2.14 → 1.3.0
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/lib/components/Axis.js +10 -10
- package/lib/components/Background.js +13 -3
- package/lib/components/Band.js +8 -8
- package/lib/components/Carousel.js +2 -2
- package/lib/components/CartesianChart.js +5 -1
- package/lib/components/ConicalGradient.js +21 -21
- package/lib/components/Indicator.js +2 -2
- package/lib/components/Label.js +11 -12
- package/lib/components/Lighter.js +179 -179
- package/lib/components/LinearGradient.js +2 -2
- package/lib/components/Marquee.js +3 -3
- package/lib/components/StackData.js +2 -4
- package/lib/components/StereoBar.js +14 -14
- package/lib/components/TextOverflow.js +3 -3
- 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/hooks/useAnimateData.js +5 -5
- package/lib/hooks/useAxes.js +5 -5
- package/lib/hooks/useCarouselAxisX.js +5 -5
- package/lib/hooks/useExtentData.js +10 -8
- package/lib/hooks/useFilterData.js +5 -5
- package/lib/hooks/useStackData.js +11 -10
- package/lib/hooks/useTooltip.js +10 -10
- package/lib/utils/index.js +62 -41
- package/package.json +54 -53
- package/src/components/AnimateData.tsx +24 -24
- package/src/components/Axis.tsx +354 -354
- package/src/components/Background.tsx +62 -45
- package/src/components/Band.tsx +169 -173
- package/src/components/BaseLine.js +82 -82
- package/src/components/Brush.js +159 -159
- package/src/components/Carousel.tsx +144 -144
- package/src/components/CartesianChart.js +33 -22
- 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 +225 -206
- package/src/components/Legend.js +158 -158
- package/src/components/Lighter.jsx +173 -173
- package/src/components/Line.js +145 -145
- package/src/components/LinearGradient.js +29 -29
- package/src/components/Mapping.js +71 -71
- package/src/components/Marquee.js +88 -88
- package/src/components/PieChart.js +1278 -1278
- package/src/components/StackData.js +16 -20
- package/src/components/StereoBar.tsx +307 -311
- package/src/components/TextOverflow.js +51 -51
- package/src/components/Tooltip.js +169 -169
- package/src/components/index.js +55 -55
- 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 +89 -88
- package/src/hooks/useFilterData.js +72 -72
- package/src/hooks/useStackData.js +101 -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 +731 -714
- package/tsconfig.json +23 -23
|
@@ -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
|
}
|
|
@@ -19,11 +19,11 @@ function ownKeys(object, enumerableOnly) { var keys = Object.keys(object); if (O
|
|
|
19
19
|
|
|
20
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
21
|
|
|
22
|
-
/**
|
|
23
|
-
* 图表数据动画
|
|
24
|
-
* @param {Array} data data列表
|
|
25
|
-
* @param {boolean} dataAnimation 是否开启数据增长动画
|
|
26
|
-
* @returns 改变后的数据
|
|
22
|
+
/**
|
|
23
|
+
* 图表数据动画
|
|
24
|
+
* @param {Array} data data列表
|
|
25
|
+
* @param {boolean} dataAnimation 是否开启数据增长动画
|
|
26
|
+
* @returns 改变后的数据
|
|
27
27
|
*/
|
|
28
28
|
var _default = function _default(data, dataAnimation) {
|
|
29
29
|
var _useState = (0, _react.useState)([]),
|
package/lib/hooks/useAxes.js
CHANGED
|
@@ -28,11 +28,11 @@ var scales = {
|
|
|
28
28
|
utc: _d3Scale.scaleUtc,
|
|
29
29
|
ordinal: _utils.band
|
|
30
30
|
};
|
|
31
|
-
/**
|
|
32
|
-
* x/y/z轴
|
|
33
|
-
* @param {Array} axes 轴列表数组
|
|
34
|
-
* @param {Object} context 其中需要包括
|
|
35
|
-
* @returns {Map} 返回所有轴
|
|
31
|
+
/**
|
|
32
|
+
* x/y/z轴
|
|
33
|
+
* @param {Array} axes 轴列表数组
|
|
34
|
+
* @param {Object} context 其中需要包括
|
|
35
|
+
* @returns {Map} 返回所有轴
|
|
36
36
|
*/
|
|
37
37
|
|
|
38
38
|
var _default = function _default(_ref) {
|
|
@@ -25,11 +25,11 @@ var initialState = {
|
|
|
25
25
|
currentIndex: null,
|
|
26
26
|
flag: false
|
|
27
27
|
};
|
|
28
|
-
/**
|
|
29
|
-
* x轴滚动逻辑
|
|
30
|
-
* @param {Object} axis x轴配置项
|
|
31
|
-
* @param {Object} config x轴轮播动画的配置项
|
|
32
|
-
* @returns {Map} 返回经过改变后的x轴,主要是ticks和scaler的range发生了改变
|
|
28
|
+
/**
|
|
29
|
+
* x轴滚动逻辑
|
|
30
|
+
* @param {Object} axis x轴配置项
|
|
31
|
+
* @param {Object} config x轴轮播动画的配置项
|
|
32
|
+
* @returns {Map} 返回经过改变后的x轴,主要是ticks和scaler的range发生了改变
|
|
33
33
|
*/
|
|
34
34
|
|
|
35
35
|
var _default = function _default(axis, config) {
|
|
@@ -28,8 +28,10 @@ var stackData = function stackData(data, series) {
|
|
|
28
28
|
return d.x;
|
|
29
29
|
});
|
|
30
30
|
var stacks = (0, _utils.getStacks)(series);
|
|
31
|
-
var min
|
|
32
|
-
|
|
31
|
+
var min, max;
|
|
32
|
+
max = min = (0, _d3v.min)(data, function (d) {
|
|
33
|
+
return d.y;
|
|
34
|
+
});
|
|
33
35
|
dataMap.forEach(function (value) {
|
|
34
36
|
var arr = [];
|
|
35
37
|
(0, _utils.resetStacks)(stacks);
|
|
@@ -61,12 +63,12 @@ var stackData = function stackData(data, series) {
|
|
|
61
63
|
dataMap.clear();
|
|
62
64
|
return [min, max];
|
|
63
65
|
};
|
|
64
|
-
/**
|
|
65
|
-
* 计算轴的domain
|
|
66
|
-
* @param {Array} axes x轴列表
|
|
67
|
-
* @param {Object} series 图表的系列,主要是为了读取type, stack, yOrZ三个字段
|
|
68
|
-
* @param {Object} data 数据列表
|
|
69
|
-
* @returns {Array} 返回带domain的轴
|
|
66
|
+
/**
|
|
67
|
+
* 计算轴的domain
|
|
68
|
+
* @param {Array} axes x轴列表
|
|
69
|
+
* @param {Object} series 图表的系列,主要是为了读取type, stack, yOrZ三个字段
|
|
70
|
+
* @param {Object} data 数据列表
|
|
71
|
+
* @returns {Array} 返回带domain的轴
|
|
70
72
|
*/
|
|
71
73
|
|
|
72
74
|
|
|
@@ -56,11 +56,11 @@ var getSelected = function getSelected(selected, name) {
|
|
|
56
56
|
});
|
|
57
57
|
return tmp;
|
|
58
58
|
};
|
|
59
|
-
/**
|
|
60
|
-
* 图例点击状态管理
|
|
61
|
-
* @param {Array} data 数据
|
|
62
|
-
* @param {Map} series 系列
|
|
63
|
-
* @returns {Array} 返回筛选后的数据和是否选中状态,及控制选中函数
|
|
59
|
+
/**
|
|
60
|
+
* 图例点击状态管理
|
|
61
|
+
* @param {Array} data 数据
|
|
62
|
+
* @param {Map} series 系列
|
|
63
|
+
* @returns {Array} 返回筛选后的数据和是否选中状态,及控制选中函数
|
|
64
64
|
*/
|
|
65
65
|
|
|
66
66
|
|
|
@@ -82,20 +82,16 @@ var setStackData = function setStackData(data, series, stacks) {
|
|
|
82
82
|
});
|
|
83
83
|
}
|
|
84
84
|
}
|
|
85
|
-
|
|
86
|
-
currentSeries.bandLength = currentSeries.type === 'band' ? stacks.filter(function (item) {
|
|
87
|
-
return item.type == 'band';
|
|
88
|
-
}).length : 1;
|
|
89
85
|
}
|
|
90
86
|
});
|
|
91
87
|
dataMap.clear();
|
|
92
88
|
return series;
|
|
93
89
|
};
|
|
94
|
-
/**
|
|
95
|
-
* 计算堆叠数据
|
|
96
|
-
* @param {Array} data 数据
|
|
97
|
-
* @param {Map} series 系列
|
|
98
|
-
* @returns {Array} 返回堆叠后的数据,由一开始的{x, y, s}变成{data: {x, y, s}, bound: [start, end], index}
|
|
90
|
+
/**
|
|
91
|
+
* 计算堆叠数据
|
|
92
|
+
* @param {Array} data 数据
|
|
93
|
+
* @param {Map} series 系列
|
|
94
|
+
* @returns {Array} 返回堆叠后的数据,由一开始的{x, y, s}变成{data: {x, y, s}, bound: [start, end], index}
|
|
99
95
|
*/
|
|
100
96
|
|
|
101
97
|
|
|
@@ -129,7 +125,12 @@ var _default = function _default(_ref2) {
|
|
|
129
125
|
resetStackData(seriesZ);
|
|
130
126
|
setStackData(dataY, seriesY, stacks);
|
|
131
127
|
setStackData(dataZ, seriesZ, stacks);
|
|
132
|
-
return
|
|
128
|
+
return {
|
|
129
|
+
bandLength: stacks.filter(function (item) {
|
|
130
|
+
return item.type == 'band';
|
|
131
|
+
}).length,
|
|
132
|
+
series: [].concat((0, _toConsumableArray2["default"])(seriesY.values()), (0, _toConsumableArray2["default"])(seriesZ.values()))
|
|
133
|
+
};
|
|
133
134
|
}, [_data, _series]);
|
|
134
135
|
return tmp;
|
|
135
136
|
};
|
package/lib/hooks/useTooltip.js
CHANGED
|
@@ -14,16 +14,16 @@ var _react = require("react");
|
|
|
14
14
|
var _utils = require("../utils");
|
|
15
15
|
|
|
16
16
|
var callback = function callback() {};
|
|
17
|
-
/**
|
|
18
|
-
* 主要用于轴类图表,返回当前选中的是哪一个x
|
|
19
|
-
* @param {Array} svg svg的dom实例
|
|
20
|
-
* @param {Number} marginLeft 左间距
|
|
21
|
-
* @param {Number} marginTop 上间距
|
|
22
|
-
* @param {Number} width 宽
|
|
23
|
-
* @param {Number} height 高
|
|
24
|
-
* @param {Number} axisX 类目轴
|
|
25
|
-
* @param {Object} config 轮播动画参数
|
|
26
|
-
* @returns {Object} 返回被选中的名称,坐标,选中方法
|
|
17
|
+
/**
|
|
18
|
+
* 主要用于轴类图表,返回当前选中的是哪一个x
|
|
19
|
+
* @param {Array} svg svg的dom实例
|
|
20
|
+
* @param {Number} marginLeft 左间距
|
|
21
|
+
* @param {Number} marginTop 上间距
|
|
22
|
+
* @param {Number} width 宽
|
|
23
|
+
* @param {Number} height 高
|
|
24
|
+
* @param {Number} axisX 类目轴
|
|
25
|
+
* @param {Object} config 轮播动画参数
|
|
26
|
+
* @returns {Object} 返回被选中的名称,坐标,选中方法
|
|
27
27
|
*/
|
|
28
28
|
|
|
29
29
|
|
package/lib/utils/index.js
CHANGED
|
@@ -6,7 +6,7 @@ Object.defineProperty(exports, "__esModule", {
|
|
|
6
6
|
value: true
|
|
7
7
|
});
|
|
8
8
|
exports.band = band;
|
|
9
|
-
exports.sortPie = exports.seriesYOrZ = exports.resetStacks = exports.reduceConfig = exports.isValidHttpUrl = exports.identity = exports.getTranslate3d = exports.getTranslate2d = exports.getTicksOfAxis = exports.getTickCoord = exports.getStacks = exports.getMousePos = exports.getMargin = exports.getIcon = exports.getGridCoord = exports.getFontStyle = exports.getDomPath = exports.getDataWithPercent = exports.getCurrentStack = exports.getColorList = exports.getChildren = exports.getBreakWord = exports.getBandwidth = exports.getBandSeriesStepAndWidth = exports.getBandBackground = exports.filterChildren = exports.dateFormat = exports.dataYOrZ = void 0;
|
|
9
|
+
exports.sortPie = exports.seriesYOrZ = exports.resetStacks = exports.reduceConfig = exports.isValidHttpUrl = exports.identity = exports.getTranslate3d = exports.getTranslate2d = exports.getTicksOfAxis = exports.getTickCoord = exports.getStacks = exports.getSeriesInfo = exports.getMousePos = exports.getMargin = exports.getIcon = exports.getGridCoord = exports.getFontStyle = exports.getDomPath = exports.getDataWithPercent = exports.getCurrentStack = exports.getColorList = exports.getChildren = exports.getBreakWord = exports.getBandwidth = exports.getBandSeriesStepAndWidth = exports.getBandBackground = exports.filterChildren = exports.dateFormat = exports.dataYOrZ = void 0;
|
|
10
10
|
|
|
11
11
|
var _toConsumableArray2 = _interopRequireDefault(require("@babel/runtime/helpers/toConsumableArray"));
|
|
12
12
|
|
|
@@ -408,15 +408,15 @@ function band() {
|
|
|
408
408
|
};
|
|
409
409
|
|
|
410
410
|
scale.range = function (_) {
|
|
411
|
-
var _ref11
|
|
411
|
+
var _ref11;
|
|
412
412
|
|
|
413
|
-
return arguments.length ? ((_ref11 =
|
|
413
|
+
return arguments.length ? ((_ref11 = (0, _slicedToArray2["default"])(_, 2), r0 = _ref11[0], r1 = _ref11[1]), r0 = +r0, r1 = +r1, rescale()) : [r0, r1];
|
|
414
414
|
};
|
|
415
415
|
|
|
416
416
|
scale.rangeRound = function (_) {
|
|
417
|
-
var
|
|
417
|
+
var _ref12;
|
|
418
418
|
|
|
419
|
-
return (
|
|
419
|
+
return (_ref12 = (0, _slicedToArray2["default"])(_, 2), r0 = _ref12[0], r1 = _ref12[1]), r0 = +r0, r1 = +r1, round = true, rescale();
|
|
420
420
|
};
|
|
421
421
|
|
|
422
422
|
scale.bandwidth = function () {
|
|
@@ -481,14 +481,14 @@ function initRange(domain, range) {
|
|
|
481
481
|
|
|
482
482
|
var getStacks = function getStacks(series) {
|
|
483
483
|
var tmp = [];
|
|
484
|
-
series.forEach(function (
|
|
485
|
-
var type =
|
|
486
|
-
stack =
|
|
487
|
-
yOrZ =
|
|
488
|
-
var current = tmp.find(function (
|
|
489
|
-
var _type =
|
|
490
|
-
_stack =
|
|
491
|
-
_yOrZ =
|
|
484
|
+
series.forEach(function (_ref13, name) {
|
|
485
|
+
var type = _ref13.type,
|
|
486
|
+
stack = _ref13.stack,
|
|
487
|
+
yOrZ = _ref13.yOrZ;
|
|
488
|
+
var current = tmp.find(function (_ref14) {
|
|
489
|
+
var _type = _ref14.type,
|
|
490
|
+
_stack = _ref14.stack,
|
|
491
|
+
_yOrZ = _ref14.yOrZ;
|
|
492
492
|
return _type == type && stack && _stack == stack && yOrZ == _yOrZ;
|
|
493
493
|
});
|
|
494
494
|
|
|
@@ -523,9 +523,9 @@ var getStacks = function getStacks(series) {
|
|
|
523
523
|
|
|
524
524
|
exports.getStacks = getStacks;
|
|
525
525
|
|
|
526
|
-
var dataYOrZ = function dataYOrZ(data,
|
|
527
|
-
var seriesY =
|
|
528
|
-
seriesZ =
|
|
526
|
+
var dataYOrZ = function dataYOrZ(data, _ref15) {
|
|
527
|
+
var seriesY = _ref15.y,
|
|
528
|
+
seriesZ = _ref15.z;
|
|
529
529
|
var tmp = {
|
|
530
530
|
y: [],
|
|
531
531
|
z: []
|
|
@@ -577,11 +577,11 @@ var resetStacks = function resetStacks(stacks) {
|
|
|
577
577
|
exports.resetStacks = resetStacks;
|
|
578
578
|
|
|
579
579
|
var getCurrentStack = function getCurrentStack(stack, stackMap) {
|
|
580
|
-
return stackMap.find(function (
|
|
581
|
-
var _stack =
|
|
582
|
-
_type =
|
|
583
|
-
_yOrZ =
|
|
584
|
-
_s =
|
|
580
|
+
return stackMap.find(function (_ref16) {
|
|
581
|
+
var _stack = _ref16.stack,
|
|
582
|
+
_type = _ref16.type,
|
|
583
|
+
_yOrZ = _ref16.yOrZ,
|
|
584
|
+
_s = _ref16.s;
|
|
585
585
|
return _type == stack.type && _stack == stack.stack && _yOrZ == stack.yOrZ && _s.includes(stack.name);
|
|
586
586
|
});
|
|
587
587
|
};
|
|
@@ -609,10 +609,10 @@ var getBandwidth = function getBandwidth(step, paddingOuter) {
|
|
|
609
609
|
|
|
610
610
|
exports.getBandwidth = getBandwidth;
|
|
611
611
|
|
|
612
|
-
var getBandSeriesStepAndWidth = function getBandSeriesStepAndWidth(
|
|
613
|
-
var width =
|
|
614
|
-
paddingInner =
|
|
615
|
-
bandLength =
|
|
612
|
+
var getBandSeriesStepAndWidth = function getBandSeriesStepAndWidth(_ref17) {
|
|
613
|
+
var width = _ref17.width,
|
|
614
|
+
paddingInner = _ref17.paddingInner,
|
|
615
|
+
bandLength = _ref17.bandLength;
|
|
616
616
|
var seriesStep = width / (bandLength == 0 ? 1 : bandLength);
|
|
617
617
|
var seriesWidth = seriesStep * (1 - paddingInner);
|
|
618
618
|
return {
|
|
@@ -623,6 +623,27 @@ var getBandSeriesStepAndWidth = function getBandSeriesStepAndWidth(_ref19) {
|
|
|
623
623
|
|
|
624
624
|
exports.getBandSeriesStepAndWidth = getBandSeriesStepAndWidth;
|
|
625
625
|
|
|
626
|
+
var getSeriesInfo = function getSeriesInfo(_ref18) {
|
|
627
|
+
var step = _ref18.step,
|
|
628
|
+
_ref18$bandLength = _ref18.bandLength,
|
|
629
|
+
bandLength = _ref18$bandLength === void 0 ? 1 : _ref18$bandLength,
|
|
630
|
+
_ref18$paddingInner = _ref18.paddingInner,
|
|
631
|
+
paddingInner = _ref18$paddingInner === void 0 ? 0 : _ref18$paddingInner,
|
|
632
|
+
_ref18$paddingOuter = _ref18.paddingOuter,
|
|
633
|
+
paddingOuter = _ref18$paddingOuter === void 0 ? 0 : _ref18$paddingOuter;
|
|
634
|
+
|
|
635
|
+
var _step = step / (bandLength + paddingOuter * 2 + paddingInner * (bandLength - 1));
|
|
636
|
+
|
|
637
|
+
return {
|
|
638
|
+
seriesWidth: _step,
|
|
639
|
+
seriesStep: (1 + paddingInner) * _step,
|
|
640
|
+
seriesStart: paddingOuter * _step,
|
|
641
|
+
width: step - paddingOuter * 2 * _step
|
|
642
|
+
};
|
|
643
|
+
};
|
|
644
|
+
|
|
645
|
+
exports.getSeriesInfo = getSeriesInfo;
|
|
646
|
+
|
|
626
647
|
var isValidHttpUrl = function isValidHttpUrl(string) {
|
|
627
648
|
var url;
|
|
628
649
|
|
|
@@ -740,27 +761,27 @@ var sortPie = function sortPie(data, order) {
|
|
|
740
761
|
|
|
741
762
|
switch (order) {
|
|
742
763
|
case '':
|
|
743
|
-
_data.sort(function (
|
|
744
|
-
var a =
|
|
745
|
-
var b =
|
|
764
|
+
_data.sort(function (_ref19, _ref20) {
|
|
765
|
+
var a = _ref19.index;
|
|
766
|
+
var b = _ref20.index;
|
|
746
767
|
return (0, _d3v.ascending)(a, b);
|
|
747
768
|
});
|
|
748
769
|
|
|
749
770
|
break;
|
|
750
771
|
|
|
751
772
|
case 'desc':
|
|
752
|
-
_data.sort(function (
|
|
753
|
-
var a =
|
|
754
|
-
var b =
|
|
773
|
+
_data.sort(function (_ref21, _ref22) {
|
|
774
|
+
var a = _ref21.value;
|
|
775
|
+
var b = _ref22.value;
|
|
755
776
|
return (0, _d3v.descending)(a, b);
|
|
756
777
|
});
|
|
757
778
|
|
|
758
779
|
break;
|
|
759
780
|
|
|
760
781
|
case 'asc':
|
|
761
|
-
_data.sort(function (
|
|
762
|
-
var a =
|
|
763
|
-
var b =
|
|
782
|
+
_data.sort(function (_ref23, _ref24) {
|
|
783
|
+
var a = _ref23.value;
|
|
784
|
+
var b = _ref24.value;
|
|
764
785
|
return (0, _d3v.ascending)(a, b);
|
|
765
786
|
});
|
|
766
787
|
|
|
@@ -809,15 +830,15 @@ var getDataWithPercent = function getDataWithPercent() {
|
|
|
809
830
|
return d.vote;
|
|
810
831
|
});
|
|
811
832
|
var remainder = targetSeats - currentSum;
|
|
812
|
-
votesPerQuota.sort(function (
|
|
813
|
-
var a =
|
|
814
|
-
var b =
|
|
833
|
+
votesPerQuota.sort(function (_ref25, _ref26) {
|
|
834
|
+
var a = _ref25.value;
|
|
835
|
+
var b = _ref26.value;
|
|
815
836
|
return a % total - b % total;
|
|
816
837
|
});
|
|
817
|
-
var tmp = votesPerQuota.map(function (
|
|
818
|
-
var vote =
|
|
819
|
-
value =
|
|
820
|
-
data = (0, _objectWithoutProperties2["default"])(
|
|
838
|
+
var tmp = votesPerQuota.map(function (_ref27, index) {
|
|
839
|
+
var vote = _ref27.vote,
|
|
840
|
+
value = _ref27.value,
|
|
841
|
+
data = (0, _objectWithoutProperties2["default"])(_ref27, _excluded2);
|
|
821
842
|
|
|
822
843
|
var obj = _objectSpread(_objectSpread({}, data), {}, {
|
|
823
844
|
value: value,
|
package/package.json
CHANGED
|
@@ -1,53 +1,54 @@
|
|
|
1
|
-
{
|
|
2
|
-
"name": "@easyv/charts",
|
|
3
|
-
"version": "1.
|
|
4
|
-
"description": "",
|
|
5
|
-
"main": "lib/index.js",
|
|
6
|
-
"scripts": {
|
|
7
|
-
"make": "babel src -d lib --extensions .ts,.tsx,.js && cp -r src/css lib",
|
|
8
|
-
"prepare": "husky install"
|
|
9
|
-
},
|
|
10
|
-
"keywords": [],
|
|
11
|
-
"author": "",
|
|
12
|
-
"license": "ISC",
|
|
13
|
-
"devDependencies": {
|
|
14
|
-
"@babel/cli": "^7.17.10",
|
|
15
|
-
"@babel/core": "^7.17.10",
|
|
16
|
-
"@babel/plugin-proposal-class-properties": "^7.16.7",
|
|
17
|
-
"@babel/plugin-proposal-export-default-from": "^7.16.7",
|
|
18
|
-
"@babel/plugin-transform-runtime": "^7.17.10",
|
|
19
|
-
"@babel/preset-env": "^7.17.10",
|
|
20
|
-
"@babel/preset-react": "^7.16.7",
|
|
21
|
-
"@babel/preset-typescript": "^7.16.7",
|
|
22
|
-
"@commitlint/cli": "^16.2.4",
|
|
23
|
-
"@commitlint/config-conventional": "^16.2.4",
|
|
24
|
-
"@types/d3": "^7.0.0",
|
|
25
|
-
"@types/react": "^
|
|
26
|
-
"
|
|
27
|
-
"babel-
|
|
28
|
-
"
|
|
29
|
-
"
|
|
30
|
-
"
|
|
31
|
-
"
|
|
32
|
-
|
|
33
|
-
|
|
34
|
-
|
|
35
|
-
"
|
|
36
|
-
"
|
|
37
|
-
"
|
|
38
|
-
"
|
|
39
|
-
"
|
|
40
|
-
"
|
|
41
|
-
"svg-
|
|
42
|
-
|
|
43
|
-
|
|
44
|
-
|
|
45
|
-
|
|
46
|
-
|
|
47
|
-
|
|
48
|
-
|
|
49
|
-
|
|
50
|
-
|
|
51
|
-
|
|
52
|
-
|
|
53
|
-
}
|
|
1
|
+
{
|
|
2
|
+
"name": "@easyv/charts",
|
|
3
|
+
"version": "1.3.0",
|
|
4
|
+
"description": "",
|
|
5
|
+
"main": "lib/index.js",
|
|
6
|
+
"scripts": {
|
|
7
|
+
"make": "babel src -d lib --extensions .ts,.tsx,.js && cp -r src/css lib",
|
|
8
|
+
"prepare": "husky install"
|
|
9
|
+
},
|
|
10
|
+
"keywords": [],
|
|
11
|
+
"author": "",
|
|
12
|
+
"license": "ISC",
|
|
13
|
+
"devDependencies": {
|
|
14
|
+
"@babel/cli": "^7.17.10",
|
|
15
|
+
"@babel/core": "^7.17.10",
|
|
16
|
+
"@babel/plugin-proposal-class-properties": "^7.16.7",
|
|
17
|
+
"@babel/plugin-proposal-export-default-from": "^7.16.7",
|
|
18
|
+
"@babel/plugin-transform-runtime": "^7.17.10",
|
|
19
|
+
"@babel/preset-env": "^7.17.10",
|
|
20
|
+
"@babel/preset-react": "^7.16.7",
|
|
21
|
+
"@babel/preset-typescript": "^7.16.7",
|
|
22
|
+
"@commitlint/cli": "^16.2.4",
|
|
23
|
+
"@commitlint/config-conventional": "^16.2.4",
|
|
24
|
+
"@types/d3": "^7.0.0",
|
|
25
|
+
"@types/react": "^18.0.12",
|
|
26
|
+
"@types/react-dom": "^18.0.5",
|
|
27
|
+
"babel-plugin-transform-import-styles": "^0.0.11",
|
|
28
|
+
"babel-preset-env": "^1.7.0",
|
|
29
|
+
"cz-conventional-changelog": "^3.3.0",
|
|
30
|
+
"husky": "^7.0.4",
|
|
31
|
+
"load-styles": "^2.0.0",
|
|
32
|
+
"standard-version": "^9.3.2"
|
|
33
|
+
},
|
|
34
|
+
"dependencies": {
|
|
35
|
+
"@easyv/utils": "^0.0.45",
|
|
36
|
+
"d3v7": "npm:d3@^7.0.0",
|
|
37
|
+
"gitignore": "^0.7.0",
|
|
38
|
+
"mrm": "^4.0.0",
|
|
39
|
+
"popmotion": "^9.3.6",
|
|
40
|
+
"react": "^17.0.2",
|
|
41
|
+
"svg-path-properties": "^1.0.11",
|
|
42
|
+
"svg-points": "^6.0.1"
|
|
43
|
+
},
|
|
44
|
+
"config": {
|
|
45
|
+
"commitizen": {
|
|
46
|
+
"path": "./node_modules/cz-conventional-changelog"
|
|
47
|
+
}
|
|
48
|
+
},
|
|
49
|
+
"standard-version": {
|
|
50
|
+
"skip": {
|
|
51
|
+
"commit": true
|
|
52
|
+
}
|
|
53
|
+
}
|
|
54
|
+
}
|
|
@@ -1,24 +1,24 @@
|
|
|
1
|
-
/**
|
|
2
|
-
* 用来做图表数据改变(增长)动画(HOC)
|
|
3
|
-
*/
|
|
4
|
-
import React, { memo, ComponentType } from 'react';
|
|
5
|
-
import { useAnimateData } from '../hooks';
|
|
6
|
-
|
|
7
|
-
export default (Component: ComponentType<any>) =>
|
|
8
|
-
memo(
|
|
9
|
-
({
|
|
10
|
-
data,
|
|
11
|
-
config: { dataAnimation, ...config },
|
|
12
|
-
...rest
|
|
13
|
-
}: {
|
|
14
|
-
data: DataType[];
|
|
15
|
-
config: { dataAnimation: DataAnimation; [key: string]: any };
|
|
16
|
-
[key: string]: any;
|
|
17
|
-
}) => (
|
|
18
|
-
<Component
|
|
19
|
-
{...rest}
|
|
20
|
-
config={config}
|
|
21
|
-
data={useAnimateData(data, dataAnimation)}
|
|
22
|
-
/>
|
|
23
|
-
)
|
|
24
|
-
);
|
|
1
|
+
/**
|
|
2
|
+
* 用来做图表数据改变(增长)动画(HOC)
|
|
3
|
+
*/
|
|
4
|
+
import React, { memo, ComponentType } from 'react';
|
|
5
|
+
import { useAnimateData } from '../hooks';
|
|
6
|
+
|
|
7
|
+
export default (Component: ComponentType<any>) =>
|
|
8
|
+
memo(
|
|
9
|
+
({
|
|
10
|
+
data,
|
|
11
|
+
config: { dataAnimation, ...config },
|
|
12
|
+
...rest
|
|
13
|
+
}: {
|
|
14
|
+
data: DataType[];
|
|
15
|
+
config: { dataAnimation: DataAnimation; [key: string]: any };
|
|
16
|
+
[key: string]: any;
|
|
17
|
+
}) => (
|
|
18
|
+
<Component
|
|
19
|
+
{...rest}
|
|
20
|
+
config={config}
|
|
21
|
+
data={useAnimateData(data, dataAnimation)}
|
|
22
|
+
/>
|
|
23
|
+
)
|
|
24
|
+
);
|