@easyv/charts 1.10.14 → 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,11 +93,16 @@ 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.split(" ")[0] == "left"
+      _alignment == "left"
         ? "flex-start"
-        : alignment.split(" ")[0] == "center"
+        : _alignment == "center"
           ? "center"
           : "flex-end";
     const length = _series.length;
@@ -204,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",
@@ -234,7 +352,130 @@ export default memo(
           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={{
@@ -249,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) => {

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>
     );
-  })
+  }),
 );

package/src/components/PieChart.js

@@ -34,10 +34,21 @@ import { pieLegendFormatter as legendFormatter } from "../formatter";
 import ringCss from "../css/piechart.module.css";
 import { useAiDataOfPie } from "../hooks";
 import { PieTooltip } from "./PieTooltip";
-import { toFixed } from "@easyv/utils/lib/common/utils";
+import { getPieAdaptiveMarginPreset } from "../utils/legendPlacement";
 
 const PI = Math.PI;
 
+const PIE_ADAPTIVE_MARGINS = {
+  right: { marginTop: 24, marginBottom: 24, marginLeft: 0, marginRight: 200 },
+  left: { marginTop: 24, marginBottom: 24, marginLeft: 200, marginRight: 0 },
+  top: { marginTop: 150, marginBottom: 24, marginLeft: 24, marginRight: 24 },
+  bottom: { marginTop: 24, marginBottom: 150, marginLeft: 24, marginRight: 24 },
+  hidden: { marginTop: 24, marginBottom: 24, marginLeft: 24, marginRight: 24 },
+};
+
+const getPieAdaptiveMargin = (show, alignment) =>
+  getPieAdaptiveMarginPreset(show, alignment, PIE_ADAPTIVE_MARGINS);
+
 const defaultChart = {
   outerRadius: 1,
   innerRadius: 0,
@@ -49,111 +60,111 @@ const defaultChart = {
 };
 const defaultAngle = { startAngle: 0, endAngle: 360, antiClockwise: false };
 
-const nameDy = (showValue, showPercent, mode, dir) => {
-  if (showValue || showPercent) {
-    if (mode == "vertical") {
-      return dir == 1 ? "1.1em" : "-2.6em";
-    } else {
-      return 0;
-    }
-  } else {
-    if (mode == "vertical") {
-      return dir * 1.1 + "em";
-    } else {
-      return 0;
-    }
-  }
-};
-const valueDy = (value1, mode, dir) => {
-  if (value1) {
-    if (mode == "vertical") {
-      return "1.5em";
-    } else {
-      return 0;
-    }
-  } else {
-    if (mode == "vertical") {
-      return dir == 1 ? "1.1em" : "-1.1em";
-    } else {
-      return 0;
-    }
-  }
-};
+// const nameDy = (showValue, showPercent, mode, dir) => {
+//   if (showValue || showPercent) {
+//     if (mode == "vertical") {
+//       return dir == 1 ? "1.1em" : "-2.6em";
+//     } else {
+//       return 0;
+//     }
+//   } else {
+//     if (mode == "vertical") {
+//       return dir * 1.1 + "em";
+//     } else {
+//       return 0;
+//     }
+//   }
+// };
+// const valueDy = (value1, mode, dir) => {
+//   if (value1) {
+//     if (mode == "vertical") {
+//       return "1.5em";
+//     } else {
+//       return 0;
+//     }
+//   } else {
+//     if (mode == "vertical") {
+//       return dir == 1 ? "1.1em" : "-1.1em";
+//     } else {
+//       return 0;
+//     }
+//   }
+// };
 
-const percentDy_ = (showName, showValue, mode, dir) => {
-  if (showValue) {
-    return 0;
-  }
-  if (showName) {
-    if (mode == "vertical") {
-      return "1.5em";
-    } else {
-      return 0;
-    }
-  } else {
-    if (mode == "vertical") {
-      return dir * 1.1 + "em";
-    } else {
-      return 0;
-    }
-  }
-};
+// const percentDy_ = (showName, showValue, mode, dir) => {
+//   if (showValue) {
+//     return 0;
+//   }
+//   if (showName) {
+//     if (mode == "vertical") {
+//       return "1.5em";
+//     } else {
+//       return 0;
+//     }
+//   } else {
+//     if (mode == "vertical") {
+//       return dir * 1.1 + "em";
+//     } else {
+//       return 0;
+//     }
+//   }
+// };
 
-const percentX = (showName, showValue, mode, x) => {
-  if (showValue) {
-    return "";
-  }
-  if (showName) {
-    if (mode == "vertical") {
-      return x;
-    } else {
-      return "";
-    }
-  } else {
-    return x;
-  }
-};
+// const percentX = (showName, showValue, mode, x) => {
+//   if (showValue) {
+//     return "";
+//   }
+//   if (showName) {
+//     if (mode == "vertical") {
+//       return x;
+//     } else {
+//       return "";
+//     }
+//   } else {
+//     return x;
+//   }
+// };
 
-const percentDx = (showName, showValue, mode) => {
-  if (showValue) {
-    return "0.5em";
-  }
-  if (showName) {
-    if (mode == "vertical") {
-      return 0;
-    } else {
-      return "0.5em";
-    }
-  } else {
-    return 0;
-  }
-};
+// const percentDx = (showName, showValue, mode) => {
+//   if (showValue) {
+//     return "0.5em";
+//   }
+//   if (showName) {
+//     if (mode == "vertical") {
+//       return 0;
+//     } else {
+//       return "0.5em";
+//     }
+//   } else {
+//     return 0;
+//   }
+// };
 
-const percentDy = (showName, showValue, mode) => {
-  if (showValue) {
-    return 0;
-  }
-  if (showName) {
-    if (mode == "vertical") {
-      return "1.5em";
-    } else {
-      return 0;
-    }
-  } else {
-    return 0;
-  }
-};
+// const percentDy = (showName, showValue, mode) => {
+//   if (showValue) {
+//     return 0;
+//   }
+//   if (showName) {
+//     if (mode == "vertical") {
+//       return "1.5em";
+//     } else {
+//       return 0;
+//     }
+//   } else {
+//     return 0;
+//   }
+// };
 
-const valueDx = (showName, mode) => {
-  if (!showName) {
-    return "";
-  }
-  if (mode == "vertical") {
-    return "";
-  } else {
-    return "0.5em";
-  }
-};
+// const valueDx = (showName, mode) => {
+//   if (!showName) {
+//     return "";
+//   }
+//   if (mode == "vertical") {
+//     return "";
+//   } else {
+//     return "0.5em";
+//   }
+// };
 
 const getCoord = (deg, radius) => {
   var x = Math.cos(deg) * radius,
@@ -254,7 +265,7 @@ const Component = memo(
         label,
         legend: { formatter = legendFormatter, ...legend },
         animation: { ringDuration, labelDuration } = {},
-        margin: { marginLeft, marginTop },
+        margin: { marginLeft, marginTop, marginRight, marginBottom },
       },
       fan: {
         chart = defaultChart,
@@ -301,7 +312,45 @@ const Component = memo(
       height: chartHeight,
       triggerOnRelative,
       onEmit,
+      updateConfig,
     } = useContext(chartContext);
+    const { show: legendShow, name: { layoutMode: legendLayoutMode } = {} } =
+      legend.config;
+    const legendAlignment = legend.config?.layout?.alignment;
+    const adaptiveMarginPresetKey = useRef("");
+    useEffect(() => {
+      if (legendLayoutMode !== "Adaptive" || !updateConfig) return;
+      const presetKey = `${legendLayoutMode}-${legendShow}-${legendAlignment}`;
+      if (adaptiveMarginPresetKey.current === presetKey) return;
+      adaptiveMarginPresetKey.current = presetKey;
+      const target = getPieAdaptiveMargin(legendShow, legendAlignment);
+      updateConfig({
+        id,
+        type: "config",
+        payload: [
+          {
+            path: ["chart", "margin", "marginTop"],
+            field: "value",
+            value: target.marginTop,
+          },
+          {
+            path: ["chart", "margin", "marginBottom"],
+            field: "value",
+            value: target.marginBottom,
+          },
+          {
+            path: ["chart", "margin", "marginLeft"],
+            field: "value",
+            value: target.marginLeft,
+          },
+          {
+            path: ["chart", "margin", "marginRight"],
+            field: "value",
+            value: target.marginRight,
+          },
+        ],
+      });
+    }, [id, updateConfig, legendLayoutMode, legendShow, legendAlignment]);
     const [y, setY] = useState(1);
     const radius = (Math.min(chartWidth, chartHeight) / 2) * outerRadius;
 
@@ -626,6 +675,10 @@ const Component = memo(
         <Legend
           {...legend}
           height={chartHeight}
+          componentWidth={width}
+          marginLeft={marginLeft}
+          marginRight={marginRight}
+          isPieChart
           columnsSeries={columnsSeries}
           data={data}
           series={_arcs.map((arc) => ({
@@ -897,6 +950,10 @@ const Component = memo(
         <Legend
           {...legend}
           height={chartHeight}
+          componentWidth={width}
+          marginLeft={marginLeft}
+          marginRight={marginRight}
+          isPieChart
           data={data}
           columnsSeries={columnsSeries}
           series={_arcs.map((arc) => ({
@@ -1031,7 +1088,9 @@ const Current = ({
               value={nameTemp}
               speed={speed}
               style={{
+                width: "100%",
                 maxWidth,
+                textAlign: "center",
                 display: textOverflow == "marquee" ? "flex" : "bolck",
                 justifyContent: "center",
                 ...getFontStyle(nameFont),