@easyv/charts 1.4.34 → 1.4.36

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>
   );
 }))
 

package/src/components/Indicator.js

@@ -10,15 +10,12 @@ export default ({
   y = 0,
   isControlChart = false,
   xName = null,
-  setControlChartTooltipShow = null,
-  setControlChartTooltipXName = null,
-  setControlChartTooltipX = null,
-  setControlChartIndicatorList = null,
-  controlChartIndicatorList = null,
+  ctlIndicatorList,
+  setCtlTip
 }) => {
   let isShow = true;
-  if (isControlChart && controlChartIndicatorList) {
-    isShow = controlChartIndicatorList.find(
+  if (isControlChart && ctlIndicatorList) {
+    isShow = ctlIndicatorList.find(
       (item) => item.tick === xName
     ).isShow;
   }
@@ -29,28 +26,28 @@ export default ({
       x={x}
       onMouseEnter={() => {
         if (isControlChart) {
-          setControlChartIndicatorList((v) => {
-            return v.map((item) => {
+          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;
               }
-            });
-          });
-          setControlChartTooltipShow(true);
-          setControlChartTooltipXName(xName);
-          setControlChartTooltipX(x);
+            })
+          }))
         }
       }}
       onMouseLeave={() => {
         if (isControlChart) {
-          setControlChartIndicatorList((v) =>
-            v.map((item) => ({ ...item, isShow: false }))
-          );
-          setControlChartTooltipShow(false);
-          setControlChartTooltipXName(undefined);
-          setControlChartTooltipX(undefined);
+          setCtlTip((pre)=>({
+            show:false,
+            x:undefined,
+            xName:undefined,
+            indicatorList:pre.indicatorList.map((item)=>{
+              return { ...item, isShow:false }
+            })
+          }))
         }
       }}
       fill={isShow ? color : "transparent"}

package/src/components/Label.js

@@ -18,14 +18,7 @@ export default memo(
     data,
     xAxis: { scaler: xScaler, step, direction },
     yAxis: { scaler: yScaler, isClipAxis, clipValue },
-    triggerClick,
-    //控制图相关
-    indicatorWidth,
-    setControlChartTooltipShow,
-    setControlChartTooltipX,
-    setControlChartTooltipXName,
-    isControlChart = false,
-    setControlChartIndicatorList = null,
+    triggerClick
   }) => {
     const lineType = config.hasOwnProperty("line"); //  堆叠处理
     const showIcon = icon && icon.show;
@@ -104,32 +97,6 @@ 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/Tooltip.js

@@ -41,7 +41,6 @@ export default memo(
           ...translateTip,
           x: translateTip.x + position + marginLeft,
         };
-     
       if (translate3d.x + tipWidth > width) {
         const newPositon = position + marginLeft - tipWidth - translateTip.x;
         translate3d.x = newPositon >= 0 ? newPositon : 0;

package/src/hooks/useAxes.js

@@ -60,10 +60,12 @@ const scales = {
 
 export default ({
   axes,
-  context: { width, height }, //是否为控制图
-  isControlChart,
-  control: controlConfig,
+  context: { width:chartWidth, height:chartHeight }, 
+  controlInfo,    //是否为控制图
 }) => {
+  const { isC, cHeight, cWidth, cPercent } = controlInfo;
+  const width = chartWidth;
+  const height = chartHeight - cHeight;
   const _axes = useMemo(() => {
     const tmp = new Map();
     const xAxisPositions = [];
@@ -91,9 +93,7 @@ export default ({
         bottomClipAxisStep,
         topClipAxisStep,
         clipValue,
-        clipPosition,
-        clipDifferenceValue,
-        clipAxisMode,
+        clipPosition
       } = item;
       //如果是断轴类型，输出一套完全不同的values
 
@@ -103,7 +103,7 @@ export default ({
        * @param {*} width
        * @param {*} height
        * @param {*} paddingOuter
-       * @returns {start,end,direction}
+       * @returns { start, end, direction }
        */
       function getChartsConfig(orientation, width, height, paddingOuter) {
         const direction =
@@ -321,10 +321,8 @@ export default ({
         });
       } else {
         //计算真正需要的tickCount，如果domain区间太小，不能完全按照count来，需要减少count数
-        const tickCount =
-          type == "ordinal" ? _count : getTickCount(domain, _count, decimal);
-        const { start, end, direction, _paddingOuter, length } =
-          getChartsConfig(orientation, width, height, paddingOuter);
+        const tickCount = type == "ordinal" ? _count : getTickCount(domain, _count, decimal);
+        const { start, end, direction, _paddingOuter, length } = getChartsConfig(orientation, width, height, paddingOuter);
 
         let range =
           direction === "horizontal"
@@ -336,8 +334,7 @@ export default ({
         if (type !== "ordinal" && !isNaN(domain[1]) && !auto) {
           newDomain = getNewDomain(domain, mode, _step);
         }
-
-        const scaler = scales[type]().domain(newDomain).range(range);
+        let scaler = scales[type]().domain(newDomain).range(range);
 
         scaler.type = type;
         if (type !== "ordinal") scaler.clamp(true); //scaler.nice().clamp(true)
@@ -347,9 +344,9 @@ export default ({
           ? scaler.ticks(tickCount)
           : scaler.domain();
         let _ticks = allTicks;
-        //
+        
         if (type === "ordinal") {
-          if (carousel === false) {
+          if (carousel === false || isC) {
             _ticks = getTicksOfAxis(_ticks, +tickCount, showLast);
           }
         } else {
@@ -381,6 +378,25 @@ export default ({
             }
           }
         }
+        let step = lengthWithoutPaddingOuter / allTicks.length;
+        const controlCfg = {
+          controlStep:0,
+          controlDragScaler:null
+        }
+        if(isC){
+          controlCfg.controlStep = step / cPercent;
+          controlCfg.controlDragScaler = scaler.copy().range([start/cPercent, end/cPercent]);
+          const { start:start_, end:end_, direction:direction_, _paddingOuter:outer, length:len } = getChartsConfig(orientation, cWidth, height, paddingOuter);
+          let range = direction_ === "horizontal"
+            ? [start_, end_]
+            : direction_ === "vertical"
+            ? [end_, start_]
+            : [0, 0];
+          scaler = scales[type]().domain(newDomain).range(range);
+          scaler.type = type;
+          const controlOuter = len - outer;
+          step = controlOuter/allTicks.length;
+        }
         tmp.set(axisType, {
           ...item,
           count: _count,
@@ -393,8 +409,10 @@ export default ({
           start,
           end,
           lengthWithoutPaddingOuter,
-          step: lengthWithoutPaddingOuter / allTicks.length,
+          step,
+          ...controlCfg,
           allTicks,
+          rawTicks: _ticks,
           ticks: _ticks,
         });
       }

package/src/hooks/useCarouselAxisX.js

@@ -17,14 +17,14 @@ export default (
   axis,
   config,
   isHover,
-  isControlChart = false,
-  controlConfig = null
+  controlInfo
 ) => {
   const { show, interval, duration, hover } = config;
+  const { isC, cPercent } = controlInfo;
   const time = duration + interval;
 
   const {
-    tickCount,
+    tickCount:count,
     allTicks,
     scaler,
     start,
@@ -34,12 +34,11 @@ export default (
     lengthWithoutPaddingOuter,
   } = axis;
   const tickLength = ticks.length;
+  const tickCount = isC?allTicks.length:count;
 
-  const _end =
-    isControlChart && controlConfig
-      ? end / (controlConfig.drag.width / 100)
-      : end;
-  const controlDragScaler = scaler.copy().range([start, end]);
+  const scale = isC?cPercent:1;
+  const _start = start/scale;
+  const _end = end/scale;
 
   const [state, setState] = useState({
     scaler,
@@ -86,7 +85,7 @@ export default (
         setState({
           step,
           ticks: _ticks,
-          scaler: scaler.copy().domain(_ticks).range([start, _end]),
+          scaler: scaler.copy().domain(_ticks).range([_start, _end]),
         });
       } else {
         animation = animate({
@@ -107,7 +106,7 @@ export default (
                 ticks: _ticks,
                 scaler: scaler
                   .copy()
-                  .range([start, _end + step])
+                  .range([_start, _end + step])
                   .domain(_ticks),
               };
             });
@@ -119,7 +118,7 @@ export default (
                 ...axis,
                 scaler: scaler
                   .copy()
-                  .range([start + step * v, _end + step + step * v]),
+                  .range([_start + step * v, _end + step + step * v]),
               };
             });
           },
@@ -130,7 +129,7 @@ export default (
               return {
                 ...axis,
                 ticks: _ticks,
-                scaler: scaler.copy().range([start, _end]).domain(_ticks),
+                scaler: scaler.copy().range([_start, _end]).domain(_ticks),
               };
             });
           },
@@ -140,7 +139,7 @@ export default (
       const _ticks = scaler.type == "linear" ? scaler.domain() : allTicks;
       setState({
         step,
-        scaler: scaler.copy().domain(_ticks).range([start, _end]),
+        scaler: scaler.copy().domain(_ticks).range([_start, _end]),
         ticks,
       });
     }
@@ -151,7 +150,7 @@ export default (
     tickCount,
     allTicks,
     scaler,
-    start,
+    _start,
     _end,
     step,
     ticks,
@@ -163,10 +162,7 @@ export default (
   return {
     ...axis,
     ...state,
-    rawTicks: axis.ticks,
-    controlDragScaler,
-    controlEnd: _end,
-    isControlChart,
+    controlEnd: _end
   };
 };
 

package/src/hooks/useFilterData.js

@@ -53,7 +53,13 @@ export default ({ data, series }) => {
   }, []);
 
   useEffect(() => {
-    setSelected(getInitialSelected(series));
+    const map = getInitialSelected(series);
+    for(let [ key ] of map.entries()){
+      if(selected.has(key)){
+        map.set(key, selected.get(key));
+      }
+    }
+    setSelected(map);
   }, [series]);
 
   return [