Utilizzare la libreria di supporto

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

Per le visualizzazioni della community, ds-component ha 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 il ridimensionamento del componente, Looker Studio invia eventi alla visualizzazione.

dscc.subscribeToData registra un callback che verrà richiamato per ogni evento postMessage da Looker Studio. Il callback viene trasmesso a 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 di 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	Segnala informazioni sul tema
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 dei dati diversi. Due formati comuni sono un array di array o un array di oggetti. La libreria di componenti ds include due trasformazioni, progettate per accedere direttamente a questi formati di dati.

Le due trasformazioni sono documentate in library-reference. Queste trasformazioni vengono mappate facilmente ai formati dei 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 i dati sotto forma di array di oggetti.

Ad esempio:

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

Il codice seguente 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 fossero 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à più simile:

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

Nota: le trasformazioni dei dati necessarie dipendono dalla configurazione di visualizzazione.

dscc.tableTransform

Alcune librerie di visualizzazione prevedono un array di array.

Ad esempio:

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

Il codice seguente 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});