Graphiques multiples de même type dans ChartJS2 ReactJS - Buggy Tooltips

Question

Lorsque j'essaie de rendre deux fois un camembert dans le même composant, mes info-bulles personnalisées sont buggées.

A l'intérieur de mon composant conteneur, je suis rendu deux tableaux qui ressemblent à ceci ...

<PieChart key={1} brand={this.state.brand} data={this.state.data.dshCredit} labels={this.state.payBillsLabels} title={'Pay Bills'} toggleTotalPastDue={this.toggleTotalPastDue} /> 

<PieChart key={2} brand={this.state.brand} data={this.state.data.dshOrder} labels={this.state.orderStatusLabels} isRendering={this.state.isRendering} title={'Order Status'} orderPeriod={this.state.orderPeriod} dataType={this.state.orderStatus} /> 

<PieChart /> est un composant qui prend soin de créer dynamiquement infobulles personnalisées, puis les afficher en même temps que les données en utilisant le composant ChartJS2 Pie Chart.

componentWillMount() { 
    var that = this; 

    // Use custom tooltips 
    Chart.pluginService.register({ 
    beforeRender: function (chart) { 
     if (chart.config.options.showAllTooltips) { 
     chart.pluginTooltips = []; 
     chart.config.data.datasets.forEach(function (dataset, i) { 
      chart.getDatasetMeta(i).data.forEach(function (sector, j) { 
      chart.pluginTooltips.push(new Chart.Tooltip({ 
       _chart: chart.chart, 
       _chartInstance: chart, 
       _data: chart.data, 
       _options: chart.options.tooltips, 
       _active: [sector] 
      }, chart)); 
      }); 
     }); 

     // turn off normal tooltips 
     chart.options.tooltips.enabled = false; 
     } 
    }, afterDraw: function (chart, easing) { 
     if (chart.config.options.showAllTooltips) { 
     chart.options.tooltips.enabled = true; 
     Chart.helpers.each(chart.pluginTooltips, function (tooltip) { 
      tooltip._options.callbacks.label = (tooltip, data) => { 
      return that.configureTooltipLabel(tooltip, data); 
      } 
      tooltip.initialize(); 
      tooltip._options.position = 'outer'; 
      tooltip.update(); 
      tooltip.pivot(); 
      tooltip.transition(easing).draw(); 
     }); 
     chart.options.tooltips.enabled = false; 
     } 
    } 
    }); 
} 

configureTooltipLabel = (tooltip, data) => { 
    var originalLabel = data.labels[tooltip.index] + ': ', 
     originalData = data.datasets[0].data[tooltip.index]; 

    if (this.state.dataType && data.options.title.text == 'Order Status') { 
    switch(this.state.dataType) { 
     case 'units': 
     return originalLabel + originalData + ' Units' 
     break; 
     case 'dollar': 
     return originalLabel + '$' + originalData 
     break; 
     case 'total': 
     return originalLabel + originalData + ' Orders' 
    } 
    } else { 
    return originalLabel + originalData; 
    } 
} 

render() { 
    return (
     <Pie key={this.state.options.title.text} ref='chart' data={this.state.data} options={this.state.options} /> 
    ); 
} 

Si dans le composant conteneur je n'utilise que <PieChart /> une fois, tout rend correctement. Quand j'essaie de l'utiliser une seconde fois, c'est là que les infobulles sont buggées. Le premier camembert semble afficher correctement, mais le deuxième semble avoir les infobulles du premier et du second.

Voici un exemple de capture d'écran de l'aspect visuel. Vous pouvez voir la deuxième info-bulle derrière l'original:

Il semble presque que tout ce qui modifie le graphique à secteurs original modifie également le second. Y a-t-il un moyen de s'assurer que chaque modification de l'instance de Pie est indépendante de l'autre?

Answer 1

Pour quelqu'un d'autre ayant ce problème, l'erreur était assez bête. Étant donné que la configuration de l'info-bulle personnalisée est en cours sur la classe { Chart } et non sur chaque instance individuelle { Pie }, vous devez vous assurer que vous la gérez en tant que configuration globale et non à l'intérieur du composant réutilisable. Si vous effectuez cette configuration dans un composant réutilisable, chaque fois que vous instanciez le composant, la configuration s'exécute et se déclenche le nombre de fois que vous utilisez ce composant. Cela est dû au fait que le graphique à secteurs (et d'autres composants ChartJS) étend la classe { Chart } dans la bibliothèque react-chartjs-2.