[BUG]: Mixed bar orientations hide one bar on initial render, but restyle renders correctly
Nadie ha tomado este issue todavía.
- Lenguaje dominante
- Python
- Estrellas
- 18.8k
- Forks
- 2.8k
- Merge medio
- 16 h 26 min
- PR fusionados (30 d)
- 21
Descripción
Description
A figure with two go.Bar traces renders differently depending on when the second
trace is changed from horizontal to vertical.
If fig.data[1].orientation = "v" is set before the first render, one red vertical
bar is missing or clipped. If the same base figure is rendered first and the same
orientation value is applied later with Plotly.restyle, all three red bars are
visible.
Screenshots/Video
Steps to reproduce
import io
import plotly
import plotly.graph_objects as go
import plotly.io as pio
from PIL import Image, ImageChops
from playwright.sync_api import sync_playwright
print(f"Plotly version: {plotly.__version__}")
fig = go.Figure(
[
go.Bar(name="a", orientation="h", x=[1, 3, 2], y=[0, 1, 2]),
go.Bar(name="b", orientation="h", x=[3, 2, 1], y=[0, 1, 2]),
]
)
fig.update_layout(xaxis_title="value", yaxis_title="index", legend_title_text="variable")
# plot1.png: set orientation before the first render.
fig.data[1].orientation = "v"
assert fig.data[1].orientation == "v"
html1 = pio.to_html(fig, full_html=True, include_plotlyjs="cdn")
# plot2.png: render first, then apply the same value with Plotly.restyle.
fig.data[1].orientation = "h"
html2 = pio.to_html(fig, full_html=True, include_plotlyjs="cdn")
html2 = html2.replace(
"</body>",
"""
<script>
window.addEventListener("DOMContentLoaded", () => {
const plotEl = document.getElementsByClassName("plotly-graph-div")[0];
setTimeout(() => {
Plotly.restyle(plotEl, {"orientation": "v"}, [1]);
}, 1000);
});
</script>
</body>""",
)
with sync_playwright() as playwright:
browser = playwright.chromium.launch(
headless=True,
args=["--no-sandbox", "--disable-dev-shm-usage", "--disable-gpu"],
)
page = browser.new_page(viewport={"width": 1200, "height": 800})
page.set_content(html1)
page.wait_for_timeout(1500)
img1 = page.screenshot(path="plot1.png")
page.set_content(html2)
page.wait_for_timeout(2000)
img2 = page.screenshot(path="plot2.png")
browser.close()
diff = ImageChops.difference(
Image.open(io.BytesIO(img1)).convert("RGB"),
Image.open(io.BytesIO(img2)).convert("RGB"),
)
assert diff.getbbox() is not None, "Screenshots are unexpectedly identical."
print("Saved plot1.png and plot2.png")
```### Notes
_Add info here that doesn't fit in the other sections._
Guía de contribución
Primeros pasos
- Lee el issue completo y luego la guía de contribución del proyecto.
- Comenta en el issue que vas a ocuparte — evita que dos personas hagan lo mismo.
- Haz un fork del repositorio y trabaja en una rama.
- Abre un pull request que haga referencia al número del issue.
Línea de trabajo
Ejecuta la reproducción proporcionada en Python y Playwright y compara la captura de pantalla del renderizado inicial con el resultado de Plotly.restyle. Traza la ruta de renderizado de las barras para una combinación de orientaciones horizontales y verticales; el trabajo estará terminado cuando ambos renderizados muestren las tres barras rojas sin recortes ni diferencias causadas por el momento del renderizado.
Escrito por el modelo de indexación a partir del texto del issue.
Evaluación
- Stack tecnológico
- javascript, playwright, python
- Área
- data-visualization, frontend
- Tipo de issue
- Error
- Dificultad
- 4/5
- Tiempo estimado
- 3-5 días
- Estado de actividad
- Tranquilo
- Claridad
- Bastante claro
- Aptitud para principiantes
- 45/100