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

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

Для общественных визуализаций ds-comment выполняет две функции.

  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-компонентов предоставляет два преобразования, которые предназначены для прямого перехода к этим форматам данных.

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