Looker Studio は postMessage インターフェースを使用して、コミュニティ ビジュアリゼーションを含む iframe にデータとスタイル情報を提供します。このガイドでは、ヘルパー ライブラリの使用について詳しく説明します。
コミュニティ由来ビジュアル表示では、ds-component に 2 つの機能があります。
- iframe のディメンションを取得する
- 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});