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

معرفی

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

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

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

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

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

استفاده

import { TrendIndicator } from '@parto-system-design/ui';

<TrendIndicator value={5.2} />    {/* +۵.۲٪ سبز */}
<TrendIndicator value={-3.1} />   {/* -۳.۱٪ قرمز */}
<TrendIndicator value={0} />      {/* ۰٪ خاکستری */}

اندازه‌ها

<TrendIndicator value={5.2} size="sm" />
<TrendIndicator value={5.2} size="md" />
<TrendIndicator value={5.2} size="lg" />

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

<TrendIndicator value={12} showPercent={false} />

Props

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

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

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

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

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