Se agrega el Repositorio de npm que es en Readme.

Se agrega la libreria react-chartjs-2 para agregar las graficas de Barras y de Lineas.
Se sube a version 1.1.0
Se sube a GitHub 1.1.0

README.md

@@ -2,7 +2,7 @@
 
 > Libreria de chart.js para React.js
 
-[![NPM](https://img.shields.io/npm/v/chart-2-react.svg)](https://www.npmjs.com/package/chart-2-react) [![JavaScript Style Guide](https://img.shields.io/badge/code_style-standard-brightgreen.svg)](https://standardjs.com)
+[![NPM](https://img.shields.io/npm/v/chart-2-react.svg)](https://www.npmjs.com/package/chartjs-2-react) [![JavaScript Style Guide](https://img.shields.io/badge/code_style-standard-brightgreen.svg)](https://standardjs.com)
 
 ## Install
 

example/src/App.js

@@ -1,17 +1,28 @@
-import React, { Component } from 'react'
+import React, { Component } from 'react';
 
-import { RadialGauge } from 'chartjs-2-react'
+import { RadialGauge, Bar, Line } from 'chartjs-2-react';
 
 export default class App extends Component {
   render () {
-    return (
-      <div>
 
-        <div style={{maxWidth: '600px', marginTop: '25px'}}>
+    return (
+      <div style={{paddingBottom: '100px'}}>
+
+        <div style={{maxWidth: '600px', marginTop: '25px', margin: 'auto'}}>
           <h3 style={{textAlign: 'center'}}>RadialGauge Component:</h3>
           <RadialGauge />
         </div>
 
+        <div style={{maxWidth: '600px', marginTop: '25px', margin: 'auto'}}>
+          <h3 style={{textAlign: 'center'}}>Bar Component:</h3>
+          <Bar />
+        </div>
+
+        <div style={{maxWidth: '600px', marginTop: '25px', margin: 'auto'}}>
+          <h3 style={{textAlign: 'center'}}>Line Component:</h3>
+          <Line />
+        </div>
+
       </div>
     )
   }

package-lock.json

@@ -1,6 +1,6 @@
 {
   "name": "chartjs-2-react",
-  "version": "1.0.10",
+  "version": "1.0.13",
   "lockfileVersion": 1,
   "requires": true,
   "dependencies": {
@@ -8956,8 +8956,7 @@
     "js-tokens": {
       "version": "4.0.0",
       "resolved": "https://registry.npmjs.org/js-tokens/-/js-tokens-4.0.0.tgz",
-      "integrity": "sha512-RdJUflcE3cUzKiMqQgsCu06FPu9UdIJO0beYbPhHN4k6apgJtifcoCtT9bcxOpYBtpD2kCM6Sbzg4CausW/PKQ==",
+      "integrity": "sha512-RdJUflcE3cUzKiMqQgsCu06FPu9UdIJO0beYbPhHN4k6apgJtifcoCtT9bcxOpYBtpD2kCM6Sbzg4CausW/PKQ=="
-      "dev": true
     },
     "js-yaml": {
       "version": "3.13.1",
@@ -9291,8 +9290,7 @@
     "lodash": {
       "version": "4.17.15",
       "resolved": "https://registry.npmjs.org/lodash/-/lodash-4.17.15.tgz",
-      "integrity": "sha512-8xOcRHvCjnocdS5cpwXQXVzmmh5e5+saE2QGoeQmbKmRS6J3VQppPOIt0MnmE+4xlZoumy0GPG0D0MVIQbNA1A==",
+      "integrity": "sha512-8xOcRHvCjnocdS5cpwXQXVzmmh5e5+saE2QGoeQmbKmRS6J3VQppPOIt0MnmE+4xlZoumy0GPG0D0MVIQbNA1A=="
-      "dev": true
     },
     "lodash._reinterpolate": {
       "version": "3.0.0",
@@ -9371,7 +9369,6 @@
       "version": "1.4.0",
       "resolved": "https://registry.npmjs.org/loose-envify/-/loose-envify-1.4.0.tgz",
       "integrity": "sha512-lyuxPGr/Wfhrlem2CL/UcnUc1zcqKAImBDzukY7Y5F/yQiNdko6+fRLevlw1HgMySw7f611UIY408EtxRSoK3Q==",
-      "dev": true,
       "requires": {
         "js-tokens": "^3.0.0 || ^4.0.0"
       }
@@ -10079,8 +10076,7 @@
     "object-assign": {
       "version": "4.1.1",
       "resolved": "https://registry.npmjs.org/object-assign/-/object-assign-4.1.1.tgz",
-      "integrity": "sha1-IQmtx5ZYh8/AXLvUQsrIv7s2CGM=",
+      "integrity": "sha1-IQmtx5ZYh8/AXLvUQsrIv7s2CGM="
-      "dev": true
     },
     "object-copy": {
       "version": "0.1.0",
@@ -12708,7 +12704,6 @@
       "version": "15.7.2",
       "resolved": "https://registry.npmjs.org/prop-types/-/prop-types-15.7.2.tgz",
       "integrity": "sha512-8QQikdH7//R2vurIJSutZ1smHYTcLpRWEOlHnzcWHmBYrOGUysKwSsrC89BCiFj3CbrfJ/nXFdJepOVrY1GCHQ==",
-      "dev": true,
       "requires": {
         "loose-envify": "^1.4.0",
         "object-assign": "^4.1.1",
@@ -12905,6 +12900,15 @@
         "prop-types": "^15.6.2"
       }
     },
+    "react-chartjs-2": {
+      "version": "2.9.0",
+      "resolved": "https://registry.npmjs.org/react-chartjs-2/-/react-chartjs-2-2.9.0.tgz",
+      "integrity": "sha512-IYwqUUnQRAJ9SNA978vxulHJTcUFTJk2LDVfbAyk0TnJFZZG7+6U/2flsE4MCw6WCbBjTTypy8T82Ch7XrPtRw==",
+      "requires": {
+        "lodash": "^4.17.4",
+        "prop-types": "^15.5.8"
+      }
+    },
     "react-dev-utils": {
       "version": "5.0.3",
       "resolved": "https://registry.npmjs.org/react-dev-utils/-/react-dev-utils-5.0.3.tgz",
@@ -13075,8 +13079,7 @@
     "react-is": {
       "version": "16.12.0",
       "resolved": "https://registry.npmjs.org/react-is/-/react-is-16.12.0.tgz",
-      "integrity": "sha512-rPCkf/mWBtKc97aLL9/txD8DZdemK0vkA3JMLShjlJB3Pj3s+lpf1KaBzMfQrAmhMQB0n1cU/SUGgKKBCe837Q==",
+      "integrity": "sha512-rPCkf/mWBtKc97aLL9/txD8DZdemK0vkA3JMLShjlJB3Pj3s+lpf1KaBzMfQrAmhMQB0n1cU/SUGgKKBCe837Q=="
-      "dev": true
     },
     "react-scripts": {
       "version": "1.1.5",

package.json

@@ -1,6 +1,6 @@
 {
   "name": "chartjs-2-react",
-  "version": "1.0.13",
+  "version": "1.1.0",
   "description": "Libreria de chart.js para React.js",
   "author": "aleleba",
   "license": "MIT",
@@ -60,6 +60,7 @@
   ],
   "dependencies": {
     "chart.js": "^2.9.3",
-    "chartjs-chart-radial-gauge": "^1.0.3"
+    "chartjs-chart-radial-gauge": "^1.0.3",
+    "react-chartjs-2": "^2.9.0"
   }
 }

src/Bar.jsx

@@ -0,0 +1,85 @@
+import React, { Component } from 'react';
+
+import { Bar } from 'react-chartjs-2';
+
+import ID from './Service/ID.js';
+
+class BarComponent extends Component {
+
+    constructor(props) {
+
+        super(props)
+
+        let id = this.props.id ? this.props.id : ID(),
+            data = {
+                labels: ['Valor 1', 'Valor 2', 'Valor 3', 'Valor 4', 'Valor 5'],
+                datasets: [{
+                    label: 'Valor',
+                    data: [],
+                    backgroundColor: 'rgba(75, 192, 192, 0.2)',
+                    borderColor: 'rgba(75, 192, 192, 1)',
+                    borderWidth: 1
+                }]
+            },
+            options = {
+                responsive: true,
+                scales: {
+                    yAxes: [{
+                        ticks: {
+                            beginAtZero: true
+                        }
+                    }]
+                },
+                legend: {
+                    display: true,
+                    position: 'bottom'
+                }
+            },
+            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)
+    
+        }
+    
+        this.state = {
+            id,
+            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
+        })
+
+    }
+
+    render(){
+
+        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} />
+        )
+    }
+}
+
+export default BarComponent

src/Line.jsx

@@ -0,0 +1,86 @@
+import React, { Component } from 'react';
+
+import { Line } from 'react-chartjs-2';
+
+import ID from './Service/ID.js';
+
+class LineComponent extends Component {
+
+    constructor(props) {
+
+        super(props)
+
+        let id = this.props.id ? this.props.id : ID(),
+            data = {
+                labels: ['Valor 1', 'Valor 2', 'Valor 3', 'Valor 4', 'Valor 5'],
+                datasets: [{
+                    label: 'Valor',
+                    fill: false,
+                    data: [],
+                    backgroundColor: 'rgba(75, 192, 192, 0.2)',
+                    borderColor: 'rgba(75, 192, 192, 1)',
+                    borderWidth: 1
+                }]
+            },
+            options = {
+                responsive: true,
+                scales: {
+                    yAxes: [{
+                        ticks: {
+                            beginAtZero: true
+                        }
+                    }]
+                },
+                legend: {
+                    display: true,
+                    position: 'bottom'
+                }
+            },
+            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)
+    
+        }
+    
+        this.state = {
+            id,
+            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
+        })
+
+    }
+
+    render(){
+
+        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} />
+        )
+    }
+}
+
+export default LineComponent

src/index.js

@@ -1,5 +1,9 @@
 import RadialGauge from './RadialGauge.jsx';
+import Bar from './Bar.jsx';
+import Line from './Line.jsx';
 
 export { RadialGauge }
+export { Bar }
+export { Line }
 
 export default { RadialGauge }