@easyv/charts 1.6.14 → 1.6.15

package/lib/components/Axis.js

@@ -228,7 +228,7 @@ var Label = function Label(_ref5) {
     }
   })));
 };
-var _default = exports["default"] = /*#__PURE__*/(0, _react.memo)(/*#__PURE__*/(0, _react.forwardRef)(function (_ref6, ref) {
+var _default = exports["default"] = /*#__PURE__*/(0, _react.memo)( /*#__PURE__*/(0, _react.forwardRef)(function (_ref6, ref) {
   var orientation = _ref6.orientation,
     scaler = _ref6.scaler,
     _ref6$tickSize = _ref6.tickSize,

package/lib/components/ChartContainer.js

@@ -15,7 +15,7 @@ function _objectSpread(e) { for (var r = 1; r < arguments.length; r++) { var t =
  * svg外框
  */
 var event = function event() {};
-var _default = exports["default"] = /*#__PURE__*/(0, _react.memo)(/*#__PURE__*/(0, _react.forwardRef)(function (_ref, ref) {
+var _default = exports["default"] = /*#__PURE__*/(0, _react.memo)( /*#__PURE__*/(0, _react.forwardRef)(function (_ref, ref) {
   var width = _ref.width,
     height = _ref.height,
     marginLeft = _ref.marginLeft,

package/lib/components/Control.js

@@ -18,7 +18,7 @@ function _getRequireWildcardCache(e) { if ("function" != typeof WeakMap) return
 function _interopRequireWildcard(e, r) { if (!r && e && e.__esModule) return e; if (null === e || "object" != _typeof(e) && "function" != typeof e) return { "default": e }; var t = _getRequireWildcardCache(r); if (t && t.has(e)) return t.get(e); var n = { __proto__: null }, a = Object.defineProperty && Object.getOwnPropertyDescriptor; for (var u in e) if ("default" !== u && {}.hasOwnProperty.call(e, u)) { var i = a ? Object.getOwnPropertyDescriptor(e, u) : null; i && (i.get || i.set) ? Object.defineProperty(n, u, i) : n[u] = e[u]; } return n["default"] = e, t && t.set(e, n), n; }
 function ownKeys(e, r) { var t = Object.keys(e); if (Object.getOwnPropertySymbols) { var o = Object.getOwnPropertySymbols(e); r && (o = o.filter(function (r) { return Object.getOwnPropertyDescriptor(e, r).enumerable; })), t.push.apply(t, o); } return t; }
 function _objectSpread(e) { for (var r = 1; r < arguments.length; r++) { var t = null != arguments[r] ? arguments[r] : {}; r % 2 ? ownKeys(Object(t), !0).forEach(function (r) { (0, _defineProperty2["default"])(e, r, t[r]); }) : Object.getOwnPropertyDescriptors ? Object.defineProperties(e, Object.getOwnPropertyDescriptors(t)) : ownKeys(Object(t)).forEach(function (r) { Object.defineProperty(e, r, Object.getOwnPropertyDescriptor(t, r)); }); } return e; }
-var _default = exports["default"] = /*#__PURE__*/(0, _react.memo)(/*#__PURE__*/(0, _react.forwardRef)(function (props, ref) {
+var _default = exports["default"] = /*#__PURE__*/(0, _react.memo)( /*#__PURE__*/(0, _react.forwardRef)(function (props, ref) {
   var _props$actions = props.actions,
     setX = _props$actions.setX,
     setWorking = _props$actions.setWorking,

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/components/Marquee.js

@@ -17,7 +17,7 @@ function _objectSpread(e) { for (var r = 1; r < arguments.length; r++) { var t =
  * 文字跑马灯组件
  * eg: <Marquee value={文本内容} speed={跑马灯速度} style={额外样式}></Marquee>
  */
-var _default = exports["default"] = /*#__PURE__*/(0, _react.memo)(/*#__PURE__*/(0, _react.forwardRef)(function (props, ref) {
+var _default = exports["default"] = /*#__PURE__*/(0, _react.memo)( /*#__PURE__*/(0, _react.forwardRef)(function (props, ref) {
   var value = props.value,
     style = props.style,
     _props$speed = props.speed,

package/lib/components/TextOverflow.js

@@ -17,7 +17,7 @@ function _objectSpread(e) { for (var r = 1; r < arguments.length; r++) { var t =
  * 文本溢出组件
  * eg: <TextOverflow  type={溢出形式} value={文本内容} speed={跑马灯速度} style={额外样式}></Marquee>
  */
-var _default = exports["default"] = /*#__PURE__*/(0, _react.memo)(/*#__PURE__*/(0, _react.forwardRef)(function (props, ref) {
+var _default = exports["default"] = /*#__PURE__*/(0, _react.memo)( /*#__PURE__*/(0, _react.forwardRef)(function (props, ref) {
   var type = props.type,
     value = props.value,
     style = props.style,

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/lib/utils/index.js

@@ -354,11 +354,11 @@ function band() {
   };
   scale.range = function (_) {
     var _ref11;
-    return arguments.length ? (_ref11 = (0, _slicedToArray2["default"])(_, 2), r0 = _ref11[0], r1 = _ref11[1], r0 = +r0, r1 = +r1, rescale()) : [r0, r1];
+    return arguments.length ? ((_ref11 = (0, _slicedToArray2["default"])(_, 2), r0 = _ref11[0], r1 = _ref11[1]), r0 = +r0, r1 = +r1, rescale()) : [r0, r1];
   };
   scale.rangeRound = function (_) {
     var _ref12;
-    return _ref12 = (0, _slicedToArray2["default"])(_, 2), r0 = _ref12[0], r1 = _ref12[1], r0 = +r0, r1 = +r1, round = true, rescale();
+    return (_ref12 = (0, _slicedToArray2["default"])(_, 2), r0 = _ref12[0], r1 = _ref12[1]), r0 = +r0, r1 = +r1, round = true, rescale();
   };
   scale.bandwidth = function () {
     return bandwidth;
@@ -499,7 +499,7 @@ var getBandBackground = exports.getBandBackground = function getBandBackground(p
     var _pattern$backgroundSi = pattern.backgroundSize,
       backgroundSize = _pattern$backgroundSi === void 0 ? '100% 100%' : _pattern$backgroundSi,
       _pattern = (0, _objectWithoutProperties2["default"])(pattern, _excluded);
-    return 'center top / ' + backgroundSize + ' url("data:image/svg+xml,' + encodeURIComponent((0, _server.renderToStaticMarkup)(/*#__PURE__*/React.createElement(SvgBackground, {
+    return 'center top / ' + backgroundSize + ' url("data:image/svg+xml,' + encodeURIComponent((0, _server.renderToStaticMarkup)( /*#__PURE__*/React.createElement(SvgBackground, {
       fill: fill,
       pattern: _pattern
     }))) + '")';

package/package.json

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

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 && (