Utiliser la bibliothèque d'aide

Looker Studio utilise la 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 l'application auxiliaire bibliothèque.

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 sélectionnés, ou en redimensionnant le composant, Looker Studio envoie des événements la visualisation.

dscc.subscribeToData enregistre un rappel qui sera invoqué pour chaque appel postMessage de Looker Studio. Le rappel reçoit une valeur 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 de composants ds propose qui vous permettent d'accéder directement à ces formats de données.

Les deux transformations sont décrites dans le document library-reference. Ces transforme facilement les mappages vers les formats de données généralement attendus par JavaScript. bibliothèques de visualisation. Les deux transformations compatibles sont les suivantes: objectTransform, qui renvoie un tableau d'objets, et tableTransform, qui renvoie un tableau de tableaux.

dscc.objectTransform

Certaines visualisations attendent des 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 Par exemple, si deux dimensions sont définies pour un diagramme de Sankey), dépend de votre cas d'utilisation, car le format de données renvoyé par Looker Studio ressemblera davantage à:

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