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.
- Obtén las dimensiones del iframe
- 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] }
]
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});