// 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 PropTypes from 'prop-types'; 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 = ( ); } else if (this.props.data.labels.length === 0) { content = (
); } else { content = ( ); } return (
{this.props.title}
{content}
); } } LineChart.propTypes = { title: PropTypes.node.isRequired, width: PropTypes.string.isRequired, height: PropTypes.string.isRequired, data: PropTypes.object, options: PropTypes.object };