کارت مقایسه (ComparisonCard)
مقایسه مقدار یک معیار بین دو دوره زمانی
معرفی
کامپوننت ComparisonCard برای مقایسه مقدار یک معیار بین دو دوره زمانی (مثلاً این ماه در برابر ماه قبل) استفاده میشود. تغییر درصدی به صورت رنگی با TrendIndicator نمایش داده میشود.
چه زمانی استفاده کنیم:
- برای مقایسه یک معیار بین دو دوره زمانی (این ماه vs ماه قبل)
- در داشبورد برای نمایش تغییرات KPIها
- وقتی نیاز به نمایش بصری جهت تغییر (بهبود/کاهش) دارید
چه زمانی استفاده نکنیم:
- برای بیش از ۲-۳ آیتم — از
DataTableاستفاده کنید - برای مقایسههای دادهمحور پیچیده — از
PartoBarChartاستفاده کنید
بازدید
این ماه
۲۴۵ هزار
ماه قبل
۱۹۸ هزار
تغییر:+۲۳.۷٪↑
استفاده
import { ComparisonCard } from '@parto-system-design/ui'
;<ComparisonCard
title="بازدید"
currentLabel="این ماه"
previousLabel="ماه قبل"
currentValue="۲۴۵ هزار"
previousValue="۱۹۸ هزار"
changePercent={23.7}
/>حالتها و انواع
پیشفرض
بازدید
این ماه
۲۴۵ هزار
ماه قبل
۱۹۸ هزار
تغییر:+۲۳.۷٪↑
تغییر منفی
نرخ تعامل
این هفته
۳.۲٪
هفته قبل
۴.۱٪
تغییر:-۲۲٪↓
حالت بارگذاری
Props
راهنمای استفاده
بکنید
- از
higherIsBetter={false}برای معیارهایی مثل هزینه و bounce rate استفاده کنید - ازtooltipبرای توضیح نحوه محاسبه معیار استفاده کنید - مقادیر را باformatLargeNumberفرمتبندی کنید تا خوانایی بهتر شود
نکنید
- بیش از ۴ ComparisonCard در یک ردیف قرار ندهید — خوانایی کاهش مییابد -
changePercentرا بدونcurrentValueوpreviousValueارائه ندهید — context لازم است - برای مقایسه بیش از ۲ دوره از ComparisonCard استفاده نکنید — از نمودار استفاده کنید
دسترسیپذیری
- شاخص تغییر از
TrendIndicatorاستفاده میکند که آیکون جهتی و رنگ را ترکیب کرده است tooltipاطلاعات بیشتری را برای صفحهخوانها فراهم میکند- حالت بارگذاری از Skeleton استفاده میکند تا layout shift نداشته باشد
- رنگها با استانداردهای WCAG AA سازگار هستند
کامپوننتهای مرتبط
- MetricCard — اگر نمایش متریک منفرد با sparkline نیاز دارید بدون مقایسه دورهای، از MetricCard استفاده کنید
- DataTable — اگر نیاز به مقایسه تعداد زیاد آیتم دارید، از DataTable استفاده کنید
- Card — اگر محتوای عمومی غیرمقایسهای دارید، از Card استفاده کنید