@easyv/charts 1.2.0 → 1.2.1

package/src/hooks/useAxes.js

@@ -1,144 +1,144 @@
-import { useMemo } from 'react';
-import { scaleLinear, scaleLog, scaleTime, scaleUtc } from 'd3-scale';
-import { band, getTicksOfAxis } from '../utils';
-import {
-  getYTicksByStep,
-  getYTicks,
-} from '@easyv/utils/lib/common/utils';
-
-const scales = {
-  linear: scaleLinear,
-  log: scaleLog,
-  time: scaleTime,
-  utc: scaleUtc,
-  ordinal: band,
-};
-
-/**
- * x/y/z轴
- * @param {Array} axes 轴列表数组
- * @param {Object} context 其中需要包括
- * @returns {Map} 返回所有轴
- */
-
-export default ({ axes, context: { width, height } }) => {
-  const _axes = useMemo(() => {
-    const tmp = new Map();
-    const xAxisPositions = [];
-    axes.forEach((item) => {
-      const {
-        config: { label: { showLast = false } },
-        type,
-        orientation,
-        ticks,
-        tickCount = 1,
-        step = 1,
-        domain,
-        axisType,
-        paddingOuter = 0,
-        auto,
-        mode,
-        carousel,
-        config,
-      } = item;
-
-      const direction =
-        orientation === 'top' || orientation === 'bottom'
-          ? 'horizontal'
-          : orientation === 'left' || orientation === 'right'
-            ? 'vertical'
-            : '';
-
-      const length =
-        direction === 'horizontal'
-          ? width
-          : direction === 'vertical'
-            ? height
-            : 0;
-
-      const _paddingOuter = paddingOuter * length;
-      const start = _paddingOuter / 2;
-      const end = length - start;
-
-      const range =
-        direction === 'horizontal'
-          ? [start, end]
-          : direction === 'vertical'
-            ? [end, start]
-            : [0, 0];
-
-      const scaler = scales[type]().domain(domain).range(range);
-      scaler.type = type;
-
-      if (type !== 'ordinal') scaler.nice().clamp(true);
-
-      const allTicks = ticks
-        ? ticks
-        : scaler.ticks
-          ? scaler.ticks(tickCount)
-          : scaler.domain();
-
-      let _ticks = allTicks;
-      if (type === 'ordinal') {
-        if (carousel === false) {
-          _ticks = getTicksOfAxis(_ticks, +tickCount, showLast);
-        }
-      } else {
-        if (auto === false) {
-          switch (mode) {
-            case 'count':
-              _ticks = getYTicks(
-                _ticks[_ticks.length - 1],
-                _ticks[0],
-                +tickCount
-              );
-              break;
-            case 'step':
-              _ticks = getYTicksByStep(
-                _ticks[_ticks.length - 1],
-                _ticks[0],
-                +step
-              );
-              break;
-          }
-        }
-      }
-
-      const lengthWithoutPaddingOuter = length - _paddingOuter;
-
-      if (type == 'linear' && config.on) {
-        const zeroPosition = scaler(0);
-        if (zeroPosition !== range[0]) {
-          if (direction === 'horizontal') {
-            xAxisPositions.push({
-              x: zeroPosition,
-              y: 0,
-            });
-          } else if (direction === 'vertical') {
-            xAxisPositions.push({
-              x: 0,
-              y: zeroPosition,
-            });
-          }
-        }
-      }
-
-      tmp.set(axisType, {
-        ...item,
-        scaler,
-        length,
-        direction,
-        start,
-        end,
-        lengthWithoutPaddingOuter,
-        step: lengthWithoutPaddingOuter / allTicks.length,
-        allTicks,
-        ticks: _ticks,
-      });
-    });
-
-    tmp.get('x') && (tmp.get('x').positions = xAxisPositions);
-    return tmp;
-  }, [axes]);
-  return _axes;
-};
+import { useMemo } from 'react';
+import { scaleLinear, scaleLog, scaleTime, scaleUtc } from 'd3-scale';
+import { band, getTicksOfAxis } from '../utils';
+import {
+  getYTicksByStep,
+  getYTicks,
+} from '@easyv/utils/lib/common/utils';
+
+const scales = {
+  linear: scaleLinear,
+  log: scaleLog,
+  time: scaleTime,
+  utc: scaleUtc,
+  ordinal: band,
+};
+
+/**
+ * x/y/z轴
+ * @param {Array} axes 轴列表数组
+ * @param {Object} context 其中需要包括
+ * @returns {Map} 返回所有轴
+ */
+
+export default ({ axes, context: { width, height } }) => {
+  const _axes = useMemo(() => {
+    const tmp = new Map();
+    const xAxisPositions = [];
+    axes.forEach((item) => {
+      const {
+        config: { label: { showLast = false } },
+        type,
+        orientation,
+        ticks,
+        tickCount = 1,
+        step = 1,
+        domain,
+        axisType,
+        paddingOuter = 0,
+        auto,
+        mode,
+        carousel,
+        config,
+      } = item;
+
+      const direction =
+        orientation === 'top' || orientation === 'bottom'
+          ? 'horizontal'
+          : orientation === 'left' || orientation === 'right'
+            ? 'vertical'
+            : '';
+
+      const length =
+        direction === 'horizontal'
+          ? width
+          : direction === 'vertical'
+            ? height
+            : 0;
+
+      const _paddingOuter = paddingOuter * length;
+      const start = _paddingOuter / 2;
+      const end = length - start;
+
+      const range =
+        direction === 'horizontal'
+          ? [start, end]
+          : direction === 'vertical'
+            ? [end, start]
+            : [0, 0];
+
+      const scaler = scales[type]().domain(domain).range(range);
+      scaler.type = type;
+
+      if (type !== 'ordinal') scaler.nice().clamp(true);
+
+      const allTicks = ticks
+        ? ticks
+        : scaler.ticks
+          ? scaler.ticks(tickCount)
+          : scaler.domain();
+
+      let _ticks = allTicks;
+      if (type === 'ordinal') {
+        if (carousel === false) {
+          _ticks = getTicksOfAxis(_ticks, +tickCount, showLast);
+        }
+      } else {
+        if (auto === false) {
+          switch (mode) {
+            case 'count':
+              _ticks = getYTicks(
+                _ticks[_ticks.length - 1],
+                _ticks[0],
+                +tickCount
+              );
+              break;
+            case 'step':
+              _ticks = getYTicksByStep(
+                _ticks[_ticks.length - 1],
+                _ticks[0],
+                +step
+              );
+              break;
+          }
+        }
+      }
+
+      const lengthWithoutPaddingOuter = length - _paddingOuter;
+
+      if (type == 'linear' && config.on) {
+        const zeroPosition = scaler(0);
+        if (zeroPosition !== range[0]) {
+          if (direction === 'horizontal') {
+            xAxisPositions.push({
+              x: zeroPosition,
+              y: 0,
+            });
+          } else if (direction === 'vertical') {
+            xAxisPositions.push({
+              x: 0,
+              y: zeroPosition,
+            });
+          }
+        }
+      }
+
+      tmp.set(axisType, {
+        ...item,
+        scaler,
+        length,
+        direction,
+        start,
+        end,
+        lengthWithoutPaddingOuter,
+        step: lengthWithoutPaddingOuter / allTicks.length,
+        allTicks,
+        ticks: _ticks,
+      });
+    });
+
+    tmp.get('x') && (tmp.get('x').positions = xAxisPositions);
+    return tmp;
+  }, [axes]);
+  return _axes;
+};

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