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

معرفی

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

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

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

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

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

زمین بازی

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

استفاده

import { StatDisplay, TrendIndicator } from '@partodata/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

وزن مقدار

مقدار StatDisplay اکنون با وزن معمولی (font-normal) رندر می‌شود، نه پررنگ — مطابق نظم وزنِ فارسیِ سیستم طراحی (Wave G). این کامپوننت همچنان از سه آمار پایه، «قدیمی/بزرگ‌شده» است: مقدار بزرگ (اندازه‌های sm/md/lg = text-2xl/text-3xl/text-4xl) اما با وزن سبک. برای یک آمار محیطی و بدون قاب با عدد به اندازهٔ متن، از InlineStat استفاده کنید.

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

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

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

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

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