> ## Documentation Index
> Fetch the complete documentation index at: https://clickhouse.com/docs/llms.txt
> Use this file to discover all available pages before exploring further.

> توثيق لأوضاع الترميز اللوني لكل عمود على حدة في Web SQL UI المدمجة (`/play`)

# الترميز اللوني في Web UI

يمكن لـ Web SQL UI المدمجة (`play.html`، والمتاحة على المسار [`/play`](/docs/ar/concepts/features/interfaces/http) لأي منفذ HTTP في ClickHouse) تلوين خلايا النتائج لتسهيل تمييز الأنماط في العمود بنظرة سريعة. ولكل عمود وضع ترميز لوني خاص به يمكن تبديله بشكل مستقل.

<div id="switching-the-mode">
  ## تبديل الوضع
</div>

تظهر أيقونة 🌈 إلى يمين عنوان كل عمود. انقر عليها للتنقّل بين الأوضاع المتاحة للعمود. على الأجهزة التي تستخدم مؤشّرًا يدعم التحويم (مثل الفأرة)، لا تظهر الأيقونة إلا عند تمرير المؤشّر فوق العنوان، حتى لا تعيق العرض في غير ذلك؛ أمّا على الأجهزة اللمسية وغيرها من الأجهزة ذات المؤشّر غير الدقيق التي لا تدعم التحويم، فتظهر الأيقونة دائمًا لتسهيل الضغط عليها مباشرة.

تعتمد مجموعة الأوضاع التي يوفّرها العمود على نوعه:

* تتنقّل الأعمدة الرقمية وأعمدة `Date`/`DateTime`/`Date32`/`DateTime64` عبر `bar` → `heatmap` → `categorical` → `none`.
* تتبدّل جميع الأعمدة الأخرى بين `none` و`categorical`.

الوضع الافتراضي هو `bar` للأعمدة الرقمية و`none` لجميع الأعمدة الأخرى، بما في ذلك أعمدة التاريخ والوقت.

<div id="modes">
  ## الأوضاع
</div>

* **`bar`** — يرسم شريطًا أفقيًا داخل الخلية يتناسب مع القيمة. في الأعمدة الرقمية، ينمو الشريط انطلاقًا من خط أساس صفري؛ أما في أعمدة `Date`/`DateTime` فيمتد عبر النطاق `min`..`max` الخاص بالعمود بدلًا من ذلك، لأن خط الأساس الصفري لا يكون ذا معنى مع الطوابع الزمنية.
* **`heatmap`** — يملأ خلفية الخلية بالكامل بلون يشفّر القيمة بعد تحجيمها بين الحد الأدنى والحد الأقصى للعمود.
* **`categorical`** — يملأ خلفية الخلية بلون مشتق من تجزئة قيمة الخلية، بحيث تحصل القيم المتساوية على اللون نفسه وتحصل القيم المختلفة على ألوان مختلفة. وينطبق ذلك على أي نوع من الأعمدة.
* **`none`** — بدون ترميز لوني.

تُلوَّن أعمدة `Date` و`DateTime` و`Date32` و`DateTime64` بحسب قيمتها الزمنية، بعد تحليلها بصيغة UTC بحيث يكون المقياس مستقلًا عن المنطقة الزمنية في متصفح المستخدم.

تستخدم ألوان الخلفية في `heatmap` و`categorical` الفضاء اللوني `oklch`، مع تغيير درجة اللون فقط مع إبقاء السطوع والتشبّع ثابتين لكل نسق، بحيث يظل نص الخلية قابلًا للقراءة في كلٍّ من النسق الفاتح والداكن. وتملأ الخلفية الخلية بأكملها حتى عندما يمتد الصف على أكثر من سطر واحد.

<div id="categorical-emphasis">
  ## إبراز التحديد في وضع `categorical`
</div>

في وضع `categorical`، يؤدي تحديد خلية إلى إبراز الخلايا الأخرى التي تحمل القيمة نفسها، وذلك بعرضها بخط أكثر سماكة ولون نص عالي التباين (أبيض ناصع في النسق الداكن، وأسود ناصع في النسق الفاتح). أما الخلية المحددة نفسها، فلا تُبرز. وهذا يسهّل رؤية المواضع الأخرى التي تظهر فيها قيمة معيّنة داخل العمود.

<div id="persistence">
  ## الاحتفاظ
</div>

تُحفَظ الأوضاع المحددة لكل عمود في URL الصفحة وفي سجل المتصفح، لذا فإن إعادة تحميل الصفحة أو مشاركة الرابط أو التنقل ذهابًا وإيابًا يُبقيها كما هي. لا تُخزَّن إلا الخيارات غير `default`، للحفاظ على صِغر حجم URL وحالة السجل.

<div id="limitations">
  ## القيود
</div>

* لا يعرض التخطيط العمودي (المنقول) لصف واحد أي ترميز لوني.
* لا يميّز مقياس الألوان فروق `DateTime64(9)` التي تقل عن ميكروثانية، إذ لا يكون ذلك ذا دلالة بصرية في التدرج اللوني.