توزیع گرایش (FlowDistribution)

معرفی

FlowDistribution ترکیب درصدی پنج گرایش مخاطب را در قالب نوار شناور، میله‌ی ردیف‌دار، یا چیپ فشرده نشان می‌دهد. پیش‌فرض نما stacked است — متراکم‌ترین فرم برای کارت‌ها و سلول‌های جدول.

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

• درون کارت خوشه (ConceptCard) برای نمایش «ترکیب گرایش خوشه»
• در ردیف جدول خوشه‌ها، کنار سایر سلول‌های داده‌ای
• در صفحه‌ی تحلیل پیج برای نمایش ترکیب گرایش مخاطبان

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

• برای sentiment یا emotion — از SentimentDistribution / EmotionDistribution استفاده کنید
• وقتی موضوعِ پایش‌شده ندارید — این کامپوننت گرایش مخاطب نسبت به «چیزی» را پیش‌فرض می‌گیرد

زمین بازی

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

استفاده

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

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

// آرایه با کد عددی (۱: حامیان حکومت … ۵: قشر خاکستری)
;<FlowDistribution
  variant="stacked"
  data={[
    { type: 1, value: 420 },
    { type: 2, value: 180 },
    { type: 3, value: 95 },
    { type: 4, value: 62 },
    { type: 5, value: 28 },
  ]}
/>

// آرایه با کلید گرایش
;<FlowDistribution
  variant="stacked"
  data={[
    { type: 'pro-gov', value: 420 },
    { type: 'internal-critic', value: 180 },
    { type: 'internal-opponent', value: 95 },
    { type: 'external-opponent', value: 62 },
    { type: 'grey', value: 28 },
  ]}
/>

نگاشت کدهای عددی: ۱ → pro-gov، ۲ → internal-critic، ۳ → internal-opponent، ۴ → external-opponent، ۵ → grey.

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

;<FlowDistribution
  variant="stacked"
  data={{
    'pro-gov': 420,
    'internal-critic': 180,
    'internal-opponent': 95,
    'external-opponent': 62,
    grey: 215,
  }}
/>

نمای bars

نمای compact

Props

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

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

• نوار stacked دارای role="img" و aria-label توصیفی همه‌ی بخش‌هاست
• هر ردیف در نمای bars یک progressbar با مقادیر aria است

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

• FlowBadge — نمایش تک‌گرایش
• EmotionDistribution — مقیاس پیشرفته‌ی احساس
• SentimentDistribution — مقیاس ساده‌ی احساس