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.7" have entirely different histories.
@ -1,6 +1,9 @@
|
||||
{
|
||||
"parser": "babel-eslint",
|
||||
"extends": "react-app",
|
||||
"extends": [
|
||||
"standard",
|
||||
"standard-react"
|
||||
],
|
||||
"env": {
|
||||
"es6": true
|
||||
},
|
||||
|
||||
@ -2,7 +2,7 @@
|
||||
|
||||
> Libreria de chart.js para React.js
|
||||
|
||||
[](https://www.npmjs.com/package/chartjs-2-react) [](https://standardjs.com)
|
||||
[](https://www.npmjs.com/package/chart-2-react) [](https://standardjs.com)
|
||||
|
||||
## Install
|
||||
|
||||
|
||||
@ -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"]
|
||||
32078
example/package-lock.json
generated
32078
example/package-lock.json
generated
File diff suppressed because it is too large
Load Diff
@ -1,32 +1,20 @@
|
||||
{
|
||||
"name": "chartjs-2-react-example",
|
||||
"homepage": "https://aleleba.github.io/chartjs-2-react",
|
||||
"version": "1.1.5",
|
||||
"name": "chart-2-react-example",
|
||||
"homepage": "https://aleleba.github.io/chart-2-react",
|
||||
"version": "0.0.0",
|
||||
"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"
|
||||
"react-scripts": "^1.1.4",
|
||||
"chart-2-react": "file:.."
|
||||
},
|
||||
"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"
|
||||
]
|
||||
}
|
||||
}
|
||||
|
||||
@ -7,7 +7,7 @@
|
||||
|
||||
<link rel="manifest" href="%PUBLIC_URL%/manifest.json">
|
||||
|
||||
<title>chartjs-2-react</title>
|
||||
<title>chart-2-react</title>
|
||||
</head>
|
||||
|
||||
<body>
|
||||
|
||||
@ -1,6 +1,6 @@
|
||||
{
|
||||
"short_name": "chartjs-2-react",
|
||||
"name": "chartjs-2-react",
|
||||
"short_name": "chart-2-react",
|
||||
"name": "chart-2-react",
|
||||
"start_url": "./index.html",
|
||||
"display": "standalone",
|
||||
"theme_color": "#000000",
|
||||
|
||||
@ -1,100 +1,14 @@
|
||||
import React, { Component } from 'react';
|
||||
import React, { Component } from 'react'
|
||||
|
||||
import { RadialGauge, Bar, Line } from 'chartjs-2-react';
|
||||
import { RadialGaugue } from 'chart-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 style={{maxWidth: '600px', marginTop: '25px'}}>
|
||||
<h3 style={{textAlign: 'center'}}>RadialGaugue Component:</h3>
|
||||
<RadialGaugue />
|
||||
</div>
|
||||
)
|
||||
}
|
||||
|
||||
}
|
||||
|
||||
24648
package-lock.json
generated
24648
package-lock.json
generated
File diff suppressed because it is too large
Load Diff
11
package.json
11
package.json
@ -1,10 +1,10 @@
|
||||
{
|
||||
"name": "chartjs-2-react",
|
||||
"version": "1.1.5",
|
||||
"version": "1.0.7",
|
||||
"description": "Libreria de chart.js para React.js",
|
||||
"author": "aleleba",
|
||||
"license": "MIT",
|
||||
"repository": "aleleba/chartjs-2-react",
|
||||
"repository": "aleleba/chart-2-react",
|
||||
"main": "dist/index.js",
|
||||
"module": "dist/index.es.js",
|
||||
"jsnext:main": "dist/index.es.js",
|
||||
@ -46,13 +46,13 @@
|
||||
"gh-pages": "^1.2.0",
|
||||
"react": "^16.4.1",
|
||||
"react-dom": "^16.4.1",
|
||||
"react-scripts": "^4.0.1",
|
||||
"react-scripts": "^1.1.4",
|
||||
"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-postcss": "^1.6.2",
|
||||
"rollup-plugin-url": "^1.4.0"
|
||||
},
|
||||
"files": [
|
||||
@ -60,7 +60,6 @@
|
||||
],
|
||||
"dependencies": {
|
||||
"chart.js": "^2.9.3",
|
||||
"chartjs-chart-radial-gauge": "^1.0.3",
|
||||
"request": "^2.88.2"
|
||||
"chartjs-chart-radial-gauge": "^1.0.3"
|
||||
}
|
||||
}
|
||||
|
||||
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 +1,102 @@
|
||||
import React, { useState, useEffect } from 'react';
|
||||
import React, { Component } from 'react';
|
||||
|
||||
import Chart from 'chart.js';
|
||||
|
||||
import 'chartjs-chart-radial-gauge/build/Chart.RadialGauge.umd.min.js';
|
||||
|
||||
import ID from './Service/ID.js'
|
||||
class RadialGauge extends Component {
|
||||
|
||||
let RadialGauge = props => {
|
||||
componentDidMount(){
|
||||
|
||||
let porcentaje = Math.round(Math.random() * 100),
|
||||
porcentajeTexto = `${porcentaje} %`
|
||||
var ctx = document.getElementById('chart').getContext('2d');
|
||||
|
||||
let id = props.id ? props.id : ID()
|
||||
/*var gradientStroke = ctx.createLinearGradient(500, 0, 100, 0);
|
||||
gradientStroke.addColorStop(0, "#2A969E");
|
||||
gradientStroke.addColorStop(1, "#2A969E");*/
|
||||
//gradientStroke.addColorStop(2, "#f49080");
|
||||
|
||||
let [state, setState] = useState({
|
||||
id,
|
||||
chart: null,
|
||||
porcentaje,
|
||||
porcentajeTexto
|
||||
})
|
||||
var config
|
||||
|
||||
useEffect( () => {
|
||||
var randomScalingFactor = function() {
|
||||
return Math.round(Math.random() * 100);
|
||||
};
|
||||
|
||||
var ctx = document.getElementById(`${state.id}`).getContext('2d');
|
||||
|
||||
var config = {
|
||||
config = {
|
||||
type: 'radialGauge',
|
||||
data: {
|
||||
labels: props.config ? (props.config.data ? (props.config.data.labels || ["Porcentaje"]) : ["Porcentaje"]) : ["Porcentaje"],
|
||||
labels: this.props.config ? (this.props.config.data ? (this.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"
|
||||
data: this.props.config ? ((this.props.config.data) ? (this.props.config.data.datasets !== undefined ? [this.props.config.data.datasets.data] : [randomScalingFactor()]) : [randomScalingFactor()]) : [randomScalingFactor()],
|
||||
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"
|
||||
}
|
||||
]
|
||||
},
|
||||
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"
|
||||
display: this.props.config ? ((this.props.config.options) ? (this.props.config.options.title !== undefined ? this.props.config.options.title.display : false) : false) : false,
|
||||
text: this.props.config ? ((this.props.config.options) ? (((this.props.config.options.title) && (this.props.config.options.title.text)) !== undefined ? this.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 || {}) : {}) : {},
|
||||
responsive: this.props.config ? ((this.props.config.options) ? (this.props.config.options.responsive || true) : true) : true,
|
||||
legend: this.props.config ? ((this.props.config.options) ? (this.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,
|
||||
animateRotate: this.props.config ? ((this.props.config.options) ? (this.props.config.options.animation !== undefined ? this.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
|
||||
animateScale: this.props.config ? ((this.props.config.options) ? (this.props.config.options.animation !== undefined ? this.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,
|
||||
centerPercentage: this.props.config ? ((this.props.config.options) ? (this.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,
|
||||
rotation: this.props.config ? ((this.props.config.options) ? (this.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)',
|
||||
trackColor: this.props.config ? ((this.props.config.options) ? (this.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],
|
||||
domain: this.props.config ? ((this.props.config.options) ? (this.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,
|
||||
roundedCorners: this.props.config ? ((this.props.config.options) ? (this.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,
|
||||
displayText: this.props.config ? ((this.props.config.options) ? (((this.props.config.options.centerArea !== undefined) && (this.props.config.options.centerArea.displayText)) ? this.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,
|
||||
fontFamily: this.props.config ? ((this.props.config.options) ? (this.props.config.options.centerArea !== undefined ? this.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,
|
||||
fontColor: this.props.config ? ((this.props.config.options) ? (this.props.config.options.centerArea !== undefined ? this.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,
|
||||
fontSize: this.props.config ? ((this.props.config.options) ? (this.props.config.options.centerArea !== undefined ? this.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,
|
||||
padding: this.props.config ? ((this.props.config.options) ? (this.props.config.options.centerArea !== undefined ? this.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,
|
||||
backgroundImage: this.props.config ? ((this.props.config.options) ? (this.props.config.options.centerArea !== undefined ? this.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,
|
||||
backgroundColor: this.props.config ? ((this.props.config.options) ? (this.props.config.options.centerArea !== undefined ? this.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,
|
||||
text: this.props.config ? ((this.props.config.options) ? (this.props.config.options.centerArea !== undefined ? this.props.config.options.centerArea.text : null) : null) : null,
|
||||
}
|
||||
}
|
||||
};
|
||||
|
||||
setState({
|
||||
chart: new Chart(ctx, config)
|
||||
})
|
||||
|
||||
}, [props])
|
||||
new Chart(ctx, config);
|
||||
|
||||
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}`} />
|
||||
}
|
||||
|
||||
render() {
|
||||
return (
|
||||
<canvas id="chart" />
|
||||
)
|
||||
}
|
||||
}
|
||||
|
||||
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
|
||||
10
src/index.js
10
src/index.js
@ -1,9 +1,3 @@
|
||||
import RadialGauge from './RadialGauge.jsx';
|
||||
import Bar from './Bar.jsx';
|
||||
import Line from './Line.jsx';
|
||||
import RadialGaugue from './RadialGauge.jsx';
|
||||
|
||||
export { RadialGauge }
|
||||
export { Bar }
|
||||
export { Line }
|
||||
|
||||
export default { RadialGauge }
|
||||
export default { RadialGaugue }
|
||||
|
||||
Loading…
Reference in New Issue
Block a user