Usar la biblioteca auxiliar

Data Studio usa la interfaz postMessage para proporcionar datos e información de estilo al iframe que contiene la visualización comunitaria. En esta guía encontrarás más detalles sobre cómo usar la biblioteca auxiliar.

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

  1. Obtiene las dimensiones del iframe.
  2. Gestiona la comunicación con Data Studio.

Suscripciones a eventos

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

dscc.subscribeToData registra una retrollamada que se invocará para cada evento de postMessage de Data Studio. Se transfiere el objeto data a la retrollamada.

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 Data Studio sends a new postMessage
    dscc.subscribeToData(drawViz, {transform: dscc.objectTransform});
    

Datos devueltos

Ambas transformaciones de datos devuelven un objeto con cinco claves.

Clave Finalidad
style Información de estilo predeterminada y seleccionada por el usuario
fields Información de campos seleccionada por el usuario
interactions Interacciones seleccionadas por el usuario
theme Información sobre el tema del informe
tables Filas de datos

Formato de los datos:

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

Las distintas visualizaciones requieren diferentes formatos de datos. La matriz de matrices o la matriz de objetos son dos formatos comunes. La biblioteca ds-component proporciona dos transformaciones, diseñadas para acceder directamente a estos formatos de datos.

Las dos transformaciones, documentadas en la biblioteca de referencia, se asignan fácilmente a los formatos de datos que suelen esperarse de las bibliotecas de visualizaciones JavaScript. Las dos transformaciones compatibles con objectTransform que devuelve un matriz de objetos y tableTransform que devuelve una matriz de matrices.

dscc.objectTransform

Algunas visualizaciones esperan datos como una matriz de objetos.

Por ejemplo:

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

En el código siguiente se muestra cómo acceder a una matriz 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 introducir varios campos (por ejemplo, si hubiera dos dimensiones definidas de un diagrama de Sankey), la transformación dependerá de tu caso práctico, ya que el formato de datos devuelto por Data Studio sería parecido a este:


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

    

dscc.tableTransform

Algunas bibliotecas de visualizaciones esperan una matriz de matrices.

Por ejemplo:

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

En el código siente 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});