KpiRow

KpiRow mostra uma linha de indicadores: um rótulo, um valor já formatado e, se você passar, a variação em porcentagem. A variação aparece como texto com seta, sinal e período de comparação, então a leitura não depende de cor.

Quando usar

Use para um resumo de poucos números no topo de uma tela, como as visitas e os cliques de um período. Cada item já chega formatado: KpiRow não formata números. Para uma série no tempo, use Chart.

Regras de exibição:

• A variação é arredondada para uma casa decimal antes de ser mostrada. Uma mudança que arredonda para zero aparece como «→» e «0%», nunca como «↑ 0%» (ui/panel/kpi-row.ts:34).
• O sinal é texto: «+» para alta, «−» para queda, nada para zero (ui/panel/kpi-row.ts:42).
• Sem delta, o item mostra só o valor.
• Com 2, 3 ou 4 itens a linha se divide em colunas iguais; com mais de quatro, usa quatro colunas (ui/panel/kpi-row.ts:55).
• Uma lista vazia não gera nada (ui/panel/kpi-row.ts:63).

O grupo tem o nome «Indicadores» por padrão (ui/panel/kpi-row.ts:22), que é o nome acessível da região. A comparação diz «ao mês anterior» por padrão (ui/panel/kpi-row.ts:23). Você troca os dois com title e comparedTo.

Onde aparece no painel

O módulo Métricas (modules/metricas/module.ts:16) põe o KpiRow no widget «Indicadores do site» (modules/metricas/widgets.ts:43 a :52), que aparece na Visão geral (/painel) quando o módulo está ativo e a pessoa tem permissão para vê-lo. O bloco de três indicadores mostra visitas, cliques no WhatsApp e a parcela das visitas que clicaram, comparando os últimos 30 dias com os 30 anteriores (modules/metricas/widgets.ts:13 a :23).

Variantes e propriedades

KpiRow

Pasta: ui/panel

Variantes

Id	Variante	Tom
kpi-row-visao-geral-light	visao-geral	light

Propriedades

Propriedade	Tipo	Obrigatória	Descrição
items	readonly KpiItem[]	Sim	—
title	string	Não	Accessible name of the group. Default `Indicadores`.
comparedTo	string	Não	Comparison period after "em relação ". Default `ao mês anterior`.

Captura

A primeira variante do catálogo, o resumo do mês com quatro indicadores (um deles sem variação, em 0%), em 360 px:

Em 1280 px a coluna de atividade da galeria é estreita, e o valor «12.480» quebra em duas linhas. A captura de 1280 px fica no repositório (src/assets/shots/secao-kpi-row-w1280.png), mas a página mostra só a de 360 px. O defeito está na galeria, não no componente.

Origem

• ui/panel/kpi-row.ts: KpiRow, KpiItem e KpiRowProps.
• ui/panel/kpi-row.gallery.ts: as variantes do catálogo.
• modules/metricas/widgets.ts: o uso no módulo Métricas.