Primer Commit de la librería.

Se agrega el primer componente RadialGauge.

.gitignore

@@ -0,0 +1,2 @@
+#Ignorar node_modules
+/node_modules

README.md

@@ -0,0 +1,6 @@
+# Librería de Chart.js 2 para React.js
+
+Esta es una libreria de chart.js para React.js. Se compondrá de varios componentes. Espera para ampliar la documentación
+
+## License
+[MIT](https://choosealicense.com/licenses/mit/)

RadialGauge.jsx

@@ -0,0 +1,97 @@
+import React, { Component } from 'react';
+
+import './css/AvancesCard.css';
+
+import Chart from 'chart.js';
+
+import 'chartjs-chart-radial-gauge/build/Chart.RadialGauge.umd.min.js';
+
+class RadialGauge extends Component {
+
+  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 = {
+      type: 'radialGauge',
+      data: {
+        labels: this.props.config.data.labels || ["Porcentaje"],
+        datasets: [
+         {
+          data: this.props.config.data.datasets !== undefined ? [this.props.config.data.datasets.data] : [0],
+          backgroundColor: ((this.props.config.data.datasets !== undefined) && (this.props.config.data.datasets.backgroundColor)) ? this.props.config.data.datasets.backgroundColor : '#2A969E',
+          borderWidth: ((this.props.config.data.datasets !== undefined) && (this.props.config.data.datasets.borderWidth)) ? this.props.config.data.datasets.borderWidth : 0,
+          label: ((this.props.config.data.datasets !== undefined) && (this.props.config.data.datasets.label)) ? this.props.config.data.datasets.label : "Porcentaje"
+         }
+        ]
+      },
+      options: {
+        title: {
+          display: this.props.config.options.title !== undefined ? this.props.config.options.title.display : false,
+          text: ((this.props.config.options.title) && (this.props.config.options.title.text)) !== undefined ? this.props.config.options.title.text : "Porcentaje"
+        },
+        responsive: this.props.config.options.responsive || true,
+        legend: this.props.config.options.leyend || {},
+        animation: {
+          // Boolean - Whether we animate the rotation of the radialGauge
+          animateRotate: this.props.config.options.animation !== undefined ? this.props.config.options.animation.animateRotate : true,
+          // Boolean - Whether we animate scaling the radialGauge from the centre
+          animateScale: this.props.config.options.animation !== undefined ? this.props.config.options.animation.animateScale : true
+        },
+      
+        // The percentage of the chart that is the center area
+        centerPercentage: this.props.config.options.centerPercentage || 80,
+      
+        // The rotation for the start of the metric's arc
+        rotation: this.props.config.options.rotation || -Math.PI / 2,
+      
+        // the color of the radial gauge's track
+        trackColor: this.props.config.options.trackColor || 'rgb(204, 221, 238)',
+      
+        // the domain for the data, default is [0, 100]
+        domain: this.props.config.options.domain || [0, 100],
+        
+        // whether arc for the gauge should have rounded corners
+        roundedCorners: this.props.config.options.roundedCorners || true,
+      
+        // center value options
+        centerArea: {
+          // whether to display the center text value
+          displayText: ((this.props.config.options.centerArea !== undefined) && (this.props.config.options.centerArea.displayText)) ? this.props.config.options.centerArea.displayText : true,
+          // font for the center text
+          fontFamily: this.props.config.options.centerArea !== undefined ? this.props.config.options.centerArea.fontFamily : null,
+          // color of the center text
+          fontColor: this.props.config.options.centerArea !== undefined ? this.props.config.options.centerArea.fontColor : null,
+          // the size of the center text
+          fontSize: this.props.config.options.centerArea !== undefined ? this.props.config.options.centerArea.fontSize : null,
+          // padding around the center area
+          padding: this.props.config.options.centerArea !== undefined ? this.props.config.options.centerArea.padding : null,
+          // an image to use for the center background
+          backgroundImage: this.props.config.options.centerArea !== undefined ? this.props.config.options.centerArea.backgroundImage : null,
+          // a color to use for the center background
+          backgroundColor: this.props.config.options.centerArea !== undefined ? this.props.config.options.centerArea.backgroundColor : 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.options.centerArea !== undefined ? this.props.config.options.centerArea.text : null,
+        }
+      }
+    };
+
+    new Chart(ctx, config);
+
+  }
+
+  render() {
+    return (          
+      <canvas id="chart"></canvas>
+    )
+  }
+}
+
+export default RadialGauge

index.js

@@ -0,0 +1,3 @@
+import RadialGauge from './RadialGauge.jsx';
+
+module.exports = { RadialGauge }

package-lock.json

@@ -0,0 +1,64 @@
+{
+  "name": "react-chartjs-2-aleleba",
+  "version": "1.0.0",
+  "lockfileVersion": 1,
+  "requires": true,
+  "dependencies": {
+    "chart.js": {
+      "version": "2.9.3",
+      "resolved": "https://registry.npmjs.org/chart.js/-/chart.js-2.9.3.tgz",
+      "integrity": "sha512-+2jlOobSk52c1VU6fzkh3UwqHMdSlgH1xFv9FKMqHiNCpXsGPQa/+81AFa+i3jZ253Mq9aAycPwDjnn1XbRNNw==",
+      "requires": {
+        "chartjs-color": "^2.1.0",
+        "moment": "^2.10.2"
+      }
+    },
+    "chartjs-chart-radial-gauge": {
+      "version": "1.0.3",
+      "resolved": "https://registry.npmjs.org/chartjs-chart-radial-gauge/-/chartjs-chart-radial-gauge-1.0.3.tgz",
+      "integrity": "sha512-orm3XGWww46rmsKvAnwyOhXA5MtVfjsxfD463iE/gBBVOfozeFnsydZWx8Rqj5fy3DoxZROYUCR02RexvoMsHQ=="
+    },
+    "chartjs-color": {
+      "version": "2.4.1",
+      "resolved": "https://registry.npmjs.org/chartjs-color/-/chartjs-color-2.4.1.tgz",
+      "integrity": "sha512-haqOg1+Yebys/Ts/9bLo/BqUcONQOdr/hoEr2LLTRl6C5LXctUdHxsCYfvQVg5JIxITrfCNUDr4ntqmQk9+/0w==",
+      "requires": {
+        "chartjs-color-string": "^0.6.0",
+        "color-convert": "^1.9.3"
+      }
+    },
+    "chartjs-color-string": {
+      "version": "0.6.0",
+      "resolved": "https://registry.npmjs.org/chartjs-color-string/-/chartjs-color-string-0.6.0.tgz",
+      "integrity": "sha512-TIB5OKn1hPJvO7JcteW4WY/63v6KwEdt6udfnDE9iCAZgy+V4SrbSxoIbTw/xkUIapjEI4ExGtD0+6D3KyFd7A==",
+      "requires": {
+        "color-name": "^1.0.0"
+      }
+    },
+    "color-convert": {
+      "version": "1.9.3",
+      "resolved": "https://registry.npmjs.org/color-convert/-/color-convert-1.9.3.tgz",
+      "integrity": "sha512-QfAUtd+vFdAtFQcC8CCyYt1fYWxSqAiK2cSD6zDB8N3cpsEBAvRxp9zOGg6G/SHHJYAT88/az/IuDGALsNVbGg==",
+      "requires": {
+        "color-name": "1.1.3"
+      },
+      "dependencies": {
+        "color-name": {
+          "version": "1.1.3",
+          "resolved": "https://registry.npmjs.org/color-name/-/color-name-1.1.3.tgz",
+          "integrity": "sha1-p9BVi9icQveV3UIyj3QIMcpTvCU="
+        }
+      }
+    },
+    "color-name": {
+      "version": "1.1.4",
+      "resolved": "https://registry.npmjs.org/color-name/-/color-name-1.1.4.tgz",
+      "integrity": "sha512-dOy+3AuW3a2wNbZHIuMZpTcgjGuLU/uBL/ubcZF9OXbDo8ff4O8yVp5Bf0efS8uEoYo5q4Fx7dY9OgQGXgAsQA=="
+    },
+    "moment": {
+      "version": "2.24.0",
+      "resolved": "https://registry.npmjs.org/moment/-/moment-2.24.0.tgz",
+      "integrity": "sha512-bV7f+6l2QigeBBZSM/6yTNq4P2fNpSWj/0e7jQcy87A8e7o2nAfP/34/2ky5Vw4B9S446EtIhodAzkFCcR4dQg=="
+    }
+  }
+}

package.json

@@ -0,0 +1,19 @@
+  {
+  "name": "react-chartjs-2-aleleba",
+  "version": "1.0.0",
+  "description": "Libreria de chart.js para react desarrollada por Alejandro Lembke Barrientos.",
+  "main": "index.jsx",
+  "scripts": {
+    "test": "echo \"Error: no test specified\" && exit 1"
+  },
+  "keywords": [
+    "react",
+    "chart.js."
+  ],
+  "author": "Alejandro Lembke Barrientos",
+  "license": "MIT",
+  "dependencies": {
+    "chart.js": "^2.9.3",
+    "chartjs-chart-radial-gauge": "^1.0.3"
+  }
+}