@easyv/charts 1.2.11 → 1.2.12

package/lib/components/BaseLine.js

@@ -49,7 +49,6 @@ var _default = /*#__PURE__*/(0, _react.memo)(function (_ref) {
       yScaler = _ref.yAxis.scaler,
       data = _ref.data;
   if (!data.value) return null;
-  console.log(orientation, 'orientation');
   var x1 = orientation == 'left' ? yScaler(data.value) : marginLeft,
       x2 = orientation == 'left' ? yScaler(data.value) : width - marginRight,
       y1 = orientation == 'left' ? marginLeft : yScaler(data.value),

package/lib/components/CartesianChart.js

@@ -46,11 +46,12 @@ var Chart = /*#__PURE__*/(0, _react.memo)(function (_ref) {
       series = _ref$config.series,
       tooltip = _ref$config.tooltip,
       _ref$config$baseLine = _ref$config.baseLine,
-      baseLineOri = _ref$config$baseLine.orientation,
-      _ref$config$baseLine$ = _ref$config$baseLine.config,
-      baseLineConfig = _ref$config$baseLine$ === void 0 ? {} : _ref$config$baseLine$,
-      _ref$config$baseLine$2 = _ref$config$baseLine.data,
-      baseLineData = _ref$config$baseLine$2 === void 0 ? [] : _ref$config$baseLine$2,
+      _ref$config$baseLine$ = _ref$config$baseLine.orientation,
+      baseLineOri = _ref$config$baseLine$ === void 0 ? '' : _ref$config$baseLine$,
+      _ref$config$baseLine$2 = _ref$config$baseLine.config,
+      baseLineConfig = _ref$config$baseLine$2 === void 0 ? {} : _ref$config$baseLine$2,
+      _ref$config$baseLine$3 = _ref$config$baseLine.data,
+      baseLineData = _ref$config$baseLine$3 === void 0 ? [] : _ref$config$baseLine$3,
       _ref$config$tooltip = _ref$config.tooltip;
   _ref$config$tooltip = _ref$config$tooltip === void 0 ? {} : _ref$config$tooltip;
   var _ref$config$tooltip$c = _ref$config$tooltip.config,

package/lib/components/Marquee.js

@@ -9,8 +9,6 @@ exports["default"] = void 0;
 
 var _defineProperty2 = _interopRequireDefault(require("@babel/runtime/helpers/defineProperty"));
 
-var _slicedToArray2 = _interopRequireDefault(require("@babel/runtime/helpers/slicedToArray"));
-
 var _react = require("react");
 
 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; }
@@ -27,33 +25,32 @@ var _default = /*#__PURE__*/(0, _react.memo)(function (props) {
       _props$speed = props.speed,
       speed = _props$speed === void 0 ? 5 : _props$speed;
   var dom = (0, _react.useRef)(null);
-  var content = (0, _react.useRef)(null);
-  var duration = (0, _react.useRef)(1); //dom和content盒子对象，避免speed变化时重新获取盒子对象
+  var content = (0, _react.useRef)(null); //dom和content盒子对象，避免speed变化时重新获取盒子对象
 
   var domRect = (0, _react.useRef)(null);
-  var contentRect = (0, _react.useRef)(null);
-
-  var _useState = (0, _react.useState)([value]),
-      _useState2 = (0, _slicedToArray2["default"])(_useState, 2),
-      textList = _useState2[0],
-      setTextList = _useState2[1]; //文本变化时，需要重新计算dom和content的宽高
-
-
-  (0, _react.useEffect)(function () {
-    var dom_ = dom.current;
-    domRect.current = dom_.getBoundingClientRect();
-    var content_ = content.current;
-    contentRect.current = content_.getBoundingClientRect();
-
-    if (domRect.current.width < contentRect.current.width) {
-      setTextList([value, value]);
+  var contentRect = (0, _react.useRef)(null); //文本变化时，需要重新计算dom和content的宽高
+
+  var textList = (0, _react.useMemo)(function () {
+    if (dom.current && content.current) {
+      var dom_ = dom.current;
+      domRect.current = dom_.getBoundingClientRect();
+      var content_ = content.current;
+      contentRect.current = content_.getBoundingClientRect();
+
+      if (domRect.current.width < contentRect.current.width) {
+        return [value, value];
+      }
     }
+
+    return [value];
   }, [value]); //value和speed变化时，直接更新duration
 
-  (0, _react.useEffect)(function () {
-    if (domRect.current.width < contentRect.current.width) {
-      duration.current = contentRect.current.width / domRect.current.width / speed * 10;
+  var duration = (0, _react.useMemo)(function () {
+    if (domRect.current && contentRect.current && domRect.current.width < contentRect.current.width) {
+      return contentRect.current.width / domRect.current.width / speed * 10;
     }
+
+    return 5;
   }, [speed]); //在head标签中注入keyframes动画
 
   (0, _react.useEffect)(function () {
@@ -88,7 +85,7 @@ var _default = /*#__PURE__*/(0, _react.memo)(function (props) {
         animationName: 'md_marquee',
         animationTimingFunction: 'linear',
         animationIterationCount: 'infinite',
-        animationDuration: duration.current + 's'
+        animationDuration: duration + 's'
       } : {},
       ref: itemIndex == 0 ? content : null
     }, "\xA0", item);

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@easyv/charts",
-  "version": "1.2.11",
+  "version": "1.2.12",
   "description": "",
   "main": "lib/index.js",
   "scripts": {

package/src/components/BaseLine.js

@@ -38,7 +38,6 @@ export default memo(
     data
   }) => {
     if (!data.value) return null;
-    console.log(orientation, 'orientation')
     const x1 = orientation == 'left' ? yScaler(data.value) : marginLeft,
       x2 = orientation == 'left' ? yScaler(data.value) : width - marginRight,
       y1 = orientation == 'left' ? marginLeft : yScaler(data.value),

package/src/components/CartesianChart.js

@@ -43,7 +43,7 @@ const Chart = memo(
       series,
       tooltip,
       baseLine: {
-        orientation:baseLineOri,
+        orientation:baseLineOri='',
         config: baseLineConfig = {},
         data: baseLineData = []
       },

package/src/components/Marquee.js

@@ -1,4 +1,4 @@
-import { useState, useEffect, memo, useRef } from 'react';
+import { useEffect, memo, useRef, useMemo } from 'react';
 
 /**
  * 文字跑马灯组件
@@ -14,29 +14,30 @@ export default memo((props) => {
 
   const dom = useRef(null);
   const content = useRef(null);
-  const duration = useRef(1);
   //dom和content盒子对象，避免speed变化时重新获取盒子对象
   const domRect = useRef(null);
   const contentRect = useRef(null);
 
-  const [textList, setTextList] = useState([value]);
-
   //文本变化时，需要重新计算dom和content的宽高
-  useEffect(() => {
-    const dom_ = dom.current;
-    domRect.current = dom_.getBoundingClientRect();
-    let content_ = content.current;
-    contentRect.current = content_.getBoundingClientRect();
-    if (domRect.current.width < contentRect.current.width) {
-      setTextList([value, value]);
+  const textList = useMemo(()=>{
+    if(dom.current && content.current){
+      const dom_ = dom.current;
+      domRect.current = dom_.getBoundingClientRect();
+      let content_ = content.current;
+      contentRect.current = content_.getBoundingClientRect();
+      if (domRect.current.width < contentRect.current.width) {
+        return [value, value];
+      }
     }
-  }, [value]);
+    return [value];
+  },[value])
+  
   //value和speed变化时，直接更新duration
-  useEffect(() => {
-    if (domRect.current.width < contentRect.current.width) {
-      duration.current =
-        (contentRect.current.width / domRect.current.width / speed) * 10;
+  const duration = useMemo(() => {
+    if (domRect.current && contentRect.current && domRect.current.width < contentRect.current.width) {
+      return (contentRect.current.width / domRect.current.width / speed) * 10;
     }
+    return 5
   }, [speed]);
   //在head标签中注入keyframes动画
   useEffect(() => {
@@ -78,7 +79,7 @@ export default memo((props) => {
                     animationName: 'md_marquee',
                     animationTimingFunction: 'linear',
                     animationIterationCount: 'infinite',
-                    animationDuration: duration.current + 's',
+                    animationDuration: duration + 's',
                   }
                 : {}
             }