عنصر بطاقة مؤشرات الأداء

رقم رئيسي كبير واحد للمقياس الذي تتناوله الرسالة — الإيرادات، أو التسجيلات، أو NPS، أو أيًّا كان ما ينبغي أن يراه المستلم أولًا. إنه العنصر الذي تبدأ به معظم رسائل الملخّصات ولوحات المعلومات، وغالبًا ما تأتي ثلاث بطاقات في صف واحد فوق مخطط.

آلية العمل

تتكوّن البطاقة من تسمية، وقيمة كبيرة، ومؤشر اتجاه اختياري، وخط اتجاه مصغّر اختياري — بهذا الترتيب المرئي من الأعلى إلى الأسفل. تُعرض القيمة والتسمية دائمًا نصًّا حقيقيًا بلغة HTML، بأي حجم خط ولون تضبطهما؛ فلا شيء في قراءة الرقم الرئيسي يعتمد على تحميل صورة. وحده خط الاتجاه المصغّر صورة PNG مولَّدة، وحتى هو مجرد زخرفة فوق رقم مقروء أصلًا من دونه.

لا يظهر مؤشر الاتجاه (الفرق «Δ») إلا بعد ضبط كلٍّ من القيمة السابقة واتجاه التغيّر. يتعامل العنصر معهما بوصفهما وحدة واحدة تكتبها بنفسك، لا حقلين اختياريين مستقلين، فلا تنشأ أبدًا حالة ملتبسة تظهر فيها نسبة الفرق Δ دون سهم يوضّح أي اتجاه هو الجيد. تُحسب النسبة نفسها دائمًا من value مقارنةً بـ previousValue؛ أما الاتجاه (صعود/هبوط/ثبات) فلا يُستنتج من ارتفاع الرقم أو انخفاضه — بل تحدّده أنت بنفسك.

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

خط الاتجاه المصغّر صورة صغيرة لخط اتجاه ترسم القيم التي تكتبها في حقل قيم خط الاتجاه المصغّر — أو، في وضع الربط، قيم الحقل المربوط صفًّا بصف، بحد أقصى 60 نقطة. ولا يُرسم إلا عند توفّر نقطتين على الأقل يُمدّ بينهما خط. ويتبع لون خطه لون الفرق Δ إن وُجد، فيبدو الاتجاه الهابط المقلق أحمر حرفيًا من النظرة الأولى؛ وإن لم يُضبط فرق Δ، يعود إلى لون العلامة التجارية للمشروع.

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

• التسمية — اسم المقياس، مع لونها وحجم خطها الخاصين.
• القيمة — الرقم الرئيسي، كسلسلة نصية حرفية (فيمكن أن تحمل وسم دمج أيضًا).
• التنسيق — رقم، أو عملة (USD، دون كسور عشرية)، أو نسبة مئوية — يتحكّم في طريقة تنسيق value وpreviousValue للعرض، لا في طريقة تخزينهما.
• القيمة السابقة — نقطة المقارنة للفرق Δ. وهي مطلوبة إلى جانب اتجاه التغيّر لكي يظهر أي فرق Δ أصلًا.
• اتجاه التغيّر — بلا / صعود / هبوط / ثبات. يحدّد رمز السهم ولونه معًا.
• قيم خط الاتجاه المصغّر — قائمة أرقام تكتبها يدويًا، تُرسم من اليسار إلى اليمين.
• لون الخلفية، والحشو، والحدّ، واستدارة الزوايا للبطاقة.
• أزواج مستقلة من اللون/حجم الخط لنص القيمة ونص التسمية.

إلى جانب القيم المكتوبة يدويًا، يمكن لبطاقة مؤشرات الأداء ربط قيمتها بمصدر بيانات متصل أو بنتائج ردود حملة سابقة. يقرن الربط بمصدر بيانات حقل قيمة بدالة تجميع (المجموع، أو المتوسط، أو العدد، أو آخر صف) تختصر كل الصفوف المربوطة في الرقم الرئيسي الوحيد. لا يستبدل الربط إلا value وبيانات مصدر خط الاتجاه المصغّر؛ أما previousValue وtrendDirection فيبقيان دائمًا مما تكتبه أنت، لأن رقم «سابق» مربوطًا سيحتاج إلى لقطات تاريخية لا تحتفظ بها بنية البيانات هذه. راجع ربط المخططات ببيانات حقيقية لمعرفة التفاصيل الكاملة لكلا الوضعين.

أمثلة

أسرع طريقة لرؤية هذا العنصر في سياقها هي بدء مشروع بالغرض لوحة المعلومات. فهو يضيف عنوان «الأداء الأسبوعي» وثلاث بطاقات لمؤشرات الأداء متجاورة في أعمدة: الإيرادات كعملة مع فرق Δ صاعد، والتسجيلات الجديدة كرقم عادي مع فرق Δ صاعد، ومعدل التحويل كنسبة مئوية مع فرق Δ ثابت. ويليها مخطط شريطي (الإعداد المسبق «شبكة لوحة المعلومات»). إنها نقطة انطلاق بأرقام توضيحية معقولة، غير مربوطة بأي شيء حتى تربطها بنفسك.

قد يبدأ ملخّص عمليات أسبوعي بثلاث بطاقات (التذاكر المفتوحة، ومتوسط وقت الاستجابة، وCSAT)، لكل منها فرق Δ مقارنة بالأسبوع الماضي، فيحصل القارئ على العنوان الرئيسي قبل أن يمرّر إلى أي مخطط. ويمكن لتقرير ما بعد الحملة استخدام بطاقة كبيرة واحدة لـ«إجمالي الإيرادات» مربوطة بطلبات عنصر المنتج في تلك الحملة عبر دالة تجميع لمصدر بيانات، مع خط اتجاه مصغّر يُظهر التصاعد يومًا بيوم حتى الإرسال. وقد يعرض الملخّص الشهري لنشاط قائم على الاشتراكات الإيرادات الشهرية المتكررة (MRR)، والحسابات المفقودة، وصافي الحسابات الجديدة معًا: ثلاث بطاقات، وثلاثة اتجاهات مختلفة للفرق Δ، كلٌّ منها ملوّن بشكل صحيح لأن الاتجاه يُكتب لكل بطاقة على حدة بدلًا من تخمينه من إشارة التغيّر.

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

<div style="margin:12px 0;padding:16px;background-color:#ffffff;border-radius:8px">
  <p style="margin:0 0 4px;font-weight:600;font-size:13px;color:#6b7280">Revenue</p>
  <p style="margin:0 0 6px;font-weight:700;font-size:32px;color:#111827">
    $24,800
    <span style="font-size:14px;font-weight:600;color:#16a34a">▲ +18.1%</span>
  </p>
  <img src="https://mailinapp.com/api/analytics/chart?d=eyJ0eXBlIjoi...&s=3f9a2b1c..." width="160" height="40"
       alt="Trend sparkline, upward: 18000, 19500, 21000, 24800"
       style="display:block;max-width:100%;height:auto;margin:4px 0" />
  <p style="margin:4px 0 0;font-size:11px;color:#9ca3af">Revenue — $24,800 — ▲ +18.1% vs previous</p>
</div>

القيمة والتسمية والفرق Δ كلها نص حقيقي قبل أن يظهر <img> خط الاتجاه المصغّر أصلًا؛ ويكرّر السطر الرمادي الصغير أسفلها الحقائق الثلاث نفسها نصًّا عاديًا، فتبقى البطاقة مقروءة بالكامل مع إيقاف الصور.

انظر أيضًا

• عناصر التحليلات والمخططات
• ربط المخططات ببيانات حقيقية
• المخطط الشريطي