play.html。任意の ClickHouse HTTP ポートの /play パスで提供) では、結果セルに色を付けることで、カラム内のパターンをひと目で見つけやすくできます。各カラムには、個別に切り替え可能な独自の色分けモードがあります。
モードの切り替え
- 数値カラムと
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 色空間を使用し、テーマごとに lightness と chroma を固定したまま hue のみを変化させることで、ライトテーマとダークテーマのどちらでもセル内の文字の可読性を保っています。背景は、1 つの行が複数行にわたる場合でもセル全体を塗りつぶします。
categorical モードでの選択範囲の強調
categorical モードでは、セルを選択すると、同じ値を持つほかのセルが強調され、太字と高コントラストの文字色 (ダークテーマでは純白、ライトテーマでは純黒) で表示されます。選択したセル自体は強調されません。これにより、特定の値がそのカラム内のほかのどこにあるかを簡単に確認できます。
状態の保持
制限事項
- 縦方向 (転置) の単一行レイアウトでは、色分けは表示されません。
DateTime64(9)の差が 1 マイクロ秒未満の場合、グラデーションでは視覚的な意味がないため、カラー スケール上では区別されません。