Utiliser la bibliothèque d'aide

Data Studio utilise l' postMessage pour fournir des informations sur les données et le style à l'iframe contenant la visualisation de la communauté. Ce guide fournit plus d'informations 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 la communication avec Data Studio

S'abonner à des événements

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

dscc.subscribeToData enregistre un rappel qui sera appelé pour chaque événement postMessage de Data Studio. Le rappel reçoit un data objet.

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 Data 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 par défaut et sélectionné par l'utilisateur
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 documentées dans la documentation de référence de la bibliothèque. Ces transformations sont facilement mappées aux formats de données généralement attendus par les bibliothèques de visualisation JavaScript. 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 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 des 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 Data Studio ressemblera davantage à :


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