نمودار نبض مفهوم (ConceptPulseChart)

معرفی

ConceptPulseChart هسته داشبورد افکارسنجی است: scatter که هر نقطه‌اش به‌جای دایره ساده، یک bubble مرکزی به‌علاوه حلقه ترکیب (composition arcs) دارد که توزیع جریان (موافق/منتقد/مخالف) یا احساس (شادی/خشم/…) آن مفهوم را نشان می‌دهد.

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

• مفهوم‌های clustering در bulletin افکارسنجی — موقعیت + وزن + ترکیب
• نمایش brand mention با breakdown احساسی
• مقایسه چند کمپین در نمودار «اثر در محورهای X/Y + ترکیب نظر»

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

• وقتی فقط نیاز به scatter ساده دارید — از PartoScatterChart استفاده کنید (سبک‌تر)
• وقتی composition concept ندارید — overhead arcs بی‌فایده است
• وقتی >50 نقطه دارید — arcs شلوغ می‌شوند؛ از heatmap یا cluster summary استفاده کنید

زمین بازی

با تغییر تنظیمات زیر، پیش‌نمایش زنده را مشاهده کنید.

استفاده

'use client'
import { ConceptPulseChart } from '@parto-system-design/ui'

const data = [
  {
    x: 30, y: 60, z: 200,
    label: 'رونمایی گوشی جدید',
    composition: { 'pro-gov': 20, 'internal-critic': 60, 'external-opponent': 20 },
  },
  {
    x: 70, y: 40, z: 150,
    label: 'همکاری برند با اینفلوئنسر',
    composition: { 'pro-gov': 60, 'internal-critic': 25, grey: 15 },
  },
]

<div style={{ height: 360 }}>
  <ConceptPulseChart
    data={data}
    compositionScale="flow"
    xLabel="حجم انتشار" yLabel="شدت احساسات"
  />
</div>

حالت‌ها و انواع

ترکیب گرایش — ۵ گرایش مخاطب

پیش‌فرض کامپوننت. هر مفهوم یک حلقه composition دارد که توزیع آن بین حامیان حکومت، منتقدان داخلی، مخالفان داخلی، مخالفان خارجی و قشر خاکستری را نشان می‌دهد. توکن‌های --flow-* به‌طور خودکار اعمال می‌شوند.

const data = [
  {
    x: 30, y: 60, z: 200,
    label: 'رونمایی گوشی جدید',
    composition: { 'pro-gov': 20, 'internal-critic': 60, 'external-opponent': 20 },
  },
  {
    x: 70, y: 40, z: 150,
    label: 'همکاری برند با اینفلوئنسر',
    composition: { 'pro-gov': 60, 'internal-critic': 25, grey: 15 },
  },
]

<ConceptPulseChart
  data={data}
  compositionScale="flow"
  xLabel="حجم انتشار" yLabel="شدت احساسات"
/>

ترکیب احساسی (emotion) — حلقه ۹ احساس

با compositionScale="emotion" کلیدهای composition از EmotionKey خوانده می‌شوند (anger، joy، fear، sadness، …). توکن‌های --emotion-* اعمال می‌شوند. برای تحلیل عمیق روی یک خوشه مفهومی استفاده کنید.

const data = [
  {
    x: 40, y: 70, z: 180,
    label: 'حادثه طبیعی',
    composition: { sadness: 50, fear: 25, anger: 15, neutral: 10 },
  },
  {
    x: 65, y: 50, z: 220,
    label: 'پیروزی ورزشی',
    composition: { joy: 70, trust: 20, anticipation: 10 },
  },
]

<ConceptPulseChart
  data={data}
  compositionScale="emotion"
  xLabel="حجم" yLabel="درگیری"
/>

مقیاس custom — کلیدهای دلخواه و token map

برای موارد خارج از flow/emotion (مثلاً platform breakdown یا category mix) از compositionScale="custom" استفاده کنید و compositionTokens و compositionLabels را پاس دهید.

<ConceptPulseChart
  data={[
    {
      x: 50,
      y: 50,
      z: 200,
      label: 'گفتمان رونمایی محصول',
      composition: { tw: 40, ig: 35, tg: 25 },
    },
  ]}
  compositionScale="custom"
  compositionTokens={{
    tw: 'hsl(var(--social-platform-twitter))',
    ig: 'hsl(var(--social-platform-instagram))',
    tg: 'hsl(var(--social-platform-telegram))',
  }}
  compositionLabels={{
    tw: 'توییتر',
    ig: 'اینستاگرام',
    tg: 'تلگرام',
  }}
/>

نمایش label و افزایش ضخامت حلقه

با showLabels={true} نام مفهوم زیر هر bubble نمایش داده می‌شود؛ با arcThickness و centerRadius اندازه‌ی visual را تنظیم کنید.

<ConceptPulseChart data={data} compositionScale="flow" showLabels={true} centerRadius={18} arcThickness={12} />

حالت خالی و بارگذاری

<ConceptPulseChart data={[]} />
<ConceptPulseChart data={[]} isLoading={true} />

سه مقیاس ترکیب

• compositionScale="flow" (پیش‌فرض) — کلیدها از FlowKey: pro-gov / internal-critic / internal-opponent / external-opponent / grey. توکن‌های --flow-*.
• compositionScale="emotion" — کلیدها از EmotionKey (۹ احساس). توکن‌های --emotion-*.
• compositionScale="custom" — کلیدهای دلخواه + compositionTokens (key→color map) + compositionLabels برای tooltip.

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

Props

ConceptPoint

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

• wrapper با role="img" + aria-label localized.
• tooltip per-point composition breakdown با درصد محلی.
• empty state via EmptyChart.
• arc strokes با background رنگ تفکیک می‌شوند تا در زمینه light/dark خوانا باشند.

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

• PartoScatterChart — scatter ساده بدون composition
• FlowDistribution — نوار composition تنها (نه روی scatter)
• EmotionDistribution — composition احساسی تنها
• ComparisonRadar — مقایسه چند entity در ابعاد