aleleba/chartjs-2-react
1
0
Fork 0
Code Issues Pull Requests 23 Actions Packages Projects Releases Wiki Activity

Se mejora RadialGauge para que al actualizar la data se actualice RadialGauge.

Browse Source 
Se sube a version 1.0.9
Se sube a GitHub 1.0.9
Se sube a NPM 1.0.9
This commit is contained in:
Alejandro Lembke Barrientos 2019-12-05 19:30:28 -06:00
parent c8306d2382
commit 5170fae311
2 changed files with 40 additions and 21 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

2
package.json
View File

@ -1,6 +1,6 @@
{
"name": "chartjs-2-react",
"version": "1.0.8",
"version": "1.0.9",
"description": "Libreria de chart.js para React.js",
"author": "aleleba",
"license": "MIT",

59
src/RadialGauge.jsx
View File

@ -6,28 +6,31 @@ import 'chartjs-chart-radial-gauge/build/Chart.RadialGauge.umd.min.js';
class RadialGauge extends Component {
componentDidMount(){
constructor(props) {
super(props)
let porcentaje = Math.round(Math.random() * 100),
porcentajeTexto = `${porcentaje} %`
this.state = {
chart: null,
porcentaje,
porcentajeTexto
}
}
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
var randomScalingFactor = function() {
return Math.round(Math.random() * 100);
};
config = {
var config = {
type: 'radialGauge',
data: {
labels: this.props.config ? (this.props.config.data ? (this.props.config.data.labels || ["Porcentaje"]) : ["Porcentaje"]) : ["Porcentaje"],
datasets: [
{
data: this.props.config ? ((this.props.config.data) ? (this.props.config.data.datasets !== undefined ? [this.props.config.data.datasets.data] : [randomScalingFactor()]) : [randomScalingFactor()]) : [randomScalingFactor()],
data: this.props.config ? ((this.props.config.data) ? (this.props.config.data.datasets !== undefined ? [this.props.config.data.datasets.data] : [this.state.porcentaje]) : [this.state.porcentaje]) : [this.state.porcentaje],
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"
@ -87,15 +90,31 @@ class RadialGauge extends Component {
}
};
new Chart(ctx, config);
this.setState({
chart: new Chart(ctx, config)
})
}
render() {
return (
<canvas id="chart" />
)
if (this.state.chart !== null) {
this.props.config ? ((this.props.config.data) ? (this.props.config.data.datasets !== undefined ? (this.state.chart.data.datasets[0].data[0] = this.props.config.data.datasets.data) : [this.state.porcentaje]) : [this.state.porcentaje]) : [this.state.porcentaje]
//this.state.chart.data.datasets[0].data[0] = this.props.config.data.datasets.data)
this.props.config ? ((this.props.config.options) ? (this.props.config.options.centerArea !== undefined ? (this.state.chart.options.centerArea.text = this.props.config.options.centerArea.text) : null) : null) : null
//this.state.chart.options.centerArea.text = this.props.config.options.centerArea.text
this.state.chart.update();
return <canvas id="chart" />
} else {
return <canvas id="chart" />
}
}
}