chore(init): init project

.babelrc

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

.gitignore

@@ -0,0 +1,6 @@
+logs
+*.log
+node_modules
+.idea
+lib
+npm-debug.log*

LICENSE.md

@@ -0,0 +1,19 @@
+Copyright (c) Raphaël Benitte
+
+Permission is hereby granted, free of charge, to any person obtaining a copy of
+this software and associated documentation files (the "Software"), to deal in
+the Software without restriction, including without limitation the rights to
+use, copy, modify, merge, publish, distribute, sublicense, and/or sell copies
+of the Software, and to permit persons to whom the Software is furnished to do
+so, subject to the following conditions:
+
+The above copyright notice and this permission notice shall be included in all
+copies or substantial portions of the Software.
+
+THE SOFTWARE IS PROVIDED "AS IS", WITHOUT WARRANTY OF ANY KIND, EXPRESS OR
+IMPLIED, INCLUDING BUT NOT LIMITED TO THE WARRANTIES OF MERCHANTABILITY,
+FITNESS FOR A PARTICULAR PURPOSE AND NONINFRINGEMENT. IN NO EVENT SHALL THE
+AUTHORS OR COPYRIGHT HOLDERS BE LIABLE FOR ANY CLAIM, DAMAGES OR OTHER
+LIABILITY, WHETHER IN AN ACTION OF CONTRACT, TORT OR OTHERWISE, ARISING FROM,
+OUT OF OR IN CONNECTION WITH THE SOFTWARE OR THE USE OR OTHER DEALINGS IN THE
+SOFTWARE.

README.md

@@ -0,0 +1,15 @@
+# nivo
+
+[![License][license-image]][license-url]
+[![Travis CI][travis-image]][travis-url]
+[![NPM version][npm-image]][npm-url]
+[![Dependencies][gemnasium-image]][gemnasium-url]
+
+[license-image]: https://img.shields.io/github/license/nivo/mozaik.svg?style=flat-square
+[license-url]: https://github.com/plouc/nivo/blob/master/LICENSE.md
+[npm-image]: https://img.shields.io/npm/v/nivo.svg?style=flat-square
+[npm-url]: https://www.npmjs.com/package/nivo
+[travis-image]: https://img.shields.io/travis/plouc/nivo.svg?style=flat-square
+[travis-url]: https://travis-ci.org/plouc/nivo
+[gemnasium-image]: https://img.shields.io/gemnasium/plouc/nivo.svg?style=flat-square
+[gemnasium-url]: https://gemnasium.com/plouc/nivo

package.json

@@ -0,0 +1,25 @@
+{
+  "name": "nivo",
+  "version": "0.0.0",
+  "author": {
+    "name": "Raphaël Benitte",
+    "url": "https://github.com/plouc"
+  },
+  "keywords": [],
+  "dependencies": {
+    "d3": "3.5.16",
+    "invariant": "2.2.1",
+    "lodash": "4.11.1",
+    "react-dimensions": "0.1.1"
+  },
+  "devDependencies": {
+    "babel-preset-es2015": "6.6.0",
+    "babel-preset-react": "6.5.0",
+    "react": "^0.13.3"
+  },
+  "peerDependencies": {
+    "react": "^0.13.3"
+  },
+  "main": "src/index.js",
+  "scripts": {}
+}

src/ArcUtils.js

@@ -0,0 +1,86 @@
+import d3 from 'd3';
+
+
+export const degreesToRadians = degrees => degrees * Math.PI / 180;
+
+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
+ * @returns {{startAngle: *, endAngle: *}}
+ */
+export const findNeighbor = (i, keyProp, prevData, newData) => {
+    const preceding = findPreceding(i, keyProp, prevData, newData);
+    if (preceding) {
+        return {
+            startAngle: preceding.endAngle,
+            endAngle:   preceding.endAngle
+        };
+    }
+
+    const following = findFollowing(i, keyProp, prevData, newData);
+    if (following) {
+        return {
+            startAngle: following.startAngle,
+            endAngle:   following.startAngle
+        };
+    }
+
+    return null;
+};
+
+/**
+ * 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
+ * @returns {*}
+ */
+export const findPreceding = (i, keyProp, prevData, newData) => {
+    const m = prevData.length;
+
+    while (--i >= 0) {
+        let k = newData[i].data[keyProp];
+
+        for (let j = 0; j < m; ++j) {
+            if (prevData[j].data[keyProp] === k) {
+                return prevData[j];
+            }
+        }
+    }
+};
+
+/**
+ * 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
+ * @returns {*}
+ */
+export const findFollowing = (i, keyProp, prevData, newData) => {
+    const n = newData.length;
+    const m = prevData.length;
+
+    while (++i < n) {
+        let k = newData[i].data[keyProp];
+
+        for (let j = 0; j < m; ++j) {
+            if (prevData[j].data[keyProp] === k) {
+                return prevData[j];
+            }
+        }
+    }
+};
+
+
+export const midAngle = arc => arc.startAngle + (arc.endAngle - arc.startAngle) / 2;

src/components/Chart.jsx

@@ -0,0 +1,56 @@
+import React, { Component, PropTypes } from 'react';
+import Dimensions                      from 'react-dimensions';
+import _                               from 'lodash';
+
+
+const defaultMargin = {
+    top:    0,
+    right:  0,
+    bottom: 0,
+    left:   0
+};
+
+class Chart extends Component {
+    render() {
+        const {
+            containerWidth,
+            containerHeight,
+            children
+        } = this.props;
+
+        const margin = _.assign({}, defaultMargin, this.props.margin);
+
+        const width  = containerWidth  - margin.left - margin.right;
+        const height = containerHeight - margin.top  - margin.bottom;
+
+        return (
+            <svg width={containerWidth} height={containerHeight}>
+                <g transform={`translate(${margin.left}, ${margin.top})`}>
+                    {React.Children.map(children, child => (
+                        React.cloneElement(child, { width, height })
+                    ))}
+                </g>
+            </svg>
+        );
+    }
+}
+
+Chart.displayName = 'Chart';
+
+Chart.propTypes = {
+    containerWidth:  PropTypes.number.isRequired,
+    containerHeight: PropTypes.number.isRequired,
+    margin:          PropTypes.shape({
+        top:    PropTypes.number,
+        right:  PropTypes.number,
+        bottom: PropTypes.number,
+        left:   PropTypes.number
+    }).isRequired
+};
+
+Chart.defaultProps = {
+    margin: {}
+};
+
+
+export default Dimensions()(Chart);

src/components/axes/AxisX.jsx

@@ -0,0 +1,19 @@
+import React, { Component, PropTypes } from 'react';
+import d3                              from 'd3';
+
+class AxisX extends Component {
+    render() {
+        return null;
+    }
+}
+
+AxisX.displayName = 'AxisX';
+
+AxisX.propTypes = {
+};
+
+AxisX.defaultProps = {
+};
+
+
+export default AxisX;

src/components/axes/AxisY.jsx

@@ -0,0 +1,61 @@
+import React, { Component, PropTypes } from 'react';
+import d3                              from 'd3';
+
+class AxisY extends Component {
+    shouldComponentUpdate(nextProps) {
+        const {
+            orient,
+            yScale,
+            tickMode,
+            tickPadding,
+            width,
+            transitionDuration,
+            transitionEasing
+        } = nextProps;
+
+        const element = d3.select(React.findDOMNode(this));
+
+        const axis = d3.svg.axis()
+            .scale(yScale)
+            .tickPadding(tickPadding)
+            .orient(orient)
+        ;
+
+        if (tickMode === 'grid') {
+            axis.tickSize(-width);
+        }
+
+        element
+            .transition()
+            .duration(transitionDuration)
+            .ease(transitionEasing)
+            .call(axis)
+        ;
+
+        return false;
+    }
+
+    render() {
+        return <g className="chart__axis chart__axis--y"/>;
+    }
+}
+
+AxisY.displayName = 'AxisY';
+
+AxisY.propTypes = {
+    orient:      PropTypes.oneOf(['left', 'right']).isRequired,
+    yScale:      PropTypes.func.isRequired,
+    tickMode:    PropTypes.oneOf(['normal', 'grid']).isRequired,
+    tickPadding: PropTypes.number.isRequired
+};
+
+AxisY.defaultProps = {
+    orient:             'left',
+    transitionDuration: 600,
+    transitionEasing:   'cubic-out',
+    tickMode:           'normal',
+    tickPadding:        3
+};
+
+
+export default AxisY;