@easyv/charts 1.4.22 → 1.4.25

package/src/components/CartesianChart.js

@@ -8,10 +8,11 @@ import React, {
   useRef,
   useContext,
   useCallback,
-  useEffect
-} from 'react';
-import { useAxes, useTooltip, useCarouselAxisX, useAiData } from '../hooks';
-import { chartContext } from '../context';
+  useEffect,
+  forwardRef,
+} from "react";
+import { useAxes, useTooltip, useCarouselAxisX } from "../hooks";
+import { chartContext } from "../context";
 import {
   ChartContainer,
   Legend,
@@ -27,7 +28,9 @@ import {
   Label,
   Mapping,
   BaseLine,
-} from '.';
+  Control,
+} from ".";
+import { getMousePos } from "../utils";
 
 const Chart = memo(
   ({
@@ -46,7 +49,7 @@ const Chart = memo(
       bandLength,
       tooltip,
       baseLine: {
-        orientation: baseLineOri = '',
+        orientation: baseLineOri = "",
         config: baseLineConfig = {},
         data: baseLineData = [],
       },
@@ -54,7 +57,9 @@ const Chart = memo(
         config: tooltipConfig = {},
         config: { auto, manual, indicator = {} } = {},
       } = {},
-      brush
+      brush,
+      isControlChart = false,
+      control = null,
     },
     style,
     originData,
@@ -71,11 +76,22 @@ const Chart = memo(
       onEmit,
     } = useContext(chartContext);
     const svg = useRef();
-    const axes = useAxes({ axes: axesConfig, context });
+    const axes = useAxes({
+      axes: axesConfig,
+      context,
+      isControlChart,
+      control,
+    });
     const aiData = aiFormatter?aiFormatter(originData, axes, series):useAiData(originData, axes, series);
-    const axisX = useCarouselAxisX(axes.get('x'), animation, isHover);
-    const xLineRange = width-marginLeft-marginRight;
-    const yLineRange = height-marginTop-marginBottom;
+    const axisX = useCarouselAxisX(
+      axes.get("x"),
+      animation,
+      isHover,
+      isControlChart,
+      control
+    );
+    const xLineRange = width - marginLeft - marginRight;
+    const yLineRange = height - marginTop - marginBottom;
     
     useEffect(()=>{
       if(aiData.length){
@@ -108,7 +124,8 @@ const Chart = memo(
       config: tooltipConfig,
     });
     const tooltipData = useMemo(
-      () => tickName !== undefined && originData.filter((d) => d.x === tickName),
+      () =>
+        tickName !== undefined && originData.filter((d) => d.x === tickName),
       [tickName, originData]
     );
 
@@ -118,7 +135,7 @@ const Chart = memo(
       (auto || manual)
     );
 
-    const isVertical = axisX.direction === 'vertical';
+    const isVertical = axisX.direction === "vertical";
 
     const indicatorWidth = (indicator.width * axisX.step) / 100;
     const position = axisX.scaler(tickName) - indicatorWidth / 2;
@@ -136,11 +153,160 @@ const Chart = memo(
         const { data } = e.currentTarget.dataset;
         const _data = JSON.parse(data);
         triggerOnRelative(_data);
-        onEmit('click', _data);
+        onEmit("click", _data);
       },
       [triggerOnRelative, onEmit]
     );
-    
+
+    /**
+     * 控制图相关
+     */
+    const controlEl = useRef();
+    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;
+        };
+
+        let animationHoverStop;
+        const setAnimationHoverStopTrue = () => {
+          animationHoverStop = true;
+        };
+        const setAnimationHoverStopFalse = () => {
+          animationHoverStop = false;
+        };
+        svg.current.addEventListener("mouseenter", setAnimationHoverStopTrue);
+        svg.current.addEventListener("mouseleave", setAnimationHoverStopFalse);
+
+        //控制图轮播动画逻辑
+        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];
+                }
+                setControlTranslate(v);
+              }
+              animationId = window.requestAnimationFrame(animation);
+            } else {
+              index = index < times ? index + 1 : 0;
+              initTime = 0;
+              animationId = window.requestAnimationFrame(animation);
+            }
+          };
+          animationId = window.requestAnimationFrame(animation);
+        }
+        controlEl.current.addEventListener("mousedown", mouseDownHandle);
+
+        return () => {
+          controlEl.current.removeEventListener("mousedown", mouseDownHandle);
+          svg.current.removeEventListener(
+            "mouseenter",
+            setAnimationHoverStopTrue
+          );
+          svg.current.removeEventListener(
+            "mouseleave",
+            setAnimationHoverStopFalse
+          );
+
+          window.cancelAnimationFrame(animationId);
+        };
+      }
+    }, [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,
+        };
+      })
+    );
     return (
       <>
         <ChartContainer
@@ -149,16 +315,22 @@ const Chart = memo(
           height={height}
           marginLeft={marginLeft}
           marginTop={marginTop}
-          onMouseEnter={()=>{setIsHover(true)}}
-          onMouseMove={setIndex}
-          onMouseLeave={(e)=>{setIsHover(false);setIndex(e)}}
+          onMouseEnter={() => {
+            setIsHover(true);
+          }}
+          onMouseLeave={(e) => {
+            setIsHover(false);
+            setIndex(e);
+          }}
           ref={svg}
         >
           {background && (
-            <foreignObject style={{
-              width:xLineRange,
-              height:yLineRange
-            }}>
+            <foreignObject
+              style={{
+                width: xLineRange,
+                height: yLineRange,
+              }}
+            >
               <svg width="100%" height="100%">
                 <Background
                   length={isVertical ? chartWidth : chartHeight}
@@ -169,19 +341,100 @@ const Chart = memo(
               </svg>
             </foreignObject>
           )}
-          {showTooltip && <Indicator {...indicator} {...indicatorAttr} />}
-          <foreignObject style={isVertical?{
-               width:xLineRange+marginRight+marginLeft,
-               height:yLineRange,
-               transform:`translateX(${-marginRight}px)`,
-            }:{
-            width:xLineRange,
-            height:yLineRange+marginTop+marginBottom,
-            transform:`translateY(${-marginTop}px)`,
-            // overflow:'visible'
-            // paddingTop:marginTop
-          }}>
-            <svg width="100%" height="100%" style={{overflow:"visible",transform:isVertical?`translateX(${marginRight}px)`:`translateY(${marginTop}px)`}}>
+          {[...axes.values()].reverse().map((item, index) => {
+            const config = item.axisType == "x" ? axisX : item;
+
+            return (
+              <Axis
+                ref={(d) => {
+                  axisElList.current[index] = d;
+                }}
+                triggerClick={onInteraction}
+                xLineRange={xLineRange}
+                yLineRange={yLineRange}
+                isControlChart={isControlChart}
+                controlConfig={control}
+                {...config}
+                key={index}
+              />
+            );
+          })}
+          {/* 控制条逻辑 */}
+          {isControlChart && control && (
+            <Control
+              ref={controlEl}
+              props={{
+                control,
+                axes,
+                series,
+                xLineRange,
+                yLineRange,
+                marginTop,
+                axisX,
+                bandLength,
+              }}
+            ></Control>
+          )}
+          {showTooltip && !isControlChart && (
+            <Indicator {...indicator} {...indicatorAttr} />
+          )}
+
+          <foreignObject
+            style={
+              isVertical
+                ? {
+                    width: xLineRange + marginRight + marginLeft,
+                    height: yLineRange,
+                    transform: `translateX(${-marginRight}px)`,
+                  }
+                : {
+                    width: xLineRange,
+                    height: yLineRange + marginTop + marginBottom,
+                    transform: `translateY(${-marginTop}px)`,
+                  }
+            }
+          >
+            <svg
+              width="100%"
+              height="100%"
+              ref={seriesEl}
+              style={{
+                overflow: "visible",
+                transform: isVertical
+                  ? `translateX(${marginRight}px)`
+                  : `translateY(${marginTop}px)`,
+              }}
+            >
+              {/* 控制图指示器部分 */}
+              <g>
+                {isControlChart &&
+                  controlChartIndicatorList.map((item, index) => {
+                    const x = axisX.scaler(item.tick);
+                    return (
+                      <Indicator
+                        key={index}
+                        {...indicator}
+                        {...{
+                          height: chartHeight,
+                          width: indicatorWidth,
+                          x: x - indicatorWidth / 2,
+                        }}
+                        isControlChart={isControlChart}
+                        xName={item.tick}
+                        setControlChartTooltipXName={
+                          setControlChartTooltipXName
+                        }
+                        setControlChartTooltipX={setControlChartTooltipX}
+                        setControlChartTooltipShow={setControlChartTooltipShow}
+                        controlChartIndicatorList={controlChartIndicatorList}
+                        setControlChartIndicatorList={
+                          setControlChartIndicatorList
+                        }
+                      />
+                    );
+                  })}
+              </g>
+
               {series.map(({ Component, yOrZ, ...config }, index) => {
                 const yAxis = axes.get(yOrZ);
                 return (
@@ -193,11 +446,21 @@ const Chart = memo(
                       bandLength={bandLength}
                       xAxis={axisX}
                       yAxis={yAxis}
+                      // 控制图部分，主要是为了，当鼠标悬浮在指示器上时，显示对应的tooltip
+                      isControlChart={isControlChart}
+                      setControlChartTooltipXName={setControlChartTooltipXName}
+                      setControlChartTooltipX={setControlChartTooltipX}
+                      setControlChartTooltipShow={setControlChartTooltipShow}
+                      indicatorWidth={indicatorWidth}
                       triggerClick={onInteraction}
+                      setControlChartIndicatorList={
+                        setControlChartIndicatorList
+                      }
                     />
                   )
                 );
-              })} 
+              })}
+
               {series.map(({ Component, yOrZ, ...config }, index) => {
                 const yAxis = axes.get(yOrZ);
                 return (
@@ -215,12 +478,7 @@ const Chart = memo(
               })}
             </svg>
           </foreignObject>
-          {[...axes.values()].reverse().map((item, index) => {         
-            const config = item.axisType == 'x' ? axisX : item;
-            return (
-              <Axis triggerClick={onInteraction} xLineRange={xLineRange} yLineRange={yLineRange} {...config} key={index} />
-            );
-          })}
+
           {baseLineData &&
             baseLineData.length > 0 &&
             baseLineData.map((item, index) => {
@@ -246,7 +504,7 @@ const Chart = memo(
             })}
         </ChartContainer>
         <Legend {...legend} filterData={filterData} series={series} />
-        {showTooltip && (
+        {showTooltip && !isControlChart && (
           <Tooltip
             isVertical={isVertical}
             {...tooltip}
@@ -260,6 +518,24 @@ const Chart = memo(
             height={height}
           />
         )}
+
+        {controlChartTooltipShow && isControlChart && (
+          <Tooltip
+            isVertical={isVertical}
+            {...tooltip}
+            data={controlChartTooltipData}
+            x={
+              controlChartTooltipX -
+              (axisX.controlEnd - axisX.end) * curControlPercent.current
+            }
+            marginLeft={marginLeft}
+            marginTop={marginTop}
+            tickName={controlChartTooltipXName}
+            series={series}
+            width={width}
+            height={height}
+          />
+        )}
         {brush && <Brush config={brush} width={width} />}
       </>
     );

package/src/components/ChartContainer.tsx

@@ -7,7 +7,7 @@ import React, {
   ReactChild,
   ReactEventHandler,
   LegacyRef,
-} from 'react';
+} from "react";
 const event = () => {};
 
 type Props = {
@@ -41,10 +41,10 @@ export default memo(
         onMouseOut = event,
       }: Props,
       ref: LegacyRef<SVGSVGElement>
-    ) => 
-      {
-        return <svg
-          className='__easyv-svg'
+    ) => {
+      return (
+        <svg
+          className="__easyv-svg"
           width={width}
           height={height}
           onMouseEnter={onMouseEnter}
@@ -53,12 +53,19 @@ export default memo(
           onClick={onClick}
           onMouseMove={onMouseMove}
           ref={ref}
-          style={{ position: 'absolute', width, height, ...style }}
+          style={{
+            overflow: "visible",
+            position: "absolute",
+            width,
+            height,
+            ...style,
+          }}
         >
-          <g transform={'translate(' + marginLeft + ', ' + marginTop + ')'}>
+          <g transform={"translate(" + marginLeft + ", " + marginTop + ")"}>
             {children}
           </g>
         </svg>
-      }
+      );
+    }
   )
 );

package/src/components/Control.jsx

@@ -0,0 +1,51 @@
+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 }
+  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>
+    </>
+  );
+}))
+

package/src/components/Indicator.js

@@ -1,13 +1,61 @@
 /**
  * 轴类图表移上去的指示框背景
  */
-export default ({ color, height, width, x = 0, y = 0 }) => (
-  <rect
-    width={width}
-    height={height}
-    x={x}
-    y={y}
-    fill={color}
-    stroke='none'
-  />
-);
+import { useState } from "react";
+export default ({
+  color,
+  height,
+  width,
+  x = 0,
+  y = 0,
+  isControlChart = false,
+  xName = null,
+  setControlChartTooltipShow = null,
+  setControlChartTooltipXName = null,
+  setControlChartTooltipX = null,
+  setControlChartIndicatorList = null,
+  controlChartIndicatorList = null,
+}) => {
+  let isShow = true;
+  if (isControlChart && controlChartIndicatorList) {
+    isShow = controlChartIndicatorList.find(
+      (item) => item.tick === xName
+    ).isShow;
+  }
+  return (
+    <rect
+      width={width}
+      height={height}
+      x={x}
+      onMouseEnter={() => {
+        if (isControlChart) {
+          setControlChartIndicatorList((v) => {
+            return v.map((item) => {
+              if (item.tick === xName) {
+                return { ...item, isShow: true };
+              } else {
+                return item;
+              }
+            });
+          });
+          setControlChartTooltipShow(true);
+          setControlChartTooltipXName(xName);
+          setControlChartTooltipX(x);
+        }
+      }}
+      onMouseLeave={() => {
+        if (isControlChart) {
+          setControlChartIndicatorList((v) =>
+            v.map((item) => ({ ...item, isShow: false }))
+          );
+          setControlChartTooltipShow(false);
+          setControlChartTooltipXName(undefined);
+          setControlChartTooltipX(undefined);
+        }
+      }}
+      fill={isShow ? color : "transparent"}
+      y={y}
+      stroke="none"
+    />
+  );
+};

package/src/components/Label.js

@@ -19,6 +19,13 @@ export default memo(
     xAxis: { scaler: xScaler, step, direction },
     yAxis: { scaler: yScaler, isClipAxis, clipValue },
     triggerClick,
+    //控制图相关
+    indicatorWidth,
+    setControlChartTooltipShow,
+    setControlChartTooltipX,
+    setControlChartTooltipXName,
+    isControlChart = false,
+    setControlChartIndicatorList = null,
   }) => {
     const lineType = config.hasOwnProperty("line"); //  堆叠处理
     const showIcon = icon && icon.show;
@@ -97,6 +104,32 @@ export default memo(
               <g
                 key={i}
                 onClick={triggerClick}
+                onMouseEnter={() => {
+                  if (isControlChart) {
+                    setControlChartIndicatorList((v) => {
+                      return v.map((item) => {
+                        if (item.tick === data.x) {
+                          return { ...item, isShow: true };
+                        } else {
+                          return item;
+                        }
+                      });
+                    });
+                    setControlChartTooltipShow(true);
+                    setControlChartTooltipX(xScaler(x) - indicatorWidth / 2);
+                    setControlChartTooltipXName(data.x);
+                  }
+                }}
+                onMouseLeave={() => {
+                  if (isControlChart) {
+                    setControlChartIndicatorList((v) =>
+                      v.map((item) => ({ ...item, isShow: false }))
+                    );
+                    setControlChartTooltipShow(false);
+                    setControlChartTooltipXName(undefined);
+                    setControlChartTooltipX(undefined);
+                  }
+                }}
                 style={{ cursor: "pointer" }}
                 data-data={JSON.stringify(data)}
               >

package/src/components/Marquee.tsx

@@ -40,7 +40,7 @@ export default memo(forwardRef((props:marquee, ref:any) => {
     observe.current = new IntersectionObserver(
       function (entries:any) {
         let entrie = entries[0];
-        if (entrie.boundingClientRect.width < entrie.rootBounds.width) {
+        if (entrie.boundingClientRect.width <= entrie.rootBounds.width) {
           //表示文字全部可视
           cancelAnimationFrame(timer.current||0);
           target.current!.style.transform = "translate(0px,0px)"; //重置偏移