Se Elimina la libreria de react-chartjs-2 y trabjar directamente con chart.js para solucionar el problema al momento de actualizar data.
Se sube a version 1.1.1 Se sube a GitHub 1.1.1
This commit is contained in:
parent
fe3bf8702e
commit
60cae61ef1
@ -3,6 +3,7 @@ import React, { Component } from 'react';
|
||||
import { RadialGauge, Bar, Line } from 'chartjs-2-react';
|
||||
|
||||
export default class App extends Component {
|
||||
|
||||
render () {
|
||||
|
||||
return (
|
||||
@ -26,4 +27,5 @@ export default class App extends Component {
|
||||
</div>
|
||||
)
|
||||
}
|
||||
|
||||
}
|
||||
|
||||
25
package-lock.json
generated
25
package-lock.json
generated
@ -1,6 +1,6 @@
|
||||
{
|
||||
"name": "chartjs-2-react",
|
||||
"version": "1.0.13",
|
||||
"version": "1.1.0",
|
||||
"lockfileVersion": 1,
|
||||
"requires": true,
|
||||
"dependencies": {
|
||||
@ -8956,7 +8956,8 @@
|
||||
"js-tokens": {
|
||||
"version": "4.0.0",
|
||||
"resolved": "https://registry.npmjs.org/js-tokens/-/js-tokens-4.0.0.tgz",
|
||||
"integrity": "sha512-RdJUflcE3cUzKiMqQgsCu06FPu9UdIJO0beYbPhHN4k6apgJtifcoCtT9bcxOpYBtpD2kCM6Sbzg4CausW/PKQ=="
|
||||
"integrity": "sha512-RdJUflcE3cUzKiMqQgsCu06FPu9UdIJO0beYbPhHN4k6apgJtifcoCtT9bcxOpYBtpD2kCM6Sbzg4CausW/PKQ==",
|
||||
"dev": true
|
||||
},
|
||||
"js-yaml": {
|
||||
"version": "3.13.1",
|
||||
@ -9290,7 +9291,8 @@
|
||||
"lodash": {
|
||||
"version": "4.17.15",
|
||||
"resolved": "https://registry.npmjs.org/lodash/-/lodash-4.17.15.tgz",
|
||||
"integrity": "sha512-8xOcRHvCjnocdS5cpwXQXVzmmh5e5+saE2QGoeQmbKmRS6J3VQppPOIt0MnmE+4xlZoumy0GPG0D0MVIQbNA1A=="
|
||||
"integrity": "sha512-8xOcRHvCjnocdS5cpwXQXVzmmh5e5+saE2QGoeQmbKmRS6J3VQppPOIt0MnmE+4xlZoumy0GPG0D0MVIQbNA1A==",
|
||||
"dev": true
|
||||
},
|
||||
"lodash._reinterpolate": {
|
||||
"version": "3.0.0",
|
||||
@ -9369,6 +9371,7 @@
|
||||
"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"
|
||||
}
|
||||
@ -10076,7 +10079,8 @@
|
||||
"object-assign": {
|
||||
"version": "4.1.1",
|
||||
"resolved": "https://registry.npmjs.org/object-assign/-/object-assign-4.1.1.tgz",
|
||||
"integrity": "sha1-IQmtx5ZYh8/AXLvUQsrIv7s2CGM="
|
||||
"integrity": "sha1-IQmtx5ZYh8/AXLvUQsrIv7s2CGM=",
|
||||
"dev": true
|
||||
},
|
||||
"object-copy": {
|
||||
"version": "0.1.0",
|
||||
@ -12704,6 +12708,7 @@
|
||||
"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",
|
||||
@ -12900,15 +12905,6 @@
|
||||
"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",
|
||||
@ -13079,7 +13075,8 @@
|
||||
"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=="
|
||||
"integrity": "sha512-rPCkf/mWBtKc97aLL9/txD8DZdemK0vkA3JMLShjlJB3Pj3s+lpf1KaBzMfQrAmhMQB0n1cU/SUGgKKBCe837Q==",
|
||||
"dev": true
|
||||
},
|
||||
"react-scripts": {
|
||||
"version": "1.1.5",
|
||||
|
||||
@ -1,6 +1,6 @@
|
||||
{
|
||||
"name": "chartjs-2-react",
|
||||
"version": "1.1.0",
|
||||
"version": "1.1.1",
|
||||
"description": "Libreria de chart.js para React.js",
|
||||
"author": "aleleba",
|
||||
"license": "MIT",
|
||||
@ -60,7 +60,6 @@
|
||||
],
|
||||
"dependencies": {
|
||||
"chart.js": "^2.9.3",
|
||||
"chartjs-chart-radial-gauge": "^1.0.3",
|
||||
"react-chartjs-2": "^2.9.0"
|
||||
"chartjs-chart-radial-gauge": "^1.0.3"
|
||||
}
|
||||
}
|
||||
|
||||
44
src/Bar.jsx
44
src/Bar.jsx
@ -1,7 +1,5 @@
|
||||
import React, { Component } from 'react';
|
||||
|
||||
import { Bar } from 'react-chartjs-2';
|
||||
|
||||
import ID from './Service/ID.js';
|
||||
|
||||
class BarComponent extends Component {
|
||||
@ -34,10 +32,6 @@ class BarComponent extends Component {
|
||||
display: true,
|
||||
position: 'bottom'
|
||||
}
|
||||
},
|
||||
legend = {
|
||||
display: true,
|
||||
position: 'bottom'
|
||||
}
|
||||
|
||||
for(let i = 0; i < 5 ; i ++){
|
||||
@ -50,35 +44,43 @@ class BarComponent extends Component {
|
||||
|
||||
this.state = {
|
||||
id,
|
||||
chart: null,
|
||||
data,
|
||||
width: 100,
|
||||
height: 50,
|
||||
options,
|
||||
legend,
|
||||
redraw: false
|
||||
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,
|
||||
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
|
||||
chart: new Chart(ctx, config)
|
||||
})
|
||||
|
||||
}
|
||||
|
||||
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} />
|
||||
)
|
||||
if (this.state.chart !== null) {
|
||||
|
||||
this.state.chart.update();
|
||||
|
||||
return <canvas id={`${this.state.id}`} />
|
||||
|
||||
|
||||
} else {
|
||||
return <canvas id={`${this.state.id}`} />
|
||||
}
|
||||
|
||||
}
|
||||
}
|
||||
|
||||
|
||||
45
src/Line.jsx
45
src/Line.jsx
@ -1,7 +1,5 @@
|
||||
import React, { Component } from 'react';
|
||||
|
||||
import { Line } from 'react-chartjs-2';
|
||||
|
||||
import ID from './Service/ID.js';
|
||||
|
||||
class LineComponent extends Component {
|
||||
@ -35,10 +33,6 @@ class LineComponent extends Component {
|
||||
display: true,
|
||||
position: 'bottom'
|
||||
}
|
||||
},
|
||||
legend = {
|
||||
display: true,
|
||||
position: 'bottom'
|
||||
}
|
||||
|
||||
for(let i = 0; i < 5 ; i ++){
|
||||
@ -51,35 +45,44 @@ class LineComponent extends Component {
|
||||
|
||||
this.state = {
|
||||
id,
|
||||
chart: null,
|
||||
data,
|
||||
width: 100,
|
||||
height: 50,
|
||||
options,
|
||||
legend,
|
||||
redraw: false
|
||||
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,
|
||||
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
|
||||
chart: new Chart(ctx, config)
|
||||
})
|
||||
|
||||
}
|
||||
|
||||
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} />
|
||||
)
|
||||
if (this.state.chart !== null) {
|
||||
|
||||
this.state.chart.update();
|
||||
|
||||
return <canvas id={`${this.state.id}`} />
|
||||
|
||||
|
||||
} else {
|
||||
return <canvas id={`${this.state.id}`} />
|
||||
}
|
||||
|
||||
|
||||
}
|
||||
}
|
||||
|
||||
|
||||
Loading…
Reference in New Issue
Block a user