متر تشخیص بات (BotDetectionMeter)

نمایش درصدی سه‌حالته‌ی تشخیص بات — واقعی / مشکوک / بات — برای پروفایل‌های رسانه و تحلیل کامنت‌ها

معرفی

BotDetectionMeter توزیع سه‌حالته‌ی تشخیص بات را نمایش می‌دهد: واقعی (حساب‌های انسانی تأیید‌شده)، مشکوک (شواهد ناکافی)، و بات (خودکار تأیید‌شده). برای ارزیابی اعتبار یک پیج، پاک‌سازی کامنت‌ها پیش از تحلیل، یا نمایش خلاصه‌ی کیفیت دنبال‌کنندگان مناسب است.

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

صفحه‌ی پروفایل یک اکانت رسانه اجتماعی — نمایش کیفیت دنبال‌کنندگان
کارت‌های کامنت‌سنج — چه درصدی از کامنت‌ها از اکانت‌های واقعی است
خلاصه‌ی کمپین تبلیغ/بوستر — کیفیت تعامل

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

دسته‌بندی بیش از ۳ حالت نیاز دارید — SentimentDistribution یا FlowDistribution برای ۴-۵ کلاس
فقط یک درصد تکی مثل «۸۲٪ واقعی» — CircularProgress یا Progress ساده کافی است
داده‌ی سری‌زمانی — از یک خط‌نمودار کوچک در کنار این متر استفاده کنید، نه این متر به‌تنهایی

نرخ حساب‌های واقعی۷۸٪

واقعی۷۸٪مشکوک۱۵٪بات۷٪

زمین بازی

نرخ حساب‌های واقعی۷۸٪

واقعی۷۸٪مشکوک۱۵٪بات۷٪

تنظیمات

ظاهر

نوع نمایش

اندازه

محتوا

نمایش اعداد مطلق

نمایش درصد

نمایش خلاصه

کد این نمونه به‌صورت خودکار قابل تولید نیست — برای کد آماده‌ی copy/paste به بخش «استفاده» در بالای صفحه مراجعه کنید.

استفاده

import { BotDetectionMeter } from '@parto-system-design/ui'

export function AccountAudit() {
  return <BotDetectionMeter data={{ real: 824, suspicious: 156, bot: 74 }} />
}

پیش‌فرض variant="stacked": یک نوار افقی با سه بخش رنگی، خلاصه‌ی «نرخ حساب‌های واقعی» بالا، و legend پایین. درصدها با روش «بزرگ‌ترین باقیمانده» گرد می‌شوند تا جمع دقیقاً ۱۰۰ باشد.

انواع

bars — سه نوار جداگانه

واقعی۸۲۴۷۸٪

مشکوک۱۵۶۱۵٪

بات۷۴۷٪

هر حالت یک نوار مستقل دارد؛ مناسب جاهایی که می‌خواهید هر دسته جداگانه خوانده شود. showCounts برای نمایش تعداد مطلق کنار درصد.

compact — فقط یک خط متن

واقعی۷۸٪مشکوک۱۵٪بات۷٪

برای table cell، tooltip، یا کارت‌های کوچک که جا محدود است.

اندازه‌ها

واقعی۸۴٪مشکوک۱۲٪بات۴٪

md (پیش‌فرض)

واقعی۸۴٪مشکوک۱۲٪بات۴٪

size="sm" برای table cell، size="md" پیش‌فرض، size="lg" برای کارت‌های مستقل.

ترکیب در کارت پروفایل

@news_channel_ir

۱٬۰۵۴ کامنت تحلیل‌شده

مشکوک

نرخ حساب‌های واقعی۶۴٪

واقعی۶۴٪مشکوک۲۵٪بات۱۱٪

ترکیب با یک badge وضعیت و متادیتا — الگوی معمول در صفحه‌ی Audit یک اکانت.

Props

Prop

Type

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

بکنید

در پروفایل اکانت از variant پیش‌فرض (stacked) با size="lg" استفاده کنید تا به‌عنوان شاخص اصلی دیده شود - در ردیف جدول از variant="compact" یا size="sm" استفاده کنید - اگر تعداد مطلق را نمی‌خواهید نشان دهید، showCounts={false} بگذارید (پیش‌فرض) — درصد تنها واضح‌تر است - BotDetectionMeter را کنار یک badge وضعیت («اعتبار پایین»/«اعتبار متوسط»/«اعتبار بالا») بگذارید تا کاربر معنی دقیق درصد را زود بفهمد

نکنید

داده‌ی خالی (همه صفر) پاس ندهید — متر خالی نشان می‌دهد و گیج‌کننده است؛ بهتر است state خالی را قبلاً در UI handle کنید - variant="bars" را در فضاهای خیلی باریک نگذارید — label در یک خط جا نمی‌شود - رنگ‌ها را override نکنید؛ توکن‌ها معنای semantic دارند (سبز = واقعی، زرد = مشکوک، قرمز = بات)

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

هر segment دارای role="progressbar" با aria-valuenow/min/max است و یک aria-label توصیفی (مثل «مشکوک: ۱۵٪»)
نوار استک شده در یک role="group" پیچیده شده با aria-label="نرخ حساب‌های واقعی"
رنگ تنها راه تمایز نیست — متن درصد هم در legend نمایش داده می‌شود
رقم‌ها با tabular-nums تراز می‌شوند تا در ردیف‌های جدول خوب در کنار هم بنشینند