@easyv/charts 1.4.34 → 1.4.36

package/src/components/Band.tsx

@@ -69,12 +69,8 @@ export default memo(
     //控制图部分，主要是为了控制图的指示器，在悬浮的时候显示
     triggerClick,
     indicatorWidth,
-    setControlChartTooltipShow,
-    setControlChartTooltipX,
-    setControlChartTooltipXName,
     isControlChart = false,
-    setControlChartIndicatorList,
-
+    setCtlTip,
     config: {
       pattern = {},
       seriesIntervalWidth: paddingInner = 0,
@@ -91,12 +87,12 @@ export default memo(
     },
     bandLength = 0,
     data,
-    xAxis: { scaler: xScaler, step, direction },
-    xAxis,
+    xAxis: { scaler: normalScaler, step:normalStep, controlStep, direction, controlDragScaler },
     yAxis: { scaler: yScaler, isClipAxis, clipValue },
   }: any) => {
     if (!data.length) return null;
-
+    const step = isControlChart?controlStep:normalStep;
+    const xScaler = isControlChart?controlDragScaler:normalScaler;
     const { seriesWidth, seriesStep, seriesStart } = getSeriesInfo({
       step,
       bandLength,
@@ -105,7 +101,6 @@ export default memo(
     });
 
     const _data = showHighlight ? getHighlightData(data, extent) : data;
-
     const isVertical = direction === "vertical";
     const borderStr = `${border.borderColor} solid ${border.borderWidth}px`;
     return (
@@ -135,9 +130,7 @@ export default memo(
               y1 = yScaler(isVertical ? end : start);
               y2 = yScaler(isVertical ? start : end);
             }
-
-            const positionX =
-              xScaler(x) - step / 2 + seriesStart + index * seriesStep;
+            const positionX = xScaler(x) - step / 2 + seriesStart + index * seriesStep;
 
             let showHead, headUrl, headWidth, headHeight, headTranslate;
             if (headDecorate) {
@@ -176,36 +169,35 @@ export default memo(
                 style={{
                   overflow: "visible",
                   position: "relative",
+                  pointerEvents:isControlChart?"auto":"none",
                   cursor: "pointer",
                 }}
                 {...attr}
                 onClick={triggerClick}
                 //enter和leave事件，用于控制图的提示框
                 onMouseEnter={() => {
-                  if (isControlChart) {
-                    setControlChartIndicatorList((v: any) => {
-                      return v.map((item: any) => {
-                        if (item.tick === data.x) {
-                          return { ...item, isShow: true };
-                        } else {
-                          return item;
-                        }
-                      });
-                    });
-                    setControlChartTooltipShow(true);
-                    setControlChartTooltipX(xScaler(x) - indicatorWidth / 2);
-                    setControlChartTooltipXName(data.x);
-                  }
+                  setCtlTip((pre:any)=>({
+                    show:true,
+                    x:xScaler(x),
+                    xName:data.x,
+                    indicatorList:pre.indicatorList.map((item:any)=>{
+                      if (item.tick === data.x) {
+                        return { ...item, isShow: true };
+                      } else {
+                        return item;
+                      }
+                    })
+                  }))
                 }}
                 onMouseLeave={() => {
-                  if (isControlChart) {
-                    setControlChartIndicatorList((v: any) =>
-                      v.map((item: any) => ({ ...item, isShow: false }))
-                    );
-                    setControlChartTooltipShow(false);
-                    setControlChartTooltipXName(undefined);
-                    setControlChartTooltipX(undefined);
-                  }
+                  setCtlTip((pre:any)=>({
+                    show:false,
+                    x:undefined,
+                    xName:undefined,
+                    indicatorList:pre.indicatorList.map((item:any)=>{
+                      return { ...item, isShow:false }
+                    })
+                  }))
                 }}
                 data-data={JSON.stringify(data)}
               >
@@ -214,6 +206,7 @@ export default memo(
                     style={{
                       position: "absolute",
                       background: `url(${
+                        //@ts-ignore
                         window.appConfig.ASSETS_URL + headUrl
                       }) 0 0/100% 100%`,
                       width: headWidth,

package/src/components/CartesianChart.js

@@ -8,10 +8,9 @@ import React, {
   useRef,
   useContext,
   useCallback,
-  useEffect,
-  forwardRef,
+  useEffect
 } from "react";
-import { useAxes, useTooltip, useCarouselAxisX,useAiData } from "../hooks";
+import { useAxes, useTooltip, useCarouselAxisX, useAiData } from "../hooks";
 import { chartContext } from "../context";
 import {
   ChartContainer,
@@ -30,7 +29,6 @@ import {
   BaseLine,
   Control,
 } from ".";
-import { getMousePos } from "../utils";
 
 const Chart = memo(
   ({
@@ -58,7 +56,6 @@ const Chart = memo(
         config: { auto, manual, indicator = {} } = {},
       } = {},
       brush,
-      isControlChart = false,
       control = null,
     },
     style,
@@ -74,25 +71,49 @@ const Chart = memo(
       height: chartHeight,
       triggerOnRelative,
       onEmit,
-    } = useContext(chartContext);
+    } = context;
+    const xLineRange = chartWidth;
+    let yLineRange = chartHeight;
+    //获取控制条相关的参数
+    let isControl = false;
+    let controlWidth = 0;
+    let controlBarWidth = 0;
+    let dragPercent = 1;
+    let controlHeight = 0;
+    if(control){
+      const { height, margin:{ left, right }, drag:{ width:dragWidth } } = control;
+      isControl = true;
+      controlHeight = height;
+      controlWidth = width-left-right;
+      dragPercent = dragWidth/100;
+      controlBarWidth = controlWidth*dragPercent;
+    }
+    const [controlInfo, setControlInfo] = useState({ isC:isControl, cWidth:controlWidth, cHeight:controlHeight, cBarWidth:controlBarWidth, cPercent:dragPercent });
+    const { cWidth, cHeight, cBarWidth, cPercent } = controlInfo;
+    yLineRange -=  cHeight;
+    useEffect(()=>{
+      setControlInfo({
+        isC:isControl,
+        cWidth:controlWidth,
+        cHeight:controlHeight, 
+        cBarWidth:controlBarWidth, 
+        cPercent:dragPercent
+      });
+    },[JSON.stringify(control)]);
+
     const svg = useRef();
     const axes = useAxes({
       axes: axesConfig,
       context,
-      isControlChart,
-      control,
+      controlInfo
     });
     const aiData = aiFormatter?aiFormatter(originData, axes, series):useAiData(originData, axes, series);
     const axisX = useCarouselAxisX(
       axes.get("x"),
       animation,
       isHover,
-      isControlChart,
-      control
+      controlInfo
     );
-    const xLineRange = width - marginLeft - marginRight;
-    const yLineRange = height - marginTop - marginBottom;
-    
     useEffect(()=>{
       if(aiData.length){
         if(!window.aiData){ 
@@ -118,7 +139,7 @@ const Chart = memo(
       marginLeft,
       marginTop,
       width: chartWidth,
-      height: chartHeight,
+      height: yLineRange,
       axisX,
       isHover,
       config: tooltipConfig,
@@ -137,12 +158,12 @@ const Chart = memo(
 
     const isVertical = axisX.direction === "vertical";
 
-    const indicatorWidth = (indicator.width * axisX.step) / 100;
+    const indicatorWidth = (indicator.width * (control?axisX.controlStep:axisX.step)) / 100;
     const position = axisX.scaler(tickName) - indicatorWidth / 2;
     const indicatorAttr = isVertical
       ? { width: chartWidth, height: indicatorWidth, y: position }
       : {
-          height: chartHeight,
+          height: yLineRange,
           width: indicatorWidth,
           x: position,
         };
@@ -165,148 +186,130 @@ const Chart = memo(
     const seriesEl = useRef(null);
     const axisElList = useRef([]);
     const curControlPercent = useRef(0);
-    useEffect(() => {
-      if (controlEl.current && isControlChart) {
-        let isDragging = false;
-        let movementX = 0;
-        let rawTranslateX = 0;
-        let percent = 0;
-        const controlWidth = (xLineRange * control.drag.width) / 100;
-        const range = (num) => {
-          let _num = num;
-          const min = 0;
-          const max = xLineRange - controlWidth;
-          _num = Math.max(_num, min);
-          _num = Math.min(_num, max);
-          return _num;
-        };
-        const setControlTranslate = (x) => {
-          const moveLen = range(x);
-          controlEl.current.style.transform = `translateX(${moveLen}px)`;
-          //计算出当前位移的百分比
-          percent = moveLen / (xLineRange - controlWidth);
-          curControlPercent.current = percent;
-          seriesEl.current.style.transform = `translate(${
-            -(axisX.controlEnd - axisX.end) * percent
-          }px,${marginTop}px)`;
-          axisElList.current[2].style.transform = `translate(${
-            -(axisX.controlEnd - axisX.end) * percent
-          }px,${0}px)`;
-        };
-        const mouseDownHandle = (e) => {
-          const mouseMoveHandle = (e) => {
-            //当前位移的距离
-            if (isDragging) {
-              movementX += e.movementX;
-              setControlTranslate(movementX + rawTranslateX);
-            }
-          };
-          const mouseUpHandle = (e) => {
-            rawTranslateX = range(movementX + rawTranslateX);
-            movementX = 0;
-            isDragging = false;
-            document.removeEventListener("mousemove", mouseMoveHandle);
-            document.removeEventListener("mouseup", mouseUpHandle);
-          };
-          document.addEventListener("mousemove", mouseMoveHandle);
-          document.addEventListener("mouseup", mouseUpHandle);
-          isDragging = true;
-        };
+    const controlTimer = useRef();  //控制条的动画计时器
+    const ctlBarX = useRef(0);      //控制条的滑块偏移值
+    const isWorking = useRef(false);  //控制条是否正在进行各种操作
 
-        let animationHoverStop;
-        const setAnimationHoverStopTrue = () => {
-          animationHoverStop = true;
-        };
-        const setAnimationHoverStopFalse = () => {
-          animationHoverStop = false;
-        };
-        svg.current.addEventListener("mouseenter", setAnimationHoverStopTrue);
-        svg.current.addEventListener("mouseleave", setAnimationHoverStopFalse);
-
-        //控制图轮播动画逻辑
+    const range = (num) => {
+      let _num = num;
+      const min = 0;
+      const max = cWidth - cBarWidth;
+      _num = Math.max(_num, min);
+      _num = Math.min(_num, max);
+      return _num;
+    };
+    //设置滑块和图表主体的偏移值
+    const setControlTranslate = (x, needSave) => {
+      const { controlEnd, start } = axisX;
+      const moveLen = range(x);
+      if(needSave) ctlBarX.current = moveLen;
+      controlEl.current.style.transform = `translate(${moveLen}px,0)`;
+      //计算出当前位移的百分比
+      const percent = moveLen / (cWidth - cBarWidth);
+      const translateX = -(controlEnd + start/cPercent - chartWidth) * percent;
+      curControlPercent.current = percent;
+      seriesEl.current.style.transform = `translate(${translateX}px,${marginTop}px)`;
+      axisElList.current[2].style.transform = `translate(${translateX}px,${0}px)`;
+    };
+    //设置控制条是否正在进行拖拽/缩放操作
+    const setWorking=(bool)=>{
+      isWorking.current = bool;
+    }
+    useEffect(() => {
+      if (controlEl.current && control) {
+        let isEnter = false;   //控制条轮播动画是否处于暂停状态
         const { show, duration, interval, hover } = animation;
-        const times = Math.floor(xLineRange / controlWidth);
-        let animatePos = [];
-        for (let i = 0; i <= times; i++) {
-          if (i * controlWidth <= xLineRange) {
-            animatePos.push(i * controlWidth);
-          } else {
-            animatePos.push(xLineRange - controlWidth);
-          }
-        }
-        let index = 0;
-        let animationId;
-        if (animation.show) {
-          let initTime, timeGap;
-          const animation = (timestamp) => {
-            if (!initTime) {
-              initTime = timestamp;
-            }
-            if (animationHoverStop && hover) {
-              initTime = timestamp - timeGap;
-            }
-            timeGap = timestamp - initTime;
-            if (timeGap < (interval + duration) * 1000) {
-              if (timeGap < duration * 1000) {
-                const p = timeGap / (duration * 1000);
-                let nextIndex = index + 1;
-                let v;
-                if (nextIndex < animatePos.length) {
-                  v =
-                    p * (animatePos[nextIndex] - animatePos[index]) +
-                    animatePos[index];
-                } else {
-                  nextIndex = 0;
-                  v = (1 - p) * animatePos[index];
+        const startAnimate=()=>{
+          const loopInterval = interval*1000, tranDuration = duration*1000; 
+          let loopTime, timeGap, toRight=true;
+          const transition=(timeStamp)=>{
+            if(!loopTime)loopTime=timeStamp;
+            if(!isEnter && !isWorking.current){
+              if(timeStamp-loopTime<tranDuration){
+                const percent = Math.min(1,(timeStamp-loopTime)/tranDuration);
+                if(toRight){
+                  setControlTranslate(cBarWidth*percent+ctlBarX.current);
+                }else{
+                  setControlTranslate(ctlBarX.current*(1-percent));
+                }
+                controlTimer.current = requestAnimationFrame(transition);
+              }else{
+                loopTime = timeStamp;
+                if(toRight){
+                  setControlTranslate(cBarWidth+ctlBarX.current, true);
+                }else{
+                  setControlTranslate(0,true);
                 }
-                setControlTranslate(v);
+                controlTimer.current = requestAnimationFrame(loop);
               }
-              animationId = window.requestAnimationFrame(animation);
-            } else {
-              index = index < times ? index + 1 : 0;
-              initTime = 0;
-              animationId = window.requestAnimationFrame(animation);
+            }else{
+              loopTime = timeStamp-timeGap;
+              controlTimer.current = requestAnimationFrame(transition);
             }
-          };
-          animationId = window.requestAnimationFrame(animation);
+            timeGap = timeStamp - loopTime;
+          }
+          
+          const loop=(timeStamp)=>{
+            if(!loopTime)loopTime=timeStamp;
+            if(!isEnter && !isWorking.current){
+              if(timeStamp-loopTime<loopInterval){
+                controlTimer.current = requestAnimationFrame(loop);
+              }else{
+                loopTime = timeStamp;
+                if(ctlBarX.current==cWidth - cBarWidth) toRight=false;
+                else toRight=true;
+                controlTimer.current = requestAnimationFrame(transition);
+              }
+            }else{
+              loopTime = timeStamp-timeGap;
+              controlTimer.current = requestAnimationFrame(loop);
+            }
+            timeGap = timeStamp - loopTime;
+          }
+          controlTimer.current = requestAnimationFrame(loop);
+        }
+        const mouseenter = () => {
+          isEnter = true;
+        };
+        const mouseleave = () => {
+          isEnter = false;
+        };
+        if(hover){
+          svg.current.addEventListener("mouseenter",mouseenter);
+          svg.current.addEventListener("mouseleave",mouseleave);
+          controlEl.current.addEventListener("mouseenter",mouseenter);
+          controlEl.current.addEventListener("mouseleave",mouseleave);
+        }
+        if(show){
+          startAnimate();
         }
-        controlEl.current.addEventListener("mousedown", mouseDownHandle);
-
         return () => {
-          controlEl.current.removeEventListener("mousedown", mouseDownHandle);
-          svg.current.removeEventListener(
-            "mouseenter",
-            setAnimationHoverStopTrue
-          );
-          svg.current.removeEventListener(
-            "mouseleave",
-            setAnimationHoverStopFalse
-          );
-
-          window.cancelAnimationFrame(animationId);
+          svg.current.removeEventListener("mouseenter",mouseenter);
+          svg.current.removeEventListener("mouseleave",mouseleave);
+          controlEl.current.removeEventListener("mouseenter",mouseenter);
+          controlEl.current.removeEventListener("mouseleave",mouseleave);
+          cancelAnimationFrame(controlTimer.current);
         };
       }
     }, [JSON.stringify(animation), control]);
-
-    const [controlChartTooltipShow, setControlChartTooltipShow] =
-      useState(false);
-    const [controlChartTooltipXName, setControlChartTooltipXName] =
-      useState(undefined);
-    const [controlChartTooltipX, setControlChartTooltipX] = useState(undefined);
-    const controlChartTooltipData = useMemo(
-      () =>
-        controlChartTooltipXName !== undefined &&
-        originData.filter((d) => d.x === controlChartTooltipXName),
-      [controlChartTooltipXName, originData]
-    );
-    const [controlChartIndicatorList, setControlChartIndicatorList] = useState(
-      axisX.ticks.map((tick) => {
-        return {
-          tick: tick,
-          isShow: false,
-        };
-      })
-    );
+    //初始化控制图提示框状态的函数
+    const initCtlTip = ()=>{
+      return {
+        show:false,
+        xName:"",
+        x:undefined,
+        indicatorList:axisX.ticks.map((tick) => {
+          return {
+            tick: tick,
+            isShow: false,
+          };
+        })
+      }
+    }
+    const [ctlTip, setCtlTip] = useState(initCtlTip);
+    const { show:showCtl, xName:ctlXName, x:ctlX, indicatorList:ctlIndicatorList } = ctlTip;
+    const controlChartTooltipData = ctlXName && originData.filter((d) => d.x === ctlXName);
+    
     return (
       <>
         <ChartContainer
@@ -334,7 +337,7 @@ const Chart = memo(
             >
               <svg width="100%" height="100%">
                 <Background
-                  length={isVertical ? chartWidth : chartHeight}
+                  length={isVertical ? chartWidth : yLineRange}
                   axis={axisX}
                   config={background}
                   bandLength={bandLength}
@@ -344,7 +347,6 @@ const Chart = memo(
           )}
           {[...axes.values()].reverse().map((item, index) => {
             const config = item.axisType == "x" ? axisX : item;
-
             return (
               <Axis
                 ref={(d) => {
@@ -353,30 +355,13 @@ const Chart = memo(
                 triggerClick={onInteraction}
                 xLineRange={xLineRange}
                 yLineRange={yLineRange}
-                isControlChart={isControlChart}
-                controlConfig={control}
+                controlInfo={controlInfo}
                 {...config}
                 key={index}
               />
             );
           })}
-          {/* 控制条逻辑 */}
-          {isControlChart && control && (
-            <Control
-              ref={controlEl}
-              props={{
-                control,
-                axes,
-                series,
-                xLineRange,
-                yLineRange,
-                marginTop,
-                axisX,
-                bandLength,
-              }}
-            ></Control>
-          )}
-          {showTooltip && !isControlChart && (
+          {showTooltip && !control && (
             <Indicator {...indicator} {...indicatorAttr} />
           )}
 
@@ -408,33 +393,27 @@ const Chart = memo(
             >
               {/* 控制图指示器部分 */}
               <g>
-                {isControlChart &&
-                  controlChartIndicatorList.map((item, index) => {
+                {control &&
+                  ctlIndicatorList.map((item, index) => {
                     const x = axisX.scaler(item.tick);
                     return (
                       <Indicator
                         key={index}
                         {...indicator}
                         {...{
-                          height: chartHeight,
+                          height: yLineRange,
                           width: indicatorWidth,
                           x: x - indicatorWidth / 2,
                         }}
-                        isControlChart={isControlChart}
+                        isControlChart={!!control}
                         xName={item.tick}
-                        setControlChartTooltipXName={
-                          setControlChartTooltipXName
-                        }
-                        setControlChartTooltipX={setControlChartTooltipX}
-                        setControlChartTooltipShow={setControlChartTooltipShow}
-                        controlChartIndicatorList={controlChartIndicatorList}
-                        setControlChartIndicatorList={
-                          setControlChartIndicatorList
-                        }
+                        setCtlTip={setCtlTip}
+                        ctlIndicatorList={ctlIndicatorList}
                       />
                     );
                   })}
               </g>
+              {/**绘制图表主体 */}
               {series.map(({ Component, yOrZ, ...config }, index) => {
                 const yAxis = axes.get(yOrZ);
                 return (
@@ -447,15 +426,10 @@ const Chart = memo(
                       xAxis={axisX}
                       yAxis={yAxis}
                       // 控制图部分，主要是为了，当鼠标悬浮在指示器上时，显示对应的tooltip
-                      isControlChart={isControlChart}
-                      setControlChartTooltipXName={setControlChartTooltipXName}
-                      setControlChartTooltipX={setControlChartTooltipX}
-                      setControlChartTooltipShow={setControlChartTooltipShow}
+                      isControlChart={!!control}
                       indicatorWidth={indicatorWidth}
                       triggerClick={onInteraction}
-                      setControlChartIndicatorList={
-                        setControlChartIndicatorList
-                      }
+                      setCtlTip={setCtlTip}
                     />
                   )
                 );
@@ -503,8 +477,27 @@ const Chart = memo(
               );
             })}
         </ChartContainer>
+        {/* 控制条逻辑 */}
+        {control && (
+          <Control
+            ref={controlEl}
+            actions={{
+              setX:setControlTranslate,
+              setWorking,
+              setControlInfo
+            }}
+            props={{
+              control,
+              axes,
+              series,
+              width,
+              top:chartHeight+marginTop,
+              bandLength,
+            }}
+          ></Control>
+        )}
         <Legend {...legend} filterData={filterData} series={series} />
-        {showTooltip && !isControlChart && (
+        {showTooltip && !control && (
           <Tooltip
             isVertical={isVertical}
             {...tooltip}
@@ -519,18 +512,15 @@ const Chart = memo(
           />
         )}
 
-        {controlChartTooltipShow && isControlChart && (
+        {showCtl && !!control && (
           <Tooltip
             isVertical={isVertical}
             {...tooltip}
             data={controlChartTooltipData}
-            x={
-              controlChartTooltipX -
-              (axisX.controlEnd - axisX.end) * curControlPercent.current
-            }
+            x={ ctlX -(axisX.controlEnd + axisX.start/cPercent - chartWidth) * curControlPercent.current}
             marginLeft={marginLeft}
             marginTop={marginTop}
-            tickName={controlChartTooltipXName}
+            tickName={ctlXName}
             series={series}
             width={width}
             height={height}