@easyv/charts 1.7.35 → 1.7.37

package/src/formatter/legend.js

@@ -1,115 +1,122 @@
-import css from '../css/index.module.css';
-import { getFontStyle } from '../utils';
-import { TextOverflow, SplitText } from '../components';
-
-export const pieLegendFormatter = (
-  { displayName, data, percent, series: { color: seriesColor, icon="" } },
-  {
-    name: { show: showName, font: nameFont, textOverflow, speed, maxWidth, translate: { x:nameX, y:nameY } },
-    value: {
-      show: showValue,
-      font: valueFont,
-      sameColor: valueSameColor,
-      gap: valueGap,
-      align: valueAlign,
-      translate: {
-        x:valueX,
-        y:valueY
-      },
-      splitConfig,
-      suffix: {
-        show: showSuffix,
-        text,
-        fontSize,
-        translate: { x, y },
-      },
-    },
-    percent: {
-      show: showPercent,
-      font: percentFont,
-      sameColor: percentSameColor,
-      gap: percentGap,
-      align: percentAlign,
-      translate: {
-        x:percentX,
-        y:percentY
-      }
-    },
-  }
-) => {
-  const {
-    type: seriesColorType,
-    pure,
-    linear: { stops },
-  } = seriesColor;
-
-  const _color = seriesColorType == 'pure' ? pure : stops[0].color;
-  const textMarginLeft = 5;
-
-  return (
-    <>
-      {icon &&<span style={{ ...icon, marginRight: icon.marginRight, transform:`translate(${nameX}px, ${nameY}px)` }} />}
-      <div
-        className={
-          showName && showValue && showPercent
-            ? css.showAllStyle
-            : css.notShowAllStyle
-        }
-        style={{
-          width:`calc( 100% + ${textMarginLeft+valueGap+percentGap}px )`
-        }}
-      >
-        {showName && (
-          <TextOverflow value={displayName} type={textOverflow} speed={speed} style={{
-            width:maxWidth, marginLeft: textMarginLeft, ...getFontStyle(nameFont), transform:`translate(${nameX}px, ${nameY}px)`
-          }}></TextOverflow>
-        )}
-        {showValue && (
-          <span
-            style={{
-              whiteSpace:"nowrap",
-              ...getFontStyle(valueFont),
-              marginLeft: valueGap,
-              transform:`translate(${valueX}px,${valueY}px)`,
-              display: 'flex',
-              flex:1,
-              color: valueSameColor ? _color : valueFont.color,
-              alignItems: 'center',
-              justifyContent: valueAlign=="left"?"flex-start":valueAlign=="right"?"flex-end":'center',
-            }}
-          >
-            <span><SplitText value={data.y} config={splitConfig} /></span>
-            {showSuffix && (
-              <span
-                style={{
-                  whiteSpace:"nowrap",
-                  fontSize,
-                  transform: 'translate3d(' + x + 'px, ' + y + 'px, 0px)',
-                }}
-              >
-                {text}
-              </span>
-            )}
-          </span>
-        )}
-        {showPercent && (
-          <span
-            style={{
-              whiteSpace:"nowrap",
-              ...getFontStyle(percentFont),
-              marginLeft: percentGap,
-              transform:`translate(${percentX}px,${percentY}px)`,
-              display:"flex",
-              flex:1,
-              alignItems: 'center',
-              justifyContent: percentAlign=="left"?"flex-start":percentAlign=="right"?"flex-end":'center',
-              color: percentSameColor ? _color : percentFont.color,
-            }}
-          >
-            {percent + '%'}
-          </span>
-        )}
-      </div>
-    </>
-  );
-};
+import css from '../css/index.module.css';
+import { getFontStyle } from '../utils';
+import { TextOverflow, SplitText } from '../components';
+
+export const pieLegendFormatter = (
+  series,
+  props
+) => {
+  const { displayName, data, percent, series: { color: seriesColor, icon="" } } = series,
+  {
+    name: { show: showName, font: nameFont, textOverflow, speed, maxWidth, translate: { x:nameX, y:nameY } },
+    value: {
+      show: showValue,
+      font: valueFont,
+      sameColor: valueSameColor,
+      gap: valueGap,
+      align: valueAlign,
+      translate: {
+        x:valueX,
+        y:valueY
+      },
+      splitConfig,
+      suffix: {
+        show: showSuffix,
+        text,
+        fontSize,
+        translate: { x, y },
+      },
+    },
+    percent: {
+      show: showPercent,
+      font: percentFont,
+      sameColor: percentSameColor,
+      gap: percentGap,
+      align: percentAlign,
+      translate: {
+        x:percentX,
+        y:percentY
+      }
+    },
+  } = props;
+  const {
+    type: seriesColorType,
+    pure,
+    linear: { stops },
+  } = seriesColor;
+
+  const _color = seriesColorType == 'pure' ? pure : stops[0].color;
+  const textMarginLeft = 5;
+
+  // 1. 计算每列宽度（加上间距）
+  const columns = [];
+  if (showName) columns.push(`${props.nameMaxWidth}px`);
+  if (showValue) columns.push(`${props.valueMaxWidth + valueGap}px`);
+  if (showPercent) columns.push(`${props.percentMaxWidth + percentGap}px`);
+
+  return (
+    <>
+      {icon &&<span style={{ ...icon, marginRight: icon.marginRight, 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(' ')
+        }}
+      >
+        {showName && (
+          <TextOverflow value={displayName} type={textOverflow} speed={speed} style={{
+            width:maxWidth, marginLeft: textMarginLeft, ...getFontStyle(nameFont), transform:`translate(${nameX}px, ${nameY}px)`
+          }}></TextOverflow>
+        )}
+        {showValue && (
+          <span
+            style={{
+              whiteSpace:"nowrap",
+              ...getFontStyle(valueFont),
+              marginLeft: valueGap,
+              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",
+            }}
+          >
+            <span><SplitText value={data.y} config={splitConfig} /></span>
+            {showSuffix && (
+              <span
+                style={{
+                  whiteSpace:"nowrap",
+                  fontSize,
+                  transform: 'translate3d(' + x + 'px, ' + y + 'px, 0px)',
+                }}
+              >
+                {text}
+              </span>
+            )}
+          </span>
+        )}
+        {showPercent && (
+          <span
+            style={{
+              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",
+            }}
+          >
+            {percent + '%'}
+          </span>
+        )}
+      </div>
+    </>
+  );
+};

package/src/hooks/index.js

@@ -1,20 +1,20 @@
-import useFilterData from './useFilterData';
-import useStackData from './useStackData';
-import useAxes from './useAxes';
-import useTooltip from './useTooltip';
-import useAnimateData from './useAnimateData';
-import useCarouselAxisX from './useCarouselAxisX';
-import useExtentData from './useExtentData';
-import { useAiData, useAiDataOfPie } from './useAiData';
-
-export {
-  useFilterData,
-  useStackData,
-  useAxes,
-  useTooltip,
-  useAnimateData,
-  useCarouselAxisX,
-  useExtentData,
-  useAiData,
-  useAiDataOfPie
-};
+import useFilterData from './useFilterData';
+import useStackData from './useStackData';
+import useAxes from './useAxes';
+import useTooltip from './useTooltip';
+import useAnimateData from './useAnimateData';
+import useCarouselAxisX from './useCarouselAxisX';
+import useExtentData from './useExtentData';
+import { useAiData, useAiDataOfPie } from './useAiData';
+
+export {
+  useFilterData,
+  useStackData,
+  useAxes,
+  useTooltip,
+  useAnimateData,
+  useCarouselAxisX,
+  useExtentData,
+  useAiData,
+  useAiDataOfPie
+};

package/src/hooks/useAnimateData.ts

@@ -1,68 +1,68 @@
-import { useEffect, useState } from 'react';
-import { animate, easeIn, easeOut, linear } from 'popmotion';
-
-/**
- * 图表数据动画
- * @param {Array} data data列表
- * @param {boolean} dataAnimation 是否开启数据增长动画
- * @param {boolean} active 是否处于活跃状态，false为休眠
- * @returns 改变后的数据
- */
-
-export default (data: DataType[], dataAnimation: DataAnimation, active:boolean) => {
-  const [animateData, setAnimateData] = useState<DataType[]>([]);
-  useEffect(() => {
-    let animateRef: any = null;
-    if (
-      dataAnimation &&
-      dataAnimation.show &&
-      dataAnimation.duration &&
-      data.length &&
-      active
-    ) {
-      animateRef = animate({
-        autoplay: true,
-        repeat: 0,
-        from: 0,
-        to: 1,
-        duration: dataAnimation.duration * 1000,
-        ease: linear,
-        onUpdate: (v: number) => {
-          setAnimateData((oldData: DataType[]) => {
-            const oldLength = oldData.length;
-            const newLength = data.length;
-            if (oldLength >= newLength) {
-              return oldData.map(({ y }: DataType, i: number) => {
-                const current: DataType = data[i] || { y: 0 };
-                const delta: number = current.y - y;
-                return {
-                  ...current,
-                  y: y + delta * v,
-                };
-              });
-            } else {
-              return data.map((current: DataType, i: number) => {
-                const oldCurrent: DataType = oldData[i] || { y: 0 };
-                const delta = oldCurrent.y - current.y;
-                return {
-                  ...current,
-                  y:oldCurrent.y + delta * v,
-                };
-              });
-            }
-          });
-        },
-        onComplete: () => {
-          setAnimateData(data);
-        },
-      });
-    } else {
-      setAnimateData(data);
-    }
-    return () => {
-      animateRef && animateRef.stop();
-    };
-  }, [data, dataAnimation, active]);
-
-  return animateData;
-};
+import { useEffect, useState } from 'react';
+import { animate, easeIn, easeOut, linear } from 'popmotion';
+
+/**
+ * 图表数据动画
+ * @param {Array} data data列表
+ * @param {boolean} dataAnimation 是否开启数据增长动画
+ * @param {boolean} active 是否处于活跃状态，false为休眠
+ * @returns 改变后的数据
+ */
+
+export default (data: DataType[], dataAnimation: DataAnimation, active:boolean) => {
+  const [animateData, setAnimateData] = useState<DataType[]>([]);
+  useEffect(() => {
+    let animateRef: any = null;
+    if (
+      dataAnimation &&
+      dataAnimation.show &&
+      dataAnimation.duration &&
+      data.length &&
+      active
+    ) {
+      animateRef = animate({
+        autoplay: true,
+        repeat: 0,
+        from: 0,
+        to: 1,
+        duration: dataAnimation.duration * 1000,
+        ease: linear,
+        onUpdate: (v: number) => {
+          setAnimateData((oldData: DataType[]) => {
+            const oldLength = oldData.length;
+            const newLength = data.length;
+            if (oldLength >= newLength) {
+              return oldData.map(({ y }: DataType, i: number) => {
+                const current: DataType = data[i] || { y: 0 };
+                const delta: number = current.y - y;
+                return {
+                  ...current,
+                  y: y + delta * v,
+                };
+              });
+            } else {
+              return data.map((current: DataType, i: number) => {
+                const oldCurrent: DataType = oldData[i] || { y: 0 };
+                const delta = oldCurrent.y - current.y;
+                return {
+                  ...current,
+                  y:oldCurrent.y + delta * v,
+                };
+              });
+            }
+          });
+        },
+        onComplete: () => {
+          setAnimateData(data);
+        },
+      });
+    } else {
+      setAnimateData(data);
+    }
+    return () => {
+      animateRef && animateRef.stop();
+    };
+  }, [data, dataAnimation, active]);
+
+  return animateData;
+};

package/src/hooks/useFilterData.js

@@ -1,77 +1,77 @@
-import { useState, useCallback, useEffect, useMemo } from 'react';
-
-const getInitialSelected = (series) => {
-  const status = new Map();
-  for (let [name] of series.entries()) {
-    status.set(name, true);
-  }
-  return status;
-};
-
-const getSelected = (selected, name) => {
-  const tmp = new Map();
-  selected.forEach((value, key) => {
-    if (name == key) {
-      tmp.set(key, !value);
-    } else {
-      tmp.set(key, value);
-    }
-  });
-  return tmp;
-};
-
-/**
- * 图例点击状态管理
- * @param {Array} data 数据
- * @param {Map} series 系列
- * @returns {Array} 返回筛选后的数据和是否选中状态，及控制选中函数
- */
-
-export default ({ data, series }) => {
-  const [selected, setSelected] = useState(getInitialSelected(series));
-  
-  const _series = useMemo(() => {
-    const tmp = new Map();
-    series.forEach((currentSeries, key) => {
-      const value = selected.get(key);
-      tmp.set(key, {
-        ...currentSeries,
-        selected: value,
-      });
-    });
-    return tmp;
-  }, [selected, series]);
-  const _data = useMemo(() => {
-    return data.filter(({ s="" }) => {
-      return s && _series.get(s) && _series.get(s).selected;
-    });
-  }, [data, _series]);
-
-  const onClick = useCallback((name) => {
-    setSelected((selected) => getSelected(selected, name));
-  }, []);
-
-  useEffect(() => {
-    const map = getInitialSelected(series);
-    for(let [ key ] of map.entries()){
-      if(selected.has(key)){
-        map.set(key, selected.get(key));
-      }
-    }
-    setSelected(map);
-  }, [series]);
-
-  return [
-    {
-      series: _series,
-      data: _data.map(d=>{
-        return {
-          ...d,
-          y:parseFloat(d.y),
-          showY:d.y
-        }
-      }),
-    },
-    onClick,
-  ];
-};
+import { useState, useCallback, useEffect, useMemo } from 'react';
+
+const getInitialSelected = (series) => {
+  const status = new Map();
+  for (let [name] of series.entries()) {
+    status.set(name, true);
+  }
+  return status;
+};
+
+const getSelected = (selected, name) => {
+  const tmp = new Map();
+  selected.forEach((value, key) => {
+    if (name == key) {
+      tmp.set(key, !value);
+    } else {
+      tmp.set(key, value);
+    }
+  });
+  return tmp;
+};
+
+/**
+ * 图例点击状态管理
+ * @param {Array} data 数据
+ * @param {Map} series 系列
+ * @returns {Array} 返回筛选后的数据和是否选中状态，及控制选中函数
+ */
+
+export default ({ data, series }) => {
+  const [selected, setSelected] = useState(getInitialSelected(series));
+  
+  const _series = useMemo(() => {
+    const tmp = new Map();
+    series.forEach((currentSeries, key) => {
+      const value = selected.get(key);
+      tmp.set(key, {
+        ...currentSeries,
+        selected: value,
+      });
+    });
+    return tmp;
+  }, [selected, series]);
+  const _data = useMemo(() => {
+    return data.filter(({ s="" }) => {
+      return s && _series.get(s) && _series.get(s).selected;
+    });
+  }, [data, _series]);
+
+  const onClick = useCallback((name) => {
+    setSelected((selected) => getSelected(selected, name));
+  }, []);
+
+  useEffect(() => {
+    const map = getInitialSelected(series);
+    for(let [ key ] of map.entries()){
+      if(selected.has(key)){
+        map.set(key, selected.get(key));
+      }
+    }
+    setSelected(map);
+  }, [series]);
+
+  return [
+    {
+      series: _series,
+      data: _data.map(d=>{
+        return {
+          ...d,
+          y:parseFloat(d.y),
+          showY:d.y
+        }
+      }),
+    },
+    onClick,
+  ];
+};