1. Introdução
O Looker Studio permite que você crie painéis interativos e em tempo real com visualizações de dados incríveis sem pagar nada. Busque dados de diversas fontes e crie relatórios ilimitados no Looker Studio, com recursos completos de edição e compartilhamento. A captura de tela abaixo é 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 gráficos de linhas, de barras, de pizza e de dispersão. Com as visualizações da comunidade, você pode criar e usar suas visualizações JavaScript personalizadas no Looker Studio. Você também pode compartilhar seus layouts da comunidade com outras pessoas para que elas possam usá-las com seus próprios dados.
O que você vai aprender
Neste codelab, você vai aprender:
- Como funciona uma visualização da comunidade do Looker Studio.
- Como criar uma visualização da comunidade usando a biblioteca auxiliar ds-component (dscc).
- Como usar um layout da comunidade em um relatório do Looker Studio.
O que é necessário
Para concluir este codelab, você vai precisar do seguinte:
- 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 é a melhor descrição para sua experiência?
Quais bibliotecas de visualização JavaScript você tem interesse em usar?
Vá para a próxima página para enviar as informações da pesquisa.
3. Visão geral dos layouts da comunidade
As visualizações da comunidade do Looker Studio permitem criar e usar visualizações JavaScript personalizadas nos seus painéis.
Neste codelab, você vai criar uma visualização da comunidade de gráficos de tabela compatível com uma dimensão, uma métrica e o estilo do cabeçalho da tabela.
4. Fluxo de trabalho de desenvolvimento do layout 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 no painel "Propriedade". |
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 com um nome obrigatório. Os outros arquivos podem ser nomeados de forma diferente, desde que o nome/local seja especificado no arquivo de manifesto.
5. Escreva "Hello, world!" visualização
Nesta seção, você vai adicionar o código necessário para renderizar uma mensagem "Hello, world!" simples. com a visualização de dados.
Escrever a origem JavaScript da visualização
Etapa 1:faça o download do arquivo dscc.min.js na página da 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 como viz-codelab-src.js no 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 do 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 o arquivo viz-codelab-src.js para 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 da visualização de origem.
Script de concatenação do Linux/Mac OS
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 da visualização
O arquivo CSS define o estilo da sua 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. Gravar a configuração JSON
A configuração define os atributos de dados e estilo aceitos e exigidos pela visualização. A 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 e salve o código a seguir 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 ver detalhes sobre os níveis sem custo financeiro. Observação: é improvável que o armazenamento da visualização gere custos para a classe Regional Storage.
Etapa 3: anote o nome/caminho do bucket, começando com a seção depois de Buckets/. O caminho é conhecido como "ID de componente". no Looker Studio e é usado para identificar e implantar uma visualização.
9. Gravar o arquivo manifest.json
O arquivo do manifesto fornece informações sobre o local e os recursos da visualização. Ele precisa ter o nome "manifest.json" e estar no bucket/caminho criado na etapa anterior, o mesmo caminho usado para o ID do componente.
Copie o código abaixo em um editor de texto e salve como manifest.json..
Para saber mais sobre o manifesto, acesse 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 o upload dos arquivos
manifest.json,viz-codelab.js,viz-codelab.jsoneviz-codelab.cssno bucket do Google Cloud Storage usando a interface da Web ou a ferramenta de linha de comando gsutil. Repita isso toda vez que atualizar sua visualização.
Comandos de upload do 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 a 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. Também é possível usar qualquer fonte de dados e pular 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:você vai encontrar o editor de relatórios com o painel Adicionar dados ao relatório aberto.
Etapa 4:na guia Conectar aos dados, selecione o conector do Planilhas 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 você receber uma solicitação para confirmar Você está prestes a adicionar dados a esse relatório,clique em ADICIONAR AO RELATÓRIO. Um relatório sem título é criado e uma tabela padrão é adicionada ao relatório com dados de amostra. Como opção, selecione e exclua a tabela padrão para que você fique com um relatório em branco.
Adicionar seu layout da comunidade ao relatório
Etapa 1:na barra de ferramentas, clique em "Visualizações e componentes da comunidade" 
.
Etapa 2:clique em + Explorar mais 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 do bucket do Google Cloud Storage e o caminho que aponta 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 de manifesto válido, um cartão de visualização será renderizado.
Etapa 5:clique no card de visualização para adicioná-lo ao relatório.
Etapa 6:se solicitado, permita a renderização da visualização.
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é um momento posterior 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. Nesse ponto, o controle de estilo não terá efeito na visualização até que o código da visualização seja atualizado em uma etapa posterior. Observação: você vai encontrar outras opções de estilo para sua visualização que não definiu no arquivo de configuração. Isso é esperado, já que todas as visualizações têm um conjunto de controles comuns que são disponibilizados automaticamente.
12. Renderizar os dados como uma tabela
Nesta seção, você vai atualizar sua visualização para mostrar o conjunto de dados de amostra da 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 do JavaScript. Em seguida, faça upload dos arquivos de visualização e substitua-os 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 (por exemplo, a planilha Google) e mostra colunas de cabeçalho com base na dimensão e métrica selecionadas. Redimensione a visualização para mostrar todas as linhas.
13. Aplicar mudanças de estilo dinamicamente
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 do estilo de visualização (viz-codelab.json). Nesta seção, você receberá a cor de preenchimento selecionada e a usará para atualizar a cor do 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 do JavaScript. Em seguida, faça upload dos arquivos de visualização e substitua-os 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 do plano de fundo do cabeçalho para mudar a cor do plano de fundo do cabeçalho da tabela.
Parabéns! Você criou um layout da comunidade no Looker Studio. Chegamos ao final deste codelab. Agora, vamos conferir os próximos passos.
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 outros estilos à sua visualização.
- Adicionar interações à sua visualização
- Aprenda a desenvolver uma visualização localmente.
Faça mais com os layouts da comunidade
- Revise as referências da biblioteca auxiliar dscc, do manifesto e do arquivo de configuração.
- Envie sua visualização para nossa galeria de layouts da comunidade.
- Crie um conector da comunidade para o Looker Studio.
Outros recursos
Confira abaixo vários recursos que você pode acessar para 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 |