도우미 라이브러리 사용

Looker Studio는 postMessage 인터페이스를 사용하여 커뮤니티 시각화가 포함된 iframe에 데이터 및 스타일 정보을 제공합니다. 이 가이드에서는 도우미 라이브러리 사용에 관해 자세히 설명합니다.

커뮤니티 시각화의 경우 ds-component는 두 가지 기능을 제공합니다.

  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),
}

시각화마다 필요한 데이터 형식이 다릅니다. 일반적인 두 가지 형식은 배열의 배열 또는 객체의 배열입니다. 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});