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": [
-    "standard",
-    "standard-react"
-  ],
+  "extends": "react-app",
   "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"
+    ]
   }
 }

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 (
@@ -23,7 +24,77 @@ export default class App extends Component {
           <Line />
         </div>
 
+        <div style={{maxWidth: '600px', marginTop: '25px', margin: 'auto'}}>
+          <h3 style={{textAlign: 'center'}}>Multi Axis Bar Line Component:</h3>
+          <Bar config={{
+            data: {
+              datasets: [{
+                  label: 'Bar Dataset',
+                  data: [10, 20, 30, 40],
+                  yAxisID: 'A',
+                  backgroundColor: 'rgba(75, 192, 192, 0.2)',
+                  borderColor: 'rgba(75, 192, 192, 1)'
+              },
+              {
+                label: 'Bar Dataset',
+                data: [10, 20, 30, 40],
+                yAxisID: 'A',
+                backgroundColor: 'rgba(75, 192, 192, 0.2)',
+                borderColor: 'rgba(75, 192, 192, 1)'
+              },
+              {
+                label: 'Bar Dataset',
+                data: [10, 20, 30, 40],
+                yAxisID: 'A',
+                backgroundColor: 'rgba(75, 192, 192, 0.2)',
+                borderColor: 'rgba(75, 192, 192, 1)'
+              },
+              {
+                // Changes this dataset to become a line
+                type: 'line',
+                yAxisID: 'B',
+                label: 'Line Dataset',
+                data: [5, 8, 10, 30],
+                backgroundColor: 'transparent',
+                borderColor: 'rgba(75, 192, 192, 1)'
+              },
+              {
+                // Changes this dataset to become a line
+                type: 'line',
+                yAxisID: 'B',
+                label: 'Line Dataset',
+                data: [15, 20, 25, 30],
+                backgroundColor: 'transparent',
+                borderColor: 'rgba(75, 192, 192, 1)'
+              }],
+              labels: ['January', 'February', 'March', 'April'],
+          },
+          options: {
+            scales: {
+              yAxes: [{
+                id: 'A',
+                type: 'linear',
+                position: 'left',
+                /*ticks: {
+                  max: 1,
+                  min: 0
+                }*/
+              }, {
+                id: 'B',
+                type: 'linear',
+                position: 'right',
+                /*ticks: {
+                  max: 1,
+                  min: 0
+                }*/
+              }]
+            }
+          }
+          }}/>
+        </div>
+
       </div>
     )
   }
+  
 }

package.json

@@ -1,6 +1,6 @@
 {
   "name": "chartjs-2-react",
-  "version": "1.1.0",
+  "version": "1.1.5",
   "description": "Libreria de chart.js para React.js",
   "author": "aleleba",
   "license": "MIT",
@@ -46,13 +46,13 @@
     "gh-pages": "^1.2.0",
     "react": "^16.4.1",
     "react-dom": "^16.4.1",
-    "react-scripts": "^1.1.4",
+    "react-scripts": "^4.0.1",
     "rollup": "^0.64.1",
     "rollup-plugin-babel": "^3.0.7",
     "rollup-plugin-commonjs": "^9.1.3",
     "rollup-plugin-node-resolve": "^3.3.0",
     "rollup-plugin-peer-deps-external": "^2.2.0",
-    "rollup-plugin-postcss": "^1.6.2",
+    "rollup-plugin-postcss": "^4.0.0",
     "rollup-plugin-url": "^1.4.0"
   },
   "files": [
@@ -61,6 +61,6 @@
   "dependencies": {
     "chart.js": "^2.9.3",
     "chartjs-chart-radial-gauge": "^1.0.3",
-    "react-chartjs-2": "^2.9.0"
+    "request": "^2.88.2"
   }
 }

src/Bar.jsx

@@ -1,16 +1,10 @@
-import React, { Component } from 'react';
-
-import { Bar } from 'react-chartjs-2';
+import React, { useState, useEffect } from 'react';
 
 import ID from './Service/ID.js';
 
-class BarComponent extends Component {
+let BarComponent = props => {
 
-    constructor(props) {
-
-        super(props)
-
-        let id = this.props.id ? this.props.id : ID(),
+    let id = props.id ? props.id : ID(),
         data = {
             labels: ['Valor 1', 'Valor 2', 'Valor 3', 'Valor 4', 'Valor 5'],
             datasets: [{
@@ -34,10 +28,6 @@ class BarComponent extends Component {
                 display: true,
                 position: 'bottom'
             }
-            },
-            legend = {
-                display: true,
-                position: 'bottom'
         }
 
     for(let i = 0; i < 5 ; i ++){
@@ -48,38 +38,50 @@ class BarComponent extends Component {
 
     }
 
-        this.state = {
+    let [state, setState] = useState({
         id,
+        chart: null,
         data,
-            width: 100,
-            height: 50,
-            options,
-            legend,
-            redraw: false
-        }
-    
-    }
-
-    componentDidMount(){
-            
-        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
+        options
     })
 
+    useEffect( ()=> {
+
+        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,
+            options: (props.config !== undefined) && (props.config.options !== undefined) ? props.config.options : state.options
         }
 
-    render(){
+        setState({
+            id: props.id !== undefined ? props.id : state.id,
+            chart: new Chart(ctx, config)
+        })
 
-        return(
-            <Bar id={this.state.id} data={this.state.data} options={this.state.options} width={this.state.width} height={this.state.height} legend={this.state.legend} redraw={this.state.redraw} />
-        )
+    }, [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}`} />
+    }
+
 }
 
 export default BarComponent

src/Line.jsx

@@ -1,16 +1,10 @@
-import React, { Component } from 'react';
-
-import { Line } from 'react-chartjs-2';
+import React, { useState, useEffect } from 'react';
 
 import ID from './Service/ID.js';
 
-class LineComponent extends Component {
+let LineComponent = props => {
 
-    constructor(props) {
-
-        super(props)
-
-        let id = this.props.id ? this.props.id : ID(),
+    let id = props.id ? props.id : ID(),
         data = {
             labels: ['Valor 1', 'Valor 2', 'Valor 3', 'Valor 4', 'Valor 5'],
             datasets: [{
@@ -35,10 +29,6 @@ class LineComponent extends Component {
                 display: true,
                 position: 'bottom'
             }
-            },
-            legend = {
-                display: true,
-                position: 'bottom'
         }
 
     for(let i = 0; i < 5 ; i ++){
@@ -49,38 +39,51 @@ class LineComponent extends Component {
 
     }
 
-        this.state = {
+    let [state, setState] = useState({
         id,
+        chart: null,
         data,
-            width: 100,
-            height: 50,
-            options,
-            legend,
-            redraw: false
-        }
-    
-    }
-
-    componentDidMount(){
-            
-        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
+        options
     })
 
+    useEffect( ()=> {
+
+        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,
+            options: (props.config !== undefined) && (props.config.options !== undefined) ? props.config.options : state.options
         }
 
-    render(){
+        setState({
+            id: props.id !== undefined ? props.id : state.id,
+            chart: new Chart(ctx, config)
+        })
 
-        return(
-            <Line id={this.state.id} data={this.state.data} options={this.state.options} width={this.state.width} height={this.state.height} legend={this.state.legend} redraw={this.state.redraw} fill={false} />
-        )
+    }, [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}`} />
+    }
+
+
 }
 
 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 {
-
-  constructor(props) { 
-    super(props)
+let RadialGauge = 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(`${this.state.id}`).getContext('2d');
+    var ctx = document.getElementById(`${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],
-            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"
+          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',
+          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: 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,
-            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"
+          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: 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 || {}) : {}) : {},
+        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: 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={`${this.state.id}`} />
+    return <canvas id={`${state.id}`} />
 
   } else {
-      return <canvas id={`${this.state.id}`} />
-    }
+    return <canvas id={`${state.id}`} />
   }
+
 }
 
 export default RadialGauge