نشان احساس پیشرفته (EmotionBadge)

نمایش یکی از 9 احساس پلاتچیک (خشم، ترس، غم، شادی، انزجار، شگفتی، اعتماد، انتظار، خنثی) به صورت نشان رنگی — با ورودی عدد یا متن

معرفی

کامپوننت EmotionBadge برای نمایش تحلیل احساس در مقیاس پیشرفته (9 کلاسه، الهام‌گرفته از چرخ احساسات پلاتچیک) استفاده می‌شود. مکمل SentimentBadge است، نه جایگزین آن.

ورودی emotion انعطاف‌پذیر است: می‌توانید کلید احساس، کد عددی (1 تا 9)، یا متن (نام انگلیسی یا برچسب محلی) بدهید — کامپوننت در هر حالت احساس درست را تشخیص می‌دهد و رنگ، آیکون و برچسب متناظر را نمایش می‌دهد.

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

  • تحلیل عمیق یک پست، نظر، یا خوشه که نیازمند تفکیک احساسی دقیق است
  • داشبوردهای افکارسنجی که پراکندگی احساسات را مقایسه می‌کنند
  • نمایش احساس غالب در کارت جزئیات یا سطر اصلی نتیجه‌ی تحلیل

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

  • در نمای خلاصه یا جدول‌های فشرده — از SentimentBadge (سه‌کلاسه) استفاده کنید
  • برای توزیع درصدی چند احساس در یک جا — از Distribution kind="emotion" استفاده کنید
  • برای نمایش سطح اولویت (فوری/بالا/متوسط/پایین) — از SeverityBadge استفاده کنید
خشم120انتظار85شادی340اعتماد92ترس41شگفتی67غم128انزجار34خنثی210

زمین بازی

زمین بازی
شادی340
تنظیمات
ظاهر
محتوا
داده
import { EmotionBadge } from '@partodata/ui'

<EmotionBadge />

مقادیر و نگاشت عددی

نشان احساس روی مقیاس عددی افکارسنجی کار می‌کند. کد 0 («All») یک مقدار فیلتر کلی است و احساس واقعی نیست — کامپوننت برای آن چیزی رندر نمی‌کند. کدها از 1 (خشم) شروع و به 9 (خنثی) ختم می‌شوند:

کدکلید (key)برچسب فارسیتوکن رنگرنگ
1angerخشم--emotion-angerقرمز
2fearترس--emotion-fearبنفش
3sadnessغم--emotion-sadnessنیلی
4joyشادی--emotion-joyسبز زمردی
5disgustانزجار--emotion-disgustصورتی
6surpriseشگفتی--emotion-surpriseکهربایی
7trustاعتماد--emotion-trustفیروزه‌ای
8anticipationانتظار--emotion-anticipationسبز لیمویی
9neutralخنثی--emotion-neutralخاکستری

استفاده

emotion هر یک از این فرم‌ها را می‌پذیرد:

import { EmotionBadge } from '@partodata/ui';

// 1) کلید احساس
<EmotionBadge emotion="joy" />

// 2) کد عددی (1 تا 9) — مثلاً خروجی مستقیم API
<EmotionBadge emotion={4} />        {/* → شادی */}
<EmotionBadge emotion={1} count={120} />  {/* → خشم */}

// 3) متن — نام انگلیسی، رشته‌ی عددی، یا برچسب محلی (بزرگ/کوچک مهم نیست)
<EmotionBadge emotion="Joy" />      {/* → شادی */}
<EmotionBadge emotion="شادی" />     {/* → شادی */}
<EmotionBadge emotion={'4'} />      {/* → شادی */}

// سایر تنظیمات
<EmotionBadge emotion="trust" size="sm" showLabel={false} />

// کد 0 («All») یا مقدار ناشناخته → چیزی رندر نمی‌شود
<EmotionBadge emotion={0} />        {/* → null */}

ورودی از کد عددی (1 تا 9)

خشمترسغمشادیانزجارشگفتیاعتمادانتظارخنثی

ورودی از متن

نام انگلیسی، رشته‌ی عددی، یا برچسب فارسی/عربی — همه به یک احساس نگاشت می‌شوند.

خشمترسشادیخشمشادیاعتمادشگفتی

اندازه‌ها

smشادیشادی340
mdشادیشادی340

Props

Prop

Type

ابزار کمکی

برای تبدیل دستی مقدار به کلید احساس (مثلاً خارج از این کامپوننت)، از resolveEmotion استفاده کنید. خروجی برای کد 0 و مقادیر نامعتبر null است:

import { resolveEmotion, EMOTION_VALUE_MAP, EMOTION_KEY_TO_VALUE } from '@partodata/ui'

resolveEmotion(4) // 'joy'
resolveEmotion('Joy') // 'joy'
resolveEmotion('شادی') // 'joy'
resolveEmotion('4') // 'joy'
resolveEmotion(0) // null  (سنتینل «All»)
resolveEmotion(99) // null

EMOTION_VALUE_MAP[1] // 'anger'
EMOTION_KEY_TO_VALUE.neutral // 9

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

بکنید

  • برای مقایسه‌ی نه احساس در یک نگاه، تمام badge ها را در یک ردیف کنار هم قرار دهید و از count استفاده کنید - در کنار Distribution kind="emotion" (نمای stacked) برای نمایش «احساس غالب» استفاده کنید - از size="sm" در سلول‌های جدول استفاده کنید - وقتی داده‌ی API به‌صورت کد عددی می‌آید، همان عدد را مستقیم به emotion بدهید — نیازی به نگاشت دستی نیست

نکنید

  • از EmotionBadge در نمای خلاصه/فید استفاده نکنید — این مقیاس برای صفحات تحلیل عمیق طراحی شده است - هم‌زمان SentimentBadge و EmotionBadge را برای یک آیتم نمایش ندهید — یکی را بر اساس چگالی نما انتخاب کنید - showLabel= {false} را بدون tooltip یا context کنار نگذارید — صرف آیکون برای تمایز 9 احساس کافی نیست - کد 0 («All») را به‌عنوان یک احساس به این کامپوننت ندهید — آن را در لایه‌ی فیلتر مدیریت کنید

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

  • هر احساس هم آیکون و هم رنگ تمایز دهنده دارد (وابستگی صرف به رنگ وجود ندارد)
  • با showLabel={false} مقدار aria-label همچنان نگه داشته می‌شود
  • رنگ‌ها بر اساس توکن‌های --emotion-* تنظیم شده‌اند و کنتراست WCAG AA دارند

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

  • SentimentBadge — مقیاس ساده‌ی 3 کلاسه برای نمای خلاصه
  • Distribution — نمایش توزیع درصدی 9 احساس
  • FlowBadge — طبقه‌بندی گرایش مخاطب (مستقل از احساس)