نمودار مساحتی (Area Chart)

معرفی

کامپوننت PartoAreaChart یک نمودار مساحتی بر پایه Recharts ارائه می‌دهد. عملکرد آن مشابه PartoLineChart است، با این تفاوت که ناحیه زیر خط با رنگ نیمه‌شفاف پر می‌شود. این نوع نمودار برای نمایش حجم یا مقدار تجمعی در طول زمان مناسب است.

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

• برای تأکید بر حجم یا مقدار تجمعی داده‌ها در طول زمان
• برای نمایش تک سری داده که میزان «پُری» آن مهم است
• وقتی می‌خواهید تفاوت بصری قوی‌تری نسبت به LineChart ایجاد کنید

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

• برای چند سری غیر cumulative — از LineChart استفاده کنید (area های روی هم گیج‌کننده است)
• برای مقایسه categorical — از BarChart استفاده کنید

استفاده پایه

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

const data = [
  { name: 'فروردین', تعامل: 120 },
  { name: 'اردیبهشت', تعامل: 180 },
  { name: 'خرداد', تعامل: 150 },
  { name: 'تیر', تعامل: 220 },
  { name: 'مرداد', تعامل: 200 },
  { name: 'شهریور', تعامل: 260 },
]

<div className="h-[400px]">
  <PartoAreaChart
    data={data}
    dataKeys={['تعامل']}
    margin={{ top: 20, right: 20, bottom: 50, left: 60 }}
    ariaLabel="نمودار روند تعامل"
  />
</div>

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

چند سری داده

const data = [
  { name: 'فروردین', لایک: 120, کامنت: 45, اشتراک: 30 },
  { name: 'اردیبهشت', لایک: 180, کامنت: 65, اشتراک: 40 },
  { name: 'خرداد', لایک: 150, کامنت: 55, اشتراک: 35 },
  { name: 'تیر', لایک: 220, کامنت: 80, اشتراک: 50 },
]

<PartoAreaChart
  data={data}
  dataKeys={['لایک', 'کامنت', 'اشتراک']}
/>

تنظیم شفافیت ناحیه

با ویژگی fillOpacity می‌توانید میزان شفافیت ناحیه رنگی را تنظیم کنید.

{
  /* شفافیت کم (پیش‌فرض) */
}
;<PartoAreaChart data={data} dataKeys={['تعامل']} fillOpacity={0.08} />

{
  /* شفافیت بیشتر */
}
;<PartoAreaChart data={data} dataKeys={['تعامل']} fillOpacity={0.3} />

انواع منحنی

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

{
  /* خط مستقیم */
}
;<PartoAreaChart data={data} dataKeys={['تعامل']} curve="linear" />

{
  /* پله‌ای */
}
;<PartoAreaChart data={data} dataKeys={['تعامل']} curve="step" />

با نمایش نقاط

<PartoAreaChart data={data} dataKeys={['تعامل']} showDots={true} />

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

<PartoAreaChart
  data={data}
  dataKeys={['تعامل']}
  tooltipFormatter={(name, value) => (
    <span>
      {name}: <strong>{value.toLocaleString('fa-IR')}</strong>
    </span>
  )}
/>

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

<PartoAreaChart data={[]} dataKeys={['تعامل']} isLoading={true} />

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

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

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

شفافیت ناحیه (fillOpacity)

مقدار پیش‌فرض 0.08 است. برای تأکید بیشتر، مقدار بالاتر (مثلاً 0.3) استفاده کنید.

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

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

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

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

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

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

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

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

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

• LineChart — اگر چند سری داده دارید و area fill باعث شلوغی می‌شود، LineChart خوانایی بهتری دارد
• BarChart — اگر داده‌های شما categorical هستند و نیاز به مقایسه مستقیم دارید
• PieChart — اگر می‌خواهید توزیع نسبی یک مجموعه را نمایش دهید
• داده‌نمایی — راهنمای کامل نمودارها و اصول رنگ‌بندی