@easyv/charts 1.3.9 → 1.3.11

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 (74) hide show
  1. package/.babelrc +8 -8
  2. package/.husky/commit-msg +3 -3
  3. package/CHANGELOG.md +18 -18
  4. package/lib/components/Axis.js +10 -10
  5. package/lib/components/Background.js +2 -2
  6. package/lib/components/Band.js +22 -1
  7. package/lib/components/Carousel.js +2 -2
  8. package/lib/components/CartesianChart.js +1 -1
  9. package/lib/components/ConicalGradient.js +21 -21
  10. package/lib/components/Indicator.js +2 -2
  11. package/lib/components/Lighter.js +179 -179
  12. package/lib/components/Line.js +6 -0
  13. package/lib/components/LinearGradient.js +2 -2
  14. package/lib/components/Marquee.js +3 -3
  15. package/lib/components/TextOverflow.js +3 -3
  16. package/lib/css/index.module.css +41 -41
  17. package/lib/css/piechart.module.css +26 -26
  18. package/lib/element/ConicGradient.js +72 -72
  19. package/lib/hooks/useAnimateData.js +5 -5
  20. package/lib/hooks/useAxes.js +5 -5
  21. package/lib/hooks/useCarouselAxisX.js +5 -5
  22. package/lib/hooks/useExtentData.js +6 -6
  23. package/lib/hooks/useFilterData.js +5 -5
  24. package/lib/hooks/useStackData.js +5 -5
  25. package/lib/hooks/useTooltip.js +10 -10
  26. package/lib/utils/index.js +91 -74
  27. package/package.json +54 -54
  28. package/src/components/AnimateData.tsx +24 -24
  29. package/src/components/Axis.tsx +354 -354
  30. package/src/components/Background.tsx +62 -62
  31. package/src/components/Band.tsx +191 -169
  32. package/src/components/BaseLine.js +82 -82
  33. package/src/components/Brush.js +159 -159
  34. package/src/components/Carousel.tsx +144 -144
  35. package/src/components/CartesianChart.js +3 -1
  36. package/src/components/Chart.js +99 -99
  37. package/src/components/ChartContainer.tsx +63 -63
  38. package/src/components/ConicalGradient.js +258 -258
  39. package/src/components/ExtentData.js +17 -17
  40. package/src/components/FilterData.js +23 -23
  41. package/src/components/Indicator.js +13 -13
  42. package/src/components/Label.js +226 -226
  43. package/src/components/Legend.js +158 -158
  44. package/src/components/Lighter.jsx +173 -173
  45. package/src/components/Line.js +150 -145
  46. package/src/components/LinearGradient.js +29 -29
  47. package/src/components/Mapping.js +71 -71
  48. package/src/components/Marquee.js +97 -97
  49. package/src/components/PieChart.js +1278 -1278
  50. package/src/components/StackData.js +16 -16
  51. package/src/components/StereoBar.tsx +307 -307
  52. package/src/components/TextOverflow.js +51 -51
  53. package/src/components/Tooltip.js +169 -169
  54. package/src/components/index.js +55 -55
  55. package/src/context/index.js +2 -2
  56. package/src/css/index.module.css +41 -41
  57. package/src/css/piechart.module.css +26 -26
  58. package/src/element/ConicGradient.jsx +55 -55
  59. package/src/element/Line.tsx +33 -33
  60. package/src/element/index.ts +3 -3
  61. package/src/formatter/index.js +1 -1
  62. package/src/formatter/legend.js +90 -90
  63. package/src/hooks/index.js +17 -17
  64. package/src/hooks/useAnimateData.ts +67 -67
  65. package/src/hooks/useAxes.js +144 -144
  66. package/src/hooks/useCarouselAxisX.js +163 -163
  67. package/src/hooks/useExtentData.js +89 -89
  68. package/src/hooks/useFilterData.js +72 -72
  69. package/src/hooks/useStackData.js +101 -101
  70. package/src/hooks/useTooltip.ts +96 -96
  71. package/src/index.js +6 -6
  72. package/src/types/index.d.ts +67 -67
  73. package/src/utils/index.js +755 -738
  74. package/tsconfig.json +23 -23
@@ -17,9 +17,9 @@ function ownKeys(object, enumerableOnly) { var keys = Object.keys(object); if (O
17
17
 
18
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
19
 
20
- /**
21
- * 文字跑马灯组件
22
- * eg: <Marquee value={文本内容} speed={跑马灯速度} style={额外样式}></Marquee>
20
+ /**
21
+ * 文字跑马灯组件
22
+ * eg: <Marquee value={文本内容} speed={跑马灯速度} style={额外样式}></Marquee>
23
23
  */
24
24
  var _default = /*#__PURE__*/(0, _react.memo)(function (props) {
25
25
  var value = props.value,
@@ -17,9 +17,9 @@ function ownKeys(object, enumerableOnly) { var keys = Object.keys(object); if (O
17
17
 
18
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
19
 
20
- /**
21
- * 文本溢出组件
22
- * eg: <TextOverflow type={溢出形式} value={文本内容} speed={跑马灯速度} style={额外样式}></Marquee>
20
+ /**
21
+ * 文本溢出组件
22
+ * eg: <TextOverflow type={溢出形式} value={文本内容} speed={跑马灯速度} style={额外样式}></Marquee>
23
23
  */
24
24
  var _default = /*#__PURE__*/(0, _react.memo)(function (props) {
25
25
  var type = props.type,
@@ -1,42 +1,42 @@
1
- .rotateClockwise {
2
- animation-name: rotateClockwise;
3
- }
4
-
5
- @keyframes rotateClockwise {
6
- 0% {
7
- transform: rotate(0deg);
8
- }
9
- 100% {
10
- transform: rotate(360deg);
11
- }
12
- }
13
-
14
- .rotateCounterClockwise {
15
- animation-name: rotateCounterClockwise;
16
- }
17
-
18
- @keyframes rotateCounterClockwise {
19
- 0% {
20
- transform: rotate(360deg);
21
- }
22
- 100% {
23
- transform: rotate(0deg);
24
- }
25
- }
26
-
27
- .showAllStyle {
28
- display: grid;
29
- width: 100%;
30
- grid-template-columns: 40% 30% 30%;
31
- align-items: center;
32
- flex-direction: row;
33
- justify-content: space-between;
34
- }
35
-
36
- .notShowAllStyle {
37
- display: flex;
38
- width: 100%;
39
- align-items: center;
40
- flex-direction: row;
41
- justify-content: space-between;
1
+ .rotateClockwise {
2
+ animation-name: rotateClockwise;
3
+ }
4
+
5
+ @keyframes rotateClockwise {
6
+ 0% {
7
+ transform: rotate(0deg);
8
+ }
9
+ 100% {
10
+ transform: rotate(360deg);
11
+ }
12
+ }
13
+
14
+ .rotateCounterClockwise {
15
+ animation-name: rotateCounterClockwise;
16
+ }
17
+
18
+ @keyframes rotateCounterClockwise {
19
+ 0% {
20
+ transform: rotate(360deg);
21
+ }
22
+ 100% {
23
+ transform: rotate(0deg);
24
+ }
25
+ }
26
+
27
+ .showAllStyle {
28
+ display: grid;
29
+ width: 100%;
30
+ grid-template-columns: 40% 30% 30%;
31
+ align-items: center;
32
+ flex-direction: row;
33
+ justify-content: space-between;
34
+ }
35
+
36
+ .notShowAllStyle {
37
+ display: flex;
38
+ width: 100%;
39
+ align-items: center;
40
+ flex-direction: row;
41
+ justify-content: space-between;
42
42
  }
@@ -1,27 +1,27 @@
1
- /*甜甜圈图专用css*/
2
- .label-line {
3
- stroke-dasharray: 100;
4
- stroke-dashoffset: 100;
5
- animation: dash 800ms ease forwards;
6
- }
7
-
8
- .label-text {
9
- opacity: 0;
10
- animation: show 800ms ease forwards;
11
- }
12
-
13
- .inner-arc {
14
- animation: dash 2s ease forwards;
15
- }
16
-
17
- @keyframes dash {
18
- 100% {
19
- stroke-dashoffset: 0%;
20
- }
21
- }
22
-
23
- @keyframes show {
24
- 100% {
25
- opacity: 1;
26
- }
1
+ /*甜甜圈图专用css*/
2
+ .label-line {
3
+ stroke-dasharray: 100;
4
+ stroke-dashoffset: 100;
5
+ animation: dash 800ms ease forwards;
6
+ }
7
+
8
+ .label-text {
9
+ opacity: 0;
10
+ animation: show 800ms ease forwards;
11
+ }
12
+
13
+ .inner-arc {
14
+ animation: dash 2s ease forwards;
15
+ }
16
+
17
+ @keyframes dash {
18
+ 100% {
19
+ stroke-dashoffset: 0%;
20
+ }
21
+ }
22
+
23
+ @keyframes show {
24
+ 100% {
25
+ opacity: 1;
26
+ }
27
27
  }
@@ -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)([]),
@@ -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) {
@@ -63,12 +63,12 @@ var stackData = function stackData(data, series) {
63
63
  dataMap.clear();
64
64
  return [min, max];
65
65
  };
66
- /**
67
- * 计算轴的domain
68
- * @param {Array} axes x轴列表
69
- * @param {Object} series 图表的系列,主要是为了读取type, stack, yOrZ三个字段
70
- * @param {Object} data 数据列表
71
- * @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的轴
72
72
  */
73
73
 
74
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
 
@@ -87,11 +87,11 @@ var setStackData = function setStackData(data, series, stacks) {
87
87
  dataMap.clear();
88
88
  return series;
89
89
  };
90
- /**
91
- * 计算堆叠数据
92
- * @param {Array} data 数据
93
- * @param {Map} series 系列
94
- * @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}
95
95
  */
96
96
 
97
97
 
@@ -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