react-d3-core - npm Package Compare versions

Comparing version 0.1.6 to 0.1.7

lib/axis/axis.js

@@ -37,3 +37,3 @@ "use strict";
     value: function componentDidMount() {
-      this._mkAxis();
+      this._mkAxis(this.props);
     }
@@ -50,3 +50,3 @@ }, {
         if (_this.props[k] !== nextProps[k]) {
-          _this._mkAxis();
+          _this._mkAxis(nextProps);
         }
@@ -57,10 +57,9 @@ });
     key: '_mkAxis',
-    value: function _mkAxis() {
-      var _props = this.props;
-      var showAxis = _props.showAxis;
-      var type = _props.type;
+    value: function _mkAxis(props) {
+      var showAxis = props.showAxis;
+      var type = props.type;
 
       var axisDom = d3.select(_react2['default'].findDOMNode(this.refs.axisGroup));
 
-      axisDom.call(this._mkTickAxis());
+      axisDom.call(this._mkTickAxis(props));
 
@@ -78,15 +77,14 @@ if (!showAxis) {
     key: '_mkTickAxis',
-    value: function _mkTickAxis() {
-      var _props2 = this.props;
-      var type = _props2.type;
-      var tickOrient = _props2.tickOrient;
-      var tickFormat = _props2.tickFormat;
-      var tickPadding = _props2.tickPadding;
-      var innerTickSize = _props2.innerTickSize;
-      var outerTickSize = _props2.outerTickSize;
-      var ticks = _props2.ticks;
+    value: function _mkTickAxis(props) {
+      var type = props.type;
+      var tickOrient = props.tickOrient;
+      var tickFormat = props.tickFormat;
+      var tickPadding = props.tickPadding;
+      var innerTickSize = props.innerTickSize;
+      var outerTickSize = props.outerTickSize;
+      var ticks = props.ticks;
 
       var func = d3.svg.axis();
 
-      func.scale(this._mkScale());
+      func.scale(this._mkScale(props));
 
@@ -109,6 +107,6 @@ if (tickOrient) func.orient(tickOrient);
     key: '_mkScale',
-    value: function _mkScale() {
-      var type = this.props.type;
+    value: function _mkScale(props) {
+      var type = props.type;
 
-      var func = (0, _utilsScale.scale)(this.props);
+      var func = (0, _utilsScale.scale)(props);
 
@@ -125,6 +123,6 @@ if (type === 'x' || type === 'y') {
     value: function render() {
-      var _props3 = this.props;
-      var gridAxisClassName = _props3.gridAxisClassName;
-      var axisClassName = _props3.axisClassName;
-      var type = _props3.type;
+      var _props = this.props;
+      var gridAxisClassName = _props.gridAxisClassName;
+      var axisClassName = _props.axisClassName;
+      var type = _props.type;
 
@@ -131,0 +129,0 @@ if (type === 'x') var axisClasses = axisClassName + ' axis x';else if (type === 'y') var axisClasses = axisClassName + ' axis y';else if (type === 'gridx' || type === 'gridy') var axisClasses = gridAxisClassName + ' grid-axis axis';

lib/axis/label.js

@@ -37,3 +37,3 @@ "use strict";
     value: function componentDidMount() {
-      this._mkLabel();
+      this._mkLabel(this.props);
     }
@@ -50,3 +50,3 @@ }, {
         if (_this.props[k] !== nextProps[k]) {
-          _this._mkLabel();
+          _this._mkLabel(nextProps);
         }
@@ -57,13 +57,12 @@ });
     key: '_mkLabel',
-    value: function _mkLabel() {
-      var _props = this.props;
-      var height = _props.height;
-      var width = _props.width;
-      var marigns = _props.marigns;
-      var labelOffset = _props.labelOffset;
-      var labelTitle = _props.labelTitle;
-      var labelPosition = _props.labelPosition;
-      var vTransform = _props.vTransform;
-      var hTransform = _props.hTransform;
-      var textAnchor = _props.textAnchor;
+    value: function _mkLabel(props) {
+      var height = props.height;
+      var width = props.width;
+      var marigns = props.marigns;
+      var labelOffset = props.labelOffset;
+      var labelTitle = props.labelTitle;
+      var labelPosition = props.labelPosition;
+      var vTransform = props.vTransform;
+      var hTransform = props.hTransform;
+      var textAnchor = props.textAnchor;
 
@@ -70,0 +69,0 @@ var labelDom = d3.select(_react2['default'].findDOMNode(this.refs.labelAxis));

lib/legend.js

@@ -37,12 +37,30 @@ "use strict";
     value: function componentDidMount() {
-      var _props = this.props;
-      var width = _props.width;
-      var margins = _props.margins;
-      var chartSeries = _props.chartSeries;
-      var legendClassName = _props.legendClassName;
-      var legendPosition = _props.legendPosition;
-      var legendOffset = _props.legendOffset;
+      this._mkLegend(this.props);
+    }
+  }, {
+    key: 'componentWillReceiveProps',
+    value: function componentWillReceiveProps(nextProps) {
+      var _this = this;
 
-      var legendArea = d3.selectAll(_react2['default'].findDOMNode(this.refs.legendArea));
+      // check when to rebuild axis and update states
+      var keys = ['width', 'height', 'margins', 'legendClassName', 'legendOffset', 'legendPosition', 'chartSeries'];
 
+      keys.forEach(function (k) {
+        if (_this.props[k] !== nextProps[k]) {
+          d3.select(_react2['default'].findDOMNode(_this.refs.legendArea)).html('');
+          _this._mkLegend(nextProps);
+        }
+      });
+    }
+  }, {
+    key: '_mkLegend',
+    value: function _mkLegend(props) {
+      var width = props.width;
+      var margins = props.margins;
+      var chartSeries = props.chartSeries;
+      var legendClassName = props.legendClassName;
+      var legendPosition = props.legendPosition;
+      var legendOffset = props.legendOffset;
+
+      var legendArea = d3.select(_react2['default'].findDOMNode(this.refs.legendArea)).selectAll('g');
       // make legends
@@ -49,0 +67,0 @@ var legend = legendArea.data(chartSeries).enter().append("g").attr("class", legendClassName + ' legend');

package.json

 {
   "name": "react-d3-core",
-  "version": "0.1.6",
+  "version": "0.1.7",
   "description": "react chart core component",
@@ -5,0 +5,0 @@ "main": "./lib/index.js",

src/axis/axis.jsx

@@ -37,3 +37,3 @@ "use strict";
   componentDidMount() {
-    this._mkAxis();
+    this._mkAxis(this.props);
   }
@@ -57,7 +57,7 @@
       'ticks'
-    ];
+    ]
 
     keys.forEach((k) => {
       if(this.props[k] !== nextProps[k]) {
-        this._mkAxis();
+        this._mkAxis(nextProps);
       }
@@ -67,11 +67,11 @@ })
 
-  _mkAxis() {
+  _mkAxis(props) {
     const {
       showAxis,
       type
-    } = this.props;
+    } = props;
 
     var axisDom = d3.select(React.findDOMNode(this.refs.axisGroup))
 
-    axisDom.call(this._mkTickAxis());
+    axisDom.call(this._mkTickAxis(props));
 
@@ -90,3 +90,3 @@ if(!showAxis) {
 
-  _mkTickAxis () {
+  _mkTickAxis (props) {
     const {
@@ -100,7 +100,7 @@ type,
       ticks,
-    } = this.props;
+    } = props;
 
     var func = d3.svg.axis();
 
-    func.scale(this._mkScale());
+    func.scale(this._mkScale(props));
 
@@ -129,9 +129,9 @@ if(tickOrient)
 
-  _mkScale () {
+  _mkScale (props) {
 
     const{
       type
-    } = this.props;
+    } = props;
 
-    var func = scale(this.props);
+    var func = scale(props);
 
@@ -138,0 +138,0 @@ if(type === 'x' || type === 'y') {

src/axis/label.jsx

@@ -42,3 +42,3 @@ "use strict";
   componentDidMount () {
-    this._mkLabel();
+    this._mkLabel(this.props);
   }
@@ -63,3 +63,3 @@
       if(this.props[k] !== nextProps[k]) {
-        this._mkLabel();
+        this._mkLabel(nextProps);
       }
@@ -69,3 +69,3 @@ })
 
-  _mkLabel() {
+  _mkLabel(props) {
     const {
@@ -81,3 +81,3 @@ height,
       textAnchor
-    } = this.props;
+    } = props;
 
@@ -84,0 +84,0 @@ var labelDom = d3.select(React.findDOMNode(this.refs.labelAxis))

src/legend.jsx

@@ -34,2 +34,27 @@ "use strict";
   componentDidMount () {
+    this._mkLegend(this.props);
+  }
+
+  componentWillReceiveProps(nextProps) {
+    // check when to rebuild axis and update states
+    const keys = [
+      'width',
+      'height',
+      'margins',
+      'legendClassName',
+      'legendOffset',
+      'legendPosition',
+      'chartSeries'
+    ];
+
+    keys.forEach((k) => {
+      if(this.props[k] !== nextProps[k]) {
+        d3.select(React.findDOMNode(this.refs.legendArea))
+          .html('')
+        this._mkLegend(nextProps);
+      }
+    })
+  }
+
+  _mkLegend(props) {
     const {
@@ -42,6 +67,6 @@ width,
       legendOffset
-    } = this.props;
+    } = props;
 
-    var legendArea = d3.selectAll(React.findDOMNode(this.refs.legendArea));
-
+    var legendArea = d3.select(React.findDOMNode(this.refs.legendArea))
+      .selectAll('g');
     // make legends
@@ -48,0 +73,0 @@ var legend = legendArea

webpack.config.js

@@ -65,3 +65,4 @@
     xaxis: './example/src_es5/xaxis.jsx',
-    xaxis_click: './example/src_es5/xaxis_click.jsx'
+    xaxis_click: './example/src_es5/xaxis_click.jsx',
+    legend_click: './example/src_es5/legend_click.jsx'
   },
@@ -68,0 +69,0 @@

No alert changes

Improved metrics

Total package byte prevSize

4347743

increased by0.03%

Lines of code

32059

increased by0.12%

No dependency changes