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,96 +1,87 @@
-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(),
-
+        data = {
-        super(props)
+            labels: ['Valor 1', 'Valor 2', 'Valor 3', 'Valor 4', 'Valor 5'],
-
+            datasets: [{
-        let id = this.props.id ? this.props.id : ID(),
+                label: 'Valor',
-            data = {
+                data: [],
-                labels: ['Valor 1', 'Valor 2', 'Valor 3', 'Valor 4', 'Valor 5'],
+                backgroundColor: 'rgba(75, 192, 192, 0.2)',
-                datasets: [{
+                borderColor: 'rgba(75, 192, 192, 1)',
-                    label: 'Valor',
+                borderWidth: 1
-                    data: [],
+            }]
-                    backgroundColor: 'rgba(75, 192, 192, 0.2)',
+        },
-                    borderColor: 'rgba(75, 192, 192, 1)',
+        options = {
-                    borderWidth: 1
+            responsive: true,
+            scales: {
+                yAxes: [{
+                    ticks: {
+                        beginAtZero: true
+                    }
                 }]
             },
-            options = {
+            legend: {
-                responsive: true,
+                display: true,
-                scales: {
+                position: 'bottom'
-                    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)
 
-        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(){
+    let [state, setState] = useState({
+        id,
+        chart: null,
+        data,
+        options
+    })
 
-        var ctx = document.getElementById(`${this.state.id}`).getContext('2d');
+    useEffect( ()=> {
+
+        var ctx = document.getElementById(`${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])
 
-    render(){
+    if (state.chart !== null) {
 
-        if (this.state.chart !== null) {
+        if((props.config !== undefined) && (props.config.data !== undefined)){
-
+            state.chart.data.labels = props.config.data.labels
-            if((this.props.config !== undefined) && (this.props.config.data !== undefined)){
+            state.chart.data.datasets = props.config.data.datasets
-                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)){
-                this.state.chart.options = this.props.config.options
-            }
-      
-            this.state.chart.update();
-    
-            return <canvas id={`${this.state.id}`} />
-
-    
-        } else { 
-            return <canvas id={`${this.state.id}`} />
         }
 
+        if((props.config !== undefined) && (props.config.options !== undefined)){
+            state.chart.options = props.config.options
+        }
+  
+        state.chart.update();
+
+        return <canvas id={`${state.id}`} />
+
+
+    } else { 
+        return <canvas id={`${state.id}`} />
     }
+
 }
 
 export default BarComponent

src/Line.jsx

@@ -1,98 +1,89 @@
-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(),
-
+        data = {
-        super(props)
+            labels: ['Valor 1', 'Valor 2', 'Valor 3', 'Valor 4', 'Valor 5'],
-
+            datasets: [{
-        let id = this.props.id ? this.props.id : ID(),
+                label: 'Valor',
-            data = {
+                fill: false,
-                labels: ['Valor 1', 'Valor 2', 'Valor 3', 'Valor 4', 'Valor 5'],
+                data: [],
-                datasets: [{
+                backgroundColor: 'rgba(75, 192, 192, 0.2)',
-                    label: 'Valor',
+                borderColor: 'rgba(75, 192, 192, 1)',
-                    fill: false,
+                borderWidth: 1
-                    data: [],
+            }]
-                    backgroundColor: 'rgba(75, 192, 192, 0.2)',
+        },
-                    borderColor: 'rgba(75, 192, 192, 1)',
+        options = {
-                    borderWidth: 1
+            responsive: true,
+            scales: {
+                yAxes: [{
+                    ticks: {
+                        beginAtZero: true
+                    }
                 }]
             },
-            options = {
+            legend: {
-                responsive: true,
+                display: true,
-                scales: {
+                position: 'bottom'
-                    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)
 
-        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(){
+    let [state, setState] = useState({
+        id,
+        chart: null,
+        data,
+        options
+    })
 
-        var ctx = document.getElementById(`${this.state.id}`).getContext('2d');
+    useEffect( ()=> {
+
+        var ctx = document.getElementById(`${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])
 
-    render(){
+    if (state.chart !== null) {
-      
-        if (this.state.chart !== null) {
 
-            if((this.props.config !== undefined) && (this.props.config.data !== undefined)){
+        if((props.config !== undefined) && (props.config.data !== undefined)){
-                this.state.chart.data.labels = this.props.config.data.labels
+            state.chart.data.labels = props.config.data.labels
-                this.state.chart.data.datasets = this.props.config.data.datasets
+            state.chart.data.datasets = props.config.data.datasets
-            }
-
-            if((this.props.config !== undefined) && (this.props.config.options !== undefined)){
-                this.state.chart.options = this.props.config.options
-            }
-      
-            this.state.chart.update();
-    
-            return <canvas id={`${this.state.id}`} />
-
-    
-        } else { 
-            return <canvas id={`${this.state.id}`} />
         }
 
-        
+        if((props.config !== undefined) && (props.config.options !== undefined)){
+            state.chart.options = props.config.options
+        }
+  
+        state.chart.update();
+
+        return <canvas id={`${state.id}`} />
+
+
+    } else { 
+        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) { 
+  let porcentaje = Math.round(Math.random() * 100),
-    super(props)
+      porcentajeTexto = `${porcentaje} %`
-
-    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,
+    id,
-      chart: null,
+    chart: null,
-      porcentaje,
+    porcentaje,
-      porcentajeTexto
+    porcentajeTexto
-    }
+  })
 
-  }
+  useEffect( () => {
 
-  componentDidMount() {
+    var ctx = document.getElementById(`${state.id}`).getContext('2d');
 
-    var ctx = document.getElementById(`${this.state.id}`).getContext('2d');
+    var config = {
-
+      type: 'radialGauge',
-      var config = {
+      data: {
-        type: 'radialGauge',
+        labels: props.config ? (props.config.data ? (props.config.data.labels || ["Porcentaje"]) : ["Porcentaje"]) : ["Porcentaje"],
-        data: {
+        datasets: [
-          labels: this.props.config ? (this.props.config.data ? (this.props.config.data.labels || ["Porcentaje"]) : ["Porcentaje"]) : ["Porcentaje"],
+          {
-          datasets: [
+          data: props.config ? ((props.config.data) ? (props.config.data.datasets !== undefined ? [props.config.data.datasets.data] : [state.porcentaje]) : [state.porcentaje]) : [state.porcentaje],
-           {
+          backgroundColor: props.config ? ( props.config.data ? (((props.config.data.datasets !== undefined) && (props.config.data.datasets.backgroundColor)) ? props.config.data.datasets.backgroundColor : '#2A969E') : '#2A969E') : '#2A969E',
-            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],
+          borderWidth: props.config ? ( props.config.data ? (((props.config.data.datasets !== undefined) && (props.config.data.datasets.borderWidth)) ? props.config.data.datasets.borderWidth : 0) : 0) : 0,
-            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',
+          label: props.config ? ( props.config.data ? (((props.config.data.datasets !== undefined) && (props.config.data.datasets.label)) ? props.config.data.datasets.label : "Porcentaje") : "Porcentaje") : "Porcentaje"
-            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,
-            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"
-           }
-          ]
-        },
-        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,
-            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"
-          },
-          responsive: this.props.config ? ((this.props.config.options) ? (this.props.config.options.responsive || true) : true) : true,
-          legend: this.props.config ? ((this.props.config.options) ? (this.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,
-            // 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
-          },
-        
-          // 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,
-        
-          // 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,
-        
-          // 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)',
-        
-          // 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],
-          
-          // 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,
-        
-          // 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,
-            // 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,
-            // 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,
-            // 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,
-            // 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,
-            // 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,
-            // 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,
-            // 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,
           }
+        ]
+      },
+      options: {
+        title: {
+          display: props.config ? ((props.config.options) ? (props.config.options.title !== undefined ? props.config.options.title.display : false) : false) : false,
+          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: props.config ? ((props.config.options) ? (props.config.options.responsive || true) : true) : true,
+        legend: props.config ? ((props.config.options) ? (props.config.options.leyend || {}) : {}) : {},
+        animation: {
+          // Boolean - Whether we animate the rotation of the radialGauge
+          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: 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: props.config ? ((props.config.options) ? (props.config.options.centerPercentage || 80) : 80 ) : 80,
+      
+        // The rotation for the start of the metric's arc
+        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: 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: 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: props.config ? ((props.config.options) ? (props.config.options.roundedCorners || true) : true) : true,
+      
+        // center value options
+        centerArea: {
+          // whether to display the center text value
+          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: props.config ? ((props.config.options) ? (props.config.options.centerArea !== undefined ? props.config.options.centerArea.fontFamily : null) : null) : null,
+          // color of the center text
+          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: props.config ? ((props.config.options) ? (props.config.options.centerArea !== undefined ? props.config.options.centerArea.fontSize : null) : null) : null,
+          // padding around the center area
+          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: 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: 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: 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])
+
+  if (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]
+
+    //state.chart.data.datasets[0].data[0] = 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
+
+    //state.chart.options.centerArea.text = props.config.options.centerArea.text
+
+    state.chart.update();
+
+    return <canvas id={`${state.id}`} />
+
+  } else {
+    return <canvas id={`${state.id}`} />
   }
 
-  render() {
-
-    if (this.state.chart !== null) {
-
-      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]
-
-      //this.state.chart.data.datasets[0].data[0] = this.props.config.data.datasets.data)
-
-      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
-
-      //this.state.chart.options.centerArea.text = this.props.config.options.centerArea.text
-
-      this.state.chart.update();
-
-      return <canvas id={`${this.state.id}`} />
-
-    } else { 
-      return <canvas id={`${this.state.id}`} />
-    }
-  }
 }
 
 export default RadialGauge