plotly / plotly/react-plotly.js

`useResizeHandler` does not respond to container layout changes

Ouverte
#380 7 commentaires 0 réactions 0 personnes assignées Voir sur GitHub

Personne n'a encore pris cette issue.

enhancement P3 size: 1
Langage dominant
JavaScript
Étoiles
1.1k
Forks
138
Merge moyen
3 j 2 h
PR mergées (30 j)
4

Description

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.

Guide de contribution

Aucun guide de contribution indexé pour ce dépôt

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.

Piste de recherche

Commencez par l’implémentation de useResizeHandler et suivez la manière dont elle s’abonne actuellement à window.resize. Examinez les tests existants concernant la gestion du redimensionnement, puis vérifiez que les modifications apportées à l’élément de plot rendu déclenchent le redimensionnement, tout en maintenant le fonctionnement du fallback de window.resize. Le travail est terminé lorsque les modifications d’un layout repliable redimensionnent le plot sans appel manuel à Plotly.Plots.resize().

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

Évaluation

Stack technique
javascript, react
Domaine
data-visualization, frontend
Type d'issue
Fonctionnalité
Difficulté
3/5
Temps estimé
1-2 jours
Activité
Active
Clarté
Plutôt claire
Accessibilité débutants
65/100

Recevez les nouvelles issues par e-mail

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