@easyv/charts 1.8.27 → 1.8.29

package/lib/components/Marquee.js

@@ -27,6 +27,7 @@ var _default = exports["default"] = /*#__PURE__*/(0, _react.memo)(/*#__PURE__*/(
   var observe = (0, _react.useRef)(null);
   var speed_ = (0, _react.useRef)(0); //这里必须用一个ref绑定speed，否则animation中获取不到最新的speed
   var timer = (0, _react.useRef)();
+  var overflowRef = (0, _react.useRef)(false); // 使用ref来跟踪overflow状态，避免闭包问题
   var _useState = (0, _react.useState)(false),
     _useState2 = (0, _slicedToArray2["default"])(_useState, 2),
     overflow = _useState2[0],
@@ -41,25 +42,41 @@ var _default = exports["default"] = /*#__PURE__*/(0, _react.memo)(/*#__PURE__*/(
     };
     timer.current = requestAnimationFrame(_animation);
   };
+
+  // 检查文本是否溢出的函数
+  var checkOverflow = function checkOverflow() {
+    if (!target.current || !rootRef.current) return;
+
+    // 直接比较元素的实际内容宽度和容器的可见宽度
+    // scrollWidth 是元素内容的实际宽度（包括溢出部分）
+    // clientWidth 是元素可见区域的宽度
+    var textWidth = target.current.scrollWidth;
+    var containerWidth = rootRef.current.clientWidth;
+    if (textWidth <= containerWidth) {
+      console.log("文字全部可视");
+      //表示文字全部可视
+      cancelAnimationFrame(timer.current || 0);
+      target.current.style.transform = "translate(0px,0px)"; //重置偏移
+      overflowRef.current = false;
+      setOverflow(false);
+    } else {
+      //否则文本溢出
+      if (!overflowRef.current) {
+        cancelAnimationFrame(timer.current || 0);
+        startAnimation(textWidth);
+        overflowRef.current = true;
+        setOverflow(true);
+      }
+    }
+  };
   (0, _react.useEffect)(function () {
     //初始化观察器，利用观察器来监视组件可视区域变化
+    // 注意：当外部有3D变换时，boundingClientRect可能不准确
+    // 因此我们使用ResizeObserver来监听尺寸变化，并直接比较scrollWidth和clientWidth
     observe.current = new IntersectionObserver(function (entries) {
-      var entrie = entries[0];
-      if (entrie.boundingClientRect.width <= entrie.rootBounds.width) {
-        //表示文字全部可视
-        cancelAnimationFrame(timer.current || 0);
-        target.current.style.transform = "translate(0px,0px)"; //重置偏移
-        setOverflow(false);
-        return;
-      } else {
-        //否则文本溢出
-        if (!overflow) {
-          cancelAnimationFrame(timer.current || 0);
-          startAnimation(entrie.target.offsetWidth);
-          //startAnimation(entrie.boundingClientRect.width);
-          setOverflow(true);
-        }
-      }
+      // 当元素进入或离开视口时，检查溢出状态
+      // 但实际的溢出判断使用checkOverflow函数，它直接比较DOM尺寸
+      checkOverflow();
     }, {
       root: rootRef.current,
       rootMargin: "0px 0px 0px 0px",
@@ -67,12 +84,28 @@ var _default = exports["default"] = /*#__PURE__*/(0, _react.memo)(/*#__PURE__*/(
         return i / 100;
       }) //这里设置了[0-1]之间所有的阈值，保证每一帧的变化都能被观察到
     });
+
+    // 使用ResizeObserver监听元素尺寸变化，这样即使有3D变换也能准确检测
+    var resizeObserver = new ResizeObserver(function () {
+      checkOverflow();
+    });
+
     // start observing
     observe.current.observe(target.current);
+    if (target.current) {
+      resizeObserver.observe(target.current);
+    }
+    if (rootRef.current) {
+      resizeObserver.observe(rootRef.current);
+    }
+
+    // 初始检查
+    checkOverflow();
     return function () {
       cancelAnimationFrame(timer.current || 0);
       observe.current.unobserve(target.current);
       observe.current.disconnect();
+      resizeObserver.disconnect();
     };
   }, []);
   var textList = [value, value];

package/lib/components/TextOverflow.js

@@ -30,21 +30,21 @@ var _default = exports["default"] = /*#__PURE__*/(0, _react.memo)(/*#__PURE__*/(
     needTitle = _config$needTitle === void 0 ? true : _config$needTitle;
   var getTextOverflow = function getTextOverflow(type) {
     switch (type) {
-      case 'ellipsis':
+      case "ellipsis":
         return {
-          overflow: 'hidden',
-          textOverflow: 'ellipsis',
-          whiteSpace: 'nowrap'
+          overflow: "hidden",
+          textOverflow: "ellipsis",
+          whiteSpace: "nowrap"
         };
-      case 'break-word':
+      case "break-word":
         return {
-          wordBreak: 'break-all',
-          wordWrap: 'break-word',
+          wordBreak: "break-all",
+          wordWrap: "break-word",
           whiteSpace: "pre-line"
         };
-      case 'marquee':
+      case "marquee":
         return {
-          whiteSpace: 'nowrap'
+          whiteSpace: "nowrap"
         };
       default:
         return {};
@@ -54,7 +54,8 @@ var _default = exports["default"] = /*#__PURE__*/(0, _react.memo)(/*#__PURE__*/(
   var textDom = document.createElement("div");
   textDom.innerHTML = value;
   var text = textDom.innerText;
-  return type == 'marquee' ? /*#__PURE__*/_react["default"].createElement(_Marquee["default"], {
+  console.log(type);
+  return type == "marquee" ? /*#__PURE__*/_react["default"].createElement(_Marquee["default"], {
     value: value,
     speed: speed,
     style: styles,

package/lib/hooks/useExtentData.js

@@ -94,7 +94,7 @@ var _default = exports["default"] = function _default(_ref) {
       type = _xAxis$config$label.format.type;
     if (type == "date" && autoSort) {
       x.sort(function (a, b) {
-        return a > b ? 1 : -1;
+        return new Date(a).getTime() - new Date(b).getTime();
       });
       // const groupBySeries = group(data, (d) => d.s);
       // data=[...groupBySeries].flatMap(d=>{

package/package.json

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

package/src/components/Marquee.tsx

@@ -1,101 +1,146 @@
-import React, { useEffect, memo, useRef, useState, forwardRef, CSSProperties } from "react";
+import React, {
+  useEffect,
+  memo,
+  useRef,
+  useState,
+  forwardRef,
+  CSSProperties,
+} from "react";
 
 /**
  * 文字跑马灯组件
  * eg: <Marquee value={文本内容} speed={跑马灯速度} style={额外样式}></Marquee>
  */
-interface marquee{
-  value:string,
-  style:CSSProperties,
-  speed:number
+interface marquee {
+  value: string;
+  style: CSSProperties;
+  speed: number;
 }
 
-export default memo(forwardRef((props:marquee, ref:any) => {
-  const {
-    value, // 文本
-    style, // 样式
-    speed = 5, // 动画速度
-  } = props;
-  
-  const rootRef = ref || useRef();
-  const target = useRef<any>(null);
-  const observe = useRef<any>(null);
-  const speed_ = useRef<number>(0); //这里必须用一个ref绑定speed，否则animation中获取不到最新的speed
-  const timer = useRef<number>();
-  const [overflow, setOverflow] = useState<boolean>(false);
-  speed_.current = speed;
+export default memo(
+  forwardRef((props: marquee, ref: any) => {
+    const {
+      value, // 文本
+      style, // 样式
+      speed = 5, // 动画速度
+    } = props;
 
-  const startAnimation = (lineWidth:number)=>{
-    const animation = (timestamp:number) => {
-      let frame = Math.round(((timestamp*speed_.current)%(lineWidth*100))/100);
-      target.current.style.transform = `translate(-${frame}px,0px)`;
-      target.current.nextSibling.style.transform = `translate(-${frame}px,0px)`;
+    const rootRef = ref || useRef();
+    const target = useRef<any>(null);
+    const observe = useRef<any>(null);
+    const speed_ = useRef<number>(0); //这里必须用一个ref绑定speed，否则animation中获取不到最新的speed
+    const timer = useRef<number>();
+    const overflowRef = useRef<boolean>(false); // 使用ref来跟踪overflow状态，避免闭包问题
+    const [overflow, setOverflow] = useState<boolean>(false);
+    speed_.current = speed;
+
+    const startAnimation = (lineWidth: number) => {
+      const animation = (timestamp: number) => {
+        let frame = Math.round(
+          ((timestamp * speed_.current) % (lineWidth * 100)) / 100
+        );
+        target.current.style.transform = `translate(-${frame}px,0px)`;
+        target.current.nextSibling.style.transform = `translate(-${frame}px,0px)`;
+        timer.current = requestAnimationFrame(animation);
+      };
       timer.current = requestAnimationFrame(animation);
     };
-    timer.current = requestAnimationFrame(animation);
-  }
-  
-  useEffect(() => {
-    //初始化观察器，利用观察器来监视组件可视区域变化
-    observe.current = new IntersectionObserver(
-      function (entries:any) {
-        let entrie = entries[0];
-        if (entrie.boundingClientRect.width <= entrie.rootBounds.width) {
-          //表示文字全部可视
-          cancelAnimationFrame(timer.current||0);
-          target.current!.style.transform = "translate(0px,0px)"; //重置偏移
-          setOverflow(false);
-          return;
-        } else {
-          //否则文本溢出
-          if (!overflow) {
-            cancelAnimationFrame(timer.current || 0);
-            startAnimation(entrie.target.offsetWidth);
-            //startAnimation(entrie.boundingClientRect.width);
-            setOverflow(true);
-          }
+
+    // 检查文本是否溢出的函数
+    const checkOverflow = () => {
+      if (!target.current || !rootRef.current) return;
+
+      // 直接比较元素的实际内容宽度和容器的可见宽度
+      // scrollWidth 是元素内容的实际宽度（包括溢出部分）
+      // clientWidth 是元素可见区域的宽度
+      const textWidth = target.current.scrollWidth;
+      const containerWidth = rootRef.current.clientWidth;
+
+      if (textWidth <= containerWidth) {
+        console.log("文字全部可视");
+        //表示文字全部可视
+        cancelAnimationFrame(timer.current || 0);
+        target.current.style.transform = "translate(0px,0px)"; //重置偏移
+        overflowRef.current = false;
+        setOverflow(false);
+      } else {
+        //否则文本溢出
+        if (!overflowRef.current) {
+          cancelAnimationFrame(timer.current || 0);
+          startAnimation(textWidth);
+          overflowRef.current = true;
+          setOverflow(true);
         }
-      },
-      {
-        root: rootRef.current,
-        rootMargin: "0px 0px 0px 0px",
-        threshold: new Array(101).fill(0).map((d, i) => i / 100), //这里设置了[0-1]之间所有的阈值，保证每一帧的变化都能被观察到
       }
-    );
-    // start observing
-    observe.current.observe(target.current);
-    return () => {
-      cancelAnimationFrame(timer.current || 0);
-      observe.current.unobserve(target.current);
-      observe.current.disconnect();
     };
-  }, []);
-  let textList = [value, value];
-  return (
-    <div
-      style={{
-        width: "100%",
-        ...style,
-        display: "flex",
-        whiteSpace: "nowrap",
-        overflow: "hidden",
-        justifyContent: overflow ? "start" : style.justifyContent || "",
-      }}
-      ref={rootRef}
-    >
-      {textList.map((item, i) => {
-        return (
-          <span
-            key={i}
-            ref={i == 0 ? target : null}
-            style={{ display: i == 1 && !overflow ? "none" : "inline" }}
-            dangerouslySetInnerHTML={{
-              __html:item+(overflow?`<span>&nbsp;</span>`:"")
-            }}
-          >
-          </span>
-        );
-      })}
-    </div>
-  );
-}));
+
+    useEffect(() => {
+      //初始化观察器，利用观察器来监视组件可视区域变化
+      // 注意：当外部有3D变换时，boundingClientRect可能不准确
+      // 因此我们使用ResizeObserver来监听尺寸变化，并直接比较scrollWidth和clientWidth
+      observe.current = new IntersectionObserver(
+        function (entries: any) {
+          // 当元素进入或离开视口时，检查溢出状态
+          // 但实际的溢出判断使用checkOverflow函数，它直接比较DOM尺寸
+          checkOverflow();
+        },
+        {
+          root: rootRef.current,
+          rootMargin: "0px 0px 0px 0px",
+          threshold: new Array(101).fill(0).map((d, i) => i / 100), //这里设置了[0-1]之间所有的阈值，保证每一帧的变化都能被观察到
+        }
+      );
+
+      // 使用ResizeObserver监听元素尺寸变化，这样即使有3D变换也能准确检测
+      const resizeObserver = new ResizeObserver(() => {
+        checkOverflow();
+      });
+
+      // start observing
+      observe.current.observe(target.current);
+      if (target.current) {
+        resizeObserver.observe(target.current);
+      }
+      if (rootRef.current) {
+        resizeObserver.observe(rootRef.current);
+      }
+
+      // 初始检查
+      checkOverflow();
+
+      return () => {
+        cancelAnimationFrame(timer.current || 0);
+        observe.current.unobserve(target.current);
+        observe.current.disconnect();
+        resizeObserver.disconnect();
+      };
+    }, []);
+    let textList = [value, value];
+    return (
+      <div
+        style={{
+          width: "100%",
+          ...style,
+          display: "flex",
+          whiteSpace: "nowrap",
+          overflow: "hidden",
+          justifyContent: overflow ? "start" : style.justifyContent || "",
+        }}
+        ref={rootRef}
+      >
+        {textList.map((item, i) => {
+          return (
+            <span
+              key={i}
+              ref={i == 0 ? target : null}
+              style={{ display: i == 1 && !overflow ? "none" : "inline" }}
+              dangerouslySetInnerHTML={{
+                __html: item + (overflow ? `<span>&nbsp;</span>` : ""),
+              }}
+            ></span>
+          );
+        })}
+      </div>
+    );
+  })
+);

package/src/components/TextOverflow.tsx

@@ -1,68 +1,74 @@
-import React, { memo, forwardRef, CSSProperties } from 'react';
-import Marquee from './Marquee'
+import React, { memo, forwardRef, CSSProperties } from "react";
+import Marquee from "./Marquee";
 /**
  * 文本溢出组件
  * eg: <TextOverflow  type={溢出形式} value={文本内容} speed={跑马灯速度} style={额外样式}></Marquee>
  */
 
-interface flowText{
-  type:string,
-  value:string,
-  speed:number,
-  style:CSSProperties,
-  config?:any,
-  ShowType:string
+interface flowText {
+  type: string;
+  value: string;
+  speed: number;
+  style: CSSProperties;
+  config?: any;
+  ShowType: string;
 }
 
-export default memo(forwardRef((props:flowText, ref:any) => {
-  const {
-    type, //形式：跑马灯marquee /省略号 ellipsis/换行 break-word
-    value, // 文本
-    style, // 样式
-    speed = 5, // 动画速度
-    config = {},
-    ShowType
-  } = props;
-  const { needTitle = true } = config;
+export default memo(
+  forwardRef((props: flowText, ref: any) => {
+    const {
+      type, //形式：跑马灯marquee /省略号 ellipsis/换行 break-word
+      value, // 文本
+      style, // 样式
+      speed = 5, // 动画速度
+      config = {},
+      ShowType,
+    } = props;
+    const { needTitle = true } = config;
 
-  const getTextOverflow = (type:string):CSSProperties => {
-    switch (type) {
-      case 'ellipsis':
-        return {
-          overflow: 'hidden',
-          textOverflow: 'ellipsis',
-          whiteSpace: 'nowrap',
-        };
-      case 'break-word':
-        return {
-          wordBreak: 'break-all',
-          wordWrap: 'break-word',
-          whiteSpace: "pre-line"
-        };
-      case 'marquee':
-        return {
-          whiteSpace: 'nowrap',
-        };
-      default:
-        return {}
-    }
-  };
+    const getTextOverflow = (type: string): CSSProperties => {
+      switch (type) {
+        case "ellipsis":
+          return {
+            overflow: "hidden",
+            textOverflow: "ellipsis",
+            whiteSpace: "nowrap",
+          };
+        case "break-word":
+          return {
+            wordBreak: "break-all",
+            wordWrap: "break-word",
+            whiteSpace: "pre-line",
+          };
+        case "marquee":
+          return {
+            whiteSpace: "nowrap",
+          };
+        default:
+          return {};
+      }
+    };
 
-  const styles = {
-    ...getTextOverflow(type),
-    ...style
-  }
-  const textDom = document.createElement("div");
-  textDom.innerHTML = value;
-  const text = textDom.innerText;
-  return type == 'marquee' ? (
-    <Marquee
-      value={value}
-      speed={speed}
-      style={styles}
-      ref={ref} />
-  ) : (
-    <div style={{...styles,
-      whiteSpace:ShowType=="Adaptive"?"normal":styles.whiteSpace}} ref={ref} title={needTitle && type=="ellipsis"?text || undefined:undefined} dangerouslySetInnerHTML={{__html:value}}></div>
-  );
-}));
+    const styles = {
+      ...getTextOverflow(type),
+      ...style,
+    };
+    const textDom = document.createElement("div");
+    textDom.innerHTML = value;
+    const text = textDom.innerText;
+    console.log(type);
+    return type == "marquee" ? (
+      <Marquee value={value} speed={speed} style={styles} ref={ref} />
+    ) : (
+      <div
+        style={{
+          ...styles,
+          whiteSpace: ShowType == "Adaptive" ? "normal" : styles.whiteSpace,
+        }}
+        ref={ref}
+        title={needTitle && type == "ellipsis" ? text || undefined : undefined}
+        dangerouslySetInnerHTML={{ __html: value }}
+      ></div>
+    );
+  })
+);

package/src/hooks/useExtentData.js

@@ -86,7 +86,7 @@ export default ({ axes, series, data }) => {
       },
     } = xAxis;
     if (type == "date" && autoSort) {
-      x.sort((a, b) => (a > b ? 1 : -1));
+      x.sort((a, b) => new Date(a).getTime() - new Date(b).getTime());
       // const groupBySeries = group(data, (d) => d.s);
       // data=[...groupBySeries].flatMap(d=>{
       //   return d[1].sort((a,b)=>a.x>b.x?1:-1)