HTML

사용

view: view_name {
  dimension: field_name {
    html: <img src="https://www.brettcase.com/
          product_images/{{ value }}.jpg"/> ;;
  }
}
계층 구조
view
입력란 유형
html
사용 가능한 입력란 유형
측정기준, 측정기준 그룹, 측정값

허용
Liquid 템플릿 요소를 사용할 수 있는 HTML 표현식(세미콜론 2개로 끝남)

정의

html 매개변수를 사용하면 필드에 포함될 HTML을 지정할 수 있습니다.

Liquid 변수를 사용하여 일반적으로 해당 필드에 들어가는 값에 액세스할 수도 있습니다. 이를 통해 관련된 다른 Look으로의 링크, 외부 웹사이트 링크, 이미지 등 여러 유용한 기능을 만들 수 있습니다.

여러 필드가 결합될 때 HTML 서식은 테이블, 테이블 (기존), 단일 값 차트 시각화 및 시각화 도움말에서만 렌더링됩니다. 맵 차트 도움말에 html 매개변수로 배치된 대화형 콘텐츠는 새로운 대시보드 환경을 사용하는 대시보드에서 액세스할 수 없습니다. Look, Explore, 기존 대시보드에서는 액세스할 수 있습니다.

콘텐츠를 다운로드할 때 HTML 서식은 TXT, CSV, Excel, JSON 등의 텍스트 기반 다운로드 형식에는 적용되지 않습니다.

유효한 HTML 사용

특정 보안 악용을 방지하기 위해 Looker는 사용할 수 있는 HTML 태그 및 속성과 사용할 수 있는 CSS 속성을 제한합니다. 자세한 내용은 HTML 삭제 문서 페이지를 참고하세요.

Liquid 변수

html 매개변수는 Liquid 변수를 지원합니다. 이러한 변수를 최대한 활용하는 방법에 관한 자세한 내용은 Liquid 변수 문서 페이지를 참고하세요.

예시

다음은 html 필드 매개변수를 사용하는 몇 가지 예입니다.

여러 필드가 결합될 때 HTML 서식은 테이블, 단일 값 차트 시각화 및 시각화 도움말에서만 렌더링됩니다. 맵 차트 도움말에 html 매개변수로 배치된 대화형 콘텐츠는 대시보드에서 액세스할 수 없습니다. Look 및 Explore에서는 액세스할 수 있습니다.

시각화에서 HTML을 사용하여 필드 값의 글꼴과 색상을 맞춤설정하는 방법에 관한 추가 예시는 조건부 서식 맞춤설정 페이지와 시각화 도움말 맞춤설정 페이지의 Looker에서 시각화 최대한 활용하기 설명서를 참고하세요.

html 매개변수에서 Liquid 변수 사용

이 예에서는 대부분의 Liquid 변수가 html 매개변수에 표시되는 방식을 보여줍니다. total_order_amount 정의를 고려하세요.

measure: total_order_amount {
  type: sum
  sql: ${order_amount} ;;
  value_format: "0.00"
  html:
    <ul>
      <li> value: {{ value }} </li>
      <li> rendered_value: {{ rendered_value }} </li>
      <li> linked_value: {{ linked_value }} </li>
      <li> link: {{ link }} </li>
      <li> model: {{ _model._name }} </li>
      <li> view: {{ _view._name }} </li>
      <li> explore: {{ _explore._name }} </li>
      <li> field: {{ _field._name }} </li>
      <li> dialect: {{ _dialect._name }} </li>
      <li> access filter: {{ _access_filters['company.name'] }} </li>
      <li> user attribute: {{ _user_attributes['region'] }} </li>
      <li> query timezone: {{ _query._query_timezone }} </li>
      <li> filters: {{ _filters['order.total_order_amount'] }} </li>
    </ul> ;;
}

total_order_amount에 표시되는 셀 값은 다음과 같습니다.

  • value: 8521935
  • rendered_value: 8,521,935.00
  • linked_value: 8,521,935.00
  • link: /explore/thelook/orders?fields=orders.order_amount&limit=500
  • model: thelook
  • view: orders
  • explore: order_items
  • field: total_order_amount
  • dialect: mysql
  • access filter: altostrat.com
  • user attribute: northeast
  • query timezone: America/Los_Angeles
  • filters: NOT NULL

조건부로 측정값 서식 지정

값에 따라 개수를 조건부로 서식 지정합니다.

measure: formatted_count {
  type: count
  html:
    {% if value > 100 %}
      <span style="color:darkgreen;">{{ rendered_value }}</span>
    {% elsif value > 50 %}
      <span style="color:goldenrod;">{{ rendered_value }}</span>
    {% else %}
      <span style="color:darkred;">{{ rendered_value }}</span>
    {% endif %} ;;
}

html 매개변수로 데이터 탐색

여러 필드가 결합될 때 HTML 서식은 테이블, 테이블 (기존), 단일 값 차트 시각화 및 시각화 도움말에서만 렌더링됩니다. 맵 차트 도움말에 html 매개변수로 배치된 대화형 콘텐츠는 새로운 대시보드 환경을 사용하는 대시보드에서 액세스할 수 없습니다. Look, Explore, 기존 대시보드에서는 액세스할 수 있습니다.

데이터에 각 주문의 상태를 제공하는 status라는 필드가 있다고 가정해 보세요. status의 가능한 값은 다음과 같습니다.

  • Paid
  • Shipped
  • Returned

데이터를 탐색하는 동안 각 상태에 별도의 배경색을 지정할 수 있습니다. 이는 측정기준의 html: 매개변수에서 Liquid html을 사용하여 수행할 수 있습니다. 다음과 같이 표시됩니다.

dimension: status {
  sql: ${TABLE}.status ;;
  html: {% if value == 'Paid' %}
      <p style="color: black; background-color: lightblue; font-size:100%; text-align:center">{{ rendered_value }}</p>
    {% elsif value == 'Shipped' %}
      <p style="color: black; background-color: lightgreen; font-size:100%; text-align:center">{{ rendered_value }}</p>
    {% else %}
      <p style="color: black; background-color: orange; font-size:100%; text-align:center">{{ rendered_value }}</p>
    {% endif %}
;;
}

테이블에서 각 셀의 배경색은 status 필드의 값에 따라 다릅니다. 값이 Paid이면 배경색은 밝은 파란색이고, Shipped이면 밝은 녹색이며, 값이 다른 모든 값이면 주황색입니다. 예를 들어 테이블에 Returned 값이 포함되어 있으면 해당 셀의 배경은 주황색입니다.

동일한 구문을 사용하여 셀 값에 따라 아이콘 또는 이미지를 추가할 수 있습니다.

dimension: status {
    sql: ${TABLE}.status ;;
    html: {% if value == 'Shipped' or value == 'Complete' %}
         <p><img src="https://findicons.com/files/icons/573/must_have/48/check.png" alt="" height="20" width="20">{{ rendered_value }}</p>
      {% elsif value == 'Processing' %}
        <p><img src="https://findicons.com/files/icons/1681/siena/128/clock_blue.png" alt="" height="20" width="20">{{ rendered_value }}</p>
      {% else %}
        <p><img src="https://findicons.com/files/icons/719/crystal_clear_actions/64/cancel.png" alt="" height="20" width="20">{{ rendered_value }}</p>
      {% endif %}
;;
}

테이블에서 다음과 같이 표시됩니다.

주문 항목 상태 주문 항목 수
취소됨 아이콘취소됨 6,316
완료 아이콘완료됨 232,791
처리 중 아이콘처리 중 809
취소됨 아이콘반품됨 2,354
완료 아이콘배송됨 1,474

제품 이미지 생성

다음은 제품의 ID를 기반으로 <img> 태그를 사용하여 Looker에 제품 사진을 추가하는 방법의 예입니다.

dimension: product_image {
  sql: ${product_id} ;;
  html: <img src="https://www.altostrat.com/product_images/{{ value }}.jpg" /> ;;
}

드릴다운 링크를 유지하려면 html 매개변수를 사용하여 출력을 서식 지정할 때 HTML 태그 <a href="#drillmenu" target="_self">를 포함하면 됩니다. 예를 들면 다음과 같습니다.

measure: count {
  type: count
  drill_fields: [detail*]
  html:
    <a href="#drillmenu" target="_self">
      {% if value > 10000 %}
        <span style="color:#42a338;">{{ rendered_value }}</span>
      {% elsif value > 5000 %}
        <span style="color:#ffb92e;">{{ rendered_value }}</span>
      {% else %}
        <span style="color:#fa4444;">{{ rendered_value }}</span>
      {% endif %}
    </a>;;
}