بطاقة مخطط سانكي
تدفق Sankey في غلاف بطاقة لوحة التحكم. يرتب Recharts العقد والروابط؛ تعرض البطاقة عقدًا على شكل حبوب برموز التصميم للمخطط، وتلوّن كل شريط بلون مصدره لتبدو تدفقات كل أصل كعائلة واحدة، وتُعنوِن المصادر بالاسم والقيمة على اليسار والمصارف بحصتها على اليمين، وتعزل ما تمرر عليه - عقدة أو رابط - بينما يتبع العنوان الرئيسي.
Tracked time
86h
التثبيت
بطاقة مخطط سانكي جزء من BoardUI Pro.
الوضع الداكن جاهز - هذا مكوّن يتبع رموز التصميم الدلالية لـ BoardUI تلقائياً. إعداد تبديل السمة.
هل تستخدم حزمة واجهة مستخدم مشتركة أو أسماء استيراد مختصرة مخصصة؟ تهيئة مسارات التثبيت قبل تشغيل CLI. تستخدم أمثلة النسخ واللصق الاستيرادات الافتراضية.
البيانات
nodes هو { name, color? } قائمة و links هو { source, target, value }، مع الإشارة إلى العقد بالاسم أو الفهرس. قيم العقد، والإجمالي الرئيسي، وحصص المصرف، وعلاقات التمرير مشتقة جميعها من الروابط. تصبح حبة الفترة الزمنية قائمة منسدلة عند تمرير ranges - كل نطاق يحمل بياناته الخاصة (واختياريًا delta / headline) وتُعيد الرسم البياني تحريكه عند التحديد؛ onRangeChange يتيح لك الجلب بدلاً من ذلك. عند غياب خصائص البيانات، تُشحن البطاقة بثلاثة نطاقات تجريبية، وهو ما تستخدمه المعاينات أعلاه.
// Sources carry the colour - every ribbon leaving a node takes that node's// colour (linkColor="source", the default) - and sinks stay "neutral" so the// ribbons paint them. Nodes without a colour cycle the palette by index.const nodes = [ { name: "Focus", color: "var(--color-chart-7)" }, { name: "Meetings", color: "var(--color-chart-5)" }, { name: "Browsing", color: "neutral" }, { name: "Writing", color: "neutral" }, { name: "Email", color: "neutral" },];
// Links reference nodes by name (or index). Add a node + link and the// layout rebalances; the right-hand percentages are shares of all sinks.const links = [ { source: "Focus", target: "Browsing", value: 16.2 }, { source: "Focus", target: "Writing", value: 11.6 }, { source: "Focus", target: "Email", value: 3.4 }, { source: "Meetings", target: "Email", value: 1.2 },];
<SankeyChartCard title="Tracked time" nodes={nodes} links={links} format={(n) => `${n}h`} // headline + source labels range="This week" // static pill… axisLabels={["Tracked time", "Share of tracked time"]}/>
// …or a working period dropdown: each range overrides links (and nodes / delta / headline).<SankeyChartCard nodes={nodes} ranges={[ { id: "this-week", label: "This week", links: thisWeek }, { id: "last-week", label: "Last week", links: lastWeek }, { id: "this-month", label: "This month", links: thisMonth }, ]}/>