カスタムビジュアリゼーションビルダーの使用方法

カスタムビジュアリゼーションビルダー（CVB）は、デベロッパーがカスタムビジュアリゼーションを Looker に追加する前に、構築してテストする環境を提供するプレイグラウンドです。次の例は、このツールを使用する方法を示しています。

CVB には 2 つの面があります。

左側は可視化の JavaScript コードを記述する場所です。
右側はさらに 2 つのセクションに分かれています。
1. 上部のセクションには次のタブがあります。
  1. クエリレスポンス: クエリレスポンスの JSON 形式を追加できます。
  2. 元データ。ここには、Looker から返されたデータの配列を入力する必要があります。
  3. Dependencies も必須のタブであるため、可視化に必要なすべての依存関係の CDN リンクを指定した文字列配列を入力する必要があります。
2. 下部には可視化の結果が表示されます。

Chart.js ライブラリを使用して次の可視化を構築するとします。

縦棒グラフでは、上位 5 つの商品カテゴリ（ジャンプスーツとロンパー、スーツ、スカート、大きいサイズ、ブレザーとジャケット）が昇順に表示されます。

可視化オブジェクトにはcreate 関数と updateAsync 関数の 2 つのプロパティがあり、これらは必須です。このチュートリアルでは、後者に焦点を当てます。これは、可視化の状態の変更が必要になるたびに呼び出される関数です。これは常にcreate の後に呼び出され、何度も呼び出される可能性があります。

ステップ 1: データを抽出して準備する

データは、最初のパラメータ（通常は dataと呼ばれる）を使用して updateAsync 関数に渡されます。以下のコードでは、この data オブジェクトの各要素をループして、データ値を actual_data 配列に push し、ラベルを data_labels 配列に push します。この 2 つの配列は後で可視化を描画するために使用されます。

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 からのデータ

以下は Looker から返されるデータで、CVB の [RAW DATA] タブで指定できます。

[{"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"]

クエリレスポンス

Looker でクエリレスポンスを抽出するには、クエリの取得エンドポイントに対して API 呼び出しを行います。

最終ステップ

コードが機能し、可視化が想定どおりにレンダリングされたら、ドキュメントに記載されている手順に沿って可視化を Looker に送信できます。

カスタム ビジュアリゼーション ビルダーの使用方法