@easyv/charts 1.4.35 → 1.4.36

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