@easyv/charts 1.4.22 → 1.4.25

package/src/components/index.js

@@ -23,9 +23,11 @@ import CartesianChart from './CartesianChart';
 import PieChart from './PieChart';
 import TextOverflow from './TextOverflow';
 import BaseLine from './BaseLine';
+import Control from './Control';
 
 const Area = Line;
 export {
+  Control,
   Mapping,
   AnimateData,
   FilterData,

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 * (1 / (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/useTooltip.ts

@@ -1,6 +1,6 @@
-import { useCallback, useState, useEffect } from 'react';
-import { getMousePos } from '../utils';
-const callback = () => { };
+import { useCallback, useState, useEffect } from "react";
+import { getMousePos } from "../utils";
+const callback = () => {};
 
 /**
  * 主要用于轴类图表，返回当前选中的是哪一个x
@@ -19,8 +19,8 @@ type Props = {
   marginTop: number;
   width: number;
   height: number;
-  axisX: AxisX;
-  isHover:boolean,
+  axisX: any;
+  isHover: boolean;
   config: { auto?: boolean; interval?: number; manual?: boolean };
 };
 
@@ -37,7 +37,7 @@ export default ({
   const [currentIndex, setCurrentIndex] = useState<number | null>(null);
   const tickLength = axisX.allTicks.length;
   const setIndex = useCallback(
-    (e) => {
+    (e: any) => {
       if (svg) {
         const {
           x: mouseX,
@@ -54,17 +54,17 @@ export default ({
         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 position = direction === "vertical" ? y : x;
           const name = _ticks.reduce((prev: string, current: string) =>
             Math.abs(scaler(prev) - position) >
-              Math.abs(scaler(current) - position)
+            Math.abs(scaler(current) - position)
               ? current
               : prev
           );
           setCurrentIndex(allTicks.findIndex((tick: string) => tick == name));
         } else {
           // 鼠标划出后,如果开启了自动轮播，就不需要让提示框消失了
-          if(!auto){
+          if (!auto) {
             setCurrentIndex(null);
           }
         }
@@ -77,15 +77,15 @@ export default ({
     // 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)
+          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);