plotly / plotly/react-plotly.js

`useResizeHandler` does not respond to container layout changes

Aperta
#380 7 commenti 0 reazioni 0 assegnatari Vedi su GitHub

Nessuno ha ancora preso questa issue.

enhancement P3 size: 1
Lingua principale
JavaScript
Stelle
1.1k
Fork
138
Merge medio
3g 2h
PR unite (30g)
4

Descrizione

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.

Guida per i contributori

Nessuna guida per i contributori indicizzata per questo repository

Come iniziare

  1. Leggi tutta la issue e poi la guida ai contributi del progetto.
  2. Commenta sulla issue per dire che te ne occupi tu — evita che due persone facciano lo stesso lavoro.
  3. Fai un fork del repository e lavora su un branch.
  4. Apri una pull request che faccia riferimento al numero della issue.

Direzione di ricerca

Inizia dall’implementazione di useResizeHandler e traccia il modo in cui attualmente si sottoscrive a window.resize. Controlla i test esistenti relativi alla gestione del ridimensionamento, quindi verifica che le modifiche all’elemento del plot renderizzato attivino il ridimensionamento, mentre il fallback di window.resize continui a funzionare. Il lavoro è completo quando le modifiche a un layout comprimibile ridimensionano il plot senza una chiamata manuale a Plotly.Plots.resize().

Scritto dal modello di indicizzazione a partire dal testo della issue.

Valutazione

Stack tecnologico
javascript, react
Ambito
data-visualization, frontend
Tipo di issue
Funzionalità
Difficoltà
3/5
Tempo stimato
1-2 giorni
Stato di attività
Attiva
Chiarezza
Abbastanza chiara
Idoneità per principianti
65/100

Ricevi le nuove issue nella tua casella

Un breve riepilogo di issue GitHub adatte ai principianti.