plotly / plotly/react-plotly.js

`useResizeHandler` does not respond to container layout changes

Offen
#380 7 Kommentare 0 Reaktionen 0 zugewiesene Personen Auf GitHub ansehen

Dieses Issue hat noch niemand übernommen.

enhancement P3 size: 1
Vorherrschende Sprache
JavaScript
Sterne
1.1k
Forks
138
Ø Merge
3 T. 2 Std.
Gemergte PRs (30 T.)
4

Beschreibung

Currently, useResizeHandler only responds to window.resize events.

This works when the browser viewport changes, but it does not cover layout changes that resize the plot without resizing the window.

For example, if a page contains a collapsible sidebar and a responsive plot in the same page, toggling the sidebar changes the space available to the plot, but no window.resize event is fired. The plot therefore keeps its previous size until Plotly.Plots.resize() is called manually.

Would it make sense for useResizeHandler to react to changes in the rendered plot element's size instead of only listening to window.resize?

One possible approach would be to use ResizeObserver when available, while keeping the existing window.resize listener as a fallback.

Beitragsleitfaden

Für dieses Repository ist kein Beitragsleitfaden indexiert

Erste Schritte

  1. Lies das ganze Issue und danach den Beitragsleitfaden des Projekts.
  2. Schreib ins Issue, dass du es übernimmst — das erspart doppelte Arbeit.
  3. Forke das Repository und arbeite in einem Branch.
  4. Öffne einen Pull Request, der die Issue-Nummer nennt.

Rechercherichtung

Beginne bei der useResizeHandler-Implementierung und verfolge, wie sie derzeit window.resize abonniert. Prüfe die vorhandenen Tests zur Größenanpassung und stelle anschließend sicher, dass Änderungen am gerenderten Plot-Element eine Größenanpassung auslösen, während der Fallback für die Größenanpassung bei window.resize weiterhin funktioniert. Erledigt ist die Aufgabe, wenn Änderungen an einem einklappbaren Layout den Plot ohne einen manuellen Aufruf von Plotly.Plots.resize() in der Größe anpassen.

Vom Indexierungsmodell aus dem Issue-Text verfasst.

Bewertung

Tech-Stack
javascript, react
Bereich
data-visualization, frontend
Issue-Typ
Feature
Schwierigkeit
3/5
Geschätzter Aufwand
1-2 Tage
Aktivitätsstatus
Aktiv
Klarheit
Größtenteils klar
Anfängerfreundlichkeit
65/100

Neue Issues direkt in Ihr Postfach

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