Como escrever o código de visualização
A biblioteca auxiliar do Looker Studio é uma interface entre você e o Looker Estúdio. 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 com 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 só permitem carregar um 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.