1. Introdução
O Data Studio permite criar painéis interativos e dinâmicos com visualizações de dados incríveis, tudo sem custo financeiro. Busque seus dados de várias fontes e crie relatórios ilimitados no Data Studio, com recursos completos de edição e compartilhamento. A captura de tela a seguir é um exemplo de relatório do Data Studio:
( Clique aqui para ver este exemplo de relatório no Data Studio)
O Data Studio oferece vários tipos de gráficos integrados, incluindo gráficos de linhas, de barras, de pizza e de dispersão. As visualizações da comunidade permitem criar e usar suas próprias visualizações personalizadas em JavaScript no Data Studio. Você também pode compartilhar suas visualizações da comunidade com outras pessoas para que elas possam usá-las com os próprios dados.
O que você vai aprender
Neste laboratório de código, você vai aprender:
- Como funciona uma visualização da comunidade do Data Studio.
- Como criar uma visualização da comunidade usando a biblioteca auxiliar ds-component (dscc).
- Como usar sua visualização da comunidade em um relatório do Data Studio.
O que é necessário
Para concluir este laboratório de código, 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.
- Conhecimento de 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 Data Studio?
Qual opção descreve melhor sua formação?
Quais bibliotecas de visualização em 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
As visualizações da comunidade do Data Studio community visualizations permitem 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 oferece suporte a uma dimensão, uma métrica e estilo de cabeçalho de tabela.
4. Fluxo de trabalho de desenvolvimento de visualização da comunidade
Para criar uma visualização 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 deles seja especificado no arquivo de manifesto.
5. Criar uma visualização "Olá, mundo!"
Nesta seção, você vai adicionar o código necessário para renderizar uma visualização simples "Olá, mundo!".
Criar 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 Data Studio (dscc) e copie-o para o 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 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 o 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 esta 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. Criar o CSS da 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. Criar a configuração JSON
A configuração de visualização define os atributos de dados e estilo com suporte e necessários para a visualização. Essa visualização neste codelab exige uma dimensão e uma métrica e tem 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-o como viz-codelab.json.Para saber mais sobre as propriedades que podem ser configuradas, consulte a referência de configuração de 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: é improvável que o armazenamento de visualização incorra em custos para a classe de armazenamento Regional.
Etapa 3:anote o nome/caminho do bucket, começando pela seção após Buckets/. O caminho é chamado de "ID do componente" no Data Studio e é usado para identificar e implantar uma visualização.
9. Criar o arquivo manifest.json
O arquivo de manifesto fornece informações sobre o local e os recursos da visualização. Ele precisa ser chamado de "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": "Data 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.json, eviz-codelab.csspara o 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 a visualização da comunidade no Data Studio
Criar um relatório e adicionar dados
Etapa 1: copie o URL do conjunto de dados de amostra da visualização da comunidade. Como alternativa, use qualquer fonte de dados que preferir e pule as etapas a seguir.
Etapa 2 : faça login no Data Studio. No canto superior esquerdo, clique em + Criar e selecione Relatório.
Etapa 3:você vai abrir o painel Adicionar dados ao relatório do editor de relatórios.
Etapa 4:na guia Conectar aos dados, selecione o conector Planilhas Google 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 a confirmar 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 é adicionada ao relatório com dados de amostra. Opcionalmente, selecione e exclua a tabela padrão para ficar com um relatório em branco.
Adicionar a visualização 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 sua visualização 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 aponta para o local do manifesto da visualização, com o prefixo gs://. Por exemplo: gs://community-viz-docs/viz-codelab. Se você tiver inserido 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:opcionalmente, 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 terá efeito na visualização até mais tarde no codelab.
O painel de propriedades no lado direito 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 momento, o controle de estilo não terá efeito na visualização até que o código de visualização seja atualizado em uma etapa posterior. Observação: você verá outras opções de estilo para a 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 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 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 que contém 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 o upload e substitua os arquivos de visualização no Google Cloud Storage.
Etapa 3:atualize o relatório do Data Studio para recarregar e testar a visualização da comunidade. A tabela agora renderiza dados (ou seja, a Planilha Google) e mostra colunas de cabeçalho com base na dimensão e métrica selecionadas. Redimensione a visualização para ver 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 de estilo da 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 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 o upload e substitua os arquivos de visualização no Google Cloud Storage.
Etapa 3:atualize o relatório do Data Studio para recarregar e testar a visualização 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 uma visualização da comunidade no Data Studio. Isso leva você ao final deste codelab. Agora, vamos ver quais próximas etapas você pode seguir.
14. Próximas etapas
Estender a visualização
- Saiba mais sobre os dados e formatos disponíveis para a visualização.
- Saiba mais sobre os elementos de estilo disponíveis e adicione mais estilos à visualização.
- Adicionar interações à visualização
- Aprenda a desenvolver uma visualização localmente
Fazer mais com as visualizações da comunidade
- Consulte 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.
- Criar um conector da comunidade para o Data 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 do desenvolvedor |
Documentação | ||
Notícias e atualizações | Inscreva-se no Data Studio > Configurações do usuário | |
Fazer perguntas | ||
Exemplos |