Looker Studio는 postMessage 인터페이스를 사용하여 커뮤니티 시각화가 포함된 iframe에 데이터 및 스타일 정보를 제공합니다. 이 가이드에서는 도우미 라이브러리 사용에 관해 자세히 설명합니다.
커뮤니티 시각화의 경우 ds-component는 두 가지 기능을 제공합니다.
- 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});
반환된 데이터
두 데이터 변환은 모두 다섯 개의 키가 있는 객체를 반환합니다.
키 | 목적 |
---|---|
style |
사용자가 선택한 기본 스타일 정보 |
fields |
사용자가 선택한 필드 정보 |
interactions |
사용자가 선택한 상호작용 |
theme |
테마 정보 보고서 |
tables |
데이터 행 |
dateRanges |
기본 기간 및 비교 기간 |
데이터 형식:
{
fields: object(fieldsByConfigId),
style: object(styleById),
interactions: object(interactionsById),
theme: object(themeStyle),
tables: object(tablesById),
dateRanges: object(dateRangesById),
}
시각화마다 다른 데이터 형식이 필요합니다. 일반적인 두 가지 형식은 배열 배열 또는 객체의 배열입니다. ds-component 라이브러리는 이러한 데이터 형식으로 바로 이동할 수 있도록 설계된 두 가지 변환을 제공합니다.
이 두 변환은 library-reference에 문서화되어 있습니다. 이러한 변환은 JavaScript 시각화 라이브러리에서 일반적으로 예상되는 데이터 형식으로 쉽게 매핑됩니다. 지원되는 두 가지 변환은 객체의 배열을 반환하는 objectTransform
와 배열의 배열을 반환하는 tableTransform
입니다.
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]
};
};
}
사용자가 여러 필드를 입력할 수 있도록 데이터 섹션이 정의된 경우 (예: 흐름 다이어그램에 두 개의 측정기준이 정의된 경우) 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});