@easyv/charts 1.2.10 → 1.2.14

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/ConicalGradient.js

@@ -233,7 +233,12 @@ ConicalGradient.prototype = {
         b1 = currentColor.b;
         a1 = currentColor.a;
         if (!a1 && a1 !== 0) a1 = 1;
-        nextColor = colors[currentColorIndex];
+        nextColor = colors[currentColorIndex] || {
+          r: 0,
+          g: 0,
+          b: 0,
+          a: 1
+        };
         r2 = nextColor.r;
         g2 = nextColor.g;
         b2 = nextColor.b;

package/lib/components/Marquee.js

@@ -28,33 +28,26 @@ var _default = /*#__PURE__*/(0, _react.memo)(function (props) {
       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 domRect = (0, _react.useRef)(null);
-  var contentRect = (0, _react.useRef)(null);
-
-  var _useState = (0, _react.useState)([value]),
+  var _useState = (0, _react.useState)(false),
       _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]);
-    }
-  }, [value]); //value和speed变化时，直接更新duration
+      fresh = _useState2[0],
+      setFresh = _useState2[1];
 
+  var textList = (0, _react.useRef)([value]);
+  var duration = (0, _react.useRef)(10 / speed);
   (0, _react.useEffect)(function () {
-    if (domRect.current.width < contentRect.current.width) {
-      duration.current = contentRect.current.width / domRect.current.width / speed * 10;
+    if (dom.current && content.current) {
+      var domRectWidth = dom.current.getBoundingClientRect().width;
+      var contentRectWidth = content.current.getBoundingClientRect().width;
+
+      if (domRectWidth < contentRectWidth) {
+        textList.current = [value, value];
+        duration.current = contentRectWidth / domRectWidth / speed * 10;
+        setFresh(!fresh);
+      }
     }
-  }, [speed]); //在head标签中注入keyframes动画
+  }, [value, speed]); //在head标签中注入keyframes动画
 
   (0, _react.useEffect)(function () {
     var md_marquee = document.getElementById('md_marquee'); //先查找是否已经存在md_marquee
@@ -71,19 +64,21 @@ var _default = /*#__PURE__*/(0, _react.memo)(function (props) {
       document.getElementsByTagName('head')[0].appendChild(_style);
     }
   }, []);
+  var overflow = textList.current.length == 2;
   return /*#__PURE__*/React.createElement("span", {
     style: _objectSpread(_objectSpread({
       width: '100%'
     }, style), {}, {
       display: 'flex',
       whiteSpace: 'nowrap',
-      overflow: 'hidden'
+      overflow: 'hidden',
+      justifyContent: overflow ? "start" : style.justifyContent || ""
     }),
     ref: dom
-  }, textList.map(function (item, itemIndex) {
+  }, textList.current.map(function (item, itemIndex) {
     return /*#__PURE__*/React.createElement("span", {
       key: itemIndex,
-      style: textList.length == 2 ? {
+      style: overflow ? {
         //如果文本数量为2，则需要滚动
         animationName: 'md_marquee',
         animationTimingFunction: 'linear',

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@easyv/charts",
-  "version": "1.2.10",
+  "version": "1.2.14",
   "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/ConicalGradient.js

@@ -217,7 +217,7 @@ ConicalGradient.prototype = {
         a1 = currentColor.a;
         if (!a1 && a1 !== 0) a1 = 1;
 
-        nextColor = colors[currentColorIndex];
+        nextColor = colors[currentColorIndex] || {r:0,g:0,b:0,a:1};
         r2 = nextColor.r;
         g2 = nextColor.g;
         b2 = nextColor.b;

package/src/components/Marquee.js

@@ -1,4 +1,4 @@
-import { useState, useEffect, memo, useRef } from 'react';
+import { useEffect, memo, useRef, useState } from 'react';
 
 /**
  * 文字跑马灯组件
@@ -14,30 +14,23 @@ 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]);
+  const [fresh,setFresh] = useState(false);
+  let textList = useRef([value]);
+  let duration = useRef(10/speed);
 
-  //文本变化时，需要重新计算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]);
+    if(dom.current && content.current){
+      let domRectWidth =  dom.current.getBoundingClientRect().width;
+      let contentRectWidth = content.current.getBoundingClientRect().width;
+      if (domRectWidth < contentRectWidth) {
+        textList.current = [value,value];
+        duration.current = contentRectWidth / domRectWidth / speed * 10;
+        setFresh(!fresh);
+      }
     }
-  }, [value]);
-  //value和speed变化时，直接更新duration
-  useEffect(() => {
-    if (domRect.current.width < contentRect.current.width) {
-      duration.current =
-        (contentRect.current.width / domRect.current.width / speed) * 10;
-    }
-  }, [speed]);
+  }, [value,speed]);
+ 
   //在head标签中注入keyframes动画
   useEffect(() => {
     let md_marquee = document.getElementById('md_marquee'); //先查找是否已经存在md_marquee
@@ -56,6 +49,7 @@ export default memo((props) => {
       document.getElementsByTagName('head')[0].appendChild(style);
     }
   }, []);
+  let overflow = textList.current.length==2;
   return (
     <span
       style={{
@@ -64,15 +58,16 @@ export default memo((props) => {
         display: 'flex',
         whiteSpace: 'nowrap',
         overflow: 'hidden',
+        justifyContent:overflow?"start":(style.justifyContent || "")
       }}
       ref={dom}
     >
-      {textList.map((item, itemIndex) => {
+      {textList.current.map((item, itemIndex) => {
         return (
           <span
             key={itemIndex}
             style={
-              textList.length == 2
+              overflow
                 ? {
                     //如果文本数量为2，则需要滚动
                     animationName: 'md_marquee',