@easyv/charts 1.10.9 → 1.10.10

package/src/components/PieChart.js

@@ -186,7 +186,7 @@ const getArc = (
     ...rest
   },
   series_,
-  index
+  index,
 ) => {
   const series =
     series_.find((s) => s.fieldName == rest.data.s) ||
@@ -268,6 +268,7 @@ const Component = memo(
         current,
       } = {},
       order,
+      columnsSeries,
       series,
       animation: {
         on,
@@ -378,7 +379,7 @@ const Component = memo(
             padAngle: _padAngle,
             innerRadius,
             outerRadius: scaler(arc.value),
-          })
+          }),
         );
       }
       return _legendDataWithPercent.map((arc, index) => ({
@@ -410,7 +411,7 @@ const Component = memo(
           type: "onClick",
         });
       },
-      [onEvent]
+      [onEvent],
     );
 
     const onMouseEnter = useCallback(
@@ -423,7 +424,7 @@ const Component = memo(
           type: "onMouseEnter",
         });
       },
-      [onEvent, triggerOnRelative, onEmit]
+      [onEvent, triggerOnRelative, onEmit],
     );
 
     const onMouseLeave = useCallback(
@@ -437,7 +438,7 @@ const Component = memo(
           type: "onMouseLeave",
         });
       },
-      [onEvent]
+      [onEvent],
     );
 
     useLayoutEffect(() => {
@@ -557,7 +558,7 @@ const Component = memo(
                   .innerRadius(centerRadius)
                   .outerRadius(centerRadius)(value);
                 const dashLength = Math.ceil(
-                  (Math.PI * centerRadius * 2) / _arcs.length
+                  (Math.PI * centerRadius * 2) / _arcs.length,
                 );
                 const pie = getColorList(series.color);
                 return (
@@ -600,7 +601,7 @@ const Component = memo(
                     </defs>
                   </Fragment>
                 );
-              }
+              },
             )}
             {label && (
               <RingLabel
@@ -649,6 +650,8 @@ const Component = memo(
         <Legend
           {...legend}
           height={chartHeight}
+          columnsSeries={columnsSeries}
+          data={data}
           series={_arcs.map((arc) => ({
             ...arc,
             percent: arc.percent.toFixed(legendPrecision),
@@ -697,7 +700,7 @@ const Component = memo(
                   outerRadius,
                   index: dataIndex,
                 },
-                index
+                index,
               ) => {
                 const current = index == currentIndex;
                 const prev = index == prevIndex.current;
@@ -706,14 +709,14 @@ const Component = memo(
                 const fillOpacity = animateColor
                   ? 1
                   : current
-                  ? opacity / 100
-                  : 1;
+                    ? opacity / 100
+                    : 1;
                 const deltaWidthen = offset * widthen;
                 const deltaHeighten = offset * heighten;
                 const path = arc
                   .innerRadius(innerRadius + deltaWidthen)
                   .outerRadius(outerRadius + deltaHeighten + deltaWidthen)(
-                  value
+                  value,
                 );
                 const pie = getColorList(series.color);
                 const currentPie = animateColor
@@ -726,15 +729,15 @@ const Component = memo(
                   //let offsetWidth=decorate2.radiusWidth/2 + radiusWidthAdd/2;   //当前文字需生成在装饰物内，故而半径需要减小
                   let textArc = arc
                     .innerRadius(
-                      outerRadius + (current ? gap : categoryText.gap)
+                      outerRadius + (current ? gap : categoryText.gap),
                     )
                     .outerRadius(
-                      outerRadius + (current ? gap : categoryText.gap)
+                      outerRadius + (current ? gap : categoryText.gap),
                     )(value);
                   let lastA = textArc.lastIndexOf("A");
                   textPath = textArc.slice(
                     0,
-                    lastA > 0 ? lastA : textArc.length
+                    lastA > 0 ? lastA : textArc.length,
                   ); //文字路径
                   categoryTextStyle = current
                     ? animateCTS
@@ -779,7 +782,7 @@ const Component = memo(
                             .outerRadius(
                               outerRadius +
                                 decorate2.radiusWidth +
-                                (current ? radiusWidthAdd : 0)
+                                (current ? radiusWidthAdd : 0),
                             )(value)}
                           stroke={show ? color : "none"}
                           strokeWidth={show ? strokeWidth : "0"}
@@ -843,7 +846,7 @@ const Component = memo(
                     </defs>
                   </Fragment>
                 );
-              }
+              },
             )}
             {label && (
               <Label
@@ -918,6 +921,8 @@ const Component = memo(
         <Legend
           {...legend}
           height={chartHeight}
+          data={data}
+          columnsSeries={columnsSeries}
           series={_arcs.map((arc) => ({
             ...arc,
             percent: arc.percent.toFixed(legendPrecision),
@@ -928,7 +933,7 @@ const Component = memo(
         />
       </div>
     );
-  }
+  },
 );
 
 const Current = ({
@@ -979,7 +984,7 @@ const Current = ({
   //数据容错,当data都为零那么需要进行以下容错
   if (judge == 0) {
     _data.forEach((d) => {
-      (d.percent = 0), (d.value = 0);
+      ((d.percent = 0), (d.value = 0));
     });
   }
 
@@ -1143,7 +1148,7 @@ const Label = ({
 }) => {
   const _arcs = useMemo(
     () => getDataWithPercent(arcs, precision),
-    [arcs, precision]
+    [arcs, precision],
   );
   //数据做出容错
   if (judge == 0) {
@@ -1171,14 +1176,14 @@ const Label = ({
             outerRadius,
             index: actualIndex,
           },
-          index
+          index,
         ) => {
           const [x, y] = arc.centroid();
           const midAngle = Math.atan2(y, x);
 
           const [x1, y1] = getCoord(
             midAngle,
-            maxRadius ? maxRadius : outerRadius
+            maxRadius ? maxRadius : outerRadius,
           );
 
           const radius = (maxRadius ? maxRadius : outerRadius) + distance;
@@ -1223,8 +1228,8 @@ const Label = ({
                     lineColor
                       ? lineColor
                       : type == "pure"
-                      ? pure
-                      : stops[0].color
+                        ? pure
+                        : stops[0].color
                   }
                   fill="none"
                 />
@@ -1253,8 +1258,8 @@ const Label = ({
                         align == "left"
                           ? "flex-start"
                           : align == "center"
-                          ? "center"
-                          : "flex-end",
+                            ? "center"
+                            : "flex-end",
                       justifyContent: "center",
                     }}
                   >
@@ -1315,7 +1320,7 @@ const Label = ({
               </g>
             )
           );
-        }
+        },
       )}
     </g>
   );
@@ -1376,7 +1381,7 @@ const RingLabel = ({
 }) => {
   const _arcs = useMemo(
     () => getDataWithPercent(arcs, precision),
-    [arcs, precision]
+    [arcs, precision],
   );
 
   //数据做出容错
@@ -1406,14 +1411,14 @@ const RingLabel = ({
             outerRadius,
             index: actualIndex,
           },
-          index
+          index,
         ) => {
           const [x, y] = arc.centroid();
           const midAngle = Math.atan2(y, x);
 
           const [x1, y1] = getCoord(
             midAngle,
-            maxRadius ? maxRadius : outerRadius
+            maxRadius ? maxRadius : outerRadius,
           );
 
           const radius = (maxRadius ? maxRadius : outerRadius) + distance;
@@ -1456,8 +1461,8 @@ const RingLabel = ({
                     lineColor
                       ? lineColor
                       : type == "pure"
-                      ? pure
-                      : stops[0].color
+                        ? pure
+                        : stops[0].color
                   }
                   fill="none"
                 />
@@ -1546,7 +1551,7 @@ const RingLabel = ({
               </g>
             )
           );
-        }
+        },
       )}
     </g>
   );

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>
     </>
   );