86 lines
2.5 KiB
React
86 lines
2.5 KiB
React
|
import React, { Component } from 'react';
|
||
|
|
|
||
|
|
import { Line } from 'react-chartjs-2';
|
||
|
|
|
||
|
|
import ID from './Service/ID.js';
|
||
|
|
|
||
|
|
class LineComponent extends Component {
|
||
|
|
|
||
|
|
constructor(props) {
|
||
|
|
|
||
|
|
super(props)
|
||
|
|
|
||
|
|
let id = this.props.id ? this.props.id : ID(),
|
||
|
|
data = {
|
||
|
|
labels: ['Valor 1', 'Valor 2', 'Valor 3', 'Valor 4', 'Valor 5'],
|
||
|
|
datasets: [{
|
||
|
|
label: 'Valor',
|
||
|
|
fill: false,
|
||
|
|
data: [],
|
||
|
|
backgroundColor: 'rgba(75, 192, 192, 0.2)',
|
||
|
|
borderColor: 'rgba(75, 192, 192, 1)',
|
||
|
|
borderWidth: 1
|
||
|
|
}]
|
||
|
|
},
|
||
|
|
options = {
|
||
|
|
responsive: true,
|
||
|
|
scales: {
|
||
|
|
yAxes: [{
|
||
|
|
ticks: {
|
||
|
|
beginAtZero: true
|
||
|
|
}
|
||
|
|
}]
|
||
|
|
},
|
||
|
|
legend: {
|
||
|
|
display: true,
|
||
|
|
position: 'bottom'
|
||
|
|
}
|
||
|
|
},
|
||
|
|
legend = {
|
||
|
|
display: true,
|
||
|
|
position: 'bottom'
|
||
|
|
}
|
||
|
|
|
||
|
|
for(let i = 0; i < 5 ; i ++){
|
||
|
|
|
||
|
|
let dato = Math.round(Math.random() * 25)
|
||
|
|
|
||
|
|
data.datasets[0].data.push(dato)
|
||
|
|
|
||
|
|
}
|
||
|
|
|
||
|
|
this.state = {
|
||
|
|
id,
|
||
|
|
data,
|
||
|
|
width: 100,
|
||
|
|
height: 50,
|
||
|
|
options,
|
||
|
|
legend,
|
||
|
|
redraw: false
|
||
|
|
}
|
||
|
|
|
||
|
|
}
|
||
|
|
|
||
|
|
componentDidMount(){
|
||
|
|
|
||
|
|
this.setState({
|
||
|
|
id: this.props.id !== undefined ? this.props.id : this.state.id,
|
||
|
|
data: this.props.data !== undefined ? this.props.data : this.state.data,
|
||
|
|
options: this.props.options !== undefined ? this.props.options : this.state.options,
|
||
|
|
width: this.props.width !== undefined ? this.props.width : this.state.width,
|
||
|
|
height: this.props.height !== undefined ? this.props.height : this.state.height,
|
||
|
|
legend: this.props.legend !== undefined ? this.props.legend : this.state.legend,
|
||
|
|
redraw: this.props.redraw !== undefined ? this.props.redraw : this.state.redraw
|
||
|
|
})
|
||
|
|
|
||
|
|
}
|
||
|
|
|
||
|
|
render(){
|
||
|
|
|
||
|
|
return(
|
||
|
|
<Line id={this.state.id} data={this.state.data} options={this.state.options} width={this.state.width} height={this.state.height} legend={this.state.legend} redraw={this.state.redraw} fill={false} />
|
||
|
|
)
|
||
|
|
}
|
||
|
|
}
|
||
|
|
|
||
|
|
export default LineComponent
|