@easyv/charts 1.10.13 → 1.10.15

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),

package/src/components/TextOverflow.tsx

@@ -11,7 +11,8 @@ interface flowText {
   speed: number;
   style: CSSProperties;
   config?: any;
-  ShowType: string;
+  /** 历史兼容字段，图例等调用方可能传入，已不再影响省略号换行行为 */
+  ShowType?: string;
 }
 
 export default memo(
@@ -22,7 +23,6 @@ export default memo(
       style, // 样式
       speed = 5, // 动画速度
       config = {},
-      ShowType,
     } = props;
     const { needTitle = true } = config;
 
@@ -64,7 +64,6 @@ export default memo(
       <div
         style={{
           ...styles,
-          whiteSpace: ShowType == "Adaptive" ? "normal" : styles.whiteSpace,
         }}
         ref={ref}
         title={needTitle && type == "ellipsis" ? text || undefined : undefined}

package/src/formatter/legend.js

@@ -92,13 +92,20 @@ export const pieLegendFormatter = (series, props) => {
 
   const _color = seriesColorType == "pure" ? pure : stops[0].color;
   const textMarginLeft = 5;
+  const { adaptiveMaxWidth, isPieAdaptive, chartWidth } = props;
+  const isSideAdaptive = !!adaptiveMaxWidth;
+  const isTopBottomAdaptive = isPieAdaptive && !isSideAdaptive;
+  const nameOverflowType =
+    isSideAdaptive || isTopBottomAdaptive ? "ellipsis" : textOverflow;
 
-  // 1. 计算每列宽度（加上间距）
+  // 1. 计算每列宽度（加上间距）；正上/正下自适应不按全局列宽对齐
   let columns = [];
-  if (showName) columns.push(`${props.nameMaxWidth}px`);
-  if (showValue) columns.push(`${props.valueMaxWidth + valueGap}px`);
-  if (showPercent) columns.push(`${props.percentMaxWidth + percentGap}px`);
-  if (series.fieldsData.length > 0) {
+  if (!isTopBottomAdaptive) {
+    if (showName) columns.push(`${props.nameMaxWidth}px`);
+    if (showValue) columns.push(`${props.valueMaxWidth + valueGap}px`);
+    if (showPercent) columns.push(`${props.percentMaxWidth + percentGap}px`);
+  }
+  if (!isTopBottomAdaptive && series.fieldsData.length > 0) {
     //网格布局新增的各列宽度
     series.fieldsData.forEach((item) => {
       const idx = item.fieldsColumnIndex ?? 0;
@@ -135,6 +142,66 @@ export const pieLegendFormatter = (series, props) => {
     });
   }
 
+  const scaleColumnsToMax = (cols, maxTotal) => {
+    const widths = cols.map((c) => parseFloat(c) || 0);
+    const total = widths.reduce((a, b) => a + b, 0);
+    if (!total || total <= maxTotal) return cols.join(" ");
+    const scale = maxTotal / total;
+    return widths
+      .map((w) => `${Math.max(1, Math.floor(w * scale))}px`)
+      .join(" ");
+  };
+
+  const sideGridMaxWidth = isSideAdaptive
+    ? Math.max(
+        0,
+        adaptiveMaxWidth -
+          (icon
+            ? (parseFloat(icon.width) || 0) +
+              (parseFloat(icon.marginRight) || 0)
+            : 0),
+      )
+    : adaptiveMaxWidth;
+
+  const contentStyle = isSideAdaptive
+    ? {
+        display: "grid",
+        gridTemplateColumns: scaleColumnsToMax(columns, sideGridMaxWidth),
+        width: "max-content",
+        maxWidth: "100%",
+        minWidth: 0,
+        overflow: "hidden",
+        boxSizing: "border-box",
+      }
+    : isTopBottomAdaptive
+      ? {
+          display: "flex",
+          flexDirection: "row",
+          alignItems: "center",
+          flexWrap: "nowrap",
+          width: "max-content",
+          maxWidth: chartWidth ? `${chartWidth}px` : "100%",
+          minWidth: 0,
+          overflow: "hidden",
+          boxSizing: "border-box",
+          gap: `${valueGap}px ${percentGap}px`,
+        }
+      : {
+          width: `calc( 100% + ${textMarginLeft + valueGap + percentGap}px )`,
+          gridTemplateColumns: columns.join(" "),
+          overflowX: "visible",
+        };
+
+  const contentClassName = isTopBottomAdaptive
+    ? undefined
+    : isSideAdaptive
+      ? showName && showValue && showPercent
+        ? css.showAllStyle
+        : css.notShowAllStyle
+      : showName && showValue && showPercent
+        ? css.showAllStyle
+        : css.notShowAllStyle;
+
   return (
     <>
       {icon && (
@@ -142,30 +209,33 @@ export const pieLegendFormatter = (series, props) => {
           style={{
             ...icon,
             marginRight: icon.marginRight,
+            flexShrink: 0,
             transform: `translate(${nameX}px, ${nameY}px)`,
           }}
         />
       )}
-      <div
-        className={
-          showName && showValue && showPercent
-            ? css.showAllStyle
-            : css.notShowAllStyle
-        }
-        style={{
-          width: `calc( 100% + ${textMarginLeft + valueGap + percentGap}px )`,
-          gridTemplateColumns: columns.join(" "),
-          overflowX: "visible",
-        }}
-      >
+      <div className={contentClassName} style={contentStyle}>
         {showName && (
           <TextOverflow
             value={displayName}
-            type={textOverflow}
+            type={nameOverflowType}
             speed={speed}
             style={{
-              width: maxWidth,
+              width: isSideAdaptive
+                ? "100%"
+                : isTopBottomAdaptive
+                  ? "auto"
+                  : maxWidth,
+              maxWidth: isSideAdaptive
+                ? "100%"
+                : isTopBottomAdaptive
+                  ? "none"
+                  : maxWidth,
+              minWidth: isSideAdaptive ? 0 : undefined,
+              flexShrink: isTopBottomAdaptive ? 1 : undefined,
               marginLeft: textMarginLeft,
+              // whiteSpace: "nowrap",
+              overflow: "hidden",
               ...getFontStyle(nameFont),
               transform: `translate(${nameX}px, ${nameY}px)`,
             }}
@@ -177,12 +247,17 @@ export const pieLegendFormatter = (series, props) => {
               display: "flex",
               whiteSpace: "nowrap",
               ...getFontStyle(valueFont),
-              marginLeft: valueGap,
+              marginLeft: isSideAdaptive || isTopBottomAdaptive ? 0 : valueGap,
+              flexShrink: isTopBottomAdaptive ? 0 : undefined,
               transform: `translate(${valueX}px,${valueY}px)`,
               color: valueSameColor ? _color : valueFont.color,
               alignItems: "center",
-              justifyContent: alignToJustify(valueAlign ?? "center"),
-              textAlign: alignToTextAlign(valueAlign),
+              justifyContent: alignToJustify(
+                isTopBottomAdaptive ? "left" : (valueAlign ?? "center"),
+              ),
+              textAlign: alignToTextAlign(
+                isTopBottomAdaptive ? "left" : valueAlign,
+              ),
             }}
           >
             <span>
@@ -207,66 +282,74 @@ export const pieLegendFormatter = (series, props) => {
               display: "flex",
               whiteSpace: "nowrap",
               ...getFontStyle(percentFont),
-              marginLeft: percentGap,
+              marginLeft:
+                isSideAdaptive || isTopBottomAdaptive ? 0 : percentGap,
+              flexShrink: isTopBottomAdaptive ? 0 : undefined,
               transform: `translate(${percentX}px,${percentY}px)`,
               color: percentSameColor ? _color : percentFont.color,
               alignItems: "center",
-              justifyContent: alignToJustify(percentAlign),
-              textAlign: alignToTextAlign(percentAlign),
+              justifyContent: alignToJustify(
+                isTopBottomAdaptive ? "left" : percentAlign,
+              ),
+              textAlign: alignToTextAlign(
+                isTopBottomAdaptive ? "left" : percentAlign,
+              ),
             }}
           >
             {percent + "%"}
           </span>
         )}
-        {series.fieldsData?.map(
-          (
-            item,
-            index, //渲染网格布局新增的各列
-          ) => (
+        {series.fieldsData?.map((item, index) => (
+          <span
+            key={fieldColumnKeys[item.fieldsColumnIndex ?? index] ?? index}
+            style={{
+              display: "flex",
+              boxSizing: "border-box",
+              width: isTopBottomAdaptive ? "auto" : "100%",
+              minWidth: 0,
+              flexShrink: isTopBottomAdaptive ? 0 : undefined,
+              alignItems: "center",
+              justifyContent: alignToJustify(
+                isTopBottomAdaptive ? "left" : (item.align ?? "center"),
+              ),
+              textAlign: alignToTextAlign(
+                isTopBottomAdaptive ? "left" : (item.align ?? "center"),
+              ),
+              overflow:
+                isSideAdaptive || isTopBottomAdaptive ? "hidden" : "visible",
+              whiteSpace: "nowrap",
+              ...getFontStyle(item.font),
+              color: item.sameColor ? _color : item.font.color,
+            }}
+          >
             <span
-              key={fieldColumnKeys[item.fieldsColumnIndex ?? index] ?? index}
               style={{
-                display: "flex",
-                boxSizing: "border-box",
-                width: "100%",
-                minWidth: 0,
+                display: "inline-flex",
                 alignItems: "center",
-                justifyContent: alignToJustify(item.align ?? "center"),
-                textAlign: alignToTextAlign(item.align ?? "center"),
-                overflow: "visible",
-                ...getFontStyle(item.font),
-                color: item.sameColor ? _color : item.font.color,
+                flexWrap: "nowrap",
+                whiteSpace: "nowrap",
+                marginLeft: item.translate?.x ?? 0,
+                marginTop: item.translate?.y ?? 0,
               }}
             >
-              <span
-                style={{
-                  display: "inline-flex",
-                  alignItems: "center",
-                  flexWrap: "nowrap",
-                  whiteSpace: "nowrap",
-                  marginLeft: item.translate?.x ?? 0,
-                  marginTop: item.translate?.y ?? 0,
-                }}
-              >
-                <span style={{ whiteSpace: "nowrap" }}>{item.value}</span>
-                {item.suffix?.show &&
-                  item.suffix?.text != null &&
-                  String(item.suffix.text) !== "" && (
-                    <span
-                      style={{
-                        whiteSpace: "nowrap",
-                        fontSize: item.suffix.fontSize,
-                        marginLeft: item.suffix.translate?.x ?? 0,
-                        marginTop: item.suffix.translate?.y ?? 0,
-                      }}
-                    >
-                      {item.suffix.text}
-                    </span>
-                  )}
-              </span>
+              <span style={{ whiteSpace: "nowrap" }}>{item.value}</span>
+              {item.suffix?.show &&
+                item.suffix?.text != null &&
+                String(item.suffix.text) !== "" && (
+                  <span
+                    style={{
+                      whiteSpace: "nowrap",
+                      fontSize: item.suffix.fontSize,
+                      marginLeft: item.suffix.translate?.x ?? 0,
+                      marginTop: item.suffix.translate?.y ?? 0,
+                    }}
+                  >
+                    {item.suffix.text}
+                  </span>
+                )}
             </span>
-          ),
-        )}
+          </span>
+        ))}
       </div>
     </>
   );

package/src/utils/legendPlacement.js

@@ -0,0 +1,28 @@
+/**
+ * 解析图例 layout.alignment（如 "center top"、"right top"）
+ * 格式：{水平对齐} {位置}，位置为 top | right | left | bottom
+ */
+export const parseLegendAlignment = (alignment = "right center") => {
+  const [_alignment, position] = alignment.split(" ");
+  const isCenterTopOrBottom =
+    (position === "top" || position === "bottom") && _alignment === "center";
+  const isSidePlacement =
+    position === "left" ||
+    position === "right" ||
+    ((position === "top" || position === "bottom") && _alignment !== "center");
+  return {
+    alignment: _alignment,
+    position,
+    isCenterTopOrBottom,
+    isSidePlacement,
+  };
+};
+
+export const getPieAdaptiveMarginPreset = (show, alignment, presets) => {
+  if (!show) return presets.hidden;
+  const { alignment: mainAlign, position, isCenterTopOrBottom } =
+    parseLegendAlignment(alignment);
+  if (isCenterTopOrBottom) return presets[position];
+  if (position === "left" || mainAlign === "left") return presets.left;
+  return presets.right;
+};