نمودار Sankey (PartoSankeyChart)
نمودار جریان (flow) بین گره‌ها — ضخامت اتصال نشان‌دهنده میزان جریان است. مناسب برای نمایش مسیر داده در افکارسنجی.
معرفی
PartoSankeyChart یک نمودار جریان است که نشان می‌دهد «چقدر» از یک گره به گره دیگر منتقل می‌شود. ضخامت هر اتصال متناسب با مقدار جریان است.
چه زمانی استفاده کنیم:
- جریان دیدگاه: منبع (رسانه) → احساس (موافق/مخالف/خنثی)
- قیف تبدیل: ورودی → مراحل فرآیند → خروجی
- نمایش multi-stage split/merge (برای افکارسنجی: source → category → sentiment)
- تحلیل مسیر (user journey flow)
چه زمانی استفاده نکنیم:
- وقتی گره‌ها گراف acyclic ندارند (حلقه دارند) — از
PartoNetworkChartاستفاده کنید - سری زمانی — از
PartoLineChart - توزیع سهم — از
PartoPieChart
| مبدأ | مقصد | مقدار |
|---|---|---|
| حامی | مثبت | 4,820 |
| حامی | خنثی | 1,310 |
| حامی | دوگانه | 640 |
| حامی | منفی | 390 |
| مخالف | منفی | 3,970 |
| مخالف | دوگانه | 820 |
| مخالف | خنثی | 760 |
| مخالف | مثبت | 210 |
| بی‌طرف | خنثی | 2,640 |
| بی‌طرف | مثبت | 880 |
| بی‌طرف | منفی | 710 |
| بی‌طرف | دوگانه | 450 |
زمین بازی
با تغییر تنظیمات زیر، پیش‌نمایش زنده را مشاهده کنید.
زمین بازی
| مبدأ | مقصد | مقدار |
|---|---|---|
| منبع | پلتفرم اول | 30 |
| منبع | پلتفرم دوم | 50 |
| پلتفرم اول | مقصد | 25 |
| پلتفرم دوم | مقصد | 40 |
تنظیمات
محتوا
حالت
کد این نمونه به‌صورت خودکار قابل تولید نیست — برای کد آماده‌ی copy/paste به بخش «استفاده» در بالای صفحه مراجعه کنید.
استفاده
'use client'
import { PartoSankeyChart } from '@partodata/ui'
const nodes = [
{ name: 'اخبار' },
{ name: 'شبکه اجتماعی' },
{ name: 'موافق' },
{ name: 'مخالف' },
]
const links = [
{ source: 0, target: 2, value: 45 }, // اخبار → موافق
{ source: 0, target: 3, value: 20 }, // اخبار → مخالف
{ source: 1, target: 2, value: 55 }, // شبکه → موافق
{ source: 1, target: 3, value: 60 }, // شبکه → مخالف
]
<div style={{ height: 340 }}>
<PartoSankeyChart nodes={nodes} links={links} />
</div>حالت‌ها و انواع
جریان منبع → احساس
ساده‌ترین حالت دومرحله‌ای: از منبع (پلتفرم، رسانه) به سمت احساس کلی (موافق/مخالف/خنثی). برای bulletin افکارسنجی روزانه استفاده کنید.
const nodes = [
{ name: 'توییتر' },
{ name: 'اینستاگرام' },
{ name: 'تلگرام' },
{ name: 'موافق' },
{ name: 'خنثی' },
{ name: 'مخالف' },
]
const links = [
{ source: 0, target: 3, value: 30 },
{ source: 0, target: 4, value: 15 },
{ source: 0, target: 5, value: 25 },
{ source: 1, target: 3, value: 50 },
{ source: 1, target: 4, value: 10 },
{ source: 1, target: 5, value: 20 },
{ source: 2, target: 3, value: 18 },
{ source: 2, target: 5, value: 22 },
]
<PartoSankeyChart nodes={nodes} links={links} />جریان چندمرحله‌ای — پلتفرم → موضوع → احساس
برای تحلیل عمیق‌تر می‌توانید سه ستون یا بیشتر داشته باشید. الگوریتم layout هر ستون را به‌صورت خودکار تشخیص می‌دهد.
const nodes = [
{ name: 'توییتر' }, { name: 'اینستاگرام' },
{ name: 'اقتصاد' }, { name: 'سیاست خارجی' }, { name: 'فرهنگ' },
{ name: 'موافق' }, { name: 'مخالف' },
]
const links = [
{ source: 0, target: 2, value: 40 },
{ source: 0, target: 3, value: 20 },
{ source: 1, target: 2, value: 25 },
{ source: 1, target: 4, value: 30 },
{ source: 2, target: 5, value: 35 },
{ source: 2, target: 6, value: 30 },
{ source: 3, target: 6, value: 20 },
{ source: 4, target: 5, value: 30 },
]
<PartoSankeyChart nodes={nodes} links={links} />رنگ سفارشی روی گره با theme-aware token
با color روی هر گره می‌توانید رنگ token-based پاس دهید تا در dark/light به‌درستی switch شود. برای جریان‌هایی که معنی رنگی دارند (مثلاً سبز=موافق) استفاده کنید.
const nodes = [
{ name: 'منبع' },
{ name: 'موافق', color: 'var(--sentiment-positive)' },
{ name: 'مخالف', color: 'var(--sentiment-negative)' },
{ name: 'خنثی', color: 'var(--sentiment-neutral)' },
]
const links = [
{ source: 0, target: 1, value: 45 },
{ source: 0, target: 2, value: 30 },
{ source: 0, target: 3, value: 25 },
]
<PartoSankeyChart nodes={nodes} links={links} />تنظیم spacing و عرض گره‌ها
برای جریان‌های شلوغ می‌توانید با nodePadding فاصله عمودی بین گره‌ها و با nodeWidth عرض مستطیل گره را تنظیم کنید.
<PartoSankeyChart nodes={nodes} links={links} nodeWidth={10} nodePadding={24} />حالت خالی
<PartoSankeyChart nodes={[]} links={[]} />راهنمای استفاده
بکنید
- برای داده‌های flow و transition استفاده کنید — منبع → دسته، احساس → اقدام، یا قیف چندمرحله‌ای. - گره‌ها را به‌صورت
acyclic (بدون حلقه) و در لایه‌های مشخص نگه دارید تا الگوریتم layout بهینه کار کند. - مقادیر
valueرا به یک واحد یکسان (تعداد، درصد، حجم) محدود کنید تا ضخامت اتصال‌ها قابل مقایسه باشد.
نکنید
- وقتی مجموعه source/target از حدود 15 گره فراتر می‌رود استفاده نکنید — برچسب‌ها روی هم می‌افتند و خوانایی از بین
می‌رود. - برای سری زمانی استفاده نکنید — از
PartoLineChartاستفاده کنید. - برای گراف غیر-acyclic (با حلقه) استفاده نکنید — ازPartoNetworkChartاستفاده کنید.
Props
SankeyNode / SankeyLink
دسترسی‌پذیری
- wrapper با
role="img"+aria-labellocalized. - tooltip برای هر link وقتی hover می‌شود — نشان‌دهنده
source → target: value. - نام دو گره در برچسب tooltip با نشانگرهای جداسازی دوجهته یونیکد (
U+2068…U+2069) بسته‌بندی می‌شوند. بدون آن، فلش→یک نویسه خنثی میان دو نام فارسی است و الگوریتم دوجهته آن را راست‌به‌چپ می‌کند؛ نتیجه این است که فلش به‌جای مقصد به مبدأ اشاره می‌کند. همین رشته بهtooltipFormatterسفارشی هم داده می‌شود تا در هر جای دیگری که رندر شود درست بماند. - empty-state اگر nodes/links خالی باشند، EmptyChart رندر می‌شود.
کامپوننت‌های مرتبط
- PartoNetworkChart — برای گراف آزاد (غیر-acyclic)
- PartoPieChart — برای نمایش سهم در یک سطح
- PartoBarChart — برای مقایسه ساده دسته‌ها