@easyv/charts 1.4.21 → 1.4.24

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,useAiData } 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){
@@ -89,7 +105,7 @@ const Chart = memo(
         }
       }
       return ()=>{
-        delete window.aiData[id];
+        window.aiData && window.aiData[id] && delete window.aiData[id];
       }
     },[JSON.stringify(aiData),id]);
 
@@ -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/Chart.js

@@ -1,99 +1,99 @@
-/**
- * 总入口，通过外面传进来的type来确定渲染哪种图表，饼环图表为“pie”，否则为轴类图表
- */
-import React, { memo, useMemo, createRef, useCallback } from 'react';
-import { chartContext } from '../context';
-import { PieChart, CartesianChart } from '.';
-
-const getCallbackData = (callbacks, data) => {
-  let callbackData;
-  if (callbacks && Array.isArray(callbacks) && callbacks.length && data) {
-    callbackData = {};
-    callbacks.forEach(({ origin, target }) => {
-      callbackData[target] = data[origin];
-    });
-  }
-  return callbackData;
-};
-
-const Chart = memo(
-  ({
-    id,
-    type,
-    config,
-    config: {
-      chart: {
-        dimension: {
-          chartDimension: { height, width },
-        },
-        margin: { marginRight, marginLeft, marginBottom, marginTop },
-      },
-      interaction,
-    },
-    data,
-    onRelative,
-    emit,
-    emitEvent,
-    ...props
-  }) => {
-    const svg = createRef();
-    const chartWidth = width - marginLeft - marginRight;
-    const chartHeight = height - marginTop - marginBottom;
-
-    const triggerOnRelative = useCallback(
-      (data) => {
-        if (!interaction) return;
-        const { callbacks, remoteControls } = interaction;
-        const callbackData = getCallbackData(callbacks, data);
-        if (callbackData) {
-          onRelative && onRelative(id, callbackData);
-          remoteControls &&
-            emitEvent &&
-            remoteControls.forEach((o) => {
-              const control = JSON.parse(o.control);
-              if (
-                control.screen &&
-                control.type &&
-                control.type === 'callback'
-              ) {
-                emitEvent({
-                  screen: control.screen,
-                  type: 'callback',
-                  callbackData,
-                });
-              }
-            });
-        }
-      },
-      [ JSON.stringify(interaction)]
-    );
-
-    const onEmit = useCallback(
-      (type = 'click', data) => emit && emit(type, data),
-      [emit]
-    );
-
-    const context = useMemo(
-      () => ({
-        id,
-        width: chartWidth,
-        height: chartHeight,
-        triggerOnRelative,
-        svg,
-        onEmit,
-      }),
-      [id, chartWidth, chartHeight, triggerOnRelative, svg, onEmit]
-    );
-    return (
-      <chartContext.Provider value={context}>
-        {type == 'pie' ? (
-          <PieChart id={id} config={config} data={data} {...props} />
-        ) : (
-          <CartesianChart id={id} config={config} data={data} {...props} />
-        )}
-      </chartContext.Provider>
-    );
-  }
-);
-
-export default Chart;
+/**
+ * 总入口，通过外面传进来的type来确定渲染哪种图表，饼环图表为“pie”，否则为轴类图表
+ */
+import React, { memo, useMemo, createRef, useCallback } from 'react';
+import { chartContext } from '../context';
+import { PieChart, CartesianChart } from '.';
+
+const getCallbackData = (callbacks, data) => {
+  let callbackData;
+  if (callbacks && Array.isArray(callbacks) && callbacks.length && data) {
+    callbackData = {};
+    callbacks.forEach(({ origin, target }) => {
+      callbackData[target] = data[origin];
+    });
+  }
+  return callbackData;
+};
+
+const Chart = memo(
+  ({
+    id,
+    type,
+    config,
+    config: {
+      chart: {
+        dimension: {
+          chartDimension: { height, width },
+        },
+        margin: { marginRight, marginLeft, marginBottom, marginTop },
+      },
+      interaction,
+    },
+    data,
+    onRelative,
+    emit,
+    emitEvent,
+    ...props
+  }) => {
+    const svg = createRef();
+    const chartWidth = width - marginLeft - marginRight;
+    const chartHeight = height - marginTop - marginBottom;
+
+    const triggerOnRelative = useCallback(
+      (data) => {
+        if (!interaction) return;
+        const { callbacks, remoteControls } = interaction;
+        const callbackData = getCallbackData(callbacks, data);
+        if (callbackData) {
+          onRelative && onRelative(id, callbackData);
+          remoteControls &&
+            emitEvent &&
+            remoteControls.forEach((o) => {
+              const control = JSON.parse(o.control);
+              if (
+                control.screen &&
+                control.type &&
+                control.type === 'callback'
+              ) {
+                emitEvent({
+                  screen: control.screen,
+                  type: 'callback',
+                  callbackData,
+                });
+              }
+            });
+        }
+      },
+      [ JSON.stringify(interaction)]
+    );
+
+    const onEmit = useCallback(
+      (type = 'click', data) => emit && emit(type, data),
+      [emit]
+    );
+
+    const context = useMemo(
+      () => ({
+        id,
+        width: chartWidth,
+        height: chartHeight,
+        triggerOnRelative,
+        svg,
+        onEmit,
+      }),
+      [id, chartWidth, chartHeight, triggerOnRelative, svg, onEmit]
+    );
+    return (
+      <chartContext.Provider value={context}>
+        {type == 'pie' ? (
+          <PieChart id={id} config={config} data={data} {...props} />
+        ) : (
+          <CartesianChart id={id} config={config} data={data} {...props} />
+        )}
+      </chartContext.Provider>
+    );
+  }
+);
+
+export default Chart;