Hilfsbibliothek verwenden

In Looker Studio werden über die postMessage-Oberfläche Daten- und Stilinformationen für den iFrame mit der Community-Visualisierung bereitgestellt. In diesem Leitfaden finden Sie weitere Informationen zur Verwendung der Hilfsbibliothek.

Für Community-Visualisierungen hat ds-component zwei Funktionen.

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

Ereignisse abonnieren

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

dscc.subscribeToData registriert einen Callback, der für jedes postMessage-Ereignis aus Looker Studio aufgerufen wird. An den 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 standardmäßige Stilinformationen
fields Informationen aus vom Nutzer ausgewählten Feldern
interactions Vom Nutzer ausgewählte Interaktionen
theme Informationen zum Berichtdesign
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),
}

Verschiedene Visualisierungen erfordern unterschiedliche Datenformate. 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 library-reference dokumentiert. Diese Transformationen lassen sich leicht den Datenformaten zuordnen, die häufig von JavaScript-Visualisierungsbibliotheken erwartet werden. Die beiden unterstützten Transformationen sind: objectTransform, das ein Array von Objekten zurückgibt, und tableTransform, das ein Array von Arrays zurückgibt.

dscc.objectTransform

Einige Visualisierungen erwarten Daten als Array von Objekten.

Beispiel:

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

Der folgende Code zeigt, wie auf ein Array von Objekten aus dem Format dscc.objectTransform zugegriffen wird.


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 für ein Sankey-Diagramm zwei Dimensionen definiert wurden), hängt die Transformation von Ihrem Anwendungsfall ab, da das von Looker Studio zurückgegebene Datenformat 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 mit Zeilen aus dem Format dscc.tableTransform 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});