Utiliser la bibliothèque d'aide

Looker Studio utilise l'interface postMessage pour fournir des données et des informations de style à l'iFrame contenant la visualisation de la communauté. Ce guide fournit plus de détails sur l'utilisation de la bibliothèque d'assistance.

Pour les visualisations de la communauté, ds-component remplit deux fonctions.

  1. Obtenir les dimensions de l'iFrame
  2. Gérer les communications avec Looker Studio

S'abonner à des événements

Lorsqu'un utilisateur interagit avec votre visualisation (par exemple, en modifiant les champs sélectionnés, le style ou la taille du composant), Looker Studio envoie des événements à votre visualisation.

dscc.subscribeToData enregistre un rappel qui sera appelé pour chaque événement postMessage de Looker Studio. Le rappel reçoit un objet 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});

Données renvoyées

Les deux transformations de données renvoient un objet avec cinq clés.

Clé Objectif
style Informations sur le style sélectionné par l'utilisateur et le style par défaut
fields Informations sur les champs sélectionnés par l'utilisateur
interactions Interactions sélectionnées par l'utilisateur
theme Informations sur le thème du rapport
tables Lignes de données
dateRanges Plages de dates par défaut et de comparaison

Format des données :

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

Différentes visualisations nécessitent différents formats de données. Deux formats courants sont un tableau de tableaux ou un tableau d'objets. La bibliothèque ds-component fournit deux transformations conçues pour vous permettre d'accéder directement à ces formats de données.

Les deux transformations sont décrites dans la documentation de référence sur la bibliothèque. Ces transformations correspondent facilement aux formats de données généralement attendus par les bibliothèques de visualisation JavaScript. Les deux transformations acceptées sont objectTransform, qui renvoie un tableau d'objets, et tableTransform, qui renvoie un tableau de tableaux.

dscc.objectTransform

Certaines visualisations attendent des données sous forme de tableau d'objets.

Exemple :

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

Le code suivant montre comment accéder à un tableau d'objets à partir du format 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]
    };
  };

}

Si les sections de données sont définies de sorte qu'un utilisateur puisse saisir plusieurs champs (par exemple, si deux dimensions sont définies pour un diagramme de Sankey), la transformation dépendra de votre cas d'utilisation, car le format de données renvoyé par Looker Studio ressemblera davantage à ceci :


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

dscc.tableTransform

Certaines bibliothèques de visualisation attendent un tableau de tableaux.

Exemple :

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

Le code suivant montre comment accéder à une ligne de lignes à partir du format 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});