@easyv/charts 1.0.44 → 1.0.48

package/src/hooks/useCarouselAxisX.js

@@ -1,163 +1,163 @@
-import { useEffect, useState } from 'react';
-import { animate, linear } from 'popmotion';
-
-const initialState = {
-  currentIndex: null,
-  flag: false,
-};
-
-/**
- * x轴滚动逻辑
- * @param {Object} axis x轴配置项
- * @param {Object} config x轴轮播动画的配置项
- * @returns {Map} 返回经过改变后的x轴，主要是ticks和scaler的range发生了改变
- */
-
-export default (axis, config) => {
-  const { show, interval, duration } = config;
-  const time = duration + interval;
-
-  const {
-    tickCount,
-    allTicks,
-    scaler,
-    start,
-    end,
-    step,
-    ticks,
-    lengthWithoutPaddingOuter,
-  } = axis;
-  const tickLength = ticks.length;
-
-  const [state, setState] = useState({
-    scaler,
-    step,
-    ticks,
-  });
-  const [status, setStatus] = useState(initialState);
-
-  useEffect(() => {
-    let handler;
-    if (show && time && tickLength > tickCount) {
-      setStatus({
-        currentIndex: 0,
-        flag: true,
-      });
-      handler = setInterval(() => {
-        setStatus(({ currentIndex }) => {
-          const tmp = +currentIndex + 1;
-          return {
-            currentIndex: tmp >= tickLength ? 0 : tmp,
-            flag: false,
-          };
-        });
-      }, time * 1000);
-    } else {
-      setStatus(initialState);
-    }
-    return () => {
-      handler && clearInterval(handler);
-    };
-  }, [show, time, tickCount, tickLength]);
-
-  useEffect(() => {
-    let animation;
-    const { currentIndex, flag } = status;
-    if (currentIndex !== null) {
-      const step = lengthWithoutPaddingOuter / tickCount;
-      if (flag) {
-        const _ticks = allTicks.slice(currentIndex, tickCount);
-        setState({
-          step,
-          ticks: _ticks,
-          scaler: scaler.copy().domain(_ticks).range([start, end]),
-        });
-      } else {
-        animation = animate({
-          from: 0,
-          to: -1,
-          duration: duration * 1000,
-          ease: linear,
-          onPlay: () => {
-            setState((axis) => {
-              const { ticks, scaler } = axis;
-              const [tick] = ticks;
-              const _ticks = [
-                tick,
-                ...getTicks(allTicks, currentIndex, tickCount),
-              ];
-              return {
-                ...axis,
-                ticks: _ticks,
-                scaler: scaler
-                  .copy()
-                  .range([start, end + step])
-                  .domain(_ticks),
-              };
-            });
-          },
-          onUpdate: (v) => {
-            setState((axis) => {
-              const { scaler, step } = axis;
-              return {
-                ...axis,
-                scaler: scaler
-                  .copy()
-                  .range([start + step * v, end + step + step * v]),
-              };
-            });
-          },
-          onComplete: () => {
-            setState((axis) => {
-              const { scaler, ticks } = axis;
-              const _ticks = ticks.slice(1, ticks.length);
-              return {
-                ...axis,
-                ticks: _ticks,
-                scaler: scaler.copy().range([start, end]).domain(_ticks),
-              };
-            });
-          },
-        });
-      }
-    } else {
-      const _ticks = scaler.type == 'linear' ? scaler.domain() : allTicks;
-      setState({
-        step,
-        scaler: scaler.copy().domain(_ticks).range([start, end]),
-        ticks,
-      });
-    }
-    return () => {
-      animation && animation.stop();
-    };
-  }, [
-    tickCount,
-    allTicks,
-    scaler,
-    start,
-    end,
-    step,
-    ticks,
-    lengthWithoutPaddingOuter,
-    status,
-    duration,
-  ]);
-  return {
-    ...axis,
-    ...state,
-  };
-};
-
-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 prev = ticks.slice(_currentIndex, ticksLength);
-    const next = ticks.slice(0, end - ticksLength);
-    return [...prev, ...next];
-  }
-  return ticks.slice(_currentIndex, end);
-};
+import { useEffect, useState } from 'react';
+import { animate, linear } from 'popmotion';
+
+const initialState = {
+  currentIndex: null,
+  flag: false,
+};
+
+/**
+ * x轴滚动逻辑
+ * @param {Object} axis x轴配置项
+ * @param {Object} config x轴轮播动画的配置项
+ * @returns {Map} 返回经过改变后的x轴，主要是ticks和scaler的range发生了改变
+ */
+
+export default (axis, config) => {
+  const { show, interval, duration } = config;
+  const time = duration + interval;
+
+  const {
+    tickCount,
+    allTicks,
+    scaler,
+    start,
+    end,
+    step,
+    ticks,
+    lengthWithoutPaddingOuter,
+  } = axis;
+  const tickLength = ticks.length;
+
+  const [state, setState] = useState({
+    scaler,
+    step,
+    ticks,
+  });
+  const [status, setStatus] = useState(initialState);
+
+  useEffect(() => {
+    let handler;
+    if (show && time && tickLength > tickCount) {
+      setStatus({
+        currentIndex: 0,
+        flag: true,
+      });
+      handler = setInterval(() => {
+        setStatus(({ currentIndex }) => {
+          const tmp = +currentIndex + 1;
+          return {
+            currentIndex: tmp >= tickLength ? 0 : tmp,
+            flag: false,
+          };
+        });
+      }, time * 1000);
+    } else {
+      setStatus(initialState);
+    }
+    return () => {
+      handler && clearInterval(handler);
+    };
+  }, [show, time, tickCount, tickLength]);
+
+  useEffect(() => {
+    let animation;
+    const { currentIndex, flag } = status;
+    if (currentIndex !== null) {
+      const step = lengthWithoutPaddingOuter / tickCount;
+      if (flag) {
+        const _ticks = allTicks.slice(currentIndex, tickCount);
+        setState({
+          step,
+          ticks: _ticks,
+          scaler: scaler.copy().domain(_ticks).range([start, end]),
+        });
+      } else {
+        animation = animate({
+          from: 0,
+          to: -1,
+          duration: duration * 1000,
+          ease: linear,
+          onPlay: () => {
+            setState((axis) => {
+              const { ticks, scaler } = axis;
+              const [tick] = ticks;
+              const _ticks = [
+                tick,
+                ...getTicks(allTicks, currentIndex, tickCount),
+              ];
+              return {
+                ...axis,
+                ticks: _ticks,
+                scaler: scaler
+                  .copy()
+                  .range([start, end + step])
+                  .domain(_ticks),
+              };
+            });
+          },
+          onUpdate: (v) => {
+            setState((axis) => {
+              const { scaler, step } = axis;
+              return {
+                ...axis,
+                scaler: scaler
+                  .copy()
+                  .range([start + step * v, end + step + step * v]),
+              };
+            });
+          },
+          onComplete: () => {
+            setState((axis) => {
+              const { scaler, ticks } = axis;
+              const _ticks = ticks.slice(1, ticks.length);
+              return {
+                ...axis,
+                ticks: _ticks,
+                scaler: scaler.copy().range([start, end]).domain(_ticks),
+              };
+            });
+          },
+        });
+      }
+    } else {
+      const _ticks = scaler.type == 'linear' ? scaler.domain() : allTicks;
+      setState({
+        step,
+        scaler: scaler.copy().domain(_ticks).range([start, end]),
+        ticks,
+      });
+    }
+    return () => {
+      animation && animation.stop();
+    };
+  }, [
+    tickCount,
+    allTicks,
+    scaler,
+    start,
+    end,
+    step,
+    ticks,
+    lengthWithoutPaddingOuter,
+    status,
+    duration,
+  ]);
+  return {
+    ...axis,
+    ...state,
+  };
+};
+
+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 prev = ticks.slice(_currentIndex, ticksLength);
+    const next = ticks.slice(0, end - ticksLength);
+    return [...prev, ...next];
+  }
+  return ticks.slice(_currentIndex, end);
+};

package/src/hooks/useExtentData.js

@@ -1,88 +1,88 @@
-import { useMemo } from 'react';
-import { group, extent } from 'd3v7';
-import {
-  getStacks,
-  dataYOrZ,
-  seriesYOrZ,
-  resetStacks,
-  getCurrentStack,
-} from '../utils';
-
-const stackData = (data, series) => {
-  const dataMap = group(data, (d) => d.x);
-  const stacks = getStacks(series);
-  let min = 0,
-    max = 0;
-
-  dataMap.forEach((value) => {
-    const arr = [];
-    resetStacks(stacks);
-    for (let i = 0, j = value.length; i < j; i++) {
-      const d = value[i];
-      const stack = series.get(d.s);
-      if (d && d.y !== undefined && !isNaN(d.y)) {
-        const currentStack = getCurrentStack(stack, stacks);
-        if (stack && currentStack) {
-          if (d.y >= 0) {
-            currentStack.positive += d.y;
-            arr.push(currentStack.positive);
-          } else {
-            currentStack.negative += d.y;
-            arr.push(currentStack.negative);
-          }
-        } else {
-          arr.push(d.y);
-        }
-      }
-    }
-    min = Math.min(...arr, min);
-    max = Math.max(...arr, max);
-  });
-  dataMap.clear();
-  return [min, max];
-};
-
-/**
- * 计算轴的domain
- * @param {Array} axes x轴列表
- * @param {Object} series 图表的系列，主要是为了读取type, stack, yOrZ三个字段
- * @param {Object} data 数据列表
- * @returns {Array} 返回带domain的轴
- */
-
-export default ({ axes, series, data }) => {
-  const _series = useMemo(() => seriesYOrZ(series), [series]);
-  const { y: dataY, z: dataZ } = useMemo(
-    () => dataYOrZ(data, _series),
-    [data, _series]
-  );
-
-  const x = useMemo(() => [...group(data, (d) => d.x).keys()], [data]);
-  const y = stackData(dataY, _series.y);
-  const z = stackData(dataZ, _series.z);
-
-  return axes.map((item) => {
-    const { axisType, domain, type } = item;
-    switch (axisType) {
-      case 'x':
-        return {
-          ...item,
-          domain: type == 'linear' ? extent(x) : x,
-        };
-      case 'y':
-        return {
-          ...item,
-          domain: domain ? getDomain(y, domain) : y,
-        };
-      case 'z':
-        return {
-          ...item,
-          domain: domain ? getDomain(z, domain) : z,
-        };
-    }
-  });
-};
-
-const getDomain = ([min1, max1], { min, max }) => {
-  return [min !== '' ? +min : min1, max !== '' ? +max : max1];
-};
+import { useMemo } from 'react';
+import { group, extent } from 'd3v7';
+import {
+  getStacks,
+  dataYOrZ,
+  seriesYOrZ,
+  resetStacks,
+  getCurrentStack,
+} from '../utils';
+
+const stackData = (data, series) => {
+  const dataMap = group(data, (d) => d.x);
+  const stacks = getStacks(series);
+  let min = 0,
+    max = 0;
+
+  dataMap.forEach((value) => {
+    const arr = [];
+    resetStacks(stacks);
+    for (let i = 0, j = value.length; i < j; i++) {
+      const d = value[i];
+      const stack = series.get(d.s);
+      if (d && d.y !== undefined && !isNaN(d.y)) {
+        const currentStack = getCurrentStack(stack, stacks);
+        if (stack && currentStack) {
+          if (d.y >= 0) {
+            currentStack.positive += d.y;
+            arr.push(currentStack.positive);
+          } else {
+            currentStack.negative += d.y;
+            arr.push(currentStack.negative);
+          }
+        } else {
+          arr.push(d.y);
+        }
+      }
+    }
+    min = Math.min(...arr, min);
+    max = Math.max(...arr, max);
+  });
+  dataMap.clear();
+  return [min, max];
+};
+
+/**
+ * 计算轴的domain
+ * @param {Array} axes x轴列表
+ * @param {Object} series 图表的系列，主要是为了读取type, stack, yOrZ三个字段
+ * @param {Object} data 数据列表
+ * @returns {Array} 返回带domain的轴
+ */
+
+export default ({ axes, series, data }) => {
+  const _series = useMemo(() => seriesYOrZ(series), [series]);
+  const { y: dataY, z: dataZ } = useMemo(
+    () => dataYOrZ(data, _series),
+    [data, _series]
+  );
+
+  const x = useMemo(() => [...group(data, (d) => d.x).keys()], [data]);
+  const y = stackData(dataY, _series.y);
+  const z = stackData(dataZ, _series.z);
+
+  return axes.map((item) => {
+    const { axisType, domain, type } = item;
+    switch (axisType) {
+      case 'x':
+        return {
+          ...item,
+          domain: type == 'linear' ? extent(x) : x,
+        };
+      case 'y':
+        return {
+          ...item,
+          domain: domain ? getDomain(y, domain) : y,
+        };
+      case 'z':
+        return {
+          ...item,
+          domain: domain ? getDomain(z, domain) : z,
+        };
+    }
+  });
+};
+
+const getDomain = ([min1, max1], { min, max }) => {
+  return [min !== '' ? +min : min1, max !== '' ? +max : max1];
+};

package/src/hooks/useFilterData.js

@@ -1,65 +1,65 @@
-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,
-    },
-    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,
+    },
+    onClick,
+  ];
+};