نشانگر روند (TrendIndicator)

معرفی

کامپوننت TrendIndicator برای نمایش تغییرات درصدی (رو به بالا، رو به پایین، بدون تغییر) استفاده می‌شود.

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

• برای نمایش درصد تغییر نسبت به دوره قبل
• در کنار StatDisplay یا MetricCard برای نشان دادن جهت روند
• وقتی رنگ و آیکون جهتی برای درک سریع تغییرات لازم است

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

• برای نمایش مقادیر مطلق — TrendIndicator فقط برای درصد تغییر است
• وقتی بیان کمی دقیق مهم‌تر از جهت است — از عدد plain استفاده کنید

زمین بازی

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

استفاده

import { TrendIndicator } from '@partodata/ui';

<TrendIndicator comparisonLabel="نسبت به 1 تا 30 شهریور" value={5.2} />    {/* +5.2٪ سبز */}
<TrendIndicator comparisonLabel="نسبت به 1 تا 30 شهریور" value={-3.1} />   {/* -3.1٪ قرمز */}
<TrendIndicator comparisonLabel="نسبت به 1 تا 30 شهریور" value={0} />      {/* 0٪ خاکستری */}

اندازه‌ها

<TrendIndicator comparisonLabel="نسبت به 1 تا 30 شهریور" value={5.2} size="xs" />
<TrendIndicator comparisonLabel="نسبت به 1 تا 30 شهریور" value={5.2} size="sm" /> {/* پیش‌فرض */}
<TrendIndicator comparisonLabel="نسبت به 1 تا 30 شهریور" value={5.2} size="md" />
<TrendIndicator comparisonLabel="نسبت به 1 تا 30 شهریور" value={5.2} size="lg" />
<TrendIndicator comparisonLabel="نسبت به 1 تا 30 شهریور" value={5.2} size="xl" />

بدون علامت درصد

<TrendIndicator comparisonLabel="نسبت به 1 تا 30 شهریور" value={12} showPercent={false} />

Props

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

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

• آیکون جهتی (فلش بالا/پایین) با رنگ ترکیب شده تا وابستگی به رنگ نباشد
• اعداد به locale مناسب فرمت می‌شوند
• متن عددی برای صفحه‌خوان‌ها قابل خواندن است

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

• StatDisplay — اگر نیاز به نمایش عدد اصلی با روند تغییرات دارید، TrendIndicator را در prop trend قرار دهید
• MetricCard — اگر در MetricCard هستید، از MetricCardDifferential استفاده کنید که عملکرد مشابهی دارد

دورهٔ رشد

comparisonLabel?: string دورهٔ واقعی مقایسه را مستقیم کنار عدد نشان می‌دهد. در مثال‌های این صفحه، دادهٔ نمایشی نسبت به 1 تا 30 شهریور تعریف شده است. در محصول، برچسب را از داده یا درخواست مقایسه بگیرید؛ دورهٔ نامعلوم را با «دورهٔ قبل» جایگزین نکنید. نبود برچسب در توسعه هشدار می‌دهد و مقدار قدیمی را پنهان نمی‌کند.