Metric Card

Card de métrica com valor, variação percentual e mini gráfico de área. Componente custom do SYSGO usado nos dashboards do Command Center e Consultant Portal.

import { MetricCard } from "@workspace/ui/components/metric-card";

<MetricCard
  title="Faturamento"
  value={42350}
  previousValue={38200}
  formatValue={(v) => `R$ ${v.toLocaleString("pt-BR")}`}
  chartData={data}
  chartColor="purple"
/>

Cores

MetricCard com diferentes cores de gráfico.

Faturamento

R$ 42.350↑ 11%

vs período anterior

Pedidos

95↑ 16%

vs período anterior

Todas as cores

Paleta completa: purple, orange, green, blue, brand.

Vendas

156↑ 16%

vs período anterior

Clientes

48↓ 8%

vs período anterior

Consultoras

32↑ 14%

vs período anterior

Mapa de cores

chartColor	Cor	Uso recomendado
`purple`	hsl(271, 91%, 65%)	Faturamento, receita
`orange`	hsl(24, 95%, 53%)	Pedidos, quantidade
`green`	hsl(142, 71%, 45%)	Vendas, conversão
`blue`	hsl(217, 91%, 60%)	Clientes, usuários
`brand`	#ff3d8d	Consultoras, brand metrics

API Reference

Prop	Type	Default	Descrição
`title`	`string`	—	Label descritiva da métrica
`value`	`number`	—	Valor atual
`previousValue`	`number`	undefined	Valor do período anterior (para cálculo de variação)
`formatValue`	`(v: number) => string`	toLocaleString('pt-BR')	Função de formatação do valor
`chartData`	`{ date: string; value: number }[]`	—	Dados para o mini gráfico de área
`chartColor`	`'purple' \| 'orange' \| 'green' \| 'blue' \| 'brand'`	'purple'	Cor do gráfico e gradiente
`comparisonLabel`	`string`	'vs período anterior'	Texto de comparação exibido abaixo do valor