react-d3-basic - npm Package Compare versions

Comparing version 0.5.0 to 0.5.1

lib/components/bar_group.js

@@ -39,17 +39,35 @@ "use strict";
   _createClass(BarGroup, [{
-    key: '_mkBarGroup',
-    value: function _mkBarGroup(dom) {
+    key: 'componentDidMount',
+    value: function componentDidMount() {
       var _props = this.props;
-      var height = _props.height;
-      var margins = _props.margins;
-      var dataset = _props.dataset;
-      var barClassName = _props.barClassName;
-      var barOpacity = _props.barOpacity;
-      var xScaleSet = _props.xScaleSet;
-      var yScaleSet = _props.yScaleSet;
-      var x1 = _props.x1;
-      var count = _props.count;
+      var onMouseOver = _props.onMouseOver;
       var onMouseOut = _props.onMouseOut;
-      var onMouseOver = _props.onMouseOver;
 
+      var barChart = this.refs["react-d3-basic__bar"];
+
+      _d32['default'].select(barChart).selectAll("rect").each(function (p) {
+        this.addEventListener('mouseover', function (e) {
+          onMouseOver(e);
+        });
+        this.addEventListener('mouseout', function (e) {
+          onMouseOut(e);
+        });
+      });
+    }
+  }, {
+    key: '_mkBarGroup',
+    value: function _mkBarGroup(dom) {
+      var _props2 = this.props;
+      var height = _props2.height;
+      var margins = _props2.margins;
+      var dataset = _props2.dataset;
+      var barClassName = _props2.barClassName;
+      var barOpacity = _props2.barOpacity;
+      var xScaleSet = _props2.xScaleSet;
+      var yScaleSet = _props2.yScaleSet;
+      var x1 = _props2.x1;
+      var count = _props2.count;
+      var onMouseOut = _props2.onMouseOut;
+      var onMouseOver = _props2.onMouseOver;
+
       // make areas
@@ -66,9 +84,4 @@ var chart = _d32['default'].select(dom).datum(dataset).attr("class", "bargroup");
         return dataset.color;
-      })
-      // not using ES6 fat arrow syntax, cause it will cause 'this' variable not passing issue see details in here:
-      // https://github.com/mbostock/d3/issues/2246
-      .on("mouseover", function (d) {
-        return onMouseOver(d, this);
-      }).on("mouseout", function (d) {
-        return onMouseOut(d, this);
+      }).attr('data-react-d3-origin', function (d) {
+        return JSON.stringify(d);
       });
@@ -88,2 +101,3 @@
       var barChart = _reactFauxDom2['default'].createElement('g');
+      barChart.setAttribute("ref", "react-d3-basic__bar");
       var bar = this._mkBarGroup(barChart);
@@ -90,0 +104,0 @@

lib/components/bar_stack.js

@@ -39,17 +39,35 @@ "use strict";
   _createClass(BarStack, [{
-    key: '_mkBarStack',
-    value: function _mkBarStack(dom) {
+    key: 'componentDidMount',
+    value: function componentDidMount() {
       var _props = this.props;
-      var height = _props.height;
-      var margins = _props.margins;
-      var dataset = _props.dataset;
-      var barClassName = _props.barClassName;
-      var barOpacity = _props.barOpacity;
-      var xScaleSet = _props.xScaleSet;
-      var yScaleSet = _props.yScaleSet;
-      var x1 = _props.x1;
-      var stackVal = _props.stackVal;
       var onMouseOver = _props.onMouseOver;
       var onMouseOut = _props.onMouseOut;
 
+      var barChart = this.refs["react-d3-basic__bar"];
+
+      _d32['default'].select(barChart).selectAll("rect").each(function (p) {
+        this.addEventListener('mouseover', function (e) {
+          onMouseOver(e);
+        });
+        this.addEventListener('mouseout', function (e) {
+          onMouseOut(e);
+        });
+      });
+    }
+  }, {
+    key: '_mkBarStack',
+    value: function _mkBarStack(dom) {
+      var _props2 = this.props;
+      var height = _props2.height;
+      var margins = _props2.margins;
+      var dataset = _props2.dataset;
+      var barClassName = _props2.barClassName;
+      var barOpacity = _props2.barOpacity;
+      var xScaleSet = _props2.xScaleSet;
+      var yScaleSet = _props2.yScaleSet;
+      var x1 = _props2.x1;
+      var stackVal = _props2.stackVal;
+      var onMouseOver = _props2.onMouseOver;
+      var onMouseOut = _props2.onMouseOut;
+
       // make areas
@@ -66,9 +84,4 @@ var chart = _d32['default'].select(dom).datum(dataset).attr("class", "g");
         return dataset.color;
-      })
-      // not using ES6 fat arrow syntax, cause it will cause 'this' variable not passing issue see details in here:
-      // https://github.com/mbostock/d3/issues/2246
-      .on("mouseover", function (d) {
-        return onMouseOver(d, this);
-      }).on("mouseout", function (d) {
-        return onMouseOut(d, this);
+      }).attr('data-react-d3-origin', function (d) {
+        return JSON.stringify(d);
       });
@@ -88,2 +101,3 @@
       var barChart = _reactFauxDom2['default'].createElement('g');
+      barChart.setAttribute("ref", "react-d3-basic__bar");
       var bar = this._mkBarStack(barChart);
@@ -90,0 +104,0 @@

lib/components/bar.js

@@ -39,16 +39,34 @@ "use strict";
   _createClass(Bar, [{
-    key: '_mkBar',
-    value: function _mkBar(dom) {
+    key: 'componentDidMount',
+    value: function componentDidMount() {
       var _props = this.props;
-      var height = _props.height;
-      var margins = _props.margins;
-      var dataset = _props.dataset;
-      var showBrush = _props.showBrush;
-      var barClassName = _props.barClassName;
-      var barOpacity = _props.barOpacity;
-      var xScaleSet = _props.xScaleSet;
-      var yScaleSet = _props.yScaleSet;
+      var onMouseOver = _props.onMouseOver;
       var onMouseOut = _props.onMouseOut;
-      var onMouseOver = _props.onMouseOver;
 
+      var barChart = this.refs["react-d3-basic__bar"];
+
+      _d32['default'].select(barChart).selectAll("rect").each(function (p) {
+        this.addEventListener('mouseover', function (e) {
+          onMouseOver(e);
+        });
+        this.addEventListener('mouseout', function (e) {
+          onMouseOut(e);
+        });
+      });
+    }
+  }, {
+    key: '_mkBar',
+    value: function _mkBar(dom) {
+      var _props2 = this.props;
+      var height = _props2.height;
+      var margins = _props2.margins;
+      var dataset = _props2.dataset;
+      var showBrush = _props2.showBrush;
+      var barClassName = _props2.barClassName;
+      var barOpacity = _props2.barOpacity;
+      var xScaleSet = _props2.xScaleSet;
+      var yScaleSet = _props2.yScaleSet;
+      var onMouseOut = _props2.onMouseOut;
+      var onMouseOver = _props2.onMouseOver;
+
       // make areas
@@ -63,9 +81,4 @@ var chart = _d32['default'].select(dom);
         return height - margins.top - margins.bottom - yScaleSet(d.y);
-      }).style("fill", dataset.color)
-      // not using ES6 fat arrow syntax, cause it will cause 'this' variable not passing issue see details in here:
-      // https://github.com/mbostock/d3/issues/2246
-      .on("mouseover", function (d) {
-        return onMouseOver(d, this);
-      }).on("mouseout", function (d) {
-        return onMouseOut(d, this, barOpacity);
+      }).style("fill", dataset.color).attr('data-react-d3-origin', function (d) {
+        return JSON.stringify(d);
       });
@@ -87,2 +100,3 @@
       var barChart = _reactFauxDom2['default'].createElement('g');
+      barChart.setAttribute("ref", "react-d3-basic__bar");
       var bar = this._mkBar(barChart);
@@ -89,0 +103,0 @@

package.json

 {
   "name": "react-d3-basic",
-  "version": "0.5.0",
+  "version": "0.5.1",
   "description": "react chart component",
@@ -5,0 +5,0 @@ "main": "./lib/index.js",

src/components/bar_group.jsx

@@ -27,2 +27,22 @@ "use strict";
 
+  componentDidMount () {
+    const {
+      onMouseOver,
+      onMouseOut
+    } = this.props;
+
+    var barChart = this.refs["react-d3-basic__bar"];
+
+    d3.select(barChart)
+      .selectAll("rect")
+      .each(function(p) {
+        this.addEventListener('mouseover', (e) => {
+          onMouseOver(e)
+        })
+        this.addEventListener('mouseout', (e) => {
+          onMouseOut(e)
+        })
+      })
+  }
+
   _mkBarGroup(dom) {
@@ -57,6 +77,3 @@ const {
       .style("fill", function(d) { return dataset.color; })
-      // not using ES6 fat arrow syntax, cause it will cause 'this' variable not passing issue see details in here:
-      // https://github.com/mbostock/d3/issues/2246
-      .on("mouseover", function(d) { return onMouseOver(d, this); })
-      .on("mouseout", function(d) { return onMouseOut(d, this); })
+      .attr('data-react-d3-origin', (d) => { return JSON.stringify(d)})
 
@@ -74,2 +91,3 @@ if(dataset.style) {
     var barChart = ReactFauxDOM.createElement('g');
+    barChart.setAttribute("ref", "react-d3-basic__bar")
     var bar = this._mkBarGroup(barChart);
@@ -76,0 +94,0 @@

src/components/bar_stack.jsx

@@ -27,2 +27,22 @@ "use strict";
 
+  componentDidMount () {
+    const {
+      onMouseOver,
+      onMouseOut
+    } = this.props;
+
+    var barChart = this.refs["react-d3-basic__bar"];
+
+    d3.select(barChart)
+      .selectAll("rect")
+      .each(function(p) {
+        this.addEventListener('mouseover', (e) => {
+          onMouseOver(e)
+        })
+        this.addEventListener('mouseout', (e) => {
+          onMouseOut(e)
+        })
+      })
+  }
+
   _mkBarStack(dom) {
@@ -61,6 +81,3 @@ const {
       .style("fill", (d) => { return dataset.color; })
-      // not using ES6 fat arrow syntax, cause it will cause 'this' variable not passing issue see details in here:
-      // https://github.com/mbostock/d3/issues/2246
-      .on("mouseover", function(d) { return onMouseOver(d, this); })
-      .on("mouseout", function(d) { return onMouseOut(d, this); })
+      .attr('data-react-d3-origin', (d) => { return JSON.stringify(d)})
 
@@ -78,2 +95,3 @@ if(dataset.style) {
     var barChart = ReactFauxDOM.createElement('g');
+    barChart.setAttribute("ref", "react-d3-basic__bar")
     var bar = this._mkBarStack(barChart);
@@ -80,0 +98,0 @@

src/components/bar.jsx

@@ -28,2 +28,22 @@ "use strict";
 
+  componentDidMount () {
+    const {
+      onMouseOver,
+      onMouseOut
+    } = this.props;
+
+    var barChart = this.refs["react-d3-basic__bar"];
+
+    d3.select(barChart)
+      .selectAll("rect")
+      .each(function(p) {
+        this.addEventListener('mouseover', (e) => {
+          onMouseOver(e)
+        })
+        this.addEventListener('mouseout', (e) => {
+          onMouseOut(e)
+        })
+      })
+  }
+
   _mkBar(dom) {
@@ -55,6 +75,3 @@ const {
       .style("fill", dataset.color )
-      // not using ES6 fat arrow syntax, cause it will cause 'this' variable not passing issue see details in here:
-      // https://github.com/mbostock/d3/issues/2246
-      .on("mouseover", function(d) { return onMouseOver(d, this); })
-      .on("mouseout", function(d) { return onMouseOut(d, this, barOpacity); })
+      .attr('data-react-d3-origin', (d) => { return JSON.stringify(d)})
 
@@ -76,2 +93,3 @@ if(dataset.style) {
     var barChart = ReactFauxDOM.createElement('g');
+    barChart.setAttribute("ref", "react-d3-basic__bar")
     var bar = this._mkBar(barChart);
@@ -78,0 +96,0 @@

No alert changes

Improved metrics

Total package byte prevSize

147327

increased by1.22%

Lines of code

2862

increased by2.91%

No dependency changes