Como usar a biblioteca auxiliar

O Looker Studio usa a interface postMessage para fornecer dados e informações de estilo ao iframe que contém a visualização da comunidade. Este guia dá mais detalhes sobre o uso da biblioteca auxiliar.

O ds-component tem duas funções nas visualizações da comunidade.

  1. Obter as dimensões do iframe
  2. Gerenciar a comunicação com o Looker Studio

Inscrever-se em eventos

Quando um usuário interage com sua visualização, por exemplo, ao alterar os campos selecionados e o estilo ou redimensionar o componente, o Looker Studio envia eventos para ela.

dscc.subscribeToData registra um callback que será invocado para cada evento postMessage do Looker Studio. O callback recebe um 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});

Dados retornados

As duas transformações de dados retornam um objeto com cinco chaves.

Chave Finalidade
style Informações sobre os estilos padrão selecionados pelo usuário
fields Informações sobre os campos selecionadas pelo usuário
interactions Interações selecionadas pelo usuário
theme Informações sobre o tema
tables Linhas de dados
dateRanges Períodos padrão e de comparação

Formato dos dados:

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

Visualizações diferentes exigem formatos de dados distintos. Dois formatos comuns são uma matriz de matrizes ou uma matriz de objetos. A biblioteca ds-component fornece duas transformações, que levam diretamente a esses formatos de dados.

As duas transformações estão documentadas na referência da biblioteca e podem ser facilmente mapeadas para os formatos de dados mais esperados pelas bibliotecas de visualização JavaScript. As duas transformações compatíveis são: objectTransform, que retorna uma matriz de objetos, e tableTransform, que retorna uma matriz de matrizes.

dscc.objectTransform

Algumas visualizações esperam dados como uma matriz de objetos.

Exemplo:

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

O código a seguir mostra como acessar uma matriz de objetos no 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]
    };
  };

}

Se as seções de dados forem definidas de modo que um usuário possa inserir vários campos (por exemplo, se houvesse duas dimensões definidas para um diagrama de Sankey), a transformação dependerá do seu caso de uso, já que o formato de dados retornado pelo Looker Studio será semelhante a:


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

dscc.tableTransform

Algumas bibliotecas de visualização esperam uma matriz de matrizes.

Exemplo:

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

O código a seguir mostra como acessar uma linha de linhas no 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});