Data and layout changes are lost while the plot is initializing

Ouverte Adaptée aux débutants
#373 0 commentaires 0 réactions 0 personnes assignées Voir sur GitHub

Les mainteneurs répondent en général sous 1 jour

Personne n'a encore pris cette issue.

Évaluation

Difficulté
2/5
Temps estimé
1-3 heures
Accessibilité débutants
76/100
Type d'issue
Bug
Clarté
Clairement spécifiée
Activité
Active
Stack technique
angular, typescript
Domaine
frontend

Piste de recherche

Commencez par PlotlyComponent.ngDoCheck et le chemin d’initialisation qui appelle Plotly.newPlot ; l’issue signale le diff consommé et la mise à jour manquante tant que plotlyInstance est undefined. Suivez la résolution de l’initialisation et l’application des mises à jour, puis ajoutez des tests couvrant le cas où les données ou la mise en page changent avant la résolution de newPlot. L’objectif est que le graphique affiche les dernières entrées après l’initialisation sans nécessiter de changement supplémentaire.

Rédigé par le modèle d'indexation à partir du texte de l'issue.

Description

Description

PlotlyComponent drops [data] and [layout] changes that arrive before Plotly.newPlot resolves. The chart keeps showing the initial input until another change happens later.

The window is easy to hit with PlotlyViaCDNModule or PlotlyViaWindowModule, where newPlot waits for plotly.js to load, and with traces whose newPlot is asynchronous. A typical case is a chart that starts with [data]="[]" and receives data from an HTTP request that completes before plotly.js finishes loading.

Cause

ngDoCheck detects the change, which consumes the differ's diff, but only calls updatePlot() when plotlyInstance is set. During initialization plotlyInstance is still undefined, so the update is skipped. newPlot was already called with the old input, so the newer input is never drawn.

Steps to reproduce
  1. Load plotly.js through PlotlyViaCDNModule.
  2. Render <plotly-plot [data]="data"></plotly-plot> with data = [].
  3. Set data to a new array before the CDN script finishes loading (for example, from a fast HTTP response or a setTimeout(..., 0)).

Expected: the chart shows the new data.
Actual: the chart stays empty until data or layout changes again.

Affected versions

v20, v21, and master (same code in ngDoCheck).

Langage dominant
TypeScript
Étoiles
242
Forks
81
Merge moyen
23 h 52 min
PR mergées (30 j)
5

Préparer son environnement

Ce projet ne fournit ni conteneur de développement, ni Dockerfile, ni guide de contribution : l'installation est à votre charge. Commencez par son README, et consultez notre guide de la première contribution pour les étapes générales.

Par où commencer

  1. Lisez l'issue en entier, puis le guide de contribution du projet.
  2. Signalez en commentaire que vous la prenez — cela évite que deux personnes fassent le même travail.
  3. Forkez le dépôt et travaillez sur une branche.
  4. Ouvrez une pull request qui référence le numéro de l'issue.

Autres issues de plotly/angular-plotly.js

Toutes les issues de plotly/angular-plotly.js

Issues similaires

Plus d'issues TypeScript

Recevez les nouvelles issues par e-mail

Un résumé court des issues GitHub adaptées aux débutants.