@easyv/charts 1.6.14 → 1.6.16

package/lib/components/Band.js

@@ -149,9 +149,9 @@ var _default = exports["default"] = /*#__PURE__*/(0, _react.memo)(function (_ref
       y2 = yScaler(isVertical ? start : end);
     }
     var positionX = xScaler(x) - step / 2 + seriesStart + index * seriesStep;
-    var showHead, headUrl, headWidth, headHeight, headTranslate;
+    var showHead, headType, headUrl, headVideo, headWidth, headHeight, headTranslate;
     if (headDecorate) {
-      showHead = headDecorate.show, headUrl = headDecorate.url, headWidth = headDecorate.size.width, headHeight = headDecorate.size.height, headTranslate = headDecorate.translate;
+      showHead = headDecorate.show, headType = headDecorate.headType, headUrl = headDecorate.url, headVideo = headDecorate.video, headWidth = headDecorate.size.width, headHeight = headDecorate.size.height, headTranslate = headDecorate.translate;
     }
     //断轴图相关，将柱形在断轴处切开
     var setClipPath = function setClipPath() {
@@ -224,7 +224,7 @@ var _default = exports["default"] = /*#__PURE__*/(0, _react.memo)(function (_ref
         }
       },
       "data-data": JSON.stringify(data)
-    }), headUrl && showHead && /*#__PURE__*/_react["default"].createElement("div", {
+    }), (headUrl || headVideo) && showHead && (headType == "image" ? /*#__PURE__*/_react["default"].createElement("div", {
       style: {
         position: "absolute",
         background: "url(".concat(
@@ -237,7 +237,24 @@ var _default = exports["default"] = /*#__PURE__*/(0, _react.memo)(function (_ref
         zIndex: 1,
         transform: "translate(calc(-50% + ".concat(headTranslate.x, "px), calc(-50% + ").concat(headTranslate.y, "px))")
       }
-    }), /*#__PURE__*/_react["default"].createElement("div", {
+    }) : /*#__PURE__*/_react["default"].createElement("video", {
+      width: headWidth,
+      height: headHeight
+      //@ts-ignore
+      ,
+      src: window.appConfig.ASSETS_URL + headVideo
+      // controls={true}
+      ,
+      muted: true,
+      autoPlay: true,
+      style: {
+        position: "absolute",
+        left: isVertical ? "100%" : "50%",
+        top: isVertical ? "50%" : "0",
+        zIndex: 1,
+        transform: "translate(calc(-50% + ".concat(headTranslate.x, "px), calc(-50% + ").concat(headTranslate.y, "px))")
+      }
+    })), /*#__PURE__*/_react["default"].createElement("div", {
       style: _objectSpread({
         width: "100%",
         height: "100%",

package/lib/components/Legend.js

@@ -45,6 +45,8 @@ var _default = exports["default"] = /*#__PURE__*/(0, _react.memo)(function (_ref
     _ref$config$layout$tr = _ref$config$layout.translate,
     x = _ref$config$layout$tr.x,
     y = _ref$config$layout$tr.y,
+    _ref$config$loop = _ref$config.loop,
+    loop = _ref$config$loop === void 0 ? {} : _ref$config$loop,
     _ref$config$font = _ref$config.font,
     _ref$config$font2 = _ref$config$font === void 0 ? defaultFont : _ref$config$font,
     italic = _ref$config$font2.italic,
@@ -58,6 +60,51 @@ var _default = exports["default"] = /*#__PURE__*/(0, _react.memo)(function (_ref
     formatter = _ref.formatter,
     judge = _ref.judge;
   if (!show) return null;
+  var ref_container = (0, _react.useRef)(null); // 滚动容器
+  var ref_scrollTop = (0, _react.useRef)(0); // 当前滚动距离
+
+  var _useState = (0, _react.useState)(0),
+    _useState2 = (0, _slicedToArray2["default"])(_useState, 2),
+    scrollStep = _useState2[0],
+    setScrollStep = _useState2[1]; // 行高度
+
+  // 初始化行高
+  (0, _react.useEffect)(function () {
+    if (ref_container.current) {
+      var rowHeight = ref_container.current.querySelector('li').clientHeight + gridRowGap;
+      setScrollStep(rowHeight);
+    }
+  }, [gridRowGap]);
+
+  // 启动自动滚动定时器
+  (0, _react.useEffect)(function () {
+    if (!loop.show) return;
+    ref_scrollTop.current = 0;
+    var timer = setInterval(function () {
+      handleAutoScroll();
+    }, loop.interval * 1000); // 每隔3秒滚动一次
+
+    // 清除定时器
+    return function () {
+      return clearInterval(timer);
+    };
+  }, [scrollStep, loop.show, loop.interval]);
+  var handleAutoScroll = function handleAutoScroll() {
+    var table = ref_container.current;
+    if (!table) return;
+
+    // 如果已经滚动到了底部，则返回顶部
+    if (ref_scrollTop.current + table.clientHeight >= table.scrollHeight) {
+      ref_scrollTop.current = 0;
+    } else {
+      // 否则，滚动一行的高度
+      ref_scrollTop.current += scrollStep;
+    }
+    table.scrollTo({
+      top: ref_scrollTop.current,
+      behavior: 'smooth'
+    });
+  };
   var _series = (0, _utils.sortPie)(series, order);
   var _alignment$split = alignment.split(' '),
     _alignment$split2 = (0, _slicedToArray2["default"])(_alignment$split, 2),
@@ -76,12 +123,14 @@ var _default = exports["default"] = /*#__PURE__*/(0, _react.memo)(function (_ref
   }
   return /*#__PURE__*/_react["default"].createElement("div", {
     className: "__easyv-legend-wrapper",
-    style: _objectSpread({
+    style: _objectSpread(_objectSpread({
       position: 'absolute',
-      height: 'auto',
-      display: 'flex',
-      transform: 'translate3d(' + x + 'px, ' + y + 'px, 0px)'
-    }, getPosition(position, _alignment))
+      display: 'flex'
+    }, getPosition(position, _alignment, x, y)), {}, {
+      height: loop.show ? loop.height : 'auto',
+      overflowY: loop.show ? 'scroll' : 'auto'
+    }),
+    ref: ref_container
   }, /*#__PURE__*/_react["default"].createElement("ul", {
     style: {
       display: 'grid',
@@ -122,34 +171,35 @@ var _default = exports["default"] = /*#__PURE__*/(0, _react.memo)(function (_ref
   })));
 });
 var getPosition = function getPosition(position, alignment) {
+  var x = arguments.length > 2 && arguments[2] !== undefined ? arguments[2] : 0;
+  var y = arguments.length > 3 && arguments[3] !== undefined ? arguments[3] : 0;
   switch (position) {
     case 'top':
       return {
-        left: 0,
-        right: 0,
+        left: alignment == 'left' ? 5 : alignment == 'center' ? '50%' : '',
+        right: alignment == 'right' ? 10 : '',
         top: 5,
-        justifyContent: alignment === 'center' ? 'center' : alignment === 'left' ? 'flex-start' : 'flex-end'
+        transform: "translate3d(calc(".concat(alignment == 'center' ? '-50%' : '0px', " + ").concat(x, "px), ").concat(y, "px, 0px)")
       };
     case 'right':
       return {
-        top: 0,
-        bottom: 0,
+        top: '50%',
         right: 10,
-        alignItems: alignment === 'center' ? 'center' : alignment === 'left' ? 'flex-start' : 'flex-end'
+        transform: "translate3d(".concat(x, "px, calc(-50% + ").concat(y, "px), 0px)")
       };
     case 'left':
       return {
-        top: 0,
-        bottom: 0,
-        left: 10,
-        alignItems: alignment === 'center' ? 'center' : alignment === 'left' ? 'flex-start' : 'flex-end'
+        top: '50%',
+        left: 5,
+        transform: "translate3d(".concat(x, "px, calc(-50% + ").concat(y, "px), 0px)")
       };
     default:
+      // bottom
       return {
-        left: 0,
-        right: 0,
+        left: alignment == 'left' ? 5 : alignment == 'center' ? '50%' : '',
+        right: alignment == 'right' ? 10 : '',
         bottom: 5,
-        justifyContent: alignment === 'center' ? 'center' : alignment === 'left' ? 'flex-start' : 'flex-end'
+        transform: "translate3d(calc(".concat(alignment == 'center' ? '-50%' : '0px', " + ").concat(x, "px), ").concat(y, "px, 0px)")
       };
   }
 };

package/lib/formatter/legend.js

@@ -57,6 +57,7 @@ var pieLegendFormatter = exports.pieLegendFormatter = function pieLegendFormatte
     pure = seriesColor.pure,
     stops = seriesColor.linear.stops;
   var _color = seriesColorType == 'pure' ? pure : stops[0].color;
+  var textMarginLeft = 5;
   return /*#__PURE__*/React.createElement(React.Fragment, null, icon && /*#__PURE__*/React.createElement("span", {
     style: _objectSpread(_objectSpread({}, icon), {}, {
       marginRight: icon.marginRight,
@@ -65,7 +66,7 @@ var pieLegendFormatter = exports.pieLegendFormatter = function pieLegendFormatte
   }), /*#__PURE__*/React.createElement("div", {
     className: showName && showValue && showPercent ? _indexModule["default"].showAllStyle : _indexModule["default"].notShowAllStyle,
     style: {
-      width: "calc( 100% + ".concat(valueGap + percentGap, "px )")
+      width: "calc( 100% + ".concat(textMarginLeft + valueGap + percentGap, "px )")
     }
   }, showName && /*#__PURE__*/React.createElement(_components.TextOverflow, {
     value: displayName,
@@ -73,7 +74,7 @@ var pieLegendFormatter = exports.pieLegendFormatter = function pieLegendFormatte
     speed: speed,
     style: _objectSpread(_objectSpread({
       width: maxWidth,
-      marginLeft: 5
+      marginLeft: textMarginLeft
     }, (0, _utils.getFontStyle)(nameFont)), {}, {
       transform: "translate(".concat(nameX, "px, ").concat(nameY, "px)")
     })

package/package.json

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

package/src/components/Band.tsx

@@ -131,13 +131,15 @@ export default memo(
             }
             const positionX = xScaler(x) - step / 2 + seriesStart + index * seriesStep;
 
-            let showHead, headUrl, headWidth, headHeight, headTranslate;
+            let showHead, headType, headUrl, headVideo, headWidth, headHeight, headTranslate;
             if (headDecorate) {
               (showHead = headDecorate.show),
-                (headUrl = headDecorate.url),
-                (headWidth = headDecorate.size.width),
-                (headHeight = headDecorate.size.height),
-                (headTranslate = headDecorate.translate);
+              (headType = headDecorate.headType),
+              (headUrl = headDecorate.url),
+              (headVideo = headDecorate.video),
+              (headWidth = headDecorate.size.width),
+              (headHeight = headDecorate.size.height),
+              (headTranslate = headDecorate.translate);
             }
             //断轴图相关，将柱形在断轴处切开
             const setClipPath = () => {
@@ -205,8 +207,8 @@ export default memo(
                 }}
                 data-data={JSON.stringify(data)}
               >
-                {headUrl && showHead && (
-                  <div
+                {(headUrl || headVideo) && showHead && (
+                  headType=="image"?<div
                     style={{
                       position: "absolute",
                       background: `url(${
@@ -220,7 +222,21 @@ export default memo(
                       zIndex: 1,
                       transform: `translate(calc(-50% + ${headTranslate.x}px), calc(-50% + ${headTranslate.y}px))`,
                     }}
-                  ></div>
+                  ></div>:<video
+                    width={headWidth} height={headHeight} 
+                    //@ts-ignore
+                    src={window.appConfig.ASSETS_URL + headVideo}
+                    // controls={true}
+                    muted={true}
+                    autoPlay={true}
+                    style={{
+                      position: "absolute",
+                      left: isVertical ? "100%" : "50%",
+                      top: isVertical ? "50%" : "0",
+                      zIndex: 1,
+                      transform: `translate(calc(-50% + ${headTranslate.x}px), calc(-50% + ${headTranslate.y}px))`,
+                    }}
+                  ></video>
                 )}
                 <div
                   style={{

package/src/components/Legend.js

@@ -1,7 +1,7 @@
 /**
  * 图例
  */
-import React, { memo, useCallback } from 'react';
+import React, { memo, useCallback, useState, useEffect, useRef } from 'react';
 import { getIcon, sortPie } from '../utils';
 import TextOverflow from './TextOverflow';
 
@@ -27,6 +27,7 @@ export default memo(
         gridGap: { gridColumnGap, gridRowGap },
         translate: { x, y },
       },
+      loop = {},
       font: { italic, bold, ...font } = defaultFont,
       unselect: { opacity = 1 } = {},
     },
@@ -35,6 +36,49 @@ export default memo(
     judge
   }) => {
     if (!show) return null;
+
+    const ref_container = useRef(null); // 滚动容器
+    const ref_scrollTop = useRef(0); // 当前滚动距离
+
+    const [scrollStep, setScrollStep] = useState(0); // 行高度
+
+    // 初始化行高
+    useEffect(() => {
+      if (ref_container.current) {
+        const rowHeight = ref_container.current.querySelector('li').clientHeight + gridRowGap;
+        setScrollStep(rowHeight);
+      }
+    }, [gridRowGap]);
+
+    // 启动自动滚动定时器
+    useEffect(() => {
+      if (!loop.show) return;
+
+      ref_scrollTop.current = 0;
+
+      const timer = setInterval(() => {
+        handleAutoScroll();
+      }, loop.interval * 1000); // 每隔3秒滚动一次
+
+      // 清除定时器
+      return () => clearInterval(timer);
+    }, [scrollStep, loop.show, loop.interval])
+    
+    const handleAutoScroll = () => {
+      const table = ref_container.current;
+      if (!table) return;
+  
+      // 如果已经滚动到了底部，则返回顶部
+      if (ref_scrollTop.current + table.clientHeight >= table.scrollHeight) {
+        ref_scrollTop.current = 0;
+      } else {
+        // 否则，滚动一行的高度
+        ref_scrollTop.current += scrollStep;
+      }
+
+      table.scrollTo({ top: ref_scrollTop.current, behavior: 'smooth' });
+    };
+
     const _series = sortPie(series, order);
     const [_alignment, position] = alignment.split(' ');
     const length = _series.length;
@@ -59,11 +103,12 @@ export default memo(
         className='__easyv-legend-wrapper'
         style={{
           position: 'absolute',
-          height: 'auto',
           display: 'flex',
-          transform: 'translate3d(' + x + 'px, ' + y + 'px, 0px)',
-          ...getPosition(position, _alignment),
+          ...getPosition(position, _alignment, x, y),
+          height: loop.show ? loop.height : 'auto',
+          overflowY: loop.show ? 'scroll' : 'auto',
         }}
+        ref={ref_container}
       >
         <ul
           style={{
@@ -112,55 +157,33 @@ export default memo(
   }
 );
 
-const getPosition = (position, alignment) => {
+const getPosition = (position, alignment, x = 0, y = 0) => {
   switch (position) {
     case 'top':
       return {
-        left: 0,
-        right: 0,
+        left: alignment == 'left' ? 5 : alignment == 'center' ? '50%' : '',
+        right: alignment == 'right' ? 10 : '',
         top: 5,
-        justifyContent:
-          alignment === 'center'
-            ? 'center'
-            : alignment === 'left'
-            ? 'flex-start'
-            : 'flex-end',
+        transform: `translate3d(calc(${alignment == 'center' ? '-50%' : '0px'} + ${x}px), ${y}px, 0px)`
       };
     case 'right':
       return {
-        top: 0,
-        bottom: 0,
+        top: '50%',
         right: 10,
-        alignItems:
-          alignment === 'center'
-            ? 'center'
-            : alignment === 'left'
-            ? 'flex-start'
-            : 'flex-end',
+        transform: `translate3d(${x}px, calc(-50% + ${y}px), 0px)`
       };
     case 'left':
       return {
-        top: 0,
-        bottom: 0,
-        left: 10,
-        alignItems:
-          alignment === 'center'
-            ? 'center'
-            : alignment === 'left'
-            ? 'flex-start'
-            : 'flex-end',
+        top: '50%',
+        left: 5,
+        transform: `translate3d(${x}px, calc(-50% + ${y}px), 0px)`
       };
-    default:
+    default: // bottom
       return {
-        left: 0,
-        right: 0,
+        left: alignment == 'left' ? 5 : alignment == 'center' ? '50%' : '',
+        right: alignment == 'right' ? 10 : '',
         bottom: 5,
-        justifyContent:
-          alignment === 'center'
-            ? 'center'
-            : alignment === 'left'
-            ? 'flex-start'
-            : 'flex-end',
+        transform: `translate3d(calc(${alignment == 'center' ? '-50%' : '0px'} + ${x}px), ${y}px, 0px)`
       };
   }
 };

package/src/formatter/legend.js

@@ -43,6 +43,8 @@ export const pieLegendFormatter = (
   } = seriesColor;
 
   const _color = seriesColorType == 'pure' ? pure : stops[0].color;
+  const textMarginLeft = 5;
+
   return (
     <>
       {icon &&<span style={{ ...icon, marginRight: icon.marginRight, transform:`translate(${nameX}px, ${nameY}px)` }} />}
@@ -53,12 +55,12 @@ export const pieLegendFormatter = (
             : css.notShowAllStyle
         }
         style={{
-          width:`calc( 100% + ${valueGap+percentGap}px )`
+          width:`calc( 100% + ${textMarginLeft+valueGap+percentGap}px )`
         }}
       >
         {showName && (
           <TextOverflow value={displayName} type={textOverflow} speed={speed} style={{
-            width:maxWidth, marginLeft: 5, ...getFontStyle(nameFont), transform:`translate(${nameX}px, ${nameY}px)`
+            width:maxWidth, marginLeft: textMarginLeft, ...getFontStyle(nameFont), transform:`translate(${nameX}px, ${nameY}px)`
           }}></TextOverflow>
         )}
         {showValue && (

package/.husky/commit-msg

@@ -1,4 +0,0 @@
-#!/bin/sh
-. "$(dirname "$0")/_/husky.sh"
-
-yarn commitlint --edit $1