@easyv/charts 1.4.21 → 1.4.24

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/useAxes.js

@@ -58,7 +58,12 @@ const scales = {
  * @returns {Map} 返回所有轴
  */
 
-export default ({ axes, context: { width, height } }) => {
+export default ({
+  axes,
+  context: { width, height }, //是否为控制图
+  isControlChart,
+  control: controlConfig,
+}) => {
   const _axes = useMemo(() => {
     const tmp = new Map();
     const xAxisPositions = [];
@@ -321,7 +326,7 @@ export default ({ axes, context: { width, height } }) => {
         const { start, end, direction, _paddingOuter, length } =
           getChartsConfig(orientation, width, height, paddingOuter);
 
-        const range =
+        let range =
           direction === "horizontal"
             ? [start, end]
             : direction === "vertical"
@@ -380,7 +385,9 @@ export default ({ axes, context: { width, height } }) => {
           ...item,
           count: _count,
           isClipAxis: _isClipAxis,
+          range,
           scaler,
+          domain,
           length,
           direction,
           start,

package/src/hooks/useCarouselAxisX.js

@@ -1,9 +1,9 @@
-import { useEffect, useState } from 'react';
-import { animate, linear } from 'popmotion';
+import { useEffect, useState } from "react";
+import { animate, linear } from "popmotion";
 
 const initialState = {
   currentIndex: null,
-  flag: false,    //表示是否为首次加载，true表示首次加载，不需要立刻执行动画，false表示可以执行轮播动画
+  flag: false, //表示是否为首次加载，true表示首次加载，不需要立刻执行动画，false表示可以执行轮播动画
 };
 
 /**
@@ -13,7 +13,13 @@ const initialState = {
  * @returns {Map} 返回经过改变后的x轴，主要是ticks和scaler的range发生了改变
  */
 
-export default (axis, config, isHover) => {
+export default (
+  axis,
+  config,
+  isHover,
+  isControlChart = false,
+  controlConfig = null
+) => {
   const { show, interval, duration, hover } = config;
   const time = duration + interval;
 
@@ -29,6 +35,12 @@ export default (axis, config, isHover) => {
   } = axis;
   const tickLength = ticks.length;
 
+  const _end =
+    isControlChart && controlConfig
+      ? end / (controlConfig.drag.width / 100)
+      : end;
+  const controlDragScaler = scaler.copy().range([start, end]);
+
   const [state, setState] = useState({
     scaler,
     step,
@@ -46,9 +58,9 @@ export default (axis, config, isHover) => {
       setStatus(initialState);
     }
   }, [show, time, tickCount, tickLength]);
-  useEffect(()=>{
+  useEffect(() => {
     let handler;
-    if(!(hover && isHover) && show && time && tickLength > tickCount){
+    if (!(hover && isHover) && show && time && tickLength > tickCount) {
       handler = setInterval(() => {
         setStatus(({ currentIndex }) => {
           const tmp = +currentIndex + 1;
@@ -62,7 +74,7 @@ export default (axis, config, isHover) => {
     return () => {
       handler && clearInterval(handler);
     };
-  },[show, time, tickCount, tickLength, hover, isHover])
+  }, [show, time, tickCount, tickLength, hover, isHover]);
 
   useEffect(() => {
     let animation;
@@ -74,7 +86,7 @@ export default (axis, config, isHover) => {
         setState({
           step,
           ticks: _ticks,
-          scaler: scaler.copy().domain(_ticks).range([start, end]),
+          scaler: scaler.copy().domain(_ticks).range([start, _end]),
         });
       } else {
         animation = animate({
@@ -95,7 +107,7 @@ export default (axis, config, isHover) => {
                 ticks: _ticks,
                 scaler: scaler
                   .copy()
-                  .range([start, end + step])
+                  .range([start, _end + step])
                   .domain(_ticks),
               };
             });
@@ -107,7 +119,7 @@ export default (axis, config, isHover) => {
                 ...axis,
                 scaler: scaler
                   .copy()
-                  .range([start + step * v, end + step + step * v]),
+                  .range([start + step * v, _end + step + step * v]),
               };
             });
           },
@@ -118,17 +130,17 @@ export default (axis, config, isHover) => {
               return {
                 ...axis,
                 ticks: _ticks,
-                scaler: scaler.copy().range([start, end]).domain(_ticks),
+                scaler: scaler.copy().range([start, _end]).domain(_ticks),
               };
             });
           },
         });
       }
     } else {
-      const _ticks = scaler.type == 'linear' ? scaler.domain() : allTicks;
+      const _ticks = scaler.type == "linear" ? scaler.domain() : allTicks;
       setState({
         step,
-        scaler: scaler.copy().domain(_ticks).range([start, end]),
+        scaler: scaler.copy().domain(_ticks).range([start, _end]),
         ticks,
       });
     }
@@ -140,16 +152,21 @@ export default (axis, config, isHover) => {
     allTicks,
     scaler,
     start,
-    end,
+    _end,
     step,
     ticks,
     lengthWithoutPaddingOuter,
     status,
     duration,
   ]);
+
   return {
     ...axis,
     ...state,
+    rawTicks: axis.ticks,
+    controlDragScaler,
+    controlEnd: _end,
+    isControlChart,
   };
 };
 
@@ -157,11 +174,11 @@ const getTicks = (ticks, currentIndex, length) => {
   const _currentIndex = +currentIndex;
   const ticksLength = ticks.length;
   if (ticksLength <= length) return ticks;
-  const end = _currentIndex + length;
-  if (ticksLength < end) {
+  const _end = _currentIndex + length;
+  if (ticksLength < _end) {
     const prev = ticks.slice(_currentIndex, ticksLength);
-    const next = ticks.slice(0, end - ticksLength);
+    const next = ticks.slice(0, _end - ticksLength);
     return [...prev, ...next];
   }
-  return ticks.slice(_currentIndex, end);
+  return ticks.slice(_currentIndex, _end);
 };

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