Como escrever sua visualização

Como escrever o código de visualização

A biblioteca auxiliar do Looker Studio oferece uma interface entre você e o Looker Studio. Para usá-la, envie uma função de callback que renderize a visualização.

A principal função da biblioteca é subscribeToData, que recebe dois argumentos: uma função callback que renderiza a visualização e um objeto options que especifica o tipo de transformação que você fazer nos seus dados. Consulte a referência da biblioteca e saiba mais.

Veja a seguir a aparência do código JavaScript da sua visualização.

function drawViz(vizData){
  var height = dscc.getHeight();
  var width = dscc.getWidth();
  console.log(vizData);
  // this is where you write your viz code
}

dscc.subscribeToData(drawViz, {transform: dscc.objectTransform})

Há alguns pontos a serem considerados ao escrever uma visualização da comunidade.

A função subscribeToData é atualizada quando os dados, o estilo ou o tamanho do iframe mudam.

Exemplo:

// create and add the canvas
// do this one time
var canvasElement = document.createElement('canvas');
var ctx = canvasElement.getContext('2d');
canvasElement.id = 'myViz';
document.body.appendChild(canvasElement);

function drawViz(data){
  // clear the canvas
  var ctx = canvasElement.getContext('2d');
  ctx.clearRect(0, 0, canvasElement.width, canvasElement.height);

  // viz code goes here

}

O Looker Studio carrega e executa arquivos JavaScript, não HTML. Toda a manipulação de DOM precisa acontecer através de JavaScript.

Por exemplo: o código a seguir define e anexa uma div ao DOM.

// create and add the canvas
var chartElement = document.createElement('div');
chartElement.id = 'myViz';
document.body.appendChild(chartElement);

Como agrupar o código

Os layouts da comunidade do Looker Studio permitem carregar apenas um arquivo JavaScript. O código enviado precisa ser um único arquivo que inclua a biblioteca auxiliar dscc, quaisquer bibliotecas de visualização JavaScript e seu código de visualização.

Para fazer isso no bash, você pode usar o comando cat, como no exemplo abaixo.

cat dscc.min.js vizLibrary.js myVizSource.js > myViz.js

Como definir o manifesto

O arquivo do manifesto de visualização fornece metadados sobre a visualização, além de informações sobre o local dos recursos de visualização. O local do arquivo é chamado de "Código do componente" e é usado para carregar uma visualização da comunidade.

Leia a referência do manifesto para ver um exemplo.

O parâmetro devMode do manifesto determina o comportamento do armazenamento em cache da visualização. Ao desenvolvê-la, devMode precisa estar definido como true para garantir que atualizações forçadas carreguem a versão mais recente dos recursos. Quando o código estiver estável, devMode precisará ser configurado como false para que os relatórios com visualizações da comunidade carreguem rapidamente. Para saber mais sobre o armazenamento em cache, consulte o guia avançado.

Próximas etapas

Agora que você já escreveu o código da sua visualização, saiba como hospedá-la.