کارت مقایسه (ComparisonCard)

معرفی

کامپوننت ComparisonCard برای مقایسه مقدار یک معیار بین دو دوره زمانی (مثلاً این ماه در برابر ماه قبل) استفاده می‌شود. تغییر درصدی به صورت رنگی با TrendIndicator نمایش داده می‌شود.

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

• برای مقایسه یک معیار بین دو دوره زمانی (این ماه vs ماه قبل)
• در داشبورد برای نمایش تغییرات KPIها
• وقتی نیاز به نمایش بصری جهت تغییر (بهبود/کاهش) دارید

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

• برای بیش از ۲-۳ آیتم — از DataTable استفاده کنید
• برای مقایسه‌های داده‌محور پیچیده — از PartoBarChart استفاده کنید

زمین بازی

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

استفاده

import { ComparisonCard } from '@parto-system-design/ui'
;<ComparisonCard
  title="بازدید"
  currentLabel="این ماه"
  previousLabel="ماه قبل"
  currentValue="۲۴۵ هزار"
  previousValue="۱۹۸ هزار"
  changePercent={23.7}
/>

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

پیش‌فرض

تغییر منفی

مقدار کمتر بهتر است

برای متریک‌هایی مثل هزینه، نرخ خروج، یا زمان پاسخ — با higherIsBetter={false} رنگ کاهش به سبز (بهبود) تبدیل می‌شود.

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

نمایش شبکه‌ای

چندین ComparisonCard کنار هم در یک ردیف داشبورد KPI.

Props

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

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

• شاخص تغییر از TrendIndicator استفاده می‌کند که آیکون جهتی و رنگ را ترکیب کرده است
• tooltip اطلاعات بیشتری را برای صفحه‌خوان‌ها فراهم می‌کند
• حالت بارگذاری از Skeleton استفاده می‌کند تا layout shift نداشته باشد
• رنگ‌ها با استانداردهای WCAG AA سازگار هستند

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

• MetricCard — اگر نمایش متریک منفرد با sparkline نیاز دارید بدون مقایسه دوره‌ای، از MetricCard استفاده کنید
• DataTable — اگر نیاز به مقایسه تعداد زیاد آیتم دارید، از DataTable استفاده کنید
• Card — اگر محتوای عمومی غیرمقایسه‌ای دارید، از Card استفاده کنید