You can not select more than 25 topics
Topics must start with a letter or number, can include dashes ('-') and can be up to 35 characters long.
50 lines
1.1 KiB
50 lines
1.1 KiB
import Chart from 'chart.js';
|
|
import PropTypes from 'prop-types';
|
|
import React, { Component } from 'react';
|
|
|
|
class LineChart extends Component {
|
|
constructor(props) {
|
|
super(props);
|
|
this.canvasRef = React.createRef();
|
|
}
|
|
|
|
componentDidMount() {
|
|
this.myChart = new Chart(this.canvasRef.current, {
|
|
type: 'line',
|
|
options: {
|
|
maintainAspectRatio: false
|
|
},
|
|
data: {
|
|
labels: this.props.data.map((d) => d.time),
|
|
datasets: [{
|
|
label: this.props.title,
|
|
data: this.props.data.map((d) => d.value),
|
|
fill: 'none',
|
|
pointRadius: 2,
|
|
borderWidth: 1,
|
|
lineTension: 0
|
|
}]
|
|
}
|
|
});
|
|
}
|
|
|
|
componentDidUpdate() {
|
|
this.myChart.data.labels = this.props.data.map((d) => d.label);
|
|
this.myChart.data.datasets[0].data = this.props.data.map((d) => d.value);
|
|
this.myChart.update();
|
|
}
|
|
|
|
render() {
|
|
return (
|
|
<canvas ref={this.canvasRef} />
|
|
);
|
|
}
|
|
}
|
|
|
|
LineChart.propTypes = {
|
|
data: PropTypes.arrayOf(PropTypes.object).isRequired,
|
|
title: PropTypes.string.isRequired
|
|
};
|
|
|
|
export default LineChart;
|