نمودار خطی (Line Chart)

معرفی

کامپوننت PartoLineChart برای نمایش روند تغییرات داده‌ها در طول زمان طراحی شده است. این کامپوننت بر پایه Recharts ساخته شده و از چندین سری داده، انواع منحنی، و بارگذاری Skeleton پشتیبانی می‌کند.

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

• برای نمایش روند تغییرات یک یا چند متغیر در طول زمان
• برای مقایسه سری‌های زمانی مختلف در یک نمودار
• برای شناسایی الگوها، صعود و نزول داده‌ها

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

• برای مقایسه مقادیر categorical — از PartoBarChart استفاده کنید
• برای نقاط داده منفرد بدون روند — از StatDisplay استفاده کنید
• برای نمایش سهم‌ها — از PartoPieChart استفاده کنید

استفاده پایه

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

const data = [
  { name: 'فروردین', فروش: 50 },
  { name: 'اردیبهشت', فروش: 75 },
  { name: 'خرداد', فروش: 60 },
  { name: 'تیر', فروش: 90 },
  { name: 'مرداد', فروش: 85 },
  { name: 'شهریور', فروش: 100 },
]

<div className="h-[400px]">
  <PartoLineChart
    data={data}
    dataKeys={['فروش']}
    margin={{ top: 20, right: 20, bottom: 50, left: 50 }}
  />
</div>

نمونه‌های کاربردی

چند سری داده

برای نمایش چند خط در یک نمودار، کلیدهای مورد نظر را در dataKeys مشخص کنید. هر کلید با رنگ متفاوتی نمایش داده می‌شود.

const data = [
  { name: 'فروردین', فروش: 50, سود: 30, هزینه: 20 },
  { name: 'اردیبهشت', فروش: 75, سود: 45, هزینه: 30 },
  { name: 'خرداد', فروش: 60, سود: 40, هزینه: 25 },
  { name: 'تیر', فروش: 90, سود: 55, هزینه: 35 },
]

<PartoLineChart
  data={data}
  dataKeys={['فروش', 'سود', 'هزینه']}
/>

با نمایش نقاط

<PartoLineChart data={data} dataKeys={['فروش']} showDots={true} />

انواع منحنی

با ویژگی curve می‌توانید شکل خط را تغییر دهید.

{
  /* منحنی نرم (پیش‌فرض) */
}
;<PartoLineChart data={data} dataKeys={['فروش']} curve="monotone" />

{
  /* خط مستقیم */
}
;<PartoLineChart data={data} dataKeys={['فروش']} curve="linear" />

{
  /* منحنی طبیعی */
}
;<PartoLineChart data={data} dataKeys={['فروش']} curve="natural" />

{
  /* پله‌ای */
}
;<PartoLineChart data={data} dataKeys={['فروش']} curve="step" />

سفارشی‌سازی Tooltip

<PartoLineChart
  data={data}
  dataKeys={['فروش', 'سود']}
  tooltipFormatter={(name, value) => (
    <span>
      {name}: <strong>{value.toLocaleString('fa-IR')}</strong> تومان
    </span>
  )}
/>

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

<PartoLineChart data={[]} dataKeys={['فروش']} isLoading={true} />

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

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

انواع منحنی (curve)

حالت بارگذاری (isLoading)

با isLoading={true} یک Skeleton متحرک به‌جای نمودار نمایش داده می‌شود. مناسب برای زمانی که داده‌ها هنوز از سرور دریافت نشده‌اند.

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

تم‌بندی خودکار

این کامپوننت به‌طور خودکار از متغیرهای CSS سیستم طراحی استفاده می‌کند:

• رنگ‌های سری داده از --chart-1 تا --chart-5 خوانده می‌شوند
• با هر دو تم (روشن و تاریک) سازگار است
• Tooltip و محورها با رنگ‌های تم هماهنگ هستند

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

• کامپوننت دارای role="img" و پشتیبانی از ariaLabel برای صفحه‌خوان‌ها است
• در حالت بارگذاری از role="status" استفاده می‌شود
• Tooltip با تعامل ماوس و لمسی فعال می‌شود
• رنگ‌های خطوط کنتراست کافی با پس‌زمینه دارند

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

• AreaChart — اگر می‌خواهید حجم یا مقدار تجمعی را با پر کردن ناحیه زیر خط تأکید کنید، از AreaChart استفاده کنید
• BarChart — اگر داده‌های شما categorical هستند و نیاز به مقایسه مستقیم مقادیر دارید، BarChart مناسب‌تر است
• PieChart — برای نمایش توزیع نسبی و سهم هر بخش از کل
• داده‌نمایی — راهنمای کامل نمودارها و اصول رنگ‌بندی