Web UI 색상 코딩
Web UI 색상 코딩 (Color Coding)
ClickHouse가 제공하는 내장 Web SQL UI는 결과 셀에 색을 입혀 한눈에 패턴을 알아보기 쉽게 해 줍니다. 컬럼마다 독립적으로 색상 코딩 모드를 켜고 끌 수 있어요.
출처: 문서
본문
내장 Web SQL UI(play.html, ClickHouse HTTP 포트의 /play 경로에서 제공됨)는 결과 셀에 색을 입혀 컬럼 안의 패턴을 한눈에 알아보기 쉽게 만들어 줍니다. 각 컬럼은 자신만의, 독립적으로 전환 가능한 색상 코딩 모드를 가집니다.
모드 전환하기
모든 컬럼 헤더 오른쪽에 🌈 아이콘이 나타납니다. 아이콘을 클릭하면 해당 컬럼이 사용 가능한 모드를 순서대로 순환합니다. 호버링 포인터(마우스)가 있는 기기에서는 헤더에 마우스를 올렸을 때만 아이콘이 표시되어 나머지 때는 방해가 되지 않습니다. 호버가 없는 터치 기기나 다른 조잡한(coarse) 포인터 기기에서는 아이콘이 항상 표시되므로 바로 탭할 수 있습니다.
컬럼이 제공하는 모드 집합은 타입에 따라 달라집니다:
- 숫자 컬럼과
Date/DateTime/Date32/DateTime64컬럼은bar→heatmap→categorical→none순으로 순환합니다. - 그 외의 모든 컬럼은
none과categorical사이를 전환합니다.
기본 모드는 숫자 컬럼의 경우 bar이고, 날짜·시간 컬럼을 포함한 나머지 모든 컬럼은 none입니다.
모드들
- bar — 셀 안에 값에 비례하는 수평 막대를 그립니다. 숫자 컬럼에서는 0 기준선에서 막대가 자라납니다.
Date/DateTime컬럼에서는 0 기준선이 타임스탬프에 의미가 없으므로 대신 컬럼의min..max범위에 걸치게 됩니다. - heatmap — 컬럼의 최솟값과 최댓값 사이에서 값의 크기를 인코딩한 색으로 셀 배경 전체를 채웁니다.
- categorical — 셀의 값을 해싱해 얻은 색으로 배경을 채웁니다. 따라서 같은 값은 같은 색, 다른 값은 다른 색을 얻습니다. 어떤 컬럼 타입이든 동작합니다.
- none — 색상 코딩을 하지 않습니다.
Date, DateTime, Date32, DateTime64 컬럼은 시간 값으로 색을 입히는데, UTC로 파싱되므로 스케일이 보는 사람의 브라우저 시간대와 무관합니다.
heatmap과 categorical 배경 색은 oklch 색 공간을 사용하며, 테마마다 밝기와 채도는 고정하고 색상(hue)만 바꿉니다. 그래서 밝은 테마와 어두운 테마 모두에서 셀 텍스트가 읽기 쉽게 유지됩니다. 배경은 행이 여러 줄에 걸쳐 있어도 셀 전체를 채웁니다.
선택 시 categorical 강조
categorical 모드에서는 셀을 선택하면 같은 값을 공유하는 다른 셀들이 강조됩니다. 더 굵은 글꼴과 완전한 대비의 텍스트 색(어두운 테마에서는 순수 흰색, 밝은 테마에서는 순수 검정)으로 그려집니다. 선택된 셀 자체는 강조되지 않은 채 남습니다. 이렇게 하면 특정 값이 컬럼의 어디에 더 나타나는지 쉽게 알 수 있습니다.
지속성 (Persistence)
선택한 모드는 페이지 URL과 브라우저 히스토리에 컬럼별로 기억됩니다. 그래서 페이지를 새로고침하거나 링크를 공유하거나 뒤로/앞으로 탐색해도 유지됩니다. URL과 히스토리 상태를 간결하게 유지하기 위해 기본값이 아닌 선택만 저장됩니다.
제한사항
- 세로(전치, transposed) 단일 행 레이아웃은 색상 코딩을 표시하지 않습니다.
DateTime64(9)에서 마이크로초 미만의 차이는 색상 스케일에서 구분되지 않는데, 그라데이션에 시각적으로 의미가 없기 때문입니다.