Korzystanie z biblioteki pomocniczej

Looker Studio korzysta z interfejsu postMessage, aby dostarczać dane i informacje o stylu elementu iframe zawierającego wizualizację utworzoną przez społeczność. W tym przewodniku znajdziesz więcej informacji o korzystaniu z biblioteki pomocniczej.

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

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

Subskrybowanie zdarzeń

Gdy użytkownik wchodzi w interakcję z wizualizacją, np. zmienia wybrane pola, styl lub rozmiar komponentu, Looker Studio wysyła zdarzenia do Twojej wizualizacji.

dscc.subscribeToData rejestruje wywołanie zwrotne, które będzie wywoływane dla każdego zdarzenia postMessage z Looker Studio. Wywołanie zwrotne jest przekazywane do obiektu 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});

Zwrócone dane

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

Klucz	Purpose
style	Wybrany przez użytkownika i domyślny informacje o stylu
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ównywane 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 używane formaty to tablica tablic lub tablica obiektów. Biblioteka komponentów ds. zawiera 2 transformacje odpowiednie do tych formatów danych.

Informacje o obu przekształceniach znajdziesz w sekcji library-reference. Te transformacje łatwo mapują na formaty danych, których często oczekuje się od bibliotek do wizualizacji JavaScript. Dwie obsługiwane przekształcenia to: objectTransform, który zwraca tablicę obiektów, i tableTransform, który 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 w formacie 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 wpisywać wiele pól (np. jeśli na diagramie Sankey zdefiniowano 2 wymiary), przekształcenie będzie zależeć od konkretnego przypadku użycia, ponieważ format danych zwracany przez Looker Studio będzie wyglądać np. tak:

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

Uwaga: wymagane przekształcenia danych zależą od konfiguracji wizualizacji.

dscc.tableTransform

Niektóre biblioteki wizualizacji wymagają tablicy macierzy.

Na przykład:

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

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