Totalizer
- Angular:
mds-totalizer - CSS/HTML (mds-styles): disponível
- Figma: ❌
- Tipo: Componente Angular
Definição Funcional
Seção intitulada “Definição Funcional”O Totalizer é um componente de visualização de dados utilizado para exibir métricas e indicadores de desempenho de forma destacada. Ele resume informações complexas em valores numéricos ou monetários, acompanhados de contexto descritivo e apoio visual. ) )
2. Anatomia e Diretrizes de Escrita
Seção intitulada “2. Anatomia e Diretrizes de Escrita”- Rótulo (Label): Define a métrica exibida. Use Caixa de Título para dar a importância de um título de seção.
- Exemplo: Total de Fretes, Veículos em Pátio.
- Valor (Value): O dado principal. Deve ser formatado de acordo com sua natureza (Moeda, Porcentagem ou Inteiro).
- Exemplo: R$ 45.200,50, 88%, 124.
- Descrição de Apoio: Texto secundário que fornece contexto ou comparativos. Use Caixa de Sentença.
- Exemplo: Aumento de 10% em relação a ontem ou Média de 4 horas por carga.
- Ícone ou Avatar de Apoio: Elemento visual que reforça o tema da métrica (ex: ícone de cifrão para financeiro ou avatar do motorista para performance individual).
Exemplos de Escrita (Métricas Logísticas)
Seção intitulada “Exemplos de Escrita (Métricas Logísticas)”| Contexto | Rótulo (Label) | Valor (Value) | Descrição de Apoio |
|---|---|---|---|
| Operacional | Entregas Pendentes | 42 | Aguardando liberação fiscal |
| Financeiro | Faturamento Mensal | R$ 1.2M | 5% acima da meta projetada |
| Performance | Taxa de Ocupação | 94% | Referente à frota própria |
| Individual | Performance | 4.8 | Nota média do motorista |