Stat e StatCard

Dados

Números de acompanhamento. Stat é o número simples com rótulo e nota, para fileiras de indicadores. StatCard traz ícone, mini-gráfico (Sparkline) e a variação contra o período anterior; o destaque em roxo serve à métrica que abre a fileira.

Substitui no Brain:fp-stat escrito à mãoMetricCard (indicadores)partners MetricCard

Stat

Perguntas
1.284
nos últimos 7 dias
Taxa de conversão
35,0%
no mês
Aprovados
212
Testes falhando
3
última rodada em 13/10
Perguntas
1.284
nos últimos 7 dias
Taxa de conversão
35,0%
no mês
Aprovados
212
Testes falhando
3
última rodada em 13/10
import { Stat } from "@paytime/ui";

export default function Example() {
  return (
    <div className="grid grid-cols-2 gap-3 xl:grid-cols-4">
      <Stat label="Perguntas" value="1.284" footnote="nos últimos 7 dias" />
      <Stat label="Taxa de conversão" value="35,0%" tone="brand" footnote="no mês" />
      <Stat label="Aprovados" value="212" tone="success" />
      <Stat label="Testes falhando" value="3" tone="error" footnote="última rodada em 13/10" />
    </div>
  );
}

StatCard

TPV do mês
R$ 4,87 mi
+12.9%vs. período anterior
Pessoas ativas
128
+4%vs. período anterior
Tarefas concluídas
342
-3%vs. período anterior
Atrasadas
9
sem dado do período anterior
TPV do mês
R$ 4,87 mi
+12.9%vs. período anterior
Pessoas ativas
128
+4%vs. período anterior
Tarefas concluídas
342
-3%vs. período anterior
Atrasadas
9
sem dado do período anterior
import { StatCard } from "@paytime/ui";
import { CircleCheck, TrendingUp, TriangleAlert, Users } from "lucide-react";

export default function Example() {
  return (
    <div className="grid gap-3 md:grid-cols-2">
      <StatCard emphasis label="TPV do mês" value="R$ 4,87 mi" icon={<TrendingUp />} series={[28, 31, 29, 34, 36, 41, 48]} delta={12.9} />
      <StatCard label="Pessoas ativas" value="128" icon={<Users />} series={[12, 18, 15, 22, 19, 27, 31]} delta={4} />
      <StatCard label="Tarefas concluídas" value="342" icon={<CircleCheck />} iconTone="success" delta={-3} />
      <StatCard label="Atrasadas" value="9" icon={<TriangleAlert />} iconTone="warning" delta={null} deltaLabel="sem dado do período anterior" />
    </div>
  );
}