Korzystanie z biblioteki pomocniczej

Looker Studio korzysta z postMessage do przesyłania informacji o danych i stylu do elementu iframe zawierającego wizualizacji utworzonej przez społeczność. Ten przewodnik zawiera więcej informacji na temat korzystania z Asystenta bibliotece.

W przypadku wizualizacji utworzonych przez społeczność ds-component pełni 2 funkcje.

1. Uzyskiwanie wymiarów elementu iframe
2. Zarządzanie komunikacją z Looker Studio

Subskrybowanie zdarzeń

Gdy użytkownik wejdzie w interakcję z wizualizacją, np. zmienia wybrane pola, stylu lub zmiany rozmiaru komponentu, Looker Studio wysyła zdarzenia do i wizualizacji.

dscc.subscribeToData rejestruje wywołanie zwrotne, które zostanie wywołane dla każdego postMessage zdarzenie z Looker Studio. Wywołanie zwrotne jest przekazywane dzięki funkcji data obiektu.

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

Zwrócone dane

Oba przekształcenia danych zwracają obiekt z 5 kluczami.

Klucz	Cel
style	Wybrane przez użytkownika i informacje o stylu domyślnym
fields	Informacje o polach wybranych przez użytkownika
interactions	Interakcje wybrane przez użytkownika
theme	Zgłaszanie informacji o motywie
tables	Wiersze danych
dateRanges	Domyślne i porównywalne zakresy dat

Format danych:

{
  fields: object(fieldsByConfigId),
  style: object(styleById),
  interactions: object(interactionsById),
  theme: object(themeStyle),
  tables: object(tablesById),
  dateRanges: object(dateRangesById),
}

Różne wizualizacje wymagają różnych formatów danych. Dwa często spotykane formaty to: tablica tablic lub tablica obiektów. Biblioteka komponentów ds. DS udostępnia dwa przekształcenia, które pozwalają od razu zrozumieć te formaty danych.

Obie te przekształcenia są udokumentowane w library-reference. Te łatwo przekształca mapowanie na formaty danych powszechnie oczekiwanych przez kod JavaScript. za pomocą bibliotek wizualizacji. 2 obsługiwane przekształcenia to: objectTransform, która zwraca tablicę obiektów, a tableTransform, która zwraca tablicę tablic.

dscc.objectTransform

Niektóre wizualizacje wymagają danych w postaci tablicy obiektów.

Na przykład:

var data = [
  {'colA': 'hello', 'colB', 'world'},
  {'colA': 'hello', 'colB', 'world'}
];

Poniższy kod pokazuje, jak uzyskać dostęp do tablicy obiektów z Format: 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]
    };
  };

}

Jeśli sekcje danych są zdefiniowane w taki sposób, że użytkownik może wpisać wiele pól (na na przykład, jeśli dla diagramu Sankeya zostały zdefiniowane dwa wymiary, to wymiar przekształcenie będzie zależeć od przypadku użycia, ponieważ format danych zwracany przez Lookera Studio będzie wyglądać mniej więcej tak:

var dsccObjectTransformData = [
{'configId1': ['hello', 'there'], 'configId2': [1] },
{'configId1': ['world', 'globe'], 'configId2': [2] }
]

Uwaga: wymagane przekształcenia danych będą zależeć od konfiguracji wizualizacji.

dscc.tableTransform

Niektóre biblioteki wizualizacji wymagają tablicy tablic.

Na przykład:

var data = [
  ['hello', 1],
  ['world', 2]
];

Poniższy kod pokazuje, jak uzyskać dostęp do wiersza wierszy z Format: 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});