From 215f78af147350088516a918afb8b84db492787a Mon Sep 17 00:00:00 2001
From: Joram Wilander <jwawilander@gmail.com>
Date: Tue, 26 Apr 2016 12:28:27 -0400
Subject: Prevent graphs bouncing multiples times when loading analytics pages
 (#2800)

---
 webapp/components/analytics/doughnut_chart.jsx | 25 ++++++++++++++++---------
 webapp/components/analytics/line_chart.jsx     | 16 ++++++++++------
 2 files changed, 26 insertions(+), 15 deletions(-)

diff --git a/webapp/components/analytics/doughnut_chart.jsx b/webapp/components/analytics/doughnut_chart.jsx
index 169ac3105..ca037c180 100644
--- a/webapp/components/analytics/doughnut_chart.jsx
+++ b/webapp/components/analytics/doughnut_chart.jsx
@@ -1,11 +1,13 @@
 // Copyright (c) 2016 Mattermost, Inc. All Rights Reserved.
 // See License.txt for license information.
 
-import ReactDOM from 'react-dom';
 import {FormattedMessage} from 'react-intl';
-import Chart from 'chart.js';
+
+import * as Utils from 'utils/utils.jsx';
 
 import React from 'react';
+import ReactDOM from 'react-dom';
+import Chart from 'chart.js';
 
 export default class DoughnutChart extends React.Component {
     constructor(props) {
@@ -16,13 +18,15 @@ export default class DoughnutChart extends React.Component {
     }
 
     componentDidMount() {
-        this.initChart(this.props);
+        this.initChart();
     }
 
-    componentWillReceiveProps(nextProps) {
-        if (this.chart) {
-            this.chart.destroy();
-            this.initChart(nextProps);
+    componentDidUpdate(prevProps) {
+        if (!Utils.areObjectsEqual(prevProps.data, this.props.data) || !Utils.areObjectsEqual(prevProps.options, this.props.options)) {
+            if (this.chart) {
+                this.chart.destroy();
+            }
+            this.initChart();
         }
     }
 
@@ -32,10 +36,13 @@ export default class DoughnutChart extends React.Component {
         }
     }
 
-    initChart(props) {
+    initChart() {
+        if (!this.refs.canvas) {
+            return;
+        }
         var el = ReactDOM.findDOMNode(this.refs.canvas);
         var ctx = el.getContext('2d');
-        this.chart = new Chart(ctx).Doughnut(props.data, props.options || {}); //eslint-disable-line new-cap
+        this.chart = new Chart(ctx).Doughnut(this.props.data, this.props.options || {}); //eslint-disable-line new-cap
     }
 
     render() {
diff --git a/webapp/components/analytics/line_chart.jsx b/webapp/components/analytics/line_chart.jsx
index 6a3b8c0f0..f45e7f5fa 100644
--- a/webapp/components/analytics/line_chart.jsx
+++ b/webapp/components/analytics/line_chart.jsx
@@ -1,11 +1,13 @@
 // Copyright (c) 2015 Mattermost, Inc. All Rights Reserved.
 // See License.txt for license information.
 
-import ReactDOM from 'react-dom';
 import {FormattedMessage} from 'react-intl';
-import Chart from 'chart.js';
+
+import * as Utils from 'utils/utils.jsx';
 
 import React from 'react';
+import ReactDOM from 'react-dom';
+import Chart from 'chart.js';
 
 export default class LineChart extends React.Component {
     constructor(props) {
@@ -19,11 +21,13 @@ export default class LineChart extends React.Component {
         this.initChart();
     }
 
-    componentDidUpdate() {
-        if (this.chart) {
-            this.chart.destroy();
+    componentDidUpdate(prevProps) {
+        if (!Utils.areObjectsEqual(prevProps.data, this.props.data) || !Utils.areObjectsEqual(prevProps.options, this.props.options)) {
+            if (this.chart) {
+                this.chart.destroy();
+            }
+            this.initChart();
         }
-        this.initChart();
     }
 
     componentWillUnmount() {
-- 
cgit v1.2.3-1-g7c22