@easyv/charts 1.10.13 → 1.10.15

package/src/components/Legend.js

@@ -3,6 +3,7 @@
  */
 import React, { memo, useCallback, useState, useEffect, useRef } from "react";
 import { getIcon, sortPie } from "../utils";
+import { parseLegendAlignment } from "../utils/legendPlacement";
 import TextOverflow from "./TextOverflow";
 
 const defaultFont = {
@@ -32,6 +33,7 @@ export default memo(
         translate: { x, y },
       },
       loop = {},
+      name: { layoutMode } = {},
       font: { italic, bold, ...font } = defaultFont,
       unselect: { opacity = 1 } = {},
     },
@@ -39,6 +41,11 @@ export default memo(
     formatter,
     judge,
     pieClick,
+    isPieChart = false,
+    chartWidth,
+    componentWidth,
+    marginLeft = 0,
+    marginRight = 0,
   }) => {
     if (!show) return null;
 
@@ -86,7 +93,18 @@ export default memo(
     };
 
     const _series = sortPie(series, order, columnsSeries);
-    const [_alignment, position] = alignment.split(" ");
+    const {
+      alignment: _alignment,
+      position,
+      isCenterTopOrBottom,
+      isSidePlacement,
+    } = parseLegendAlignment(alignment);
+    const legendMainAlign =
+      _alignment == "left"
+        ? "flex-start"
+        : _alignment == "center"
+          ? "center"
+          : "flex-end";
     const length = _series.length;
 
     const onClick = useCallback(
@@ -198,6 +216,112 @@ export default memo(
       return Math.max(maxMeasured, maxCfg);
     });
 
+    const isPieAdaptive = isPieChart && layoutMode === "Adaptive";
+    const isPieFixedWidthGrid =
+      isPieChart &&
+      (layoutMode === "FixedWidth" ||
+        ((layoutMode == null || layoutMode === "") &&
+          LegendType == "FixedWidth"));
+    const isFixedWidth = isPieChart
+      ? isPieFixedWidthGrid
+      : LegendType == "FixedWidth";
+    const isSideLegend = isPieAdaptive && isSidePlacement;
+    const isTopBottomAdaptive = isPieAdaptive && isCenterTopOrBottom;
+    const fullWidth = componentWidth ?? chartWidth ?? 0;
+    const legendAreaWidth = Math.max(0, fullWidth - marginLeft - marginRight);
+    const sideLegendMaxWidth = isSideLegend
+      ? Math.max(
+          0,
+          position === "left" || _alignment === "left"
+            ? marginLeft
+            : marginRight,
+        )
+      : 0;
+    const isSideLegendOnRight =
+      isSideLegend &&
+      (position === "right" ||
+        (_alignment === "right" && position !== "left"));
+    const fixedColumnsPerRow = Math.min(
+      Math.max(1, Number(gridTemplateColumns) || 1),
+      length,
+    );
+    const isPieTopBottomFixedMultiCol =
+      isPieChart &&
+      isFixedWidth &&
+      isCenterTopOrBottom &&
+      fixedColumnsPerRow > 1;
+
+    const formatterExtra = {
+      ...config,
+      valueMaxWidth,
+      percentMaxWidth,
+      nameMaxWidth,
+      otherData: data,
+      columnsSeries,
+      fieldColumnKeys,
+      fieldsColumnWidths,
+      legendPosition: position,
+      isPieAdaptive: true,
+      ...(isSideLegend && sideLegendMaxWidth > 0
+        ? { adaptiveMaxWidth: sideLegendMaxWidth }
+        : {}),
+      ...(isTopBottomAdaptive ? { chartWidth: legendAreaWidth } : {}),
+    };
+
+    const renderPieSideItem = (series, i) => {
+      const {
+        type,
+        name,
+        displayName,
+        fieldName,
+        icon,
+        selected,
+        index,
+      } = series;
+      const _icon = getIcon(type, icon, series?.config?.line?.type);
+      return (
+        <li
+          key={i}
+          onClick={onClick(fieldName)}
+          data-name={displayName || name}
+          data-index={index}
+          style={{
+            display: "flex",
+            width: "max-content",
+            maxWidth: sideLegendMaxWidth || undefined,
+            opacity: selected === false ? opacity / 100 : 1,
+            alignItems: "center",
+            cursor: "pointer",
+            gap: _icon.gap,
+            minWidth: 0,
+            overflow: "hidden",
+            boxSizing: "border-box",
+          }}
+        >
+          {formatter ? (
+            formatter(series, formatterExtra)
+          ) : (
+            <>
+              <span style={{ ..._icon, flexShrink: 0 }} />
+              <TextOverflow
+                type="ellipsis"
+                value={displayName || name}
+                style={{
+                  ...font,
+                  fontStyle: italic ? "italic" : "normal",
+                  fontWeight: bold ? "bold" : "normal",
+                  minWidth: 0,
+                  flex: "1 1 0%",
+                  maxWidth: "100%",
+                }}
+                speed={speed}
+              />
+            </>
+          )}
+        </li>
+      );
+    };
+
     const stylePieOrAxis = formatter
       ? {
           display: "flex",
@@ -221,27 +345,137 @@ export default memo(
         }
       : {
           width: "100%",
-          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",
+          maxWidth: "100%",
+          boxSizing: "border-box",
           position: "absolute",
           ...getPosition(position, _alignment, x, y),
           height: loop.show ? height : "auto",
           overflowY: loop.show ? "scroll" : "auto",
         };
-    return LegendType == "FixedWidth" ? (
+    if (isPieAdaptive && isSideLegend) {
+      const pieAdaptiveWrapperStyle = {
+        position: "absolute",
+        display: "flex",
+        flexDirection: "column",
+        width: "max-content",
+        maxWidth: sideLegendMaxWidth || undefined,
+        alignItems: isSideLegendOnRight ? "flex-end" : "flex-start",
+        ...getPosition(position, _alignment, x, y),
+        height: loop.show ? height : "auto",
+        overflowY: loop.show ? "scroll" : "auto",
+      };
+      const pieAdaptiveListStyle = {
+        display: "flex",
+        flexDirection: "column",
+        width: "max-content",
+        maxWidth: "100%",
+        alignItems: isSideLegendOnRight ? "flex-end" : "flex-start",
+        margin: 0,
+        padding: 0,
+        listStyle: "none",
+        gap: `${gridRowGap}px`,
+      };
+      return (
+        <div
+          className="__easyv-legend-wrapper"
+          style={pieAdaptiveWrapperStyle}
+          ref={ref_container}
+        >
+          <ul style={pieAdaptiveListStyle}>
+            {_series.map((series, i) => renderPieSideItem(series, i))}
+          </ul>
+        </div>
+      );
+    }
+
+    if (isTopBottomAdaptive) {
+      const topBottomWrapperStyle = {
+        position: "absolute",
+        width: legendAreaWidth || "100%",
+        maxWidth: legendAreaWidth || "100%",
+        boxSizing: "border-box",
+        ...getPosition(position, _alignment, x, y),
+        height: loop.show ? height : "auto",
+        overflowY: loop.show ? "scroll" : "auto",
+      };
+      const topBottomListStyle = {
+        display: "flex",
+        flexDirection: "row",
+        flexWrap: "wrap",
+        width: "100%",
+        maxWidth: "100%",
+        boxSizing: "border-box",
+        margin: 0,
+        padding: 0,
+        listStyle: "none",
+        justifyContent: legendMainAlign,
+        gap: `${gridRowGap}px ${gridColumnGap}px`,
+      };
+      return (
+        <div
+          className="__easyv-legend-wrapper"
+          style={topBottomWrapperStyle}
+          ref={ref_container}
+        >
+          <ul style={topBottomListStyle}>
+            {_series.map((series, i) => {
+              const {
+                type,
+                name,
+                displayName,
+                fieldName,
+                icon,
+                selected,
+                index,
+              } = series;
+              const _icon = getIcon(type, icon, series?.config?.line?.type);
+              return (
+                <li
+                  key={i}
+                  onClick={onClick(fieldName)}
+                  data-name={displayName || name}
+                  data-index={index}
+                  style={{
+                    display: "inline-flex",
+                    alignItems: "center",
+                    width: "max-content",
+                    maxWidth: "100%",
+                    minWidth: 0,
+                    overflow: "hidden",
+                    boxSizing: "border-box",
+                    opacity: selected === false ? opacity / 100 : 1,
+                    cursor: "pointer",
+                    gap: _icon.gap,
+                    flexShrink: 0,
+                  }}
+                >
+                  {formatter ? (
+                    formatter(series, formatterExtra)
+                  ) : (
+                    <>
+                      <span style={{ ..._icon, flexShrink: 0 }} />
+                      <TextOverflow
+                        type="ellipsis"
+                        value={displayName || name}
+                        style={{
+                          ...font,
+                          fontStyle: italic ? "italic" : "normal",
+                          fontWeight: bold ? "bold" : "normal",
+                          minWidth: 0,
+                        }}
+                        speed={speed}
+                      />
+                    </>
+                  )}
+                </li>
+              );
+            })}
+          </ul>
+        </div>
+      );
+    }
+
+    return isFixedWidth ? (
       <div
         className="__easyv-legend-wrapper"
         style={{
@@ -256,10 +490,17 @@ export default memo(
         <ul
           style={{
             display: "grid",
-            gridGap: gridRowGap + "px " + gridColumnGap + "px",
-            gridTemplateColumns: formatter
-              ? `${nameMaxWidth}px ${valueMaxWidth}px ${percentMaxWidth}px`
-              : "repeat(" + Math.min(gridTemplateColumns, length) + ", 1fr)", //饼图或者柱状图配合不同的图例显示格式
+            rowGap: gridRowGap + "px",
+            columnGap:
+              (isPieTopBottomFixedMultiCol
+                ? Math.max(gridColumnGap, 40)
+                : gridColumnGap) + "px",
+            justifyContent: isPieTopBottomFixedMultiCol
+              ? legendMainAlign
+              : undefined,
+            gridTemplateColumns: isPieTopBottomFixedMultiCol
+              ? `repeat(${fixedColumnsPerRow}, max-content)`
+              : `repeat(${fixedColumnsPerRow}, minmax(0, 1fr))`,
           }}
         >
           {_series.map((series, i) => {
@@ -326,53 +567,47 @@ export default memo(
         style={stylePieOrAxis}
         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, i) => {
-                if (Math.floor(i / gridTemplateColumns) == indexs) {
-                  const {
-                    type,
-                    name,
-                    displayName,
-                    fieldName,
-                    icon,
-                    selected,
-                    index,
-                  } = series;
-                  const _icon = getIcon(type, icon, series?.config?.line?.type);
-                  return (
-                    <li
-                      key={i}
-                      onClick={onClick(fieldName)}
-                      data-name={displayName || name}
-                      data-index={index}
-                      style={{
-                        display: "flex",
-                        opacity: selected === false ? opacity / 100 : 1,
-                        alignItems: "center",
-                        cursor: "pointer",
-                        gap: _icon.gap,
-                        overflow: formatter ? "visible" : undefined,
-                      }}
-                    >
-                      {formatter ? (
-                        formatter(series, {
+        {formatter ? (
+          [...Array(Math.ceil(series.length / gridTemplateColumns))].map(
+            (_, indexs) => (
+              <ul
+                key={indexs}
+                style={{
+                  display: "flex",
+                  width: "fit-content",
+                  justifyContent: legendMainAlign,
+                  gap: `${gridRowGap}px  ${gridColumnGap}px`,
+                  marginBottom: gridRowGap + "px",
+                }}
+              >
+                {_series.map((series, i) => {
+                  if (Math.floor(i / gridTemplateColumns) == indexs) {
+                    const {
+                      type,
+                      name,
+                      displayName,
+                      fieldName,
+                      icon,
+                      selected,
+                      index,
+                    } = series;
+                    const _icon = getIcon(type, icon, series?.config?.line?.type);
+                    return (
+                      <li
+                        key={i}
+                        onClick={onClick(fieldName)}
+                        data-name={displayName || name}
+                        data-index={index}
+                        style={{
+                          display: "flex",
+                          opacity: selected === false ? opacity / 100 : 1,
+                          alignItems: "center",
+                          cursor: "pointer",
+                          gap: _icon.gap,
+                          overflow: "visible",
+                        }}
+                      >
+                        {formatter(series, {
                           ...config,
                           valueMaxWidth,
                           percentMaxWidth,
@@ -381,37 +616,77 @@ export default memo(
                           columnsSeries,
                           fieldColumnKeys,
                           fieldsColumnWidths,
-                        })
-                      ) : (
-                        <>
-                          <span style={_icon} />
-                          <TextOverflow
-                            ShowType={LegendType}
-                            type="ellipsis"
-                            value={displayName || name}
-                            style={{
-                              ...font,
-                              fontStyle: italic ? "italic" : "normal",
-                              fontWeight: bold ? "bold" : "normal",
-                              minWidth: getCanvasTextWidth(
-                                displayName
-                                  ? displayName.substring(0, 5) ||
-                                      name.substring(0, 5)
-                                  : "",
-                                font.letterSpacing,
-                                `${font.fontSize}px ${font.fontFamily}`,
-                              ),
-                            }}
-                            speed={speed}
-                          ></TextOverflow>
-                        </>
-                      )}
-                    </li>
-                  );
-                }
-              })}
-            </ul>
-          ),
+                        })}
+                      </li>
+                    );
+                  }
+                })}
+              </ul>
+            ),
+          )
+        ) : (
+          <ul
+            style={{
+              display: "flex",
+              flexDirection: "row",
+              flexWrap: "wrap",
+              width: "100%",
+              maxWidth: "100%",
+              boxSizing: "border-box",
+              margin: 0,
+              padding: 0,
+              listStyle: "none",
+              justifyContent: legendMainAlign,
+              gap: `${gridRowGap}px ${gridColumnGap}px`,
+            }}
+          >
+            {_series.map((series, i) => {
+              const {
+                type,
+                name,
+                displayName,
+                fieldName,
+                icon,
+                selected,
+                index,
+              } = series;
+              const _icon = getIcon(type, icon, series?.config?.line?.type);
+              return (
+                <li
+                  key={i}
+                  onClick={onClick(fieldName)}
+                  data-name={displayName || name}
+                  data-index={index}
+                  style={{
+                    display: "inline-flex",
+                    alignItems: "center",
+                    maxWidth: "100%",
+                    minWidth: 0,
+                    boxSizing: "border-box",
+                    verticalAlign: "middle",
+                    opacity: selected === false ? opacity / 100 : 1,
+                    cursor: "pointer",
+                    gap: _icon.gap,
+                  }}
+                >
+                  <span style={{ ..._icon, flexShrink: 0 }} />
+                  <TextOverflow
+                    type="ellipsis"
+                    value={displayName || name}
+                    style={{
+                      ...font,
+                      fontStyle: italic ? "italic" : "normal",
+                      fontWeight: bold ? "bold" : "normal",
+                      minWidth: 0,
+                      flex: "1 1 0%",
+                      maxWidth: "100%",
+                    }}
+                    speed={speed}
+                  />
+                </li>
+              );
+            })}
+          </ul>
         )}
       </div>
     );

package/src/components/Marquee.tsx

@@ -37,7 +37,7 @@ export default memo(
     const startAnimation = (lineWidth: number) => {
       const animation = (timestamp: number) => {
         let frame = Math.round(
-          ((timestamp * speed_.current) % (lineWidth * 100)) / 100
+          ((timestamp * speed_.current) % (lineWidth * 100)) / 100,
         );
         target.current.style.transform = `translate(-${frame}px,0px)`;
         target.current.nextSibling.style.transform = `translate(-${frame}px,0px)`;
@@ -57,7 +57,7 @@ export default memo(
       const containerWidth = rootRef.current.clientWidth;
 
       if (textWidth <= containerWidth) {
-        console.log("文字全部可视");
+        // console.log("文字全部可视");
         //表示文字全部可视
         cancelAnimationFrame(timer.current || 0);
         target.current.style.transform = "translate(0px,0px)"; //重置偏移
@@ -88,7 +88,7 @@ export default memo(
           root: rootRef.current,
           rootMargin: "0px 0px 0px 0px",
           threshold: new Array(101).fill(0).map((d, i) => i / 100), //这里设置了[0-1]之间所有的阈值，保证每一帧的变化都能被观察到
-        }
+        },
       );
 
       // 使用ResizeObserver监听元素尺寸变化，这样即使有3D变换也能准确检测
@@ -142,5 +142,5 @@ export default memo(
         })}
       </div>
     );
-  })
+  }),
 );