Export Interpolation from Chartist

.editorconfig

@@ -0,0 +1,20 @@
+# EditorConfig helps developers define and maintain consistent
+# coding styles between different editors and IDEs
+# editorconfig.org
+
+root = true
+
+[*]
+
+# Change these settings to your own preference
+indent_style = space
+indent_size = 2
+
+# We recommend you to keep these unchanged
+end_of_line = lf
+charset = utf-8
+trim_trailing_whitespace = true
+insert_final_newline = true
+
+[*.md]
+trim_trailing_whitespace = false

.travis.yml

@@ -0,0 +1,10 @@
+sudo: false
+language: node_js
+node_js:
+- stable
+cache:
+  directories:
+  - node_modules
+branches:
+  only:
+  - master

README.md

@@ -1,27 +1,27 @@
-react-chartist
+rc-chartist
 ==============
 
 [![NPM version][npm-image]][npm-url]
 [![Downloads][downloads-image]][downloads-url]
-
+[![Travis](https://img.shields.io/travis/lolJS/react-chartist.svg)]()
 
 React component for [Chartist.js](https://gionkunz.github.io/chartist-js/)
 
 ### Installation
 
 ```
-$ npm install react-chartist --save
+$ npm install rc-chartist --save
 ```
 
 ### Usage
 
 ```JavaScript
 import React from 'react';
 import ReactDOM from 'react-dom';
-import ChartistGraph from '../index';
+import { Graph, Interpolation } from '../index';
 
 class Pie extends React.Component {
-  render() {
+  render () {
 
     var data = {
       labels: ['W1', 'W2', 'W3', 'W4', 'W5', 'W6', 'W7', 'W8', 'W9', 'W10'],
@@ -33,6 +33,7 @@ class Pie extends React.Component {
     var options = {
       high: 10,
       low: -10,
+      // lineSmoothing: Interpolation.simple(),
       axisX: {
         labelInterpolationFnc: function(value, index) {
           return index % 2 === 0 ? value : null;
@@ -44,7 +45,7 @@ class Pie extends React.Component {
 
     return (
       <div>
-        <ChartistGraph data={data} options={options} type={type} />
+        <Graph data={data} options={options} type={type} />
       </div>
     )
   }
@@ -67,7 +68,7 @@ Please check out [Chartist.js API documentation](http://gionkunz.github.io/chart
 To add support for aspect ratio
 
 ```HTML
-<ChartistGraph className={'ct-octave'} data={data} options={options} type={type} />
+<Graph className={'ct-octave'} data={data} options={options} type={type} />
 ```
 
 ### Note
@@ -76,7 +77,6 @@ This module does not include the css files for Chartist. If you want to add it,
 
 ```HTML
 <link rel="stylesheet" href="//cdn.jsdelivr.net/chartist.js/latest/chartist.min.css">
-<script src="//cdn.jsdelivr.net/chartist.js/latest/chartist.min.js"></script>
 ```
 
 Or use `bower` or `npm` to install Chartist and include it in your build process.
@@ -101,14 +101,14 @@ To build run `npm run build`
 
 ### Changelog
 
-If you want to support react version under v0.13, use `npm install react-chartist@0.9.0`
+Updated package to expose the entire Chartist API.
 
 ### License
 
 MIT
 
-[npm-image]: https://img.shields.io/npm/v/react-chartist.svg?style=flat-square
-[npm-url]: https://npmjs.org/package/react-chartist
-[downloads-image]: http://img.shields.io/npm/dm/react-chartist.svg?style=flat-square
-[downloads-url]: https://npmjs.org/package/react-chartist
+[npm-image]: https://img.shields.io/npm/v/rc-chartist.svg?style=flat-square
+[npm-url]: https://npmjs.org/package/rc-chartist
+[downloads-image]: https://img.shields.io/npm/dm/rc-chartist.svg?style=flat-square
+[downloads-url]: https://npmjs.org/package/rc-chartist
 

example/main.js

@@ -1,14 +1,14 @@
 import React from 'react';
 import ReactDOM from 'react-dom';
-import ChartistGraph from '../index';
+import { Graph, Interpolation } from '../index';
 
 class Pie extends React.Component {
-  render() {
+  render () {
 
     var data = {
-      labels: ['W1', 'W2', 'W3', 'W4', 'W5', 'W6', 'W7', 'W8', 'W9', 'W10'],
+      labels: [ 'W1', 'W2', 'W3', 'W4', 'W5', 'W6', 'W7', 'W8', 'W9', 'W10' ],
       series: [
-        [1, 2, 4, 8, 6, -2, -1, -4, -6, -2]
+        [ 1, 2, 4, 8, 6, -2, -1, -4, -6, -2 ]
       ]
     };
 
@@ -27,10 +27,10 @@ class Pie extends React.Component {
 
     return (
       <div>
-        <ChartistGraph className={aspectRatio} data={data} options={options} type={type} />
+        <Graph className={aspectRatio} data={data} options={options} type={type} />
       </div>
     )
   }
 }
 
-ReactDOM.render(<Pie />, document.getElementById('react-chart'))
+ReactDOM.render(<Pie />, document.getElementById('react-chart'));

example/package.json

@@ -1,5 +1,5 @@
 {
-  "name": "react-chartist",
+  "name": "rc-chartist",
   "scripts": {
     "browser-sync": "browser-sync start --server --files './bundle.js'",
     "watch-js": "watchify main.js -t babelify -o bundle.js -dv",

index.js

@@ -1,21 +1,37 @@
 'use strict';
 
 import React, {Component} from 'react';
-import {findDOMNode} from 'react-dom';
+
+const Chartist = require('chartist');
 
 class ChartistGraph extends Component {
 
   displayName: 'ChartistGraph'
 
-  componentWillReceiveProps(newProps) {
+  shouldComponentUpdate(newProps) {
+    const { data, className, type, options, style, responsiveOptions } = this.props;
+    return data !== newProps.data
+      || className !== newProps.className
+      || type !== newProps.type
+      || options !== newProps.options
+      || style !== newProps.style
+      || responsiveOptions !== newProps.responsiveOptions;
+  }
+
+  componentWillUpdate(newProps) {
     this.updateChart(newProps);
   }
 
+  shouldComponentUpdate(nextProps, nextStates) {
+    return nextProps != this.props;
+  }
+
   componentWillUnmount() {
     if (this.chartist) {
       try {
         this.chartist.detach();
-      } catch (err) {
+      }
+      catch (err) {
         throw new Error('Internal chartist error', err);
       }
     }
@@ -26,8 +42,6 @@ class ChartistGraph extends Component {
   }
 
   updateChart(config) {
-    let Chartist = require('chartist');
-
     let { type, data } = config;
     let options = config.options || {};
     let responsiveOptions = config.responsiveOptions || [];
@@ -36,7 +50,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 +59,27 @@ class ChartistGraph extends Component {
           }
         }
       }
-
     }
 
     return this.chartist;
   }
 
   render() {
-    const className = this.props.className ? ' ' + this.props.className : ''
+    const className = this.props.className ? ' ' + this.props.className : '';
     const style = this.props.style ? this.props.style : {};
-    return (<div className={'ct-chart' + className} style={style} />)
+    return (<div className={'ct-chart' + className} ref='chart' style={style} />)
   }
-
 }
 
 ChartistGraph.propTypes = {
   type: React.PropTypes.string.isRequired,
   data: React.PropTypes.object.isRequired,
   className: React.PropTypes.string,
   options: React.PropTypes.object,
-  responsiveOptions: React.PropTypes.array
+  responsiveOptions: React.PropTypes.array,
+  style: React.PropTypes.object
 }
 
-export default ChartistGraph;
+export const Graph = ChartistGraph;
+export const Interpolation = Chartist.Interpolation;
+export const Axis = Chartist.Axis;

package.json

@@ -1,11 +1,11 @@
 {
-  "name": "react-chartist",
-  "version": "0.10.1",
+  "name": "rc-chartist",
+  "version": "0.10.2",
   "description": "React component for Chartist.js",
   "main": "dist/index.js",
   "repository": {
     "type": "git",
-    "url": "git://github.com/fraserxu/react-chartist.git"
+    "url": "git://github.com/loljs/react-chartist.git"
   },
   "keywords": [
     "react",
@@ -15,29 +15,36 @@
     "graph"
   ],
   "author": {
-    "name": "Fraser Xu",
-    "email": "xvfeng123@gmail.com",
-    "url": "https://fraserxu.me"
+    "name": "Jon Brito",
+    "email": "dev.jon.brito@gmail.com",
+    "url": "https://github.com/loljs"
   },
   "license": "MIT",
   "bugs": {
-    "url": "https://github.com/fraserxu/react-chartist/issues"
+    "url": "https://github.com/loljs/react-chartist/issues"
   },
-  "homepage": "https://github.com/fraserxu/react-chartist",
+  "homepage": "https://github.com/loljs/react-chartist",
   "peerDependencies": {
-    "react": "^0.14.0",
-    "react-dom": "^0.14.0"
+    "react": "^0.14.0"
   },
   "dependencies": {
-    "chartist": "^0.9.4"
+    "chartist": "^0.9.4",
+    "react": "^0.14.3"
   },
   "scripts": {
-    "build": "mkdir -p dist && babel index.js > dist/index.js"
+    "build": "mkdir -p dist && babel index.js > dist/index.js",
+    "test": "mocha test/.setup.js test/**/*.spec.js"
   },
   "devDependencies": {
     "babel": "^5.1.8",
     "babelify": "^5.0.3",
     "browserify": "^8.1.0",
+    "chai": "^3.5.0",
+    "enzyme": "^2.1.0",
+    "jsdom": "^8.1.0",
+    "mocha": "^2.4.5",
+    "react-addons-test-utils": "^0.14.3",
+    "react-dom": "^0.14.3",
     "watchify": "^2.2.1"
   }
 }

test/.setup.js

@@ -0,0 +1,21 @@
+require('babel/register')();
+
+var jsdom = require('jsdom').jsdom;
+
+var exposedProperties = ['window', 'navigator', 'document'];
+
+global.document = jsdom('');
+global.window = document.defaultView;
+
+Object.keys(document.defaultView).forEach((property) => {
+  if (typeof global[property] === 'undefined') {
+    exposedProperties.push(property);
+    global[property] = document.defaultView[property];
+  }
+});
+
+global.navigator = {
+  userAgent: 'node.js'
+};
+
+documentRef = document;

test/line.spec.js

@@ -0,0 +1,54 @@
+import React from 'react';
+import { expect } from 'chai';
+import { shallow } from 'enzyme';
+
+import { Graph, Interpolation } from '../index.js'
+
+const generateRandomGraphValues = () =>
+  Array.apply(null, Array(29)).map((val, i) =>
+    i % 7 === 0 ? Number(Math.floor(Math.random() * 23) + 1) : null)
+
+const props = {
+  data: {
+    series: [ generateRandomGraphValues() ]
+  },
+  options: {
+    high: 25,
+    low: 0,
+    fullWidth: true,
+    height: '200px',
+    showArea: true,
+    chartPadding: {
+      left: 0,
+      right: 0
+    },
+    lineSmooth: Interpolation.simple({
+      fillHoles: true
+    }),
+    axisY: {
+      showLabel: false,
+      offset: 0
+    },
+    axisX: {
+      showGrid: false,
+      labelInterpolationFnc: (value, index) =>
+        index % 7 === 0 ? value : null
+    }
+  }
+}
+
+describe('<Graph type="line" />', () => {
+  let wrapper;
+
+  before(() => {
+    wrapper = shallow(<Graph data={props.data} options={props.options} type="Line" />);
+  });
+
+  it('should expose Interpolation', () => {
+    expect(Interpolation).to.not.be.undefined;
+  });
+
+  it('should render a line chart', () => {
+    expect(wrapper.find('.ct-chart')).to.have.length(1);
+  });
+});