Использование вспомогательной библиотеки

Looker Studio использует интерфейс postMessage для передачи данных и информации о стилях в iframe, содержащий визуализацию сообщества. В этом руководстве более подробно описано использование вспомогательной библиотеки.

Для визуализации данных пользователями компонент ds-component выполняет две функции.

  1. Получите размеры iframe.
  2. Управление коммуникацией с помощью Looker Studio

Подписка на мероприятия

Когда пользователь взаимодействует с вашей визуализацией, например, изменяет выбранные поля, стиль или размер компонента, Looker Studio отправляет события вашей визуализации.

dscc.subscribeToData регистрирует функцию обратного вызова, которая будет вызываться для каждого события postMessage из Looker Studio. В функцию обратного вызова передается объект 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 предоставляет два преобразования, предназначенные для прямого доступа к этим форматам данных.

Оба преобразования описаны в справочном документе библиотеки . Эти преобразования легко сопоставляются с форматами данных, обычно ожидаемыми библиотеками визуализации 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});