Utilizzare la libreria di supporto

Looker Studio utilizza postMessage per fornire dati e informazioni sugli stili all'iframe contenente il della community. Questa guida fornisce ulteriori dettagli sull'uso dell'aiuto libreria.

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

1. Ottieni le dimensioni dell'iframe
2. Gestisci la comunicazione con Looker Studio

Iscrizione agli eventi

Quando un utente interagisce con la visualizzazione, ad esempio modifica i campi selezionati, o ridimensionando il componente, Looker Studio invia gli eventi visualizzazione.

dscc.subscribeToData registra un callback che verrà richiamato per ogni postMessage evento da Looker Studio. Per la richiamata viene passato un 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 oggetti. La libreria ds-component fornisce due trasformazioni, che sono progettate per accedere direttamente a questi formati di dati.

Le due trasformazioni sono documentate Library-reference. Questi trasforma facilmente la mappatura in formati di dati comunemente previsti da JavaScript librerie di visualizzazione. 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 come un 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 Ad esempio, se per un diagramma di Sankey sono state definite due dimensioni), la classe dipende dal tuo caso d'uso, poiché il formato dei dati restituito da Looker Studio avrà un aspetto simile a questo:

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

Nota: le trasformazioni dei dati necessarie dipenderanno dalla configurazione della visualizzazione.

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