Se soluciona el problema de que existan varios RadialGauge en el mismo componente agregandoles un id único.

Se sube a version 1.0.10
Se sube a GitHub 1.0.10
Se sube a NPM 1.0.10
This commit is contained in:
Alejandro Lembke Barrientos 2019-12-05 23:40:15 -06:00
parent 5170fae311
commit 783d248f1e
4 changed files with 41 additions and 7 deletions

View File

@ -5,9 +5,13 @@ import { RadialGauge } from 'chartjs-2-react'
export default class App extends Component {
render () {
return (
<div style={{maxWidth: '600px', marginTop: '25px'}}>
<h3 style={{textAlign: 'center'}}>RadialGauge Component:</h3>
<RadialGauge />
<div>
<div style={{maxWidth: '600px', marginTop: '25px'}}>
<h3 style={{textAlign: 'center'}}>RadialGauge Component:</h3>
<RadialGauge />
</div>
</div>
)
}

View File

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

View File

@ -4,6 +4,8 @@ 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 {
constructor(props) {
@ -11,8 +13,11 @@ class RadialGauge extends Component {
let porcentaje = Math.round(Math.random() * 100),
porcentajeTexto = `${porcentaje} %`
let id = this.props.id ? this.props.id : ID()
this.state = {
id,
chart: null,
porcentaje,
porcentajeTexto
@ -22,7 +27,7 @@ class RadialGauge extends Component {
componentDidMount() {
var ctx = document.getElementById('chart').getContext('2d');
var ctx = document.getElementById(`${this.state.id}`).getContext('2d');
var config = {
type: 'radialGauge',
@ -110,10 +115,10 @@ class RadialGauge extends Component {
this.state.chart.update();
return <canvas id="chart" />
return <canvas id={`${this.state.id}`} />
} else {
return <canvas id="chart" />
return <canvas id={`${this.state.id}`} />
}
}
}

25
src/Service/ID.js Normal file
View File

@ -0,0 +1,25 @@
// 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