ヘルパー ライブラリの使用

Looker Studio は postMessage インターフェースを使用して、コミュニティ ビジュアリゼーションを含む iframe にデータとスタイル情報を提供します。このガイドでは、ヘルパー ライブラリの使用について詳しく説明します。

コミュニティ由来ビジュアル表示では、ds-component に 2 つの機能があります。

  1. iframe のディメンションを取得する
  2. Looker Studio との通信の管理

イベントへの登録

ユーザーがビジュアリゼーションに対して操作（選択したフィールドの変更、スタイルの変更、コンポーネントのサイズ変更など）を行うと、Looker Studio からビジュアリゼーションにイベントが送信されます。

dscc.subscribeToData は、Looker Studio の postMessage イベントごとに呼び出されるコールバックを登録します。コールバックには data オブジェクトが渡されます。

function drawViz(data){
  // obtain the height and width to scale your visualization appropriately
  var height = dscc.getHeight();
  var width = dscc.getWidth();
  // write your visualization code here
  console.log("I'm the callback and I was passed this data: " + JSON.stringify(data, null, '  '));
}

// call drawViz every time Looker Studio sends a new postMessage
dscc.subscribeToData(drawViz, {transform: dscc.objectTransform});

返されるデータ

両方のデータ変換により、5 つのキーを持つオブジェクトが返されます。

キー 目的
style ユーザーが選択したデフォルトのスタイル情報
fields ユーザーが選択したフィールド情報
interactions ユーザーが選択したインタラクション
theme レポートのテーマ情報
tables データの行
dateRanges デフォルト期間と比較期間

データの形式:

{
  fields: object(fieldsByConfigId),
  style: object(styleById),
  interactions: object(interactionsById),
  theme: object(themeStyle),
  tables: object(tablesById),
  dateRanges: object(dateRangesById),
}

ビジュアリゼーションが異なれば、必要なデータ形式も異なります。一般的な形式は、配列の配列とオブジェクトの配列の 2 つです。ds-component ライブラリには、これらのデータ形式に直接アクセスできる 2 つの変換が用意されています。

2 つの変換は library-reference で説明されています。これらの変換は、JavaScript ビジュアル表示ライブラリで一般的に想定されるデータ形式に簡単にマッピングされます。サポートされている変換は、オブジェクトの配列を返す objectTransform と、配列の配列を返す tableTransform の 2 つです。

dscc.objectTransform

一部のビジュアリゼーションでは、オブジェクトの配列としてデータが必要とされます。

例:

var data = [
  {'colA': 'hello', 'colB', 'world'},
  {'colA': 'hello', 'colB', 'world'}
];

次のコードは、dscc.objectTransform 形式からオブジェクトの配列にアクセスする方法を示しています。


function drawViz(data){
  // what the object transform could look like
  // [
  //  {'configId1': ['hello'], 'configId2': [1] },
  //  {'configId1': ['world'], 'configId2': [2] }
  // ]
  var dsccObjectTransformData = data.tables.DEFAULT;

  // creating an array of objects
  var arrayOfObjects = dscc.ObjectTransformData.rows.map(function(d){
    return {
      'configId1': d.configId1[0],
      'configId2': d.configId2[0]
    };
  };

}

ユーザーが複数のフィールドを入力できるようにデータ セクションが定義されている場合（サンキー ダイアグラムに 2 つのディメンションが定義されている場合など）、変換はユースケースによって異なります。Looker Studio から返されるデータ形式は次のようになります。


var dsccObjectTransformData = [
{'configId1': ['hello', 'there'], 'configId2': [1] },
{'configId1': ['world', 'globe'], 'configId2': [2] }
]

dscc.tableTransform

一部のビジュアリゼーション ライブラリでは、配列の配列が必要となります。

例:

var data = [
  ['hello', 1],
  ['world', 2]
];

次のコードは、dscc.tableTransform 形式から行の行にアクセスする方法を示しています。


function drawViz(data);
  // what the below object looks like
  // {
  //    headers: [{
  //      "id": "qt_ky8sltutsb",
  //      "name": "dimension",
  //      "type": "TEXT",
  //      "concept": "DIMENSION",
  //      "configId": "configId1"
  //    }, {
  //      "id": "qt_m9dtntutsb",
  //      "name": "metric",
  //      "type": "NUMBER",
  //      "concept": "METRIC",
  //      "configId": "configId2"
  //    }],
  //  rows: [
  //    ['hello', 1],
  //    ['world', 2]
  //  ];
  // }
  var dsccTableTransformObject = data.tables.DEFAULT;

  // accessing the row of rows
  var rowOfRows = dsccTableTransformObject.rows;

  // accessing the header row
  var headers = dsccTableTransformObject.headers;
}

dscc.subscribeToData(drawViz, {transform: tableTransform});