# Manômetro

Medidores em arco com faixas verde, âmbar e vermelha, ponteiro que balança até parar e número contando.

> Manômetro é um componente exclusivo do THM Componentes que mostra indicadores em medidores tipo velocímetro: um arco com zonas normal, atenção e crítico, ponteiro com mola que passa do ponto e assenta, além do valor em contagem animada. O status vem com ícone e rótulo, não só cor. Serve a painéis de saúde, operação e metas.

- Categoria: Dados e visualização
- Origem: Exclusivo THM, criado pela THM Tecnologia Inteligente; o prompt traz o código-fonte completo
- Peso no carregamento: Leve: CSS ou JavaScript leve, sem custo perceptível
- Tecnologia: Vue 3, TypeScript
- Interação: Mouse, Toque, Teclado
- URL: https://vibecode.thmtecnologia.com/componentes/manometro/

## 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

```text
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.

## Componentes relacionados

- [Transferidor](https://vibecode.thmtecnologia.com/componentes/transferidor/): Um anel que se preenche com animação até a porcentagem da meta, com o número no centro.
- [Catraca](https://vibecode.thmtecnologia.com/componentes/catraca/): Números grandes que rolam como os tambores do hodômetro de um carro e param com um leve balanço.
- [Sismógrafo](https://vibecode.thmtecnologia.com/componentes/sismografo/): Gráfico de área com curva suave que recebe pontos novos a todo instante e desliza o eixo do tempo.
- [Algarismo](https://vibecode.thmtecnologia.com/componentes/algarismo/): Número que parte do zero e corre até o valor final quando aparece na tela, como um placar.
- [Pindorama](https://vibecode.thmtecnologia.com/componentes/pindorama/): As 27 UFs em hexágonos na posição do mapa real, com cor mais forte onde o número é maior.

---
THM Componentes: O THM Componentes é um catálogo de 268 componentes de interface para Vue 3 e Nuxt, 115 deles exclusivos, com demonstração ao vivo e um prompt pronto para Claude Code, Cursor e outros assistentes. Você escolhe o efeito, copia o prompt e a sua IA aplica no projeto. Acesso vitalício por R$ 497.