نرخ تعامل (EngagementRate)

معرفی

کامپوننت نرخ تعامل (Engagement Rate) برای نمایش نرخ تعامل اینفلوئنسرها در محصولات social listening طراحی شده است. این کامپوننت دانش دامنه‌ای (engagement tiers، follower categories) را مستقیم در خود encode کرده و نیاز به محاسبه جداگانه را حذف می‌کند.

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

• نمایش نرخ تعامل یک اینفلوئنسر در پروفایل یا کارت مقایسه
• نمایش موقعیت relative در بین اینفلوئنسرهای همتا (peer group)
• هر جایی که باید کیفیت engagement را به کاربر توضیح دهید

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

• برای نمایش فقط یک عدد درصد — از StatDisplay یا Badge استفاده کنید
• برای مقایسه چند اینفلوئنسر در کنار هم — از display="bar" استفاده کنید
• زمانی که داده followers در دسترس نیست — کامپوننت بدون followers نمی‌تواند tier صحیح محاسبه کند

زمین بازی

با تغییر تنظیمات زیر، نرخ تعامل را به‌صورت زنده مشاهده کنید.

استفاده پایه

اندازه‌های مختلف نرخ تعامل

نرخ تعامل عالی (Nano Influencer)

نرخ تعامل خوب (Micro Influencer)

نرخ تعامل متوسط (Macro Influencer)

نرخ تعامل ضعیف (Mega Influencer)

نمایش: display

هر سه حالت یک نوار دارند: بخش‌های رنگی سطح‌ها از ضعیف تا عالی، با نشانگری زیر مقدار.

<EngagementRate display="bar" currentRate={0.0571} followers={50000} />
<EngagementRate
  display="scale"
  currentRate={0.032}
  benchmarks={[{ value: 2.1, label: 'میانگین صنعت' }]}
/>

چند زبانه

فارسی (پیش‌فرض)

عربی

انگلیسی

دسته‌بندی اینفلوئنسرها

کامپوننت به طور خودکار بر اساس تعداد دنبال‌کننده‌ها، دسته مناسب را تشخیص می‌دهد:

نانو اینفلوئنسر (1K - 10K)

• عالی: بیشتر از 6%
• خیلی خوب: 5% - 6%
• خوب: 4% - 5%
• متوسط: 3% - 4%
• قابل بهبود: 1% - 3%
• ضعیف: کمتر از 1%

میکرو اینفلوئنسر (10K - 100K)

• عالی: بیشتر از 4%
• خیلی خوب: 3% - 4%
• خوب: 2% - 3%
• متوسط: 1% - 2%
• قابل بهبود: 0.5% - 1%
• ضعیف: کمتر از 0.5%

متوسط اینفلوئنسر (100K - 500K)

• عالی: بیشتر از 3%
• خیلی خوب: 2.5% - 3%
• خوب: 1.5% - 2.5%
• متوسط: 1% - 1.5%
• قابل بهبود: 0.5% - 1%
• ضعیف: کمتر از 0.5%

ماکرو اینفلوئنسر (500K - 1M)

• عالی: بیشتر از 2%
• خیلی خوب: 1.5% - 2%
• خوب: 1% - 1.5%
• متوسط: 0.5% - 1%
• قابل بهبود: 0.2% - 0.5%
• ضعیف: کمتر از 0.2%

مگا اینفلوئنسر (بیش از 1M)

• عالی: بیشتر از 1%
• خیلی خوب: 0.8% - 1%
• خوب: 0.5% - 0.8%
• متوسط: 0.3% - 0.5%
• قابل بهبود: 0.1% - 0.3%
• ضعیف: کمتر از 0.1%

Props

EngagementRate

موارد استفاده

داشبورد اینفلوئنسر

import { EngagementRate } from '@partodata/ui'

export function InfluencerDashboard() {
  return (
    <div className="space-y-6">
      <h2>آمار حساب شما</h2>
      <EngagementRate currentRate={0.0571} followers={7864554} locale="fa" />
    </div>
  )
}

مقایسه اینفلوئنسرها

import { EngagementRate } from '@partodata/ui'

export function CompareInfluencers() {
  return (
    <div className="grid grid-cols-1 md:grid-cols-2 gap-6">
      <div>
        <h3>اینفلوئنسر A</h3>
        <EngagementRate currentRate={0.045} followers={15000} locale="fa" />
      </div>
      <div>
        <h3>اینفلوئنسر B</h3>
        <EngagementRate currentRate={0.062} followers={8500} locale="fa" />
      </div>
    </div>
  )
}

نمایش ساده

import { EngagementRate } from '@partodata/ui'

export function SimpleEngagement() {
  return <EngagementRate currentRate={0.032} followers={250000} showCategoryCard={false} locale="fa" />
}

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

• ✅ دسته‌بندی خودکار: تشخیص خودکار دسته اینفلوئنسر بر اساس دنبال‌کننده‌ها
• ✅ نوار پیشرفت هوشمند: 6 سطح رنگی با مثلث شاخص متحرک
• ✅ معیارهای دقیق: معیارهای استاندارد صنعت برای هر دسته
• ✅ چند زبانه: پشتیبانی از فارسی، عربی و انگلیسی
• ✅ RTL: پشتیبانی کامل از راست به چپ
• ✅ واکنش‌گرا: طراحی Responsive برای تمام صفحه‌نمایش‌ها
• ✅ سفارشی‌سازی: قابلیت نمایش یا مخفی کردن کارت دسته‌بندی
• ✅ اعداد محلی: تبدیل خودکار اعداد به فارسی/عربی

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

نکات مهم

• نرخ تعامل باید به صورت عدد اعشاری وارد شود (مثلاً 0.0571 برای 5.71%)
• کامپوننت به طور خودکار رنگ‌ها و معیارها را بر اساس دسته تنظیم می‌کند
• برای نمایش بهینه، از dir="rtl" در المان والد استفاده کنید
• برای اپلیکیشن‌های چند زبانه، prop locale را تنظیم کنید

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

• کامپوننت به صورت خواندنی (role="status" در حالت loading) طراحی شده است
• رنگ‌های 6 سطح engagement با متن نوشتاری ترکیب شده‌اند — رنگ تنها source of truth نیست
• برچسب دو سر مقیاس از ترتیب خودِ سطح‌ها گرفته می‌شود، نه از جهت صفحه؛ بنابراین در RTL و LTR هر برچسب دقیقاً بالای سگمنت خودش می‌ماند («عالی» همیشه سمت شروع مقیاس)
• در حالت بارگذاری از Skeleton استفاده می‌شود تا layout shift کاهش یابد
• عدد نرخ تعامل رقم لاتین است و فونت آن را زیر lang="fa" فارسی نشان می‌دهد؛ نشانهٔ درصد در فارسی ٪ است (5.71٪)
• تمام متون با رنگ پس‌زمینه کنتراست WCAG AA دارند

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

• Account — برای نمایش حساب اینفلوئنسر همراه با آمارش (نرخ تعامل حساب، دنبال‌کننده)
• MetricCard — اگر فقط نیاز به نمایش یک عدد KPI دارید بدون visual tier
• SentimentBadge — برای نمایش sentiment analysis در کنار engagement