Statistique

LhStatistic permet d'afficher des valeurs statistiques, avec support de la précision, du séparateur de milliers, ainsi que de préfixes et suffixes.

Utilisation de base

Titre + valeur

Visites annuelles

2,384,712

<script setup lang="ts">
</script>

<template>
  <LhStatistic title="Visites annuelles" :value="2384712" />
</template>

<script>
export default {}
</script>

<template>
  <LhStatistic title="Visites annuelles" :value="2384712" />
</template>

Précision et séparateur

precision contrôle les décimales, separator contrôle le séparateur de milliers (une chaîne vide désactive le groupage)

Score

4.85

Numéro

8899001

<script setup lang="ts">
</script>

<template>
  <div style="display: flex; gap: 48px">
    <LhStatistic title="Score" :value="4.8471" :precision="2" />
    <LhStatistic title="Numéro" :value="8899001" separator="" />
  </div>
</template>

<script>
export default {}
</script>

<template>
  <div style="display: flex; gap: 48px">
    <LhStatistic title="Score" :value="4.8471" :precision="2" />
    <LhStatistic title="Numéro" :value="8899001" separator="" />
  </div>
</template>

Préfixe et suffixe

prefix / suffix ou les slots du même nom

Volume d'affaires

¥128,600CNY

Taux de croissance

12.6%

<script setup lang="ts">
</script>

<template>
  <div style="display: flex; gap: 48px">
    <LhStatistic title="Volume d'affaires" :value="128600" prefix="¥" suffix="CNY" />
    <LhStatistic title="Taux de croissance" :value="12.6" :precision="1" suffix="%" />
  </div>
</template>

<script>
export default {}
</script>

<template>
  <div style="display: flex; gap: 48px">
    <LhStatistic title="Volume d'affaires" :value="128600" prefix="¥" suffix="CNY" />
    <LhStatistic title="Taux de croissance" :value="12.6" :precision="1" suffix="%" />
  </div>
</template>

Texte non numérique

Lorsque value reçoit une chaîne non analysable, elle est affichée telle quelle ; cela permet de gérer des nombres très grands ou des libellés spéciaux.

value sous forme de chaîne

Étoiles

Innombrables

<script setup lang="ts">
</script>

<template>
  <LhStatistic title="Étoiles" value="Innombrables" />
</template>

<script>
export default {}
</script>

<template>
  <LhStatistic title="Étoiles" value="Innombrables" />
</template>

API

Props

Prop	Description	Type	Valeur par défaut
title	Titre de la valeur	string	—
value	Valeur statistique ; la forme chaîne peut porter des nombres très grands ou du texte signé	string | number	0
precision	Précision décimale	number	0
separator	Séparateur de milliers ; une chaîne vide désactive le groupage	string	','
prefix	Préfixe de la valeur, par ex. un symbole monétaire	string	—
suffix	Suffixe de la valeur, par ex. une unité	string	—
sx	Props de mise en page sx	LhSxProps	—

Slots

Slot	Description
title	Titre personnalisé
prefix	Préfixe personnalisé
suffix	Suffixe personnalisé

Accessibilité

• La zone de valeur porte aria-live="polite" ; quand value change, le lecteur d'écran annonce doucement la nouvelle valeur
• Le titre, le préfixe et le suffixe sont du texte ordinaire, directement lisible

Définitions de types

Ce composant exporte les structures de types TypeScript suivantes (extraites automatiquement de packages/components/statistic/src/types.ts et des sources @lh-ui/share/core/* ; cliquez sur chaque entrée pour déplier la définition complète ; la description des props se trouve dans le tableau Props ci-dessus) :

LhStatisticProps

export interface LhStatisticProps {
  /** Titre de la valeur (affiché au-dessus de la valeur) */
  title?: string
  /** Valeur statistique ; la forme chaîne peut porter des nombres très grands ou du texte signé */
  value: number | string
  /** Précision décimale */
  precision?: number
  /** Séparateur de milliers ; une chaîne vide désactive le groupage */
  separator?: string
  /** Préfixe de la valeur, par ex. un symbole monétaire */
  prefix?: string
  /** Suffixe de la valeur, par ex. une unité */
  suffix?: string
  /** Props de mise en page sx */
  sx?: LhSxProps
}