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:
parent
5170fae311
commit
783d248f1e
@ -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>
|
||||
)
|
||||
}
|
||||
|
@ -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",
|
||||
|
@ -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
25
src/Service/ID.js
Normal 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
|
Loading…
Reference in New Issue
Block a user