react-d3-core - npm Package Compare versions

Comparing version 0.2.3 to 0.3.0

lib/axis/axis.js

@@ -21,2 +21,10 @@ "use strict";
 
+var _d3 = require('d3');
+
+var _d32 = _interopRequireDefault(_d3);
+
+var _reactFauxDom = require('react-faux-dom');
+
+var _reactFauxDom2 = _interopRequireDefault(_reactFauxDom);
+
 var _utilsScale = require('../utils/scale');
@@ -34,53 +42,16 @@
   _createClass(Axis, [{
-    key: 'componentDidMount',
-    value: function componentDidMount() {
-      this._mkAxis(this.props);
-    }
-  }, {
-    key: 'componentWillReceiveProps',
-    value: function componentWillReceiveProps(nextProps) {
-      var _this = this;
-
-      // check when to rebuild axis and update states
-      var keys = ['type', 'showAxis', 'scale', 'range', 'domain', 'range', 'rangeRoundBands', 'tickOrient', 'tickFormat', 'tickPadding', 'innerTickSize', 'outerTickSize', 'ticks'];
-
-      keys.forEach(function (k) {
-        if (_this.props[k] !== nextProps[k]) {
-          _this._mkAxis(nextProps);
-        }
-      });
-    }
-  }, {
-    key: '_mkAxis',
-    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(props));
-
-      if (!showAxis) {
-        axisDom.selectAll(".axis .tick text").style("opacity", "0");
-
-        if (type === 'gridx' || type === 'gridy') {
-          // hide domain in grids
-          axisDom.selectAll(".axis .domain").style("opacity", "0");
-        }
-      }
-    }
-  }, {
     key: '_mkTickAxis',
-    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;
+    value: function _mkTickAxis() {
+      var _props = this.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();
+      var func = _d32['default'].svg.axis();
 
-      func.scale(this._mkScale(props));
+      func.scale(this._mkScale(this.props));
 
@@ -103,6 +74,6 @@ if (tickOrient) func.orient(tickOrient);
     key: '_mkScale',
-    value: function _mkScale(props) {
-      var type = props.type;
+    value: function _mkScale() {
+      var type = this.props.type;
 
-      var func = (0, _utilsScale.scale)(props);
+      var func = (0, _utilsScale.scale)(this.props);
 
@@ -119,13 +90,27 @@ if (type === 'x' || type === 'y') {
     value: function render() {
-      var _props = this.props;
-      var gridAxisClassName = _props.gridAxisClassName;
-      var axisClassName = _props.axisClassName;
-      var type = _props.type;
+      var _props2 = this.props;
+      var showAxis = _props2.showAxis;
+      var gridAxisClassName = _props2.gridAxisClassName;
+      var axisClassName = _props2.axisClassName;
+      var type = _props2.type;
 
+      var axisGroup = _reactFauxDom2['default'].createElement('g');
+
       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';
 
-      return _react2['default'].createElement('g', {
-        className: axisClasses,
-        ref: 'axisGroup'
-      });
+      axisGroup.setAttribute('class', axisClasses);
+
+      var axisDom = _d32['default'].select(axisGroup);
+
+      axisDom.call(this._mkTickAxis());
+
+      if (!showAxis) {
+        axisDom.selectAll(".axis .tick text").style("opacity", "0");
+        if (type === 'gridx' || type === 'gridy') {
+          // hide domain in grids
+          axisDom.selectAll(".axis .domain").style("opacity", "0");
+        }
+      }
+
+      return axisDom.node().toReact();
     }
@@ -132,0 +117,0 @@ }], [{

lib/axis/label.js

@@ -21,2 +21,10 @@ "use strict";
 
+var _d3 = require('d3');
+
+var _d32 = _interopRequireDefault(_d3);
+
+var _reactFauxDom = require('react-faux-dom');
+
+var _reactFauxDom2 = _interopRequireDefault(_reactFauxDom);
+
 var _commonProps = require('../commonProps');
@@ -36,34 +44,16 @@
   _createClass(Label, [{
-    key: 'componentDidMount',
-    value: function componentDidMount() {
-      this._mkLabel(this.props);
-    }
-  }, {
-    key: 'componentWillReceiveProps',
-    value: function componentWillReceiveProps(nextProps) {
-      var _this = this;
-
-      // check when to rebuild label and update states
-      var keys = ['width', 'height', 'margins', 'hTransform', 'vTransform', 'textAnchor', 'labelTitle', 'labelPosition', 'labelOffset', 'labelClassName'];
-
-      keys.forEach(function (k) {
-        if (_this.props[k] !== nextProps[k]) {
-          _this._mkLabel(nextProps);
-        }
-      });
-    }
-  }, {
     key: '_mkLabel',
-    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;
+    value: function _mkLabel(dom) {
+      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;
 
-      var labelDom = d3.select(_react2['default'].findDOMNode(this.refs.labelAxis));
+      var labelDom = _d32['default'].select(dom);
 
@@ -82,2 +72,4 @@ if (labelPosition === 'top') {
       }
+
+      return labelDom;
     }
@@ -87,5 +79,11 @@ }, {
     value: function render() {
-      return _react2['default'].createElement('text', {
-        ref: 'labelAxis'
-      });
+      var labelClassName = this.props.labelClassName;
+
+      var labelText = _reactFauxDom2['default'].createElement('text');
+      var labelClasses = labelClassName + ' label';
+      labelText.setAttribute('class', labelClasses);
+
+      var labelDom = this._mkLabel(labelText);
+
+      return labelDom.node().toReact();
     }
@@ -92,0 +90,0 @@ }], [{

lib/container/svg.js

@@ -21,2 +21,6 @@ "use strict";
 
+var _d3 = require('d3');
+
+var _d32 = _interopRequireDefault(_d3);
+
 var _commonProps = require('../commonProps');
@@ -63,7 +67,7 @@
 
-        var zoom = d3.behavior.zoom().x(xScaleSet).y(yScaleSet).scaleExtent([1, 10]).on("zoom", function () {
+        var zoom = _d32['default'].behavior.zoom().x(xScaleSet).y(yScaleSet).scaleExtent([1, 10]).on("zoom", function () {
           onZoom.call(_this, xScaleSet, yScaleSet);
         });
 
-        d3.select(_react2['default'].findDOMNode(this.refs.svgContainer)).call(zoom);
+        _d32['default'].select(_react2['default'].findDOMNode(this.refs.svgContainer)).call(zoom);
       }
@@ -70,0 +74,0 @@ }

lib/legend.js

@@ -21,2 +21,6 @@ "use strict";
 
+var _reactFauxDom = require('react-faux-dom');
+
+var _reactFauxDom2 = _interopRequireDefault(_reactFauxDom);
+
 var _commonProps = require('./commonProps');
@@ -36,34 +40,15 @@
   _createClass(Legend, [{
-    key: 'componentDidMount',
-    value: function componentDidMount() {
-      this._mkLegend(this.props);
-    }
-  }, {
-    key: 'componentWillReceiveProps',
-    value: function componentWillReceiveProps(nextProps) {
-      var _this = this;
-
-      // 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;
+    value: function _mkLegend(dom) {
+      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;
 
-      var legendArea = d3.select(_react2['default'].findDOMNode(this.refs.legendArea)).selectAll('g');
+      var legendArea = d3.select(dom);
       // make legends
-      var legend = legendArea.data(chartSeries).enter().append("g").attr("class", legendClassName + ' legend');
+      var legend = legendArea.selectAll('g').data(chartSeries).enter().append("g").attr("class", legendClassName + ' legend');
 
@@ -95,2 +80,4 @@ var bgRect = legend.append("rect").attr("y", -4).attr("width", 220).attr("height", 20).style("fill", "#EEE").style("fill-opacity", 0.3);
       }
+
+      return legendArea;
     }
@@ -100,5 +87,11 @@ }, {
     value: function render() {
-      return _react2['default'].createElement('g', {
-        ref: 'legendArea'
-      });
+      var legendClassName = this.props.legendClassName;
+
+      var legendGroup = _reactFauxDom2['default'].createElement('g');
+      var legendClasses = legendClassName + ' legend';
+      legendGroup.setAttribute('class', legendClasses);
+
+      var legendDom = this._mkLegend(legendGroup);
+
+      return legendDom.node().toReact();
     }
@@ -105,0 +98,0 @@ }], [{

lib/utils/scale.js

@@ -8,2 +8,8 @@ 'use strict';
 
+function _interopRequireDefault(obj) { return obj && obj.__esModule ? obj : { 'default': obj }; }
+
+var _d3 = require('d3');
+
+var _d32 = _interopRequireDefault(_d3);
+
 function scale(props) {
@@ -15,3 +21,3 @@ var type = props.type;
 
-  if (scale === 'linear') func = d3.scale.linear();else if (scale === 'identity') func = d3.scale.identity();else if (scale === 'sqrt') func = d3.scale.sqrt();else if (scale === 'pow') func = d3.scale.pow();else if (scale === 'log') func = d3.scale.log();else if (scale === 'quantize') func = d3.scale.quantize();else if (scale === 'quantile') func = d3.scale.quantile();else if (scale === 'ordinal') func = d3.scale.ordinal();else if (scale === 'time') func = d3.time.scale();else new Error('Please check your axis scale setting. "' + scale + '" scale is invalid. ');
+  if (scale === 'linear') func = _d32['default'].scale.linear();else if (scale === 'identity') func = _d32['default'].scale.identity();else if (scale === 'sqrt') func = _d32['default'].scale.sqrt();else if (scale === 'pow') func = _d32['default'].scale.pow();else if (scale === 'log') func = _d32['default'].scale.log();else if (scale === 'quantize') func = _d32['default'].scale.quantize();else if (scale === 'quantile') func = _d32['default'].scale.quantile();else if (scale === 'ordinal') func = _d32['default'].scale.ordinal();else if (scale === 'time') func = _d32['default'].time.scale();else new Error('Please check your axis scale setting. "' + scale + '" scale is invalid. ');
 
@@ -18,0 +24,0 @@ func = _mkScaleSettings(props, func);

package.json

 {
   "name": "react-d3-core",
-  "version": "0.2.3",
+  "version": "0.3.0",
   "description": "react-d3 chart core component",
@@ -28,8 +28,11 @@ "main": "./lib/index.js",
     "d3": "^3.5.6",
-    "react": "^0.13.3"
+    "react": "^0.13.3",
+    "react-faux-dom": "^1.1.0"
   },
   "jest": {
     "scriptPreprocessor": "./node_modules/babel-jest",
-    "unmockedModulePathPatterns": ["./node_modules/react"]
+    "unmockedModulePathPatterns": [
+      "./node_modules/react"
+    ]
   }
 }

README.md

@@ -19,2 +19,7 @@ # react-d3-core
 
+## LIVE DEMO
+
+http://reactd3.org/docs/core
+
+
 ## Supported Components
@@ -21,0 +26,0 @@

src/axis/axis.jsx

@@ -10,2 +10,10 @@ "use strict";
 import {
+  default as d3
+} from 'd3';
+
+import {
+  default as ReactFauxDOM
+} from 'react-faux-dom';
+
+import {
   scale as scale
@@ -35,55 +43,4 @@ } from '../utils/scale';
 
-  componentDidMount() {
-    this._mkAxis(this.props);
-  }
-
-  componentWillReceiveProps(nextProps) {
-    // check when to rebuild axis and update states
-    const keys = [
-      'type',
-      'showAxis',
-      'scale',
-      'range',
-      'domain',
-      'range',
-      'rangeRoundBands',
-      'tickOrient',
-      'tickFormat',
-      'tickPadding',
-      'innerTickSize',
-      'outerTickSize',
-      'ticks'
-    ]
-
-    keys.forEach((k) => {
-      if(this.props[k] !== nextProps[k]) {
-        this._mkAxis(nextProps);
-      }
-    })
-  }
-
-  _mkAxis(props) {
+  _mkTickAxis () {
     const {
-      showAxis,
-      type
-    } = props;
-
-    var axisDom = d3.select(React.findDOMNode(this.refs.axisGroup))
-
-    axisDom.call(this._mkTickAxis(props));
-
-    if(!showAxis) {
-      axisDom.selectAll(".axis .tick text")
-        .style("opacity", "0")
-
-      if(type === 'gridx' || type === 'gridy') {
-        // hide domain in grids
-        axisDom.selectAll(".axis .domain")
-          .style("opacity", "0")
-      }
-    }
-  }
-
-  _mkTickAxis (props) {
-    const {
       type,
@@ -96,7 +53,7 @@ tickOrient,
       ticks,
-    } = props;
+    } = this.props;
 
     var func = d3.svg.axis();
 
-    func.scale(this._mkScale(props));
+    func.scale(this._mkScale(this.props));
 
@@ -125,9 +82,9 @@ if(tickOrient)
 
-  _mkScale (props) {
+  _mkScale () {
 
     const{
       type
-    } = props;
+    } = this.props;
 
-    var func = scale(props);
+    var func = scale(this.props);
 
@@ -143,3 +100,5 @@ if(type === 'x' || type === 'y') {
   render () {
+
     const {
+      showAxis,
       gridAxisClassName,
@@ -150,2 +109,4 @@ axisClassName,
 
+    var axisGroup = ReactFauxDOM.createElement('g');
+
     if(type === 'x')
@@ -158,9 +119,20 @@ var axisClasses = `${axisClassName} axis x`
 
-    return (
-      <g
-        className = {axisClasses}
-        ref = 'axisGroup'
-      ></g>
-    )
+    axisGroup.setAttribute('class', axisClasses);
+
+    var axisDom = d3.select(axisGroup);
+
+    axisDom.call(this._mkTickAxis());
+
+    if(!showAxis) {
+      axisDom.selectAll(".axis .tick text")
+        .style("opacity", "0")
+      if(type === 'gridx' || type === 'gridy') {
+        // hide domain in grids
+        axisDom.selectAll(".axis .domain")
+          .style("opacity", "0")
+      }
+    }
+
+    return axisDom.node().toReact();
   }
 }

src/axis/label.jsx

@@ -10,2 +10,10 @@ "use strict";
 import {
+  default as d3
+} from 'd3';
+
+import {
+  default as ReactFauxDOM
+} from 'react-faux-dom';
+
+import {
   default as CommonProps,
@@ -42,29 +50,3 @@ } from '../commonProps';
 
-  componentDidMount () {
-    this._mkLabel(this.props);
-  }
-
-  componentWillReceiveProps(nextProps) {
-    // check when to rebuild label and update states
-    const keys = [
-      'width',
-      'height',
-      'margins',
-      'hTransform',
-      'vTransform',
-      'textAnchor',
-      'labelTitle',
-      'labelPosition',
-      'labelOffset',
-      'labelClassName'
-    ];
-
-    keys.forEach((k) => {
-      if(this.props[k] !== nextProps[k]) {
-        this._mkLabel(nextProps);
-      }
-    })
-  }
-
-  _mkLabel(props) {
+  _mkLabel(dom) {
     const {
@@ -80,5 +62,5 @@ height,
       textAnchor
-    } = props;
+    } = this.props;
 
-    var labelDom = d3.select(React.findDOMNode(this.refs.labelAxis))
+    var labelDom = d3.select(dom)
 
@@ -120,13 +102,19 @@ if (labelPosition === 'top') {
     }
+
+    return labelDom;
   }
 
   render() {
-    return (
-      <text
-        ref="labelAxis"
-        >
+    const {
+      labelClassName
+    } = this.props;
 
-      </text>
-    )
+    var labelText = ReactFauxDOM.createElement('text');
+    var labelClasses = `${labelClassName} label`;
+    labelText.setAttribute('class', labelClasses);
+
+    var labelDom = this._mkLabel(labelText);
+
+    return labelDom.node().toReact();
   }
 }

src/container/svg.jsx

@@ -10,2 +10,6 @@ "use strict";
 import {
+  default as d3
+} from 'd3';
+
+import {
   default as CommonProps,
@@ -12,0 +16,0 @@ } from '../commonProps';

src/legend.jsx

@@ -10,2 +10,6 @@ "use strict";
 import {
+  default as ReactFauxDOM
+} from 'react-faux-dom';
+
+import {
   default as CommonProps,
@@ -34,28 +38,3 @@ } from './commonProps';
 
-  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) {
+  _mkLegend(dom) {
     const {
@@ -68,8 +47,8 @@ width,
       legendOffset
-    } = props;
+    } = this.props;
 
-    var legendArea = d3.select(React.findDOMNode(this.refs.legendArea))
-      .selectAll('g');
+    var legendArea = d3.select(dom);
     // make legends
     var legend = legendArea
+      .selectAll('g')
       .data(chartSeries)
@@ -114,12 +93,19 @@ .enter().append("g")
     }
+
+    return legendArea;
   }
 
   render() {
-    return (
-      <g
-        ref= "legendArea"
-        >
-      </g>
-    )
+    const {
+      legendClassName
+    } = this.props;
+
+    var legendGroup = ReactFauxDOM.createElement('g');
+    var legendClasses = `${legendClassName} legend`;
+    legendGroup.setAttribute('class', legendClasses);
+
+    var legendDom = this._mkLegend(legendGroup);
+    
+    return legendDom.node().toReact();
   }
 }

src/utils/scale.jsx

@@ -0,1 +1,5 @@
+import {
+  default as d3
+} from 'd3';
+
 export function scale(props) {
@@ -2,0 +6,0 @@ const {

webpack.config.js

@@ -51,11 +51,5 @@
   plugins: ENV ? [
-    new webpack.optimize.UglifyJsPlugin({minimize: true}),
-    new webpack.ProvidePlugin({
-      'd3': 'd3'
-    })
-  ]: [
-    new webpack.ProvidePlugin({
-      'd3': 'd3'
-    })
-  ]
+    new webpack.optimize.UglifyJsPlugin({minimize: true})
+  ]:[]
+
 }];

No alert changes

Improved metrics

Number of lines in readme file

56

increased by9.8%

Worsened metrics

Total package byte prevSize

4352045

decreased by-0.03%

Dependency count

3

increased by50%

Lines of code

31955

decreased by-0.28%

Dependency changes

• + Addedreact-faux-dom@^1.1.0

• + Addedlodash._arraycopy@3.0.0(transitive)

• + Addedlodash._arrayeach@3.0.0(transitive)

• + Addedlodash._baseassign@3.2.0(transitive)

• + Addedlodash._baseclone@3.3.0(transitive)

• + Addedlodash._basecopy@3.0.1(transitive)

• + Addedlodash._basefor@3.0.3(transitive)

• + Addedlodash._bindcallback@3.0.1(transitive)

• + Addedlodash._createcompounder@3.0.0(transitive)

• + Addedlodash._getnative@3.9.1(transitive)

• + Addedlodash._isiterateecall@3.0.9(transitive)

• + Addedlodash._root@3.0.1(transitive)

• + Addedlodash.camelcase@3.0.1(transitive)

• + Addedlodash.clone@3.0.3(transitive)

• + Addedlodash.deburr@3.2.0(transitive)

• + Addedlodash.isarguments@3.1.0(transitive)

• + Addedlodash.isarray@3.0.4(transitive)

• + Addedlodash.keys@3.1.2(transitive)

• + Addedlodash.words@3.2.0(transitive)

• + Addedquery-selector@1.0.9(transitive)

• + Addedreact-faux-dom@1.1.0(transitive)

• + Addedstyle-attr@1.3.0(transitive)