MailInApp
Documentation menu

عنصر مخطط Sankey

أشرطة تدفّق متناسبة بين عُقد مسمّاة — صفوف «من» و«إلى» و«القيمة»، مثل مصدر الزيارات ← الصفحة المقصودة ← التحويل. وهو الشكل المناسب لتتبّع وجهة الحجم أثناء انتقاله عبر سلسلة من المراحل، حين لا يكفي التسلسل الخطي الواحد في مخطط مسار التحويل العادي لإظهار المسارات المتفرّعة.

آلية العمل

على خلاف كل المخططات النظيرة في هذه المجموعة، لا تُكتب عُقد مخطط Sankey مباشرة — فلا يوجد عمود «عقدة» لتعبئته إطلاقًا. بل تُستخرج العُقد من التسميات التي تتكرّر عبر عمودَي من وإلى: اكتب «زار الموقع» كقيمة في عمود «من» في أحد الصفوف وكقيمة في عمود «إلى» في صف آخر، فتكون العقدة نفسها في الحالتين. ويُحسب أيضًا موضع كل عقدة من اليسار إلى اليمين (أي الطبقة العمودية التي تقع فيها)، عبر تمرير لأطول مسار على الرسم البياني الموجّه الذي تصفه صفوفك. فالعقدة التي لا تدفّق داخلًا إليها تبدأ في الطبقة الأبعد إلى اليسار، وكل عقدة أخرى تقع بعد طبقة واحدة من أبعد عقدة سابقة لها في أعلى المسار. ولا شيء من ذلك تحدّد موضعه يدويًا.

قيمة كل رابط كمية موجبة بسيطة — فليس للتدفّق قراءة «سالبة» ذات معنى، ولذا تُحذف القيمة الصفرية أو السالبة المكتوبة عند التجميع بدلًا من رسمها كشريط معكوس أو معدوم العرض. ويُتخطّى الرابط الذاتي (صف تتطابق فيه تسميتا «من» و«إلى») كليًا، لأن العقدة المتدفّقة إلى نفسها ليس لها شريط ذو معنى في تخطيط من اليسار إلى اليمين. وتُجمع الصفوف المتكرّرة التي تصف زوج «من»/«إلى» نفسه معًا، ولا يحلّ بعضها محلّ بعض — فصفّان يقول كلاهما «الإحالة ← التسجيل» يعنيان فعلًا ضعف التدفّق، على خلاف القياس الواحد الذي ينبغي أن يحلّ محلّه التعديل اللاحق.

يعتمد لون الرابط افتراضيًا على لون عقدته المصدر (وهي قراءة Sankey التقليدية «ملوّن بحسب المنشأ») ما لم تستبدله لكل صف عبر خلية لون التدفّق الاختيارية. أما ألوان العُقد نفسها فلا يمكن كتابتها مباشرة — إذ تأخذ العقدة ببساطة خانة اللون الثابتة التالية بترتيب أول ظهور، وهو توزيع الألوان نفسه القائم على الهوية الذي يستخدمه كل مخطط آخر في هذه المجموعة.

بعد تجاوز الحد الأقصى للعُقد أو الروابط (12 عقدة، و24 رابطًا)، تُحذف العقدة الزائدة ولا تُدمج. وهذا اختلاف مقصود عن طريقة تعامل المخطط الدائري أو الخريطة الشجرية مع الفائض. فدمج نقطتي نهاية مختلفتين للتدفّق في عقدة اصطناعية واحدة باسم «أخرى» سيشوّه ما يعرضه المخطط فعلًا، لأن الغاية الكاملة من مخطط Sankey هي تتبّع المسارات المميّزة، لا تلخيص حصة من الكل.

ويُحذف كذلك أي رابط حُذف مصدره أو هدفه مع عقدة مقتطعة. غير أن جدول البيانات يظل يسرد كل صف كتبته بغضّ النظر عمّا إذا كان قد ظهر في المخطط المرسوم، بما في ذلك التدفّقات التي يتركها خطأ دوري في الكتابة (A → B → A) دون رسم رغم أنها حقيقية. فلا يختفي شيء كتبته عن الأنظار بصمت.

الحقول القابلة للضبط:

  • عنوان المخطط — نص عنوان اختياري فوق المخطط.
  • التدفّقات (من، إلى، القيمة) — قائمة الصفوف: تسمية من، وتسمية إلى، وقيمة رقمية، واستبدال اختياري لـلون التدفّق لكل تدفّق.
  • لون الخلفية، والحشو، والحد، واستدارة الزوايا للبطاقة.
  • لون/حجم العنوان ولون/حجم مفتاح المخطط — تنسيق نص العنوان ونص مفتاح المخطط والجدول أسفل الصورة.

إذا لم تُكتب أي صفوف تدفّق صالحة بعد — أي كانت كل الصفوف فارغة، أو ذاتية الارتباط، أو غير موجبة — يتخطّى العنصر الصورة. فتعرض عنوانها وإطار بطاقتها فقط، مع إشعار بسيط «أضف صفًّا واحدًا على الأقل من بيانات التدفّق (من، إلى، القيمة) لعرض هذا المخطط» بدلًا منها.

أمثلة

مخطط لرحلة المستخدم — زار الموقع ← سجّل ← اشترى، مع فرع ثانٍ إلى غادر فورًا وفرع ثالث إلى توقّف عن الاستخدام — يجعل التسرّب والتفرّع مرئيَّين في صورة واحدة، حيث كان مخطط مسار التحويل سيجبر كل شيء على خط واحد. ويمنح تدفّق توزيع الميزانية (الإيرادات ← ميزانيات الأقسام ← البنود) ملخّصًا ماليًا تتبّعًا بصريًا لانتقال المال مرحلةً بمرحلة. ويمكن لفريق الدعم أن يعرض تدفّق حجم التذاكر من القناة (البريد الإلكتروني/الدردشة/الهاتف) عبر الفئة (الفوترة/الأخطاء البرمجية/الاستفسارات الإرشادية) إلى الحل (مُحلّة/مُصعَّدة)، ليُبرز أي القنوات تغذّي أي النتائج.

كيف يبدو البديل الثابت

<div style="margin:12px 0;background-color:#ffffff;padding:16px">
  <p style="margin:0 0 8px;font-weight:600;font-size:15px;color:#111827">Signup journey</p>
  <img src="https://mailinapp.com/api/analytics/chart?d=eyJ0eXBlIjoi...&s=3f9a2b1c..." width="560" height="360"
       alt="Flow diagram: Visited to Signed up 120, Visited to Bounced 380, Signed up to Purchased 45, Signed up to Churned 75" />
  <table style="width:100%;border-collapse:collapse;margin-top:4px">
    <tr>
      <th style="text-align:left;padding:4px 8px;font-weight:600">From</th>
      <th style="text-align:left;padding:4px 8px;font-weight:600">To</th>
      <th style="text-align:left;padding:4px 8px;font-weight:600">Value</th>
    </tr>
    <tr>
      <td style="padding:4px 8px">Visited</td>
      <td style="padding:4px 8px">Signed up</td>
      <td style="padding:4px 8px">120</td>
    </tr>
  </table>
</div>

يسرد النص البديل كل شريط تدفّق مرسوم؛ ويسرد الجدول كل صف مكتوب، بما في ذلك أي صف تركه الحد الأقصى للعُقد/الروابط أو التخطيط الدوري دون رسم.

انظر أيضًا