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
+ }
+
+
}
}