Cómo usar la biblioteca auxiliar

Data Studio usa la interfaz postMessage para proporcionar datos y la información de estilo al iframe que contiene la visualización comunitaria. En esta guía, se proporcionan más detalles sobre el uso de la biblioteca de asistencia.

En el caso de las visualizaciones comunitarias, ds-component cumple dos funciones:

  1. Obtener las dimensiones del iframe
  2. Administrar la comunicación con Data Studio

Cómo suscribirse a eventos

Cuando un usuario interactúa con tu visualización, por ejemplo, cuando cambia los campos seleccionados, el estilo o el tamaño del componente, Data Studio envía eventos a tu visualización.

dscc.subscribeToData registra una devolución de llamada que se invocará para cada evento postMessage de Data Studio. La devolución de llamada recibe un data objeto.

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

Los datos que se muestran

Ambas transformaciones de datos muestran un objeto con cinco claves.

Clave Objetivo
style Información de estilo predeterminada y seleccionada por el usuario
fields Información de los campos seleccionados por el usuario
interactions Interacciones seleccionadas por el usuario
theme Información del tema del informe
tables Filas de datos
dateRanges Períodos predeterminados y de comparación

Formato de los datos:

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

Las diferentes visualizaciones requieren diferentes formatos de datos. Dos formatos comunes son un array de arrays o un array de objetos. La biblioteca ds-component proporciona dos transformaciones, que están diseñadas para llevarte directamente a estos formatos de datos.

Las dos transformaciones se documentan en el library-reference. Estas transformaciones se asignan fácilmente a los formatos de datos que suelen esperar las bibliotecas de visualización de JavaScript. Las dos transformaciones admitidas son objectTransform, que muestra un array de objetos, y tableTransform, que muestra un array de arrays.

dscc.objectTransform

Algunas visualizaciones esperan datos como un array de objetos.

Por ejemplo:

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

En el siguiente código, se muestra cómo acceder a un array de objetos desde el 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]
    };
  };

}

Si las secciones de datos se definen de manera que un usuario pueda ingresar varios campos (por ejemplo, si se definieran dos dimensiones para un diagrama de Sankey), la transformación dependerá de tu caso de uso, ya que el formato de datos que muestra Looker Studio se parecerá más a lo siguiente:


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

dscc.tableTransform

Algunas bibliotecas de visualización esperan un array de arrays.

Por ejemplo:

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

En el siguiente código, se muestra cómo acceder a una fila de filas desde el 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});