بنچ‌مارک نرخ تعامل (EngagementRateBenchmark)

معرفی

EngagementRateBenchmark یک نوار افقی فشرده برای مقایسه یک متریک (معمولاً نرخ تعامل٪ یا نمره ۰-۱۰۰) با یک مقیاس چهار سطحی (ضعیف/متوسط/خوب/عالی) و یک یا چند نقطه مرجع (benchmark). برخلاف EngagementRate که یک کارت آموزشی پر محتوا است با ۶ سطح و logic مخصوص فالوور، این کامپوننت جمع‌وجور و مناسب جدول/ردیف/کارت است.

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

• ستون «نرخ تعامل» در جدول پیج‌ها با نشانگر «شما اینجایید»
• کارت comparison که پیج شما را با میانگین صنعت مقایسه می‌کند
• نمودار نمره در کارت EntityHealthCard
• نمایش سریع «خوب/بد بودن» یک متریک بدون نیاز به تفسیر

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

• وقتی توضیح کامل آستانه‌ها و category بر اساس فالوور لازم است — از EngagementRate استفاده کنید
• برای نمایش پیشرفت یک سهمیه — از QuotaProgressBar استفاده کنید
• برای عدد تکی بدون مقایسه — از MetricCard استفاده کنید

زمین بازی

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

استفاده

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

export function PageEngagement({ page }) {
  return (
    <EngagementRateBenchmark
      value={page.engagementRate}
      max={10}
      benchmarks={[
        { value: 2.5, label: 'میانگین صنعت' },
        { value: page.best30DayRate, label: 'بهترین ماه' },
      ]}
      showTierLabels
    />
  )
}

چهار سطح پیش‌فرض

آستانه‌های پیش‌فرض برای نرخ تعامل (درصد):

• ضعیف (--score-poor) — ۰ تا ۱٪
• متوسط (--score-moderate) — ۱ تا ۲٫۵٪
• خوب (--score-good) — ۲٫۵ تا ۵٪
• عالی (--score-excellent) — بالای ۵٪

با benchmark های مقایسه

هر benchmark یک تیک داخل نوار + label متنی بالای آن می‌گذارد. مناسب برای:

• میانگین صنعت (industry average)
• بهترین عملکرد گذشته شما
• هدف سه ماهه
• رقیب اصلی

برای نمره ۰–۱۰۰

با tiers={getScoreBenchmarkTiers(locale)} و max={100}، برای نمرات خام استفاده کنید. مثال: نمره کلی پیج‌های تحت رصد.

اندازه‌ها

سه اندازه sm / md / lg برای استفاده در ردیف، کارت، یا صفحه detail.

آستانه‌های سفارشی

برای دامنه خاص خود (مثلاً Booster worker quality score)، tiers را override کنید:

<EngagementRateBenchmark
  value={72}
  min={0}
  max={100}
  tiers={[
    { label: 'ناسالم', max: 40, color: 'hsl(var(--destructive-default))' },
    { label: 'در خطر', max: 60, color: 'hsl(var(--warning-default))' },
    { label: 'پایدار', max: 80, color: 'hsl(var(--sentiment-positive))' },
    { label: 'ممتاز', max: Infinity, color: 'hsl(var(--brand-default))' },
  ]}
  showTierLabels
/>

بدون نشانگر مقدار

با hideValueMarker، فقط نوار و benchmark ها رندر می‌شوند — مناسب برای نمایش legend یا demo آستانه‌ها.

Props

BenchmarkTier

BenchmarkMarker

helpers

import { getEngagementRateBenchmarkTiers, getScoreBenchmarkTiers, findTierIndex } from '@parto-system-design/ui'

// 4-tier defaults for engagement-rate % (poor <1 / moderate <2.5 / good <5 / excellent)
const tiers = getEngagementRateBenchmarkTiers('fa')

// 4-tier defaults for 0-100 score (poor <40 / moderate <60 / good <80 / excellent)
const scoreTiers = getScoreBenchmarkTiers('fa')

// Find which tier contains a value
const idx = findTierIndex(3.2, tiers) // 2 (good)

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

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

• نوار یک role="progressbar" با aria-valuemin / aria-valuemax / aria-valuenow است. aria-valuenow مقدار واقعی (حتی اگر خارج از [min,max] باشد) را منتقل می‌کند.
• هر benchmark tick دارای aria-label به شکل "label: value%" است (اگر label از نوع string باشد).
• segmentها aria-hidden="true" هستند — اطلاعات بصری از طریق valuenow منتقل می‌شود.
• هنگامی که label یک React node (مثل JSX) است، aria-label خودکار ست نمی‌شود؛ مسئولیت با شماست.

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

• EngagementRate — نسخه کامل و آموزشی ۶-سطحی مخصوص اینفلوئنسر — وقتی نیاز به category فالوور و تفسیر دارید
• EngagementRateBar — variant بار فشرده (پیش‌ترین موقعیت)
• QuotaProgressBar — برای پیشرفت سهمیه (سبز → قرمز براساس usage)
• MetricCard — متریک تک‌عدد بدون مقایسه
• EntityHealthCard — وقتی benchmark جزئی از روایت سلامت است، از این بنچ‌مارک داخل آن استفاده کنید