Data and layout changes are lost while the plot is initializing

Offen Anfängerfreundlich
  • Stimmt etwas nicht?
#373 0 Kommentare 0 Reaktionen 0 zugewiesene Personen Auf GitHub ansehen

Maintainer antworten meist innerhalb von 1 Tag

Dieses Issue hat noch niemand übernommen.

Bewertung

Schwierigkeit
2/5
Geschätzter Aufwand
1-3 Stunden
Anfängerfreundlichkeit
76/100
Issue-Typ
Bug
Klarheit
Klar beschrieben
Aktivitätsstatus
Aktiv
Tech-Stack
angular, typescript
Bereich
frontend

Rechercherichtung

Beginne mit PlotlyComponent.ngDoCheck und dem Initialisierungspfad, der Plotly.newPlot aufruft; das Issue beschreibt den verbrauchten Diff und das ausbleibende Update, während plotlyInstance undefined ist. Verfolge, wie die Initialisierung abgeschlossen wird und wie Updates angewendet werden, und ergänze Tests dafür, dass sich Daten oder Layout ändern, bevor newPlot abgeschlossen ist. Ziel ist, dass das Diagramm nach der Initialisierung die neuesten Eingaben anzeigt, ohne dass eine weitere Änderung nötig ist.

Vom Indexierungsmodell aus dem Issue-Text verfasst.

Beschreibung

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).

Vorherrschende Sprache
TypeScript
Sterne
242
Forks
81
Ø Merge
23 Std. 52 Min.
Gemergte PRs (30 T.)
5

Entwicklungsumgebung

Dieses Projekt bietet weder Dev-Container noch Dockerfile noch Beitragsleitfaden – die Einrichtung liegt bei Ihnen. Beginnen Sie mit der README; die allgemeinen Schritte stehen in unserem Leitfaden für den ersten Beitrag.

Erste Schritte

  1. Lesen Sie das ganze Issue und danach den Beitragsleitfaden des Projekts.
  2. Schreiben Sie ins Issue, dass Sie es übernehmen — das erspart doppelte Arbeit.
  3. Forken Sie das Repository und arbeiten Sie in einem Branch.
  4. Öffnen Sie einen Pull Request, der die Issue-Nummer nennt.

Mehr aus plotly/angular-plotly.js

Alle Issues in plotly/angular-plotly.js

Ähnliche Issues

Weitere Issues zu TypeScript

Neue Issues direkt in Ihr Postfach

Eine kurze Übersicht über anfängerfreundliche GitHub-Issues.