TrendChip

Selo compacto que mostra a direção e o tamanho de uma variação.

O TrendChip é o selo de tendência dos KPIs: seta, valor e um contexto como "vs. anterior". Ele indica variação de uma métrica; para o estado de um objeto (Em trânsito, Atrasado), use Chip.

import { TrendChip } from "@rastreio-x/ui";

Padrão

trend controla a seta e a cor: up (sucesso), down (perigo) e neutral (alerta). O valor vai como filho, já formatado em pt-BR.

+3,3% -2,1% 0,0%

Variantes

soft (padrão), primary, secondary e tertiary.

soft +3,3% -2,1% 0,0%

primary +3,3% -2,1% 0,0%

secondary +3,3% -2,1% 0,0%

tertiary +3,3% -2,1% 0,0%

Tamanhos

sm (padrão), md e lg.

+3,3% +3,3% +3,3%

Prefixo e sufixo

TrendChip.Prefix e TrendChip.Suffix dão contexto. Mantenha o texto visível curto e leve o período completo em um sr-only.

+12 vs. anteriorMediana: 4 h 20 min

Em um KPI

Com NumberValue dentro de um Widget, como na tela de Créditos do Admin. Use neutral quando a mudança não é boa nem ruim por si.

Anatomia

TrendChip
├── TrendChip.Indicator
├── TrendChip.Prefix
└── TrendChip.Suffix

TrendChip.Indicator: a seta (troque por outro ícone se precisar).
TrendChip.Prefix e TrendChip.Suffix: texto antes e depois do valor.

Propriedades

TrendChip:

TrendChip
Prop	Tipo	Padrão	Descrição
`children`*	`React.ReactNode`	-	Conteúdo do componente.
`className`	`string`	-	Classes CSS aplicadas ao elemento.
`render`	`DOMRenderFunction<keyof React.JSX.IntrinsicElements, undefined>`	-	Troca o elemento DOM padrão por outro, mantendo o comportamento e as props do componente.
`size`	`'lg' \| 'md' \| 'sm'`	`"sm"`	Tamanho: `sm`, `md` ou `lg`.
`style`	`React.CSSProperties`	-	Estilos em linha aplicados ao elemento.
`trend`	`'neutral' \| 'up' \| 'down'`	`"up"`	Direção da tendência: define a seta e a cor (`up`, `down` ou `neutral`).
`variant`	`'primary' \| 'secondary' \| 'tertiary' \| 'soft'`	`"soft"`	Estilo: `primary`, `secondary`, `tertiary` ou `soft` (padrão).

TrendChip.Suffix:

TrendChip.Suffix
Prop	Tipo	Padrão	Descrição
`children`*	`React.ReactNode`	-	Conteúdo do componente.
`className`	`string`	-	Classes CSS aplicadas ao elemento.
`style`	`React.CSSProperties`	-	Estilos em linha aplicados ao elemento.

Animações

Sem movimento
indicativo

O TrendChip não anima. Ele troca de cor e de seta quando trend muda, sem transição própria.

Acessibilidade

Cor nunca é o único sinal: a seta e o sinal do valor (+ ou −) também indicam a direção.
O contexto visual abreviado ("vs. anterior") deve ter o período completo em sr-only.
Use o sinal de menos tipográfico (−) ou signDisplay no valor, não só uma seta.
O contraste dos tons soft de sucesso, perigo e alerta atende 4,5:1 sobre a superfície.

Boas práticas

Faça

Variação com período claro (“+12 vs. anterior”) e `neutral` quando não há bom ou ruim.

Evite

Usar `down` em vermelho para uma queda que é boa (menos Pedidos atrasados) sem avisar.

Formate o valor com NumberValue ou Intl.NumberFormat("pt-BR").
Um selo por métrica; não empilhe vários.
Para estados, prefira Chip.

Relacionados

NumberValue para o número do KPI.
Chip para estados.
Widget como contêiner do KPI.