Como ele é
Parece o monitor de uma sala de operações. Duas curvas, uma índigo e outra ciano, correm sobre uma grade clara, com um degradê suave por baixo. Ao entrar na tela, as linhas se desenham da esquerda para a direita. A cada 1,5 segundo chega um ponto novo: o gráfico desliza para a esquerda, a escala se ajusta suavemente e um halo pulsa no ponto mais recente. Ao lado do título, um selo Ao vivo tem um ponto pulsante; a legenda mostra o valor atual de cada série. Com o mouse ou o dedo, uma linha vertical marca o instante e um cartão branco mostra horário e valores.
Você pode estar procurando isto se pediu algo assim
- gráfico que vai se atualizando sozinho em tempo real
- mostrar quantos usuários estão conectados agora no painel
- linha que anda para o lado conforme chegam dados novos
- gráfico de monitoramento igual tela de sala de operações
- gráfico de área bonito com curva suave para o meu dashboard
- acompanhar os acessos do site minuto a minuto
Também chamado de
- gráfico em tempo real
- real-time chart
- streaming chart
- gráfico de área
- live line chart
- gráfico de monitoramento
Quando usar
- Painel de monitoramento de plataformas, servidores ou filas
- Central de atendimento que acompanha chamados ou conversas em andamento
- Página de status ou de métricas públicas com acessos em tempo real
- Gráfico estático de séries diárias ou mensais, com o modo ao vivo desligado
Quando evitar
- Mais de duas séries no mesmo gráfico, já que o componente desenha no máximo duas
- Páginas de leitura em que dados se mexendo o tempo todo tiram a atenção do texto
Como pedir para a sua IA
Crie um gráfico de área ao vivo em SVG para o painel de monitoramento, com curva monotônica, um ponto novo a cada poucos segundos vindo da minha API e eixo que desliza com suavidade. Quero crosshair com tooltip em pt-BR, pausa fora da tela e uma versão sem animação para movimento reduzido.
Com o THM Componentes, você cola o prompt completo do catálogo, que já traz o código-fonte deste componente, e a IA reproduz este efeito exato em vez de improvisar.
Perguntas sobre Sismógrafo
Como ligo dados reais a Sismógrafo?
Passe na prop feed uma função que recebe os últimos valores e devolve os novos, inclusive de forma assíncrona; Sismógrafo chama essa função a cada intervalo. Também dá para empurrar pontos pelo método push, via ref, ou desligar o modo ao vivo e passar séries com valores e datas.
Sismógrafo pesa no navegador?
Pouco. Sismógrafo usa SVG sem dependências, tem peso Leve no THM Componentes e só anima enquanto há algo mudando. Fora da tela, o componente para de pedir pontos novos e de redesenhar, e volta quando a pessoa rola até lá de novo.
Sismógrafo respeita quem prefere menos movimento?
Respeita. Com a preferência de reduzir movimento, Sismógrafo mostra o gráfico já desenhado, os pontos novos entram sem o deslizamento do eixo, a escala muda sem transição, o ponto do selo para de pulsar e o halo do último ponto some. Os dados continuam atualizando normalmente.
