توزیع احساس پیشرفته (EmotionDistribution)

معرفی

EmotionDistribution توزیع درصدی ۹ احساس پلاتچیک را در قالب میله، نوار شناور یا چیپ فشرده نشان می‌دهد. درصدها با روش «بزرگترین مانده» (largest remainder) گرد می‌شوند — مجموع همواره دقیقاً ۱۰۰٪ است.

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

• در صفحه‌ی تحلیل نظرات، خوشه، یا صفحه‌ی جزئیات پست برای نمایش «ترکیب احساسی»
• در سلول درون‌جدولی برای مقایسه‌ی ردیف‌به‌ردیف (نما: compact یا stacked)
• روی داشبورد تحلیل عمیق با نما: bars

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

• برای نمایش فقط احساس غالب — از EmotionBadge استفاده کنید
• برای توزیع سه‌کلاسه مثبت/منفی/خنثی — از SentimentDistribution استفاده کنید
• وقتی داده هنوز آماده نیست — از پروپ isLoading استفاده کنید (نه Skeleton دستی)

زمین بازی

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

استفاده

data را می‌توانید به دو شکل بدهید. شکل پیشنهادی، آرایه‌ای از { type, value } است که در آن type می‌تواند کد عددی ۱ تا ۹، کلید احساس (anger…)، یا برچسب محلی‌شده باشد و value عدد دلخواه است.

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

// آرایه با کد عددی (۱: خشم … ۹: خنثی)
;<EmotionDistribution
  variant="stacked"
  data={[
    { type: 1, value: 420 },
    { type: 2, value: 180 },
    { type: 3, value: 95 },
    { type: 4, value: 62 },
    { type: 5, value: 28 },
    { type: 6, value: 28 },
    { type: 7, value: 28 },
    { type: 8, value: 28 },
    { type: 9, value: 28 },
  ]}
/>

// آرایه با کلید احساس
;<EmotionDistribution
  variant="stacked"
  data={[
    { type: 'anger', value: 420 },
    { type: 'fear', value: 180 },
    { type: 'sadness', value: 95 },
    { type: 'joy', value: 62 },
    { type: 'disgust', value: 28 },
    { type: 'surprise', value: 28 },
    { type: 'trust', value: 28 },
    { type: 'anticipation', value: 28 },
    { type: 'neutral', value: 28 },
  ]}
/>

نگاشت کدهای عددی: ۱ → anger (خشم)، ۲ → fear (ترس)، ۳ → sadness (غم)، ۴ → joy (شادی)، ۵ → disgust (انزجار)، ۶ → surprise (شگفتی)، ۷ → trust (اعتماد)، ۸ → anticipation (انتظار)، ۹ → neutral (خنثی).

شکل قدیمیِ شیء کلیددار همچنان پشتیبانی می‌شود:

;<EmotionDistribution variant="stacked" data={{ joy: 340, trust: 92, sadness: 128, anger: 120, fear: 41 }} />

نمای bars — یک ردیف به ازای هر احساس

نمای compact — چیپ‌های برتر

نمای فشرده تنها N احساس با بالاترین تعداد را نشان می‌دهد و بقیه را در چیپ «بقیه» جمع می‌کند.

Props

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

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

• میله‌ی stacked دارای role="img" و aria-label توصیفی همه‌ی بخش‌هاست
• هر ردیف در نمای bars یک progressbar با aria-valuenow/min/max است
• تمام انیمیشن‌ها به prefers-reduced-motion احترام می‌گذارند (در سطح گلوبال)

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

• EmotionBadge — نمایش تک احساس
• SentimentDistribution — مقیاس ساده ۳ کلاسه
• FlowDistribution — ترکیب گرایش مخاطب (مستقل از احساس)