Se arreglan problemas de Compatibilidad y se vuelven todos componentes funcionales.

Se prepara para produccion.
Se sube a version 1.1.5
Se sube a GitHub 1.1.5

.eslintrc

@@ -1,9 +1,6 @@
 {
   "parser": "babel-eslint",
-  "extends": [
+  "extends": "react-app",
-    "standard",
-    "standard-react"
-  ],
   "env": {
     "es6": true
   },

example/.eslintcache

@@ -0,0 +1 @@
+[{"/home/coder/project/Chartjs-2-React/example/src/index.js":"1","/home/coder/project/Chartjs-2-React/example/src/App.js":"2"},{"size":164,"mtime":1584058544299,"results":"3","hashOfConfig":"4"},{"size":3054,"mtime":1607979071729,"results":"5","hashOfConfig":"4"},{"filePath":"6","messages":"7","errorCount":0,"warningCount":0,"fixableErrorCount":0,"fixableWarningCount":0,"usedDeprecatedRules":"8"},"3tjic6",{"filePath":"9","messages":"10","errorCount":0,"warningCount":0,"fixableErrorCount":0,"fixableWarningCount":0},"/home/coder/project/Chartjs-2-React/example/src/index.js",[],["11","12"],"/home/coder/project/Chartjs-2-React/example/src/App.js",[],{"ruleId":"13","replacedBy":"14"},{"ruleId":"15","replacedBy":"16"},"no-native-reassign",["17"],"no-negated-in-lhs",["18"],"no-global-assign","no-unsafe-negation"]

example/package.json

@@ -1,7 +1,7 @@
 {
   "name": "chartjs-2-react-example",
   "homepage": "https://aleleba.github.io/chartjs-2-react",
-  "version": "0.0.0",
+  "version": "1.1.5",
   "license": "MIT",
   "private": true,
   "dependencies": {
@@ -9,12 +9,24 @@
     "prop-types": "^15.6.2",
     "react": "^16.4.1",
     "react-dom": "^16.4.1",
-    "react-scripts": "^1.1.4"
+    "react-scripts": "^4.0.1"
   },
   "scripts": {
     "start": "react-scripts start",
     "build": "react-scripts build",
     "test": "react-scripts test --env=jsdom",
     "eject": "react-scripts eject"
+  },
+  "browserslist": {
+    "production": [
+      ">0.2%",
+      "not dead",
+      "not op_mini all"
+    ],
+    "development": [
+      "last 1 chrome version",
+      "last 1 firefox version",
+      "last 1 safari version"
+    ]
   }
 }

package.json

@@ -1,6 +1,6 @@
 {
   "name": "chartjs-2-react",
-  "version": "1.1.4",
+  "version": "1.1.5",
   "description": "Libreria de chart.js para React.js",
   "author": "aleleba",
   "license": "MIT",

src/Bar.jsx

@@ -1,14 +1,10 @@
-import React, { Component } from 'react';
+import React, { useState, useEffect } from 'react';
 
 import ID from './Service/ID.js';
 
-class BarComponent extends Component {
+let BarComponent = props => {
 
-    constructor(props) {
+    let id = props.id ? props.id : ID(),
-
-        super(props)
-
-        let id = this.props.id ? this.props.id : ID(),
         data = {
             labels: ['Valor 1', 'Valor 2', 'Valor 3', 'Valor 4', 'Valor 5'],
             datasets: [{
@@ -42,55 +38,50 @@ class BarComponent extends Component {
 
     }
 
-        this.state = {
+    let [state, setState] = useState({
         id,
         chart: null,
         data,
         options
-        }
+    })
 
-    }
+    useEffect( ()=> {
 
-    componentDidMount(){
+        var ctx = document.getElementById(`${state.id}`).getContext('2d');
-
-        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,
+            data: (props.config !== undefined) && (props.config.data !== undefined) ? props.config.data : state.data,
-            options: (this.props.config !== undefined) && (this.props.config.options !== undefined) ? this.props.config.options : this.state.options
+            options: (props.config !== undefined) && (props.config.options !== undefined) ? props.config.options : state.options
         }
 
-        this.setState({
+        setState({
-            id: this.props.id !== undefined ? this.props.id : this.state.id,
+            id: props.id !== undefined ? props.id : state.id,
             chart: new Chart(ctx, config)
         })
 
+    }, [props])
+
+    if (state.chart !== null) {
+
+        if((props.config !== undefined) && (props.config.data !== undefined)){
+            state.chart.data.labels = props.config.data.labels
+            state.chart.data.datasets = props.config.data.datasets
         }
 
-    render(){
+        if((props.config !== undefined) && (props.config.options !== undefined)){
-
+            state.chart.options = props.config.options
-        if (this.state.chart !== null) {
-
-            if((this.props.config !== undefined) && (this.props.config.data !== undefined)){
-                this.state.chart.data.labels = this.props.config.data.labels
-                this.state.chart.data.datasets = this.props.config.data.datasets
         }
   
-            if((this.props.config !== undefined) && (this.props.config.options !== undefined)){
+        state.chart.update();
-                this.state.chart.options = this.props.config.options
-            }
 
-            this.state.chart.update();
+        return <canvas id={`${state.id}`} />
-    
-            return <canvas id={`${this.state.id}`} />
 
 
     } else { 
-            return <canvas id={`${this.state.id}`} />
+        return <canvas id={`${state.id}`} />
     }
 
-    }
 }
 
 export default BarComponent

src/Line.jsx

@@ -1,14 +1,10 @@
-import React, { Component } from 'react';
+import React, { useState, useEffect } from 'react';
 
 import ID from './Service/ID.js';
 
-class LineComponent extends Component {
+let LineComponent = props => {
 
-    constructor(props) {
+    let id = props.id ? props.id : ID(),
-
-        super(props)
-
-        let id = this.props.id ? this.props.id : ID(),
         data = {
             labels: ['Valor 1', 'Valor 2', 'Valor 3', 'Valor 4', 'Valor 5'],
             datasets: [{
@@ -43,56 +39,51 @@ class LineComponent extends Component {
 
     }
 
-        this.state = {
+    let [state, setState] = useState({
         id,
         chart: null,
         data,
         options
-        }
+    })
 
-    }
+    useEffect( ()=> {
 
-    componentDidMount(){
+        var ctx = document.getElementById(`${state.id}`).getContext('2d');
-
-        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,
+            data: (props.config !== undefined) && (props.config.data !== undefined) ? props.config.data : state.data,
-            options: (this.props.config !== undefined) && (this.props.config.options !== undefined) ? this.props.config.options : this.state.options
+            options: (props.config !== undefined) && (props.config.options !== undefined) ? props.config.options : state.options
         }
 
-        this.setState({
+        setState({
-            id: this.props.id !== undefined ? this.props.id : this.state.id,
+            id: props.id !== undefined ? props.id : state.id,
             chart: new Chart(ctx, config)
         })
 
+    }, [props])
+
+    if (state.chart !== null) {
+
+        if((props.config !== undefined) && (props.config.data !== undefined)){
+            state.chart.data.labels = props.config.data.labels
+            state.chart.data.datasets = props.config.data.datasets
         }
 
-    render(){
+        if((props.config !== undefined) && (props.config.options !== undefined)){
-      
+            state.chart.options = props.config.options
-        if (this.state.chart !== null) {
-
-            if((this.props.config !== undefined) && (this.props.config.data !== undefined)){
-                this.state.chart.data.labels = this.props.config.data.labels
-                this.state.chart.data.datasets = this.props.config.data.datasets
         }
   
-            if((this.props.config !== undefined) && (this.props.config.options !== undefined)){
+        state.chart.update();
-                this.state.chart.options = this.props.config.options
-            }
 
-            this.state.chart.update();
+        return <canvas id={`${state.id}`} />
-    
-            return <canvas id={`${this.state.id}`} />
 
 
     } else { 
-            return <canvas id={`${this.state.id}`} />
+        return <canvas id={`${state.id}`} />
     }
 
 
-    }
 }
 
 export default LineComponent

src/RadialGauge.jsx

@@ -1,4 +1,4 @@
-import React, { Component } from 'react';
+import React, { useState, useEffect } from 'react';
 
 import Chart from 'chart.js';
 
@@ -6,121 +6,114 @@ import 'chartjs-chart-radial-gauge/build/Chart.RadialGauge.umd.min.js';
 
 import ID from './Service/ID.js'
 
-class RadialGauge extends Component {
+let RadialGauge = props => {
-
-  constructor(props) { 
-    super(props)
 
   let porcentaje = Math.round(Math.random() * 100),
       porcentajeTexto = `${porcentaje} %`
         
-    let id = this.props.id ? this.props.id : ID()
+  let id = props.id ? props.id : ID()
 
-    this.state = {
+  let [state, setState] = useState({
     id,
     chart: null,
     porcentaje,
     porcentajeTexto
-    }
+  })
 
-  }
+  useEffect( () => {
 
-  componentDidMount() {
+    var ctx = document.getElementById(`${state.id}`).getContext('2d');
-
-    var ctx = document.getElementById(`${this.state.id}`).getContext('2d');
 
     var config = {
       type: 'radialGauge',
       data: {
-          labels: this.props.config ? (this.props.config.data ? (this.props.config.data.labels || ["Porcentaje"]) : ["Porcentaje"]) : ["Porcentaje"],
+        labels: props.config ? (props.config.data ? (props.config.data.labels || ["Porcentaje"]) : ["Porcentaje"]) : ["Porcentaje"],
         datasets: [
           {
-            data: this.props.config ? ((this.props.config.data) ? (this.props.config.data.datasets !== undefined ? [this.props.config.data.datasets.data] : [this.state.porcentaje]) : [this.state.porcentaje]) : [this.state.porcentaje],
+          data: props.config ? ((props.config.data) ? (props.config.data.datasets !== undefined ? [props.config.data.datasets.data] : [state.porcentaje]) : [state.porcentaje]) : [state.porcentaje],
-            backgroundColor: this.props.config ? ( this.props.config.data ? (((this.props.config.data.datasets !== undefined) && (this.props.config.data.datasets.backgroundColor)) ? this.props.config.data.datasets.backgroundColor : '#2A969E') : '#2A969E') : '#2A969E',
+          backgroundColor: props.config ? ( props.config.data ? (((props.config.data.datasets !== undefined) && (props.config.data.datasets.backgroundColor)) ? props.config.data.datasets.backgroundColor : '#2A969E') : '#2A969E') : '#2A969E',
-            borderWidth: this.props.config ? ( this.props.config.data ? (((this.props.config.data.datasets !== undefined) && (this.props.config.data.datasets.borderWidth)) ? this.props.config.data.datasets.borderWidth : 0) : 0) : 0,
+          borderWidth: props.config ? ( props.config.data ? (((props.config.data.datasets !== undefined) && (props.config.data.datasets.borderWidth)) ? props.config.data.datasets.borderWidth : 0) : 0) : 0,
-            label: this.props.config ? ( this.props.config.data ? (((this.props.config.data.datasets !== undefined) && (this.props.config.data.datasets.label)) ? this.props.config.data.datasets.label : "Porcentaje") : "Porcentaje") : "Porcentaje"
+          label: props.config ? ( props.config.data ? (((props.config.data.datasets !== undefined) && (props.config.data.datasets.label)) ? props.config.data.datasets.label : "Porcentaje") : "Porcentaje") : "Porcentaje"
           }
         ]
       },
       options: {
         title: {
-            display: this.props.config ? ((this.props.config.options) ? (this.props.config.options.title !== undefined ? this.props.config.options.title.display : false) : false) : false,
+          display: props.config ? ((props.config.options) ? (props.config.options.title !== undefined ? props.config.options.title.display : false) : false) : false,
-            text: this.props.config ? ((this.props.config.options) ? (((this.props.config.options.title) && (this.props.config.options.title.text)) !== undefined ? this.props.config.options.title.text : "Porcentaje") : "Porcentaje") : "Porcentaje"
+          text: props.config ? ((props.config.options) ? (((props.config.options.title) && (props.config.options.title.text)) !== undefined ? props.config.options.title.text : "Porcentaje") : "Porcentaje") : "Porcentaje"
         },
-          responsive: this.props.config ? ((this.props.config.options) ? (this.props.config.options.responsive || true) : true) : true,
+        responsive: props.config ? ((props.config.options) ? (props.config.options.responsive || true) : true) : true,
-          legend: this.props.config ? ((this.props.config.options) ? (this.props.config.options.leyend || {}) : {}) : {},
+        legend: props.config ? ((props.config.options) ? (props.config.options.leyend || {}) : {}) : {},
         animation: {
           // Boolean - Whether we animate the rotation of the radialGauge
-            animateRotate: this.props.config ? ((this.props.config.options) ? (this.props.config.options.animation !== undefined ? this.props.config.options.animation.animateRotate : true) : true ) : true,
+          animateRotate: props.config ? ((props.config.options) ? (props.config.options.animation !== undefined ? props.config.options.animation.animateRotate : true) : true ) : true,
           // Boolean - Whether we animate scaling the radialGauge from the centre
-            animateScale: this.props.config ? ((this.props.config.options) ? (this.props.config.options.animation !== undefined ? this.props.config.options.animation.animateScale : true) : true) : true
+          animateScale: props.config ? ((props.config.options) ? (props.config.options.animation !== undefined ? props.config.options.animation.animateScale : true) : true) : true
         },
       
         // The percentage of the chart that is the center area
-          centerPercentage: this.props.config ? ((this.props.config.options) ? (this.props.config.options.centerPercentage || 80) : 80 ) : 80,
+        centerPercentage: props.config ? ((props.config.options) ? (props.config.options.centerPercentage || 80) : 80 ) : 80,
       
         // The rotation for the start of the metric's arc
-          rotation: this.props.config ? ((this.props.config.options) ? (this.props.config.options.rotation || -Math.PI / 2) : -Math.PI / 2) : -Math.PI / 2,
+        rotation: props.config ? ((props.config.options) ? (props.config.options.rotation || -Math.PI / 2) : -Math.PI / 2) : -Math.PI / 2,
       
         // the color of the radial gauge's track
-          trackColor: this.props.config ? ((this.props.config.options) ? (this.props.config.options.trackColor || 'rgb(204, 221, 238)') : 'rgb(204, 221, 238)' ) : 'rgb(204, 221, 238)',
+        trackColor: props.config ? ((props.config.options) ? (props.config.options.trackColor || 'rgb(204, 221, 238)') : 'rgb(204, 221, 238)' ) : 'rgb(204, 221, 238)',
       
         // the domain for the data, default is [0, 100]
-          domain: this.props.config ? ((this.props.config.options) ? (this.props.config.options.domain || [0, 100]) : [0, 100]) : [0, 100],
+        domain: props.config ? ((props.config.options) ? (props.config.options.domain || [0, 100]) : [0, 100]) : [0, 100],
         
         // whether arc for the gauge should have rounded corners
-          roundedCorners: this.props.config ? ((this.props.config.options) ? (this.props.config.options.roundedCorners || true) : true) : true,
+        roundedCorners: props.config ? ((props.config.options) ? (props.config.options.roundedCorners || true) : true) : true,
       
         // center value options
         centerArea: {
           // whether to display the center text value
-            displayText: this.props.config ? ((this.props.config.options) ? (((this.props.config.options.centerArea !== undefined) && (this.props.config.options.centerArea.displayText)) ? this.props.config.options.centerArea.displayText : true) : true) : true,
+          displayText: props.config ? ((props.config.options) ? (((props.config.options.centerArea !== undefined) && (props.config.options.centerArea.displayText)) ? props.config.options.centerArea.displayText : true) : true) : true,
           // font for the center text
-            fontFamily: this.props.config ? ((this.props.config.options) ? (this.props.config.options.centerArea !== undefined ? this.props.config.options.centerArea.fontFamily : null) : null) : null,
+          fontFamily: props.config ? ((props.config.options) ? (props.config.options.centerArea !== undefined ? props.config.options.centerArea.fontFamily : null) : null) : null,
           // color of the center text
-            fontColor: this.props.config ? ((this.props.config.options) ? (this.props.config.options.centerArea !== undefined ? this.props.config.options.centerArea.fontColor : null) : null) : null,
+          fontColor: props.config ? ((props.config.options) ? (props.config.options.centerArea !== undefined ? props.config.options.centerArea.fontColor : null) : null) : null,
           // the size of the center text
-            fontSize: this.props.config ? ((this.props.config.options) ? (this.props.config.options.centerArea !== undefined ? this.props.config.options.centerArea.fontSize : null) : null) : null,
+          fontSize: props.config ? ((props.config.options) ? (props.config.options.centerArea !== undefined ? props.config.options.centerArea.fontSize : null) : null) : null,
           // padding around the center area
-            padding: this.props.config ? ((this.props.config.options) ? (this.props.config.options.centerArea !== undefined ? this.props.config.options.centerArea.padding : null) : null) : null,
+          padding: props.config ? ((props.config.options) ? (props.config.options.centerArea !== undefined ? props.config.options.centerArea.padding : null) : null) : null,
           // an image to use for the center background
-            backgroundImage: this.props.config ? ((this.props.config.options) ? (this.props.config.options.centerArea !== undefined ? this.props.config.options.centerArea.backgroundImage : null) : null) : null,
+          backgroundImage: props.config ? ((props.config.options) ? (props.config.options.centerArea !== undefined ? props.config.options.centerArea.backgroundImage : null) : null) : null,
           // a color to use for the center background
-            backgroundColor: this.props.config ? ((this.props.config.options) ? (this.props.config.options.centerArea !== undefined ? this.props.config.options.centerArea.backgroundColor : null) : null) : null,
+          backgroundColor: props.config ? ((props.config.options) ? (props.config.options.centerArea !== undefined ? props.config.options.centerArea.backgroundColor : null) : null) : null,
           // the text to display in the center
           // this could be a string or a callback that returns a string
           // if a callback is provided it will be called with (value, options)
-            text: this.props.config ? ((this.props.config.options) ? (this.props.config.options.centerArea !== undefined ? this.props.config.options.centerArea.text : null) : null) : null,
+          text: props.config ? ((props.config.options) ? (props.config.options.centerArea !== undefined ? props.config.options.centerArea.text : null) : null) : null,
         }
       }
     };
 
-    this.setState({
+    setState({
       chart: new Chart(ctx, config)
     })
 
-  }
+  }, [props])
 
-  render() {
+  if (state.chart !== null) {
 
-    if (this.state.chart !== null) {
+    props.config ? ((props.config.data) ? (props.config.data.datasets !== undefined ? (state.chart.data.datasets[0].data[0] = props.config.data.datasets.data) : [state.porcentaje]) : [state.porcentaje]) : [state.porcentaje]
 
-      this.props.config ? ((this.props.config.data) ? (this.props.config.data.datasets !== undefined ? (this.state.chart.data.datasets[0].data[0] = this.props.config.data.datasets.data) : [this.state.porcentaje]) : [this.state.porcentaje]) : [this.state.porcentaje]
+    //state.chart.data.datasets[0].data[0] = props.config.data.datasets.data)
 
-      //this.state.chart.data.datasets[0].data[0] = this.props.config.data.datasets.data)
+    props.config ? ((props.config.options) ? (props.config.options.centerArea !== undefined ? (state.chart.options.centerArea.text = props.config.options.centerArea.text) : null) : null) : null
 
-      this.props.config ? ((this.props.config.options) ? (this.props.config.options.centerArea !== undefined ? (this.state.chart.options.centerArea.text = this.props.config.options.centerArea.text) : null) : null) : null
+    //state.chart.options.centerArea.text = props.config.options.centerArea.text
 
-      //this.state.chart.options.centerArea.text = this.props.config.options.centerArea.text
+    state.chart.update();
 
-      this.state.chart.update();
+    return <canvas id={`${state.id}`} />
-
-      return <canvas id={`${this.state.id}`} />
 
   } else {
-      return <canvas id={`${this.state.id}`} />
+    return <canvas id={`${state.id}`} />
-    }
   }
+
 }
 
 export default RadialGauge