aleleba/chartjs-2-react
1
0
Fork 0
Code Issues Pull Requests 23 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
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

2
README.md
View File

@ -2,7 +2,7 @@
> Libreria de chart.js para React.js
[![NPM](https://img.shields.io/npm/v/chart-2-react.svg)](https://www.npmjs.com/package/chart-2-react) [![JavaScript Style Guide](https://img.shields.io/badge/code_style-standard-brightgreen.svg)](https://standardjs.com)
[![NPM](https://img.shields.io/npm/v/chart-2-react.svg)](https://www.npmjs.com/package/chartjs-2-react) [![JavaScript Style Guide](https://img.shields.io/badge/code_style-standard-brightgreen.svg)](https://standardjs.com)
## Install

21
example/src/App.js
View File

@ -1,17 +1,28 @@
import React, { Component } from 'react'
import React, { Component } from 'react';
import { RadialGauge } from 'chartjs-2-react'
import { RadialGauge, Bar, Line } from 'chartjs-2-react';
export default class App extends Component {
render () {
return (
<div>
<div style={{maxWidth: '600px', marginTop: '25px'}}>
return (
<div style={{paddingBottom: '100px'}}>
<div style={{maxWidth: '600px', marginTop: '25px', margin: 'auto'}}>
<h3 style={{textAlign: 'center'}}>RadialGauge Component:</h3>
<RadialGauge />
</div>
<div style={{maxWidth: '600px', marginTop: '25px', margin: 'auto'}}>
<h3 style={{textAlign: 'center'}}>Bar Component:</h3>
<Bar />
</div>
<div style={{maxWidth: '600px', marginTop: '25px', margin: 'auto'}}>
<h3 style={{textAlign: 'center'}}>Line Component:</h3>
<Line />
</div>
</div>
)
}

25
package-lock.json generated
View File

@ -1,6 +1,6 @@
{
"name": "chartjs-2-react",
"version": "1.0.10",
"version": "1.0.13",
"lockfileVersion": 1,
"requires": true,
"dependencies": {
@ -8956,8 +8956,7 @@
"js-tokens": {
"version": "4.0.0",
"resolved": "https://registry.npmjs.org/js-tokens/-/js-tokens-4.0.0.tgz",
"integrity": "sha512-RdJUflcE3cUzKiMqQgsCu06FPu9UdIJO0beYbPhHN4k6apgJtifcoCtT9bcxOpYBtpD2kCM6Sbzg4CausW/PKQ==",
"dev": true
"integrity": "sha512-RdJUflcE3cUzKiMqQgsCu06FPu9UdIJO0beYbPhHN4k6apgJtifcoCtT9bcxOpYBtpD2kCM6Sbzg4CausW/PKQ=="
},
"js-yaml": {
"version": "3.13.1",
@ -9291,8 +9290,7 @@
"lodash": {
"version": "4.17.15",
"resolved": "https://registry.npmjs.org/lodash/-/lodash-4.17.15.tgz",
"integrity": "sha512-8xOcRHvCjnocdS5cpwXQXVzmmh5e5+saE2QGoeQmbKmRS6J3VQppPOIt0MnmE+4xlZoumy0GPG0D0MVIQbNA1A==",
"dev": true
"integrity": "sha512-8xOcRHvCjnocdS5cpwXQXVzmmh5e5+saE2QGoeQmbKmRS6J3VQppPOIt0MnmE+4xlZoumy0GPG0D0MVIQbNA1A=="
},
"lodash._reinterpolate": {
"version": "3.0.0",
@ -9371,7 +9369,6 @@
"version": "1.4.0",
"resolved": "https://registry.npmjs.org/loose-envify/-/loose-envify-1.4.0.tgz",
"integrity": "sha512-lyuxPGr/Wfhrlem2CL/UcnUc1zcqKAImBDzukY7Y5F/yQiNdko6+fRLevlw1HgMySw7f611UIY408EtxRSoK3Q==",
"dev": true,
"requires": {
"js-tokens": "^3.0.0 || ^4.0.0"
}
@ -10079,8 +10076,7 @@
"object-assign": {
"version": "4.1.1",
"resolved": "https://registry.npmjs.org/object-assign/-/object-assign-4.1.1.tgz",
"integrity": "sha1-IQmtx5ZYh8/AXLvUQsrIv7s2CGM=",
"dev": true
"integrity": "sha1-IQmtx5ZYh8/AXLvUQsrIv7s2CGM="
},
"object-copy": {
"version": "0.1.0",
@ -12708,7 +12704,6 @@
"version": "15.7.2",
"resolved": "https://registry.npmjs.org/prop-types/-/prop-types-15.7.2.tgz",
"integrity": "sha512-8QQikdH7//R2vurIJSutZ1smHYTcLpRWEOlHnzcWHmBYrOGUysKwSsrC89BCiFj3CbrfJ/nXFdJepOVrY1GCHQ==",
"dev": true,
"requires": {
"loose-envify": "^1.4.0",
"object-assign": "^4.1.1",
@ -12905,6 +12900,15 @@
"prop-types": "^15.6.2"
}
},
"react-chartjs-2": {
"version": "2.9.0",
"resolved": "https://registry.npmjs.org/react-chartjs-2/-/react-chartjs-2-2.9.0.tgz",
"integrity": "sha512-IYwqUUnQRAJ9SNA978vxulHJTcUFTJk2LDVfbAyk0TnJFZZG7+6U/2flsE4MCw6WCbBjTTypy8T82Ch7XrPtRw==",
"requires": {
"lodash": "^4.17.4",
"prop-types": "^15.5.8"
}
},
"react-dev-utils": {
"version": "5.0.3",
"resolved": "https://registry.npmjs.org/react-dev-utils/-/react-dev-utils-5.0.3.tgz",
@ -13075,8 +13079,7 @@
"react-is": {
"version": "16.12.0",
"resolved": "https://registry.npmjs.org/react-is/-/react-is-16.12.0.tgz",
"integrity": "sha512-rPCkf/mWBtKc97aLL9/txD8DZdemK0vkA3JMLShjlJB3Pj3s+lpf1KaBzMfQrAmhMQB0n1cU/SUGgKKBCe837Q==",
"dev": true
"integrity": "sha512-rPCkf/mWBtKc97aLL9/txD8DZdemK0vkA3JMLShjlJB3Pj3s+lpf1KaBzMfQrAmhMQB0n1cU/SUGgKKBCe837Q=="
},
"react-scripts": {
"version": "1.1.5",

5
package.json
View File

@ -1,6 +1,6 @@
{
"name": "chartjs-2-react",
"version": "1.0.13",
"version": "1.1.0",
"description": "Libreria de chart.js para React.js",
"author": "aleleba",
"license": "MIT",
@ -60,6 +60,7 @@
],
"dependencies": {
"chart.js": "^2.9.3",
"chartjs-chart-radial-gauge": "^1.0.3"
"chartjs-chart-radial-gauge": "^1.0.3",
"react-chartjs-2": "^2.9.0"
}
}

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 }