إحصائية Statistic

يُستخدم LhStatistic لعرض القيم الإحصائية، مع دعم الدقة وفاصل الآلاف والبادئة واللاحقة.

الاستخدام الأساسي

عنوان + قيمة

حجم الزيارات السنوي

2,384,712

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

<template>
  <LhStatistic title="حجم الزيارات السنوي" :value="2384712" />
</template>

<script>
export default {}
</script>

<template>
  <LhStatistic title="حجم الزيارات السنوي" :value="2384712" />
</template>

الدقة والفاصل

precision يتحكم في المنازل العشرية، وseparator يتحكم في فاصل الآلاف (سلسلة فارغة تُلغي التجميع)

التقييم

4.85

الرقم

8899001

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

<template>
  <div style="display: flex; gap: 48px">
    <LhStatistic title="التقييم" :value="4.8471" :precision="2" />
    <LhStatistic title="الرقم" :value="8899001" separator="" />
  </div>
</template>

<script>
export default {}
</script>

<template>
  <div style="display: flex; gap: 48px">
    <LhStatistic title="التقييم" :value="4.8471" :precision="2" />
    <LhStatistic title="الرقم" :value="8899001" separator="" />
  </div>
</template>

البادئة واللاحقة

prefix / suffix أو الفتحتان بالاسم نفسه

قيمة الصفقات

¥128,600يوان

معدل النمو

12.6%

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

<template>
  <div style="display: flex; gap: 48px">
    <LhStatistic title="قيمة الصفقات" :value="128600" prefix="¥" suffix="يوان" />
    <LhStatistic title="معدل النمو" :value="12.6" :precision="1" suffix="%" />
  </div>
</template>

<script>
export default {}
</script>

<template>
  <div style="display: flex; gap: 48px">
    <LhStatistic title="قيمة الصفقات" :value="128600" prefix="¥" suffix="يوان" />
    <LhStatistic title="معدل النمو" :value="12.6" :precision="1" suffix="%" />
  </div>
</template>

نص غير رقمي

عند تمرير سلسلة لا يمكن تحليلها في value، تُعرض كما هي، ويمكن استخدام ذلك للأرقام الضخمة جدًا أو النصوص الخاصة.

value سلسلة نصية

النجوم

بلا عداد

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

<template>
  <LhStatistic title="النجوم" value="بلا عداد" />
</template>

<script>
export default {}
</script>

<template>
  <LhStatistic title="النجوم" value="بلا عداد" />
</template>

API

Props

الخاصية	الوصف	النوع	الافتراضي
title	عنوان القيمة	string	—
value	القيمة الإحصائية؛ الصيغة النصية قادرة على حمل أرقام ضخمة جدًا أو نصوص ترميزية	string | number	0
precision	دقة المنازل العشرية	number	0
separator	فاصل الآلاف؛ السلسلة الفارغة تُلغي التجميع	string	','
prefix	بادئة القيمة، مثل رمز العملة	string	—
suffix	لاحقة القيمة، مثل الوحدة	string	—
sx	خصائص التخطيط السريع sx	LhSxProps	—

Slots

اسم الفتحة	الوصف
title	عنوان مخصص
prefix	بادئة مخصصة
suffix	لاحقة مخصصة

إمكانية الوصول

• منطقة القيمة تحمل aria-live="polite"، وعند تغيّر value يُذيع قارئ الشاشة القيمة الجديدة بلطف
• العنوان والبادئة واللاحقة كلها نص عادي، يمكن قراءته مباشرة

تعريفات الأنواع

بنى TypeScript التي يصدّرها هذا المكوّن للخارج (مستخرجة تلقائيًا من packages/components/statistic/src/types.ts و@lh-ui/share/core/*؛ انقر كل عنصر لتوسيع تعريفه الكامل؛ لأوصاف الخصائص انظر جدول Props أعلاه):

LhStatisticProps

export interface LhStatisticProps {
  /** عنوان القيمة (يُعرض فوق القيمة) */
  title?: string
  /** القيمة الإحصائية؛ الصيغة النصية قادرة على حمل أرقام ضخمة جدًا أو نصوص ترميزية */
  value: number | string
  /** دقة المنازل العشرية */
  precision?: number
  /** فاصل الآلاف؛ السلسلة الفارغة تُلغي التجميع */
  separator?: string
  /** بادئة القيمة، مثل رمز العملة */
  prefix?: string
  /** لاحقة القيمة، مثل الوحدة */
  suffix?: string
  /** خصائص التخطيط السريع sx */
  sx?: LhSxProps
}