@easyv/charts 1.10.8 → 1.10.10

package/src/components/Legend.js

@@ -14,7 +14,9 @@ export default memo(
   ({
     series,
     height,
+    data,
     config,
+    columnsSeries,
     config: {
       show,
       order = "",
@@ -83,7 +85,7 @@ export default memo(
       table.scrollTo({ top: ref_scrollTop.current, behavior: "smooth" });
     };
 
-    const _series = sortPie(series, order);
+    const _series = sortPie(series, order, columnsSeries);
     const [_alignment, position] = alignment.split(" ");
     const length = _series.length;
 
@@ -145,6 +147,56 @@ export default memo(
       }),
     );
     const nameMaxWidth = config.name?.maxWidth || 80;
+    const fieldColumnKeys = [];
+    if (columnsSeries?.columns) {
+      Object.values(columnsSeries.columns).forEach((col) => {
+        if (col.field && !fieldColumnKeys.includes(col.field)) {
+          fieldColumnKeys.push(col.field);
+        }
+      });
+    }
+    const fieldsColumnWidths = fieldColumnKeys.map((fieldName) => {
+      let maxMeasured = 0;
+      let maxCfg = 0;
+      _series.forEach((s) => {
+        const cfg = s.fields?.[fieldName];
+        if (
+          !cfg ||
+          !s.data ||
+          !Object.prototype.hasOwnProperty.call(s.data, fieldName)
+        ) {
+          return;
+        }
+        const f = cfg.font || {};
+        const fontStack = `${f.fontSize || 12}px ${f.fontFamily || "Arial"}`;
+        const letter = f.letterSpacing || 0;
+        let w = parseFloat(
+          getCanvasTextWidth(
+            String(s.data[fieldName] ?? ""),
+            letter,
+            fontStack,
+          ),
+        );
+        const suf = cfg.suffix;
+        if (suf?.show && suf.text != null && String(suf.text) !== "") {
+          const sufFont = `${suf.fontSize || f.fontSize || 12}px ${
+            f.fontFamily || "Arial"
+          }`;
+          w += parseFloat(
+            getCanvasTextWidth(String(suf.text), letter, sufFont),
+          );
+        }
+        const tx = Number(cfg.translate?.x) || 0;
+        const stx =
+          suf?.show && suf.text != null && String(suf.text) !== ""
+            ? Number(suf.translate?.x) || 0
+            : 0;
+        w += Math.max(0, tx) + Math.max(0, stx);
+        maxMeasured = Math.max(maxMeasured, w);
+        maxCfg = Math.max(maxCfg, Number(cfg.maxWidth) || 0);
+      });
+      return Math.max(maxMeasured, maxCfg);
+    });
 
     const stylePieOrAxis = formatter
       ? {
@@ -233,6 +285,7 @@ export default memo(
                   alignItems: "center",
                   cursor: "pointer",
                   gap: _icon.gap,
+                  overflow: formatter ? "visible" : undefined,
                 }}
               >
                 {formatter ? (
@@ -241,6 +294,10 @@ export default memo(
                     valueMaxWidth,
                     percentMaxWidth,
                     nameMaxWidth,
+                    otherData: data,
+                    columnsSeries,
+                    fieldColumnKeys,
+                    fieldsColumnWidths,
                   })
                 ) : (
                   <>
@@ -311,6 +368,7 @@ export default memo(
                         alignItems: "center",
                         cursor: "pointer",
                         gap: _icon.gap,
+                        overflow: formatter ? "visible" : undefined,
                       }}
                     >
                       {formatter ? (
@@ -319,6 +377,10 @@ export default memo(
                           valueMaxWidth,
                           percentMaxWidth,
                           nameMaxWidth,
+                          otherData: data,
+                          columnsSeries,
+                          fieldColumnKeys,
+                          fieldsColumnWidths,
                         })
                       ) : (
                         <>

package/src/components/Line.js

@@ -1,23 +1,27 @@
 /**
  * 折线图
  */
-import React, { memo, useMemo } from 'react';
-import { line as d3Line, area as d3Area, curveCatmullRom, curveMonotoneX } from 'd3v7';
-import { getColorList } from '../utils';
-import { Lighter, LinearGradient } from '.';
+import React, { memo, useMemo } from "react";
+import {
+  line as d3Line,
+  area as d3Area,
+  curveCatmullRom,
+  curveMonotoneX,
+} from "d3v7";
+import { getColorList } from "../utils";
+import { Lighter, LinearGradient } from ".";
 
 const defined = (d) => d.data.y != null;
-const getLineData = (data, connectNulls) =>{
-  return data.flatMap(d=>{
+const getLineData = (data, connectNulls) => {
+  return data.flatMap((d) => {
     const y = d.data.y;
-    return isNaN(y)?
-      connectNulls?
-        []:
-        {...d,data:{...d.data,y:null}}:
-      d
+    return isNaN(y)
+      ? connectNulls
+        ? []
+        : { ...d, data: { ...d.data, y: null } }
+      : d;
   });
-}
-  
+};
 
 const Area = ({
   data,
@@ -30,11 +34,11 @@ const Area = ({
     opacity,
     size: { width: patternW, height: patternH },
     curve,
-    tension
+    tension,
   },
   xScaler,
   yScaler,
-  opacity:Areaopacity
+  opacity: Areaopacity,
 }) => {
   const [height] = yScaler.range();
   const area = useMemo(() => getColorList(fill), [fill]);
@@ -43,7 +47,7 @@ const Area = ({
     const areaGen = d3Area()
       .x(({ data: { x } }) => xScaler(x))
       .y1(({ data: { y } }) => yScaler(y))
-      .y0(({})=>yScaler(0))
+      .y0(({}) => yScaler(0))
       .defined(defined);
     curve && areaGen.curve(curveCatmullRom.alpha(tension));
     curve && areaGen.curve(curveMonotoneX);
@@ -52,11 +56,28 @@ const Area = ({
 
   return (
     <>
-      <path d={areaGen(data)} style={{pointerEvents:"none",opacity:Areaopacity}} stroke='none' fill={'url(#' + id + ')'} />
+      <path
+        d={areaGen(data)}
+        style={{ pointerEvents: "none", opacity: Areaopacity }}
+        stroke="none"
+        fill={"url(#" + id + ")"}
+      />
       <defs>
-        {type && type == 'pattern' ? (
-          <pattern id={id} patternUnits="userSpaceOnUse" width={patternW} height={patternH}>
-            {url && <image opacity={opacity} width={patternW} height={patternH} xlinkHref={window.appConfig.ASSETS_URL + url} />}
+        {type && type == "pattern" ? (
+          <pattern
+            id={id}
+            patternUnits="userSpaceOnUse"
+            width={patternW}
+            height={patternH}
+          >
+            {url && (
+              <image
+                opacity={opacity}
+                width={patternW}
+                height={patternH}
+                xlinkHref={window.appConfig.ASSETS_URL + url}
+              />
+            )}
           </pattern>
         ) : (
           <LinearGradient id={id} colors={area} rotate={0} />
@@ -91,32 +112,32 @@ export default memo(
   }) => {
     if (!data.length) return null;
     const ticks = xScaler.domain();
-    
+
     const sortData = useMemo(() => {
       const usefulData = data.filter(
-        ({ data: { x } }) => ticks.indexOf(x) > -1
+        ({ data: { x } }) => ticks.indexOf(x) > -1,
       );
       return usefulData.sort(
         ({ data: { x: a } }, { data: { x: b } }) =>
-          ticks.indexOf(a) - ticks.indexOf(b)
+          ticks.indexOf(a) - ticks.indexOf(b),
       );
     }, [data, ticks]);
-    
+
     const _data = useMemo(
       () => getLineData(sortData, connectNulls),
-      [sortData, connectNulls]
+      [sortData, connectNulls],
     );
     const lineGen = useMemo(() => {
-      const isVertical = direction === 'vertical';
+      const isVertical = direction === "vertical";
 
       let lineGen = (
         isVertical
           ? d3Line()
-            .y(({ data: { x } }) => xScaler(x))
-            .x(({ data: { y } }) => yScaler(y))
+              .y(({ data: { x } }) => xScaler(x))
+              .x(({ data: { y } }) => yScaler(y))
           : d3Line()
-            .x(({ data: { x } }) => xScaler(x))
-            .y(({ data: { y } }) => yScaler(y))
+              .x(({ data: { x } }) => xScaler(x))
+              .y(({ data: { y } }) => yScaler(y))
       ).defined(defined);
       curve && lineGen.curve(curveCatmullRom.alpha(tension));
       curve && lineGen.curve(curveMonotoneX);
@@ -128,29 +149,31 @@ export default memo(
     const show = lineShadow && lineShadow.show;
     const shadow = lineShadow && lineShadow.shadow;
     return (
-      <g className='__easyv-line'>
+      <g className="__easyv-line">
         <path
           d={path}
           stroke={stroke}
           style={{
-            filter:show?`drop-shadow(${shadow.hShadow}px ${shadow.vShadow}px ${shadow.blur}px ${shadow.color})`:"none",
-            pointerEvents:"none"
+            filter: show
+              ? `drop-shadow(${shadow.hShadow}px ${shadow.vShadow}px ${shadow.blur}px ${shadow.color})`
+              : "none",
+            pointerEvents: "none",
           }}
-          fill='none'
-          strokeDasharray={lineType === 'dash' ? '3 3' : null}
+          fill="none"
+          strokeDasharray={lineType === "dash" ? "3 3" : null}
           strokeWidth={lineWidth}
         />
-        {type == 'area' && (
+        {type == "area" && (
           <Area
             data={_data}
             config={{ ...area, curve, tension }}
             xScaler={xScaler}
             yScaler={yScaler}
-            opacity={areaColor?areaColor.linear.opacity:1}
+            opacity={areaColor ? areaColor.linear.opacity : 1}
           />
         )}
         {showLighter && <Lighter path={path} config={lighter} />}
       </g>
     );
-  }
+  },
 );

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