@easyv/charts 1.5.29 → 1.5.30

package/src/hooks/index.js

@@ -1,20 +1,20 @@
-import useFilterData from './useFilterData';
-import useStackData from './useStackData';
-import useAxes from './useAxes';
-import useTooltip from './useTooltip';
-import useAnimateData from './useAnimateData';
-import useCarouselAxisX from './useCarouselAxisX';
-import useExtentData from './useExtentData';
-import { useAiData, useAiDataOfPie } from './useAiData';
-
-export {
-  useFilterData,
-  useStackData,
-  useAxes,
-  useTooltip,
-  useAnimateData,
-  useCarouselAxisX,
-  useExtentData,
-  useAiData,
-  useAiDataOfPie
-};
+import useFilterData from './useFilterData';
+import useStackData from './useStackData';
+import useAxes from './useAxes';
+import useTooltip from './useTooltip';
+import useAnimateData from './useAnimateData';
+import useCarouselAxisX from './useCarouselAxisX';
+import useExtentData from './useExtentData';
+import { useAiData, useAiDataOfPie } from './useAiData';
+
+export {
+  useFilterData,
+  useStackData,
+  useAxes,
+  useTooltip,
+  useAnimateData,
+  useCarouselAxisX,
+  useExtentData,
+  useAiData,
+  useAiDataOfPie
+};

package/src/hooks/useAnimateData.ts

@@ -1,68 +1,68 @@
-import { useEffect, useState } from 'react';
-import { animate, easeIn, easeOut, linear } from 'popmotion';
-
-/**
- * 图表数据动画
- * @param {Array} data data列表
- * @param {boolean} dataAnimation 是否开启数据增长动画
- * @param {boolean} active 是否处于活跃状态，false为休眠
- * @returns 改变后的数据
- */
-
-export default (data: DataType[], dataAnimation: DataAnimation, active:boolean) => {
-  const [animateData, setAnimateData] = useState<DataType[]>([]);
-  useEffect(() => {
-    let animateRef: any = null;
-    if (
-      dataAnimation &&
-      dataAnimation.show &&
-      dataAnimation.duration &&
-      data.length &&
-      active
-    ) {
-      animateRef = animate({
-        autoplay: true,
-        repeat: 0,
-        from: 0,
-        to: 1,
-        duration: dataAnimation.duration * 1000,
-        ease: linear,
-        onUpdate: (v: number) => {
-          setAnimateData((oldData: DataType[]) => {
-            const oldLength = oldData.length;
-            const newLength = data.length;
-            if (oldLength >= newLength) {
-              return oldData.map(({ y }: DataType, i: number) => {
-                const current: DataType = data[i] || { y: 0 };
-                const delta: number = current.y - y;
-                return {
-                  ...current,
-                  y: y + delta * v,
-                };
-              });
-            } else {
-              return data.map((current: DataType, i: number) => {
-                const oldCurrent: DataType = oldData[i] || { y: 0 };
-                const delta = oldCurrent.y - current.y;
-                return {
-                  ...current,
-                  y:oldCurrent.y + delta * v,
-                };
-              });
-            }
-          });
-        },
-        onComplete: () => {
-          setAnimateData(data);
-        },
-      });
-    } else {
-      setAnimateData(data);
-    }
-    return () => {
-      animateRef && animateRef.stop();
-    };
-  }, [data, dataAnimation, active]);
-
-  return animateData;
-};
+import { useEffect, useState } from 'react';
+import { animate, easeIn, easeOut, linear } from 'popmotion';
+
+/**
+ * 图表数据动画
+ * @param {Array} data data列表
+ * @param {boolean} dataAnimation 是否开启数据增长动画
+ * @param {boolean} active 是否处于活跃状态，false为休眠
+ * @returns 改变后的数据
+ */
+
+export default (data: DataType[], dataAnimation: DataAnimation, active:boolean) => {
+  const [animateData, setAnimateData] = useState<DataType[]>([]);
+  useEffect(() => {
+    let animateRef: any = null;
+    if (
+      dataAnimation &&
+      dataAnimation.show &&
+      dataAnimation.duration &&
+      data.length &&
+      active
+    ) {
+      animateRef = animate({
+        autoplay: true,
+        repeat: 0,
+        from: 0,
+        to: 1,
+        duration: dataAnimation.duration * 1000,
+        ease: linear,
+        onUpdate: (v: number) => {
+          setAnimateData((oldData: DataType[]) => {
+            const oldLength = oldData.length;
+            const newLength = data.length;
+            if (oldLength >= newLength) {
+              return oldData.map(({ y }: DataType, i: number) => {
+                const current: DataType = data[i] || { y: 0 };
+                const delta: number = current.y - y;
+                return {
+                  ...current,
+                  y: y + delta * v,
+                };
+              });
+            } else {
+              return data.map((current: DataType, i: number) => {
+                const oldCurrent: DataType = oldData[i] || { y: 0 };
+                const delta = oldCurrent.y - current.y;
+                return {
+                  ...current,
+                  y:oldCurrent.y + delta * v,
+                };
+              });
+            }
+          });
+        },
+        onComplete: () => {
+          setAnimateData(data);
+        },
+      });
+    } else {
+      setAnimateData(data);
+    }
+    return () => {
+      animateRef && animateRef.stop();
+    };
+  }, [data, dataAnimation, active]);
+
+  return animateData;
+};

package/src/hooks/useAxes.js

@@ -14,26 +14,49 @@ const getCount = (num) => {
   return i;
 };
 
-const getNewDomain = (domain, mode, step, extent={}) => {
-  const { min:bottom="", max:top="" } = extent;
+const getNewDomain = (
+  domain,
+  mode,
+  step,
+  extent = {},
+  numericalRangeModel = "value",
+  percentageExtent = { max: 100, min: 100 }
+) => {
+  let { min: defaultBottom = "", max: defaultTop = "" } = extent;
+  const { min: defaultPercentageMin = 100, max: defaultPercentageMax = 100 } =
+    percentageExtent;
+  let bottom = defaultBottom,
+    top = defaultTop;
+
   let newDomain = [];
   //能进入这个函数，说明extent中min和max至少有一个是缺失的，如果max存在，意味着纵轴上限被固定
   let min = domain[0],
     max = domain[1];
   let minCount = Math.pow(10, getCount(min)),
     maxCount = Math.pow(10, getCount(max));
+
+  //轴标签，范围模式，百分比模式
+  if (numericalRangeModel == "percentage") {
+    let _max = defaultPercentageMax === "" ? 100 : defaultPercentageMax;
+    let _min = defaultPercentageMin === "" ? 100 : defaultPercentageMin;
+    bottom = (min * _min) / 100;
+    top = (max * _max) / 100;
+  }
+
   switch (mode) {
     case "count":
-      newDomain[0] = bottom!=""?bottom:Math.floor(domain[0] / minCount) * minCount;
-      newDomain[1] = top!=""?top:Math.ceil(domain[1] / maxCount) * maxCount;
+      newDomain[0] =
+        bottom != "" ? bottom : Math.floor(domain[0] / minCount) * minCount;
+      newDomain[1] =
+        top != "" ? top : Math.ceil(domain[1] / maxCount) * maxCount;
       break;
     case "step":
-      if(top!=""){
+      if (defaultTop != "") {
         newDomain = [domain[1], domain[1]];
         while (newDomain[0] > domain[0]) {
           newDomain[0] -= step;
         }
-      }else{
+      } else {
         newDomain = [domain[0], domain[0]];
         while (newDomain[1] < domain[1]) {
           newDomain[1] += step;
@@ -70,19 +93,26 @@ const scales = {
 
 export default ({
   axes,
-  context: { width:chartWidth, height:chartHeight }, 
-  controlInfo,    //是否为控制图
+  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 = [];
     axes.forEach((item) => {
       const {
         config: {
-          label: { extent, showLast = false, decimal = 0 },
+          label: {
+            extent,
+            percentageExtent,
+            numericalRangeModel = "value",
+            showLast = false,
+            decimal = 0,
+          },
         },
         type,
         orientation,
@@ -104,7 +134,7 @@ export default ({
         bottomClipAxisStep,
         topClipAxisStep,
         clipValue,
-        clipPosition
+        clipPosition,
       } = item;
       //如果是断轴类型，输出一套完全不同的values
       /**
@@ -146,7 +176,7 @@ export default ({
        * @param {*} scales
        * @param {*} type 轴类型
        * @param {*} domain 数据的范围
-       * @param {*} range 屏幕坐标的范围
+       * @param {*}                         屏幕坐标的范围
        * @returns
        */
       function setScaler(scales, type, domain, range) {
@@ -209,7 +239,10 @@ export default ({
                 break;
               case "step":
                 let newStep = +step;
-                newStep = (newDomain[1] - newDomain[0])/newStep>30?Math.ceil((newDomain[1] - newDomain[0])/30):newStep;
+                newStep =
+                  (newDomain[1] - newDomain[0]) / newStep > 30
+                    ? Math.ceil((newDomain[1] - newDomain[0]) / 30)
+                    : newStep;
                 _ticks = getYTicksByStep(newDomain[1], newDomain[0], newStep);
                 break;
             }
@@ -333,32 +366,41 @@ 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"
             ? [start, end]
             : direction === "vertical"
             ? [end, start]
             : [0, 0];
-        if(reverse)range = [range[1],range[0]];
+        if (reverse) range = [range[1], range[0]];
         let newDomain = domain;
-        const fixedDomain = extent && extent.min!="" && extent.max!="";   //判断配置项中是否强制了最大最小值，如果已经被强制了，就不计算newDomain
+        const fixedDomain = extent && extent.min != "" && extent.max != ""; //判断配置项中是否强制了最大最小值，如果已经被强制了，就不计算newDomain
         if (type !== "ordinal" && !isNaN(domain[1]) && !auto && !fixedDomain) {
-          newDomain = getNewDomain(domain, mode, _step, extent);
+          newDomain = getNewDomain(
+            domain,
+            mode,
+            _step,
+            extent,
+            numericalRangeModel,
+            percentageExtent
+          );
         }
         let scaler = scales[type]().domain(newDomain).range(range);
 
         scaler.type = type;
         if (type !== "ordinal") scaler.clamp(true);
-        
+
         const allTicks = ticks
           ? ticks
           : scaler.ticks
           ? scaler.ticks(tickCount)
           : scaler.domain();
         let _ticks = allTicks;
-        
+
         if (type === "ordinal") {
           if (carousel === false || isC) {
             _ticks = getTicksOfAxis(_ticks, +tickCount, showLast);
@@ -371,7 +413,10 @@ export default ({
                 break;
               case "step":
                 let newStep = +_step;
-                newStep = (newDomain[1] - newDomain[0])/newStep>30?Math.ceil((newDomain[1] - newDomain[0])/30):newStep;
+                newStep =
+                  (newDomain[1] - newDomain[0]) / newStep > 30
+                    ? Math.ceil((newDomain[1] - newDomain[0]) / 30)
+                    : newStep;
                 _ticks = getYTicksByStep(newDomain[1], newDomain[0], newStep);
                 break;
             }
@@ -396,22 +441,31 @@ export default ({
         }
         let step = lengthWithoutPaddingOuter / allTicks.length;
         const controlCfg = {
-          controlStep:0,
-          controlDragScaler:null
-        }
-        if(isC){
+          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];
+          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;
+          step = controlOuter / allTicks.length;
         }
         tmp.set(axisType, {
           ...item,

package/src/hooks/useExtentData.js

@@ -10,13 +10,17 @@ import {
 
 //扩张系数，用于扩大数据的最大最小值范围，达到图表尽量居中显示的效果
 const extentRatio = 0;
-const extentRange = (value, type)=>{
-  if(value>=0){
-    return type=="min"?value*(1-extentRatio):value*(1+extentRatio);
-  }else{
-    return type=="min"?value*(1+extentRatio):value*(1-extentRatio);
+const extentRange = (value, type) => {
+  if (value >= 0) {
+    return type == "min"
+      ? value * (1 - extentRatio)
+      : value * (1 + extentRatio);
+  } else {
+    return type == "min"
+      ? value * (1 + extentRatio)
+      : value * (1 - extentRatio);
   }
-}
+};
 const stackData = (data, series) => {
   const dataMap = group(data, (d) => d.x);
   const stacks = getStacks(series);
@@ -48,7 +52,10 @@ const stackData = (data, series) => {
     max = Math.max(...arr, max);
   });
   dataMap.clear();
-  return [extentRange(min || 0, "min"), extentRange(max==undefined?(min || 0) + 100:max, "max")];
+  return [
+    extentRange(min || 0, "min"),
+    extentRange(max == undefined ? (min || 0) + 100 : max, "max"),
+  ];
 };
 
 /**
@@ -68,20 +75,35 @@ export default ({ axes, series, data }) => {
   const x = useMemo(() => [...group(data, (d) => d.x).keys()], [data]);
   const y = stackData(dataY, _series.y);
   const z = stackData(dataZ, _series.z);
-  const xAxis = axes.find(d=>d.axisType=="x");
-  if(xAxis){
-    const { config:{ label:{ autoSort, format:{ type } } } } = xAxis;
-    if(type=="date" && autoSort){
-      x.sort((a,b)=>a>b?1:-1);
+  const xAxis = axes.find((d) => d.axisType == "x");
+  if (xAxis) {
+    const {
+      config: {
+        label: {
+          autoSort,
+          format: { type },
+        },
+      },
+    } = xAxis;
+    if (type == "date" && autoSort) {
+      x.sort((a, b) => (a > b ? 1 : -1));
       // const groupBySeries = group(data, (d) => d.s);
       // data=[...groupBySeries].flatMap(d=>{
       //   return d[1].sort((a,b)=>a.x>b.x?1:-1)
       // });
     }
   }
+  // console.log("nononon", axes);
   //clipAxisMode如果是auto根据clipDifferenceValue设置clipValue
   return axes.map((item) => {
-    const { axisType, domain, type } = item;
+    const {
+      axisType,
+      domain,
+      type,
+      config: {
+        label: { percentageExtent, numericalRangeModel },
+      },
+    } = item;
     switch (axisType) {
       case "x":
         return {
@@ -116,19 +138,33 @@ export default ({ axes, series, data }) => {
         }
         return {
           ...item,
-          domain: domain ? getDomain(y, domain) : y,
+          domain: domain
+            ? getDomain(y, domain, numericalRangeModel, percentageExtent)
+            : y,
         };
       }
 
       case "z":
         return {
           ...item,
-          domain: domain ? getDomain(z, domain) : z,
+          domain: domain
+            ? getDomain(z, domain, numericalRangeModel, percentageExtent)
+            : z,
         };
     }
   });
 };
 
-const getDomain = ([min1, max1], { min, max }) => {
+const getDomain = (
+  [min1, max1],
+  { min, max },
+  numericalRangeModel = "value",
+  percentageExtent
+) => {
+  if (numericalRangeModel == "percentage" && percentageExtent) {
+    const _min = percentageExtent.min == "" ? 100 : +percentageExtent.min;
+    const _max = percentageExtent.max == "" ? 100 : +percentageExtent.max;
+    return [(min1 * _min) / 100, (max1 * _max) / 100];
+  }
   return [min !== "" ? +min : min1, max !== "" ? +max : max1];
 };

package/src/hooks/useFilterData.js

@@ -1,78 +1,78 @@
-import { useState, useCallback, useEffect, useMemo } from 'react';
-
-const getInitialSelected = (series) => {
-  const status = new Map();
-  for (let [name] of series.entries()) {
-    status.set(name, true);
-  }
-  return status;
-};
-
-const getSelected = (selected, name) => {
-  const tmp = new Map();
-  selected.forEach((value, key) => {
-    if (name == key) {
-      tmp.set(key, !value);
-    } else {
-      tmp.set(key, value);
-    }
-  });
-  return tmp;
-};
-
-/**
- * 图例点击状态管理
- * @param {Array} data 数据
- * @param {Map} series 系列
- * @returns {Array} 返回筛选后的数据和是否选中状态，及控制选中函数
- */
-
-export default ({ data, series }) => {
-  const [selected, setSelected] = useState(getInitialSelected(series));
-  
-  const _series = useMemo(() => {
-    const tmp = new Map();
-    series.forEach((currentSeries, key) => {
-      const value = selected.get(key);
-      tmp.set(key, {
-        ...currentSeries,
-        selected: value,
-      });
-    });
-    return tmp;
-  }, [selected, series]);
-
-  const _data = useMemo(() => {
-    return data.filter(({ s }) => {
-      return s && _series.get(s) && _series.get(s).selected;
-    });
-  }, [data, _series]);
-
-  const onClick = useCallback((name) => {
-    setSelected((selected) => getSelected(selected, name));
-  }, []);
-
-  useEffect(() => {
-    const map = getInitialSelected(series);
-    for(let [ key ] of map.entries()){
-      if(selected.has(key)){
-        map.set(key, selected.get(key));
-      }
-    }
-    setSelected(map);
-  }, [series]);
-
-  return [
-    {
-      series: _series,
-      data: _data.map(d=>{
-        return {
-          ...d,
-          y:parseFloat(d.y),
-          showY:d.y
-        }
-      }),
-    },
-    onClick,
-  ];
-};
+import { useState, useCallback, useEffect, useMemo } from 'react';
+
+const getInitialSelected = (series) => {
+  const status = new Map();
+  for (let [name] of series.entries()) {
+    status.set(name, true);
+  }
+  return status;
+};
+
+const getSelected = (selected, name) => {
+  const tmp = new Map();
+  selected.forEach((value, key) => {
+    if (name == key) {
+      tmp.set(key, !value);
+    } else {
+      tmp.set(key, value);
+    }
+  });
+  return tmp;
+};
+
+/**
+ * 图例点击状态管理
+ * @param {Array} data 数据
+ * @param {Map} series 系列
+ * @returns {Array} 返回筛选后的数据和是否选中状态，及控制选中函数
+ */
+
+export default ({ data, series }) => {
+  const [selected, setSelected] = useState(getInitialSelected(series));
+  
+  const _series = useMemo(() => {
+    const tmp = new Map();
+    series.forEach((currentSeries, key) => {
+      const value = selected.get(key);
+      tmp.set(key, {
+        ...currentSeries,
+        selected: value,
+      });
+    });
+    return tmp;
+  }, [selected, series]);
+
+  const _data = useMemo(() => {
+    return data.filter(({ s }) => {
+      return s && _series.get(s) && _series.get(s).selected;
+    });
+  }, [data, _series]);
+
+  const onClick = useCallback((name) => {
+    setSelected((selected) => getSelected(selected, name));
+  }, []);
+
+  useEffect(() => {
+    const map = getInitialSelected(series);
+    for(let [ key ] of map.entries()){
+      if(selected.has(key)){
+        map.set(key, selected.get(key));
+      }
+    }
+    setSelected(map);
+  }, [series]);
+
+  return [
+    {
+      series: _series,
+      data: _data.map(d=>{
+        return {
+          ...d,
+          y:parseFloat(d.y),
+          showY:d.y
+        }
+      }),
+    },
+    onClick,
+  ];
+};