Cómo usar la biblioteca auxiliar

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

En el caso de las visualizaciones de la comunidad, ds-component entrega dos funciones.

1. Obtén las dimensiones del iframe
2. Administra la comunicación con Looker Studio

Suscripción a eventos

Cuando un usuario interactúa con tu visualización, por ejemplo, cambia los campos seleccionados, o cambia el estilo o cambia 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. La devolución de llamada recibe 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 que se muestran

Ambas transformaciones de datos muestran un objeto con cinco claves.

Clave	Objetivo
style	Información sobre el estilo predeterminado y seleccionado por el usuario
fields	Información sobre los campos seleccionados por el usuario
interactions	Interacciones seleccionadas por el usuario
theme	Envía información sobre el tema
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 ds proporciona dos transformaciones, que están 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 comúnmente esperan las bibliotecas de visualización de JavaScript. Las dos transformaciones admitidas son: objectTransform, que muestra un arreglo de objetos, y tableTransform, que muestra un arreglo de arreglos.

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 del 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 modo que un usuario pueda ingresar varios campos (por ejemplo, si se definieron dos dimensiones para un diagrama Sankey), la transformación dependerá de tu caso de uso, ya que el formato de datos que muestra Looker Studio se verá de la siguiente manera:

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

Nota: Las transformaciones de datos necesarias dependerán de tu configuración de visualización.

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