Export Interpolation from Chartist #32

example/main.js

@@ -2,7 +2,7 @@ import React from 'react';
 import ReactDOM from 'react-dom';
 import ChartistGraph from '../index';
 
-class Pie extends React.Component {
+class Bar extends React.Component {
   render() {
 
     var data = {
@@ -33,4 +33,4 @@ class Pie extends React.Component {
   }
 }
 
-ReactDOM.render(<Pie />, document.getElementById('react-chart'))
+ReactDOM.render(<Bar />, document.getElementById('react-chart'))

index.js

@@ -1,7 +1,5 @@
-'use strict';
-
-import React, {Component} from 'react';
-import {findDOMNode} from 'react-dom';
+import React, { Component, cloneElement, Children } from 'react';
+import PropTypes from 'prop-types'
 
 class ChartistGraph extends Component {
 
@@ -36,7 +34,7 @@ class ChartistGraph extends Component {
     if (this.chartist) {
       this.chartist.update(data, options, responsiveOptions);
     } else {
-      this.chartist = new Chartist[type](findDOMNode(this), data, options, responsiveOptions);
+      this.chartist = new Chartist[type](this.refs.chart, data, options, responsiveOptions);
 
       if (config.listener) {
         for (event in config.listener) {
@@ -45,26 +43,34 @@ class ChartistGraph extends Component {
           }
         }
       }
-
     }
 
     return this.chartist;
   }
 
   render() {
-    const className = this.props.className ? ' ' + this.props.className : ''
-    const style = this.props.style ? this.props.style : {};
-    return (<div className={'ct-chart' + className} style={style} />)
+    const { className, style, children, data, type } = this.props;
+    const childrenWithProps = children && Children.map(children, (child) => (
+      cloneElement(child, {
+        type,
+        data
+      })
+    ));
+    return (
+      <div className={`ct-chart ${className || ''}`} ref='chart' style={style}>
+         {childrenWithProps}
+      </div>
+    )
   }
-
 }
 
 ChartistGraph.propTypes = {
-  type: React.PropTypes.string.isRequired,
-  data: React.PropTypes.object.isRequired,
-  className: React.PropTypes.string,
-  options: React.PropTypes.object,
-  responsiveOptions: React.PropTypes.array
+  type: PropTypes.oneOf(['Line', 'Bar', 'Pie']).isRequired,
+  data: PropTypes.object.isRequired,
+  className: PropTypes.string,
+  options: PropTypes.object,
+  responsiveOptions: PropTypes.array,
+  style: PropTypes.object
 }
 
 export default ChartistGraph;

package.json

@@ -1,6 +1,6 @@
 {
   "name": "react-chartist",
-  "version": "0.10.1",
+  "version": "0.13.0",
   "description": "React component for Chartist.js",
   "main": "dist/index.js",
   "repository": {
@@ -19,25 +19,32 @@
     "email": "xvfeng123@gmail.com",
     "url": "https://fraserxu.me"
   },
+  "babel": {
+    "presets": [
+      "react",
+      "es2015",
+      "stage-0"
+    ]
+  },
   "license": "MIT",
   "bugs": {
     "url": "https://github.com/fraserxu/react-chartist/issues"
   },
   "homepage": "https://github.com/fraserxu/react-chartist",
   "peerDependencies": {
-    "react": "^0.14.0",
-    "react-dom": "^0.14.0"
-  },
-  "dependencies": {
-    "chartist": "^0.9.4"
+    "chartist": "^0.10.1",
+    "react": "^0.14.9 || ^15.3.0"
   },
   "scripts": {
-    "build": "mkdir -p dist && babel index.js > dist/index.js"
+    "build": "mkdir -p dist && babel index.js -o dist/index.js"
   },
   "devDependencies": {
-    "babel": "^5.1.8",
-    "babelify": "^5.0.3",
-    "browserify": "^8.1.0",
-    "watchify": "^2.2.1"
+    "babel-cli": "^6.18.0",
+    "babel-preset-es2015": "^6.18.0",
+    "babel-preset-react": "^6.16.0",
+    "babel-preset-stage-0": "^6.16.0"
+  },
+  "dependencies": {
+    "prop-types": "^15.5.8"
   }
 }