From 58d1d16c23572d37c20d9bdd4d26f30e0ff8432c Mon Sep 17 00:00:00 2001
From: Dylan Munyard <dylan_munyard@technologyonecorp.com>
Date: Fri, 5 Jan 2018 15:17:20 +1000
Subject: [PATCH] Revert ES6 change that uses classes, and replace
 createElement with create-react-class fallback.

---
 lib/core.js  | 240 +++++++++++++++++++++++++--------------------------
 package.json |   3 +
 2 files changed, 119 insertions(+), 124 deletions(-)

diff --git a/lib/core.js b/lib/core.js
index c0ec668..fa9b7c2 100644
--- a/lib/core.js
+++ b/lib/core.js
@@ -1,87 +1,17 @@
 var React = require('react');
+var createReactClass = require('create-react-class');
 var ReactDOM = require('react-dom');
 
 module.exports = {
     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;
-            }
-
-            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);
+        var classData = {
+            displayName: chartType + 'Chart',
+            getInitialState: function() { return {}; },
+            render: function() {
+                var _props = {
+                    ref: 'canvass'
                 };
-            };
-
-            // return the chartjs instance
-            getChart() {
-                return this.chart;
-            }
-
-            // return the canvass element that contains the chart
-            getCanvass() {
-                return this.canvas;
-            };
-
-            getCanvas() { return this.getCanvass() };
-
-            render() {
-                var _props = {};
                 for (var name in this.props) {
                     if (this.props.hasOwnProperty(name)) {
                         if (excludedProps.indexOf(name) === -1) {
@@ -89,69 +19,131 @@ module.exports = {
                         }
                     }
                 }
+                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);
+            };
+        }
 
-                return React.createElement('canvas', _props)
+        classData.componentDidMount = function() {
+            this.initializeChart(this.props);
+        };
+
+        classData.componentWillUnmount = function() {
+            var chart = this.state.chart;
+            chart.destroy();
+        };
+
+        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();
+                    }
+                }
+                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 ChartComponent;
+        return createReactClass(classData);
     }
 };
 
 var dataKeys = {
-  'Line': 'points',
-  'Radar': 'points',
-  'Bar': 'bars'
+    'Line': 'points',
+    'Radar': 'points',
+    'Bar': 'bars'
 };
 
 var updatePoints = function(nextProps, chart, dataKey) {
-  var name = chart.name;
-
-  if (name === 'PolarArea' || name === 'Pie' || name === 'Doughnut') {
-    nextProps.data.forEach(function(segment, segmentIndex) {
-      if (!chart.segments[segmentIndex]) {
-        chart.addData(segment);
-      } else {
-        Object.keys(segment).forEach(function (key) {
-          chart.segments[segmentIndex][key] = segment[key];
+    var name = chart.name;
+
+    if (name === 'PolarArea' || name === 'Pie' || name === 'Doughnut') {
+        nextProps.data.forEach(function(segment, segmentIndex) {
+            if (!chart.segments[segmentIndex]) {
+                chart.addData(segment);
+            } else {
+                Object.keys(segment).forEach(function (key) {
+                    chart.segments[segmentIndex][key] = segment[key];
+                });
+            }
         });
-      }
-    });
 
-    while(nextProps.data.length < chart.segments.length) {
-      chart.removeData();
-    }
-  } else if (name === "Radar") {
-      chart.removeData();
-      nextProps.data.datasets.forEach(function(set, setIndex) {
-      set.data.forEach(function(val, pointIndex) {
-        if (typeof(chart.datasets[setIndex][dataKey][pointIndex]) == "undefined") {
-          addData(nextProps, chart, setIndex, pointIndex);
-        } else {
-          chart.datasets[setIndex][dataKey][pointIndex].value = val;
+        while(nextProps.data.length < chart.segments.length) {
+            chart.removeData();
         }
-      });
-    });
-  } else {
-    while (chart.scale.xLabels.length > nextProps.data.labels.length) {
-      chart.removeData();
-    }
-    nextProps.data.datasets.forEach(function(set, setIndex) {
-      set.data.forEach(function(val, pointIndex) {
-        if (typeof(chart.datasets[setIndex][dataKey][pointIndex]) == "undefined") {
-          addData(nextProps, chart, setIndex, pointIndex);
-        } else {
-          chart.datasets[setIndex][dataKey][pointIndex].value = val;
+    } else if (name === "Radar") {
+        chart.removeData();
+        nextProps.data.datasets.forEach(function(set, setIndex) {
+            set.data.forEach(function(val, pointIndex) {
+                if (typeof(chart.datasets[setIndex][dataKey][pointIndex]) == "undefined") {
+                    addData(nextProps, chart, setIndex, pointIndex);
+                } else {
+                    chart.datasets[setIndex][dataKey][pointIndex].value = val;
+                }
+            });
+        });
+    } else {
+        while (chart.scale.xLabels.length > nextProps.data.labels.length) {
+            chart.removeData();
         }
-      });
-    });
-  }
+        nextProps.data.datasets.forEach(function(set, setIndex) {
+            set.data.forEach(function(val, pointIndex) {
+                if (typeof(chart.datasets[setIndex][dataKey][pointIndex]) == "undefined") {
+                    addData(nextProps, chart, setIndex, pointIndex);
+                } else {
+                    chart.datasets[setIndex][dataKey][pointIndex].value = val;
+                }
+            });
+        });
+    }
 };
 
 var addData = function(nextProps, chart, setIndex, pointIndex) {
-  var values = [];
-  nextProps.data.datasets.forEach(function(set) {
-    values.push(set.data[pointIndex]);
-  });
-  chart.addData(values, nextProps.data.labels[setIndex]);
+    var values = [];
+    nextProps.data.datasets.forEach(function(set) {
+        values.push(set.data[pointIndex]);
+    });
+    chart.addData(values, nextProps.data.labels[setIndex]);
 };
diff --git a/package.json b/package.json
index e01e03a..5aa018d 100644
--- a/package.json
+++ b/package.json
@@ -34,5 +34,8 @@
   "devDependencies": {
     "uglify-js": "^2.4.16",
     "webpack": "^1.4.14"
+  },
+  "dependencies": {
+    "create-react-class": "^15.6.2"
   }
 }