Prevent graphs bouncing multiples times when loading analytics pages (#2800)

This commit is contained in:
Joram Wilander
2016-04-26 12:28:27 -04:00
committed by Christopher Speller
parent c41cd44ada
commit 215f78af14
2 changed files with 26 additions and 15 deletions

View File

@@ -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() {

View File

@@ -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() {