@easyv/charts 1.10.8 → 1.10.10

package/src/formatter/legend.js

@@ -42,6 +42,48 @@ export const pieLegendFormatter = (series, props) => {
         translate: { x: percentX, y: percentY },
       },
     } = props;
+  const fieldColumnKeys = props.fieldColumnKeys ?? [];
+  const fieldsColumnWidths = props.fieldsColumnWidths ?? [];
+  //获取文本所占宽度
+  function getStringWidth(text, fontStyle = "14px sans-serif") {
+    const canvas = document.createElement("canvas");
+    const ctx = canvas.getContext("2d");
+    ctx.font = fontStyle;
+    return ctx.measureText(text).width;
+  }
+  const alignToJustify = (align) =>
+    align == "left" ? "flex-start" : align == "right" ? "flex-end" : "center";
+  const alignToTextAlign = (align) =>
+    align === "left" ? "left" : align === "right" ? "right" : "center";
+  if (fieldColumnKeys.length > 0) {
+    //处理除name、value、percent外的列
+    series.fieldsData = fieldColumnKeys
+      .map((key, fieldsColumnIndex) => {
+        if (!series.fields?.[key] || !series.data?.hasOwnProperty(key)) {
+          return null;
+        }
+        return {
+          ...series.fields[key],
+          value: series.data[key],
+          fieldsColumnIndex,
+        };
+      })
+      .filter(Boolean);
+  } else {
+    series.fieldsData = Object.entries(series.fields || {}).reduce(
+      (arr, [key, config]) => {
+        if (series.data.hasOwnProperty(key)) {
+          arr.push({
+            ...config,
+            value: series.data[key],
+            fieldsColumnIndex: arr.length,
+          });
+        }
+        return arr;
+      },
+      [],
+    );
+  }
   const {
     type: seriesColorType,
     pure,
@@ -56,6 +98,43 @@ export const pieLegendFormatter = (series, props) => {
   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) {
+    //网格布局新增的各列宽度
+    series.fieldsData.forEach((item) => {
+      const idx = item.fieldsColumnIndex ?? 0;
+      const measured = getStringWidth(
+        item.value,
+        `${item.font.fontSize}px ${item.font.fontFamily}`,
+      );
+      const suf = item.suffix;
+      const suffixWidth =
+        suf?.show && suf?.text != null && String(suf.text) !== ""
+          ? getStringWidth(
+              String(suf.text),
+              `${suf.fontSize ?? item.font?.fontSize}px ${item.font.fontFamily}`,
+            )
+          : 0;
+      const tx = Math.max(0, Number(item.translate?.x) || 0);
+      const stx =
+        suf?.show && suf?.text != null && String(suf.text) !== ""
+          ? Math.max(0, Number(suf.translate?.x) || 0)
+          : 0;
+      const flowW = measured + suffixWidth + tx + stx;
+      let colW;
+      if (fieldsColumnWidths.length > idx && fieldsColumnWidths[idx] > 0) {
+        colW = Math.max(
+          Number(fieldsColumnWidths[idx]) || 0,
+          Number(item.maxWidth) || 0,
+          flowW,
+        );
+      } else {
+        const fromConfig = Number(item.maxWidth) || 0;
+        colW = Math.max(flowW, fromConfig);
+      }
+      columns.push(`${colW}px`);
+    });
+  }
+
   return (
     <>
       {icon && (
@@ -76,6 +155,7 @@ export const pieLegendFormatter = (series, props) => {
         style={{
           width: `calc( 100% + ${textMarginLeft + valueGap + percentGap}px )`,
           gridTemplateColumns: columns.join(" "),
+          overflowX: "visible",
         }}
       >
         {showName && (
@@ -101,18 +181,8 @@ export const pieLegendFormatter = (series, props) => {
               transform: `translate(${valueX}px,${valueY}px)`,
               color: valueSameColor ? _color : valueFont.color,
               alignItems: "center",
-              justifyContent:
-                valueAlign == "left"
-                  ? "flex-start"
-                  : valueAlign == "right"
-                  ? "flex-end"
-                  : "center",
-              textAlign:
-                valueAlign === "left"
-                  ? "left"
-                  : valueAlign === "right"
-                  ? "right"
-                  : "center",
+              justifyContent: alignToJustify(valueAlign ?? "center"),
+              textAlign: alignToTextAlign(valueAlign),
             }}
           >
             <span>
@@ -134,29 +204,69 @@ export const pieLegendFormatter = (series, props) => {
         {showPercent && (
           <span
             style={{
+              display: "flex",
               whiteSpace: "nowrap",
               ...getFontStyle(percentFont),
               marginLeft: percentGap,
               transform: `translate(${percentX}px,${percentY}px)`,
               color: percentSameColor ? _color : percentFont.color,
               alignItems: "center",
-              justifyContent:
-                percentAlign == "left"
-                  ? "flex-start"
-                  : percentAlign == "right"
-                  ? "flex-end"
-                  : "center",
-              textAlign:
-                percentAlign === "left"
-                  ? "left"
-                  : percentAlign === "right"
-                  ? "right"
-                  : "center",
+              justifyContent: alignToJustify(percentAlign),
+              textAlign: alignToTextAlign(percentAlign),
             }}
           >
             {percent + "%"}
           </span>
         )}
+        {series.fieldsData?.map(
+          (
+            item,
+            index, //渲染网格布局新增的各列
+          ) => (
+            <span
+              key={fieldColumnKeys[item.fieldsColumnIndex ?? index] ?? index}
+              style={{
+                display: "flex",
+                boxSizing: "border-box",
+                width: "100%",
+                minWidth: 0,
+                alignItems: "center",
+                justifyContent: alignToJustify(item.align ?? "center"),
+                textAlign: alignToTextAlign(item.align ?? "center"),
+                overflow: "visible",
+                ...getFontStyle(item.font),
+                color: item.sameColor ? _color : item.font.color,
+              }}
+            >
+              <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>
+          ),
+        )}
       </div>
     </>
   );

package/src/hooks/useAxes.js

@@ -372,8 +372,12 @@ export default ({
           clipAxisRange,
           lengthWithoutPaddingOuter,
           step: [
-            lengthWithoutPaddingOuter / clipAxisAllTicks[0].length,
-            lengthWithoutPaddingOuter / clipAxisAllTicks[1].length,
+            clipAxisAllTicks[0].length > 0
+              ? lengthWithoutPaddingOuter / clipAxisAllTicks[0].length
+              : 0,
+            clipAxisAllTicks[1].length > 0
+              ? lengthWithoutPaddingOuter / clipAxisAllTicks[1].length
+              : 0,
           ],
           allTicks: clipAxisAllTicks,
           ticks: clipAxisTicks,
@@ -454,16 +458,22 @@ export default ({
         //     }
         //   }
         // }
-        let step = lengthWithoutPaddingOuter / allTicks.length;
+        const tickLen = allTicks.length;
+        let step =
+          tickLen > 0 ? lengthWithoutPaddingOuter / tickLen : 0;
         const controlCfg = {
           controlStep: 0,
           controlDragScaler: null,
         };
         if (isC) {
-          controlCfg.controlStep = step / cPercent;
-          controlCfg.controlDragScaler = scaler
-            .copy()
-            .range([start / cPercent, end / cPercent]);
+          if (tickLen > 0 && cPercent > 0) {
+            controlCfg.controlStep = step / cPercent;
+            controlCfg.controlDragScaler = scaler
+              .copy()
+              .range([start / cPercent, end / cPercent]);
+          } else {
+            controlCfg.controlDragScaler = scaler.copy();
+          }
           const {
             start: start_,
             end: end_,
@@ -480,7 +490,7 @@ export default ({
           scaler = scales[type]().domain(newDomain).range(range);
           scaler.type = type;
           const controlOuter = len - outer;
-          step = controlOuter / allTicks.length;
+          step = tickLen > 0 ? controlOuter / tickLen : 0;
         }
         tmp.set(axisType, {
           ...item,