@easyv/charts 1.6.19 → 1.6.20

package/src/components/Control.jsx

@@ -1,241 +1,241 @@
-import React, { forwardRef, memo, useRef, useContext } from "react";
-import { chartContext } from "../context";
-import { scaleLinear } from "d3-scale";
-import { mathR } from "../utils";
-
-export default memo(forwardRef((props, ref) => {
-  const { 
-    actions:{ setX, setWorking, setControlWidth }, 
-    props: { 
-      control:{ height, color, gap, drag:{ color:dragColor }, margin:{ left } }, 
-      controlInfo:{ cWidth, cBarWidth },
-      axes, series, top, bandLength 
-    }
-  } = props;
-  const context = useContext(chartContext);
-  const scale = context.scale;
-  const xAxis = axes.get("x");
-  const barRef = useRef();
-
-  const barStyle={
-    position:"absolute",
-    top:0,
-    width:cBarWidth,
-    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 leftDown=()=>{
-    const transform = ref.current.style.transform;
-    let initX = 0;
-    let rawTranslateX = parseFloat(transform?transform.match(/\d+\.*\d*/)[0]:0);
-    const rightX = rawTranslateX+cBarWidth;
-    const move=(e)=>{
-      const { movementX:ex } = e;
-      const movementX = ex * scale.current[0];
-      initX = mathR(initX+movementX,[-rawTranslateX, rightX-rawTranslateX]);
-      setControlWidth((pre)=>{
-        const { cWidth, cBarWidth } = pre;
-        const nextBarWidth = mathR(cBarWidth-movementX,[1,rightX]);
-        return {
-          ...pre,
-          cBarWidth:nextBarWidth,
-          cPercent:nextBarWidth/cWidth,
-          cBarX:initX+rawTranslateX
-        }
-      }, true);
-    }
-    const up=()=>{
-      document.removeEventListener("mousemove",move);
-      document.removeEventListener("mouseup",up);
-    }
-    document.addEventListener("mousemove",move);
-    document.addEventListener("mouseup",up);
-  }
-  //左手手柄的移动端适配
-  const leftTouchStart = (e)=>{
-    const transform = ref.current.style.transform;
-    let rawTranslateX = parseFloat(transform?transform.match(/\d+\.*\d*/)[0]:0);
-    let initX = 0;
-    const rightX = rawTranslateX+cBarWidth;
-    let startX = e.touches[0].clientX;
-    let currentX = 0;
-    let movementX = 0;
-    const move = (e)=>{
-      e.preventDefault();
-      currentX = e.touches[0].clientX;
-      movementX = currentX - startX;
-      startX = currentX;
-      initX = mathR(initX+movementX,[-rawTranslateX, rightX-rawTranslateX]);
-      setControlWidth((pre)=>{
-        const { cWidth, cBarWidth } = pre;
-        const nextBarWidth = mathR(cBarWidth-movementX,[1,rightX]);
-        return {
-          ...pre,
-          cBarWidth:nextBarWidth,
-          cPercent:nextBarWidth/cWidth,
-          cBarX:initX+rawTranslateX
-        }
-      });
-    }
-    const up = (e) => {
-      document.removeEventListener("touchmove", move);
-      document.removeEventListener("touchend", up);
-    };
-    document.addEventListener("touchmove", move, {passive:false});
-    document.addEventListener("touchend", up);
-  }
-  //滑块的鼠标按下操作
-  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 * scale.current[0];
-      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);
-  }
-  //移动端适配
-  const touchStart=(e)=>{
-    const transform = ref.current.style.transform;
-    let startX = e.touches[0].clientX;
-    let currentX = 0;
-    let movementX = 0;
-    let rawTranslateX = parseFloat(transform?transform.match(/\d+\.*\d*/)[0]:0);
-    const mouseMoveHandle = (e)=>{
-      e.preventDefault();
-      currentX = e.touches[0].clientX;
-      movementX += currentX - startX;
-      startX = currentX;
-      setX(movementX + rawTranslateX, true);
-    }
-    const mouseUpHandle = (e) => {
-      setWorking(false);
-      document.removeEventListener("touchmove", mouseMoveHandle);
-      document.removeEventListener("touchend", mouseUpHandle);
-    };
-    document.addEventListener("touchmove", mouseMoveHandle, {passive:false});
-    document.addEventListener("touchend", mouseUpHandle);
-    setWorking(true);
-  }
-  //右手柄的鼠标按下逻辑
-  const rightDown=()=>{
-    const transform = ref.current.style.transform;
-    let rawTranslateX = parseFloat(transform?transform.match(/\d+\.*\d*/)[0]:0);
-    const move=(e)=>{
-      const { movementX:ex } = e;
-      const movementX = ex * scale.current[0];
-      setControlWidth((pre)=>{
-        const { cWidth, cBarWidth } = pre;
-        const maxWidth = cWidth-rawTranslateX;
-        const nextBarWidth = mathR(cBarWidth+movementX,[1,maxWidth]);
-        return {
-          ...pre,
-          cBarWidth:nextBarWidth,
-          cPercent:nextBarWidth/cWidth
-        }
-      });
-    }
-    const up=()=>{
-      document.removeEventListener("mousemove",move);
-      document.removeEventListener("mouseup",up);
-    }
-    document.addEventListener("mousemove",move);
-    document.addEventListener("mouseup",up);
-  }
-  //右手手柄的移动端适配
-  const rightTouchStart = (e)=>{
-    const transform = ref.current.style.transform;
-    let startX = e.touches[0].clientX;
-    let currentX = 0;
-    let movementX = 0;
-    let rawTranslateX = parseFloat(transform?transform.match(/\d+\.*\d*/)[0]:0);
-    const move = (e)=>{
-      e.preventDefault();
-      currentX = e.touches[0].clientX;
-      movementX = currentX - startX;
-      startX = currentX;
-      setControlWidth((pre)=>{
-        const { cWidth, cBarWidth } = pre;
-        const maxWidth = cWidth-rawTranslateX;
-        const nextBarWidth = mathR(cBarWidth+movementX,[1,maxWidth]);
-        return {
-          ...pre,
-          cBarWidth:nextBarWidth,
-          cPercent:nextBarWidth/cWidth
-        }
-      });
-    }
-    const up = (e) => {
-      document.removeEventListener("touchmove", move);
-      document.removeEventListener("touchend", up);
-    };
-    document.addEventListener("touchmove", move, {passive:false});
-    document.addEventListener("touchend", up);
-  }
-  return (
-    <div
-      style={{
-        width:cWidth,
-        height: height,
-        backgroundColor: color,
-        transform: `translate(${left}px,${top-height+gap}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)"}} onMouseDown={leftDown} onTouchStart={leftTouchStart}></div>
-        <div style={dragStyle} onMouseDown={down} onTouchStart={touchStart} ref={barRef}></div>
-        <div style={{...controllerStyle,transform:`translateX(6px)`}} onMouseDown={rightDown} onTouchStart={rightTouchStart}></div>
-      </div>
-    </div>
-  );
-}))
-
+import React, { forwardRef, memo, useRef, useContext } from "react";
+import { chartContext } from "../context";
+import { scaleLinear } from "d3-scale";
+import { mathR } from "../utils";
+
+export default memo(forwardRef((props, ref) => {
+  const { 
+    actions:{ setX, setWorking, setControlWidth }, 
+    props: { 
+      control:{ height, color, gap, drag:{ color:dragColor }, margin:{ left } }, 
+      controlInfo:{ cWidth, cBarWidth },
+      axes, series, top, bandLength 
+    }
+  } = props;
+  const context = useContext(chartContext);
+  const scale = context.scale;
+  const xAxis = axes.get("x");
+  const barRef = useRef();
+
+  const barStyle={
+    position:"absolute",
+    top:0,
+    width:cBarWidth,
+    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 leftDown=()=>{
+    const transform = ref.current.style.transform;
+    let initX = 0;
+    let rawTranslateX = parseFloat(transform?transform.match(/\d+\.*\d*/)[0]:0);
+    const rightX = rawTranslateX+cBarWidth;
+    const move=(e)=>{
+      const { movementX:ex } = e;
+      const movementX = ex * scale.current[0];
+      initX = mathR(initX+movementX,[-rawTranslateX, rightX-rawTranslateX]);
+      setControlWidth((pre)=>{
+        const { cWidth, cBarWidth } = pre;
+        const nextBarWidth = mathR(cBarWidth-movementX,[1,rightX]);
+        return {
+          ...pre,
+          cBarWidth:nextBarWidth,
+          cPercent:nextBarWidth/cWidth,
+          cBarX:initX+rawTranslateX
+        }
+      }, true);
+    }
+    const up=()=>{
+      document.removeEventListener("mousemove",move);
+      document.removeEventListener("mouseup",up);
+    }
+    document.addEventListener("mousemove",move);
+    document.addEventListener("mouseup",up);
+  }
+  //左手手柄的移动端适配
+  const leftTouchStart = (e)=>{
+    const transform = ref.current.style.transform;
+    let rawTranslateX = parseFloat(transform?transform.match(/\d+\.*\d*/)[0]:0);
+    let initX = 0;
+    const rightX = rawTranslateX+cBarWidth;
+    let startX = e.touches[0].clientX;
+    let currentX = 0;
+    let movementX = 0;
+    const move = (e)=>{
+      e.preventDefault();
+      currentX = e.touches[0].clientX;
+      movementX = currentX - startX;
+      startX = currentX;
+      initX = mathR(initX+movementX,[-rawTranslateX, rightX-rawTranslateX]);
+      setControlWidth((pre)=>{
+        const { cWidth, cBarWidth } = pre;
+        const nextBarWidth = mathR(cBarWidth-movementX,[1,rightX]);
+        return {
+          ...pre,
+          cBarWidth:nextBarWidth,
+          cPercent:nextBarWidth/cWidth,
+          cBarX:initX+rawTranslateX
+        }
+      });
+    }
+    const up = (e) => {
+      document.removeEventListener("touchmove", move);
+      document.removeEventListener("touchend", up);
+    };
+    document.addEventListener("touchmove", move, {passive:false});
+    document.addEventListener("touchend", up);
+  }
+  //滑块的鼠标按下操作
+  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 * scale.current[0];
+      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);
+  }
+  //移动端适配
+  const touchStart=(e)=>{
+    const transform = ref.current.style.transform;
+    let startX = e.touches[0].clientX;
+    let currentX = 0;
+    let movementX = 0;
+    let rawTranslateX = parseFloat(transform?transform.match(/\d+\.*\d*/)[0]:0);
+    const mouseMoveHandle = (e)=>{
+      e.preventDefault();
+      currentX = e.touches[0].clientX;
+      movementX += currentX - startX;
+      startX = currentX;
+      setX(movementX + rawTranslateX, true);
+    }
+    const mouseUpHandle = (e) => {
+      setWorking(false);
+      document.removeEventListener("touchmove", mouseMoveHandle);
+      document.removeEventListener("touchend", mouseUpHandle);
+    };
+    document.addEventListener("touchmove", mouseMoveHandle, {passive:false});
+    document.addEventListener("touchend", mouseUpHandle);
+    setWorking(true);
+  }
+  //右手柄的鼠标按下逻辑
+  const rightDown=()=>{
+    const transform = ref.current.style.transform;
+    let rawTranslateX = parseFloat(transform?transform.match(/\d+\.*\d*/)[0]:0);
+    const move=(e)=>{
+      const { movementX:ex } = e;
+      const movementX = ex * scale.current[0];
+      setControlWidth((pre)=>{
+        const { cWidth, cBarWidth } = pre;
+        const maxWidth = cWidth-rawTranslateX;
+        const nextBarWidth = mathR(cBarWidth+movementX,[1,maxWidth]);
+        return {
+          ...pre,
+          cBarWidth:nextBarWidth,
+          cPercent:nextBarWidth/cWidth
+        }
+      });
+    }
+    const up=()=>{
+      document.removeEventListener("mousemove",move);
+      document.removeEventListener("mouseup",up);
+    }
+    document.addEventListener("mousemove",move);
+    document.addEventListener("mouseup",up);
+  }
+  //右手手柄的移动端适配
+  const rightTouchStart = (e)=>{
+    const transform = ref.current.style.transform;
+    let startX = e.touches[0].clientX;
+    let currentX = 0;
+    let movementX = 0;
+    let rawTranslateX = parseFloat(transform?transform.match(/\d+\.*\d*/)[0]:0);
+    const move = (e)=>{
+      e.preventDefault();
+      currentX = e.touches[0].clientX;
+      movementX = currentX - startX;
+      startX = currentX;
+      setControlWidth((pre)=>{
+        const { cWidth, cBarWidth } = pre;
+        const maxWidth = cWidth-rawTranslateX;
+        const nextBarWidth = mathR(cBarWidth+movementX,[1,maxWidth]);
+        return {
+          ...pre,
+          cBarWidth:nextBarWidth,
+          cPercent:nextBarWidth/cWidth
+        }
+      });
+    }
+    const up = (e) => {
+      document.removeEventListener("touchmove", move);
+      document.removeEventListener("touchend", up);
+    };
+    document.addEventListener("touchmove", move, {passive:false});
+    document.addEventListener("touchend", up);
+  }
+  return (
+    <div
+      style={{
+        width:cWidth,
+        height: height,
+        backgroundColor: color,
+        transform: `translate(${left}px,${top-height+gap}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)"}} onMouseDown={leftDown} onTouchStart={leftTouchStart}></div>
+        <div style={dragStyle} onMouseDown={down} onTouchStart={touchStart} ref={barRef}></div>
+        <div style={{...controllerStyle,transform:`translateX(6px)`}} onMouseDown={rightDown} onTouchStart={rightTouchStart}></div>
+      </div>
+    </div>
+  );
+}))
+

package/src/components/ExtentData.js

@@ -1,18 +1,18 @@
-/**
- * 计算X/Y/Z轴的domain，具体的逻辑在useExtentData(HOC)
- */
-import { memo } from 'react';
-import { useExtentData } from '../hooks';
-export default (Component) =>
-  memo(({ config: { axes, series, ...config }, data, ...props }) => {
-    return <Component
-      {...props}
-      config={{
-        ...config,
-        axes: useExtentData({ series, axes, data }),
-        series,
-      }}
-      data={data}
-    />
-  }
-);
+/**
+ * 计算X/Y/Z轴的domain，具体的逻辑在useExtentData(HOC)
+ */
+import { memo } from 'react';
+import { useExtentData } from '../hooks';
+export default (Component) =>
+  memo(({ config: { axes, series, ...config }, data, ...props }) => {
+    return <Component
+      {...props}
+      config={{
+        ...config,
+        axes: useExtentData({ series, axes, data }),
+        series,
+      }}
+      data={data}
+    />
+  }
+);

package/src/components/Indicator.js

@@ -1,58 +1,59 @@
-/**
- * 轴类图表移上去的指示框背景
- */
-import { useState } from "react";
-export default ({
-  color,
-  height,
-  width,
-  x = 0,
-  y = 0,
-  isControlChart = false,
-  xName = null,
-  ctlIndicatorList,
-  setCtlTip
-}) => {
-  let isShow = true;
-  if (isControlChart && ctlIndicatorList) {
-    isShow = ctlIndicatorList.find(
-      (item) => item.tick === xName
-    ).isShow;
-  }
-  return (
-    <rect
-      width={width}
-      height={height}
-      x={x}
-      onMouseEnter={() => {
-        if (isControlChart) {
-          setCtlTip((pre)=>({
-            show:true, x:x+width/2, xName,
-            indicatorList:pre.indicatorList.map((item)=>{
-              if (item.tick === xName) {
-                return { ...item, isShow: true };
-              } else {
-                return item;
-              }
-            })
-          }))
-        }
-      }}
-      onMouseLeave={() => {
-        if (isControlChart) {
-          setCtlTip((pre)=>({
-            show:false,
-            x:undefined,
-            xName:undefined,
-            indicatorList:pre.indicatorList.map((item)=>{
-              return { ...item, isShow:false }
-            })
-          }))
-        }
-      }}
-      fill={isShow ? color : "transparent"}
-      y={y}
-      stroke="none"
-    />
-  );
-};
+/**
+ * 轴类图表移上去的指示框背景
+ */
+import { useState } from "react";
+export default ({
+  color,
+  height,
+  width,
+  x = 0,
+  y = 0,
+  isControlChart = false,
+  xName = null,
+  ctlIndicatorList,
+  setCtlTip,
+  manual
+}) => {
+  let isShow = true;
+  if (isControlChart && ctlIndicatorList) {
+    isShow = ctlIndicatorList.find(
+      (item) => item.tick === xName
+    ).isShow;
+  }
+  return manual?(
+    <rect
+      width={width}
+      height={height}
+      x={x}
+      onMouseEnter={() => {
+        if (isControlChart) {
+          setCtlTip((pre)=>({
+            show:true, x:x+width/2, xName,
+            indicatorList:pre.indicatorList.map((item)=>{
+              if (item.tick === xName) {
+                return { ...item, isShow: true };
+              } else {
+                return item;
+              }
+            })
+          }))
+        }
+      }}
+      onMouseLeave={() => {
+        if (isControlChart) {
+          setCtlTip((pre)=>({
+            show:false,
+            x:undefined,
+            xName:undefined,
+            indicatorList:pre.indicatorList.map((item)=>{
+              return { ...item, isShow:false }
+            })
+          }))
+        }
+      }}
+      fill={isShow ? color : "transparent"}
+      y={y}
+      stroke="none"
+    />
+  ):"";
+};