@easyv/charts 1.7.36 → 1.7.37

package/src/components/Legend.js

@@ -1,267 +1,289 @@
-/**
- * 图例
- */
-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,
-    height,
-    config,
-    config: {
-      show,
-      order = '',
-      interactive,
-      LegendType,//类型
-      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 (
-      LegendType=="FixedWidth"?
-      <div
-        className='__easyv-legend-wrapper'
-        style={{
-          position: 'absolute',
-          display: 'flex',
-          ...getPosition(position, _alignment, x, y),
-          height: loop.show ? height : 'auto',
-          overflowY: loop.show ? 'scroll' : 'auto',
-          pointerEvents:"none"//鼠标穿透
-        }}
-        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>:<div
-        className='__easyv-legend-wrapper'
-        style={{
-          display:'flex',
-          flexWrap:"wrap",
-          alignContent:alignment.split(" ")[0]=="center"&&(alignment.split(" ")[1]=="left"||alignment.split(" ")[1]=="right")?alignment.split(" ")[1]=="left"?"flex-start":"flex-end":alignment.split(" ")[0]=="left"?"flex-start":alignment.split(" ")[0]=="center"?"center":"flex-end",
-          flexDirection: "column",
-          position: 'absolute',
-          ...getPosition(position, _alignment, x, y),
-          height: loop.show ? height : 'auto',
-          overflowY: loop.show ? 'scroll' : 'auto',
-          width:"100%",
-          pointerEvents:"none"
-        }}
-        ref={ref_container}
-      >
-
-       {[...Array(Math.ceil(series.length/gridTemplateColumns))].map((_,indexs)=>(
-        <ul
-        key={indexs}
-        style={{
-          display: 'flex',
-          width: 'fit-content',
-          justifyContent:alignment.split(" ")[0]=="left"?"flex-start":alignment.split(" ")[0]=="center"?"center":"flex-end",
-          marginBottom:"0px",
-          gap:`${gridRowGap}px  ${gridColumnGap}px`,
-          marginBottom:gridRowGap+"px"
-        }}
-      >
-        {_series.map((series, index) => {
-          if(Math.floor(index/gridTemplateColumns)==indexs){
-          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 ShowType={LegendType} type="ellipsis" value={displayName || name} style={{
-                      ...font,
-                      fontStyle: italic ? 'italic' : 'normal',
-                      fontWeight: bold ? 'bold' : 'normal',
-                      minWidth:getCanvasTextWidth(displayName.substring(0,5) || name.substring(0,5),font.letterSpacing,`${font.fontSize}px ${font.fontFamily}` )
-                    }} 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)`
-      };
-  }
-};
-const getCanvasTextWidth=(text,letterSpacing, font = '16px Arial')=>{
-  const canvas = document.createElement('canvas');
-  const ctx = canvas.getContext('2d');
-  ctx.font = font;
-  return ctx.measureText(text).width+(text.length)*letterSpacing+"px";
-  // return ctx.measureText(text).width+(text.length-1)*letterSpacing+"px";//-1有bug
-}
+/**
+ * 图例
+ */
+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,
+    height,
+    config,
+    config: {
+      show,
+      order = '',
+      interactive,
+      LegendType,//类型
+      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
+      })
+    }
+
+    // 计算最大宽度
+    const valueFont = config.value?.font || {};
+    const percentFont = config.percent?.font || {};
+    const valueSuffix = config.value?.suffix?.text || '';
+    const valueSplitConfig = config.value?.splitConfig || {};
+    const getValueStr = (item) => {
+      let valueStr = (item.data?.y ?? item.value ?? '') + (valueSuffix || '');
+      if (valueSplitConfig.show && valueSplitConfig.separator) {
+        valueStr = valueStr.toString().replace(/\B(?=(\d{3})+(?!\d))/g, valueSplitConfig.separator);
+      }
+      return valueStr;
+    };
+    const valueMaxWidth = Math.max(
+      ..._series.map(item => parseFloat(getCanvasTextWidth(getValueStr(item), valueFont.letterSpacing || 0, `${valueFont.fontSize || 12}px ${valueFont.fontFamily || 'Arial'}`)))
+    );
+    const percentMaxWidth = Math.max(
+      ..._series.map(item => {
+        const percentStr = (item.percent !== undefined ? item.percent : item.data?.percent) + '%';
+        return parseFloat(getCanvasTextWidth(percentStr, percentFont.letterSpacing || 0, `${percentFont.fontSize || 12}px ${percentFont.fontFamily || 'Arial'}`));
+      })
+    );
+    const nameMaxWidth = config.name?.maxWidth || 80;
+
+    return (
+      LegendType=="FixedWidth"?
+      <div
+        className='__easyv-legend-wrapper'
+        style={{
+          position: 'absolute',
+          display: 'flex',
+          ...getPosition(position, _alignment, x, y),
+          height: loop.show ? height : 'auto',
+          overflowY: loop.show ? 'scroll' : 'auto',
+          pointerEvents:"none"//鼠标穿透
+        }}
+        ref={ref_container}
+      >
+        <ul
+          style={{
+            display: 'grid',
+            gridGap: gridRowGap + 'px ' + gridColumnGap + 'px',
+            gridTemplateColumns: `${nameMaxWidth}px ${valueMaxWidth}px ${percentMaxWidth}px`,
+          }}
+        >
+          {_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, valueMaxWidth, percentMaxWidth, nameMaxWidth })
+                ) : (
+                  <>
+                    <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>:<div
+        className='__easyv-legend-wrapper'
+        style={{
+          display:'flex',
+          flexWrap:"wrap",
+          alignContent:alignment.split(" ")[0]=="center"&&(alignment.split(" ")[1]=="left"||alignment.split(" ")[1]=="right")?alignment.split(" ")[1]=="left"?"flex-start":"flex-end":alignment.split(" ")[0]=="left"?"flex-start":alignment.split(" ")[0]=="center"?"center":"flex-end",
+          flexDirection: "column",
+          position: 'absolute',
+          ...getPosition(position, _alignment, x, y),
+          height: loop.show ? height : 'auto',
+          overflowY: loop.show ? 'scroll' : 'auto',
+          width:"100%",
+          pointerEvents:"none"
+        }}
+        ref={ref_container}
+      >
+
+       {[...Array(Math.ceil(series.length/gridTemplateColumns))].map((_,indexs)=>(
+        <ul
+        key={indexs}
+        style={{
+          display: 'flex',
+          width: 'fit-content',
+          justifyContent:alignment.split(" ")[0]=="left"?"flex-start":alignment.split(" ")[0]=="center"?"center":"flex-end",
+          marginBottom:"0px",
+          gap:`${gridRowGap}px  ${gridColumnGap}px`,
+          marginBottom:gridRowGap+"px"
+        }}
+      >
+        {_series.map((series, index) => {
+          if(Math.floor(index/gridTemplateColumns)==indexs){
+          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, valueMaxWidth, percentMaxWidth, nameMaxWidth })
+              ) : (
+                <>
+                  <span style={_icon} />
+                  <TextOverflow ShowType={LegendType} type="ellipsis" value={displayName || name} style={{
+                      ...font,
+                      fontStyle: italic ? 'italic' : 'normal',
+                      fontWeight: bold ? 'bold' : 'normal',
+                      minWidth:getCanvasTextWidth(displayName.substring(0,5) || name.substring(0,5),font.letterSpacing,`${font.fontSize}px ${font.fontFamily}` )
+                    }} 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)`
+      };
+  }
+};
+const getCanvasTextWidth=(text,letterSpacing, font = '16px Arial')=>{
+  const canvas = document.createElement('canvas');
+  const ctx = canvas.getContext('2d');
+  ctx.font = font;
+  return ctx.measureText(text).width+(text.length)*letterSpacing+"px";
+  // return ctx.measureText(text).width+(text.length-1)*letterSpacing+"px";//-1有bug
+}