Statistiques

Afficher des statistiques et des données dans des blocs organisés pour les tableaux de bord et les analyses.

Importation

import { Stats } from 'asterui'

Exemples

Statistique de base

Statistique simple avec titre et valeur.

</>

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

Avec description

Ajouter une description en utilisant la propriété 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

Statistiques multiples

Afficher plusieurs statistiques horizontalement.

</>

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

Avec icônes

Ajouter des icônes en utilisant la propriété 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

Valeurs colorées

Utiliser className pour les valeurs colorées.

</>

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

Disposition verticale

Empiler les statistiques verticalement.

</>

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

Avec actions

Ajouter des boutons en utilisant la propriété 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

Propriété	Description	Type	Défaut
children	Éléments de statistiques à afficher	React.ReactNode	-
vertical	Empiler les statistiques verticalement	boolean	false
className	Classes CSS supplémentaires	string	-
data-testid	ID de test pour les tests	string	-

Stats.Stat

Propriété	Description	Type	Défaut
title	Titre de la statistique	React.ReactNode	-
value	Valeur de la statistique	React.ReactNode	-
desc	Texte de description	React.ReactNode	-
figure	Icône ou image	React.ReactNode	-
actions	Boutons d’action ou éléments	React.ReactNode	-
className	Classes CSS supplémentaires	string	-
data-testid	ID de test pour les tests	string	-

Accessibilité

• Structure de titre sémantique pour les titres de statistiques
• Les valeurs peuvent inclure des labels ARIA pour le contexte
• Les figures ont un texte alternatif approprié lors de l’utilisation d’images
• Les boutons d’action sont accessibles au clavier