Utilizzare la libreria di supporto

Looker Studio utilizza l'interfaccia postMessage per fornire dati e informazioni di stile all'iframe contenente la visualizzazione della community. Questa guida fornisce maggiori dettagli sull'utilizzo della libreria helper.

Per le visualizzazioni della community, ds-component svolge due funzioni.

  1. Ottenere le dimensioni dell'iframe
  2. Gestire le comunicazioni con Looker Studio

Iscrizione agli eventi

Quando un utente interagisce con la visualizzazione, ad esempio modificando i campi selezionati, lo stile o ridimensionando il componente, Looker Studio invia eventi alla visualizzazione.

dscc.subscribeToData registra un callback che verrà richiamato per ogni evento postMessage di Looker Studio. Al callback viene passato un oggetto 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});

I dati restituiti

Entrambe le trasformazioni dei dati restituiscono un oggetto con cinque chiavi.

Chiave Finalità
style Informazioni sullo stile predefinito e selezionato dall'utente
fields Informazioni sui campi selezionati dall'utente
interactions Interazioni selezionate dall'utente
theme Informazioni sul tema del report
tables Righe di dati
dateRanges Intervalli di date predefiniti e di confronto

Formato dei dati:

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

Visualizzazioni diverse richiedono formati di dati diversi. Due formati comuni sono un array di array o un array di oggetti. La libreria ds-component fornisce due trasformazioni, progettate per consentirti di accedere direttamente a questi formati di dati.

Le due trasformazioni sono documentate nella library-reference. Queste trasformazioni vengono mappate facilmente ai formati di dati comunemente previsti dalle librerie di visualizzazione JavaScript. Le due trasformazioni supportate sono: objectTransform, che restituisce un array di oggetti, e tableTransform, che restituisce un array di array.

dscc.objectTransform

Alcune visualizzazioni prevedono che i dati siano in formato di array di oggetti.

Ad esempio:

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

Il seguente codice mostra come accedere a un array di oggetti dal formato 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]
    };
  };

}

Se le sezioni di dati sono definite in modo che un utente possa inserire più campi (ad esempio, se sono state definite due dimensioni per un diagramma di Sankey), la trasformazione dipenderà dal tuo caso d'uso, poiché il formato dei dati restituito da Looker Studio sarà simile a:


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

dscc.tableTransform

Alcune librerie di visualizzazione prevedono un array di array.

Ad esempio:

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

Il seguente codice mostra come accedere a una riga di righe dal formato 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});