Hilfsbibliothek verwenden

Looker Studio verwendet die postMessage-Schnittstelle, um Daten und Formatierungsinformationen für den iFrame mit der Community-Visualisierung bereitzustellen. In diesem Leitfaden finden Sie weitere Informationen zur Verwendung der Helper-Bibliothek.

Bei Community-Visualisierungen hat ds-component zwei Funktionen.

  1. Abmessungen des iFrames abrufen
  2. Kommunikation mit Looker Studio verwalten

Ereignisse abonnieren

Wenn ein Nutzer mit Ihrer Visualisierung interagiert, z. B. ausgewählte Felder oder den Stil ändert oder die Größe der Komponente anpasst, sendet Looker Studio Ereignisse an Ihre Visualisierung.

Mit dscc.subscribeToData wird ein Callback registriert, der für jedes postMessage-Ereignis aus Looker Studio aufgerufen wird. Dem Callback wird ein data-Objekt übergeben.

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

Die zurückgegebenen Daten

Beide Datentransformationen geben ein Objekt mit fünf Schlüsseln zurück.

Schlüssel Zweck
style Vom Nutzer ausgewählte und Standardstilinformationen
fields Informationen zu von Nutzern ausgewählten Feldern
interactions Vom Nutzer ausgewählte Interaktionen
theme Informationen zum Berichtsdesign
tables Datenzeilen
dateRanges Standard- und Vergleichszeiträume

Format der Daten:

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

Für verschiedene Visualisierungen sind unterschiedliche Datenformate erforderlich. Zwei gängige Formate sind ein Array von Arrays oder ein Array von Objekten. Die ds-component-Bibliothek bietet zwei Transformationen, mit denen Sie direkt zu diesen Datenformaten gelangen.

Die beiden Transformationen sind in der Bibliotheksreferenz dokumentiert. Diese Transformationen lassen sich problemlos auf Datenformate abbilden, die von JavaScript-Visualisierungsbibliotheken erwartet werden. Die beiden unterstützten Transformationen sind objectTransform, die ein Array von Objekten zurückgibt, und tableTransform, die ein Array von Arrays zurückgibt.

dscc.objectTransform

Für einige Visualisierungen sind Daten als Array von Objekten erforderlich.

Beispiel:

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

Der folgende Code zeigt, wie Sie auf ein Array von Objekten im dscc.objectTransform-Format zugreifen.


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

}

Wenn Datenabschnitte so definiert sind, dass ein Nutzer mehrere Felder eingeben kann (z. B. wenn zwei Dimensionen für ein Sankey-Diagramm definiert sind), hängt die Transformation von Ihrem Anwendungsfall ab, da das von Looker Studio zurückgegebene Datenformat in etwa so aussieht:


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

dscc.tableTransform

Einige Visualisierungsbibliotheken erwarten ein Array von Arrays.

Beispiel:

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

Der folgende Code zeigt, wie auf eine Zeile aus dem dscc.tableTransform-Format zugegriffen wird.


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