mirror of
https://github.com/aleleba/chartjs-2-react.git
synced 2025-04-19 23:58:03 -06:00
Compare commits
No commits in common. "master" and "1.0.4" have entirely different histories.
9
.babelrc
9
.babelrc
@ -1,9 +0,0 @@
|
||||
{
|
||||
"presets": [
|
||||
["env", {
|
||||
"modules": false
|
||||
}],
|
||||
"stage-0",
|
||||
"react"
|
||||
]
|
||||
}
|
||||
@ -1,9 +0,0 @@
|
||||
root = true
|
||||
|
||||
[*]
|
||||
charset = utf-8
|
||||
indent_style = space
|
||||
indent_size = 2
|
||||
end_of_line = lf
|
||||
insert_final_newline = true
|
||||
trim_trailing_whitespace = true
|
||||
20
.eslintrc
20
.eslintrc
@ -1,20 +0,0 @@
|
||||
{
|
||||
"parser": "babel-eslint",
|
||||
"extends": "react-app",
|
||||
"env": {
|
||||
"es6": true
|
||||
},
|
||||
"plugins": [
|
||||
"react"
|
||||
],
|
||||
"parserOptions": {
|
||||
"sourceType": "module"
|
||||
},
|
||||
"rules": {
|
||||
// don't force es6 functions to include space before paren
|
||||
"space-before-function-paren": 0,
|
||||
|
||||
// allow specifying true explicitly for boolean props
|
||||
"react/jsx-boolean-value": 0
|
||||
}
|
||||
}
|
||||
24
.gitignore
vendored
24
.gitignore
vendored
@ -1,22 +1,2 @@
|
||||
|
||||
# See https://help.github.com/ignore-files/ for more about ignoring files.
|
||||
|
||||
# dependencies
|
||||
node_modules
|
||||
|
||||
# builds
|
||||
build
|
||||
dist
|
||||
.rpt2_cache
|
||||
|
||||
# misc
|
||||
.DS_Store
|
||||
.env
|
||||
.env.local
|
||||
.env.development.local
|
||||
.env.test.local
|
||||
.env.production.local
|
||||
|
||||
npm-debug.log*
|
||||
yarn-debug.log*
|
||||
yarn-error.log*
|
||||
#Ignorar node_modules
|
||||
/node_modules
|
||||
@ -1,4 +0,0 @@
|
||||
language: node_js
|
||||
node_js:
|
||||
- 9
|
||||
- 8
|
||||
28
README.md
28
README.md
@ -1,30 +1,6 @@
|
||||
# chartjs-2-react
|
||||
# Librería de Chart.js 2 para React.js
|
||||
|
||||
> Libreria de chart.js para React.js
|
||||
|
||||
[](https://www.npmjs.com/package/chartjs-2-react) [](https://standardjs.com)
|
||||
|
||||
## Install
|
||||
|
||||
```bash
|
||||
npm install --save chart-2-react
|
||||
```
|
||||
|
||||
<!--## Usage
|
||||
|
||||
```jsx
|
||||
import React, { Component } from 'react'
|
||||
|
||||
import MyComponent from 'chart-2-react'
|
||||
|
||||
class Example extends Component {
|
||||
render () {
|
||||
return (
|
||||
<MyComponent />
|
||||
)
|
||||
}
|
||||
}
|
||||
```-->
|
||||
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/)
|
||||
95
RadialGauge.js
Normal file
95
RadialGauge.js
Normal file
@ -0,0 +1,95 @@
|
||||
import React, { Component } from 'react';
|
||||
|
||||
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" />
|
||||
)
|
||||
}
|
||||
}
|
||||
|
||||
export default RadialGauge
|
||||
@ -1 +0,0 @@
|
||||
[{"/home/coder/project/Chartjs-2-React/example/src/index.js":"1","/home/coder/project/Chartjs-2-React/example/src/App.js":"2"},{"size":164,"mtime":1584058544299,"results":"3","hashOfConfig":"4"},{"size":3054,"mtime":1607979071729,"results":"5","hashOfConfig":"4"},{"filePath":"6","messages":"7","errorCount":0,"warningCount":0,"fixableErrorCount":0,"fixableWarningCount":0,"usedDeprecatedRules":"8"},"3tjic6",{"filePath":"9","messages":"10","errorCount":0,"warningCount":0,"fixableErrorCount":0,"fixableWarningCount":0},"/home/coder/project/Chartjs-2-React/example/src/index.js",[],["11","12"],"/home/coder/project/Chartjs-2-React/example/src/App.js",[],{"ruleId":"13","replacedBy":"14"},{"ruleId":"15","replacedBy":"16"},"no-native-reassign",["17"],"no-negated-in-lhs",["18"],"no-global-assign","no-unsafe-negation"]
|
||||
2164
example/README.md
2164
example/README.md
File diff suppressed because it is too large
Load Diff
16287
example/package-lock.json
generated
16287
example/package-lock.json
generated
File diff suppressed because it is too large
Load Diff
@ -1,32 +0,0 @@
|
||||
{
|
||||
"name": "chartjs-2-react-example",
|
||||
"homepage": "https://aleleba.github.io/chartjs-2-react",
|
||||
"version": "1.1.5",
|
||||
"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": "^4.0.1"
|
||||
},
|
||||
"scripts": {
|
||||
"start": "react-scripts start",
|
||||
"build": "react-scripts build",
|
||||
"test": "react-scripts test --env=jsdom",
|
||||
"eject": "react-scripts eject"
|
||||
},
|
||||
"browserslist": {
|
||||
"production": [
|
||||
">0.2%",
|
||||
"not dead",
|
||||
"not op_mini all"
|
||||
],
|
||||
"development": [
|
||||
"last 1 chrome version",
|
||||
"last 1 firefox version",
|
||||
"last 1 safari version"
|
||||
]
|
||||
}
|
||||
}
|
||||
@ -1,20 +0,0 @@
|
||||
<!doctype html>
|
||||
<html lang="en">
|
||||
<head>
|
||||
<meta charset="utf-8">
|
||||
<meta name="viewport" content="width=device-width, initial-scale=1, shrink-to-fit=no">
|
||||
<meta name="theme-color" content="#000000">
|
||||
|
||||
<link rel="manifest" href="%PUBLIC_URL%/manifest.json">
|
||||
|
||||
<title>chartjs-2-react</title>
|
||||
</head>
|
||||
|
||||
<body>
|
||||
<noscript>
|
||||
You need to enable JavaScript to run this app.
|
||||
</noscript>
|
||||
|
||||
<div id="root"></div>
|
||||
</body>
|
||||
</html>
|
||||
@ -1,8 +0,0 @@
|
||||
{
|
||||
"short_name": "chartjs-2-react",
|
||||
"name": "chartjs-2-react",
|
||||
"start_url": "./index.html",
|
||||
"display": "standalone",
|
||||
"theme_color": "#000000",
|
||||
"background_color": "#ffffff"
|
||||
}
|
||||
@ -1,100 +0,0 @@
|
||||
import React, { Component } from 'react';
|
||||
|
||||
import { RadialGauge, Bar, Line } from 'chartjs-2-react';
|
||||
|
||||
export default class App extends Component {
|
||||
|
||||
render () {
|
||||
|
||||
return (
|
||||
<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 style={{maxWidth: '600px', marginTop: '25px', margin: 'auto'}}>
|
||||
<h3 style={{textAlign: 'center'}}>Multi Axis Bar Line Component:</h3>
|
||||
<Bar config={{
|
||||
data: {
|
||||
datasets: [{
|
||||
label: 'Bar Dataset',
|
||||
data: [10, 20, 30, 40],
|
||||
yAxisID: 'A',
|
||||
backgroundColor: 'rgba(75, 192, 192, 0.2)',
|
||||
borderColor: 'rgba(75, 192, 192, 1)'
|
||||
},
|
||||
{
|
||||
label: 'Bar Dataset',
|
||||
data: [10, 20, 30, 40],
|
||||
yAxisID: 'A',
|
||||
backgroundColor: 'rgba(75, 192, 192, 0.2)',
|
||||
borderColor: 'rgba(75, 192, 192, 1)'
|
||||
},
|
||||
{
|
||||
label: 'Bar Dataset',
|
||||
data: [10, 20, 30, 40],
|
||||
yAxisID: 'A',
|
||||
backgroundColor: 'rgba(75, 192, 192, 0.2)',
|
||||
borderColor: 'rgba(75, 192, 192, 1)'
|
||||
},
|
||||
{
|
||||
// Changes this dataset to become a line
|
||||
type: 'line',
|
||||
yAxisID: 'B',
|
||||
label: 'Line Dataset',
|
||||
data: [5, 8, 10, 30],
|
||||
backgroundColor: 'transparent',
|
||||
borderColor: 'rgba(75, 192, 192, 1)'
|
||||
},
|
||||
{
|
||||
// Changes this dataset to become a line
|
||||
type: 'line',
|
||||
yAxisID: 'B',
|
||||
label: 'Line Dataset',
|
||||
data: [15, 20, 25, 30],
|
||||
backgroundColor: 'transparent',
|
||||
borderColor: 'rgba(75, 192, 192, 1)'
|
||||
}],
|
||||
labels: ['January', 'February', 'March', 'April'],
|
||||
},
|
||||
options: {
|
||||
scales: {
|
||||
yAxes: [{
|
||||
id: 'A',
|
||||
type: 'linear',
|
||||
position: 'left',
|
||||
/*ticks: {
|
||||
max: 1,
|
||||
min: 0
|
||||
}*/
|
||||
}, {
|
||||
id: 'B',
|
||||
type: 'linear',
|
||||
position: 'right',
|
||||
/*ticks: {
|
||||
max: 1,
|
||||
min: 0
|
||||
}*/
|
||||
}]
|
||||
}
|
||||
}
|
||||
}}/>
|
||||
</div>
|
||||
|
||||
</div>
|
||||
)
|
||||
}
|
||||
|
||||
}
|
||||
@ -1,5 +0,0 @@
|
||||
body {
|
||||
margin: 0;
|
||||
padding: 0;
|
||||
font-family: sans-serif;
|
||||
}
|
||||
@ -1,7 +0,0 @@
|
||||
import React from 'react'
|
||||
import ReactDOM from 'react-dom'
|
||||
|
||||
import './index.css'
|
||||
import App from './App'
|
||||
|
||||
ReactDOM.render(<App />, document.getElementById('root'))
|
||||
7
index.js
Normal file
7
index.js
Normal file
@ -0,0 +1,7 @@
|
||||
//import RadialGauge from './RadialGauge';
|
||||
|
||||
export { default as RadialGauge } from './RadialGauge';
|
||||
|
||||
/*module.exports = {
|
||||
RadialGauge,
|
||||
}*/
|
||||
26664
package-lock.json
generated
26664
package-lock.json
generated
File diff suppressed because it is too large
Load Diff
69
package.json
69
package.json
@ -1,66 +1,19 @@
|
||||
{
|
||||
{
|
||||
"name": "chartjs-2-react",
|
||||
"version": "1.1.5",
|
||||
"description": "Libreria de chart.js para React.js",
|
||||
"author": "aleleba",
|
||||
"license": "MIT",
|
||||
"repository": "aleleba/chartjs-2-react",
|
||||
"main": "dist/index.js",
|
||||
"module": "dist/index.es.js",
|
||||
"jsnext:main": "dist/index.es.js",
|
||||
"engines": {
|
||||
"node": ">=8",
|
||||
"npm": ">=5"
|
||||
},
|
||||
"version": "1.0.4",
|
||||
"description": "Libreria de chart.js para react desarrollada por Alejandro Lembke Barrientos.",
|
||||
"main": "index.jsx",
|
||||
"scripts": {
|
||||
"test": "cross-env CI=1 react-scripts test --env=jsdom",
|
||||
"test:watch": "react-scripts test --env=jsdom",
|
||||
"build": "rollup -c",
|
||||
"start": "rollup -c -w",
|
||||
"prepare": "npm run build",
|
||||
"predeploy": "cd example && npm install && npm run build",
|
||||
"deploy": "gh-pages -d example/build"
|
||||
"test": "echo \"Error: no test specified\" && exit 1"
|
||||
},
|
||||
"peerDependencies": {
|
||||
"prop-types": "^15.5.4",
|
||||
"react": "^15.0.0 || ^16.0.0",
|
||||
"react-dom": "^15.0.0 || ^16.0.0"
|
||||
},
|
||||
"devDependencies": {
|
||||
"@svgr/rollup": "^2.4.1",
|
||||
"babel-core": "^6.26.3",
|
||||
"babel-eslint": "^8.2.5",
|
||||
"babel-plugin-external-helpers": "^6.22.0",
|
||||
"babel-preset-env": "^1.7.0",
|
||||
"babel-preset-react": "^6.24.1",
|
||||
"babel-preset-stage-0": "^6.24.1",
|
||||
"cross-env": "^5.1.4",
|
||||
"eslint": "^5.0.1",
|
||||
"eslint-config-standard": "^11.0.0",
|
||||
"eslint-config-standard-react": "^6.0.0",
|
||||
"eslint-plugin-import": "^2.13.0",
|
||||
"eslint-plugin-node": "^7.0.1",
|
||||
"eslint-plugin-promise": "^4.0.0",
|
||||
"eslint-plugin-react": "^7.10.0",
|
||||
"eslint-plugin-standard": "^3.1.0",
|
||||
"gh-pages": "^1.2.0",
|
||||
"react": "^16.4.1",
|
||||
"react-dom": "^16.4.1",
|
||||
"react-scripts": "^4.0.1",
|
||||
"rollup": "^0.64.1",
|
||||
"rollup-plugin-babel": "^3.0.7",
|
||||
"rollup-plugin-commonjs": "^9.1.3",
|
||||
"rollup-plugin-node-resolve": "^3.3.0",
|
||||
"rollup-plugin-peer-deps-external": "^2.2.0",
|
||||
"rollup-plugin-postcss": "^4.0.0",
|
||||
"rollup-plugin-url": "^1.4.0"
|
||||
},
|
||||
"files": [
|
||||
"dist"
|
||||
"keywords": [
|
||||
"react",
|
||||
"chart.js."
|
||||
],
|
||||
"author": "Alejandro Lembke Barrientos",
|
||||
"license": "MIT",
|
||||
"dependencies": {
|
||||
"chart.js": "^2.9.3",
|
||||
"chartjs-chart-radial-gauge": "^1.0.3",
|
||||
"request": "^2.88.2"
|
||||
"chartjs-chart-radial-gauge": "^1.0.3"
|
||||
}
|
||||
}
|
||||
|
||||
@ -1,39 +0,0 @@
|
||||
import babel from 'rollup-plugin-babel'
|
||||
import commonjs from 'rollup-plugin-commonjs'
|
||||
import external from 'rollup-plugin-peer-deps-external'
|
||||
import postcss from 'rollup-plugin-postcss'
|
||||
import resolve from 'rollup-plugin-node-resolve'
|
||||
import url from 'rollup-plugin-url'
|
||||
import svgr from '@svgr/rollup'
|
||||
|
||||
import pkg from './package.json'
|
||||
|
||||
export default {
|
||||
input: 'src/index.js',
|
||||
output: [
|
||||
{
|
||||
file: pkg.main,
|
||||
format: 'cjs',
|
||||
sourcemap: true
|
||||
},
|
||||
{
|
||||
file: pkg.module,
|
||||
format: 'es',
|
||||
sourcemap: true
|
||||
}
|
||||
],
|
||||
plugins: [
|
||||
external(),
|
||||
postcss({
|
||||
modules: true
|
||||
}),
|
||||
url(),
|
||||
svgr(),
|
||||
babel({
|
||||
exclude: 'node_modules/**',
|
||||
plugins: [ 'external-helpers' ]
|
||||
}),
|
||||
resolve(),
|
||||
commonjs()
|
||||
]
|
||||
}
|
||||
@ -1,5 +0,0 @@
|
||||
{
|
||||
"env": {
|
||||
"jest": true
|
||||
}
|
||||
}
|
||||
87
src/Bar.jsx
87
src/Bar.jsx
@ -1,87 +0,0 @@
|
||||
import React, { useState, useEffect } from 'react';
|
||||
|
||||
import ID from './Service/ID.js';
|
||||
|
||||
let BarComponent = props => {
|
||||
|
||||
let id = props.id ? 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'
|
||||
}
|
||||
}
|
||||
|
||||
for(let i = 0; i < 5 ; i ++){
|
||||
|
||||
let dato = Math.round(Math.random() * 25)
|
||||
|
||||
data.datasets[0].data.push(dato)
|
||||
|
||||
}
|
||||
|
||||
let [state, setState] = useState({
|
||||
id,
|
||||
chart: null,
|
||||
data,
|
||||
options
|
||||
})
|
||||
|
||||
useEffect( ()=> {
|
||||
|
||||
var ctx = document.getElementById(`${state.id}`).getContext('2d');
|
||||
|
||||
let config = {
|
||||
type: 'bar',
|
||||
data: (props.config !== undefined) && (props.config.data !== undefined) ? props.config.data : state.data,
|
||||
options: (props.config !== undefined) && (props.config.options !== undefined) ? props.config.options : state.options
|
||||
}
|
||||
|
||||
setState({
|
||||
id: props.id !== undefined ? props.id : state.id,
|
||||
chart: new Chart(ctx, config)
|
||||
})
|
||||
|
||||
}, [props])
|
||||
|
||||
if (state.chart !== null) {
|
||||
|
||||
if((props.config !== undefined) && (props.config.data !== undefined)){
|
||||
state.chart.data.labels = props.config.data.labels
|
||||
state.chart.data.datasets = props.config.data.datasets
|
||||
}
|
||||
|
||||
if((props.config !== undefined) && (props.config.options !== undefined)){
|
||||
state.chart.options = props.config.options
|
||||
}
|
||||
|
||||
state.chart.update();
|
||||
|
||||
return <canvas id={`${state.id}`} />
|
||||
|
||||
|
||||
} else {
|
||||
return <canvas id={`${state.id}`} />
|
||||
}
|
||||
|
||||
}
|
||||
|
||||
export default BarComponent
|
||||
89
src/Line.jsx
89
src/Line.jsx
@ -1,89 +0,0 @@
|
||||
import React, { useState, useEffect } from 'react';
|
||||
|
||||
import ID from './Service/ID.js';
|
||||
|
||||
let LineComponent = props => {
|
||||
|
||||
let id = props.id ? 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'
|
||||
}
|
||||
}
|
||||
|
||||
for(let i = 0; i < 5 ; i ++){
|
||||
|
||||
let dato = Math.round(Math.random() * 25)
|
||||
|
||||
data.datasets[0].data.push(dato)
|
||||
|
||||
}
|
||||
|
||||
let [state, setState] = useState({
|
||||
id,
|
||||
chart: null,
|
||||
data,
|
||||
options
|
||||
})
|
||||
|
||||
useEffect( ()=> {
|
||||
|
||||
var ctx = document.getElementById(`${state.id}`).getContext('2d');
|
||||
|
||||
let config = {
|
||||
type: 'line',
|
||||
data: (props.config !== undefined) && (props.config.data !== undefined) ? props.config.data : state.data,
|
||||
options: (props.config !== undefined) && (props.config.options !== undefined) ? props.config.options : state.options
|
||||
}
|
||||
|
||||
setState({
|
||||
id: props.id !== undefined ? props.id : state.id,
|
||||
chart: new Chart(ctx, config)
|
||||
})
|
||||
|
||||
}, [props])
|
||||
|
||||
if (state.chart !== null) {
|
||||
|
||||
if((props.config !== undefined) && (props.config.data !== undefined)){
|
||||
state.chart.data.labels = props.config.data.labels
|
||||
state.chart.data.datasets = props.config.data.datasets
|
||||
}
|
||||
|
||||
if((props.config !== undefined) && (props.config.options !== undefined)){
|
||||
state.chart.options = props.config.options
|
||||
}
|
||||
|
||||
state.chart.update();
|
||||
|
||||
return <canvas id={`${state.id}`} />
|
||||
|
||||
|
||||
} else {
|
||||
return <canvas id={`${state.id}`} />
|
||||
}
|
||||
|
||||
|
||||
}
|
||||
|
||||
export default LineComponent
|
||||
@ -1,119 +0,0 @@
|
||||
import React, { useState, useEffect } from 'react';
|
||||
|
||||
import Chart from 'chart.js';
|
||||
|
||||
import 'chartjs-chart-radial-gauge/build/Chart.RadialGauge.umd.min.js';
|
||||
|
||||
import ID from './Service/ID.js'
|
||||
|
||||
let RadialGauge = props => {
|
||||
|
||||
let porcentaje = Math.round(Math.random() * 100),
|
||||
porcentajeTexto = `${porcentaje} %`
|
||||
|
||||
let id = props.id ? props.id : ID()
|
||||
|
||||
let [state, setState] = useState({
|
||||
id,
|
||||
chart: null,
|
||||
porcentaje,
|
||||
porcentajeTexto
|
||||
})
|
||||
|
||||
useEffect( () => {
|
||||
|
||||
var ctx = document.getElementById(`${state.id}`).getContext('2d');
|
||||
|
||||
var config = {
|
||||
type: 'radialGauge',
|
||||
data: {
|
||||
labels: props.config ? (props.config.data ? (props.config.data.labels || ["Porcentaje"]) : ["Porcentaje"]) : ["Porcentaje"],
|
||||
datasets: [
|
||||
{
|
||||
data: props.config ? ((props.config.data) ? (props.config.data.datasets !== undefined ? [props.config.data.datasets.data] : [state.porcentaje]) : [state.porcentaje]) : [state.porcentaje],
|
||||
backgroundColor: props.config ? ( props.config.data ? (((props.config.data.datasets !== undefined) && (props.config.data.datasets.backgroundColor)) ? props.config.data.datasets.backgroundColor : '#2A969E') : '#2A969E') : '#2A969E',
|
||||
borderWidth: props.config ? ( props.config.data ? (((props.config.data.datasets !== undefined) && (props.config.data.datasets.borderWidth)) ? props.config.data.datasets.borderWidth : 0) : 0) : 0,
|
||||
label: props.config ? ( props.config.data ? (((props.config.data.datasets !== undefined) && (props.config.data.datasets.label)) ? props.config.data.datasets.label : "Porcentaje") : "Porcentaje") : "Porcentaje"
|
||||
}
|
||||
]
|
||||
},
|
||||
options: {
|
||||
title: {
|
||||
display: props.config ? ((props.config.options) ? (props.config.options.title !== undefined ? props.config.options.title.display : false) : false) : false,
|
||||
text: props.config ? ((props.config.options) ? (((props.config.options.title) && (props.config.options.title.text)) !== undefined ? props.config.options.title.text : "Porcentaje") : "Porcentaje") : "Porcentaje"
|
||||
},
|
||||
responsive: props.config ? ((props.config.options) ? (props.config.options.responsive || true) : true) : true,
|
||||
legend: props.config ? ((props.config.options) ? (props.config.options.leyend || {}) : {}) : {},
|
||||
animation: {
|
||||
// Boolean - Whether we animate the rotation of the radialGauge
|
||||
animateRotate: props.config ? ((props.config.options) ? (props.config.options.animation !== undefined ? props.config.options.animation.animateRotate : true) : true ) : true,
|
||||
// Boolean - Whether we animate scaling the radialGauge from the centre
|
||||
animateScale: props.config ? ((props.config.options) ? (props.config.options.animation !== undefined ? props.config.options.animation.animateScale : true) : true) : true
|
||||
},
|
||||
|
||||
// The percentage of the chart that is the center area
|
||||
centerPercentage: props.config ? ((props.config.options) ? (props.config.options.centerPercentage || 80) : 80 ) : 80,
|
||||
|
||||
// The rotation for the start of the metric's arc
|
||||
rotation: props.config ? ((props.config.options) ? (props.config.options.rotation || -Math.PI / 2) : -Math.PI / 2) : -Math.PI / 2,
|
||||
|
||||
// the color of the radial gauge's track
|
||||
trackColor: props.config ? ((props.config.options) ? (props.config.options.trackColor || 'rgb(204, 221, 238)') : 'rgb(204, 221, 238)' ) : 'rgb(204, 221, 238)',
|
||||
|
||||
// the domain for the data, default is [0, 100]
|
||||
domain: props.config ? ((props.config.options) ? (props.config.options.domain || [0, 100]) : [0, 100]) : [0, 100],
|
||||
|
||||
// whether arc for the gauge should have rounded corners
|
||||
roundedCorners: props.config ? ((props.config.options) ? (props.config.options.roundedCorners || true) : true) : true,
|
||||
|
||||
// center value options
|
||||
centerArea: {
|
||||
// whether to display the center text value
|
||||
displayText: props.config ? ((props.config.options) ? (((props.config.options.centerArea !== undefined) && (props.config.options.centerArea.displayText)) ? props.config.options.centerArea.displayText : true) : true) : true,
|
||||
// font for the center text
|
||||
fontFamily: props.config ? ((props.config.options) ? (props.config.options.centerArea !== undefined ? props.config.options.centerArea.fontFamily : null) : null) : null,
|
||||
// color of the center text
|
||||
fontColor: props.config ? ((props.config.options) ? (props.config.options.centerArea !== undefined ? props.config.options.centerArea.fontColor : null) : null) : null,
|
||||
// the size of the center text
|
||||
fontSize: props.config ? ((props.config.options) ? (props.config.options.centerArea !== undefined ? props.config.options.centerArea.fontSize : null) : null) : null,
|
||||
// padding around the center area
|
||||
padding: props.config ? ((props.config.options) ? (props.config.options.centerArea !== undefined ? props.config.options.centerArea.padding : null) : null) : null,
|
||||
// an image to use for the center background
|
||||
backgroundImage: props.config ? ((props.config.options) ? (props.config.options.centerArea !== undefined ? props.config.options.centerArea.backgroundImage : null) : null) : null,
|
||||
// a color to use for the center background
|
||||
backgroundColor: props.config ? ((props.config.options) ? (props.config.options.centerArea !== undefined ? props.config.options.centerArea.backgroundColor : null) : null) : 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: props.config ? ((props.config.options) ? (props.config.options.centerArea !== undefined ? props.config.options.centerArea.text : null) : null) : null,
|
||||
}
|
||||
}
|
||||
};
|
||||
|
||||
setState({
|
||||
chart: new Chart(ctx, config)
|
||||
})
|
||||
|
||||
}, [props])
|
||||
|
||||
if (state.chart !== null) {
|
||||
|
||||
props.config ? ((props.config.data) ? (props.config.data.datasets !== undefined ? (state.chart.data.datasets[0].data[0] = props.config.data.datasets.data) : [state.porcentaje]) : [state.porcentaje]) : [state.porcentaje]
|
||||
|
||||
//state.chart.data.datasets[0].data[0] = props.config.data.datasets.data)
|
||||
|
||||
props.config ? ((props.config.options) ? (props.config.options.centerArea !== undefined ? (state.chart.options.centerArea.text = props.config.options.centerArea.text) : null) : null) : null
|
||||
|
||||
//state.chart.options.centerArea.text = props.config.options.centerArea.text
|
||||
|
||||
state.chart.update();
|
||||
|
||||
return <canvas id={`${state.id}`} />
|
||||
|
||||
} else {
|
||||
return <canvas id={`${state.id}`} />
|
||||
}
|
||||
|
||||
}
|
||||
|
||||
export default RadialGauge
|
||||
@ -1,25 +0,0 @@
|
||||
// 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
|
||||
@ -1,9 +0,0 @@
|
||||
import RadialGauge from './RadialGauge.jsx';
|
||||
import Bar from './Bar.jsx';
|
||||
import Line from './Line.jsx';
|
||||
|
||||
export { RadialGauge }
|
||||
export { Bar }
|
||||
export { Line }
|
||||
|
||||
export default { RadialGauge }
|
||||
@ -1,8 +0,0 @@
|
||||
/* add css styles here (optional) */
|
||||
|
||||
.test {
|
||||
display: inline-block;
|
||||
margin: 2em auto;
|
||||
border: 2px solid #000;
|
||||
font-size: 2em;
|
||||
}
|
||||
@ -1,7 +0,0 @@
|
||||
import ExampleComponent from './'
|
||||
|
||||
describe('ExampleComponent', () => {
|
||||
it('is truthy', () => {
|
||||
expect(ExampleComponent).toBeTruthy()
|
||||
})
|
||||
})
|
||||
Loading…
Reference in New Issue
Block a user