@easyv/charts 1.5.3 → 1.5.5

package/lib/components/Line.js

@@ -15,8 +15,6 @@ var _slicedToArray2 = _interopRequireDefault(require("@babel/runtime/helpers/sli
 
 var _defineProperty2 = _interopRequireDefault(require("@babel/runtime/helpers/defineProperty"));
 
-var _objectWithoutProperties2 = _interopRequireDefault(require("@babel/runtime/helpers/objectWithoutProperties"));
-
 var _react = _interopRequireWildcard(require("react"));
 
 var _d3v = require("d3v7");
@@ -25,8 +23,6 @@ var _utils = require("../utils");
 
 var _ = require(".");
 
-var _excluded = ["data"];
-
 function _getRequireWildcardCache(nodeInterop) { if (typeof WeakMap !== "function") return null; var cacheBabelInterop = new WeakMap(); var cacheNodeInterop = new WeakMap(); return (_getRequireWildcardCache = function _getRequireWildcardCache(nodeInterop) { return nodeInterop ? cacheNodeInterop : cacheBabelInterop; })(nodeInterop); }
 
 function _interopRequireWildcard(obj, nodeInterop) { if (!nodeInterop && obj && obj.__esModule) { return obj; } if (obj === null || _typeof(obj) !== "object" && typeof obj !== "function") { return { "default": obj }; } var cache = _getRequireWildcardCache(nodeInterop); if (cache && cache.has(obj)) { return cache.get(obj); } var newObj = {}; var hasPropertyDescriptor = Object.defineProperty && Object.getOwnPropertyDescriptor; for (var key in obj) { if (key !== "default" && Object.prototype.hasOwnProperty.call(obj, key)) { var desc = hasPropertyDescriptor ? Object.getOwnPropertyDescriptor(obj, key) : null; if (desc && (desc.get || desc.set)) { Object.defineProperty(newObj, key, desc); } else { newObj[key] = obj[key]; } } } newObj["default"] = obj; if (cache) { cache.set(obj, newObj); } return newObj; }
@@ -40,33 +36,32 @@ var defined = function defined(d) {
 };
 
 var getLineData = function getLineData(data, connectNulls) {
-  return connectNulls ? data.map(function (_ref) {
-    var data = _ref.data,
-        item = (0, _objectWithoutProperties2["default"])(_ref, _excluded);
-    return _objectSpread(_objectSpread({}, item), {}, {
-      data: _objectSpread(_objectSpread({}, data), {}, {
-        y: +data.y
+  return data.flatMap(function (d) {
+    var y = d.data.y;
+    return isNaN(y) ? connectNulls ? [] : _objectSpread(_objectSpread({}, d), {}, {
+      data: _objectSpread(_objectSpread({}, d.data), {}, {
+        y: null
       })
-    });
-  }) : data;
+    }) : d;
+  });
 };
 
-var Area = function Area(_ref2) {
-  var data = _ref2.data,
-      config = _ref2.config,
-      _ref2$config = _ref2.config,
-      id = _ref2$config.id,
-      fill = _ref2$config.fill,
-      type = _ref2$config.type,
-      url = _ref2$config.url,
-      opacity = _ref2$config.opacity,
-      _ref2$config$size = _ref2$config.size,
-      patternW = _ref2$config$size.width,
-      patternH = _ref2$config$size.height,
-      curve = _ref2$config.curve,
-      tension = _ref2$config.tension,
-      xScaler = _ref2.xScaler,
-      yScaler = _ref2.yScaler;
+var Area = function Area(_ref) {
+  var data = _ref.data,
+      config = _ref.config,
+      _ref$config = _ref.config,
+      id = _ref$config.id,
+      fill = _ref$config.fill,
+      type = _ref$config.type,
+      url = _ref$config.url,
+      opacity = _ref$config.opacity,
+      _ref$config$size = _ref$config.size,
+      patternW = _ref$config$size.width,
+      patternH = _ref$config$size.height,
+      curve = _ref$config.curve,
+      tension = _ref$config.tension,
+      xScaler = _ref.xScaler,
+      yScaler = _ref.yScaler;
 
   var _yScaler$range = yScaler.range(),
       _yScaler$range2 = (0, _slicedToArray2["default"])(_yScaler$range, 1),
@@ -76,15 +71,14 @@ var Area = function Area(_ref2) {
     return (0, _utils.getColorList)(fill);
   }, [fill]);
   var areaGen = (0, _react.useMemo)(function () {
-    var areaGen = (0, _d3v.area)().x(function (_ref3) {
-      var x = _ref3.data.x;
+    var areaGen = (0, _d3v.area)().x(function (_ref2) {
+      var x = _ref2.data.x;
       return xScaler(x);
-    }).y1(function (_ref4) {
-      var y = _ref4.data.y;
+    }).y1(function (_ref3) {
+      var y = _ref3.data.y;
       return yScaler(y);
-    }) // .y0(height)
-    .y0(function (_ref5) {
-      (0, _objectDestructuringEmpty2["default"])(_ref5);
+    }).y0(function (_ref4) {
+      (0, _objectDestructuringEmpty2["default"])(_ref4);
       return yScaler(0);
     }).defined(defined);
     curve && areaGen.curve(_d3v.curveCatmullRom.alpha(tension));
@@ -115,35 +109,35 @@ var Area = function Area(_ref2) {
   })));
 };
 
-var _default = /*#__PURE__*/(0, _react.memo)(function (_ref6) {
-  var type = _ref6.type,
-      _ref6$config$line = _ref6.config.line,
-      lineType = _ref6$config$line.type,
-      lineWidth = _ref6$config$line.lineWidth,
-      curve = _ref6$config$line.curve,
-      tension = _ref6$config$line.tension,
-      connectNulls = _ref6$config$line.connectNulls,
-      lineShadow = _ref6$config$line.lineShadow,
-      lighter = _ref6$config$line.lighter,
-      _ref6$line = _ref6.line,
-      lineId = _ref6$line.id,
-      stroke = _ref6$line.stroke,
-      area = _ref6.area,
-      data = _ref6.data,
-      _ref6$xAxis = _ref6.xAxis,
-      xScaler = _ref6$xAxis.scaler,
-      direction = _ref6$xAxis.direction,
-      yScaler = _ref6.yAxis.scaler;
+var _default = /*#__PURE__*/(0, _react.memo)(function (_ref5) {
+  var type = _ref5.type,
+      _ref5$config$line = _ref5.config.line,
+      lineType = _ref5$config$line.type,
+      lineWidth = _ref5$config$line.lineWidth,
+      curve = _ref5$config$line.curve,
+      tension = _ref5$config$line.tension,
+      connectNulls = _ref5$config$line.connectNulls,
+      lineShadow = _ref5$config$line.lineShadow,
+      lighter = _ref5$config$line.lighter,
+      _ref5$line = _ref5.line,
+      lineId = _ref5$line.id,
+      stroke = _ref5$line.stroke,
+      area = _ref5.area,
+      data = _ref5.data,
+      _ref5$xAxis = _ref5.xAxis,
+      xScaler = _ref5$xAxis.scaler,
+      direction = _ref5$xAxis.direction,
+      yScaler = _ref5.yAxis.scaler;
   if (!data.length) return null;
   var ticks = xScaler.domain();
   var sortData = (0, _react.useMemo)(function () {
-    var usefulData = data.filter(function (_ref7) {
-      var x = _ref7.data.x;
+    var usefulData = data.filter(function (_ref6) {
+      var x = _ref6.data.x;
       return ticks.indexOf(x) > -1;
     });
-    return usefulData.sort(function (_ref8, _ref9) {
-      var a = _ref8.data.x;
-      var b = _ref9.data.x;
+    return usefulData.sort(function (_ref7, _ref8) {
+      var a = _ref7.data.x;
+      var b = _ref8.data.x;
       return ticks.indexOf(a) - ticks.indexOf(b);
     });
   }, [data, ticks]);
@@ -154,17 +148,17 @@ var _default = /*#__PURE__*/(0, _react.memo)(function (_ref6) {
 
   var lineGen = (0, _react.useMemo)(function () {
     var isVertical = direction === 'vertical';
-    var lineGen = (isVertical ? (0, _d3v.line)().y(function (_ref10) {
-      var x = _ref10.data.x;
+    var lineGen = (isVertical ? (0, _d3v.line)().y(function (_ref9) {
+      var x = _ref9.data.x;
       return xScaler(x);
-    }).x(function (_ref11) {
-      var y = _ref11.data.y;
+    }).x(function (_ref10) {
+      var y = _ref10.data.y;
       return yScaler(y);
-    }) : (0, _d3v.line)().x(function (_ref12) {
-      var x = _ref12.data.x;
+    }) : (0, _d3v.line)().x(function (_ref11) {
+      var x = _ref11.data.x;
       return xScaler(x);
-    }).y(function (_ref13) {
-      var y = _ref13.data.y;
+    }).y(function (_ref12) {
+      var y = _ref12.data.y;
       return yScaler(y);
     })).defined(defined);
     curve && lineGen.curve(_d3v.curveCatmullRom.alpha(tension));

package/lib/components/PieChart.js

@@ -316,18 +316,20 @@ var Component = /*#__PURE__*/(0, _react.memo)(function (_ref5) {
       _ref5$config$animatio = _ref5$config.animation,
       on = _ref5$config$animatio.on,
       _ref5$config$animatio2 = _ref5$config$animatio.current,
-      _ref5$config$animatio3 = _ref5$config$animatio2.heighten,
-      heighten = _ref5$config$animatio3 === void 0 ? 0 : _ref5$config$animatio3,
-      _ref5$config$animatio4 = _ref5$config$animatio2.opacity,
-      opacity = _ref5$config$animatio4 === void 0 ? 0 : _ref5$config$animatio4,
-      _ref5$config$animatio5 = _ref5$config$animatio2.width,
-      radiusWidthAdd = _ref5$config$animatio5 === void 0 ? 0 : _ref5$config$animatio5,
+      _ref5$config$animatio3 = _ref5$config$animatio2.widthen,
+      widthen = _ref5$config$animatio3 === void 0 ? 0 : _ref5$config$animatio3,
+      _ref5$config$animatio4 = _ref5$config$animatio2.heighten,
+      heighten = _ref5$config$animatio4 === void 0 ? 0 : _ref5$config$animatio4,
+      _ref5$config$animatio5 = _ref5$config$animatio2.opacity,
+      opacity = _ref5$config$animatio5 === void 0 ? 0 : _ref5$config$animatio5,
+      _ref5$config$animatio6 = _ref5$config$animatio2.width,
+      radiusWidthAdd = _ref5$config$animatio6 === void 0 ? 0 : _ref5$config$animatio6,
       animateColor = _ref5$config$animatio2.color,
       animateCTS = _ref5$config$animatio2.textStyle,
-      _ref5$config$animatio6 = _ref5$config$animatio2.gap,
-      gap = _ref5$config$animatio6 === void 0 ? 0 : _ref5$config$animatio6,
-      _ref5$config$animatio7 = _ref5$config$animatio.rotate,
-      rotate = _ref5$config$animatio7 === void 0 ? 0 : _ref5$config$animatio7,
+      _ref5$config$animatio7 = _ref5$config$animatio2.gap,
+      gap = _ref5$config$animatio7 === void 0 ? 0 : _ref5$config$animatio7,
+      _ref5$config$animatio8 = _ref5$config$animatio.rotate,
+      rotate = _ref5$config$animatio8 === void 0 ? 0 : _ref5$config$animatio8,
       _ref5$config$tooltip = _ref5$config.tooltip,
       tooltip = _ref5$config$tooltip === void 0 ? {} : _ref5$config$tooltip,
       config = _ref5.config,
@@ -701,8 +703,9 @@ var Component = /*#__PURE__*/(0, _react.memo)(function (_ref5) {
     var prev = index == prevIndex.current;
     var offset = current ? y : prev ? 1 - y : 0;
     var fillOpacity = animateColor ? 1 : current ? opacity / 100 : 1;
+    var deltaWidthen = offset * widthen;
     var deltaHeighten = offset * heighten;
-    var path = arc.innerRadius(innerRadius + deltaHeighten).outerRadius(outerRadius + deltaHeighten)(value);
+    var path = arc.innerRadius(innerRadius + deltaWidthen).outerRadius(outerRadius + deltaHeighten + deltaWidthen)(value);
     var pie = (0, _utils.getColorList)(series.color);
     var currentPie = animateColor ? (0, _utils.getColorList)(animateColor) : (0, _utils.getColorList)(series.color);
     var textPath = "",

package/lib/hooks/useStackData.js

@@ -55,31 +55,34 @@ var setStackData = function setStackData(data, series, stacks) {
       var d = value[i];
       var currentSeries = series.get(d.s);
 
-      if (d && d.y !== undefined && !isNaN(d.y)) {
+      if (currentSeries) {
+        var type = currentSeries.type;
         var currentStack = (0, _utils.getCurrentStack)(currentSeries, stacks);
 
-        if (currentSeries && currentStack) {
-          if (d.y >= 0) {
-            currentSeries.data.push({
-              data: d,
-              index: currentStack.index,
-              bound: [currentStack.positive, currentStack.positive + d.y]
-            });
-            currentStack.positive += d.y;
+        if (d && d.y !== undefined && (type != "band" || type == "band" && !isNaN(d.y))) {
+          if (currentStack) {
+            if (d.y >= 0) {
+              currentSeries.data.push({
+                data: d,
+                index: currentStack.index,
+                bound: [currentStack.positive, currentStack.positive + d.y]
+              });
+              currentStack.positive += d.y;
+            } else {
+              currentSeries.data.push({
+                data: d,
+                index: currentStack.index,
+                bound: [currentStack.negative, currentStack.negative + d.y]
+              });
+              currentStack.negative += d.y;
+            }
           } else {
             currentSeries.data.push({
               data: d,
-              index: currentStack.index,
-              bound: [currentStack.negative, currentStack.negative + d.y]
+              bound: [0, d.y],
+              index: 0
             });
-            currentStack.negative += d.y;
           }
-        } else {
-          currentSeries.data.push({
-            data: d,
-            bound: [0, d.y],
-            index: 0
-          });
         }
       }
     }

package/package.json

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

package/src/components/Line.js

@@ -7,13 +7,17 @@ import { getColorList } from '../utils';
 import { Lighter, LinearGradient } from '.';
 
 const defined = (d) => d.data.y != null;
-const getLineData = (data, connectNulls) =>
-  connectNulls
-    ? data.map(({ data, ...item }) => ({
-      ...item,
-      data: { ...data, y: +data.y },
-    }))
-    : data;
+const getLineData = (data, connectNulls) =>{
+  return data.flatMap(d=>{
+    const y = d.data.y;
+    return isNaN(y)?
+      connectNulls?
+        []:
+        {...d,data:{...d.data,y:null}}:
+      d
+  });
+}
+  
 
 const Area = ({
   data,
@@ -38,7 +42,6 @@ const Area = ({
     const areaGen = d3Area()
       .x(({ data: { x } }) => xScaler(x))
       .y1(({ data: { y } }) => yScaler(y))
-      // .y0(height)
       .y0(({})=>yScaler(0))
       .defined(defined);
     curve && areaGen.curve(curveCatmullRom.alpha(tension));
@@ -86,7 +89,7 @@ export default memo(
   }) => {
     if (!data.length) return null;
     const ticks = xScaler.domain();
-
+    
     const sortData = useMemo(() => {
       const usefulData = data.filter(
         ({ data: { x } }) => ticks.indexOf(x) > -1
@@ -96,12 +99,11 @@ export default memo(
           ticks.indexOf(a) - ticks.indexOf(b)
       );
     }, [data, ticks]);
-
+    
     const _data = useMemo(
       () => getLineData(sortData, connectNulls),
       [sortData, connectNulls]
     );
-
     const lineGen = useMemo(() => {
       const isVertical = direction === 'vertical';
 

package/src/components/PieChart.js

@@ -272,6 +272,7 @@ const Component = memo(
       animation: {
         on,
         current: {
+          widthen = 0,
           heighten = 0,
           opacity = 0,
           width: radiusWidthAdd = 0,
@@ -679,10 +680,11 @@ const Component = memo(
                   : current
                   ? opacity / 100
                   : 1;
+                const deltaWidthen = offset * widthen;
                 const deltaHeighten = offset * heighten;
                 const path = arc
-                  .innerRadius(innerRadius + deltaHeighten)
-                  .outerRadius(outerRadius + deltaHeighten)(value);
+                  .innerRadius(innerRadius + deltaWidthen)
+                  .outerRadius(outerRadius + deltaHeighten + deltaWidthen)(value);
                 const pie = getColorList(series.color);
                 const currentPie = animateColor
                   ? getColorList(animateColor)

package/src/hooks/useStackData.js

@@ -27,38 +27,41 @@ const resetStackData = (series) => {
 
 const setStackData = (data, series, stacks) => {
   const dataMap = group(data, (d) => d.x);
-
   dataMap.forEach((value) => {
     resetStacks(stacks);
     for (let i = 0, j = value.length; i < j; i++) {
       const d = value[i];
       const currentSeries = series.get(d.s);
-      if (d && d.y !== undefined && !isNaN(d.y)) {
+      if(currentSeries){
+        const type = currentSeries.type;
         const currentStack = getCurrentStack(currentSeries, stacks);
-        if (currentSeries && currentStack) {
-          if (d.y >= 0) {
-            currentSeries.data.push({
-              data: d,
-              index: currentStack.index,
-              bound: [currentStack.positive, currentStack.positive + d.y],
-            });
-            currentStack.positive += d.y;
+        if (d && d.y !== undefined && (type!="band" || type=="band" && !isNaN(d.y))) {
+          if (currentStack) {
+            if (d.y >= 0) {
+              currentSeries.data.push({
+                data: d,
+                index: currentStack.index,
+                bound: [currentStack.positive, currentStack.positive + d.y],
+              });
+              currentStack.positive += d.y;
+            } else {
+              currentSeries.data.push({
+                data: d,
+                index: currentStack.index,
+                bound: [currentStack.negative, currentStack.negative + d.y],
+              });
+              currentStack.negative += d.y;
+            }
           } else {
             currentSeries.data.push({
               data: d,
-              index: currentStack.index,
-              bound: [currentStack.negative, currentStack.negative + d.y],
+              bound: [0, d.y],
+              index: 0,
             });
-            currentStack.negative += d.y;
           }
-        } else {
-          currentSeries.data.push({
-            data: d,
-            bound: [0, d.y],
-            index: 0,
-          });
         }
       }
+      
     }
   });
   dataMap.clear();
@@ -80,7 +83,6 @@ export default ({ data, series }) => {
   }, [series]);
 
   const _data = useMemo(() => dataYOrZ(data, _series.series), [data, _series]);
-
   const tmp = useMemo(() => {
     const { y: dataY, z: dataZ } = _data;
     const {
@@ -91,7 +93,6 @@ export default ({ data, series }) => {
     resetStackData(seriesZ);
     setStackData(dataY, seriesY, stacks);
     setStackData(dataZ, seriesZ, stacks);
-
     return {
       bandLength: stacks.filter((item) => item.type == 'band').length,
       series: [...seriesY.values(), ...seriesZ.values()],