@easyv/charts 1.6.13 → 1.6.15

package/src/components/Legend.js

@@ -1,166 +1,189 @@
-/**
- * 图例
- */
-import React, { memo, useCallback } from 'react';
-import { getIcon, sortPie } from '../utils';
-import TextOverflow from './TextOverflow';
-
-const defaultFont = {
-  fontStyle: 'normal',
-  fontWeight: 'normal',
-};
-
-export default memo(
-  ({
-    series,
-    config,
-    config: {
-      show,
-      order = '',
-      interactive,
-      maxWidth,
-      textOverflow,
-      speed,
-      layout: {
-        alignment = 'right center',
-        gridTemplateColumns,
-        gridGap: { gridColumnGap, gridRowGap },
-        translate: { x, y },
-      },
-      font: { italic, bold, ...font } = defaultFont,
-      unselect: { opacity = 1 } = {},
-    },
-    filterData,
-    formatter,
-    judge
-  }) => {
-    if (!show) return null;
-    const _series = sortPie(series, order);
-    const [_alignment, position] = alignment.split(' ');
-    const length = _series.length;
-
-    const onClick = useCallback(
-      (e) => {
-        const { dataset } = e.currentTarget;
-        const { name } = dataset;
-        filterData && interactive && filterData(name);
-      },
-      [interactive, filterData]
-    );
-
-    if (judge == 0) {
-      _series.forEach((d) => {
-        d.percent=0
-      })
-    }
-
-    return (
-      <div
-        className='__easyv-legend-wrapper'
-        style={{
-          position: 'absolute',
-          height: 'auto',
-          display: 'flex',
-          transform: 'translate3d(' + x + 'px, ' + y + 'px, 0px)',
-          ...getPosition(position, _alignment),
-        }}
-      >
-        <ul
-          style={{
-            display: 'grid',
-            gridGap: gridRowGap + 'px ' + gridColumnGap + 'px',
-            gridTemplateColumns:
-              'repeat(' + Math.min(gridTemplateColumns, length) + ', 1fr)',
-          }}
-        >
-          {_series.map((series, index) => {
-            const { type, name, displayName, icon, selected } = series;
-            const _icon = getIcon(type, icon, series?.config?.line?.type);
-            return (
-              <li
-                key={index}
-                onClick={onClick}
-                data-name={name}
-                style={{
-                  display: 'flex',
-                  opacity: selected === false ? opacity / 100 : 1,
-                  alignItems: 'center',
-                  cursor: "pointer",
-                  gap: _icon.gap,
-                }}
-              >
-                {formatter ? (
-                  formatter(series, config)
-                ) : (
-                  <>
-                    <span style={_icon} />
-                    <TextOverflow type={textOverflow} value={displayName || name} style={{
-                        ...font,
-                        width:maxWidth,
-                        fontStyle: italic ? 'italic' : 'normal',
-                        fontWeight: bold ? 'bold' : 'normal',
-                      }} speed={speed}></TextOverflow>
-                    
-                  </>
-                )}
-              </li>
-            );
-          })}
-        </ul>
-      </div>
-    );
-  }
-);
-
-const getPosition = (position, alignment) => {
-  switch (position) {
-    case 'top':
-      return {
-        left: 0,
-        right: 0,
-        top: 5,
-        justifyContent:
-          alignment === 'center'
-            ? 'center'
-            : alignment === 'left'
-            ? 'flex-start'
-            : 'flex-end',
-      };
-    case 'right':
-      return {
-        top: 0,
-        bottom: 0,
-        right: 10,
-        alignItems:
-          alignment === 'center'
-            ? 'center'
-            : alignment === 'left'
-            ? 'flex-start'
-            : 'flex-end',
-      };
-    case 'left':
-      return {
-        top: 0,
-        bottom: 0,
-        left: 10,
-        alignItems:
-          alignment === 'center'
-            ? 'center'
-            : alignment === 'left'
-            ? 'flex-start'
-            : 'flex-end',
-      };
-    default:
-      return {
-        left: 0,
-        right: 0,
-        bottom: 5,
-        justifyContent:
-          alignment === 'center'
-            ? 'center'
-            : alignment === 'left'
-            ? 'flex-start'
-            : 'flex-end',
-      };
-  }
-};
+/**
+ * 图例
+ */
+import React, { memo, useCallback, useState, useEffect, useRef } from 'react';
+import { getIcon, sortPie } from '../utils';
+import TextOverflow from './TextOverflow';
+
+const defaultFont = {
+  fontStyle: 'normal',
+  fontWeight: 'normal',
+};
+
+export default memo(
+  ({
+    series,
+    config,
+    config: {
+      show,
+      order = '',
+      interactive,
+      maxWidth,
+      textOverflow,
+      speed,
+      layout: {
+        alignment = 'right center',
+        gridTemplateColumns,
+        gridGap: { gridColumnGap, gridRowGap },
+        translate: { x, y },
+      },
+      loop = {},
+      font: { italic, bold, ...font } = defaultFont,
+      unselect: { opacity = 1 } = {},
+    },
+    filterData,
+    formatter,
+    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;
+
+    const onClick = useCallback(
+      (e) => {
+        const { dataset } = e.currentTarget;
+        const { name } = dataset;
+        filterData && interactive && filterData(name);
+      },
+      [interactive, filterData]
+    );
+
+    if (judge == 0) {
+      _series.forEach((d) => {
+        d.percent=0
+      })
+    }
+
+    return (
+      <div
+        className='__easyv-legend-wrapper'
+        style={{
+          position: 'absolute',
+          display: 'flex',
+          ...getPosition(position, _alignment, x, y),
+          height: loop.show ? loop.height : 'auto',
+          overflowY: loop.show ? 'scroll' : 'auto',
+        }}
+        ref={ref_container}
+      >
+        <ul
+          style={{
+            display: 'grid',
+            gridGap: gridRowGap + 'px ' + gridColumnGap + 'px',
+            gridTemplateColumns:
+              'repeat(' + Math.min(gridTemplateColumns, length) + ', 1fr)',
+          }}
+        >
+          {_series.map((series, index) => {
+            const { type, name, displayName, icon, selected } = series;
+            const _icon = getIcon(type, icon, series?.config?.line?.type);
+            return (
+              <li
+                key={index}
+                onClick={onClick}
+                data-name={name}
+                style={{
+                  display: 'flex',
+                  opacity: selected === false ? opacity / 100 : 1,
+                  alignItems: 'center',
+                  cursor: "pointer",
+                  gap: _icon.gap,
+                }}
+              >
+                {formatter ? (
+                  formatter(series, config)
+                ) : (
+                  <>
+                    <span style={_icon} />
+                    <TextOverflow type={textOverflow} value={displayName || name} style={{
+                        ...font,
+                        width:maxWidth,
+                        fontStyle: italic ? 'italic' : 'normal',
+                        fontWeight: bold ? 'bold' : 'normal',
+                      }} speed={speed}></TextOverflow>
+                    
+                  </>
+                )}
+              </li>
+            );
+          })}
+        </ul>
+      </div>
+    );
+  }
+);
+
+const getPosition = (position, alignment, x = 0, y = 0) => {
+  switch (position) {
+    case 'top':
+      return {
+        left: alignment == 'left' ? 5 : alignment == 'center' ? '50%' : '',
+        right: alignment == 'right' ? 10 : '',
+        top: 5,
+        transform: `translate3d(calc(${alignment == 'center' ? '-50%' : '0px'} + ${x}px), ${y}px, 0px)`
+      };
+    case 'right':
+      return {
+        top: '50%',
+        right: 10,
+        transform: `translate3d(${x}px, calc(-50% + ${y}px), 0px)`
+      };
+    case 'left':
+      return {
+        top: '50%',
+        left: 5,
+        transform: `translate3d(${x}px, calc(-50% + ${y}px), 0px)`
+      };
+    default: // bottom
+      return {
+        left: alignment == 'left' ? 5 : alignment == 'center' ? '50%' : '',
+        right: alignment == 'right' ? 10 : '',
+        bottom: 5,
+        transform: `translate3d(calc(${alignment == 'center' ? '-50%' : '0px'} + ${x}px), ${y}px, 0px)`
+      };
+  }
+};