آمار درون‌خطی (InlineStat)

معرفی

InlineStat یک آمار «محیطی» (ambient) است: یک آیکون اختیاری در یک جعبهٔ نرم ۶۴ پیکسلی، یک برچسب به سبک text-meta و یک مقدار به اندازهٔ متن معمولی. عمداً بدون قاب کارت، بدون خط دور، بدون سایه و بدون عدد بزرگ‌شده است. برگرفته از SingleStat واقعی Supabase (رایج‌ترین کاشی صفحهٔ Home/فعالیت) که هیچ پوسته‌ای ندارد. عدد این‌جا آرام است و در متن جریان دارد، نه این‌که فریاد بزند.

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

• برای زمینهٔ کم‌رنگ و بدون قاب (ردیف‌های فعالیت، خلاصه‌های درون‌خطی، نوار کناری)
• وقتی عدد بخشی از جریان محتواست، نه تیتر اصلی صفحه
• وقتی چند آمار کوچک را کنار هم می‌چینید بدون آن‌که هرکدام یک کارت جدا شوند

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

• برای یک KPI تیتر با کارت اختصاصی، روند و sparkline — از MetricCard استفاده کنید
• برای یک عدد بزرگ و پررنگ داخل داشبورد متراکم — از StatDisplay استفاده کنید
• برای جدولی از ردیف‌های داده — از Table/DataTable استفاده کنید

راهنمای انتخاب بین سه آمارِ پایه

سه کامپوننت آماری داریم؛ انتخاب درست بر اساس «چقدر عدد باید برجسته باشد» است:

• InlineStat — واقعیت محیطی. بدون پوسته، عدد آرام و به اندازهٔ متن. برای زمینهٔ کم‌رنگ: ردیف فعالیت، خلاصهٔ درون‌خطی، نوار کناری. عدد محتوای اصلی نیست.
• MetricCard — KPI تیتر. در کارت خط‌دار خودش، مقدار به‌صورت عدد بزرگ و وزن‌دار، همراه روند/sparkline اختیاری. وقتی خود عدد، محتوا است.
• StatDisplay — نمایش قدیمی/بزرگ‌شده. یک رقم برچسب‌دار و فشرده داخل داشبوردهای متراکم؛ از نظر برجستگی بین آن دو قرار می‌گیرد.

استفاده

import { InlineStat } from '@partodata/ui'
import { Users } from 'lucide-react'

export default function ActivityRow() {
  return <InlineStat icon={<Users className="h-6 w-6" />} label="دنبال‌کننده‌های فعال" value="۱۲٬۴۸۰ نفر" />
}

حالت‌ها و انواع

بدون آیکون

اگر icon را حذف کنید، جعبهٔ ۶۴ پیکسلی رندر نمی‌شود و فقط جفت برچسب/مقدار می‌ماند — مناسب فهرست‌های فشرده.

<InlineStat label="نرخ تعامل کمپین" value="۴٫۲ درصد" />

چند آمار پشت سر هم

<div className="flex flex-col gap-6">
  <InlineStat icon={<Users className="h-6 w-6" />} label="دنبال‌کننده‌های فعال" value="۱۲٬۴۸۰ نفر" />
  <InlineStat icon={<BarChart3 className="h-6 w-6" />} label="نرخ تعامل کمپین" value="۴٫۲ درصد" />
  <InlineStat icon={<Clock className="h-6 w-6" />} label="آخرین به‌روزرسانی داده" value="دو ساعت پیش" />
</div>

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

جدول ویژگی‌ها

InlineStat

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

• InlineStat یک ساختار سادهٔ برچسب/مقدار است؛ برچسب همیشه پیش از مقدار خوانده می‌شود تا معنای عدد روشن باشد
• آیکون صرفاً تزئینی است و برای صفحه‌خوان معنای اضافه‌ای اضافه نمی‌کند؛ اطلاعات را در label/value بگذارید نه در آیکون
• کنتراست مقدار (text-foreground) و برچسب (text-meta روی foreground-light) در هر دو تم AA را رعایت می‌کند

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

• MetricCard — اگر عدد یک KPI تیتر است و به کارت، روند و sparkline نیاز دارد، از MetricCard استفاده کنید
• StatDisplay — اگر یک رقم بزرگ و برچسب‌دار در داشبورد متراکم می‌خواهید، از StatDisplay استفاده کنید
• TrendIndicator — اگر می‌خواهید جهت تغییر (صعودی/نزولی) را کنار مقدار نشان دهید، از TrendIndicator استفاده کنید