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
Se vuelve a empaquetar con create react library ya que se coloco el nombre mal.
2025-07-02 19:58:18 -06:00 · 2019-12-05 19:30:28 -06:00 · 2019-12-05 15:44:46 -06:00 · 2019-12-05 13:38:34 -06:00
9 changed files with 58 additions and 14961 deletions
--- a/example/package-lock.json
+++ b/example/package-lock.json
--- a/example/package.json
+++ b/example/package.json
@ -1,6 +1,6 @@
 {
-  "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,
@ -9,7 +9,7 @@
    "react": "^16.4.1",
    "react-dom": "^16.4.1",
    "react-scripts": "^1.1.4",
-    "chart-2-react": "file:.."
+    "chartjs-2-react": "file:.."
  },
  "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,13 @@
 import React, { Component } from 'react'

-import { RadialGaugue } from 'chart-2-react'
+import { RadialGauge } 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 />
+        <h3 style={{textAlign: 'center'}}>RadialGauge Component:</h3>
+        <RadialGauge />
      </div>
    )
  }
--- a/package-lock.json
+++ b/package-lock.json
@ -1,5 +1,5 @@
 {
-  "name": "chart-2-react",
+  "name": "chartjs-2-react",
  "version": "1.0.0",
  "lockfileVersion": 1,
  "requires": true,
--- a/package.json
+++ b/package.json
@ -1,10 +1,10 @@
 {
  "name": "chartjs-2-react",
-  "version": "1.0.6",
+  "version": "1.0.9",
  "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",
--- a/src/RadialGauge.jsx
+++ b/src/RadialGauge.jsx
@ -6,28 +6,31 @@ import 'chartjs-chart-radial-gauge/build/Chart.RadialGauge.umd.min.js';

 class RadialGauge extends Component {

-  componentDidMount(){
+  constructor(props) { 
+    super(props)
+
+    let porcentaje = Math.round(Math.random() * 100),
+        porcentajeTexto = `${porcentaje} %`
+
+    this.state = {
+      chart: null,
+      porcentaje,
+      porcentajeTexto
+    }
+
+  }
+
+  componentDidMount() {

    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");

-    var config
-
-    var randomScalingFactor = function() {
-      return Math.round(Math.random() * 100);
-     };
-
-    config = {
+      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 +90,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="chart" />
+
+    } else { 
+      return <canvas id="chart" />
+    }
  }
 }

--- a/src/index.js
+++ b/src/index.js
@ -1,3 +1,5 @@
-import RadialGaugue from './RadialGauge.jsx';
+import RadialGauge from './RadialGauge.jsx';

-export { RadialGaugue }
+export { RadialGauge }
+
+export default { RadialGauge }
Author	SHA1	Message	Date
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