@easyv/charts 1.10.8 → 1.10.10

package/src/utils/index.js

@@ -1,16 +1,16 @@
-import { getColor } from '@easyv/utils';
-import { toFixed } from '@easyv/utils/lib/common/utils';
+import { getColor } from "@easyv/utils";
+import { toFixed } from "@easyv/utils/lib/common/utils";
 import {
   scaleOrdinal as ordinal,
   range as sequence,
   ascending,
   descending,
   sum,
-} from 'd3v7';
-import { renderToStaticMarkup } from 'react-dom/server';
-import { toPath } from 'svg-points';
+} from "d3v7";
+import { renderToStaticMarkup } from "react-dom/server";
+import { toPath } from "svg-points";
 
-const defaultBackground = '#000000';
+const defaultBackground = "#000000";
 const defaultIcon = {
   background: defaultBackground,
 };
@@ -25,20 +25,20 @@ const renderCanvasBackground = ({
     linear: { angle, opacity, stops },
   },
   pattern: {
-    path = '',
-    width = '100%',
-    height = '100%',
-    boderColor: stroke = 'transparent',
+    path = "",
+    width = "100%",
+    height = "100%",
+    boderColor: stroke = "transparent",
     boderWidth = 0,
   },
 }) => {
   // 处理宽高（支持百分比/数字）
-  const canvasWidth = width === '100%' ? 200 : Number(width) || 200; // 百分比默认200，可根据实际场景调整
-  const canvasHeight = height === '100%' ? 200 : Number(height) || 200;
+  const canvasWidth = width === "100%" ? 200 : Number(width) || 200; // 百分比默认200，可根据实际场景调整
+  const canvasHeight = height === "100%" ? 200 : Number(height) || 200;
 
   // 创建离屏 Canvas
-  const canvas = document.createElement('canvas');
-  const ctx = canvas.getContext('2d');
+  const canvas = document.createElement("canvas");
+  const ctx = canvas.getContext("2d");
   canvas.width = canvasWidth;
   canvas.height = canvasHeight;
 
@@ -49,13 +49,13 @@ const renderCanvasBackground = ({
   const path2D = new Path2D(path);
 
   // 2. 处理填充（纯色/渐变）
-  if (type === 'pure') {
+  if (type === "pure") {
     ctx.fillStyle = pure;
   } else {
     // 线性渐变（对应原 SVG linearGradient）
     const centerX = canvasWidth / 2;
     const centerY = canvasHeight / 2;
-    const rad = (angle + 180) * Math.PI / 180; // 旋转角度转弧度
+    const rad = ((angle + 180) * Math.PI) / 180; // 旋转角度转弧度
     const gradientLength = Math.hypot(canvasWidth, canvasHeight); // 渐变长度取对角线
 
     // 计算渐变起点/终点（匹配 SVG rotate 效果）
@@ -84,7 +84,7 @@ const renderCanvasBackground = ({
   }
 
   // 5. 转换为 DataURL（替代 SVG DataURL）
-  return canvas.toDataURL('image/png');
+  return canvas.toDataURL("image/png");
 };
 const SvgBackground = ({
   fill: {
@@ -93,33 +93,33 @@ const SvgBackground = ({
     linear: { angle, opacity, stops },
   },
   pattern: {
-    path = '',
-    width = '100%',
-    height = '100%',
-    boderColor: stroke = 'transparent',
+    path = "",
+    width = "100%",
+    height = "100%",
+    boderColor: stroke = "transparent",
     boderWidth = 0,
   },
 }) => {
   return (
     <svg
-      preserveAspectRatio='none'
-      xmlns='http://www.w3.org/2000/svg'
+      preserveAspectRatio="none"
+      xmlns="http://www.w3.org/2000/svg"
       width={width}
       height={height}
     >
       <defs>
         <linearGradient
-          id='linearGradient'
-          x1='0%'
-          y1='0%'
-          x2='0%'
-          y2='100%'
-          gradientTransform={'rotate(' + (angle + 180) + ', 0.5, 0.5)'}
+          id="linearGradient"
+          x1="0%"
+          y1="0%"
+          x2="0%"
+          y2="100%"
+          gradientTransform={"rotate(" + (angle + 180) + ", 0.5, 0.5)"}
         >
           {stops.map(({ offset, color }, index) => (
             <stop
               key={index}
-              offset={offset + '%'}
+              offset={offset + "%"}
               stopColor={color}
               stopOpacity={opacity}
             />
@@ -128,7 +128,7 @@ const SvgBackground = ({
       </defs>
       <path
         d={path}
-        fill={type === 'pure' ? pure : 'url(#linearGradient)'}
+        fill={type === "pure" ? pure : "url(#linearGradient)"}
         stroke={stroke}
         strokeWidth={boderWidth}
       />
@@ -136,7 +136,7 @@ const SvgBackground = ({
   );
 };
 const getColorList = ({ type, pure, linear: { stops, angle, opacity } }) => {
-  if (type == 'pure') {
+  if (type == "pure") {
     return [
       { color: pure, offset: 1 },
       { color: pure, offset: 0 },
@@ -147,28 +147,31 @@ const getColorList = ({ type, pure, linear: { stops, angle, opacity } }) => {
 const getMultiColorStr = (colors) => {
   if (colors) {
     const { stops, angle } = colors;
-    let result = 'linear-gradient(' + angle + 'deg, ';
+    let result = "linear-gradient(" + angle + "deg, ";
     const stops_ = JSON.parse(JSON.stringify(stops));
     stops_.sort((a, b) => a.offset - b.offset);
     for (let i = 0; i < stops_.length; i++) {
       const { color, offset } = stops_[i];
       result += `${color} ${offset}%,`;
     }
-    return result.slice(0, -1) + ')';
+    return result.slice(0, -1) + ")";
   }
 };
 
 const getIcon = (type, icon, lineType = "solid") => {
   switch (type) {
-    case 'area':
-    case 'line':
+    case "area":
+    case "line":
       let color = icon.background;
       return icon
         ? {
             ...defaultLineIcon,
             ...icon,
             minWidth: icon.width,
-            background: lineType == "solid" ? color : `linear-gradient(90deg, ${color}, ${color} 66%, transparent 66%) 0 0/33% 100% repeat`
+            background:
+              lineType == "solid"
+                ? color
+                : `linear-gradient(90deg, ${color}, ${color} 66%, transparent 66%) 0 0/33% 100% repeat`,
           }
         : defaultLineIcon;
     default:
@@ -185,43 +188,43 @@ const getIcon = (type, icon, lineType = "solid") => {
 const dateFormat = (date, fmt) => {
   date = new Date(date);
   const o = {
-    'M+': date.getMonth() + 1, //月份
-    'D+': date.getDate(), //日
-    'H+': date.getHours(), //小时
-    'h+': date.getHours() % 12 == 0 ? 12 : date.getHours() % 12, //小时
-    'm+': date.getMinutes(), //分
-    's+': date.getSeconds(), //秒
+    "M+": date.getMonth() + 1, //月份
+    "D+": date.getDate(), //日
+    "H+": date.getHours(), //小时
+    "h+": date.getHours() % 12 == 0 ? 12 : date.getHours() % 12, //小时
+    "m+": date.getMinutes(), //分
+    "s+": date.getSeconds(), //秒
     S: date.getMilliseconds(), //毫秒
-    X: '星期' + '日一二三四五六'.charAt(date.getDay()),
+    X: "星期" + "日一二三四五六".charAt(date.getDay()),
     W: new Array(
-      'Sunday',
-      'Monday',
-      'Tuesday',
-      'Wednesday',
-      'Thursday',
-      'Friday',
-      'Saturday'
+      "Sunday",
+      "Monday",
+      "Tuesday",
+      "Wednesday",
+      "Thursday",
+      "Friday",
+      "Saturday",
     )[date.getDay()],
-    w: new Array('Sun.', 'Mon.', ' Tues.', 'Wed.', ' Thur.', 'Fri.', 'Sat.')[
+    w: new Array("Sun.", "Mon.", " Tues.", "Wed.", " Thur.", "Fri.", "Sat.")[
       date.getDay()
     ],
   };
   if (/(Y+)/.test(fmt))
     fmt = fmt.replace(
       RegExp.$1,
-      (date.getFullYear() + '').substr(4 - RegExp.$1.length)
+      (date.getFullYear() + "").substr(4 - RegExp.$1.length),
     );
   for (var k in o)
-    if (new RegExp('(' + k + ')').test(fmt))
+    if (new RegExp("(" + k + ")").test(fmt))
       fmt = fmt.replace(
         RegExp.$1,
-        RegExp.$1.length == 1 ? o[k] : ('00' + o[k]).substr(('' + o[k]).length)
+        RegExp.$1.length == 1 ? o[k] : ("00" + o[k]).substr(("" + o[k]).length),
       );
   return fmt;
 };
 
 const getBreakWord = (str, breakNumber) => {
-  const re = new RegExp('([^]){1,' + breakNumber + '}', 'g');
+  const re = new RegExp("([^]){1," + breakNumber + "}", "g");
   return str.match(re);
 };
 
@@ -232,14 +235,16 @@ const getTicksOfAxis = (domain, ticksCount, showLast) => {
   let step = Math.floor((len - ticksCount) / (ticksCount - 1));
   let ticksArr = [];
   if (showLast) {
-    let count = ticksCount, gap = 0;
+    let count = ticksCount,
+      gap = 0;
     step = (len - 1) / (count - 1);
     const maxGap = Math.max(count - 2, len - count);
     //循环计算出最接近count值且能让step为整数的值
     if (!Number.isInteger(step)) {
       while (gap <= maxGap) {
         gap++;
-        const left = (len - 1) / (count - gap - 1), right = (len - 1) / (count + gap - 1);
+        const left = (len - 1) / (count - gap - 1),
+          right = (len - 1) / (count + gap - 1);
         if (Number.isInteger(left)) {
           step = left;
           break;
@@ -271,17 +276,17 @@ const getTickCoord = ({
 }) => {
   let x1, x2, y1, y2;
   switch (orientation) {
-    case 'top':
+    case "top":
       x1 = x2 = coordinate;
       y2 = y;
       y1 = y2 - tickSize;
       break;
-    case 'left':
+    case "left":
       y1 = y2 = coordinate;
       x2 = x;
       x1 = x2 - tickSize;
       break;
-    case 'right':
+    case "right":
       y1 = y2 = coordinate;
       x2 = x;
       x1 = x2 + tickSize;
@@ -297,22 +302,22 @@ const getTickCoord = ({
 const getGridCoord = ({ orientation, coordinate, end }) => {
   let x1, x2, y1, y2;
   switch (orientation) {
-    case 'top':
+    case "top":
       x1 = x2 = coordinate;
       y1 = 0;
       y2 = end;
       break;
-    case 'bottom':
+    case "bottom":
       x1 = x2 = coordinate;
       y1 = 0;
       y2 = end * -1;
       break;
-    case 'left':
+    case "left":
       y1 = y2 = coordinate;
       x1 = 0;
       x2 = end;
       break;
-    case 'right':
+    case "right":
       y1 = y2 = coordinate;
       x1 = 0;
       x2 = end * -1;
@@ -336,17 +341,17 @@ const getMousePos = (evt, dom) => {
 
 const getFontStyle = (
   { color, bold, italic, fontSize, fontFamily, letterSpacing, lineHeight },
-  type
+  type,
 ) => {
-  if (type == 'svg') {
+  if (type == "svg") {
     return {
       fontSize,
       fontFamily,
       letterSpacing,
       fill: color,
-      fontWeight: bold ? 'bold' : 'normal',
-      fontStyle: italic ? 'italic' : 'normal',
-      lineHeight: lineHeight + "px"
+      fontWeight: bold ? "bold" : "normal",
+      fontStyle: italic ? "italic" : "normal",
+      lineHeight: lineHeight + "px",
     };
   }
   return {
@@ -354,43 +359,45 @@ const getFontStyle = (
     fontFamily,
     letterSpacing,
     color,
-    fontWeight: bold ? 'bold' : 'normal',
-    fontStyle: italic ? 'italic' : 'normal',
-    lineHeight: lineHeight + "px"//不加px默认是倍数关系
+    fontWeight: bold ? "bold" : "normal",
+    fontStyle: italic ? "italic" : "normal",
+    lineHeight: lineHeight + "px", //不加px默认是倍数关系
   };
 };
 
 const formatFont = ({ color, fill, bold, italic, ...rest }, type) => {
-  if (type == 'svg') {
+  if (type == "svg") {
     return {
       fill: fill || color,
-      fontWeight: typeof bold == "string" ? bold : (bold ? 'bold' : 'normal'),
-      fontStyle: typeof italic == "string" ? italic : (italic ? 'italic' : 'normal'),
-      ...rest
+      fontWeight: typeof bold == "string" ? bold : bold ? "bold" : "normal",
+      fontStyle:
+        typeof italic == "string" ? italic : italic ? "italic" : "normal",
+      ...rest,
     };
   }
   return {
     color: color || fill,
-    fontWeight: typeof bold == "string" ? bold : (bold ? 'bold' : 'normal'),
-    fontStyle: typeof italic == "string" ? italic : (italic ? 'italic' : 'normal'),
-    ...rest
+    fontWeight: typeof bold == "string" ? bold : bold ? "bold" : "normal",
+    fontStyle:
+      typeof italic == "string" ? italic : italic ? "italic" : "normal",
+    ...rest,
   };
 };
 
 const getMargin = ({ marginTop, marginRight, marginBottom, marginLeft }) =>
   marginTop +
-  'px ' +
+  "px " +
   marginRight +
-  'px ' +
+  "px " +
   marginBottom +
-  'px ' +
+  "px " +
   marginLeft +
-  'px';
+  "px";
 
 const getTranslate3d = ({ x = 0, y = 0, z = 0 }) =>
-  'translate3d(' + x + 'px, ' + y + 'px, ' + z + 'px)';
+  "translate3d(" + x + "px, " + y + "px, " + z + "px)";
 
-const getTranslate2d = ({ x = 0, y = 0 }) => 'translate(' + x + ', ' + y + ')';
+const getTranslate2d = ({ x = 0, y = 0 }) => "translate(" + x + ", " + y + ")";
 
 function band() {
   var scale = ordinal().unknown(undefined),
@@ -416,7 +423,8 @@ function band() {
     if (round) step = Math.floor(step);
     start += (stop - start - step * n) * align;
     bandwidth = step;
-    if (round) (start = Math.round(start)), (bandwidth = Math.round(bandwidth));
+    if (round)
+      ((start = Math.round(start)), (bandwidth = Math.round(bandwidth)));
     var values = sequence(n).map(function (i) {
       return start + step * i + step / 2;
     });
@@ -434,7 +442,7 @@ function band() {
   };
 
   scale.rangeRound = function (_) {
-    return ([r0, r1] = _), (r0 = +r0), (r1 = +r1), (round = true), rescale();
+    return (([r0, r1] = _), (r0 = +r0), (r1 = +r1), (round = true), rescale());
   };
 
   scale.bandwidth = function () {
@@ -509,7 +517,7 @@ const getStacks = (series) => {
   series.forEach(({ type, stack, yOrZ }, name) => {
     const current = tmp.find(
       ({ type: _type, stack: _stack, yOrZ: _yOrZ }) =>
-        _type == type && stack && _stack == stack && yOrZ == _yOrZ
+        _type == type && stack && _stack == stack && yOrZ == _yOrZ,
     );
     if (!current) {
       const common = {
@@ -520,8 +528,8 @@ const getStacks = (series) => {
         yOrZ,
         s: [name],
       };
-      if (type === 'band') {
-        const index = tmp.filter((item) => item.type === 'band').length;
+      if (type === "band") {
+        const index = tmp.filter((item) => item.type === "band").length;
         tmp.push({
           ...common,
           index,
@@ -561,7 +569,7 @@ const seriesYOrZ = (series) => {
   const y = new Map();
   const z = new Map();
   series.forEach((value, key) => {
-    if (value.yOrZ === 'y') {
+    if (value.yOrZ === "y") {
       y.set(key, value);
     } else {
       z.set(key, value);
@@ -583,11 +591,11 @@ const getCurrentStack = (stack, stackMap) =>
       _type == stack.type &&
       _stack == stack.stack &&
       _yOrZ == stack.yOrZ &&
-      _s.includes(stack.name)
+      _s.includes(stack.name),
   );
 
 const reverseGradientStops = (gradient) => {
-  if (gradient.type !== 'linear' || !gradient.linear?.stops) {
+  if (gradient.type !== "linear" || !gradient.linear?.stops) {
     return gradient;
   }
   const stops = gradient.linear.stops;
@@ -596,9 +604,9 @@ const reverseGradientStops = (gradient) => {
 
   // 反转每个 stop 的 offset: newOffset = 100 - oldOffset
   // 颜色保持不变，只是位置镜像翻转
-  const reversedStops = sortedStops.map(stop => ({
+  const reversedStops = sortedStops.map((stop) => ({
     ...stop,
-    offset: 100 - stop.offset
+    offset: 100 - stop.offset,
   }));
   //再按新的 offset 升序排序，确保输出结构正确
   const finalStops = reversedStops.sort((a, b) => a.offset - b.offset);
@@ -607,25 +615,21 @@ const reverseGradientStops = (gradient) => {
     ...gradient,
     linear: {
       ...gradient.linear,
-      stops: finalStops
-    }
+      stops: finalStops,
+    },
   };
 };
 const getBandBackground = (pattern, fill, y) => {
   if (!(pattern && pattern.path)) {
-    return getColor(y < 0 ? reverseGradientStops(fill) : fill);//小于0颜色翻转
+    return getColor(y < 0 ? reverseGradientStops(fill) : fill); //小于0颜色翻转
   }
   try {
-    const { backgroundSize = '100% 100%', ..._pattern } = pattern;
+    const { backgroundSize = "100% 100%", ..._pattern } = pattern;
     // 替换原 SVG DataURL 为 Canvas DataURL
     const canvasDataUrl = renderCanvasBackground({ fill, pattern: _pattern });
-    return (
-      'center top / ' +
-      backgroundSize +
-      ' url("' + canvasDataUrl + '")'
-    );
+    return "center top / " + backgroundSize + ' url("' + canvasDataUrl + '")';
   } catch (e) {
-    console.error('Canvas 绘制背景失败:', e);
+    console.error("Canvas 绘制背景失败:", e);
   }
   return "";
 };
@@ -673,14 +677,14 @@ const isValidHttpUrl = (string) => {
     return false;
   }
 
-  return url.protocol === 'http:' || url.protocol === 'https:';
+  return url.protocol === "http:" || url.protocol === "https:";
 };
 
 const getChildren = (svgStr) => {
-  const wrapper = document.createElement('div');
+  const wrapper = document.createElement("div");
   wrapper.innerHTML = svgStr;
   const { childNodes } = wrapper;
-  const svgDom = [...childNodes].find((item) => item.tagName === 'svg');
+  const svgDom = [...childNodes].find((item) => item.tagName === "svg");
 
   if (!!svgDom) {
     return [...svgDom.childNodes];
@@ -694,7 +698,7 @@ const filterChildren = (children, tagNames) => {
     let { nodeName } = node;
 
     if (tagNames.indexOf(nodeName) > -1) {
-      if (nodeName === 'g') {
+      if (nodeName === "g") {
         return filterChildren([...node.childNodes], tagNames);
       } else {
         prev.push(node);
@@ -707,76 +711,88 @@ const filterChildren = (children, tagNames) => {
 
 const getDomPath = (node) => {
   switch (node.nodeName) {
-    case 'circle':
+    case "circle":
       return toPath({
-        type: 'circle',
-        cx: +node.getAttribute('cx') || 0,
-        cy: +node.getAttribute('cy') || 0,
-        r: +node.getAttribute('r') || 0,
+        type: "circle",
+        cx: +node.getAttribute("cx") || 0,
+        cy: +node.getAttribute("cy") || 0,
+        r: +node.getAttribute("r") || 0,
       });
 
-    case 'ellipse':
+    case "ellipse":
       return toPath({
-        type: 'ellipse',
-        cx: +node.getAttribute('cx') || 0,
-        cy: +node.getAttribute('cy') || 0,
-        rx: +node.getAttribute('rx') || 0,
-        ry: +node.getAttribute('ry') || 0,
+        type: "ellipse",
+        cx: +node.getAttribute("cx") || 0,
+        cy: +node.getAttribute("cy") || 0,
+        rx: +node.getAttribute("rx") || 0,
+        ry: +node.getAttribute("ry") || 0,
       });
 
-    case 'line':
+    case "line":
       return toPath({
-        type: 'line',
-        x1: +node.getAttribute('x1') || 0,
-        x2: +node.getAttribute('x2') || 0,
-        y1: +node.getAttribute('y1') || 0,
-        y2: +node.getAttribute('y2') || 0,
+        type: "line",
+        x1: +node.getAttribute("x1") || 0,
+        x2: +node.getAttribute("x2") || 0,
+        y1: +node.getAttribute("y1") || 0,
+        y2: +node.getAttribute("y2") || 0,
       });
 
-    case 'path':
+    case "path":
       return toPath({
-        type: 'path',
-        d: node.getAttribute('d') || '',
+        type: "path",
+        d: node.getAttribute("d") || "",
       });
 
-    case 'polygon':
+    case "polygon":
       return toPath({
-        type: 'polyline',
-        points: node.getAttribute('points') || '',
+        type: "polyline",
+        points: node.getAttribute("points") || "",
       });
 
-    case 'polyline':
+    case "polyline":
       return toPath({
-        type: 'polyline',
-        points: node.getAttribute('points') || '',
+        type: "polyline",
+        points: node.getAttribute("points") || "",
       });
 
-    case 'rect':
+    case "rect":
       return toPath({
-        type: 'rect',
-        height: +node.getAttribute('height') || 0,
-        width: +node.getAttribute('width') || 0,
-        x: +node.getAttribute('x') || 0,
-        y: +node.getAttribute('y') || 0,
-        rx: +node.getAttribute('rx') || 0,
-        ry: +node.getAttribute('ry') || 0,
+        type: "rect",
+        height: +node.getAttribute("height") || 0,
+        width: +node.getAttribute("width") || 0,
+        x: +node.getAttribute("x") || 0,
+        y: +node.getAttribute("y") || 0,
+        rx: +node.getAttribute("rx") || 0,
+        ry: +node.getAttribute("ry") || 0,
       });
   }
 };
 
-const sortPie = (data, order) => {
+const sortPie = (data, order, acc) => {
   const _data = data.map((item) => ({ ...item }));
   switch (order) {
-    case '':
+    case "":
       _data.sort(({ index: a }, { index: b }) => ascending(a, b));
       break;
-    case 'desc':
+    case "desc":
       _data.sort(({ value: a }, { value: b }) => descending(a, b));
       break;
-    case 'asc':
+    case "asc":
       _data.sort(({ value: a }, { value: b }) => ascending(a, b));
       break;
   }
+  if (acc && acc.columns) {
+    _data.forEach((item) => {
+      item.fields = {};
+      Object.values(acc.columns).forEach((columnConfig) => {
+        const fieldName = columnConfig.field;
+        if (fieldName) {
+          item.fields[fieldName] = columnConfig;
+        }
+      });
+    });
+  }
+
   return _data;
 };
 
@@ -794,7 +810,7 @@ const getDataWithPercent = (data = [], precision = 0) => {
     }
     const digits = Math.pow(10, precision);
     const votesPerQuota = valueList.map(function (val) {
-      return val.value / sum * digits * 100;
+      return (val.value / sum) * digits * 100;
     });
     const targetSeats = digits * 100;
     const seats = votesPerQuota.map(function (votes) {
@@ -824,13 +840,13 @@ const getDataWithPercent = (data = [], precision = 0) => {
   data.forEach((d, i) => {
     objData.push({
       ...d,
-      percent: getPercentWithPrecision(data, i, precision)
-    })
+      percent: getPercentWithPrecision(data, i, precision),
+    });
   });
-  return objData
+  return objData;
 };
 
-const excludeTypes = ['array', 'object', 'group', 'modal', 'colors'];
+const excludeTypes = ["array", "object", "group", "modal", "colors"];
 const reduceConfig = (config = []) => {
   if (!Array.isArray(config)) {
     return config;
@@ -888,5 +904,5 @@ export {
   getSeriesInfo,
   mathR,
   renderCanvasBackground, // 导出 Canvas 绘制方法
-  SvgBackground
-};
+  SvgBackground,
+};