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
Se arregla el problema con el package-lock.json de example.
2025-07-02 19:58:18 -06:00 · 2020-02-08 15:15:09 -06:00 · 2019-12-07 02:15:33 -06:00 · 2019-12-07 00:58:17 -06:00 · 2019-12-07 00:48:14 -06:00 · 2019-12-05 23:40:15 -06:00
13 changed files with 882 additions and 15464 deletions
--- a/README.md
+++ b/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

--- a/example/package-lock.json
+++ b/example/package-lock.json
--- a/example/package.json
+++ b/example/package.json
@ -1,15 +1,15 @@
 {
-  "name": "chart-2-react-example",
-  "homepage": "https://aleleba.github.io/chart-2-react",
+  "name": "chartjs-2-react-example",
+  "homepage": "https://aleleba.github.io/chartjs-2-react",
  "version": "0.0.0",
  "license": "MIT",
  "private": true,
  "dependencies": {
+    "chartjs-2-react": "file:..",
    "prop-types": "^15.6.2",
    "react": "^16.4.1",
    "react-dom": "^16.4.1",
-    "react-scripts": "^1.1.4",
-    "chart-2-react": "file:.."
+    "react-scripts": "^1.1.4"
  },
  "scripts": {
    "start": "react-scripts start",
--- a/example/public/index.html
+++ b/example/public/index.html
@ -7,7 +7,7 @@

    <link rel="manifest" href="%PUBLIC_URL%/manifest.json">

-    <title>chart-2-react</title>
+    <title>chartjs-2-react</title>
  </head>

  <body>
--- a/example/public/manifest.json
+++ b/example/public/manifest.json
@ -1,6 +1,6 @@
 {
-  "short_name": "chart-2-react",
-  "name": "chart-2-react",
+  "short_name": "chartjs-2-react",
+  "name": "chartjs-2-react",
  "start_url": "./index.html",
  "display": "standalone",
  "theme_color": "#000000",
--- a/example/src/App.js
+++ b/example/src/App.js
@ -1,13 +1,28 @@
-import React, { Component } from 'react'
+import React, { Component } from 'react';

-import { RadialGaugue } from 'chart-2-react'
+import { RadialGauge, Bar, Line } from 'chartjs-2-react';

 export default class App extends Component {
  render () {
+
    return (
-      <div style={{maxWidth: '600px', marginTop: '25px'}}>
-        <h3 style={{textAlign: 'center'}}>RadialGaugue Component:</h3>
-        <RadialGaugue />
+      <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>
    )
  }
--- a/package-lock.json
+++ b/package-lock.json
@ -1,6 +1,6 @@
 {
-  "name": "chart-2-react",
-  "version": "1.0.0",
+  "name": "chartjs-2-react",
+  "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==",
-      "dev": true
+      "integrity": "sha512-RdJUflcE3cUzKiMqQgsCu06FPu9UdIJO0beYbPhHN4k6apgJtifcoCtT9bcxOpYBtpD2kCM6Sbzg4CausW/PKQ=="
    },
    "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==",
-      "dev": true
+      "integrity": "sha512-8xOcRHvCjnocdS5cpwXQXVzmmh5e5+saE2QGoeQmbKmRS6J3VQppPOIt0MnmE+4xlZoumy0GPG0D0MVIQbNA1A=="
    },
    "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=",
-      "dev": true
+      "integrity": "sha1-IQmtx5ZYh8/AXLvUQsrIv7s2CGM="
    },
    "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==",
-      "dev": true
+      "integrity": "sha512-rPCkf/mWBtKc97aLL9/txD8DZdemK0vkA3JMLShjlJB3Pj3s+lpf1KaBzMfQrAmhMQB0n1cU/SUGgKKBCe837Q=="
    },
    "react-scripts": {
      "version": "1.1.5",
--- a/package.json
+++ b/package.json
@ -1,10 +1,10 @@
 {
  "name": "chartjs-2-react",
-  "version": "1.0.6",
+  "version": "1.1.0",
  "description": "Libreria de chart.js para React.js",
  "author": "aleleba",
  "license": "MIT",
-  "repository": "aleleba/chart-2-react",
+  "repository": "aleleba/chartjs-2-react",
  "main": "dist/index.js",
  "module": "dist/index.es.js",
  "jsnext:main": "dist/index.es.js",
@ -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"
  }
 }
--- a/src/Bar.jsx
+++ b/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
--- a/src/Line.jsx
+++ b/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
--- a/src/RadialGauge.jsx
+++ b/src/RadialGauge.jsx
@ -4,30 +4,38 @@ import Chart from 'chart.js';

 import 'chartjs-chart-radial-gauge/build/Chart.RadialGauge.umd.min.js';

+import ID from './Service/ID.js'
+
 class RadialGauge extends Component {

-  componentDidMount(){
+  constructor(props) { 
+    super(props)

-    var ctx = document.getElementById('chart').getContext('2d');
-    
-    /*var gradientStroke = ctx.createLinearGradient(500, 0, 100, 0);
-    gradientStroke.addColorStop(0, "#2A969E");
-    gradientStroke.addColorStop(1, "#2A969E");*/
-    //gradientStroke.addColorStop(2, "#f49080");
+    let porcentaje = Math.round(Math.random() * 100),
+        porcentajeTexto = `${porcentaje} %`
+        
+    let id = this.props.id ? this.props.id : ID()

-    var config
+    this.state = {
+      id,
+      chart: null,
+      porcentaje,
+      porcentajeTexto
+    }

-    var randomScalingFactor = function() {
-      return Math.round(Math.random() * 100);
-     };
+  }

-    config = {
+  componentDidMount() {
+
+    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"],
          datasets: [
           {
-            data: this.props.config ? ((this.props.config.data) ? (this.props.config.data.datasets !== undefined ? [this.props.config.data.datasets.data] : [randomScalingFactor()]) : [randomScalingFactor()]) : [randomScalingFactor()],
+            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"
@ -87,15 +95,31 @@ class RadialGauge extends Component {
        }
      };

-
-    new Chart(ctx, config);
-
+    this.setState({
+      chart: new Chart(ctx, config)
+    })
+    
  }

  render() {
-    return (          
-      <canvas id="chart" />
-    )
+
+    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}`} />
+    }
  }
 }

--- a/src/Service/ID.js
+++ b/src/Service/ID.js
@ -0,0 +1,25 @@
+// Generate unique IDs for use as pseudo-private/protected names.
+// Similar in concept to
+// <http://wiki.ecmascript.org/doku.php?id=strawman:names>.
+//
+// The goals of this function are twofold:
+// 
+// * Provide a way to generate a string guaranteed to be unique when compared
+//   to other strings generated by this function.
+// * Make the string complex enough that it is highly unlikely to be
+//   accidentally duplicated by hand (this is key if you're using `ID`
+//   as a private/protected name on an object).
+//
+// Use:
+//
+//     var privateName = ID();
+//     var o = { 'public': 'foo' };
+//     o[privateName] = 'bar';
+var ID = function () {
+  // Math.random should be unique because of its seeding algorithm.
+  // Convert it to base 36 (numbers + letters), and grab the first 9 characters
+  // after the decimal.
+  return '_' + Math.random().toString(36).substr(2, 9);
+};
+
+export default ID
--- a/src/index.js
+++ b/src/index.js
@ -1,3 +1,9 @@
-import RadialGaugue from './RadialGauge.jsx';
+import RadialGauge from './RadialGauge.jsx';
+import Bar from './Bar.jsx';
+import Line from './Line.jsx';

-export { RadialGaugue }
+export { RadialGauge }
+export { Bar }
+export { Line }
+
+export default { RadialGauge }
Author	SHA1	Message	Date
Alejandro Lembke Barrientos	fe3bf8702e	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	2020-02-08 15:15:09 -06:00
Alejandro Lembke Barrientos	77ed20aa45	Se arregla el problema con el package-lock.json de example. Se sube a version 1.0.13 Se sube a GitHub 1.0.13 Se sube a NPM 1.0.13	2019-12-07 02:15:33 -06:00
Alejandro Lembke Barrientos	0d0304ae86	se arregla el problema de la version en package.json. Se sube a version 1.0.12 Se sube a GitHub 1.0.12 Se sube a NPM 1.0.12	2019-12-07 00:58:17 -06:00
Alejandro Lembke Barrientos	92599328ad	Se arreglan las vulnerabilidades en los package-lock.json. Se sube a version 1.0.11 Se sube a GitHub 1.0.11 Se sube a NPM 1.0.11	2019-12-07 00:48:14 -06:00
Alejandro Lembke Barrientos	783d248f1e	Se soluciona el problema de que existan varios RadialGauge en el mismo componente agregandoles un id único. Se sube a version 1.0.10 Se sube a GitHub 1.0.10 Se sube a NPM 1.0.10	2019-12-05 23:40:15 -06:00
Alejandro Lembke Barrientos	5170fae311	Se mejora RadialGauge para que al actualizar la data se actualice RadialGauge. Se sube a version 1.0.9 Se sube a GitHub 1.0.9 Se sube a NPM 1.0.9	2019-12-05 19:30:28 -06:00
Alejandro Lembke Barrientos	c8306d2382	Se vuelve a empaquetar con create react library ya que se coloco el nombre mal. Se sube a version 1.0.8 Se sube a GitHub 1.0.8 Se sube a NPM 1.0.8	2019-12-05 15:44:46 -06:00
Alejandro Lembke Barrientos	c7ee667af7	Se le agrega export default a index.js Se sube a version 1.0.7 Se sube a GitHub 1.0.7 Se sube a NPM 1.0.7	2019-12-05 13:38:34 -06:00