Data and layout changes are lost while the plot is initializing

Aberta Para iniciantes
  • Algo errado?
#373 0 comentários 0 reações 0 responsáveis Ver no GitHub

Mantenedores costumam responder em até 1 dia

Ninguém assumiu esta issue ainda.

Avaliação

Dificuldade
2/5
Tempo estimado
1-3 horas
Facilidade para iniciantes
76/100
Tipo de issue
Bug
Clareza
Claramente especificada
Status de atividade
Ativa
Stack de tecnologia
angular, typescript
Domínio
frontend

Direção de pesquisa

Comece por PlotlyComponent.ngDoCheck e pelo caminho de inicialização que chama Plotly.newPlot; a issue identifica o diff consumido e a atualização ausente enquanto plotlyInstance está undefined. Rastreie como a inicialização é resolvida e como as atualizações são aplicadas; em seguida, adicione testes para os casos em que os dados ou o layout mudam antes de newPlot ser resolvido. O objetivo é que o gráfico exiba as entradas mais recentes após a inicialização, sem precisar de outra alteração.

Escrita pelo modelo de indexação a partir do texto da issue.

Descrição

Description

PlotlyComponent drops [data] and [layout] changes that arrive before Plotly.newPlot resolves. The chart keeps showing the initial input until another change happens later.

The window is easy to hit with PlotlyViaCDNModule or PlotlyViaWindowModule, where newPlot waits for plotly.js to load, and with traces whose newPlot is asynchronous. A typical case is a chart that starts with [data]="[]" and receives data from an HTTP request that completes before plotly.js finishes loading.

Cause

ngDoCheck detects the change, which consumes the differ's diff, but only calls updatePlot() when plotlyInstance is set. During initialization plotlyInstance is still undefined, so the update is skipped. newPlot was already called with the old input, so the newer input is never drawn.

Steps to reproduce
  1. Load plotly.js through PlotlyViaCDNModule.
  2. Render <plotly-plot [data]="data"></plotly-plot> with data = [].
  3. Set data to a new array before the CDN script finishes loading (for example, from a fast HTTP response or a setTimeout(..., 0)).

Expected: the chart shows the new data.
Actual: the chart stays empty until data or layout changes again.

Affected versions

v20, v21, and master (same code in ngDoCheck).

Linguagem predominante
TypeScript
Estrelas
242
Forks
81
Merge médio
23h 52min
PRs com merge (30d)
5

Preparar o ambiente

Este projeto não oferece contêiner de desenvolvimento, Dockerfile nem guia de contribuição, então a configuração fica por sua conta: comece pelo README e veja nosso guia da primeira contribuição para os passos gerais.

Primeiros passos

  1. Leia a issue inteira e depois o guia de contribuição do projeto.
  2. Comente na issue dizendo que vai assumir — evita que duas pessoas façam o mesmo trabalho.
  3. Faça um fork do repositório e trabalhe em uma branch.
  4. Abra um pull request que referencie o número da issue.

Mais de plotly/angular-plotly.js

Todas as issues de plotly/angular-plotly.js

Issues semelhantes

Mais issues de TypeScript

Receba novas issues na sua caixa de entrada

Um resumo curto de issues do GitHub para quem está começando.