react-d3-zoom - npm Package Compare versions

Comparing version 0.5.1 to 0.5.2

lib/area_stack.js

@@ -47,16 +47,28 @@ "use strict";
 
+    var _props = this.props;
+    var margins = _props.margins;
+    var width = _props.width;
+    var height = _props.height;
+
+    this.zoomed = this.zoomed.bind(this);
     this.mkXDomain();
     this.mkYDomain(true);
-    this.mkXScale(this.setXDomain);
-    this.mkYScale(this.setYDomain);
-    this.zoomed = this.zoomed.bind(this);
 
     this.state = {
-      xScaleSet: this.setXScale,
-      yScaleSet: this.setYScale,
       xDomainSet: this.setXDomain,
       yDomainSet: this.setYDomain,
       onZoom: this.zoomed,
-      d3EventSet: null
+      d3EventSet: null,
+      xRange: this.props.xRange || [0, width - margins.left - margins.right],
+      yRange: this.props.yRange || [height - margins.top - margins.bottom, 0],
+      xRangeRoundBands: this.props.xRangeRoundBands || { interval: [0, width - margins.left - margins.right], padding: .1 }
     };
+
+    this.mkXScale(this.setXDomain);
+    this.mkYScale(this.setYDomain);
+
+    this.state = Object.assign(this.state, {
+      xScaleSet: this.setXScale,
+      yScaleSet: this.setYScale
+    });
   }
@@ -63,0 +75,0 @@

lib/bar_group.js

@@ -47,16 +47,28 @@ "use strict";
 
+    var _props = this.props;
+    var margins = _props.margins;
+    var width = _props.width;
+    var height = _props.height;
+
+    this.zoomed = this.zoomed.bind(this);
     this.mkXDomain();
     this.mkYDomain();
-    this.mkXScale(this.setXDomain);
-    this.mkYScale(this.setYDomain);
-    this.zoomed = this.zoomed.bind(this);
 
     this.state = {
-      xScaleSet: this.setXScale,
-      yScaleSet: this.setYScale,
       xDomainSet: this.setXDomain,
       yDomainSet: this.setYDomain,
       onZoom: this.zoomed,
-      d3EventSet: null
+      d3EventSet: null,
+      xRange: this.props.xRange || [0, width - margins.left - margins.right],
+      yRange: this.props.yRange || [height - margins.top - margins.bottom, 0],
+      xRangeRoundBands: this.props.xRangeRoundBands || { interval: [0, width - margins.left - margins.right], padding: .1 }
     };
+
+    this.mkXScale(this.setXDomain);
+    this.mkYScale(this.setYDomain);
+
+    this.state = Object.assign(this.state, {
+      xScaleSet: this.setXScale,
+      yScaleSet: this.setYScale
+    });
   }
@@ -63,0 +75,0 @@

lib/bar_stack.js

@@ -47,16 +47,28 @@ "use strict";
 
+    var _props = this.props;
+    var margins = _props.margins;
+    var width = _props.width;
+    var height = _props.height;
+
+    this.zoomed = this.zoomed.bind(this);
     this.mkXDomain();
     this.mkYDomain(true);
-    this.mkXScale(this.setXDomain);
-    this.mkYScale(this.setYDomain);
-    this.zoomed = this.zoomed.bind(this);
 
     this.state = {
-      xScaleSet: this.setXScale,
-      yScaleSet: this.setYScale,
       xDomainSet: this.setXDomain,
       yDomainSet: this.setYDomain,
       onZoom: this.zoomed,
-      d3EventSet: null
+      d3EventSet: null,
+      xRange: this.props.xRange || [0, width - margins.left - margins.right],
+      yRange: this.props.yRange || [height - margins.top - margins.bottom, 0],
+      xRangeRoundBands: this.props.xRangeRoundBands || { interval: [0, width - margins.left - margins.right], padding: .1 }
     };
+
+    this.mkXScale(this.setXDomain);
+    this.mkYScale(this.setYDomain);
+
+    this.state = Object.assign(this.state, {
+      xScaleSet: this.setXScale,
+      yScaleSet: this.setYScale
+    });
   }
@@ -63,0 +75,0 @@

lib/bar.js

@@ -47,16 +47,28 @@ "use strict";
 
+    var _props = this.props;
+    var margins = _props.margins;
+    var width = _props.width;
+    var height = _props.height;
+
+    this.zoomed = this.zoomed.bind(this);
     this.mkXDomain();
     this.mkYDomain();
-    this.mkXScale(this.setXDomain);
-    this.mkYScale(this.setYDomain);
-    this.zoomed = this.zoomed.bind(this);
 
     this.state = {
-      xScaleSet: this.setXScale,
-      yScaleSet: this.setYScale,
       xDomainSet: this.setXDomain,
       yDomainSet: this.setYDomain,
       onZoom: this.zoomed,
-      d3EventSet: null
+      d3EventSet: null,
+      xRange: this.props.xRange || [0, width - margins.left - margins.right],
+      yRange: this.props.yRange || [height - margins.top - margins.bottom, 0],
+      xRangeRoundBands: this.props.xRangeRoundBands || { interval: [0, width - margins.left - margins.right], padding: .1 }
     };
+
+    this.mkXScale(this.setXDomain);
+    this.mkYScale(this.setYDomain);
+
+    this.state = Object.assign(this.state, {
+      xScaleSet: this.setXScale,
+      yScaleSet: this.setYScale
+    });
   }
@@ -63,0 +75,0 @@

lib/commonProps.js

@@ -17,5 +17,2 @@ "use strict";
   },
-  xRange: [0, width - margins.left - margins.right],
-  yRange: [height - margins.top - margins.bottom, 0],
-  xRangeRoundBands: { interval: [0, width - margins.left - margins.right], padding: .1 },
   xScale: 'linear',
@@ -22,0 +19,0 @@ yScale: 'linear'

lib/inherit/index.js

@@ -50,4 +50,5 @@ 'use strict';
       var xScale = _props.xScale;
-      var xRange = _props.xRange;
-      var xRangeRoundBands = _props.xRangeRoundBands;
+      var _state = this.state;
+      var xRange = _state.xRange;
+      var xRangeRoundBands = _state.xRangeRoundBands;
 
@@ -61,3 +62,5 @@ var newXScale = {
 
-      return this.setXScale = (0, _reactD3Core.scale)(newXScale);
+      var newScale = (0, _reactD3Core.scale)(newXScale);
+
+      return this.setXScale = newScale;
     }
@@ -70,4 +73,5 @@ }, {
       var yScale = _props2.yScale;
-      var yRange = _props2.yRange;
-      var yRangeRoundBands = _props2.yRangeRoundBands;
+      var _state2 = this.state;
+      var yRange = _state2.yRange;
+      var yRangeRoundBands = _state2.yRangeRoundBands;
 
@@ -81,3 +85,5 @@ var newYScale = {
 
-      return this.setYScale = (0, _reactD3Core.scale)(newYScale);
+      var newScale = (0, _reactD3Core.scale)(newYScale);
+
+      return this.setYScale = newScale;
     }
@@ -87,5 +93,5 @@ }, {
     value: function zoomed(xScale, yScale) {
-      var _state = this.state;
-      var xScaleSet = _state.xScaleSet;
-      var yScaleSet = _state.yScaleSet;
+      var _state3 = this.state;
+      var xScaleSet = _state3.xScaleSet;
+      var yScaleSet = _state3.yScaleSet;
       var _props3 = this.props;
@@ -136,3 +142,3 @@ var zoomType = _props3.zoomType;
       zoomX: _react.PropTypes.bool,
-      zoomY: propTypes.bool
+      zoomY: _react.PropTypes.bool
     },
@@ -139,0 +145,0 @@ enumerable: true

lib/line.js

@@ -47,16 +47,28 @@ "use strict";
 
+    var _props = this.props;
+    var margins = _props.margins;
+    var width = _props.width;
+    var height = _props.height;
+
+    this.zoomed = this.zoomed.bind(this);
     this.mkXDomain();
     this.mkYDomain();
-    this.mkXScale(this.setXDomain);
-    this.mkYScale(this.setYDomain);
-    this.zoomed = this.zoomed.bind(this);
 
     this.state = {
-      xScaleSet: this.setXScale,
-      yScaleSet: this.setYScale,
       xDomainSet: this.setXDomain,
       yDomainSet: this.setYDomain,
       onZoom: this.zoomed,
-      d3EventSet: null
+      d3EventSet: null,
+      xRange: this.props.xRange || [0, width - margins.left - margins.right],
+      yRange: this.props.yRange || [height - margins.top - margins.bottom, 0],
+      xRangeRoundBands: this.props.xRangeRoundBands || { interval: [0, width - margins.left - margins.right], padding: .1 }
     };
+
+    this.mkXScale(this.setXDomain);
+    this.mkYScale(this.setYDomain);
+
+    this.state = Object.assign(this.state, {
+      xScaleSet: this.setXScale,
+      yScaleSet: this.setYScale
+    });
   }
@@ -63,0 +75,0 @@

lib/scatter.js

@@ -47,16 +47,28 @@ "use strict";
 
+    var _props = this.props;
+    var margins = _props.margins;
+    var width = _props.width;
+    var height = _props.height;
+
+    this.zoomed = this.zoomed.bind(this);
     this.mkXDomain();
     this.mkYDomain();
-    this.mkXScale(this.setXDomain);
-    this.mkYScale(this.setYDomain);
-    this.zoomed = this.zoomed.bind(this);
 
     this.state = {
-      xScaleSet: this.setXScale,
-      yScaleSet: this.setYScale,
       xDomainSet: this.setXDomain,
       yDomainSet: this.setYDomain,
       onZoom: this.zoomed,
-      d3EventSet: null
+      d3EventSet: null,
+      xRange: this.props.xRange || [0, width - margins.left - margins.right],
+      yRange: this.props.yRange || [height - margins.top - margins.bottom, 0],
+      xRangeRoundBands: this.props.xRangeRoundBands || { interval: [0, width - margins.left - margins.right], padding: .1 }
     };
+
+    this.mkXScale(this.setXDomain);
+    this.mkYScale(this.setYDomain);
+
+    this.state = Object.assign(this.state, {
+      xScaleSet: this.setXScale,
+      yScaleSet: this.setYScale
+    });
   }
@@ -63,0 +75,0 @@

package.json

 {
   "name": "react-d3-zoom",
-  "version": "0.5.1",
+  "version": "0.5.2",
   "description": "react-d3 zoom implementation",
@@ -5,0 +5,0 @@ "main": "./lib/index.js",

src/area_stack.jsx

@@ -34,16 +34,29 @@ "use strict";
 
+    const {
+      margins,
+      width,
+      height
+    } = this.props;
+
+    this.zoomed = this.zoomed.bind(this);
     this.mkXDomain();
     this.mkYDomain(true);
-    this.mkXScale(this.setXDomain);
-    this.mkYScale(this.setYDomain);
-    this.zoomed = this.zoomed.bind(this);
 
     this.state = {
-      xScaleSet: this.setXScale,
-      yScaleSet: this.setYScale,
       xDomainSet: this.setXDomain,
       yDomainSet: this.setYDomain,
       onZoom: this.zoomed,
-      d3EventSet: null
+      d3EventSet: null,
+      xRange: this.props.xRange || [0, width - margins.left - margins.right],
+      yRange: this.props.yRange || [height - margins.top - margins.bottom, 0],
+      xRangeRoundBands: this.props.xRangeRoundBands || {interval: [0, width - margins.left - margins.right], padding: .1}
     }
+
+    this.mkXScale(this.setXDomain);
+    this.mkYScale(this.setYDomain);
+
+    this.state = Object.assign(this.state, {
+      xScaleSet: this.setXScale,
+      yScaleSet: this.setYScale
+    })
   }
@@ -50,0 +63,0 @@

src/bar_group.jsx

@@ -34,16 +34,29 @@ "use strict";
 
+    const {
+      margins,
+      width,
+      height
+    } = this.props;
+
+    this.zoomed = this.zoomed.bind(this);
     this.mkXDomain();
     this.mkYDomain();
-    this.mkXScale(this.setXDomain);
-    this.mkYScale(this.setYDomain);
-    this.zoomed = this.zoomed.bind(this);
 
     this.state = {
-      xScaleSet: this.setXScale,
-      yScaleSet: this.setYScale,
       xDomainSet: this.setXDomain,
       yDomainSet: this.setYDomain,
       onZoom: this.zoomed,
-      d3EventSet: null
+      d3EventSet: null,
+      xRange: this.props.xRange || [0, width - margins.left - margins.right],
+      yRange: this.props.yRange || [height - margins.top - margins.bottom, 0],
+      xRangeRoundBands: this.props.xRangeRoundBands || {interval: [0, width - margins.left - margins.right], padding: .1}
     }
+
+    this.mkXScale(this.setXDomain);
+    this.mkYScale(this.setYDomain);
+
+    this.state = Object.assign(this.state, {
+      xScaleSet: this.setXScale,
+      yScaleSet: this.setYScale
+    })
   }
@@ -50,0 +63,0 @@

src/bar_stack.jsx

@@ -34,16 +34,29 @@ "use strict";
 
+    const {
+      margins,
+      width,
+      height
+    } = this.props;
+
+    this.zoomed = this.zoomed.bind(this);
     this.mkXDomain();
     this.mkYDomain(true);
-    this.mkXScale(this.setXDomain);
-    this.mkYScale(this.setYDomain);
-    this.zoomed = this.zoomed.bind(this);
 
     this.state = {
-      xScaleSet: this.setXScale,
-      yScaleSet: this.setYScale,
       xDomainSet: this.setXDomain,
       yDomainSet: this.setYDomain,
       onZoom: this.zoomed,
-      d3EventSet: null
+      d3EventSet: null,
+      xRange: this.props.xRange || [0, width - margins.left - margins.right],
+      yRange: this.props.yRange || [height - margins.top - margins.bottom, 0],
+      xRangeRoundBands: this.props.xRangeRoundBands || {interval: [0, width - margins.left - margins.right], padding: .1}
     }
+
+    this.mkXScale(this.setXDomain);
+    this.mkYScale(this.setYDomain);
+
+    this.state = Object.assign(this.state, {
+      xScaleSet: this.setXScale,
+      yScaleSet: this.setYScale
+    })
   }
@@ -50,0 +63,0 @@

src/bar.jsx

@@ -34,16 +34,29 @@ "use strict";
 
+    const {
+      margins,
+      width,
+      height
+    } = this.props;
+
+    this.zoomed = this.zoomed.bind(this);
     this.mkXDomain();
     this.mkYDomain();
-    this.mkXScale(this.setXDomain);
-    this.mkYScale(this.setYDomain);
-    this.zoomed = this.zoomed.bind(this);
 
     this.state = {
-      xScaleSet: this.setXScale,
-      yScaleSet: this.setYScale,
       xDomainSet: this.setXDomain,
       yDomainSet: this.setYDomain,
       onZoom: this.zoomed,
-      d3EventSet: null
+      d3EventSet: null,
+      xRange: this.props.xRange || [0, width - margins.left - margins.right],
+      yRange: this.props.yRange || [height - margins.top - margins.bottom, 0],
+      xRangeRoundBands: this.props.xRangeRoundBands || {interval: [0, width - margins.left - margins.right], padding: .1}
     }
+
+    this.mkXScale(this.setXDomain);
+    this.mkYScale(this.setYDomain);
+
+    this.state = Object.assign(this.state, {
+      xScaleSet: this.setXScale,
+      yScaleSet: this.setYScale
+    })
   }
@@ -50,0 +63,0 @@

src/commonProps.jsx

@@ -12,7 +12,4 @@ "use strict";
   y: (d) => {return +d;},
-  xRange: [0, width - margins.left - margins.right],
-  yRange: [height - margins.top - margins.bottom, 0],
-  xRangeRoundBands: {interval: [0, width - margins.left - margins.right], padding: .1},
   xScale: 'linear',
   yScale: 'linear'
 }

src/inherit/index.jsx

@@ -35,3 +35,3 @@ "use sctrict"
     zoomX: PropTypes.bool,
-    zoomY: propTypes.bool
+    zoomY: PropTypes.bool
   }
@@ -50,7 +50,10 @@
       data,
-      xScale,
-      xRange,
-      xRangeRoundBands,
+      xScale
     } = this.props;
 
+    const {
+      xRange,
+      xRangeRoundBands
+    } = this.state;
+
     var newXScale = {
@@ -63,3 +66,5 @@ scale: xScale,
 
-    return this.setXScale = scale(newXScale);
+    var newScale = scale(newXScale)
+
+    return this.setXScale = newScale;
   }
@@ -70,7 +75,10 @@
       data,
-      yScale,
-      yRange,
-      yRangeRoundBands,
+      yScale
     } = this.props;
 
+    const {
+      yRange,
+      yRangeRoundBands
+    } = this.state;
+
     var newYScale = {
@@ -83,3 +91,5 @@ scale: yScale,
 
-    return this.setYScale = scale(newYScale);
+    var newScale = scale(newYScale)
+
+    return this.setYScale = newScale;
   }
@@ -86,0 +96,0 @@

src/line.jsx

@@ -34,16 +34,29 @@ "use strict";
 
+    const {
+      margins,
+      width,
+      height
+    } = this.props;
+
+    this.zoomed = this.zoomed.bind(this);
     this.mkXDomain();
     this.mkYDomain();
-    this.mkXScale(this.setXDomain);
-    this.mkYScale(this.setYDomain);
-    this.zoomed = this.zoomed.bind(this);
 
     this.state = {
-      xScaleSet: this.setXScale,
-      yScaleSet: this.setYScale,
       xDomainSet: this.setXDomain,
       yDomainSet: this.setYDomain,
       onZoom: this.zoomed,
-      d3EventSet: null
+      d3EventSet: null,
+      xRange: this.props.xRange || [0, width - margins.left - margins.right],
+      yRange: this.props.yRange || [height - margins.top - margins.bottom, 0],
+      xRangeRoundBands: this.props.xRangeRoundBands || {interval: [0, width - margins.left - margins.right], padding: .1}
     }
+
+    this.mkXScale(this.setXDomain);
+    this.mkYScale(this.setYDomain);
+
+    this.state = Object.assign(this.state, {
+      xScaleSet: this.setXScale,
+      yScaleSet: this.setYScale
+    })
   }
@@ -50,0 +63,0 @@

src/scatter.jsx

@@ -34,16 +34,29 @@ "use strict";
 
+    const {
+      margins,
+      width,
+      height
+    } = this.props;
+
+    this.zoomed = this.zoomed.bind(this);
     this.mkXDomain();
     this.mkYDomain();
-    this.mkXScale(this.setXDomain);
-    this.mkYScale(this.setYDomain);
-    this.zoomed = this.zoomed.bind(this);
 
     this.state = {
-      xScaleSet: this.setXScale,
-      yScaleSet: this.setYScale,
       xDomainSet: this.setXDomain,
       yDomainSet: this.setYDomain,
       onZoom: this.zoomed,
-      d3EventSet: null
+      d3EventSet: null,
+      xRange: this.props.xRange || [0, width - margins.left - margins.right],
+      yRange: this.props.yRange || [height - margins.top - margins.bottom, 0],
+      xRangeRoundBands: this.props.xRangeRoundBands || {interval: [0, width - margins.left - margins.right], padding: .1}
     }
+
+    this.mkXScale(this.setXDomain);
+    this.mkYScale(this.setYDomain);
+
+    this.state = Object.assign(this.state, {
+      xScaleSet: this.setXScale,
+      yScaleSet: this.setYScale
+    })
   }
@@ -50,0 +63,0 @@

New alerts

License Policy Violation

License

This package is not allowed per your license policy. Review the package's license to ensure compliance.

Found 1 instance in 1 package

Fixed alerts

License Policy Violation

License

This package is not allowed per your license policy. Review the package's license to ensure compliance.

Found 1 instance in 1 package

Improved metrics

Total package byte prevSize

57908

increased by9.61%

Lines of code

1353

increased by9.55%

No dependency changes