도우미 라이브러리 사용

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

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

  1. iframe의 측정기준 가져오기
  2. 데이터 스튜디오와의 통신 관리

이벤트 구독

사용자가 선택한 필드 변경, 스타일 변경, 구성요소 크기 조정과 같은 시각화와 상호작용하면 데이터 스튜디오에서 시각화로 이벤트를 보냅니다.

dscc.subscribeToData 는 데이터 스튜디오의 각 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});