نرخ تعامل

معرفی

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

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

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

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

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

استفاده پایه

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

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

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

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

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

بدون کارت دسته‌بندی

می‌توانید فقط نوار نرخ تعامل را بدون کارت اطلاعات نمایش دهید:

چند زبانه

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

عربی

انگلیسی

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

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

نانو اینفلوئنسر (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 '@parto-system-design/ui'

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

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

import { EngagementRate } from '@parto-system-design/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 '@parto-system-design/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 نیست
• در حالت بارگذاری از Skeleton استفاده می‌شود تا layout shift کاهش یابد
• اعداد نرخ تعامل به locale مناسب فرمت می‌شوند (فارسی: ٥.٧١٪)
• تمام متون با رنگ پس‌زمینه کنتراست WCAG AA دارند

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

• EngagementRateBar — اگر می‌خواهید چند اینفلوئنسر را کنار هم مقایسه کنید، نه یکی را نشان دهید
• ProfileCard — برای نمایش کامل پروفایل اینفلوئنسر همراه با engagement rate
• MetricCard — اگر فقط نیاز به نمایش یک عدد KPI دارید بدون visual tier
• SentimentBadge — برای نمایش sentiment analysis در کنار engagement