From 60cae61ef13d1119835007424814e526d62c1784 Mon Sep 17 00:00:00 2001 From: Alejandro Lembke Barrientos Date: Tue, 11 Feb 2020 09:26:23 -0600 Subject: [PATCH] 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 --- example/src/App.js | 2 ++ package-lock.json | 25 +++++++++++-------------- package.json | 5 ++--- src/Bar.jsx | 44 +++++++++++++++++++++++--------------------- src/Line.jsx | 45 ++++++++++++++++++++++++--------------------- 5 files changed, 62 insertions(+), 59 deletions(-) diff --git a/example/src/App.js b/example/src/App.js index 090e607..b8977ab 100644 --- a/example/src/App.js +++ b/example/src/App.js @@ -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 { ) } + } diff --git a/package-lock.json b/package-lock.json index 0a70d5f..db6ba37 100644 --- a/package-lock.json +++ b/package-lock.json @@ -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", diff --git a/package.json b/package.json index 3326369..ec2c326 100644 --- a/package.json +++ b/package.json @@ -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" } } diff --git a/src/Bar.jsx b/src/Bar.jsx index 9c92e32..446300b 100644 --- a/src/Bar.jsx +++ b/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( - - ) + if (this.state.chart !== null) { + + this.state.chart.update(); + + return + + + } else { + return + } + } } diff --git a/src/Line.jsx b/src/Line.jsx index 4d70f60..f7a4603 100644 --- a/src/Line.jsx +++ b/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( - - ) + if (this.state.chart !== null) { + + this.state.chart.update(); + + return + + + } else { + return + } + + } }