Cómo usar la biblioteca auxiliar

Looker Studio usa la interfaz postMessage para proporcionar datos y la información de diseño al iframe que contiene la visualización de la comunidad. En esta guía, se proporciona más información sobre el uso de la biblioteca de ayuda.

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

  1. Cómo obtener las dimensiones del iframe
  2. Administra la comunicación con Looker 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, Looker Studio envía eventos a tu visualización.

dscc.subscribeToData registra una devolución de llamada que se invocará para cada evento postMessage de Looker Studio. A la devolución de llamada se le pasa un objeto 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});

Los datos devueltos

Ambas transformaciones de datos devuelven 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 sobre el 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 de componentes de ds proporciona dos transformaciones diseñadas para llevarte directamente a estos formatos de datos.

Las dos transformaciones se documentan en la referencia de la biblioteca. 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 devuelve un array de objetos, y tableTransform, que devuelve 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 definieron dos dimensiones para un diagrama de Sankey), la transformación dependerá de tu caso de uso, ya que el formato de datos que devuelve 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});