@easyv/charts 1.3.22 → 1.3.24

package/lib/components/BaseLine.js

@@ -48,37 +48,41 @@ var _default = /*#__PURE__*/(0, _react.memo)(function (_ref) {
       strokeDasharray = _ref$config$line.strokeDasharray,
       yScaler = _ref.yAxis.scaler,
       data = _ref.data;
-  if (!data.value) return null;
-  var x1 = orientation == 'left' ? yScaler(data.value) : marginLeft,
-      x2 = orientation == 'left' ? yScaler(data.value) : width - marginRight,
-      y1 = orientation == 'left' ? marginLeft : yScaler(data.value),
-      y2 = orientation == 'left' ? height - marginRight : yScaler(data.value);
-  return /*#__PURE__*/_react["default"].createElement(_react["default"].Fragment, null, /*#__PURE__*/_react["default"].createElement("g", {
-    className: "__easyv-baseLine"
-  }, /*#__PURE__*/_react["default"].createElement("line", {
-    x1: x1,
-    x2: x2,
-    y1: y1,
-    y2: y2,
-    stroke: color,
-    fill: "none",
-    strokeDasharray: lineType === 'dash' ? strokeDasharray : null,
-    strokeWidth: lineWidth
-  })), labelShow && /*#__PURE__*/_react["default"].createElement("foreignObject", {
-    width: 100,
-    height: 100,
-    x: x2 + labelTranslate.x,
-    y: y2 - textStyle.fontSize + labelTranslate.y
-  }, /*#__PURE__*/_react["default"].createElement("div", null, /*#__PURE__*/_react["default"].createElement("span", {
-    style: _objectSpread({}, (0, _utils.getFontStyle)(textStyle))
-  }, label))), dataShow && /*#__PURE__*/_react["default"].createElement("foreignObject", {
-    width: 100,
-    height: 100,
-    x: x2 + dataTranslate.x,
-    y: y2 + dataTranslate.y
-  }, /*#__PURE__*/_react["default"].createElement("div", null, /*#__PURE__*/_react["default"].createElement("span", {
-    style: _objectSpread({}, (0, _utils.getFontStyle)(dataStyle))
-  }, data.value))));
+
+  try {
+    var x1 = orientation == 'left' ? yScaler(data.value) : marginLeft,
+        x2 = orientation == 'left' ? yScaler(data.value) : width - marginRight,
+        y1 = orientation == 'left' ? marginLeft : yScaler(data.value),
+        y2 = orientation == 'left' ? height - marginRight : yScaler(data.value);
+    return /*#__PURE__*/_react["default"].createElement(_react["default"].Fragment, null, /*#__PURE__*/_react["default"].createElement("g", {
+      className: "__easyv-baseLine"
+    }, /*#__PURE__*/_react["default"].createElement("line", {
+      x1: x1,
+      x2: x2,
+      y1: y1,
+      y2: y2,
+      stroke: color,
+      fill: "none",
+      strokeDasharray: lineType === 'dash' ? strokeDasharray : null,
+      strokeWidth: lineWidth
+    })), labelShow && /*#__PURE__*/_react["default"].createElement("foreignObject", {
+      width: 100,
+      height: 100,
+      x: x2 + labelTranslate.x,
+      y: y2 - textStyle.fontSize + labelTranslate.y
+    }, /*#__PURE__*/_react["default"].createElement("div", null, /*#__PURE__*/_react["default"].createElement("span", {
+      style: _objectSpread({}, (0, _utils.getFontStyle)(textStyle))
+    }, label))), dataShow && /*#__PURE__*/_react["default"].createElement("foreignObject", {
+      width: 100,
+      height: 100,
+      x: x2 + dataTranslate.x,
+      y: y2 + dataTranslate.y
+    }, /*#__PURE__*/_react["default"].createElement("div", null, /*#__PURE__*/_react["default"].createElement("span", {
+      style: _objectSpread({}, (0, _utils.getFontStyle)(dataStyle))
+    }, data.value))));
+  } catch (e) {
+    return null;
+  }
 });
 
 exports["default"] = _default;

package/lib/components/Marquee.js

@@ -21,12 +21,11 @@ function _objectSpread(target) { for (var i = 1; i < arguments.length; i++) { va
  * 文字跑马灯组件
  * eg: <Marquee value={文本内容} speed={跑马灯速度} style={额外样式}></Marquee>
  */
-var _default = /*#__PURE__*/(0, _react.memo)(function (props) {
+var _default = /*#__PURE__*/(0, _react.memo)( /*#__PURE__*/(0, _react.forwardRef)(function (props, ref) {
   var value = props.value,
       style = props.style,
       _props$speed = props.speed,
       speed = _props$speed === void 0 ? 5 : _props$speed;
-  var dom = (0, _react.useRef)(null);
   var target = (0, _react.useRef)(null);
   var observe = (0, _react.useRef)(null);
   var speed_ = (0, _react.useRef)(0); //这里必须用一个ref绑定speed，否则animation中获取不到最新的speed
@@ -73,7 +72,7 @@ var _default = /*#__PURE__*/(0, _react.memo)(function (props) {
         }
       }
     }, {
-      root: dom.current,
+      root: ref.current,
       rootMargin: "0px 0px 0px 0px",
       threshold: new Array(101).fill(0).map(function (d, i) {
         return i / 100;
@@ -98,7 +97,7 @@ var _default = /*#__PURE__*/(0, _react.memo)(function (props) {
       overflow: "hidden",
       justifyContent: overflow ? "start" : style.justifyContent || ""
     }),
-    ref: dom
+    ref: ref
   }, textList.map(function (item, i) {
     return /*#__PURE__*/React.createElement("span", {
       key: i,
@@ -106,8 +105,8 @@ var _default = /*#__PURE__*/(0, _react.memo)(function (props) {
       style: {
         display: i == 1 && !overflow ? "none" : "inline"
       }
-    }, item, "\xA0");
+    }, item, overflow && /*#__PURE__*/React.createElement("span", null, "\xA0"));
   }));
-});
+}));
 
 exports["default"] = _default;

package/lib/components/TextOverflow.js

@@ -21,7 +21,7 @@ function _objectSpread(target) { for (var i = 1; i < arguments.length; i++) { va
  * 文本溢出组件
  * eg: <TextOverflow  type={溢出形式} value={文本内容} speed={跑马灯速度} style={额外样式}></Marquee>
  */
-var _default = /*#__PURE__*/(0, _react.memo)(function (props) {
+var _default = /*#__PURE__*/(0, _react.memo)( /*#__PURE__*/(0, _react.forwardRef)(function (props, ref) {
   var type = props.type,
       value = props.value,
       style = props.style,
@@ -55,11 +55,13 @@ var _default = /*#__PURE__*/(0, _react.memo)(function (props) {
   return type == 'marquee' ? /*#__PURE__*/React.createElement(_Marquee["default"], {
     value: value,
     speed: speed,
-    style: styles
+    style: styles,
+    ref: ref
   }) : /*#__PURE__*/React.createElement("div", {
     style: styles,
+    ref: ref,
     title: value || null
   }, " ", value);
-});
+}));
 
 exports["default"] = _default;

package/package.json

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

package/src/components/BaseLine.js

@@ -37,46 +37,49 @@ export default memo(
     yAxis: { scaler: yScaler },
     data
   }) => {
-    if (!data.value) return null;
-    const x1 = orientation == 'left' ? yScaler(data.value) : marginLeft,
+    try{
+      const x1 = orientation == 'left' ? yScaler(data.value) : marginLeft,
       x2 = orientation == 'left' ? yScaler(data.value) : width - marginRight,
       y1 = orientation == 'left' ? marginLeft : yScaler(data.value),
       y2 = orientation == 'left' ? height - marginRight : yScaler(data.value);
-    return (
-      <>
-        <g className='__easyv-baseLine' >
-          <line
-            x1={x1}
-            x2={x2}
-            y1={y1}
-            y2={y2}
-            stroke={color}
-            fill='none'
-            strokeDasharray={lineType === 'dash' ? strokeDasharray : null}
-            strokeWidth={lineWidth}
-          />
-        </g>
-        {labelShow &&
-          <foreignObject
-            width={100}
-            height={100}
-            x={x2 + labelTranslate.x}
-            y={y2 - textStyle.fontSize + labelTranslate.y}>
-            <div>
-              <span style={{ ...getFontStyle(textStyle) }}>{label}</span>
-            </div>
-          </foreignObject>}
-        {dataShow &&
-          <foreignObject
-            width={100}
-            height={100}
-            x={x2 + dataTranslate.x}
-            y={y2 + dataTranslate.y}>
-            <div>
-              <span style={{ ...getFontStyle(dataStyle) }}>{data.value}</span>
-            </div>
-          </foreignObject>}
-      </>
-    );
+      return (
+        <>
+          <g className='__easyv-baseLine' >
+            <line
+              x1={x1}
+              x2={x2}
+              y1={y1}
+              y2={y2}
+              stroke={color}
+              fill='none'
+              strokeDasharray={lineType === 'dash' ? strokeDasharray : null}
+              strokeWidth={lineWidth}
+            />
+          </g>
+          {labelShow &&
+            <foreignObject
+              width={100}
+              height={100}
+              x={x2 + labelTranslate.x}
+              y={y2 - textStyle.fontSize + labelTranslate.y}>
+              <div>
+                <span style={{ ...getFontStyle(textStyle) }}>{label}</span>
+              </div>
+            </foreignObject>}
+          {dataShow &&
+            <foreignObject
+              width={100}
+              height={100}
+              x={x2 + dataTranslate.x}
+              y={y2 + dataTranslate.y}>
+              <div>
+                <span style={{ ...getFontStyle(dataStyle) }}>{data.value}</span>
+              </div>
+            </foreignObject>}
+        </>
+      );
+    }catch(e){
+      return null;
+    }
   }
 );

package/src/components/Marquee.js

@@ -1,18 +1,17 @@
-import { useEffect, memo, useRef, useState, useCallback } from "react";
+import { useEffect, memo, useRef, useState, forwardRef } from "react";
 
 /**
  * 文字跑马灯组件
  * eg: <Marquee value={文本内容} speed={跑马灯速度} style={额外样式}></Marquee>
  */
 
-export default memo((props) => {
+export default memo(forwardRef((props, ref) => {
   const {
     value, // 文本
     style, // 样式
     speed = 5, // 动画速度
   } = props;
 
-  const dom = useRef(null);
   const target = useRef(null);
   const observe = useRef(null);
   const speed_ = useRef(0); //这里必须用一个ref绑定speed，否则animation中获取不到最新的speed
@@ -54,7 +53,7 @@ export default memo((props) => {
         }
       },
       {
-        root: dom.current,
+        root: ref.current,
         rootMargin: "0px 0px 0px 0px",
         threshold: new Array(101).fill(0).map((d, i) => i / 100), //这里设置了[0-1]之间所有的阈值，保证每一帧的变化都能被观察到
       }
@@ -79,7 +78,7 @@ export default memo((props) => {
         overflow: "hidden",
         justifyContent: overflow ? "start" : style.justifyContent || "",
       }}
-      ref={dom}
+      ref={ref}
     >
       {textList.map((item, i) => {
         return (
@@ -88,10 +87,11 @@ export default memo((props) => {
             ref={i == 0 ? target : null}
             style={{ display: i == 1 && !overflow ? "none" : "inline" }}
           >
-            {item}&nbsp;
+            {item}
+            {overflow && <span>&nbsp;</span>}
           </span>
         );
       })}
     </div>
   );
-});
+}));

package/src/components/TextOverflow.js

@@ -1,11 +1,11 @@
-import { memo } from 'react';
+import { memo, forwardRef } from 'react';
 import Marquee from './Marquee'
 /**
  * 文本溢出组件
  * eg: <TextOverflow  type={溢出形式} value={文本内容} speed={跑马灯速度} style={额外样式}></Marquee>
  */
 
-export default memo((props) => {
+export default memo(forwardRef((props, ref) => {
   const {
     type, //形式：跑马灯marquee /省略号 ellipsis/换行 break-word
     value, // 文本
@@ -42,8 +42,9 @@ export default memo((props) => {
     <Marquee
       value={value}
       speed={speed}
-      style={styles} />
+      style={styles}
+      ref={ref} />
   ) : (
-    <div style={styles} title={value || null}> {value}</div>
+    <div style={styles} ref={ref} title={value || null}> {value}</div>
   );
-});
+}));