Como usar a biblioteca auxiliar

O Looker Studio usa postMessage para fornecer dados e informações de estilo para o iframe que contém as 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 campos selecionados, ou redimensionar o componente, o Looker Studio envia eventos para com a visualização de dados.

dscc.subscribeToData registra um callback que será invocado para cada postMessage do Looker Studio. O callback recebe um data. objeto.

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),
}

Diferentes visualizações exigem diferentes formatos de dados. Dois formatos comuns são uma matriz de matrizes ou uma matriz de objetos. A biblioteca ds-component fornece dois , que são projetadas para levá-lo 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 do 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 forma que um usuário possa inserir vários campos (por exemplo, se houvesse duas dimensões definidas para um diagrama de Sankey), o vai depender do seu caso de uso, já que o formato de dados retornado pelo Looker O Studio terá esta aparência:


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