mirror of
https://github.com/aleleba/chartjs-2-react.git
synced 2025-07-03 04:08:18 -06:00
Compare commits
6 Commits
Author | SHA1 | Date | |
---|---|---|---|
60cae61ef1 | |||
fe3bf8702e | |||
77ed20aa45 | |||
0d0304ae86 | |||
92599328ad | |||
783d248f1e |
@ -2,7 +2,7 @@
|
||||
|
||||
> Libreria de chart.js para React.js
|
||||
|
||||
[](https://www.npmjs.com/package/chart-2-react) [](https://standardjs.com)
|
||||
[](https://www.npmjs.com/package/chartjs-2-react) [](https://standardjs.com)
|
||||
|
||||
## Install
|
||||
|
||||
|
1071
example/package-lock.json
generated
1071
example/package-lock.json
generated
File diff suppressed because it is too large
Load Diff
@ -5,11 +5,11 @@
|
||||
"license": "MIT",
|
||||
"private": true,
|
||||
"dependencies": {
|
||||
"chartjs-2-react": "file:..",
|
||||
"prop-types": "^15.6.2",
|
||||
"react": "^16.4.1",
|
||||
"react-dom": "^16.4.1",
|
||||
"react-scripts": "^1.1.4",
|
||||
"chartjs-2-react": "file:.."
|
||||
"react-scripts": "^1.1.4"
|
||||
},
|
||||
"scripts": {
|
||||
"start": "react-scripts start",
|
||||
|
@ -1,14 +1,31 @@
|
||||
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 style={{maxWidth: '600px', marginTop: '25px'}}>
|
||||
<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>
|
||||
)
|
||||
}
|
||||
|
||||
}
|
||||
|
2
package-lock.json
generated
2
package-lock.json
generated
@ -1,6 +1,6 @@
|
||||
{
|
||||
"name": "chartjs-2-react",
|
||||
"version": "1.0.0",
|
||||
"version": "1.1.0",
|
||||
"lockfileVersion": 1,
|
||||
"requires": true,
|
||||
"dependencies": {
|
||||
|
@ -1,6 +1,6 @@
|
||||
{
|
||||
"name": "chartjs-2-react",
|
||||
"version": "1.0.9",
|
||||
"version": "1.1.1",
|
||||
"description": "Libreria de chart.js para React.js",
|
||||
"author": "aleleba",
|
||||
"license": "MIT",
|
||||
|
87
src/Bar.jsx
Normal file
87
src/Bar.jsx
Normal file
@ -0,0 +1,87 @@
|
||||
import React, { Component } from 'react';
|
||||
|
||||
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'
|
||||
}
|
||||
}
|
||||
|
||||
for(let i = 0; i < 5 ; i ++){
|
||||
|
||||
let dato = Math.round(Math.random() * 25)
|
||||
|
||||
data.datasets[0].data.push(dato)
|
||||
|
||||
}
|
||||
|
||||
this.state = {
|
||||
id,
|
||||
chart: null,
|
||||
data,
|
||||
options
|
||||
}
|
||||
|
||||
}
|
||||
|
||||
componentDidMount(){
|
||||
|
||||
var ctx = document.getElementById(`${this.state.id}`).getContext('2d');
|
||||
|
||||
let config = {
|
||||
type: 'bar',
|
||||
data: (this.props.config !== undefined) && (this.props.config.data !== undefined) ? this.props.config.data : this.state.data,
|
||||
options: (this.props.config !== undefined) && (this.props.config.options !== undefined) ? this.props.config.options : this.state.options
|
||||
}
|
||||
|
||||
this.setState({
|
||||
id: this.props.id !== undefined ? this.props.id : this.state.id,
|
||||
chart: new Chart(ctx, config)
|
||||
})
|
||||
|
||||
}
|
||||
|
||||
render(){
|
||||
|
||||
if (this.state.chart !== null) {
|
||||
|
||||
this.state.chart.update();
|
||||
|
||||
return <canvas id={`${this.state.id}`} />
|
||||
|
||||
|
||||
} else {
|
||||
return <canvas id={`${this.state.id}`} />
|
||||
}
|
||||
|
||||
}
|
||||
}
|
||||
|
||||
export default BarComponent
|
89
src/Line.jsx
Normal file
89
src/Line.jsx
Normal file
@ -0,0 +1,89 @@
|
||||
import React, { Component } from 'react';
|
||||
|
||||
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'
|
||||
}
|
||||
}
|
||||
|
||||
for(let i = 0; i < 5 ; i ++){
|
||||
|
||||
let dato = Math.round(Math.random() * 25)
|
||||
|
||||
data.datasets[0].data.push(dato)
|
||||
|
||||
}
|
||||
|
||||
this.state = {
|
||||
id,
|
||||
chart: null,
|
||||
data,
|
||||
options
|
||||
}
|
||||
|
||||
}
|
||||
|
||||
componentDidMount(){
|
||||
|
||||
var ctx = document.getElementById(`${this.state.id}`).getContext('2d');
|
||||
|
||||
let config = {
|
||||
type: 'line',
|
||||
data: (this.props.config !== undefined) && (this.props.config.data !== undefined) ? this.props.config.data : this.state.data,
|
||||
options: (this.props.config !== undefined) && (this.props.config.options !== undefined) ? this.props.config.options : this.state.options
|
||||
}
|
||||
|
||||
this.setState({
|
||||
id: this.props.id !== undefined ? this.props.id : this.state.id,
|
||||
chart: new Chart(ctx, config)
|
||||
})
|
||||
|
||||
}
|
||||
|
||||
render(){
|
||||
|
||||
if (this.state.chart !== null) {
|
||||
|
||||
this.state.chart.update();
|
||||
|
||||
return <canvas id={`${this.state.id}`} />
|
||||
|
||||
|
||||
} else {
|
||||
return <canvas id={`${this.state.id}`} />
|
||||
}
|
||||
|
||||
|
||||
}
|
||||
}
|
||||
|
||||
export default LineComponent
|
@ -4,6 +4,8 @@ import Chart from 'chart.js';
|
||||
|
||||
import 'chartjs-chart-radial-gauge/build/Chart.RadialGauge.umd.min.js';
|
||||
|
||||
import ID from './Service/ID.js'
|
||||
|
||||
class RadialGauge extends Component {
|
||||
|
||||
constructor(props) {
|
||||
@ -12,7 +14,10 @@ class RadialGauge extends Component {
|
||||
let porcentaje = Math.round(Math.random() * 100),
|
||||
porcentajeTexto = `${porcentaje} %`
|
||||
|
||||
let id = this.props.id ? this.props.id : ID()
|
||||
|
||||
this.state = {
|
||||
id,
|
||||
chart: null,
|
||||
porcentaje,
|
||||
porcentajeTexto
|
||||
@ -22,7 +27,7 @@ class RadialGauge extends Component {
|
||||
|
||||
componentDidMount() {
|
||||
|
||||
var ctx = document.getElementById('chart').getContext('2d');
|
||||
var ctx = document.getElementById(`${this.state.id}`).getContext('2d');
|
||||
|
||||
var config = {
|
||||
type: 'radialGauge',
|
||||
@ -110,10 +115,10 @@ class RadialGauge extends Component {
|
||||
|
||||
this.state.chart.update();
|
||||
|
||||
return <canvas id="chart" />
|
||||
return <canvas id={`${this.state.id}`} />
|
||||
|
||||
} else {
|
||||
return <canvas id="chart" />
|
||||
return <canvas id={`${this.state.id}`} />
|
||||
}
|
||||
}
|
||||
}
|
||||
|
25
src/Service/ID.js
Normal file
25
src/Service/ID.js
Normal file
@ -0,0 +1,25 @@
|
||||
// Generate unique IDs for use as pseudo-private/protected names.
|
||||
// Similar in concept to
|
||||
// <http://wiki.ecmascript.org/doku.php?id=strawman:names>.
|
||||
//
|
||||
// The goals of this function are twofold:
|
||||
//
|
||||
// * Provide a way to generate a string guaranteed to be unique when compared
|
||||
// to other strings generated by this function.
|
||||
// * Make the string complex enough that it is highly unlikely to be
|
||||
// accidentally duplicated by hand (this is key if you're using `ID`
|
||||
// as a private/protected name on an object).
|
||||
//
|
||||
// Use:
|
||||
//
|
||||
// var privateName = ID();
|
||||
// var o = { 'public': 'foo' };
|
||||
// o[privateName] = 'bar';
|
||||
var ID = function () {
|
||||
// Math.random should be unique because of its seeding algorithm.
|
||||
// Convert it to base 36 (numbers + letters), and grab the first 9 characters
|
||||
// after the decimal.
|
||||
return '_' + Math.random().toString(36).substr(2, 9);
|
||||
};
|
||||
|
||||
export default ID
|
@ -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 }
|
||||
|
Reference in New Issue
Block a user