نمودار رادار (Radar Chart)

معرفی

کامپوننت PartoRadarChart یک نمودار رادار (Spider Chart) بر پایه Recharts ارائه می‌دهد. این نمودار برای مقایسه‌های چندبعدی مانند تحلیل احساسات، ارزیابی مهارت‌ها، یا بررسی ویژگی‌های چندگانه یک موجودیت مناسب است.

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

• برای مقایسه چندبعدی یک یا چند موجودیت (مثلاً مقایسه عملکرد اینفلوئنسرها در ابعاد مختلف)
• وقتی تعداد محورها بین ۳ تا ۸ باشد
• برای نمایش نقاط قوت و ضعف به صورت بصری

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

• برای بیش از ۸ محور — خوانایی بسیار کاهش می‌یابد
• برای مقایسه‌های خطی بین دو مقدار — از BarChart استفاده کنید
• برای داده‌های time-series — از LineChart استفاده کنید

استفاده پایه

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

const data = [
  { subject: 'شادی', امتیاز: 85 },
  { subject: 'غم', امتیاز: 20 },
  { subject: 'خشم', امتیاز: 35 },
  { subject: 'ترس', امتیاز: 15 },
  { subject: 'شگفتی', امتیاز: 60 },
]

<div className="h-[400px]">
  <PartoRadarChart
    data={data}
    dataKeys={['امتیاز']}
    ariaLabel="نمودار توزیع احساسات"
  />
</div>

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

مقایسه چند مجموعه داده

برای مقایسه دو یا چند مجموعه داده، کلیدهای مختلف را در dataKeys مشخص کنید.

const data = [
  { subject: 'تعامل', فعلی: 75, قبلی: 60 },
  { subject: 'رشد', فعلی: 90, قبلی: 70 },
  { subject: 'محتوا', فعلی: 65, قبلی: 80 },
  { subject: 'مخاطب', فعلی: 85, قبلی: 55 },
  { subject: 'بازدید', فعلی: 70, قبلی: 65 },
]

<PartoRadarChart
  data={data}
  dataKeys={['فعلی', 'قبلی']}
/>

با نقاط بزرگ‌تر

<PartoRadarChart data={data} dataKeys={['امتیاز']} showDots dotRadius={5} />

شبکه چندضلعی

به‌طور پیش‌فرض شبکه دایره‌ای است. برای شبکه چندضلعی از gridType="polygon" استفاده کنید.

<PartoRadarChart data={data} dataKeys={['امتیاز']} gridType="polygon" />

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

<PartoRadarChart data={data} dataKeys={['امتیاز']} fillOpacity={0.2} />

بدون نقاط

<PartoRadarChart data={data} dataKeys={['امتیاز']} showDots={false} />

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

<PartoRadarChart
  data={data}
  dataKeys={['فعلی', 'قبلی']}
  tooltipFormatter={(name, value) => (
    <span>
      {name}: <strong>{value}</strong> از ۱۰۰
    </span>
  )}
/>

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

<PartoRadarChart data={[]} dataKeys={['امتیاز']} isLoading={true} />

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

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

نوع شبکه (gridType)

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

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

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

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

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

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

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

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

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

• BarChart — اگر مقایسه شما فقط بین یک یا دو بُعد است، BarChart ساده‌تر و دقیق‌تر است
• HeatMap — اگر داده‌های شما ماتریسی (دو بُعدی) هستند و نیاز به نمایش شدت دارید
• LineChart — اگر یکی از ابعاد شما زمان است و نیاز به نمایش روند دارید
• داده‌نمایی — راهنمای کامل نمودارها و اصول رنگ‌بندی