커스텀 시각화 빌더 사용 방법

커스텀 시각화 빌더(CVB)는 개발자가 Looker에 추가하기 전에 커스텀 시각화를 빌드하고 테스트할 수 있는 환경을 제공하는 플레이그라운드입니다. 다음은 이 도구를 사용하는 방법의 예입니다.

CVB는 두 단계로 구성됩니다.

왼쪽은 시각화의 자바스크립트 코드를 작성하는 위치입니다
오른쪽은 두 개의 섹션으로 나뉩니다.
1. 상단 섹션에는 다음 탭이 포함되어 있습니다.
  1. 쿼리 응답: 쿼리 응답의 JSON 형식을 추가할 수 있습니다.
  2. 원시 데이터. Looker에서 반환된 데이터 배열을 여기에 입력해야 합니다.
  3. 필수 탭이기도 한 종속 항목이므로 시각화에 필요한 모든 종속 항목의 CDN 링크가 포함된 문자열 배열을 입력해야 합니다.
2. 하단 섹션에는 결과 시각화가 표시됩니다.

Chart.js 라이브러리를 사용하여 다음 시각화를 빌드한다고 가정해 보겠습니다.

열 차트에는 점프수트 및 로퍼, 정장, 스커트, 플러스, 블레이저 및 재킷 등 상위 5개의 제품 카테고리가 오름차순으로 표시됩니다.

시각화 객체에는 create 및 updateAsync 함수라는 두 가지 속성이 필요합니다. 이 튜토리얼에서는 시각화 상태를 변경해야 할 때마다 호출되는 함수인 후자에 중점을 둡니다. 항상 create 이후에 호출되며 여러 번 호출될 수 있습니다.

1단계: 데이터 추출 및 준비

데이터는 일반적으로 data라고 명명되는 첫 번째 매개변수를 통해 updateAsync 함수에 전달됩니다. 다음 코드는 이 data 객체의 각 요소를 반복하고 데이터 값을 actual_data 배열에, 라벨을 data_labels 배열에 푸시합니다. 이 두 배열은 나중에 시각화를 그리는 데 사용됩니다.

const data_labels = []
const actual_data = []

data.forEach((d)=>{
     data_labels.push(d["Products Category"])
     actual_data.push(d["Products Count"])
})

2단계: 페이지에 시각화 추가

Chart.js가 시각화를 페이지에 렌더링하려면 canvas이 필요합니다. 원하는 id로 canvas 요소를 만들어야 합니다(이 튜토리얼에서는 myChart를 사용). CVB가 시각화를 렌더링할 때 사용할 div 요소에 이 canvas를 추가합니다. 이 div에는 vis라는 ID 속성이 있습니다.

const vizCanvas = document.createElement('canvas')
vizCanvas.setAttribute("id", "myChart")

const vizDiv = document.getElementById("vis")
vizDiv.appendChild(vizCanvas)

3단계: 페이지에 시각화 그리기

이제 ID가 myChart인 페이지에 canvas 요소가 있으므로 이 요소를 타겟팅하고 다음과 같이 시각화할 수 있습니다.

const ctx = document.getElementById("myChart")
const myChart = new Chart(ctx, {
  type: 'bar',
  data: {
    labels: data_labels,
    datasets: [{
      label: 'Top 5 Product Category',
      data: actual_data,
      backgroundColor: [
        'rgba(255, 99, 132, 0.2)',
        'rgba(54, 162, 235, 0.2)',
        'rgba(255, 206, 86, 0.2)',
        'rgba(75, 192, 192, 0.2)',
        'rgba(153, 102, 255, 0.2)'
      ],
      borderColor: [
        'rgba(255, 99, 132, 1)',
        'rgba(54, 162, 235, 1)',
        'rgba(255, 206, 86, 1)',
        'rgba(75, 192, 192, 1)',
        'rgba(153, 102, 255, 1)'
      ],
      borderWidth: 1
    }]
  },
  options: {
    scales: {
      y: {
        beginAtZero: true
      }
    },
  }
});

doneRendering()

시각화가 완전히 렌더링되었음을 나타내기 위해 끝에 doneRendering 함수를 호출하는 것이 중요합니다. 이는 시각화가 비동기 호출을 수행해야 하거나 PDF로 렌더링해야 하는 경우에 특히 중요합니다.

최종 코드는 다음과 같습니다.

const visObject = {
    create: function(element, config){
        element.innerHTML = "";
    },

    updateAsync: function (data, element, config, queryResponse, details, doneRendering) {
        const data_labels = []
        const actual_data = []

        data.forEach((d)=>{
            data_labels.push(d["Products Category"])
            actual_data.push(d["Products Count"])
        })

        const vizCanvas = document.createElement('canvas')
        vizCanvas.setAttribute("id", "myChart")

        const vizDiv = document.getElementById("vis")
        vizDiv.appendChild(vizCanvas)

        const ctx = document.getElementById("myChart")
        const myChart = new Chart(ctx, {
            type: 'bar',
            data: {
                labels: data_labels,
                datasets: [{
                    label: 'Top 5 Product Category',
                    data: actual_data,
                    backgroundColor: [
                        'rgba(255, 99, 132, 0.2)',
                        'rgba(54, 162, 235, 0.2)',
                        'rgba(255, 206, 86, 0.2)',
                        'rgba(75, 192, 192, 0.2)',
                        'rgba(153, 102, 255, 0.2)'
                    ],
                    borderColor: [
                        'rgba(255, 99, 132, 1)',
                        'rgba(54, 162, 235, 1)',
                        'rgba(255, 206, 86, 1)',
                        'rgba(75, 192, 192, 1)',
                        'rgba(153, 102, 255, 1)'
                    ],
                    borderWidth: 1
                }]
            },
            options: {
                scales: {
                    y: {
                        beginAtZero: true
                    }
                },

            }
        });

        doneRendering()
    }
};

looker.plugins.visualizations.add(visObject);

Looker의 데이터

다음은 CVB의 원시 데이터 탭에 제공할 수 있는 Looker에서 반환된 데이터입니다.

[{"Products Category":"Jumpsuits & Rompers","Products Count":"162"},
{"Products Category":"Suits","Products Count":"184"},
{"Products Category":"Skirts","Products Count":"364"},
{"Products Category":"Plus","Products Count":"439"},
{"Products Category":"Blazers & Jackets","Products Count":"551"}]

종속 항목

이 시각화를 렌더링하는 데 필요한 종속 항목은 다음과 같습니다.

["https://cdnjs.cloudflare.com/ajax/libs/Chart.js/3.9.1/chart.min.js"]

쿼리 응답

쿼리 가져오기 엔드포인트에 API를 호출하여 Looker에서 쿼리 응답을 추출할 수 있습니다.

최종 단계

코드가 작동하고 시각화가 예상대로 렌더링되면 문서에 설명된 단계를 따라 Looker를 통해 시각화를 제출할 수 있습니다.