victory-chart - npm Package Compare versions

Comparing version 21.6.1 to 21.6.2

CHANGELOG.md

 # VictoryChart Changelog
 
+## 21.6.2 (2017-08-19)
+
+- [511](https://github.com/FormidableLabs/victory-chart/pull/511) Bugfix: VictoryZoomContainer works properly with VictoryPortal wrapped children
+- [512](https://github.com/FormidableLabs/victory-chart/pull/512) Bugfix: fix allowZoom prop for panning only (broken by [496](https://github.com/FormidableLabs/victory-chart/pull/496))
+
 ## 21.6.1 (2017-08-09)
@@ -4,0 +9,0 @@

es/components/containers/victory-zoom-container.js

@@ -44,3 +44,2 @@ import _get from "lodash/get";
       value: function clipDataComponents(children, props) {
-        //eslint-disable-line max-statements
         var scale = props.scale,
@@ -55,8 +54,5 @@ clipContainerComponent = props.clipContainerComponent,
         var plottableHeight = Math.abs(rangeY[0] - rangeY[1]);
-        var childComponents = [];
-        var group = [];
-        var groupNumber = 0;
         var radius = Math.max.apply(Math, _toConsumableArray(rangeY));
-        var makeGroup = function (arr, index) {
-          return Array.isArray(arr) && arr.length ? React.cloneElement(clipContainerComponent, {
+        var makeGroup = function (child, index) {
+          return React.cloneElement(clipContainerComponent, {
             key: "ZoomClipContainer-" + index,
@@ -67,33 +63,19 @@ clipWidth: plottableWidth,
             translateY: Math.min.apply(Math, _toConsumableArray(rangeY)),
-            children: arr,
+            children: child,
             polar: polar,
             origin: polar ? origin : undefined,
             radius: polar ? radius : undefined
-          }) : null;
+          });
         };
-
-        var findNextAxis = function (start) {
-          var subset = children.slice(start);
-          return subset.findIndex(function (child) {
-            return child.type.displayName === "VictoryAxis";
-          }) + start;
-        };
-
-        var axisIndex = findNextAxis(0);
-
-        if (axisIndex === -1) {
-          return makeGroup(children, groupNumber);
-        }
-        for (var i = 0, len = children.length; i < len; i++) {
-          if (i === axisIndex) {
-            childComponents.push(makeGroup(group, groupNumber), children[i]);
-            axisIndex = findNextAxis(i + 1);
-            group = [];
-            groupNumber++;
+        return React.Children.toArray(children).map(function (child, index) {
+          var role = child && child.type && child.type.role;
+          if (role === "axis") {
+            return child;
+          } else if (role === "portal") {
+            var group = makeGroup(child.props.children, index);
+            return React.cloneElement(child, { children: group, key: "ZoomPortal-" + index });
           } else {
-            group.push(children[i]);
+            return makeGroup(child, index);
           }
-        }
-        childComponents.push(makeGroup(group, groupNumber));
-        return childComponents.filter(Boolean);
+        });
       }
@@ -152,5 +134,9 @@ }, {
 
+        //eslint-disable-next-line max-statements
         return childComponents.map(function (child) {
+          var role = child && child.type && child.type.role;
+          var currentChild = role === "portal" ? React.Children.toArray(child.props.children)[0] : child;
           var currentDomain = props.currentDomain,
-              zoomActive = props.zoomActive;
+              zoomActive = props.zoomActive,
+              allowZoom = props.allowZoom;
 
@@ -165,5 +151,5 @@ var originalDomain = _defaults({}, props.originalDomain, props.domain);
             domain = zoomDomain;
-          } else if (!zoomActive) {
+          } else if (allowZoom && !zoomActive) {
             // if user has zoomed all the way out, use the child domain
-            domain = child.props.domain;
+            domain = currentChild.props.domain;
           } else {
@@ -179,6 +165,7 @@ // default: use currentDomain, set by the event handlers
           }
-          return React.cloneElement(child, _defaults({
+          var newChild = React.cloneElement(currentChild, _defaults({
             domain: newDomain,
-            data: _this2.downsampleZoomData(props, child.props, newDomain)
-          }, child.props));
+            data: _this2.downsampleZoomData(props, currentChild.props, newDomain)
+          }, currentChild.props));
+          return role === "portal" ? React.cloneElement(child, { children: newChild }) : newChild;
         });
@@ -185,0 +172,0 @@ }

lib/components/containers/victory-zoom-container.js

@@ -67,3 +67,2 @@ Object.defineProperty(exports, "__esModule", {
       value: function clipDataComponents(children, props) {
-        //eslint-disable-line max-statements
         var scale = props.scale,
@@ -78,8 +77,5 @@ clipContainerComponent = props.clipContainerComponent,
         var plottableHeight = Math.abs(rangeY[0] - rangeY[1]);
-        var childComponents = [];
-        var group = [];
-        var groupNumber = 0;
         var radius = Math.max.apply(Math, _toConsumableArray(rangeY));
-        var makeGroup = function (arr, index) {
-          return Array.isArray(arr) && arr.length ? _react2.default.cloneElement(clipContainerComponent, {
+        var makeGroup = function (child, index) {
+          return _react2.default.cloneElement(clipContainerComponent, {
             key: "ZoomClipContainer-" + index,
@@ -90,33 +86,19 @@ clipWidth: plottableWidth,
             translateY: Math.min.apply(Math, _toConsumableArray(rangeY)),
-            children: arr,
+            children: child,
             polar: polar,
             origin: polar ? origin : undefined,
             radius: polar ? radius : undefined
-          }) : null;
+          });
         };
-
-        var findNextAxis = function (start) {
-          var subset = children.slice(start);
-          return subset.findIndex(function (child) {
-            return child.type.displayName === "VictoryAxis";
-          }) + start;
-        };
-
-        var axisIndex = findNextAxis(0);
-
-        if (axisIndex === -1) {
-          return makeGroup(children, groupNumber);
-        }
-        for (var i = 0, len = children.length; i < len; i++) {
-          if (i === axisIndex) {
-            childComponents.push(makeGroup(group, groupNumber), children[i]);
-            axisIndex = findNextAxis(i + 1);
-            group = [];
-            groupNumber++;
+        return _react2.default.Children.toArray(children).map(function (child, index) {
+          var role = child && child.type && child.type.role;
+          if (role === "axis") {
+            return child;
+          } else if (role === "portal") {
+            var group = makeGroup(child.props.children, index);
+            return _react2.default.cloneElement(child, { children: group, key: "ZoomPortal-" + index });
           } else {
-            group.push(children[i]);
+            return makeGroup(child, index);
           }
-        }
-        childComponents.push(makeGroup(group, groupNumber));
-        return childComponents.filter(Boolean);
+        });
       }
@@ -175,5 +157,9 @@ }, {
 
+        //eslint-disable-next-line max-statements
         return childComponents.map(function (child) {
+          var role = child && child.type && child.type.role;
+          var currentChild = role === "portal" ? _react2.default.Children.toArray(child.props.children)[0] : child;
           var currentDomain = props.currentDomain,
-              zoomActive = props.zoomActive;
+              zoomActive = props.zoomActive,
+              allowZoom = props.allowZoom;
 
@@ -188,5 +174,5 @@ var originalDomain = (0, _defaults3.default)({}, props.originalDomain, props.domain);
             domain = zoomDomain;
-          } else if (!zoomActive) {
+          } else if (allowZoom && !zoomActive) {
             // if user has zoomed all the way out, use the child domain
-            domain = child.props.domain;
+            domain = currentChild.props.domain;
           } else {
@@ -202,6 +188,7 @@ // default: use currentDomain, set by the event handlers
           }
-          return _react2.default.cloneElement(child, (0, _defaults3.default)({
+          var newChild = _react2.default.cloneElement(currentChild, (0, _defaults3.default)({
             domain: newDomain,
-            data: _this2.downsampleZoomData(props, child.props, newDomain)
-          }, child.props));
+            data: _this2.downsampleZoomData(props, currentChild.props, newDomain)
+          }, currentChild.props));
+          return role === "portal" ? _react2.default.cloneElement(child, { children: newChild }) : newChild;
         });
@@ -208,0 +195,0 @@ }

package.json

 {
   "name": "victory-chart",
-  "version": "21.6.1",
+  "version": "21.6.2",
   "description": "Chart Component for Victory",
@@ -5,0 +5,0 @@ "main": "lib/index.js",

src/components/containers/victory-zoom-container.js

@@ -101,3 +101,3 @@ import PropTypes from "prop-types";
 
-  clipDataComponents(children, props) { //eslint-disable-line max-statements
+  clipDataComponents(children, props) {
     const { scale, clipContainerComponent, polar, origin } = props;
@@ -108,44 +108,27 @@ const rangeX = scale.x.range();
     const plottableHeight = Math.abs(rangeY[0] - rangeY[1]);
-    const childComponents = [];
-    let group = [];
-    let groupNumber = 0;
     const radius = Math.max(...rangeY);
-    const makeGroup = (arr, index) => {
-      return Array.isArray(arr) && arr.length ?
-        React.cloneElement(clipContainerComponent, {
-          key: `ZoomClipContainer-${index}`,
-          clipWidth: plottableWidth,
-          clipHeight: plottableHeight,
-          translateX: Math.min(...rangeX),
-          translateY: Math.min(...rangeY),
-          children: arr,
-          polar,
-          origin: polar ? origin : undefined,
-          radius: polar ? radius : undefined
-        }) :
-        null;
+    const makeGroup = (child, index) => {
+      return React.cloneElement(clipContainerComponent, {
+        key: `ZoomClipContainer-${index}`,
+        clipWidth: plottableWidth,
+        clipHeight: plottableHeight,
+        translateX: Math.min(...rangeX),
+        translateY: Math.min(...rangeY),
+        children: child,
+        polar,
+        origin: polar ? origin : undefined,
+        radius: polar ? radius : undefined
+      });
     };
-
-    const findNextAxis = (start) => {
-      const subset = children.slice(start);
-      return subset.findIndex((child) => child.type.displayName === "VictoryAxis") + start;
-    };
-
-    let axisIndex = findNextAxis(0);
-
-    if (axisIndex === -1) {
-      return makeGroup(children, groupNumber);
-    }
-    for (let i = 0, len = children.length; i < len; i++) {
-      if (i === axisIndex) {
-        childComponents.push(makeGroup(group, groupNumber), children[i]);
-        axisIndex = findNextAxis(i + 1);
-        group = [];
-        groupNumber++;
+    return React.Children.toArray(children).map((child, index) => {
+      const role = child && child.type && child.type.role;
+      if (role === "axis") {
+        return child;
+      } else if (role === "portal") {
+        const group = makeGroup(child.props.children, index);
+        return React.cloneElement(child, { children: group, key: `ZoomPortal-${index}` });
       } else {
-        group.push(children[i]);
+        return makeGroup(child, index);
       }
-    }
-    childComponents.push(makeGroup(group, groupNumber));
-    return childComponents.filter(Boolean);
+    });
   }
@@ -188,4 +171,8 @@
 
+    //eslint-disable-next-line max-statements
     return childComponents.map((child) => {
-      const { currentDomain, zoomActive } = props;
+      const role = child && child.type && child.type.role;
+      const currentChild = role === "portal" ?
+        React.Children.toArray(child.props.children)[0] : child;
+      const { currentDomain, zoomActive, allowZoom } = props;
       const originalDomain = defaults({}, props.originalDomain, props.domain);
@@ -199,5 +186,5 @@ const zoomDomain = defaults({}, props.zoomDomain, props.domain);
         domain = zoomDomain;
-      } else if (!zoomActive) {
+      } else if (allowZoom && !zoomActive) {
         // if user has zoomed all the way out, use the child domain
-        domain = child.props.domain;
+        domain = currentChild.props.domain;
       } else {
@@ -216,9 +203,10 @@ // default: use currentDomain, set by the event handlers
       }
-      return React.cloneElement(
-        child,
+      const newChild = React.cloneElement(
+        currentChild,
         defaults({
           domain: newDomain,
-          data: this.downsampleZoomData(props, child.props, newDomain)
-        }, child.props)
+          data: this.downsampleZoomData(props, currentChild.props, newDomain)
+        }, currentChild.props)
       );
+      return role === "portal" ? React.cloneElement(child, { children: newChild }) : newChild;
     });
@@ -225,0 +213,0 @@ }

No alert changes

Improved metrics

Total package byte prevSize

2763520

increased by0.03%

Worsened metrics

Lines of code

50175

decreased by-0.07%

No dependency changes