.eslintrc

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

example/.eslintcache

@@ -1 +0,0 @@
-[{"/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": "1.1.5",
+  "version": "0.0.0",
   "license": "MIT",
   "private": true,
   "dependencies": {
@@ -9,24 +9,12 @@
     "prop-types": "^15.6.2",
     "react": "^16.4.1",
     "react-dom": "^16.4.1",
-    "react-scripts": "^4.0.1"
+    "react-scripts": "^1.1.4"
   },
   "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.5",
+  "version": "1.1.4",
   "description": "Libreria de chart.js para React.js",
   "author": "aleleba",
   "license": "MIT",

src/Bar.jsx

@@ -1,87 +1,96 @@
-import React, { useState, useEffect } from 'react';
+import React, { Component } from 'react';
 
 import ID from './Service/ID.js';
 
-let BarComponent = props => {
+class BarComponent extends Component {
 
-    let id = props.id ? props.id : ID(),
+    constructor(props) {
-        data = {
+
-            labels: ['Valor 1', 'Valor 2', 'Valor 3', 'Valor 4', 'Valor 5'],
+        super(props)
-            datasets: [{
+
-                label: 'Valor',
+        let id = this.props.id ? this.props.id : ID(),
-                data: [],
+            data = {
-                backgroundColor: 'rgba(75, 192, 192, 0.2)',
+                labels: ['Valor 1', 'Valor 2', 'Valor 3', 'Valor 4', 'Valor 5'],
-                borderColor: 'rgba(75, 192, 192, 1)',
+                datasets: [{
-                borderWidth: 1
+                    label: 'Valor',
-            }]
+                    data: [],
-        },
+                    backgroundColor: 'rgba(75, 192, 192, 0.2)',
-        options = {
+                    borderColor: 'rgba(75, 192, 192, 1)',
-            responsive: true,
+                    borderWidth: 1
-            scales: {
-                yAxes: [{
-                    ticks: {
-                        beginAtZero: true
-                    }
                 }]
             },
-            legend: {
+            options = {
-                display: true,
+                responsive: true,
-                position: 'bottom'
+                scales: {
+                    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 ++){
+        this.state = {
-
+            id,
-        let dato = Math.round(Math.random() * 25)
+            chart: null,
-
+            data,
-        data.datasets[0].data.push(dato)
+            options
+        }
     
     }
 
-    let [state, setState] = useState({
+    componentDidMount(){
-        id,
-        chart: null,
-        data,
-        options
-    })
 
-    useEffect( ()=> {
+        var ctx = document.getElementById(`${this.state.id}`).getContext('2d');
-
-        var ctx = document.getElementById(`${state.id}`).getContext('2d');
 
         let config = {
             type: 'bar',
-            data: (props.config !== undefined) && (props.config.data !== undefined) ? props.config.data : state.data,
+            data: (this.props.config !== undefined) && (this.props.config.data !== undefined) ? this.props.config.data : this.state.data,
-            options: (props.config !== undefined) && (props.config.options !== undefined) ? props.config.options : state.options
+            options: (this.props.config !== undefined) && (this.props.config.options !== undefined) ? this.props.config.options : this.state.options
         }
 
-        setState({
+        this.setState({
-            id: props.id !== undefined ? props.id : state.id,
+            id: this.props.id !== undefined ? this.props.id : this.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
-        }
-
-        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}`} />
     }
 
+    render(){
+
+        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)){
+                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}`} />
+        }
+
+    }
 }
 
 export default BarComponent

src/Line.jsx

@@ -1,89 +1,98 @@
-import React, { useState, useEffect } from 'react';
+import React, { Component } from 'react';
 
 import ID from './Service/ID.js';
 
-let LineComponent = props => {
+class LineComponent extends Component {
 
-    let id = props.id ? props.id : ID(),
+    constructor(props) {
-        data = {
+
-            labels: ['Valor 1', 'Valor 2', 'Valor 3', 'Valor 4', 'Valor 5'],
+        super(props)
-            datasets: [{
+
-                label: 'Valor',
+        let id = this.props.id ? this.props.id : ID(),
-                fill: false,
+            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
+                    fill: false,
-            }]
+                    data: [],
-        },
+                    backgroundColor: 'rgba(75, 192, 192, 0.2)',
-        options = {
+                    borderColor: 'rgba(75, 192, 192, 1)',
-            responsive: true,
+                    borderWidth: 1
-            scales: {
-                yAxes: [{
-                    ticks: {
-                        beginAtZero: true
-                    }
                 }]
             },
-            legend: {
+            options = {
-                display: true,
+                responsive: true,
-                position: 'bottom'
+                scales: {
+                    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 ++){
+        this.state = {
-
+            id,
-        let dato = Math.round(Math.random() * 25)
+            chart: null,
-
+            data,
-        data.datasets[0].data.push(dato)
+            options
+        }
     
     }
 
-    let [state, setState] = useState({
+    componentDidMount(){
-        id,
-        chart: null,
-        data,
-        options
-    })
 
-    useEffect( ()=> {
+        var ctx = document.getElementById(`${this.state.id}`).getContext('2d');
-
-        var ctx = document.getElementById(`${state.id}`).getContext('2d');
 
         let config = {
             type: 'line',
-            data: (props.config !== undefined) && (props.config.data !== undefined) ? props.config.data : state.data,
+            data: (this.props.config !== undefined) && (this.props.config.data !== undefined) ? this.props.config.data : this.state.data,
-            options: (props.config !== undefined) && (props.config.options !== undefined) ? props.config.options : state.options
+            options: (this.props.config !== undefined) && (this.props.config.options !== undefined) ? this.props.config.options : this.state.options
         }
 
-        setState({
+        this.setState({
-            id: props.id !== undefined ? props.id : state.id,
+            id: this.props.id !== undefined ? this.props.id : this.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
-        }
-
-        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}`} />
     }
 
+    render(){
       
+        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)){
+                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}`} />
+        }
+
+        
+    }
 }
 
 export default LineComponent

src/RadialGauge.jsx

@@ -1,4 +1,4 @@
-import React, { useState, useEffect } from 'react';
+import React, { Component } from 'react';
 
 import Chart from 'chart.js';
 
@@ -6,114 +6,121 @@ import 'chartjs-chart-radial-gauge/build/Chart.RadialGauge.umd.min.js';
 
 import ID from './Service/ID.js'
 
-let RadialGauge = props => {
+class RadialGauge extends Component {
 
-  let porcentaje = Math.round(Math.random() * 100),
+  constructor(props) { 
-      porcentajeTexto = `${porcentaje} %`
+    super(props)
 
-  let id = props.id ? props.id : ID()
+    let porcentaje = Math.round(Math.random() * 100),
+        porcentajeTexto = `${porcentaje} %`
         
-  let [state, setState] = useState({
+    let id = this.props.id ? this.props.id : ID()
-    id,
-    chart: null,
-    porcentaje,
-    porcentajeTexto
-  })
 
-  useEffect( () => {
+    this.state = {
+      id,
+      chart: null,
+      porcentaje,
+      porcentajeTexto
+    }
 
-    var ctx = document.getElementById(`${state.id}`).getContext('2d');
+  }
 
-    var config = {
+  componentDidMount() {
-      type: 'radialGauge',
+
-      data: {
+    var ctx = document.getElementById(`${this.state.id}`).getContext('2d');
-        labels: props.config ? (props.config.data ? (props.config.data.labels || ["Porcentaje"]) : ["Porcentaje"]) : ["Porcentaje"],
+
-        datasets: [
+      var config = {
-          {
+        type: 'radialGauge',
-          data: props.config ? ((props.config.data) ? (props.config.data.datasets !== undefined ? [props.config.data.datasets.data] : [state.porcentaje]) : [state.porcentaje]) : [state.porcentaje],
+        data: {
-          backgroundColor: props.config ? ( props.config.data ? (((props.config.data.datasets !== undefined) && (props.config.data.datasets.backgroundColor)) ? props.config.data.datasets.backgroundColor : '#2A969E') : '#2A969E') : '#2A969E',
+          labels: this.props.config ? (this.props.config.data ? (this.props.config.data.labels || ["Porcentaje"]) : ["Porcentaje"]) : ["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,
+          datasets: [
-          label: props.config ? ( props.config.data ? (((props.config.data.datasets !== undefined) && (props.config.data.datasets.label)) ? props.config.data.datasets.label : "Porcentaje") : "Porcentaje") : "Porcentaje"
+           {
+            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],
+            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',
+            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,
         }
-      }
+      };
-    };
 
-    setState({
+    this.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