Como ele é
Lembra o painel de um carro: cada medidor é um arco de 240 graus com faixas verde, âmbar e vermelha, marcações numeradas e um ponteiro escuro preso no centro. A faixa do valor atual fica acesa e as outras, esmaecidas. Quando o painel entra na tela, o ponteiro sai do início da escala, passa um pouco do ponto e volta até parar, enquanto o número embaixo dele conta até a leitura. Abaixo de cada medidor vêm o nome do indicador, uma pílula de status com ícone, como um visto, um triângulo de alerta ou um octógono com X, e a legenda da meta.
Você pode estar procurando isto se pediu algo assim
- velocímetro para mostrar se a meta foi batida
- medidor com faixa verde, amarela e vermelha para o painel
- ponteiro que se mexe até o valor, tipo painel de carro
- mostrar ocupação e tempo de espera com status de alerta
- indicador de KPI redondo com ponteiro para o dashboard
- gráfico de meta em arco para o relatório de gestão
Também chamado de
- gauge chart
- velocímetro
- medidor radial
- speedometer chart
- dial gauge
- medidor de KPI
Quando usar
- Painéis de saúde e operação com indicadores que têm faixa segura e de alerta
- Metas de programas, vendas ou atendimento com limite de atenção
- Telas de monitoramento em que o status precisa ser lido de longe
- Relatórios que comparam poucos KPIs lado a lado
Quando evitar
- Muitos indicadores de uma vez, em que uma fileira de medidores ocupa espaço demais
- Valores sem faixa de referência, que um número simples resolve
- Sites de fundo escuro sem adaptar as cores, já que ponteiro e textos vêm em azul-marinho
Como pedir para a sua IA
Crie medidores radiais de KPI em SVG para o painel de operação, com zonas normal, atenção e crítico configuráveis, ponteiro com mola e contagem animada do valor em pt-BR. O status precisa ter ícone e rótulo além da cor, e quem prefere menos movimento deve ver o valor final direto.
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 Manômetro
Como configuro as faixas de Manômetro?
Cada item de Manômetro recebe value, label, min, max, unit, decimals, caption e zones, uma lista de faixas com o limite superior e o status ok, atencao ou critico. As cores das três faixas vêm das props okColor, warnColor e critColor, e sweep define a abertura do arco entre 150 e 300 graus.
O botão Simular nova leitura aparece no meu site?
Só se você quiser. O botão Simular nova leitura de Manômetro existe para a demonstração e some com showSimulate desligado. Em produção, basta atualizar o value de cada item: o ponteiro vai até a nova posição com a mola e o número conta a partir do valor anterior.
Manômetro é acessível?
Sim. Cada medidor de Manômetro usa role meter com valor, mínimo, máximo e um texto que inclui o status, e o status visível sempre traz ícone e rótulo, nunca só cor. Com a preferência de reduzir movimento, o ponteiro e o número vão direto ao valor final, sem animação.
