plotly / plotly/plotly.js

Chart overflows when URL changes

Aperta
#5,871 3 commenti 0 reazioni 0 assegnatari Vedi su GitHub

Nessuno ha ancora preso questa issue.

bug P3
Lingua principale
JavaScript
Stelle
18.3k
Fork
2k
Merge medio
2g 12h
PR unite (30g)
28

Descrizione

Hi all,

Firstly, thanks for the amazing product!
I'm using Plotly in a single page application, which means that the URL changes a lot. Some of these changes are made without changing the contents of the page, or at least without changing the charts rendered with Plotly.

However, Plotly uses the entire URL of the page to generate a clip-path attribute in order to deal with overflowing charts. When the URL changes, the clip path isn't valid any more, and the chart breaks. The interesting thing is, it wouldn't have been an issue if the chart had been configured without window.location.href.

Would it be possible to make this setting configurable? The only workarounds I see are to either reload every time the URL changes, or to change the base tag in the HTML <head>, which seems like it would invite a lot of other problems. If you see any others, I'd love to hear about them.

I tried have a reproducible example in Codepen, but I couldn't easily set a URL on their iframe. Instead, I just invalidate the clip-path to show what happens: https://codepen.io/rubenhelsloot/pen/eYWKQyx. The actual bug happens in Chrome, but not in Firefox. I'm pretty sure that's because Firefox doesn't re-evaluate the SVG when the URL changes, and Chrome does.

Thanks in advance!

Guida per i contributori

Apri la guida per i contributori

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 con la riproduzione CodePen collegata e conferma il malfunzionamento di clip-path dopo aver modificato l’URL della pagina in Chrome. Traccia il punto in cui Plotly genera il clip-path da window.location.href, quindi determina come si comporterebbe un’alternativa configurabile senza compromettere la gestione dell’overflow del grafico. Il lavoro è completato quando il grafico rimane valido dopo le modifiche all’URL e il comportamento è coperto da una verifica riproducibile.

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

Valutazione

Stack tecnologico
javascript
Ambito
data-visualization, frontend
Tipo di issue
Bug
Difficoltà
4/5
Tempo stimato
3-5 giorni
Stato di attività
Ferma
Chiarezza
Abbastanza chiara
Idoneità per principianti
35/100

Ricevi le nuove issue nella tua casella

Un breve riepilogo di issue GitHub adatte ai principianti.