@easyv/charts 1.3.26 → 1.3.28

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/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;
+};

package/src/hooks/useTooltip.ts

@@ -1,96 +1,96 @@
-import { useCallback, useState, useEffect } from 'react';
-import { getMousePos } from '../utils';
-const callback = () => { };
-
-/**
- * 主要用于轴类图表，返回当前选中的是哪一个x
- * @param {Array} svg svg的dom实例
- * @param {Number} marginLeft 左间距
- * @param {Number} marginTop 上间距
- * @param {Number} width 宽
- * @param {Number} height 高
- * @param {Number} axisX 类目轴
- * @param {Object} config 轮播动画参数
- * @returns {Object} 返回被选中的名称，坐标，选中方法
- */
-type Props = {
-  svg: any;
-  marginLeft: number;
-  marginTop: number;
-  width: number;
-  height: number;
-  axisX: AxisX;
-  config: { auto?: boolean; interval?: number; manual?: boolean };
-};
-
-export default ({
-  svg,
-  marginLeft,
-  marginTop,
-  width,
-  height,
-  axisX,
-  config: { auto, interval = 0, manual } = {},
-}: Props) => {
-  const [currentIndex, setCurrentIndex] = useState<number | null>(null);
-
-  const tickLength = axisX.allTicks.length;
-  const setIndex = useCallback(
-    (e) => {
-      if (svg) {
-        const {
-          x: mouseX,
-          y: mouseY,
-          w: boundWidth,
-          h: boundHeight,
-        } = getMousePos(e, svg.current);
-        const { carousel, allTicks, ticks, scaler, direction } = axisX;
-        const _ticks = carousel ? ticks : allTicks;
-        const ratioX = parseInt(svg.current.style.width) / boundWidth;
-        const ratioY = parseInt(svg.current.style.height) / boundHeight;
-        const resetX = mouseX * ratioX;
-        const resetY = mouseY * ratioY;
-        const x = resetX - marginLeft;
-        const y = resetY - marginTop;
-        if (x > 0 && x < width && y > 0 && y < height && _ticks.length) {
-          const position = direction === 'vertical' ? y : x;
-          const name = _ticks.reduce((prev: string, current: string) =>
-            Math.abs(scaler(prev) - position) >
-              Math.abs(scaler(current) - position)
-              ? current
-              : prev
-          );
-          setCurrentIndex(allTicks.findIndex((tick: string) => tick == name));
-        } else {
-          setCurrentIndex(null);
-        }
-      }
-    },
-    [svg, marginLeft, axisX]
-  );
-  useEffect(() => {
-    const on = auto && tickLength;
-    if (!!on) setCurrentIndex(0);
-    const intervalHandler = on
-      ? setInterval(() => {
-        setCurrentIndex((index) => {
-          const tmp = index == null ? 0 : index;
-          const currentIndex = tmp + 1;
-          if (currentIndex >= tickLength) {
-            return 0;
-          }
-          return currentIndex;
-        });
-      }, interval * 1000)
-      : null;
-    return () => {
-      intervalHandler && clearInterval(intervalHandler);
-    };
-  }, [auto, tickLength, interval]);
-  const name = currentIndex === null ? null : axisX.allTicks[currentIndex];
-  return {
-    name,
-    x: axisX.scaler(name),
-    setIndex: manual ? setIndex : callback,
-  };
-};
+import { useCallback, useState, useEffect } from 'react';
+import { getMousePos } from '../utils';
+const callback = () => { };
+
+/**
+ * 主要用于轴类图表，返回当前选中的是哪一个x
+ * @param {Array} svg svg的dom实例
+ * @param {Number} marginLeft 左间距
+ * @param {Number} marginTop 上间距
+ * @param {Number} width 宽
+ * @param {Number} height 高
+ * @param {Number} axisX 类目轴
+ * @param {Object} config 轮播动画参数
+ * @returns {Object} 返回被选中的名称，坐标，选中方法
+ */
+type Props = {
+  svg: any;
+  marginLeft: number;
+  marginTop: number;
+  width: number;
+  height: number;
+  axisX: AxisX;
+  config: { auto?: boolean; interval?: number; manual?: boolean };
+};
+
+export default ({
+  svg,
+  marginLeft,
+  marginTop,
+  width,
+  height,
+  axisX,
+  config: { auto, interval = 0, manual } = {},
+}: Props) => {
+  const [currentIndex, setCurrentIndex] = useState<number | null>(null);
+
+  const tickLength = axisX.allTicks.length;
+  const setIndex = useCallback(
+    (e) => {
+      if (svg) {
+        const {
+          x: mouseX,
+          y: mouseY,
+          w: boundWidth,
+          h: boundHeight,
+        } = getMousePos(e, svg.current);
+        const { carousel, allTicks, ticks, scaler, direction } = axisX;
+        const _ticks = carousel ? ticks : allTicks;
+        const ratioX = parseInt(svg.current.style.width) / boundWidth;
+        const ratioY = parseInt(svg.current.style.height) / boundHeight;
+        const resetX = mouseX * ratioX;
+        const resetY = mouseY * ratioY;
+        const x = resetX - marginLeft;
+        const y = resetY - marginTop;
+        if (x > 0 && x < width && y > 0 && y < height && _ticks.length) {
+          const position = direction === 'vertical' ? y : x;
+          const name = _ticks.reduce((prev: string, current: string) =>
+            Math.abs(scaler(prev) - position) >
+              Math.abs(scaler(current) - position)
+              ? current
+              : prev
+          );
+          setCurrentIndex(allTicks.findIndex((tick: string) => tick == name));
+        } else {
+          setCurrentIndex(null);
+        }
+      }
+    },
+    [svg, marginLeft, axisX]
+  );
+  useEffect(() => {
+    const on = auto && tickLength;
+    if (!!on) setCurrentIndex(0);
+    const intervalHandler = on
+      ? setInterval(() => {
+        setCurrentIndex((index) => {
+          const tmp = index == null ? 0 : index;
+          const currentIndex = tmp + 1;
+          if (currentIndex >= tickLength) {
+            return 0;
+          }
+          return currentIndex;
+        });
+      }, interval * 1000)
+      : null;
+    return () => {
+      intervalHandler && clearInterval(intervalHandler);
+    };
+  }, [auto, tickLength, interval]);
+  const name = currentIndex === null ? null : axisX.allTicks[currentIndex];
+  return {
+    name,
+    x: axisX.scaler(name),
+    setIndex: manual ? setIndex : callback,
+  };
+};