aleleba/chartjs-2-react
1
0
Fork 0
mirror of https://github.com/aleleba/chartjs-2-react.git synced 2025-06-25 00:08:21 -06:00
Code Issues Actions Packages Projects Releases Wiki Activity

Se agrega el Repositorio de npm que es en Readme.

Browse Source 
Se agrega la libreria react-chartjs-2 para agregar las graficas de Barras y de Lineas.
Se sube a version 1.1.0
Se sube a GitHub 1.1.0
This commit is contained in:
Alejandro Lembke Barrientos
2020-02-08 15:15:09 -06:00
parent 77ed20aa45
commit fe3bf8702e
7 changed files with 209 additions and 19 deletions
Download Patch File Download Diff File Expand all files Collapse all files

85
src/Bar.jsx Normal file
View File

@ -0,0 +1,85 @@
import React, { Component } from 'react';
import { Bar } from 'react-chartjs-2';
import ID from './Service/ID.js';
class BarComponent 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',
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(
<Bar 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} />
)
}
}
export default BarComponent

86
src/Line.jsx Normal file
View File

@ -0,0 +1,86 @@
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

4
src/index.js
View File

@ -1,5 +1,9 @@
import RadialGauge from './RadialGauge.jsx';
import Bar from './Bar.jsx';
import Line from './Line.jsx';
export { RadialGauge }
export { Bar }
export { Line }
export default { RadialGauge }