feat(stack): add Stack component for d3.layout.stack

.babelrc

@@ -1,6 +1,7 @@
 {
   "presets": [
     "es2015",
-    "react"
+    "react",
+    "stage-0"
   ]
 }

package.json

@@ -14,15 +14,18 @@
   },
   "devDependencies": {
     "ava": "0.14.0",
+    "babel-cli": "6.7.5",
     "babel-preset-es2015": "6.6.0",
     "babel-preset-react": "6.5.0",
+    "babel-preset-stage-0": "6.5.0",
     "react": "^0.13.3"
   },
   "peerDependencies": {
     "react": "^0.13.3"
   },
-  "main": "src/index.js",
+  "main": "lib",
   "scripts": {
+    "watch": "babel src --watch --out-dir lib",
     "test": "ava",
     "test-cover": "nyc ava"
   },

src/ArcUtils.js

@@ -9,22 +9,22 @@ export const radiansToDegrees = radians => 180 * radians / Math.PI;
 /**
  * Try to get a neighbor arc, otherwise, returns null.
  *
- * @param {Number} i
- * @param {String} keyProp
- * @param {Array}  prevData
- * @param {Array}  newData
+ * @param {Number}   i
+ * @param {function} identity
+ * @param {Array}    prevData
+ * @param {Array}    newData
  * @returns {{startAngle: *, endAngle: *}}
  */
-export const findNeighbor = (i, keyProp, prevData, newData) => {
-    const preceding = findPreceding(i, keyProp, prevData, newData);
+export const findNeighbor = (i, identity, prevData, newData) => {
+    const preceding = findPreceding(i, identity, prevData, newData);
     if (preceding) {
         return {
             startAngle: preceding.endAngle,
             endAngle:   preceding.endAngle
         };
     }
 
-    const following = findFollowing(i, keyProp, prevData, newData);
+    const following = findFollowing(i, identity, prevData, newData);
     if (following) {
         return {
             startAngle: following.startAngle,
@@ -38,20 +38,20 @@ export const findNeighbor = (i, keyProp, prevData, newData) => {
 /**
  * Find the element in prevData that joins the highest preceding element in newData.
  *
- * @param {Number} i
- * @param {String} keyProp
- * @param {Array}  prevData
- * @param {Array}  newData
+ * @param {Number}   i
+ * @param {function} identity
+ * @param {Array}    prevData
+ * @param {Array}    newData
  * @returns {*}
  */
-export const findPreceding = (i, keyProp, prevData, newData) => {
+export const findPreceding = (i, identity, prevData, newData) => {
     const m = prevData.length;
 
     while (--i >= 0) {
-        let k = newData[i].data[keyProp];
+        let k = identity(newData[i]);
 
         for (let j = 0; j < m; ++j) {
-            if (prevData[j].data[keyProp] === k) {
+            if (identity(prevData[j]) === k) {
                 return prevData[j];
             }
         }
@@ -61,21 +61,21 @@ export const findPreceding = (i, keyProp, prevData, newData) => {
 /**
  * Find the element in prevData that joins the lowest following element in newData.
  *
- * @param {Number} i
- * @param {String} keyProp
- * @param {Array}  prevData
- * @param {Array}  newData
+ * @param {Number}   i
+ * @param {function} identity
+ * @param {Array}    prevData
+ * @param {Array}    newData
  * @returns {*}
  */
-export const findFollowing = (i, keyProp, prevData, newData) => {
+export const findFollowing = (i, identity, prevData, newData) => {
     const n = newData.length;
     const m = prevData.length;
 
     while (++i < n) {
-        let k = newData[i].data[keyProp];
+        let k = identity(newData[i]);
 
         for (let j = 0; j < m; ++j) {
-            if (prevData[j].data[keyProp] === k) {
+            if (identity(prevData[j]) === k) {
                 return prevData[j];
             }
         }

src/components/Chart.jsx → src/components/Chart.js

@@ -19,7 +19,6 @@ class Chart extends Component {
         } = this.props;
 
         const margin = _.assign({}, defaultMargin, this.props.margin);
-
         const width  = containerWidth  - margin.left - margin.right;
         const height = containerHeight - margin.top  - margin.bottom;
 

src/components/axes/AxisX.jsx → src/components/axes/AxisX.js

@@ -2,7 +2,7 @@ import React, { Component, PropTypes } from 'react';
 import d3                              from 'd3';
 
 class AxisX extends Component {
-    shouldComponentUpdate(nextProps) {
+    renderD3(props) {
         const {
             orient,
             xScale,
@@ -11,7 +11,7 @@ class AxisX extends Component {
             height,
             transitionDuration,
             transitionEasing
-        } = nextProps;
+        } = props;
 
         const element = d3.select(React.findDOMNode(this));
         element.attr('transform', `translate(0, ${height})`);
@@ -36,6 +36,16 @@ class AxisX extends Component {
         return false;
     }
 
+    componentDidMount() {
+        this.renderD3(this.props);
+    }
+
+    shouldComponentUpdate(nextProps) {
+        this.renderD3(nextProps);
+
+        return false;
+    }
+
     render() {
         return <g className="chart__axis chart__axis--x"/>;
     }

src/components/axes/AxisY.jsx → src/components/axes/AxisY.js

@@ -2,7 +2,7 @@ import React, { Component, PropTypes } from 'react';
 import d3                              from 'd3';
 
 class AxisY extends Component {
-    shouldComponentUpdate(nextProps) {
+    renderD3(props) {
         const {
             orient,
             yScale,
@@ -11,7 +11,7 @@ class AxisY extends Component {
             width,
             transitionDuration,
             transitionEasing
-        } = nextProps;
+        } = props;
 
         const element = d3.select(React.findDOMNode(this));
 
@@ -35,6 +35,16 @@ class AxisY extends Component {
         return false;
     }
 
+    componentDidMount() {
+        this.renderD3(this.props);
+    }
+
+    shouldComponentUpdate(nextProps) {
+        this.renderD3(nextProps);
+
+        return false;
+    }
+
     render() {
         return <g className="chart__axis chart__axis--y"/>;
     }

src/components/layouts/Pie.jsx → src/components/layouts/Pie.js

@@ -5,7 +5,7 @@ import { degreesToRadians, findNeighbor } from '../../ArcUtils';
 
 
 class Pie extends Component {
-    shouldComponentUpdate(nextProps) {
+    renderD3(nextProps) {
         const {
             data,
             width, height,
@@ -16,6 +16,8 @@ class Pie extends Component {
             transitionDuration, transitionEasing,
         } = nextProps;
 
+        const identity = d => d.data[keyProp];
+
         const element   = d3.select(React.findDOMNode(this));
         const container = element.select('.chart__layout__pie__slices');
 
@@ -60,17 +62,17 @@ class Pie extends Component {
             };
         }
 
-        slices = slices.data(newData, d => d.data[keyProp]);
+        slices = slices.data(newData, identity);
         slices.enter().append('path')
             .attr('class', 'chart__layout__pie__slice')
             .style('fill', d => d.data.color)
             .each(function (d, i) {
-                this._current = findNeighbor(i, keyProp, previousData, newData) || _.assign({}, d, { endAngle: d.startAngle });
+                this._current = findNeighbor(i, identity, previousData, newData) || _.assign({}, d, { endAngle: d.startAngle });
             })
         ;
         slices.exit()
             .datum((d, i) => {
-                return findNeighbor(i, keyProp, newData, previousData) || d;
+                return findNeighbor(i, identity, newData, previousData) || d;
             })
             .transition()
             .duration(transitionDuration)
@@ -86,14 +88,31 @@ class Pie extends Component {
             .style('fill', d => d.data.color)
         ;
 
+        const pieContext = {
+            element,
+            pie,
+            arc, radius,
+            identity,
+            previousData, newData
+        };
+
         this.legends.forEach(legend => {
-            legend({ element, pie, arc, keyProp, data: newData, radius });
+            legend(pieContext);
         });
+    }
+
+    shouldComponentUpdate(nextProps) {
+        this.renderD3(nextProps);
 
         return false;
     }
 
+    componentDidMount() {
+        this.renderD3(this.props);
+    }
+
     componentWillMount() {
+        console.log('Pie.render()');
         const { children } = this.props;
 
         const legends = [];

src/components/layouts/PieColumnLegends.jsx → src/components/layouts/PieColumnLegends.js

@@ -1,23 +1,24 @@
 import React, { Component, PropTypes } from 'react';
 import invariant                       from 'invariant';
 import d3                              from 'd3';
-import { midAngle }                    from '../../ArcUtils';
+import { midAngle, findNeighbor }      from '../../ArcUtils';
 
 
 class PieColumnLegends extends Component {
     static createLegendsFromReactElement(element) {
         const { props } = element;
 
-        return ({ element, arc, keyProp, pie, data, radius }) => {
+        // Receive context from Parent Pie component
+        return ({ element, arc, identity, pie, previousData, newData, radius }) => {
 
-            const labelFn = props.labelFn || (d => d.data[keyProp]);
+            const labelFn = props.labelFn || identity;
 
             const outerArc = d3.svg.arc()
                 .innerRadius(radius + props.radiusOffset)
                 .outerRadius(radius + props.radiusOffset)
             ;
 
-            let lines = element.selectAll('.line').data(data, d => d.data[keyProp]);
+            let lines = element.selectAll('.line').data(newData, identity);
             lines.enter()
                 .append('polyline')
                 .attr('stroke', '#fff')
@@ -39,7 +40,7 @@ class PieColumnLegends extends Component {
                 .remove()
             ;
 
-            let labels = element.selectAll('.column-label').data(data, d => d.data[keyProp]);
+            let labels = element.selectAll('.column-label').data(newData, identity);
             labels.enter()
                 .append('text')
                 .attr('fill', '#fff')