Totalizer

Tipo: Componente Angular

DesignersFigma Design System 2.0
Devs · HTML/CSSmds-styles Storybook com classes e exemplos
Devs · Angularmds-angular Storybook com inputs e outputs

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. ![image]((hosted image)) ![image]((hosted image))

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)

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

Para desenvolvedores

Tudo abaixo é lido do código (stories, SCSS e componentes Angular) a cada npm run docs:sync — se algo estiver diferente do que você vê no projeto, o código é quem manda.

HTML/CSS (mds-styles)

Exemplo

Story Vertical do Storybook:

<div class="mds-totalizer">
  <span class="mds-totalizer__container">
    <i data-lucide="" style="background: #408AFA26; color: #408AFA"></i>
    <span class="mds-totalizer__value">1.240</span>
  </span>
  <span class="mds-totalizer__label">Cargas pendentes</span>
  <span class="helper-text text-muted text-center d-block">+12% em relação a ontem</span>
</div>

Variações e opções

Opções do painel de controles do Storybook — escolha um valor lá para ver o resultado ao vivo. As classes CSS correspondentes estão na lista abaixo.

Opção	Valores	Padrão no exemplo
`value`	—	`1.240`
`helper`	—	`+12% em relação a ontem`
`icon`	—	`box-alt`
`color`	—	`408AFA`
`isVertical`	`true` · `false`	`true`
`variant`	`default` `primary` `secondary`	—
`size`	`sm` `md` `lg`	—

Classes CSS

Lidas do SCSS (src/scss) — só aparece aqui o que realmente existe.

Tipo	Classes
Bloco	`.mds-totalizer`
Elementos	`.mds-totalizer__container` `.mds-totalizer__icon` `.mds-totalizer__label` `.mds-totalizer__value`
Modificadores	`.mds-totalizer--lg` `.mds-totalizer--sm` `.mds-totalizer--xs`

Angular (mds-angular)

Seletor

mds-totalizer

O totalizer é o componente para exibir totalizadores em forma de indicadores.

Inputs

Input	Tipo	Padrão	Descrição
`variant`	`MdsTotalizerVariants`	`'brand-lighter'`	Variant do totalizer
`size`	`MdsSizes`	`'md'`	Tamanho do totalizer
`label`	`string`	`''`	Label do totalizer
`value`	`string \| number`	`''`	Valor do totalizer
`mode`	`MdsTotalizerModes`	`'totalizer'`	Modo da disposição do totalizer
`helper`	`string`	`''`	Texto de ajuda
`icon`	`MdsIconAlias \| undefined`	`undefined`	Icone
`iconColor`	`string \| undefined`	`undefined`	—
`iconType`	`'alias' \| 'svg'`	`'alias'`	Tipo do icone
`additionalClass`	`string`	`''`	Classe adicional
`className`	`string`	`''`	Classe CSS customizada adicionada ao host
`loading`	`boolean`	`false`	Exibe o loader

Slots

Conteúdo projetado com o atributo data-position:

data-position="value"
data-position="label"
data-position="helper"

Visão ao vivo

Totalizer — Figma (Design System 2.0) ↗

Componentes relacionados

Avatar