نمایش آمار (StatDisplay)

معرفی

کامپوننت StatDisplay برای نمایش یک مقدار آماری به همراه برچسب، واحد و نشانگر روند استفاده می‌شود.

چه زمانی استفاده کنیم:

• برای نمایش یک عدد آماری ساده با برچسب توضیحی
• وقتی نمایش inline یک مقدار در کنار سایر محتوا لازم است
• برای نمایش مقادیر آماری بدون نیاز به sparkline یا differential

چه زمانی استفاده نکنیم:

• برای متریک‌هایی که sparkline و differential دارند — از MetricCard استفاده کنید
• برای متن‌های توصیفی — StatDisplay مخصوص اعداد است

زمین بازی

با تغییر تنظیمات زیر، پیش‌نمایش زنده را مشاهده کنید.

استفاده

import { StatDisplay, TrendIndicator } from '@parto-system-design/ui'
import { Users } from 'lucide-react'
;<StatDisplay value={1250000} label="فالوورها" icon={<Users />} trend={<TrendIndicator value={3.5} />} />

اندازه‌ها

<StatDisplay value={4500} label="بازدید" size="sm" />
<StatDisplay value={4500} label="بازدید" size="md" />
<StatDisplay value={4500} label="بازدید" size="lg" />

با واحد

<StatDisplay value={85} label="امتیاز" unit="٪" />
<StatDisplay value={1200} label="کاربران" unit="نفر" />

حالت بارگذاری

<StatDisplay value={0} label="در حال بارگذاری" isLoading />

Props

راهنمای استفاده

دسترسی‌پذیری

• مقدار آماری با label ترکیب می‌شود تا صفحه‌خوان‌ها معنای کامل را بخوانند
• اعداد به locale مناسب فرمت می‌شوند (فارسی، عربی، انگلیسی)
• حالت بارگذاری از Skeleton استفاده می‌کند تا layout shift نداشته باشد

کامپوننت‌های مرتبط

• MetricCard — اگر نیاز به sparkline و differential دارید، از MetricCard استفاده کنید
• TrendIndicator — برای نمایش جهت تغییرات در کنار StatDisplay از TrendIndicator استفاده کنید
• AnimatedNumber — اگر می‌خواهید عدد با انیمیشن شمارشی نمایش داده شود، آن را داخل StatDisplay استفاده کنید