commit fce9838f6355091c126e38c6ddbe40d9fef6946f Author: Alejandro Lembke Barrientos Date: Thu Nov 21 11:49:03 2019 -0600 Primer Commit de la librería. Se agrega el primer componente RadialGauge. diff --git a/.gitignore b/.gitignore new file mode 100644 index 0000000..4e0e598 --- /dev/null +++ b/.gitignore @@ -0,0 +1,2 @@ +#Ignorar node_modules +/node_modules \ No newline at end of file diff --git a/README.md b/README.md new file mode 100644 index 0000000..b358715 --- /dev/null +++ b/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/) \ No newline at end of file diff --git a/RadialGauge.jsx b/RadialGauge.jsx new file mode 100644 index 0000000..2f16dc5 --- /dev/null +++ b/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 ( + + ) + } +} + +export default RadialGauge \ No newline at end of file diff --git a/index.js b/index.js new file mode 100644 index 0000000..3a1a6c0 --- /dev/null +++ b/index.js @@ -0,0 +1,3 @@ +import RadialGauge from './RadialGauge.jsx'; + +module.exports = { RadialGauge } \ No newline at end of file diff --git a/package-lock.json b/package-lock.json new file mode 100644 index 0000000..ed0ad7c --- /dev/null +++ b/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==" + } + } +} diff --git a/package.json b/package.json new file mode 100644 index 0000000..dab1a62 --- /dev/null +++ b/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" + } +}