رادار مقایسه (ComparisonRadar)

معرفی

ComparisonRadar برای مقایسه چند entity (پیج، worker، analysis، …) در چند معیار همزمان است. به‌طور خودکار برنده هر معیار را تشخیص می‌دهد، کنار برچسب محور تاج می‌گذارد، و در legend تعداد برتری‌ها را برای هر entity نمایش می‌دهد.

روی PartoRadarChart ساخته شده و فقط لایه دامنه‌ای «مقایسه» اضافه می‌کند.

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

• مقایسه پیج شما با رقبا در ۳-۸ معیار (تعامل، رشد، ثبات، …)
• مقایسه دو worker Booster در پنل ارزیابی عملیاتی
• مقایسه نسخه A/B یک کمپین
• اسلاید bulletin «تحلیل رقابتی»

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

• فقط یک معیار — از EngagementRateBenchmark یا CriterionScoreCard استفاده کنید
• بیشتر از ۵ entity — رادار شلوغ می‌شود، از BarChart افقی استفاده کنید
• معیارهای هم‌واحد نیستند و scale قابل مقایسه ندارند — رادار گمراه‌کننده می‌شود
• radar عمومی بدون مفهوم «برنده» — از PartoRadarChart مستقیم استفاده کنید

زمین بازی

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

استفاده

'use client'
import { ComparisonRadar } from '@parto-system-design/ui'

export function PageComparison({ pages }) {
  return (
    <ComparisonRadar
      title="مقایسه پیج‌ها"
      description="۳۰ روز اخیر"
      metrics={[
        { key: 'engagement', label: 'تعامل' },
        { key: 'growth', label: 'رشد' },
        { key: 'consistency', label: 'ثبات' },
        { key: 'quality', label: 'کیفیت محتوا' },
      ]}
      entities={pages.map((p) => ({
        key: p.id,
        label: p.username,
        values: p.scores,
      }))}
    />
  )
}

متریک معکوس (higherIsBetter=false)

برای متریک‌هایی که مقدار کمتر = بهتر (مثل نرخ خطا، زمان پاسخ)، higherIsBetter: false را تنظیم کنید:

{ key: 'errorRate', label: 'نرخ خطا', higherIsBetter: false }

با ۳ entity

رادار خوانا تا ۵ entity می‌ماند. برای بیش از ۳ entity، رنگ‌های متمایز خودکار از palette chart گرفته می‌شوند.

تساوی — بدون تاج

وقتی دو یا چند entity در یک معیار برابر هستند، هیچ‌کدام تاج نمی‌گیرند (tie). در legend label «تساوی» نمایش داده می‌شود.

بدون legend

برای embed در کارت‌های کوچک‌تر، showLegend={false}.

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

<ComparisonRadar
  metrics={[...]}
  entities={[
    { key: 'a', label: 'برند A', color: 'hsl(var(--brand-default))', values: {...} },
    { key: 'b', label: 'برند B', color: 'hsl(var(--destructive-default))', values: {...} },
  ]}
/>

برای هر entity می‌توانید یک CSS color (hex، rgb، hsl، یا hsl(var(--token))) پاس دهید تا override رنگ palette پیش‌فرض شود.

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

Props

ComparisonMetric

ComparisonEntity

helpers

import { computeComparisonWinners, countComparisonWins, type ComparisonWinner } from '@parto-system-design/ui'

const winners = computeComparisonWinners(metrics, entities)
// winners['engagement'] → { winnerKey: 'a', topKeys: ['a'], topValue: 85 }

const wins = countComparisonWins(winners)
// wins → { a: 2, b: 1 } — outright wins per entity, ties ignored

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

• chart wrapper دارای aria-label localized است — screen reader می‌فهمد که این رادار مقایسه است.
• Legend tileها متن + رنگ swatch + شمارش برتری دارند — معنا فقط با رنگ منتقل نمی‌شود.
• تاج معیار برنده یک emoji در subject string است — screen reader آن را به عنوان آیکون برنده می‌خواند.
• data-top روی tile entity برتر برای CSS targeting.
• role="img" از PartoRadarChart به ارث می‌رسد.

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

• PartoRadarChart — رادار عمومی بدون مفهوم مقایسه. این کامپوننت روی آن بنا شده
• EngagementRateBenchmark — مقایسه یک متریک با benchmarkهای مرجع (نه دو entity)
• CriterionScoreCard — نمایش یک معیار برای یک entity (نه مقایسه)
• ComparisonCard — کارت مقایسه دو entity (text-based، نه رادار)
• BarChart — وقتی بیش از ۵ entity دارید، از bar chart افقی استفاده کنید