Stats

Exiba estatísticas e dados em blocos organizados para dashboards e análises.

Importação

import { Stats } from 'asterui'

Exemplos

Stat Básico

Stat simples com título e valor.

</>

Total Page Views

89,400

import { Stats } from 'asterui'

function App() {
  return (
      <Stats className="shadow">
        <Stats.Stat title="Total Page Views" value="89,400" />
      </Stats>
    )
}

export default App

Com Descrição

Adicione descrição usando a prop desc.

</>

Downloads

31K

Jan 1st - Feb 1st

import { Stats } from 'asterui'

function App() {
  return (
      <Stats className="shadow">
        <Stats.Stat title="Downloads" value="31K" desc="Jan 1st - Feb 1st" />
      </Stats>
    )
}

export default App

Múltiplos Stats

Exiba múltiplos stats horizontalmente.

</>

Total Users

4,200

↗︎ 400 (22%)

New Users

1,200

↘︎ 90 (14%)

New Registers

4,200

↗︎ 400 (22%)

import { Stats } from 'asterui'

function App() {
  return (
      <Stats className="shadow">
        <Stats.Stat title="Total Users" value="4,200" desc="↗︎ 400 (22%)" />
        <Stats.Stat title="New Users" value="1,200" desc="↘︎ 90 (14%)" />
        <Stats.Stat title="New Registers" value="4,200" desc="↗︎ 400 (22%)" />
      </Stats>
    )
}

export default App

Com Ícones

Adicionando ícones usando a prop figure.

</>

Downloads

31K

Jan 1st - Feb 1st

New Users

4,200

↗︎ 400 (22%)

import { Stats } from 'asterui'
import { InformationCircleIcon, AdjustmentsVerticalIcon } from '@aster-ui/icons'

function App() {
  return (
      <Stats className="shadow">
        <Stats.Stat
          figure={<InformationCircleIcon size={32} />}
          title="Downloads"
          value="31K"
          desc="Jan 1st - Feb 1st"
        />
        <Stats.Stat
          figure={<AdjustmentsVerticalIcon size={32} />}
          title="New Users"
          value="4,200"
          desc="↗︎ 400 (22%)"
        />
      </Stats>
    )
}

export default App

Valores Coloridos

Usando className para valores coloridos.

</>

Account balance

$89,400

21% more than last month

Current balance

$12,721

12% less than last month

import { Stats } from 'asterui'

function App() {
  return (
      <Stats className="shadow">
        <Stats.Stat
          title="Account balance"
          value={<span className="text-primary">$89,400</span>}
          desc="21% more than last month"
        />
        <Stats.Stat
          title="Current balance"
          value={<span className="text-secondary">$12,721</span>}
          desc="12% less than last month"
        />
      </Stats>
    )
}

export default App

Layout Vertical

Empilhe stats verticalmente.

</>

Downloads

31K

Jan 1st - Feb 1st

New Users

4,200

↗︎ 400 (22%)

New Registers

1,200

↘︎ 90 (14%)

import { Stats } from 'asterui'

function App() {
  return (
      <Stats vertical className="shadow">
        <Stats.Stat title="Downloads" value="31K" desc="Jan 1st - Feb 1st" />
        <Stats.Stat title="New Users" value="4,200" desc="↗︎ 400 (22%)" />
        <Stats.Stat title="New Registers" value="1,200" desc="↘︎ 90 (14%)" />
      </Stats>
    )
}

export default App

Com Ações

Adicionando botões usando a prop actions.

</>

Account balance

$89,400

Add funds

import { Stats, Button } from 'asterui'

function App() {
  return (
      <Stats className="shadow">
        <Stats.Stat
          title="Account balance"
          value="$89,400"
          actions={
            <Button size="sm" color="primary">
              Add funds
            </Button>
          }
        />
      </Stats>
    )
}

export default App

API

Stats

Propriedade	Descrição	Tipo	Padrão
children	Itens stat a exibir	React.ReactNode	-
vertical	Empilhar stats verticalmente	boolean	false
className	Classes CSS adicionais	string	-
data-testid	ID de teste para testes	string	-

Stats.Stat

Propriedade	Descrição	Tipo	Padrão
title	Título do stat	React.ReactNode	-
value	Valor do stat	React.ReactNode	-
desc	Texto de descrição	React.ReactNode	-
figure	Figura de ícone ou imagem	React.ReactNode	-
actions	Botões ou elementos de ação	React.ReactNode	-
className	Classes CSS adicionais	string	-
data-testid	ID de teste para testes	string	-

Acessibilidade

• Estrutura de cabeçalho semântica para títulos de stat
• Valores podem incluir labels ARIA para contexto
• Figuras têm texto alt apropriado ao usar imagens
• Botões de ação são acessíveis por teclado