نمودار رادار (PartoRadarChart)

معرفی

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

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

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

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

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

زمین بازی

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

استفاده پایه

import { PartoRadarChart } from '@partodata/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 قدیمی پذیرفته می‌شود ولی بی‌اثر است.

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

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

<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> از 100
    </span>
  )}
/>

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

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

مقیاس عددی مشخص روی محور شعاعی

بدون domain، مقیاس رادار خودکار و متناسب با داده تنظیم می‌شود — یعنی حلقهٔ بیرونی می‌تواند در دو نمودار مختلف معنای متفاوتی داشته باشد و مقایسهٔ آن‌ها گمراه‌کننده است. با domain و showRadiusAxis مقیاس ثابت و قابل‌خواندن می‌شود:

<PartoRadarChart data={data} dataKeys={['امتیاز']} domain={[0, 100]} showRadiusAxis />

رنگ سفارشی هر سری

<PartoRadarChart
  data={data}
  dataKeys={['فعلی', 'قبلی']}
  colors={['var(--brand-default)', 'var(--foreground-lighter)']}
/>

شناسایی سری‌ها بدون تکیه بر رنگ (اختلال تشخیص رنگ)

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

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

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

گزینهٔ قدیمی شبکه (gridType)

مقادیر circle و polygon فقط برای سازگاری نوع پذیرفته می‌شوند و از نسخهٔ 7 بی‌اثرند. رادار هیچ حلقه یا شعاع پس‌زمینه رسم نمی‌کند؛ محور و برچسب‌ها حفظ می‌شوند.

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

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

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

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

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

• رنگ‌های سری داده از --chart-1 تا --chart-5 خوانده می‌شوند؛ --chart-1 سبز برند است، پس نمودار تک‌سری سبز برند است و دورهٔ مقایسه خط‌چین خاکستری
• شبکه و محورها با رنگ border هماهنگ هستند
• با هر دو تم (روشن و تاریک) سازگار است

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

• کامپوننت دارای role="img" و پشتیبانی از ariaLabel برای صفحه‌خوان‌ها است
• در حالت بارگذاری از role="status" استفاده می‌شود
• برچسب‌های محورها برای درک ابعاد مقایسه نمایش داده می‌شوند
• Tooltip با تعامل ماوس و لمسی فعال می‌شود
• برای نمایش چند سری، legend را فعال کنید تا نام هر سری بدون نیاز به hover دیده شود. اما توجه کنید که خودِ legend هم با همان رنگ‌های پالت رسم می‌شود؛ برای کاربران دارای اختلال تشخیص رنگ (CVD) از legend="patterns" استفاده کنید — این حالت به هر سری یک الگوی خط متمایز (پیوسته/خط‌چین/نقطه‌چین/خط‌نقطه) می‌دهد که هم روی ناحیهٔ رادار و هم روی legend دیده می‌شود، و شناسایی سری‌ها دیگر فقط به رنگ متکی نیست (مطابق WCAG 1.4.1)

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

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