@easyv/charts 1.7.23 → 1.7.25

package/lib/components/CartesianChart.js

@@ -24,13 +24,12 @@ function _objectSpread(e) { for (var r = 1; r < arguments.length; r++) { var t =
  * 轴类图表
  */
 var Chart = /*#__PURE__*/(0, _react.memo)(function (_ref) {
-  var _ref$config = _ref.config,
+  var width = _ref.width,
+    height = _ref.height,
+    _ref$config = _ref.config,
     axesConfig = _ref$config.axes,
     background = _ref$config.background,
     _ref$config$chart = _ref$config.chart,
-    _ref$config$chart$dim = _ref$config$chart.dimension.chartDimension,
-    height = _ref$config$chart$dim.height,
-    width = _ref$config$chart$dim.width,
     _ref$config$chart$mar = _ref$config$chart.margin,
     marginLeft = _ref$config$chart$mar.marginLeft,
     marginTop = _ref$config$chart$mar.marginTop,
@@ -394,20 +393,22 @@ var Chart = /*#__PURE__*/(0, _react.memo)(function (_ref) {
       var mouseleave = function mouseleave() {
         isEnter = false;
       };
+      var svgDom = svg.current;
+      var controlDom = controlEl.current;
       if (hover) {
-        svg.current.addEventListener("mouseenter", mouseenter);
-        svg.current.addEventListener("mouseleave", mouseleave);
-        controlEl.current.addEventListener("mouseenter", mouseenter);
-        controlEl.current.addEventListener("mouseleave", mouseleave);
+        svgDom && svgDom.addEventListener("mouseenter", mouseenter);
+        svgDom && svgDom.addEventListener("mouseleave", mouseleave);
+        controlDom && controlDom.addEventListener("mouseenter", mouseenter);
+        controlDom && controlDom.addEventListener("mouseleave", mouseleave);
       }
       if (show) {
         startAnimate();
       }
       return function () {
-        svg.current.removeEventListener("mouseenter", mouseenter);
-        svg.current.removeEventListener("mouseleave", mouseleave);
-        controlEl.current.removeEventListener("mouseenter", mouseenter);
-        controlEl.current.removeEventListener("mouseleave", mouseleave);
+        svgDom && svgDom.removeEventListener("mouseenter", mouseenter);
+        svgDom && svgDom.removeEventListener("mouseleave", mouseleave);
+        controlDom && controlDom.removeEventListener("mouseenter", mouseenter);
+        controlDom && controlDom.removeEventListener("mouseleave", mouseleave);
         cancelAnimationFrame(controlTimer.current);
       };
     }
@@ -442,11 +443,12 @@ var Chart = /*#__PURE__*/(0, _react.memo)(function (_ref) {
     });
   }, [tooltipX, tickName]);
   (0, _react.useEffect)(function () {
-    svg.current.addEventListener("touchmove", setTouchIndex, {
+    var svgDom = svg.current;
+    svgDom && svgDom.addEventListener("touchmove", setTouchIndex, {
       passive: false
     });
     return function () {
-      svg.current.removeEventListener("touchmove", setTouchIndex);
+      svgDom && svgDom.removeEventListener("touchmove", setTouchIndex);
     };
   }, [control]);
   return /*#__PURE__*/_react["default"].createElement(_react["default"].Fragment, null, /*#__PURE__*/_react["default"].createElement(_.ChartContainer, {

package/lib/components/Chart.js

@@ -39,11 +39,7 @@ var Chart = /*#__PURE__*/(0, _react.memo)(function (_ref2) {
     config = _ref2.config,
     _ref2$config = _ref2.config,
     axes = _ref2$config.axes,
-    _ref2$config$chart = _ref2$config.chart,
-    _ref2$config$chart$di = _ref2$config$chart.dimension.chartDimension,
-    height = _ref2$config$chart$di.height,
-    width = _ref2$config$chart$di.width,
-    _ref2$config$chart$ma = _ref2$config$chart.margin,
+    _ref2$config$chart$ma = _ref2$config.chart.margin,
     marginRight = _ref2$config$chart$ma.marginRight,
     marginLeft = _ref2$config$chart$ma.marginLeft,
     marginBottom = _ref2$config$chart$ma.marginBottom,
@@ -54,6 +50,8 @@ var Chart = /*#__PURE__*/(0, _react.memo)(function (_ref2) {
     emit = _ref2.emit,
     emitEvent = _ref2.emitEvent,
     props = (0, _objectWithoutProperties2["default"])(_ref2, _excluded);
+  var width = props.width,
+    height = props.height;
   var isIOS = (0, _react.useRef)(/iPad|iPhone|iPod|iOS|CriOS/i.test(navigator.userAgent));
   var svg = /*#__PURE__*/(0, _react.createRef)();
   var chartWidth = width - marginLeft - marginRight;

package/lib/components/PieChart.js

@@ -232,11 +232,10 @@ var getCircleScale = function getCircleScale() {
   }));
 };
 var Component = /*#__PURE__*/(0, _react.memo)(function (_ref5) {
-  var _ref5$config = _ref5.config,
+  var width = _ref5.width,
+    height = _ref5.height,
+    _ref5$config = _ref5.config,
     _ref5$config$chart = _ref5$config.chart,
-    _ref5$config$chart$di = _ref5$config$chart.dimension.chartDimension,
-    width = _ref5$config$chart$di.width,
-    height = _ref5$config$chart$di.height,
     label = _ref5$config$chart.label,
     _ref5$config$chart$le = _ref5$config$chart.legend,
     _ref5$config$chart$le2 = _ref5$config$chart$le.formatter,

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@easyv/charts",
-  "version": "1.7.23",
+  "version": "1.7.25",
   "description": "",
   "main": "lib/index.js",
   "scripts": {
@@ -32,7 +32,7 @@
     "standard-version": "^9.3.2"
   },
   "dependencies": {
-    "@easyv/utils": "^0.0.45",
+    "@easyv/utils": "^0.0.50",
     "d3v7": "npm:d3@^7.0.0",
     "gitignore": "^0.7.0",
     "mrm": "^4.0.0",

package/src/components/CartesianChart.js

@@ -33,13 +33,11 @@ import {
 
 const Chart = memo(
   ({
+    width, height,
     config: {
       axes: axesConfig,
       background,
       chart: {
-        dimension: {
-          chartDimension: { height, width },
-        },
         margin: { marginLeft, marginTop, marginRight, marginBottom },
         animation,
         legend,
@@ -372,20 +370,22 @@ const Chart = memo(
         const mouseleave = () => {
           isEnter = false;
         };
+        const svgDom = svg.current;
+        const controlDom = controlEl.current;
         if(hover){
-          svg.current.addEventListener("mouseenter",mouseenter);
-          svg.current.addEventListener("mouseleave",mouseleave);
-          controlEl.current.addEventListener("mouseenter",mouseenter);
-          controlEl.current.addEventListener("mouseleave",mouseleave);
+          svgDom && svgDom.addEventListener("mouseenter",mouseenter);
+          svgDom && svgDom.addEventListener("mouseleave",mouseleave);
+          controlDom && controlDom.addEventListener("mouseenter",mouseenter);
+          controlDom && controlDom.addEventListener("mouseleave",mouseleave);
         }
         if(show){
           startAnimate();
         }
         return () => {
-          svg.current.removeEventListener("mouseenter",mouseenter);
-          svg.current.removeEventListener("mouseleave",mouseleave);
-          controlEl.current.removeEventListener("mouseenter",mouseenter);
-          controlEl.current.removeEventListener("mouseleave",mouseleave);
+          svgDom && svgDom.removeEventListener("mouseenter",mouseenter);
+          svgDom && svgDom.removeEventListener("mouseleave",mouseleave);
+          controlDom && controlDom.removeEventListener("mouseenter",mouseenter);
+          controlDom && controlDom.removeEventListener("mouseleave",mouseleave);
           cancelAnimationFrame(controlTimer.current);
         };
       }
@@ -411,9 +411,10 @@ const Chart = memo(
       })
     },[tooltipX, tickName]);
     useEffect(()=>{
-      svg.current.addEventListener("touchmove", setTouchIndex, {passive:false});
+      const svgDom = svg.current;
+      svgDom && svgDom.addEventListener("touchmove", setTouchIndex, {passive:false});
       return ()=>{
-        svg.current.removeEventListener("touchmove", setTouchIndex);
+        svgDom && svgDom.removeEventListener("touchmove", setTouchIndex);
       }
     },[control]);
 

package/src/components/Chart.js

@@ -26,9 +26,6 @@ const Chart = memo(
     config: {
       axes,
       chart: {
-        dimension: {
-          chartDimension: { height, width },
-        },
         margin: { marginRight, marginLeft, marginBottom, marginTop },
       },
       interaction,
@@ -39,6 +36,7 @@ const Chart = memo(
     emitEvent,
     ...props
   }) => {
+    const { width, height } = props;
     const isIOS = useRef(/iPad|iPhone|iPod|iOS|CriOS/i.test(navigator.userAgent));
     const svg = createRef();
     const chartWidth = width - marginLeft - marginRight;

package/src/components/PieChart.js

@@ -247,11 +247,9 @@ const getCircleScale = ({ count, color, width, length } = tick, radius) => {
 
 const Component = memo(
   ({
+    width, height,
     config: {
       chart: {
-        dimension: {
-          chartDimension: { width, height },
-        },
         label,
         legend: { formatter = legendFormatter, ...legend },
         animation: { ringDuration, labelDuration } = {},