Cómo usar la biblioteca auxiliar

Looker Studio usa postMessage para proporcionar información de estilo e información al iframe que contiene la visualización comunitaria. En esta guía, se proporcionan más detalles sobre el uso del asistente biblioteca.

Para las visualizaciones comunitarias, ds-component tiene 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 diseñar o cambiar 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 postMessage de Looker Studio. La devolución de llamada recibe un 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 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	Informar la información del 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 ds-component proporciona dos transformaciones de datos, que están diseñadas para llegar directamente a estos formatos de datos.

Las dos transformaciones se documentan library-reference. Estos Las transformaciones se asignan fácilmente a los formatos de datos que comúnmente espera JavaScript. bibliotecas de visualización. Las dos transformaciones admitidas son las siguientes: 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'}
];

El siguiente código muestra cómo acceder a un array de objetos desde el 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 están definidas de manera que un usuario puede ingresar múltiples campos (para ejemplo, si hay dos dimensiones definidas para un diagrama de Sankey), el transformará dependerá de tu caso de uso, ya que el formato de datos que devuelve Looker Studio tendrá un aspecto similar al siguiente:

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]
];

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