Merge pull request #192 from DylanMunyard/migrate-components-to-js-classes

Replace React.createClass with JavaScript classes that extend React.Component, as createClass was removed from React v16.0. 

https://reactjs.org/blog/2017/09/26/react-v16.0.html
https://reactjs.org/blog/2017/04/07/react-v15.5.0.html#migrating-from-reactcreateclass

Author: DylanPMunyard

lib/core.js

@@ -2,91 +2,100 @@ var React = require('react');
 var ReactDOM = require('react-dom');
 
 module.exports = {
-  createClass: function(chartType, methodNames, dataKey) {
-    var excludedProps = ['data', 'options', 'redraw'];
-    var classData = {
-      displayName: chartType + 'Chart',
-      getInitialState: function() { return {}; },
-      render: function() {
-        var _props = {
-          ref: 'canvass'
-        };
-        for (var name in this.props) {
-          if (this.props.hasOwnProperty(name)) {
-            if (excludedProps.indexOf(name) === -1) {
-              _props[name] = this.props[name];
+    createClass: function(chartType, methodNames, dataKey) {
+        var excludedProps = ['data', 'options', 'redraw'];
+
+        class ChartComponent extends React.Component {
+            constructor(props) {
+                super(props);
+                this.displayName = chartType + 'Chart';
+                this.chart = {};
+                this.canvas = null;
             }
-          }
-        }
-        return React.createElement('canvas', _props);
-      }
-    };
 
-    var extras = ['clear', 'stop', 'resize', 'toBase64Image', 'generateLegend', 'update', 'addData', 'removeData'];
-    function extra(type) {
-      classData[type] = function() {
-        return this.state.chart[type].apply(this.state.chart, arguments);
-      };
-    }
+            componentDidMount() {
+                this.initializeChart();
+
+                this.canvas = ReactDOM.findDOMNode(this);
+
+                var extras = ['clear', 'stop', 'resize', 'toBase64Image', 'generateLegend', 'update', 'addData', 'removeData'],
+                    i;
+                for (i=0; i<extras.length; i++) {
+                    this.extra(extras[i]);
+                }
+                for (i=0; i<methodNames.length; i++) {
+                    this.extra(methodNames[i]);
+                }
+            };
+
+            componentWillUnmount() {
+                var chart = this.chart;
+                if (chart) {
+                    chart.destroy();
+                }
+            };
+
+            componentWillReceiveProps(nextProps) {
+                var chart = this.chart;
+                if (nextProps.redraw) {
+                    chart.destroy();
+                    this.initializeChart(nextProps);
+                } else {
+                    dataKey = dataKey || dataKeys[chart.name];
+                    updatePoints(nextProps, chart, dataKey);
+                    if (chart.scale) {
+                        chart.scale.xLabels = nextProps.data.labels;
+
+                        if (chart.scale.calculateXLabelRotation){
+                            chart.scale.calculateXLabelRotation();
+                        }
+                    }
+                    chart.update();
+                }
+            };
+
+            initializeChart() {
+                var Chart = require('chart.js');
+                var el = ReactDOM.findDOMNode(this);
+                var ctx = el.getContext("2d");
+                var chart = new Chart(ctx)[chartType](this.props.data, this.props.options || {});
+                this.chart = chart;
+            };
+
+            extra(type) {
+                this[type] = function() {
+                    return this.chart[type].apply(this.chart, arguments);
+                };
+            };
+
+            // return the chartjs instance
+            getChart() {
+                return this.chart;
+            }
 
-    classData.componentDidMount = function() {
-      this.initializeChart(this.props);
-    };
+            // return the canvass element that contains the chart
+            getCanvass() {
+                return this.canvas;
+            };
 
-    classData.componentWillUnmount = function() {
-      var chart = this.state.chart;
-      chart.destroy();
-    };
+            getCanvas() { return this.getCanvass() };
 
-    classData.componentWillReceiveProps = function(nextProps) {
-      var chart = this.state.chart;
-      if (nextProps.redraw) {
-        chart.destroy();
-        this.initializeChart(nextProps);
-      } else {
-        dataKey = dataKey || dataKeys[chart.name];
-        updatePoints(nextProps, chart, dataKey);
-        if (chart.scale) {
-          chart.scale.xLabels = nextProps.data.labels;
-           
-            if (chart.scale.calculateXLabelRotation){
-          chart.scale.calculateXLabelRotation();
+            render() {
+                var _props = {};
+                for (var name in this.props) {
+                    if (this.props.hasOwnProperty(name)) {
+                        if (excludedProps.indexOf(name) === -1) {
+                            _props[name] = this.props[name];
+                        }
+                    }
+                }
+
+                return React.createElement('canvas', _props)
             }
         }
-        chart.update();
-      }
-    };
-
-    classData.initializeChart = function(nextProps) {
-      var Chart = require('chart.js');
-      var el = ReactDOM.findDOMNode(this);
-      var ctx = el.getContext("2d");
-      var chart = new Chart(ctx)[chartType](nextProps.data, nextProps.options || {});
-      this.state.chart = chart;
-    };
-
-    // return the chartjs instance
-    classData.getChart = function() {
-      return this.state.chart;
-    };
-
-    // return the canvass element that contains the chart
-    classData.getCanvass = function() {
-      return this.refs.canvass;
-    };
-
-    classData.getCanvas = classData.getCanvass;
-
-    var i;
-    for (i=0; i<extras.length; i++) {
-      extra(extras[i]);
-    }
-    for (i=0; i<methodNames.length; i++) {
-      extra(methodNames[i]);
-    }
 
-    return React.createClass(classData);
-  }
+        return ChartComponent;
+    }
 };
 
 var dataKeys = {