@easyv/charts 1.3.21 → 1.3.23

package/lib/components/Legend.js

@@ -19,6 +19,8 @@ var _react = _interopRequireWildcard(require("react"));
 
 var _utils = require("../utils");
 
+var _TextOverflow = _interopRequireDefault(require("./TextOverflow"));
+
 var _excluded = ["italic", "bold"];
 
 function _getRequireWildcardCache(nodeInterop) { if (typeof WeakMap !== "function") return null; var cacheBabelInterop = new WeakMap(); var cacheNodeInterop = new WeakMap(); return (_getRequireWildcardCache = function _getRequireWildcardCache(nodeInterop) { return nodeInterop ? cacheNodeInterop : cacheBabelInterop; })(nodeInterop); }
@@ -42,6 +44,9 @@ var _default = /*#__PURE__*/(0, _react.memo)(function (_ref) {
       _ref$config$order = _ref$config.order,
       order = _ref$config$order === void 0 ? '' : _ref$config$order,
       interactive = _ref$config.interactive,
+      maxWidth = _ref$config.maxWidth,
+      textOverflow = _ref$config.textOverflow,
+      speed = _ref$config.speed,
       _ref$config$layout = _ref$config.layout,
       _ref$config$layout$al = _ref$config$layout.alignment,
       alignment = _ref$config$layout$al === void 0 ? 'right center' : _ref$config$layout$al,
@@ -123,12 +128,16 @@ var _default = /*#__PURE__*/(0, _react.memo)(function (_ref) {
       }
     }, formatter ? formatter(series, config) : /*#__PURE__*/_react["default"].createElement(_react["default"].Fragment, null, /*#__PURE__*/_react["default"].createElement("span", {
       style: _icon
-    }), /*#__PURE__*/_react["default"].createElement("span", {
+    }), /*#__PURE__*/_react["default"].createElement(_TextOverflow["default"], {
+      type: textOverflow,
+      value: displayName || name,
       style: _objectSpread(_objectSpread({}, font), {}, {
+        width: maxWidth,
         fontStyle: italic ? 'italic' : 'normal',
         fontWeight: bold ? 'bold' : 'normal'
-      })
-    }, displayName || name)));
+      }),
+      speed: speed
+    })));
   })));
 });
 

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/lib/hooks/useAxes.js

@@ -145,7 +145,7 @@ var _default = function _default(_ref) {
       if (type == 'linear' && config.on) {
         var zeroPosition = scaler(0);
 
-        if (zeroPosition !== range[0]) {
+        if (zeroPosition !== range[0] && !isNaN(zeroPosition)) {
           if (direction === 'horizontal') {
             xAxisPositions.push({
               x: zeroPosition,

package/package.json

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

package/src/components/Legend.js

@@ -3,6 +3,7 @@
  */
 import React, { memo, useCallback } from 'react';
 import { getIcon, sortPie } from '../utils';
+import TextOverflow from './TextOverflow';
 
 const defaultFont = {
   fontStyle: 'normal',
@@ -17,6 +18,9 @@ export default memo(
       show,
       order = '',
       interactive,
+      maxWidth,
+      textOverflow,
+      speed,
       layout: {
         alignment = 'right center',
         gridTemplateColumns,
@@ -45,7 +49,6 @@ export default memo(
     );
 
      //木然判断数据都为零时做的，此处并不严谨，待想到好方法在进一步解决
-     
      if (judge == 0) {
        _series.forEach((d) => {
          d.percent=0
@@ -91,15 +94,13 @@ export default memo(
                 ) : (
                   <>
                     <span style={_icon} />
-                    <span
-                      style={{
+                    <TextOverflow type={textOverflow} value={displayName || name} style={{
                         ...font,
+                        width:maxWidth,
                         fontStyle: italic ? 'italic' : 'normal',
                         fontWeight: bold ? 'bold' : 'normal',
-                      }}
-                    >
-                      {displayName || name}
-                    </span>
+                      }} speed={speed}></TextOverflow>
+                    
                   </>
                 )}
               </li>

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, // 文本
@@ -33,19 +33,18 @@ export default memo((props) => {
     }
   };
 
-
   const styles = {
     ...getTextOverflow(type),
     ...style
   }
 
-
   return type == 'marquee' ? (
     <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>
   );
-});
+}));

package/src/hooks/useAxes.js

@@ -141,7 +141,7 @@ export default ({ axes, context: { width, height } }) => {
 
       if (type == 'linear' && config.on) {
         const zeroPosition = scaler(0);
-        if (zeroPosition !== range[0]) {
+        if (zeroPosition !== range[0] && !isNaN(zeroPosition)) {
           if (direction === 'horizontal') {
             xAxisPositions.push({
               x: zeroPosition,