@easyv/charts 1.3.27 → 1.3.29

package/src/hooks/useAnimateData.ts

@@ -1,67 +1,67 @@
-import { useEffect, useState } from 'react';
-import { animate, easeIn, easeOut, linear } from 'popmotion';
-
-/**
- * 图表数据动画
- * @param {Array} data data列表
- * @param {boolean} dataAnimation 是否开启数据增长动画
- * @returns 改变后的数据
- */
-
-export default (data: DataType[], dataAnimation: DataAnimation) => {
-  const [animateData, setAnimateData] = useState<DataType[]>([]);
-
-  useEffect(() => {
-    let animateRef: any = null;
-    if (
-      dataAnimation &&
-      dataAnimation.show &&
-      dataAnimation.duration &&
-      data.length
-    ) {
-      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]);
-
-  return animateData;
-};
+import { useEffect, useState } from 'react';
+import { animate, easeIn, easeOut, linear } from 'popmotion';
+
+/**
+ * 图表数据动画
+ * @param {Array} data data列表
+ * @param {boolean} dataAnimation 是否开启数据增长动画
+ * @returns 改变后的数据
+ */
+
+export default (data: DataType[], dataAnimation: DataAnimation) => {
+  const [animateData, setAnimateData] = useState<DataType[]>([]);
+
+  useEffect(() => {
+    let animateRef: any = null;
+    if (
+      dataAnimation &&
+      dataAnimation.show &&
+      dataAnimation.duration &&
+      data.length
+    ) {
+      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]);
+
+  return animateData;
+};

package/src/hooks/useCarouselAxisX.js

@@ -3,7 +3,7 @@ import { animate, linear } from 'popmotion';
 
 const initialState = {
   currentIndex: null,
-  flag: false,
+  flag: false,    //表示是否为首次加载，true表示首次加载，不需要立刻执行动画，false表示可以执行轮播动画
 };
 
 /**
@@ -13,8 +13,8 @@ const initialState = {
  * @returns {Map} 返回经过改变后的x轴，主要是ticks和scaler的range发生了改变
  */
 
-export default (axis, config) => {
-  const { show, interval, duration } = config;
+export default (axis, config, isHover) => {
+  const { show, interval, duration, hover } = config;
   const time = duration + interval;
 
   const {
@@ -37,12 +37,18 @@ export default (axis, config) => {
   const [status, setStatus] = useState(initialState);
 
   useEffect(() => {
-    let handler;
     if (show && time && tickLength > tickCount) {
       setStatus({
         currentIndex: 0,
         flag: true,
       });
+    } else {
+      setStatus(initialState);
+    }
+  }, [show, time, tickCount, tickLength]);
+  useEffect(()=>{
+    let handler;
+    if(!(hover && isHover) && show && time && tickLength > tickCount){
       handler = setInterval(() => {
         setStatus(({ currentIndex }) => {
           const tmp = +currentIndex + 1;
@@ -52,13 +58,11 @@ export default (axis, config) => {
           };
         });
       }, time * 1000);
-    } else {
-      setStatus(initialState);
     }
     return () => {
       handler && clearInterval(handler);
     };
-  }, [show, time, tickCount, tickLength]);
+  },[show, time, tickCount, tickLength, hover, isHover])
 
   useEffect(() => {
     let animation;

package/src/hooks/useFilterData.js

@@ -1,72 +1,72 @@
-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(() => {
-    setSelected(getInitialSelected(series));
-  }, [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(() => {
+    setSelected(getInitialSelected(series));
+  }, [series]);
+
+  return [
+    {
+      series: _series,
+      data: _data.map(d=>{
+        return {
+          ...d,
+          y:parseFloat(d.y),
+          showY:d.y
+        }
+      }),
+    },
+    onClick,
+  ];
+};

package/src/hooks/useStackData.js

@@ -1,101 +1,101 @@
-import { useMemo } from 'react';
-import { group } from 'd3v7';
-import {
-  dataYOrZ,
-  seriesYOrZ,
-  getCurrentStack,
-  getStacks,
-  resetStacks,
-} from '../utils';
-
-const getSeriesMap = (series) => {
-  const seriesMap = new Map();
-  series.forEach(({ name, ...rest }) => {
-    seriesMap.set(name, {
-      ...rest,
-      name,
-      data: [],
-    });
-  });
-  return seriesMap;
-};
-const resetStackData = (series) => {
-  series.forEach((series) => {
-    series.data = [];
-  });
-};
-
-const setStackData = (data, series, stacks) => {
-  const dataMap = group(data, (d) => d.x);
-
-  dataMap.forEach((value) => {
-    resetStacks(stacks);
-    for (let i = 0, j = value.length; i < j; i++) {
-      const d = value[i];
-      const currentSeries = series.get(d.s);
-      if (d && d.y !== undefined && !isNaN(d.y)) {
-        const currentStack = getCurrentStack(currentSeries, stacks);
-        if (currentSeries && currentStack) {
-          if (d.y >= 0) {
-            currentSeries.data.push({
-              data: d,
-              index: currentStack.index,
-              bound: [currentStack.positive, currentStack.positive + d.y],
-            });
-            currentStack.positive += d.y;
-          } else {
-            currentSeries.data.push({
-              data: d,
-              index: currentStack.index,
-              bound: [currentStack.negative, currentStack.negative + d.y],
-            });
-            currentStack.negative += d.y;
-          }
-        } else {
-          currentSeries.data.push({
-            data: d,
-            bound: [0, d.y],
-            index: 0,
-          });
-        }
-      }
-    }
-  });
-  dataMap.clear();
-  return series;
-};
-
-/**
- * 计算堆叠数据
- * @param {Array} data 数据
- * @param {Map} series 系列
- * @returns {Array} 返回堆叠后的数据，由一开始的{x, y, s}变成{data: {x, y, s}, bound: [start, end], index}
- */
-
-export default ({ data, series }) => {
-  const _series = useMemo(() => {
-    const stacks = getStacks(series);
-    const _series = getSeriesMap(series);
-    return { stacks, series: seriesYOrZ(_series) };
-  }, [series]);
-
-  const _data = useMemo(() => dataYOrZ(data, _series.series), [data, _series]);
-
-  const tmp = useMemo(() => {
-    const { y: dataY, z: dataZ } = _data;
-    const {
-      stacks,
-      series: { y: seriesY, z: seriesZ },
-    } = _series;
-    resetStackData(seriesY);
-    resetStackData(seriesZ);
-    setStackData(dataY, seriesY, stacks);
-    setStackData(dataZ, seriesZ, stacks);
-
-    return {
-      bandLength: stacks.filter((item) => item.type == 'band').length,
-      series: [...seriesY.values(), ...seriesZ.values()],
-    };
-  }, [_data, _series]);
-  return tmp;
-};
+import { useMemo } from 'react';
+import { group } from 'd3v7';
+import {
+  dataYOrZ,
+  seriesYOrZ,
+  getCurrentStack,
+  getStacks,
+  resetStacks,
+} from '../utils';
+
+const getSeriesMap = (series) => {
+  const seriesMap = new Map();
+  series.forEach(({ name, ...rest }) => {
+    seriesMap.set(name, {
+      ...rest,
+      name,
+      data: [],
+    });
+  });
+  return seriesMap;
+};
+const resetStackData = (series) => {
+  series.forEach((series) => {
+    series.data = [];
+  });
+};
+
+const setStackData = (data, series, stacks) => {
+  const dataMap = group(data, (d) => d.x);
+
+  dataMap.forEach((value) => {
+    resetStacks(stacks);
+    for (let i = 0, j = value.length; i < j; i++) {
+      const d = value[i];
+      const currentSeries = series.get(d.s);
+      if (d && d.y !== undefined && !isNaN(d.y)) {
+        const currentStack = getCurrentStack(currentSeries, stacks);
+        if (currentSeries && currentStack) {
+          if (d.y >= 0) {
+            currentSeries.data.push({
+              data: d,
+              index: currentStack.index,
+              bound: [currentStack.positive, currentStack.positive + d.y],
+            });
+            currentStack.positive += d.y;
+          } else {
+            currentSeries.data.push({
+              data: d,
+              index: currentStack.index,
+              bound: [currentStack.negative, currentStack.negative + d.y],
+            });
+            currentStack.negative += d.y;
+          }
+        } else {
+          currentSeries.data.push({
+            data: d,
+            bound: [0, d.y],
+            index: 0,
+          });
+        }
+      }
+    }
+  });
+  dataMap.clear();
+  return series;
+};
+
+/**
+ * 计算堆叠数据
+ * @param {Array} data 数据
+ * @param {Map} series 系列
+ * @returns {Array} 返回堆叠后的数据，由一开始的{x, y, s}变成{data: {x, y, s}, bound: [start, end], index}
+ */
+
+export default ({ data, series }) => {
+  const _series = useMemo(() => {
+    const stacks = getStacks(series);
+    const _series = getSeriesMap(series);
+    return { stacks, series: seriesYOrZ(_series) };
+  }, [series]);
+
+  const _data = useMemo(() => dataYOrZ(data, _series.series), [data, _series]);
+
+  const tmp = useMemo(() => {
+    const { y: dataY, z: dataZ } = _data;
+    const {
+      stacks,
+      series: { y: seriesY, z: seriesZ },
+    } = _series;
+    resetStackData(seriesY);
+    resetStackData(seriesZ);
+    setStackData(dataY, seriesY, stacks);
+    setStackData(dataZ, seriesZ, stacks);
+
+    return {
+      bandLength: stacks.filter((item) => item.type == 'band').length,
+      series: [...seriesY.values(), ...seriesZ.values()],
+    };
+  }, [_data, _series]);
+  return tmp;
+};