ESPTrainer/imports/ui/ScoreChart.jsx

import React, { Component, PropTypes} from 'react';
import Chart from 'chart.js';





export default class ScoreChart extends Component {
	constructor(props) {
		super(props);
		Chart.defaults.global.legend.labels.fontColor = '#fff';
		this.chart = null;
		this.scoreScales = {
			yAxes: [{
				ticks: {
					fontColor: "#fff",
					stepSize: 6,
					max: 24,
				}
			}],
			xAxes: [{
				ticks: {
					fontColor: "#fff",
					fontSize: 10,
				}
			}]
		};
	}

	shouldComponentUpdate(nextProps) {
		return this.props.data !== nextProps.data;
	}

	componentDidMount() {
		let labels = Object.keys(this.props.data);
		const data = labels.map(key => this.props.data[key]);
		labels = labels.map(ts => moment.unix(ts).format('DD/MM/YYYY H:ss'));
		this.chart = new Chart(this.canvas, {
			type: 'line',
			data: {
				labels: labels,
				datasets: [{
					label: 'Progression',
					data: data,
					backgroundColor: 'rgba(33, 150, 243, 0.2)',
					borderColor: 'rgba(33, 150, 243, 1)',
					borderWidth: 1
				}]
			},
			options: { scales: this.scoreScales }
		});
	}

	componentDidUpdate() {
		let labels = Object.keys(this.props.data);
		const data = labels.map(key => this.props.data[key]);
		labels = labels.map(ts => moment.unix(ts).format('DD/MM/YYYY H:ss'));
		this.chart.data.labels = labels;
		this.chart.data.datasets[0].data = data;
		this.chart.update();
	}

	render() {
		return <canvas ref={(node) => this.canvas = node} />;
	}
}

Chart.propTypes = {
	id: PropTypes.string.isRequired,
	data: PropTypes.object.isRequired
};