blob: 7f4ca51d0eb5263b67d8b8ae24b7f4a44a2f5774 (
plain)
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
80
81
82
83
84
85
86
87
88
89
90
91
92
93
94
95
96
97
98
99
100
101
102
103
104
105
106
107
108
109
110
111
112
113
114
115
116
117
118
119
|
// Copyright (c) 2015-present Mattermost, Inc. All Rights Reserved.
// See License.txt for license information.
import {FormattedMessage} from 'react-intl';
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) {
super(props);
this.initChart = this.initChart.bind(this);
this.chart = null;
}
componentDidMount() {
this.initChart();
}
componentWillUpdate(nextProps) {
const willHaveData = nextProps.data && nextProps.data.labels.length > 0;
const hasChart = Boolean(this.chart);
if (!willHaveData && hasChart) {
// Clean up the rendered chart before we render and destroy its context
this.chart.destroy();
this.chart = null;
}
}
componentDidUpdate(prevProps) {
if (Utils.areObjectsEqual(prevProps.data, this.props.data) && Utils.areObjectsEqual(prevProps.options, this.props.options)) {
return;
}
const hasData = this.props.data && this.props.data.labels.length > 0;
const hasChart = Boolean(this.chart);
if (hasData) {
// Update the rendered chart or initialize it as necessary
this.initChart(hasChart);
}
}
componentWillUnmount() {
if (this.chart) {
this.chart.destroy();
}
}
initChart(update) {
if (!this.refs.canvas) {
return;
}
var el = ReactDOM.findDOMNode(this.refs.canvas);
var ctx = el.getContext('2d');
this.chart = new Chart(ctx, {type: 'line', data: this.props.data, options: this.props.options || {}}); // eslint-disable-line new-cap
if (update) {
this.chart.update();
}
}
render() {
let content;
if (this.props.data == null) {
content = (
<FormattedMessage
id='analytics.chart.loading'
defaultMessage='Loading...'
/>
);
} else if (this.props.data.labels.length === 0) {
content = (
<h5>
<FormattedMessage
id='analytics.chart.meaningful'
defaultMessage='Not enough data for a meaningful representation.'
/>
</h5>
);
} else {
content = (
<canvas
ref='canvas'
width={this.props.width}
height={this.props.height}
/>
);
}
return (
<div className='col-sm-12'>
<div className='total-count by-day'>
<div className='title'>
{this.props.title}
</div>
<div className='content'>
{content}
</div>
</div>
</div>
);
}
}
LineChart.propTypes = {
title: React.PropTypes.node.isRequired,
width: React.PropTypes.string.isRequired,
height: React.PropTypes.string.isRequired,
data: React.PropTypes.object,
options: React.PropTypes.object
};
|
