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 des informations plus détaillées sur l'utilisation de la bibliothèque d'aide.

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

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

S'abonner à des événements

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

dscc.subscribeToData enregistre un rappel qui sera appelé pour chaque événement postMessage à partir 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});

Les 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 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-components fournit deux transformations conçues pour vous permettre d'accéder directement à ces formats de données.

Les deux transformations sont décrites dans library-reference. Ces transformations peuvent être facilement mappées aux formats de données généralement attendus par les bibliothèques de visualisation JavaScript. Les deux transformations acceptées sont la suivante: objectTransform, qui renvoie un tableau d'objets, et tableTransform, qui renvoie un tableau de tableaux.

dscc.objectTransform

Certaines visualisations attendent les données sous la forme d'un 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 ont été définies pour un diagramme 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] }
]

Remarque :Les transformations de données nécessaires dépendent de votre configuration de visualisation.

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