عنصر الخريطة الحرارية

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

آلية العمل

يُعرض المخطط كصورة PNG واحدة يولّدها الخادم (دون مكتبة مخططات تعمل في المتصفح، ودون JavaScript) مع جدول بيانات HTML مرئي دائمًا أسفلها — وهو الاقتران نفسه غير القابل للتفاوض الذي يلتزم به كل مخطط في هذه المجموعة. وليس للخريطة الحرارية شكل السلاسل أو حصص الفئات الذي تتّخذه نظيراتها: فالمقدار يُرمَّز بشدة اللون وحدها على امتداد تدرّج متتابع واحد، ولا يُرمَّز أبدًا بلون تعريفي ثانٍ. أما «مفتاح المخطط» الخاص بها فوق الجدول فهو شريط متدرّج (CSS حقيقي، لا قائمة عيّنات لونية)، يحمل الرقم 0 عند أحد طرفيه وأعلى قيمة فعلية في الشبكة عند الطرف الآخر، ليبيّن الدرجة اللونية المقابلة لكل مقدار.

تُكتب الصفوف بـ«التنسيق الطويل»: صف واحد، وعمود واحد، وقيمة واحدة في كل صف تكتبه — أي خلية واحدة من الشبكة، لا صفًّا أو عمودًا كاملًا دفعة واحدة. وهذا هو الشكل الطبيعي هنا، لأن بيانات المشروع لا تسمح بتداخل المصفوفات داخل مصفوفات. ويجمع العنصر كل الخلايا التي كتبتها في مصفوفة صفوف × أعمدة وقت العرض. وتُحفظ تسميات الصفوف والأعمدة المميّزة بترتيب أول ظهور لها أثناء الكتابة، ولا تُفرز أبدًا — فالخريطة الحرارية التي تسرد أيام الأسبوع تُبقي الاثنين أولًا لأنك كتبته أولًا، لا بسبب أي استنتاج أبجدي أو زمني.

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

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

تعرض الخلايا قيمتها الدقيقة كنص داخل صورة الشبكة مباشرة ما دامت الشبكة صغيرة فقط: حتى 40 خلية إجمالًا (الصفوف × الأعمدة). وبعد ذلك يتولّى تظليل التدرّج وحده نقل المقدار في الصورة نفسها، ويصبح جدول البيانات المرئي دائمًا هو الموضع الذي تُقرأ فيه الأرقام الدقيقة. فحشر نص مقروء في خلايا تتزايد صِغرًا يتوقّف عن النجاح قبل أن تكبر الشبكة بكثير. والحد الأقصى للشبكة 12 صفًّا مميّزًا و24 عمودًا مميّزًا. وأي صف أو عمود جديد إضافي يتجاوز هذين الحدّين يُحذف بدلًا من دمجه في صف أو عمود موجود، لأن دمج صفّين أو عمودين مختلفين فعلًا سيشوّه ما يقيسه كل منهما.

يعتمد التدرّج افتراضيًا على درجة لونية مشتقّة من لون العلامة التجارية للمشروع؛ ويتيح لك حقل لون التدرّج استبدالها بلون من اختيارك.

هذا العنصر يعتمد على الصفوف المكتوبة يدويًا فقط — فليس له وضع ربط بمصدر بيانات ولا وضع ربط بردود حملة. راجع ربط المخططات ببيانات حقيقية لمعرفة أنواع المخططات الأربعة التي تدعم الربط.

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

• عنوان المخطط — يظهر فوق الصورة.
• الخلايا (الصف، العمود، القيمة) — قائمة الصفوف؛ خلية واحدة في الشبكة لكل صف تكتبه.
• لون التدرّج — يستبدل الدرجة اللونية الافتراضية للتدرّج المشتقّة من العلامة التجارية.
• لون الخلفية، والحشو، والحد، واستدارة الزوايا للبطاقة.
• أزواج مستقلة من اللون وحجم الخط للعنوان ولنص مفتاح المخطط والجدول.

أمثلة

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

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

<div style="margin:12px 0;padding:16px;background-color:#ffffff;border-radius:8px">
  <p style="margin:0 0 8px;font-weight:600;font-size:15px;color:#111827">Activity by day and time</p>
  <img src="https://mailinapp.com/api/analytics/chart?d=eyJ0eXBlIjoi...&s=3f9a2b1c..." width="560" height="360"
       alt="Heatmap: 3 rows × 4 columns, values from 0 to 15"
       style="display:block;max-width:100%;height:auto;margin:8px 0" />
  <div style="display:flex;align-items:center;flex-wrap:wrap;gap:8px;margin:0 0 6px">
    <span style="font-size:12px;color:#6b7280">0</span>
    <span aria-hidden="true" style="display:inline-block;width:120px;height:10px;border-radius:5px;background:linear-gradient(to right,#eef2ff,#3730a3)"></span>
    <span style="font-size:12px;color:#6b7280">15</span>
  </div>
  <table style="width:100%;border-collapse:collapse;margin-top:4px">
    <tr>
      <th style="text-align:left;padding:4px 8px;font-weight:600;font-size:12px;color:#6b7280">Row</th>
      <th style="text-align:left;padding:4px 8px;font-weight:600;font-size:12px;color:#6b7280">Column</th>
      <th style="text-align:left;padding:4px 8px;font-weight:600;font-size:12px;color:#6b7280">Value</th>
    </tr>
    <tr>
      <td style="text-align:left;padding:4px 8px;font-size:12px;color:#6b7280">Tue</td>
      <td style="text-align:left;padding:4px 8px;font-size:12px;color:#6b7280">Afternoon</td>
      <td style="text-align:left;padding:4px 8px;font-size:12px;color:#6b7280">15</td>
    </tr>
  </table>
</div>

يحمل مفتاح المخطط المتدرّج تسميتَي طرفي التدرّج 0 والحد الأقصى؛ ويسرد الجدول الصف/العمود/القيمة لكل خلية لها بيانات فعلًا — أما الفجوة الحقيقية فلا تضيف هنا أي صف إطلاقًا.

انظر أيضًا

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