📘

Lookerの備忘録⑥ ダッシュボードで文字の大きさや色を変えたい時にはhtmlをイジろう

2024/12/10に公開

前回はこちら！
Lookerでダッシュボードを作成する際、標準状態ではテキスト（ディメンション値やメジャー値）の表示方法がやや限定的に感じることがあるかもしれません。たとえば「特定の値を太字で目立たせたい」「フォントサイズを小さくしたい」「色を変えたい」といったニーズは日々のレポート作成でよく出てくるものです。
実はLookerでは、htmlパラメータを使うことで表示テキストに任意のHTMLタグ・スタイルを挿入し、文字の見た目を自由にカスタマイズできます。これによってダッシュボード上の値を強調表示したり、行ごとに色を変えたりと、柔軟な視覚表現が可能になります。

 基本的な書き方LookMLでディメンションやメジャーを定義する際、html:パラメータを利用して表示上のスタイルを変更できます。

以下は特定の値が含まれる場合に太字や色を変更する例です。
dimension: TYPE {
  description: "TYPE"
  type: string
  sql: ${TABLE}.TYPE ;;
  html:
    {% if value == 'type1' %}
      <span style='font-weight: bold; color: red;'>{{ value }}</span>
    {% elsif value == 'type2' %}
      <span style='font-weight: bold; color: blue;'>{{ value }}</span>
    {% elsif value == 'type3' %}
      <span style='font-weight: bold; color: orange;'>{{ value }}</span>
    {% else %}
      <span style='color: black;'>{{ value }}</span>
    {% endif %}
  ;;
}
このように設定すると条件に合わせて色が変わります。

 フォントサイズを変える場合フォントサイズを小さくしたい場合は、同様にHTMLタグ内でfont-sizeを指定します。

たとえば、以下のようにすることでタイトル用フィールドの文字サイズを変更可能です。
dimension: TITLE {
  type: string
  sql: ${TABLE}."TITLE" ;;
  html: <p style="font-size:9px">{{ value }}</p>
}
これでダッシュボード内では文字の大きさが変わります。

色々検証しましたが、デフォよりやや小さく表示できるので9pxはおすすめです。
今回はかなり簡素な内容になりましたが、意外と需要のある話だと思います！
次はダッシュボード内でMarkdownを使って画像を表示させるについてです！

基本的な書き方

フォントサイズを変える場合

Discussion