1. Introdução
Com o Looker Studio, você pode criar painéis interativos e dinâmicos com visualizações de dados incríveis sem custos financeiros. Extraia seus dados de várias fontes e crie relatórios ilimitados no Looker Studio, com recursos completos de edição e compartilhamento. A captura de tela a seguir é um exemplo de relatório do Looker Studio:
( Clique aqui para ver este exemplo de relatório no Looker Studio)
O Looker Studio oferece vários tipos de gráficos integrados, incluindo de linhas, de barras, de pizza e de dispersão. Com as visualizações da comunidade, é possível criar e usar suas próprias visualizações personalizadas em JavaScript no Looker Studio. Você também pode compartilhar suas visualizações da comunidade com outras pessoas para que elas possam usar com os próprios dados.
O que você vai aprender
Neste codelab, você vai aprender a:
- Como funciona um layout da comunidade do Looker Studio.
- Como criar um layout da comunidade usando a biblioteca auxiliar ds-component (dscc).
- Como usar seu layout da comunidade em um relatório do Looker Studio.
O que é necessário
Para concluir este codelab, você vai precisar de:
- Acesso à Internet e a um navegador da Web.
- uma Conta do Google.
- Acesso a um bucket de armazenamento do Google Cloud Platform.
- Familiaridade com JavaScript.
2. Pesquisa rápida
Por que você escolheu este codelab?
Como você planeja usar este codelab/tutorial?
Como você classificaria sua experiência com o Looker Studio?
Qual opção descreve melhor sua formação?
Quais bibliotecas de visualização JavaScript você tem interesse em usar?
Acesse a próxima página para enviar as informações da pesquisa.
3. Visão geral das visualizações da comunidade
Com as visualizações da comunidade do Looker Studio, é possível criar e usar visualizações personalizadas em JavaScript nos seus painéis.
Neste codelab, você vai criar uma visualização da comunidade de gráfico de tabela que aceita uma dimensão, uma métrica e estilização de cabeçalho da tabela.
4. Fluxo de trabalho de desenvolvimento de layouts da comunidade
Para criar um layout da comunidade, você precisa dos seguintes arquivos em um bucket de armazenamento do Google Cloud Platform, que será criado em uma etapa posterior:
Nome do arquivo | Tipo de arquivo | Finalidade |
manifest.json* | JSON | Metadados sobre a visualização e os locais de todos os recursos de visualização. |
viz-codelab.json | JSON | Opções de configuração de dados e estilo para o painel de propriedades. |
viz-codelab.js | JavaScript | O código JavaScript para renderizar a visualização. |
viz-codelab.css (opcional) | CSS | Estilos CSS para a visualização. |
*O manifesto é o único arquivo que tem um nome obrigatório. Os outros arquivos podem ter nomes diferentes, desde que o nome/local seja especificado no arquivo de manifesto.
5. Escrever uma visualização "Hello, world!"
Nesta seção, você vai adicionar o código necessário para renderizar uma visualização simples de "Hello, world!".
Escrever a origem JavaScript da visualização
Etapa 1:faça o download do arquivo dscc.min.js na página Biblioteca de componentes da comunidade do Looker Studio (dscc) e copie para seu diretório de trabalho.
Etapa 2:copie o código a seguir em um editor de texto e salve-o como viz-codelab-src.js no seu diretório de trabalho local.
viz-codelab-src.js
function drawViz(data) {
// Container setup.
let container = document.getElementById('container');
if (container) {
container.textContent = '';
} else {
container = document.createElement('div')
container.id = 'container'
document.body.appendChild(container);
}
// Render the viz.
container.textContent = 'Hello, viz world!';
}
// Subscribe to data and style changes. Use the table format for data.
dscc.subscribeToData(drawViz, { transform: dscc.tableTransform });
Preparar o arquivo de pacote JavaScript
Etapa 3:combine todo o JavaScript necessário em um único arquivo copiando o conteúdo da biblioteca auxiliar de visualização (dscc.min.js) e seu arquivo viz-codelab-src.js em um novo arquivo chamado viz-codelab.js. Os comandos a seguir podem ser executados para concatenar os arquivos. Repita essa etapa sempre que atualizar o código de visualização de origem.
Script de concatenação do Linux/macOS
cat dscc.min.js > viz-codelab.js
echo >> viz-codelab.js
cat viz-codelab-src.js >> viz-codelab.js
Script de concatenação do Windows
del viz-codelab.js
type nul > viz-codelab.js
type dscc.min.js >> viz-codelab.js
echo.>> viz-codelab.js
type viz-codelab-src.js >> viz-codelab.js
6. Escrever o CSS de visualização
O arquivo CSS define o estilo da visualização e é opcional. Copie o CSS a seguir e salve-o como viz-codelab.css.
viz-codelab.css
table {
width: 100%;
border-collapse: collapse;
}
tr {
border-bottom: 1pt solid #d1d1d1;
}
th, td {
padding: 8px;
text-align: left;
}
7. Escrever a configuração JSON
A configuração define os atributos de dados e estilo aceitos e exigidos pela visualização. Essa visualização neste codelab requer uma dimensão e uma métrica, além de ter um elemento de estilo para selecionar uma cor de preenchimento. Saiba mais sobre dimensões e métricas.
Copie o código a seguir e salve como viz-codelab.json.. Para saber mais sobre as propriedades que podem ser configuradas, consulte a referência de configuração da visualização da comunidade.
viz-codelab.json
{
"data": [
{
"id": "concepts",
"label": "Concepts",
"elements": [
{
"id": "tableDimension",
"label": "Dimension",
"type": "DIMENSION",
"options": {
"min": 1,
"max": 1
}
},
{
"id": "tableMetric",
"label": "Metric",
"type": "METRIC",
"options": {
"min": 1,
"max": 1
}
}
]
}
],
"style": [
{
"id": "header",
"label": "Table Header",
"elements": [
{
"type": "FILL_COLOR",
"id": "headerBg",
"label": "Header Background Color",
"defaultValue": "#e0e0e0"
}
]
}
]
}
8. Criar um projeto e um bucket do Cloud Storage
Etapa 1 : crie um projeto do Google Cloud Platform (GCP) ou use um atual.
Etapa 2 : crie um bucket do GCP. A classe de armazenamento recomendada é Regional. Acesse Preços do Cloud Storage para mais detalhes sobre os níveis sem custo financeiro. Observação: é pouco provável que o armazenamento de visualização incorra em custos para a classe de armazenamento Regional Storage.
Etapa 3:anote o nome/caminho do bucket, começando pela seção depois de Buckets/. O caminho é chamado de "ID do componente" no Looker Studio e é usado para identificar e implantar uma visualização.
9. Escrever o arquivo manifest.json
O arquivo de manifesto fornece informações sobre o local e os recursos da sua visualização. Ele precisa ter o nome "manifest.json" e estar localizado no bucket/caminho criado na etapa anterior, o mesmo caminho usado para o ID do componente.
Copie o código a seguir em um editor de texto e salve-o como manifest.json.
Para saber mais sobre o manifesto, consulte a documentação de referência do manifesto.
manifest.json
{
"name": "Community Visualization",
"logoUrl": "https://raw.githubusercontent.com/googledatastudio/community-visualizations/master/docs/codelab/img/table-chart.png",
"organization": "Looker Studio Codelab",
"organizationUrl": "https://url",
"termsOfServiceUrl": "https://url",
"supportUrl": "https://url",
"packageUrl": "https://url",
"privacyPolicyUrl": "https://url",
"description": "Community Visualization Codelab",
"devMode": true,
"components": [
{
"id": "tableChart",
"name": "Table",
"iconUrl": "https://raw.githubusercontent.com/googledatastudio/community-visualizations/master/docs/codelab/img/table-chart.png",
"description": "A simple table chart.",
"resource": {
"js": "gs://MY_GOOGLE_CLOUD_STORAGE_BUCKET/viz-codelab.js",
"config": "gs://MY_GOOGLE_CLOUD_STORAGE_BUCKET/viz-codelab.json",
"css": "gs://MY_GOOGLE_CLOUD_STORAGE_BUCKET/viz-codelab.css"
}
}
]
}
10. Fazer upload dos arquivos de visualização para o Google Cloud Storage
- Faça upload dos arquivos
manifest.json,viz-codelab.js,viz-codelab.jsoneviz-codelab.csspara seu bucket do Cloud Storage usando a interface da Web ou a ferramenta de linha de comando gsutil. Repita esse processo sempre que atualizar a visualização.
Comandos de upload da gsutil
gsutil cp -a public-read manifest.json gs://MY_GOOGLE_CLOUD_STORAGE_BUCKET
gsutil cp -a public-read viz-codelab.* gs://MY_GOOGLE_CLOUD_STORAGE_BUCKET
11. Testar sua visualização da comunidade no Looker Studio
Criar um relatório e adicionar dados
Etapa 1:copie o URL do conjunto de dados de amostra da visualização da comunidade. Se preferir, use qualquer fonte de dados e pule as etapas a seguir.
Etapa 2 : faça login no Looker Studio. No canto superior esquerdo, clique em + Criar e selecione Relatório.
Etapa 3:o painel Adicionar dados ao relatório do editor de relatórios vai aparecer.
Etapa 4:na guia Conectar aos dados, selecione o conector Google Planilhas do Google.
Etapa 5:selecione URL e cole o URL da Planilha Google da etapa 1.
Etapa 6:no canto inferior direito, clique em Adicionar.
Etapa 7: se for solicitado que você confirme Você está prestes a adicionar dados a este relatório,clique em ADICIONAR AO RELATÓRIO. Um relatório sem título é criado, e uma tabela padrão com dados de exemplo é adicionada a ele. Se quiser, selecione e exclua a tabela padrão para ter um relatório em branco.
Adicionar o layout da comunidade ao relatório
Etapa 1:na barra de ferramentas, clique em "Visualizações e componentes da comunidade" 
.
Etapa 2:clique em + Descoberta avançada para abrir a galeria da comunidade.
Etapa 3:clique em Criar sua própria visualização.
Etapa 4:em Testar e adicionar seu layout da comunidade, insira o Caminho do manifesto e clique em Enviar. O caminho do manifesto é o nome e o caminho do bucket do Cloud Storage que apontam para o local do manifesto da visualização, com o prefixo gs://.. Por exemplo: gs://community-viz-docs/viz-codelab. Se você inseriu um caminho do manifesto válido, um card de visualização será renderizado.
Etapa 5:clique no card de visualização para adicioná-lo ao relatório.
Etapa 6:se solicitado, permita que a visualização seja renderizada.
Etapa 7:se quiser, atualize a dimensão e a métrica selecionadas para a tabela. Se você estiver usando o conjunto de dados de amostra fornecido, defina a dimensão como País e a métrica como População. Isso não vai afetar a visualização até mais tarde no codelab.
O painel de propriedades à direita reflete os elementos configurados em viz-codelab.json.
No painel Configuração, a visualização permite uma dimensão e uma métrica.
No painel Estilo, a visualização tem um único elemento para estilizar o cabeçalho da tabela. Neste ponto, o controle de estilo não terá efeito na visualização até que o código dela seja atualizado em uma etapa posterior. Observação: você vai encontrar outras opções de estilo para sua visualização que não foram definidas no arquivo de configuração. Isso é esperado, já que todas as visualizações têm um conjunto de controles comuns que ficam disponíveis automaticamente.
12. Renderizar os dados como uma tabela
Nesta seção, você vai atualizar a visualização para mostrar o conjunto de dados de amostra de visualização da comunidade como uma tabela.
Os dados a serem renderizados estão disponíveis no objeto tables e são estruturados com base na transformação especificada pela visualização. Neste codelab, a visualização solicitou o formato de tabela (tableTransform), que inclui um objeto headers e um objeto rows com todos os dados necessários para renderizar uma tabela.
Etapa 1:substitua o conteúdo de viz-codelab-src.js pelo código abaixo.
viz-codelab-src.js
function drawViz(data) {
// Container setup.
let container = document.getElementById('container');
if (container) {
container.textContent = '';
} else {
container = document.createElement('div')
container.id = 'container'
document.body.appendChild(container);
}
// Create the table.
const table = document.createElement('table');
const tableHeader = document.createElement('thead');
const tableBody = document.createElement('tbody');
data.tables.DEFAULT.headers.forEach(function (column) {
const tableColumn = document.createElement('th');
tableColumn.textContent = column.name;
tableHeader.appendChild(tableColumn);
});
data.tables.DEFAULT.rows.forEach(function(row) {
const tableRow = document.createElement('tr');
row.forEach(function(cell) {
const tableCell = document.createElement('td');
if (typeof cell == 'number') {
tableCell.textContent = new Intl.NumberFormat().format(cell);
} else {
tableCell.textContent = cell;
}
tableRow.appendChild(tableCell);
});
tableBody.appendChild(tableRow);
});
table.appendChild(tableHeader);
table.appendChild(tableBody);
// Render the table.
container.appendChild(table);
}
// Subscribe to data and style changes. Use the table format for data.
dscc.subscribeToData(drawViz, { transform: dscc.tableTransform });
Etapa 2:prepare o arquivo de pacote JavaScript e faça upload e substitua os arquivos de visualização no Google Cloud Storage.
Etapa 3:atualize o relatório do Looker Studio para recarregar e testar seu layout da comunidade. A tabela agora renderiza dados (ou seja, a planilha Google) e mostra colunas de cabeçalho com base na dimensão e na métrica selecionadas. Redimensione a visualização para ver todas as linhas.
13. Aplicar mudanças de estilo de forma dinâmica
Nesta seção, você vai atualizar a visualização para estilizar o cabeçalho da tabela com base na cor de preenchimento selecionada no painel Estilo.
O estado de todos os elementos de estilo está disponível no objeto style, em que cada chave de item é definida com base na configuração de estilo de visualização (viz-codelab.json). Para esta seção, você vai receber a cor de preenchimento selecionada e usá-la para atualizar a cor de plano de fundo do cabeçalho da tabela.
Etapa 1:substitua o código no arquivo viz-codelab-src.js pelo código abaixo.
viz-codelab-src.js
function drawViz(data) {
// Container setup.
let container = document.getElementById('container');
if (container) {
container.textContent = '';
} else {
container = document.createElement('div')
container.id = 'container'
document.body.appendChild(container);
}
// Create the table.
const table = document.createElement('table');
const tableHeader = document.createElement('thead');
const tableBody = document.createElement('tbody');
data.tables.DEFAULT.headers.forEach(function (column) {
const tableColumn = document.createElement('th');
tableColumn.textContent = column.name;
tableHeader.appendChild(tableColumn);
});
data.tables.DEFAULT.rows.forEach(function(row) {
const tableRow = document.createElement('tr');
row.forEach(function(cell) {
const tableCell = document.createElement('td');
if (typeof cell == 'number') {
tableCell.textContent = new Intl.NumberFormat().format(cell);
} else {
tableCell.textContent = cell;
}
tableRow.appendChild(tableCell);
});
tableBody.appendChild(tableRow);
});
table.appendChild(tableHeader);
table.appendChild(tableBody);
// Set header color based on style control.
tableHeader.style.backgroundColor = data.style.headerBg.value.color;
// Render the table.
container.appendChild(table);
}
// Subscribe to data and style changes. Use the table format for data.
dscc.subscribeToData(drawViz, { transform: dscc.tableTransform });
Etapa 2:prepare o arquivo de pacote JavaScript e faça upload e substitua os arquivos de visualização no Google Cloud Storage.
Etapa 3:atualize o relatório do Looker Studio para recarregar e testar seu layout da comunidade.
Etapa 4:no painel Estilo, use o controle de estilo Cor de fundo do cabeçalho para mudar a cor de fundo do cabeçalho da tabela.
Parabéns! Você criou um layout da comunidade no Looker Studio! E, com isso, chegamos ao fim deste codelab. Agora, vamos ver quais são as próximas etapas.
14. Próximas etapas
Ampliar sua visualização
- Saiba mais sobre os dados e formatos disponíveis para sua visualização.
- Saiba mais sobre os elementos de estilo disponíveis e adicione mais estilo à sua visualização.
- Adicionar interações à sua visualização
- Aprenda a desenvolver uma visualização localmente
Faça mais com as visualizações da comunidade
- Revise as referências da biblioteca auxiliar dscc, do manifesto e do arquivo de configuração.
- Envie sua visualização para a Galeria de visualizações da comunidade.
- Crie um conector da comunidade para o Looker Studio.
Outros recursos
Confira abaixo diversos recursos que podem ajudar você a se aprofundar no material abordado neste codelab.
Tipo de recurso | Recursos do usuário | Recursos para desenvolvedores |
Documentação | ||
Notícias e atualizações | Inscreva-se no Looker Studio > Configurações do usuário | |
Fazer perguntas | ||
Exemplos |