@easyv/charts 1.4.35 → 1.4.36

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}

package/src/components/Control.jsx

@@ -2,50 +2,94 @@ import React, { forwardRef, memo, useRef } from "react";
 import { scaleLinear } from "d3-scale";
 
 export default memo(forwardRef((props, ref) => {
-  const { props: { control, axes, series, xLineRange, yLineRange, marginTop, axisX, bandLength } } = props;
-  const _axisX = { ...axisX, scaler: axisX.controlDragScaler }
+  const { 
+    actions:{ setX, setWorking, setControlInfo }, 
+    props: { 
+      control:{ height, color, drag:{ color:dragColor, width:dragWidth }, margin:{ left, right } }, axes, series, width, top, bandLength 
+    }
+  } = props;
+  const barWidth = width-left-right;
+  const xAxis = axes.get("x");
+  const barRef = useRef();
+
+  const barStyle={
+    position:"absolute",
+    top:0,
+    width:barWidth*dragWidth/100,
+    display:"flex",
+    justifyContent:"space-between",
+    background:dragColor
+  }
+  const dragStyle={
+    height,
+    flex:1,
+    cursor:"move"
+  }
+  const controllerStyle={
+    position:"relative",
+    width:12,
+    height,
+    padding:"0 5px",
+    cursor:"col-resize",
+    background:"rgb(2, 176, 249)",
+    WebkitBackgroundClip:"content-box",
+  }
+  const down=()=>{
+    const transform = ref.current.style.transform;
+    let movementX = 0;
+    let rawTranslateX = parseFloat(transform?transform.match(/\d+\.*\d*/)[0]:0);
+    const mouseMoveHandle = (e) => {
+      //当前位移的距离
+      movementX += e.movementX;
+      setX(movementX + rawTranslateX,true);
+    };
+    const mouseUpHandle = (e) => {
+      setWorking(false);
+      document.removeEventListener("mousemove", mouseMoveHandle);
+      document.removeEventListener("mouseup", mouseUpHandle);
+    };
+    document.addEventListener("mousemove", mouseMoveHandle);
+    document.addEventListener("mouseup", mouseUpHandle);
+    setWorking(true);
+  }
   return (
-    <>
-      <foreignObject
-        style={{
-          width: xLineRange,
-          height: control.height,
-          backgroundColor: control.color,
-          // padding: ` 0 ${control.margin.left}px 0  ${control.margin.right}px`,
-          transform: `translateY(${yLineRange + marginTop}px)`,
-        }}
-      >
-        <svg width="100%" height="100%">
-          {series.map(({ Component, yOrZ, ...config }, index) => {
-            const yAxis = axes.get(yOrZ);
-            const cloneYAxis = JSON.parse(JSON.stringify(yAxis));
-            //todo range
-            cloneYAxis.scaler = scaleLinear()
-              .domain(yAxis.domain)
-              .range([control.height, 0]);
-            return (
-              yAxis &&
-              Component && (
-                <Component
-                  key={index}
-                  {...config}
-                  bandLength={bandLength}
-                  xAxis={_axisX}
-                  yAxis={cloneYAxis}
-                />
-              )
-            );
-          })}
-          {/* 控制条 */}
-          <rect
-            ref={ref}
-            height={control.height}
-            width={(xLineRange * control.drag.width) / 100}
-            fill={control.drag.color}
-          ></rect>
-        </svg>
-      </foreignObject>
-    </>
+    <div
+      style={{
+        width: barWidth,
+        height: height,
+        backgroundColor: color,
+        transform: `translate(${left}px,${top}px)`,
+      }}
+    >
+      <svg width="100%" height="100%">
+        {series.map(({ Component, yOrZ, ...config }, index) => {
+          const yAxis = axes.get(yOrZ);
+          const cloneYAxis = JSON.parse(JSON.stringify(yAxis));
+          //todo range
+          cloneYAxis.scaler = scaleLinear()
+            .domain(yAxis.domain)
+            .range([height, 0]);
+          return (
+            yAxis &&
+            Component && (
+              <Component
+                key={index}
+                {...config}
+                bandLength={bandLength}
+                xAxis={xAxis}
+                yAxis={cloneYAxis}
+              />
+            )
+          );
+        })}
+      </svg>
+      {/* 控制条 */}
+      <div ref={ref} style={barStyle}>
+        {/* <div style={{...controllerStyle,transform:"translateX(-6px)"}}></div> */}
+        <div style={dragStyle} onMouseDown={down} ref={barRef}></div>
+        {/* <div style={{...controllerStyle,transform:`translateX(6px)`}}></div> */}
+      </div>
+    </div>
   );
 }))