@easyv/charts 1.3.3 → 1.3.6

package/lib/components/Label.js

@@ -49,18 +49,17 @@ var _default = /*#__PURE__*/(0, _react.memo)(function (_ref) {
 
   var _useContext = (0, _react.useContext)(_context.chartContext),
       width = _useContext.width,
-      height = _useContext.height;
-
-  var _getSeriesInfo = (0, _utils.getSeriesInfo)({
-    step: step,
-    bandLength: bandLength,
-    paddingInner: paddingInner,
-    paddingOuter: paddingOuter
-  }),
-      seriesStep = _getSeriesInfo.seriesStep,
-      seriesWidth = _getSeriesInfo.seriesWidth,
-      seriesStart = _getSeriesInfo.seriesStart;
+      height = _useContext.height; // const { seriesStep, seriesWidth, seriesStart } = getSeriesInfo({
+  //   step,
+  //   bandLength,
+  //   paddingInner,
+  //   paddingOuter,
+  // });
 
+
+  var seriesStep = (1 + paddingInner) * step,
+      seriesWidth = step,
+      seriesStart = paddingOuter * step;
   var isVertical = direction === 'vertical';
   var _position = label.position;
   return /*#__PURE__*/React.createElement("g", {

package/lib/components/Marquee.js

@@ -27,66 +27,85 @@ 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 target = (0, _react.useRef)(null);
+  var observe = (0, _react.useRef)(null);
+  var speed_ = (0, _react.useRef)(0); //这里必须用一个ref绑定speed，否则animation中获取不到最新的speed
+
+  var timer = (0, _react.useRef)();
 
   var _useState = (0, _react.useState)(false),
       _useState2 = (0, _slicedToArray2["default"])(_useState, 2),
-      fresh = _useState2[0],
-      setFresh = _useState2[1];
+      overflow = _useState2[0],
+      setOverflow = _useState2[1];
 
-  var textList = (0, _react.useRef)([value]);
-  var duration = (0, _react.useRef)(10 / speed);
-  (0, _react.useEffect)(function () {
-    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);
-      }
-    }
-  }, [value, speed]); //在head标签中注入keyframes动画
-
-  (0, _react.useEffect)(function () {
-    var md_marquee = document.getElementById('md_marquee'); //先查找是否已经存在md_marquee
+  speed_.current = speed;
 
-    if (!md_marquee) {
-      //不存在时再注入style标签
-      var keyframes = "@keyframes md_marquee {0%{\n                transform: translate(0,0);\n            }\n            100%{\n                transform: translate(-100%,0);\n            }}";
+  var startAnimation = function startAnimation(lineWidth) {
+    var animation = function animation(timestamp) {
+      var frame = Math.round(timestamp * speed_.current % (lineWidth * 100) / 100);
+      target.current.style.transform = "translate(-".concat(frame, "px,0px)");
+      target.current.nextSibling.style.transform = "translate(-".concat(frame, "px,0px)");
+      timer.current = requestAnimationFrame(animation);
+    };
 
-      var _style = document.createElement('style');
+    timer.current = requestAnimationFrame(animation);
+  };
 
-      _style.id = 'md_marquee';
-      _style.innerHTML = keyframes; // 将style样式存放到head标签
-
-      document.getElementsByTagName('head')[0].appendChild(_style);
-    }
+  (0, _react.useEffect)(function () {
+    //初始化观察器，利用观察器来监视组件可视区域变化
+    observe.current = new IntersectionObserver(function (entries) {
+      var entrie = entries[0];
+
+      if (entrie.boundingClientRect.width < entrie.rootBounds.width >= 1) {
+        //表示文字全部可视
+        cancelAnimationFrame(timer.current);
+        target.current.style.transform = "translate(0px,0px)"; //重置偏移
+
+        setOverflow(false);
+        return;
+      } else {
+        //否则文本溢出
+        if (!overflow) {
+          cancelAnimationFrame(timer.current);
+          startAnimation(entrie.boundingClientRect.width);
+          setOverflow(true);
+        }
+      }
+    }, {
+      root: dom.current,
+      rootMargin: "0px 0px 0px 0px",
+      threshold: new Array(101).fill(0).map(function (d, i) {
+        return i / 100;
+      }) //这里设置了[0-1]之间所有的阈值，保证每一帧的变化都能被观察到
+
+    }); // start observing
+
+    observe.current.observe(target.current);
+    return function () {
+      cancelAnimationFrame(timer.current);
+      observe.current.unobserve(target.current);
+      observe.current.disconnect();
+    };
   }, []);
-  var overflow = textList.current.length == 2;
-  return /*#__PURE__*/React.createElement("span", {
+  var textList = [value, value];
+  return /*#__PURE__*/React.createElement("div", {
     style: _objectSpread(_objectSpread({
-      width: '100%'
+      width: "100%"
     }, style), {}, {
-      display: 'flex',
-      whiteSpace: 'nowrap',
-      overflow: 'hidden',
+      display: "flex",
+      whiteSpace: "nowrap",
+      overflow: "hidden",
       justifyContent: overflow ? "start" : style.justifyContent || ""
     }),
     ref: dom
-  }, textList.current.map(function (item, itemIndex) {
+  }, textList.map(function (item, i) {
     return /*#__PURE__*/React.createElement("span", {
-      key: itemIndex,
-      style: overflow ? {
-        //如果文本数量为2，则需要滚动
-        animationName: 'md_marquee',
-        animationTimingFunction: 'linear',
-        animationIterationCount: 'infinite',
-        animationDuration: duration.current + 's'
-      } : {},
-      ref: itemIndex == 0 ? content : null
-    }, "\xA0", item);
+      key: i,
+      ref: i == 0 ? target : null,
+      style: {
+        display: i == 1 && !overflow ? "none" : "inline"
+      }
+    }, item, "\xA0");
   }));
 });
 

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@easyv/charts",
-  "version": "1.3.3",
+  "version": "1.3.6",
   "description": "",
   "main": "lib/index.js",
   "scripts": {
@@ -19,7 +19,7 @@
     "@babel/preset-env": "^7.17.10",
     "@babel/preset-react": "^7.16.7",
     "@babel/preset-typescript": "^7.16.7",
-    "@commitlint/cli": "^16.2.4",
+    "@commitlint/cli": "^17.0.3",
     "@commitlint/config-conventional": "^16.2.4",
     "@types/d3": "^7.0.0",
     "@types/react": "^18.0.12",

package/src/components/Label.js

@@ -26,13 +26,16 @@ export default memo(
 
     if (!(data.length && (showIcon || showLabel))) return null;
     const { width, height } = useContext(chartContext);
-    const { seriesStep, seriesWidth, seriesStart } = getSeriesInfo({
-      step,
-      bandLength,
-      paddingInner,
-      paddingOuter,
-    });
 
+    // const { seriesStep, seriesWidth, seriesStart } = getSeriesInfo({
+    //   step,
+    //   bandLength,
+    //   paddingInner,
+    //   paddingOuter,
+    // });
+
+    const seriesStep = (1 + paddingInner) * step,
+      seriesWidth = step, seriesStart = paddingOuter * step;
     const isVertical = direction === 'vertical';
     const _position = label.position;
     return (

package/src/components/Marquee.js

@@ -1,4 +1,4 @@
-import { useEffect, memo, useRef, useState } from 'react';
+import { useEffect, memo, useRef, useState, useCallback } from "react";
 
 /**
  * 文字跑马灯组件
@@ -13,76 +13,84 @@ export default memo((props) => {
   } = props;
 
   const dom = useRef(null);
-  const content = useRef(null);
+  const target = useRef(null);
+  const observe = useRef(null);
+  const speed_ = useRef(0); //这里必须用一个ref绑定speed，否则animation中获取不到最新的speed
+  const timer = useRef();
+  const [overflow, setOverflow] = useState(false);
+  speed_.current = speed;
 
-  const [fresh,setFresh] = useState(false);
-  let textList = useRef([value]);
-  let duration = useRef(10/speed);
+  const startAnimation = (lineWidth)=>{
+    const animation = (timestamp) => {
+      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);
+  }
+  
 
   useEffect(() => {
-    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);
+    //初始化观察器，利用观察器来监视组件可视区域变化
+    observe.current = new IntersectionObserver(
+      function (entries) {
+        let entrie = entries[0];
+
+        if (entrie.boundingClientRect.width < entrie.rootBounds.width >= 1) {
+          //表示文字全部可视
+          cancelAnimationFrame(timer.current);
+          target.current.style.transform = "translate(0px,0px)"; //重置偏移
+          setOverflow(false);
+          return;
+        } else {
+          //否则文本溢出
+          if (!overflow) {
+            cancelAnimationFrame(timer.current);
+            startAnimation(entrie.boundingClientRect.width);
+            setOverflow(true);
+          }
+        }
+      },
+      {
+        root: dom.current,
+        rootMargin: "0px 0px 0px 0px",
+        threshold: new Array(101).fill(0).map((d, i) => i / 100), //这里设置了[0-1]之间所有的阈值，保证每一帧的变化都能被观察到
       }
-    }
-  }, [value,speed]);
- 
-  //在head标签中注入keyframes动画
-  useEffect(() => {
-    let md_marquee = document.getElementById('md_marquee'); //先查找是否已经存在md_marquee
-    if (!md_marquee) {
-      //不存在时再注入style标签
-      const keyframes = `@keyframes md_marquee {0%{
-                transform: translate(0,0);
-            }
-            100%{
-                transform: translate(-100%,0);
-            }}`;
-      const style = document.createElement('style');
-      style.id = 'md_marquee';
-      style.innerHTML = keyframes;
-      // 将style样式存放到head标签
-      document.getElementsByTagName('head')[0].appendChild(style);
-    }
+    );
+    // start observing
+    observe.current.observe(target.current);
+    return () => {
+      cancelAnimationFrame(timer.current);
+      observe.current.unobserve(target.current);
+      observe.current.disconnect();
+    };
   }, []);
-  let overflow = textList.current.length==2;
+
+  let textList = [value, value];
   return (
-    <span
+    <div
       style={{
-        width: '100%',
+        width: "100%",
         ...style,
-        display: 'flex',
-        whiteSpace: 'nowrap',
-        overflow: 'hidden',
-        justifyContent:overflow?"start":(style.justifyContent || "")
+        display: "flex",
+        whiteSpace: "nowrap",
+        overflow: "hidden",
+        justifyContent: overflow ? "start" : style.justifyContent || "",
       }}
       ref={dom}
     >
-      {textList.current.map((item, itemIndex) => {
+      {textList.map((item, i) => {
         return (
           <span
-            key={itemIndex}
-            style={
-              overflow
-                ? {
-                    //如果文本数量为2，则需要滚动
-                    animationName: 'md_marquee',
-                    animationTimingFunction: 'linear',
-                    animationIterationCount: 'infinite',
-                    animationDuration: duration.current + 's',
-                  }
-                : {}
-            }
-            ref={itemIndex == 0 ? content : null}
+            key={i}
+            ref={i == 0 ? target : null}
+            style={{ display: i == 1 && !overflow ? "none" : "inline" }}
           >
-            &nbsp;{item}
+            {item}&nbsp;
           </span>
         );
       })}
-    </span>
+    </div>
   );
 });