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

Встроенный веб-интерфейс Web SQL (play.html, доступный по пути /play на любом HTTP-порту ClickHouse) может раскрашивать ячейки результатов, чтобы закономерности в столбце было проще заметить с первого взгляда. У каждого столбца есть собственный режим цветового кодирования, который можно переключать независимо от других.

Справа от каждого заголовка столбца отображается значок 🌈. Нажмите его, чтобы по кругу переключать столбец между доступными режимами. На устройствах с указателем, поддерживающим наведение (например, мышью), значок показывается только при наведении на заголовок, чтобы в остальное время не мешать; на сенсорных и других устройствах без наведения значок показывается всегда, чтобы его можно было нажать напрямую.

Набор режимов, доступных для столбца, зависит от его типа:

• Числовые столбцы и столбцы Date/DateTime/Date32/DateTime64 переключаются по циклу bar → heatmap → categorical → none.
• Все остальные столбцы переключаются между none и categorical.

Режим по умолчанию — bar для числовых столбцов и none для всех остальных столбцов, включая столбцы с датой и временем.

• bar — рисует в ячейке горизонтальную полосу, пропорциональную значению. Для числовых столбцов полоса растёт от нулевой базовой линии; для столбцов Date/DateTime вместо этого используется диапазон min..max столбца, поскольку нулевая базовая линия не имеет смысла для временных меток.
• heatmap — заполняет весь фон ячейки цветом, который кодирует значение, масштабированное между минимумом и максимумом столбца.
• categorical — заполняет фон ячейки цветом, полученным хешированием значения ячейки, так что одинаковые значения получают один и тот же цвет, а разные — разные. Это работает для любого типа столбца.
• none — без цветового кодирования.

Столбцы Date, DateTime, Date32 и DateTime64 окрашиваются по их временному значению, разобранному в UTC, поэтому шкала не зависит от часового пояса браузера пользователя.

Для фоновых цветов heatmap и categorical используется цветовое пространство oklch: меняется только цветовой тон, а светлота и цветность остаются фиксированными для каждой темы, чтобы текст в ячейке оставался читаемым и в светлой, и в тёмной теме. Фон заполняет всю ячейку, даже если строка занимает несколько строк.

В режиме categorical при выборе ячейки выделяются другие ячейки с тем же значением: они отображаются более жирным шрифтом и текстом с максимальным контрастом (чисто белым в тёмной теме, чисто чёрным в светлой теме). Сама выбранная ячейка при этом не выделяется. Это позволяет легко увидеть, где ещё в столбце встречается конкретное значение.

Выбранные режимы запоминаются для каждого столбца в URL страницы и в истории браузера, поэтому при перезагрузке страницы, предоставлении ссылки или переходе назад и вперёд они сохраняются. Чтобы URL и состояние истории оставались компактными, сохраняются только значения, отличающиеся от значений по умолчанию.

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