@easyv/charts 1.6.1 → 1.6.3

package/lib/components/Chart.js

@@ -153,13 +153,7 @@ var Chart = /*#__PURE__*/(0, _react.memo)(function (_ref2) {
   //   }
   // }
 
-  return /*#__PURE__*/_react["default"].createElement("div", {
-    id: "bigscreen-container",
-    style: {
-      transform: "scale(1.3)",
-      transformOrigin: "left top"
-    }
-  }, /*#__PURE__*/_react["default"].createElement(_context.chartContext.Provider, {
+  return /*#__PURE__*/_react["default"].createElement(_context.chartContext.Provider, {
     value: context
   }, type == 'pie' ? /*#__PURE__*/_react["default"].createElement(_.PieChart, (0, _extends2["default"])({
     id: id,
@@ -171,7 +165,7 @@ var Chart = /*#__PURE__*/(0, _react.memo)(function (_ref2) {
     config: config,
     data: data,
     active: active
-  }, props)))); //获取大屏缩放系数
+  }, props))); //获取大屏缩放系数
 
   function getScreenScale() {
     setTimeout(function () {

package/lib/hooks/useAxes.js

@@ -36,16 +36,36 @@ var getCount = function getCount(num) {
 
 var getNewDomain = function getNewDomain(domain, mode, step) {
   var extent = arguments.length > 3 && arguments[3] !== undefined ? arguments[3] : {};
+  var numericalRangeModel = arguments.length > 4 && arguments[4] !== undefined ? arguments[4] : "value";
+  var percentageExtent = arguments.length > 5 && arguments[5] !== undefined ? arguments[5] : {
+    max: 100,
+    min: 100
+  };
   var _extent$min = extent.min,
-      bottom = _extent$min === void 0 ? "" : _extent$min,
+      defaultBottom = _extent$min === void 0 ? "" : _extent$min,
       _extent$max = extent.max,
-      top = _extent$max === void 0 ? "" : _extent$max;
+      defaultTop = _extent$max === void 0 ? "" : _extent$max;
+  var _percentageExtent$min = percentageExtent.min,
+      defaultPercentageMin = _percentageExtent$min === void 0 ? 100 : _percentageExtent$min,
+      _percentageExtent$max = percentageExtent.max,
+      defaultPercentageMax = _percentageExtent$max === void 0 ? 100 : _percentageExtent$max;
+  var bottom = defaultBottom,
+      top = defaultTop;
   var newDomain = []; //能进入这个函数，说明extent中min和max至少有一个是缺失的，如果max存在，意味着纵轴上限被固定
 
   var min = domain[0],
       max = domain[1];
   var minCount = Math.pow(10, getCount(min)),
-      maxCount = Math.pow(10, getCount(max));
+      maxCount = Math.pow(10, getCount(max)); //轴标签，范围模式，百分比模式
+
+  if (numericalRangeModel == "percentage") {
+    var _max = defaultPercentageMax === "" ? 100 : defaultPercentageMax;
+
+    var _min = defaultPercentageMin === "" ? 100 : defaultPercentageMin;
+
+    bottom = min * _min / 100;
+    top = max * _max / 100;
+  }
 
   switch (mode) {
     case "count":
@@ -54,7 +74,7 @@ var getNewDomain = function getNewDomain(domain, mode, step) {
       break;
 
     case "step":
-      if (top != "") {
+      if (defaultTop != "") {
         newDomain = [domain[1], domain[1]];
 
         while (newDomain[0] > domain[0]) {
@@ -118,6 +138,9 @@ var _default = function _default(_ref) {
     axes.forEach(function (item) {
       var _item$config$label = item.config.label,
           extent = _item$config$label.extent,
+          percentageExtent = _item$config$label.percentageExtent,
+          _item$config$label$nu = _item$config$label.numericalRangeModel,
+          numericalRangeModel = _item$config$label$nu === void 0 ? "value" : _item$config$label$nu,
           _item$config$label$sh = _item$config$label.showLast,
           showLast = _item$config$label$sh === void 0 ? false : _item$config$label$sh,
           _item$config$label$de = _item$config$label.decimal,
@@ -176,7 +199,7 @@ var _default = function _default(_ref) {
        * @param {*} scales
        * @param {*} type 轴类型
        * @param {*} domain 数据的范围
-       * @param {*} range 屏幕坐标的范围
+       * @param {*}                         屏幕坐标的范围
        * @returns
        */
 
@@ -339,7 +362,7 @@ var _default = function _default(_ref) {
         var 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);
         }
 
         var scaler = scales[type]().domain(newDomain).range(range);

package/lib/hooks/useExtentData.js

@@ -122,13 +122,17 @@ var _default = function _default(_ref) {
       //   return d[1].sort((a,b)=>a.x>b.x?1:-1)
       // });
     }
-  } //clipAxisMode如果是auto根据clipDifferenceValue设置clipValue
+  } // console.log("nononon", axes);
+  //clipAxisMode如果是auto根据clipDifferenceValue设置clipValue
 
 
   return axes.map(function (item) {
     var axisType = item.axisType,
         domain = item.domain,
-        type = item.type;
+        type = item.type,
+        _item$config$label = item.config.label,
+        percentageExtent = _item$config$label.percentageExtent,
+        numericalRangeModel = _item$config$label.numericalRangeModel;
 
     switch (axisType) {
       case "x":
@@ -171,13 +175,13 @@ var _default = function _default(_ref) {
           }
 
           return _objectSpread(_objectSpread({}, item), {}, {
-            domain: domain ? getDomain(y, domain) : y
+            domain: domain ? getDomain(y, domain, numericalRangeModel, percentageExtent) : y
           });
         }
 
       case "z":
         return _objectSpread(_objectSpread({}, item), {}, {
-          domain: domain ? getDomain(z, domain) : z
+          domain: domain ? getDomain(z, domain, numericalRangeModel, percentageExtent) : z
         });
     }
   });
@@ -192,5 +196,16 @@ var getDomain = function getDomain(_ref2, _ref3) {
 
   var min = _ref3.min,
       max = _ref3.max;
+  var numericalRangeModel = arguments.length > 2 && arguments[2] !== undefined ? arguments[2] : "value";
+  var percentageExtent = arguments.length > 3 ? arguments[3] : undefined;
+
+  if (numericalRangeModel == "percentage" && percentageExtent) {
+    var _min = percentageExtent.min == "" ? 100 : +percentageExtent.min;
+
+    var _max = percentageExtent.max == "" ? 100 : +percentageExtent.max;
+
+    return [min1 * _min / 100, max1 * _max / 100];
+  }
+
   return [min !== "" ? +min : min1, max !== "" ? +max : max1];
 };

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@easyv/charts",
-  "version": "1.6.1",
+  "version": "1.6.3",
   "description": "",
   "main": "lib/index.js",
   "scripts": {

package/src/components/Chart.js

@@ -126,15 +126,13 @@ const Chart = memo(
     // }
 
     return (
-      <div id="bigscreen-container" style={{transform:"scale(1.3)",transformOrigin:"left top"}}>
-        <chartContext.Provider value={context}>
-          {type == 'pie' ? (
-            <PieChart id={id} config={config} data={data} active={active} {...props} />
-          ) : (
-            <CartesianChart id={id} config={config} data={data} active={active} {...props} />
-          )}
-        </chartContext.Provider>
-      </div>
+      <chartContext.Provider value={context}>
+        {type == 'pie' ? (
+          <PieChart id={id} config={config} data={data} active={active} {...props} />
+        ) : (
+          <CartesianChart id={id} config={config} data={data} active={active} {...props} />
+        )}
+      </chartContext.Provider>
       
     );
     //获取大屏缩放系数

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