diff --git a/README.md b/README.md index b4e747c..d4b3458 100644 --- 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 diff --git a/example/src/App.js b/example/src/App.js index faba080..090e607 100644 --- a/example/src/App.js +++ b/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 ( -
-
+ return ( +
+ +

RadialGauge Component:

+
+

Bar Component:

+ +
+ +
+

Line Component:

+ +
+
) } diff --git a/package-lock.json b/package-lock.json index cebe7de..0a70d5f 100644 --- a/package-lock.json +++ b/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==", - "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", diff --git a/package.json b/package.json index 78b3040..3326369 100644 --- a/package.json +++ b/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" } } diff --git a/src/Bar.jsx b/src/Bar.jsx new file mode 100644 index 0000000..9c92e32 --- /dev/null +++ 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( + + ) + } +} + +export default BarComponent \ No newline at end of file diff --git a/src/Line.jsx b/src/Line.jsx new file mode 100644 index 0000000..4d70f60 --- /dev/null +++ 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( + + ) + } +} + +export default LineComponent \ No newline at end of file diff --git a/src/index.js b/src/index.js index c07f68c..b7f3f58 100644 --- a/src/index.js +++ b/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 }