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

معرفی

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

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

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

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

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

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

زمین بازی

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

استفاده

'use client'
import { ComparisonRadar } from '@partodata/ui'

export function PageComparison({ pages }) {
  return (
    <ComparisonRadar
      title="مقایسه پیج‌ها"
      description="30 روز اخیر"
      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 }

با 3 entity

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

تساوی — بدون برنده

وقتی دو یا چند entity در یک معیار برابر هستند، هیچ‌کدام برچسب محور را از آن خود نمی‌کنند (tie) — برچسب فقط نام معیار می‌ماند. در legend، «تساوی» فقط برای entityـی نمایش داده می‌شود که واقعاً در یک معیار با نفر اول هم‌امتیاز بوده؛ entityـی که هیچ معیاری را نبرده و در هیچ معیاری هم هم‌امتیاز نفر اول نبوده، «0 برتری» می‌گیرد — نه «تساوی».

بدون legend

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

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

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

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

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

Props

ComparisonMetric

ComparisonEntity

helpers

import { computeComparisonWinners, countComparisonWins, type ComparisonWinner } from '@partodata/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 همان محور می‌آید — screen reader مثل هر متن دیگری آن را می‌خواند.
• data-top روی tile entity برتر برای CSS targeting.
• role="img" از PartoRadarChart به ارث می‌رسد.

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

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