> ## 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 (`/play`)

# Цветовое кодирование в веб-интерфейсе

Встроенный веб-интерфейс Web SQL (`play.html`, доступный по пути [`/play`](/docs/ru/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 страницы и в истории браузера, поэтому при перезагрузке страницы, предоставлении ссылки или переходе назад и вперёд они сохраняются. Чтобы URL и состояние истории оставались компактными, сохраняются только значения, отличающиеся от значений по умолчанию.

<div id="limitations">
  ## Ограничения
</div>

* В вертикальном (транспонированном) однострочном представлении цветовое кодирование не отображается.
* Разности `DateTime64(9)` меньше микросекунды не различаются на цветовой шкале, так как для градиента это визуально не имеет смысла.