Stats

Muestra estadísticas y datos en bloques organizados para paneles de control y analíticas.

Importar

import { Stats } from 'asterui'

Ejemplos

Stat básico

Stat simple con título y 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

Con descripción

Agrega descripción usando la 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últiples stats

Muestra múltiples 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

Con iconos

Agregando iconos usando la 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 coloreados

Usando className para valores coloreados.

</>

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

Diseño vertical

Apila 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

Con acciones

Agregando botones usando la 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

Propiedad	Descripción	Tipo	Predeterminado
children	Elementos stat a mostrar	React.ReactNode	-
vertical	Apilar stats verticalmente	boolean	false
className	Clases CSS adicionales	string	-
data-testid	ID de prueba para pruebas	string	-

Stats.Stat

Propiedad	Descripción	Tipo	Predeterminado
title	Título del stat	React.ReactNode	-
value	Valor del stat	React.ReactNode	-
desc	Texto de descripción	React.ReactNode	-
figure	Figura de icono o imagen	React.ReactNode	-
actions	Botones o elementos de acción	React.ReactNode	-
className	Clases CSS adicionales	string	-
data-testid	ID de prueba para pruebas	string	-

Accesibilidad

• Estructura de encabezado semántico para títulos de stat
• Los valores pueden incluir etiquetas ARIA para contexto
• Las figuras tienen texto alt apropiado cuando se usan imágenes
• Los botones de acción son accesibles por teclado