Tutorial do Vega-Lite: Explorando o visual personalizado do Deneb no LuckyTemplates

Na postagem do blog de hoje, falarei sobre o novo visual personalizado Deneb Vega-Lite disponível para LuckyTemplates. Usei-o exclusivamente em minha submissão parcial para o LuckyTemplates Challenge #17 sobre relatórios de dados ambientais. Você pode assistir ao vídeo completo deste tutorial na parte inferior deste blog.

Isso recebeu um feedback positivo, e é por isso que decidi fazer um tutorial sobre como usei o Vega-Lite em meu envio. Meu objetivo para este desafio era ganhar experiência usando o visual personalizado do Deneb, e é por isso que optei por usá-lo exclusivamente e não usar nenhum visual padrão do LuckyTemplates.

Eu também não gastei muito tempo com os dados, então não vou gastar nenhum tempo no desenvolvimento do conjunto de dados além de incluir a parte das toxinas do ar em meu relatório.

Índice

• Uma visão geral da página de relatório no Vega-Lite
• Criando a caixa de texto do título
• Fazendo a caixa de texto de informações do relatório
• Criando os cortadores de toxinas
• Fazendo o cortador de ano
• Criando o State Slicer
• Fazendo o cartão de métricas no Vega-Lite
• Criando o Visual Principal Usando o Vega-Lite
• Conclusão

Uma visão geral da página de relatório no Vega-Lite

Vamos dar uma olhada na minha apresentação. Existem 7 visuais diferentes e 2 caixas de texto na parte superior. Temos uma segmentação para Anos , uma segmentação para Estados , uma segmentação para Toxinas , um cartão de métricas e um visual principal exibindo a Concentração de Toxina que pode ser classificada por Estado e Ano .

Agora vamos dar uma olhada em cada interno visual enquanto os desenvolvemos do zero. Antes de começarmos, apenas uma observação rápida sobre o ambiente de desenvolvimento. Para começar, tirei uma cópia do meu envio do Desafio nº 17 e apaguei todas as páginas. Portanto, não havia visuais restantes; apenas os dados, o modelo de dados e os cálculos DAX permaneceram.

Criando a caixa de texto do título

Criei várias páginas em branco na caixa de texto do título. Como o Vega-Lite é uma linguagem gráfica para recursos visuais, não há um método óbvio para criar uma caixa de texto.

Mas como o visual do Vega-Lite é apenas uma coleção de marcas, pensei que poderia usar apenas marcas de texto para simular uma caixa de texto.

Vamos adicionar um visual Deneb. A primeira coisa a fazer é adicionar uma medida com nossos valores (título da página e subtítulo da página) e, em seguida, escolher uma especificação vazia.

Em seguida, vamos ao nosso arquivo de snippets e usamos a medida do título da página para nosso visual. Vamos copiar o bloco de texto aqui…

…. e cole-o no editor visual Deneb.

Podemos usar o controle e a roda do mouse para torná-lo maior. Em seguida, examinaremos a posição para ver se ela está centralizada no visual.

Vamos visualizá-lo adicionando uma marca de círculo para nos mostrar onde está a origem. Vamos criar um visual em camadas com a caixa de texto e uma marca de círculo.

E agora podemos ver que um círculo está localizado no centro de todo o visual.

Outra coisa que podemos fazer é mudar a posição da origem do visual definindo as coordenadas X e Y.

Agora podemos ver que o texto está vindo no canto superior esquerdo.

O próximo passo é alterar o alinhamento do texto. Pegaremos um bloco do meu arquivo de snippets e definiremos o alinhamento no editor para a esquerda e, em seguida, alinharemos a marca central a 0.

A próxima coisa que faremos é copiar alguns dos atributos de fonte para o visual aqui. Vamos adicionar algumas características para o visual marcar.

Vamos agora transformar a marca do círculo em uma marca de texto usando o subtítulo da nossa página e, em seguida, fazer as alterações necessárias.

Em seguida, voltaremos e redimensionaremos o visual um pouco.

Fazendo a caixa de texto de informações do relatório

Vamos passar para a caixa de texto de informações do relatório. Adicionaremos um novo visual Deneb e o colocaremos no canto superior direito e adicionaremos nossa medida de informações de relatório.

Vamos voltar ao visual que acabamos de desenvolver para copiar o código JSON.

Podemos colocar esse código JSON neste novo visual e usar a especificação vazia novamente.

Para este visual, temos apenas uma marca para usar. Não precisamos de uma camada e uma segunda marca, então vamos nos livrar deles e, em seguida, alterar o nome da medida para relatar informações.

Vamos alterar o tamanho da fonte para 12 e o estilo da fonte para itálico. Também mudaremos o alinhamento da esquerda para a direita e mudaremos a coordenada X para 380. Em seguida, voltaremos ao relatório e ajustaremos um pouco o tamanho.

Criando os cortadores de toxinas

Vamos passar para os fatiadores. O Vega-Lite não possui um gráfico específico para um slicer, mas você pode usar visuais em vez de slicers.

Para as segmentações, vamos tentar usar gráficos de barras de tamanho fixo. Adicionaremos um fatiador usando nosso visual Deneb e adicionaremos nossas Toxinas como um valor. Adicionaremos nossa medida Size , que é um simples igual a um.

Assim que os tivermos bloqueados, podemos usar uma especificação de gráfico de barras simples, selecionar Toxina para a categoria e selecionar Tamanho para a medida.

E lá vamos nós. Agora temos um gráfico de barras horizontais.

Mudaremos isso de um gráfico de barras para um gráfico de colunas invertendo X e Y.

A próxima coisa a fazer é definir os rótulos como horizontais e desligar o eixo X. Vou copiar este bloco de texto aqui e colá-lo no editor.

Podemos alterar a forma de nossos gráficos de barras para uma forma de pílula definindo o raio do canto aqui.

Vamos voltar ao relatório para reduzir esse tamanho até que o gráfico pareça mais com uma pílula.

Vamos desligar o eixo Y e definir o eixo como nulo. Em seguida, desligue a dica de ferramenta e altere-a de verdadeiro para falso.

A próxima coisa que queremos fazer é definir a fonte como vermelha, então adicionaremos essa parte à descrição do eixo X.

A próxima coisa a fazer é desligar a borda. Adicionaremos um traçado transparente à configuração desse visual. Iremos para a seção Config , adicionaremos uma vírgula e um bloco. Como você pode ver, a fronteira desapareceu.

Finalmente, a última coisa que queremos fazer para o cortador de toxinas é adicionar um título. Vamos copiar o código do meu arquivo de trechos e adicionar um título.

Fazendo o cortador de ano

Para o cortador de ano, vamos aproveitar o trabalho que já fizemos e copiar e colar o cortador de toxinas e depois fazer alguns ajustes. Moveremos a duplicata um pouco mais para cima, eliminaremos a toxina do valor do campo e adicionaremos o ano.

Em seguida, editarei o código do Vega-Lite e alterarei o título de Toxins para Years.

Como você pode ver, há muitos campos aparecendo aqui, então vamos apenas filtrar alguns deles e manter apenas os que queremos no topo.

Criando o State Slicer

Vamos tentar uma forma alternativa para nossa segmentação de estado e começar com um gráfico de barras. Vamos para o LuckyTemplates e adicionar um novo visual Deneb, depois alterar um pouco o tamanho e o posicionamento do visual.

Adicionaremos o código States e adicionaremos a medida Size e, em seguida, usaremos uma especificação de gráfico de barras simples . Selecionaremos o código do estado para a categoria e o tamanho para a medida.

Temos outro gráfico de barras, que transformarei em um círculo. Então vou mudar o tamanho dos círculos para 2000.

A próxima coisa a fazer é desligar o eixo X e defini-lo como null . Em seguida, desative o título do eixo Y, os textos e o domínio.

Como com o outro slicer, vamos desligar a borda para que possamos definir o traçado do domínio como transparente na seção Config .

A próxima coisa a fazer é definir a fonte como vermelha, que adicionaremos ao eixo Y.

O próximo passo é adicionar um título ao nosso slicer, que adicionaremos como um bloco aqui na parte superior.

Fazendo o cartão de métricas no Vega-Lite

Parece estar na moda hoje em dia usar tubos verticais como separadores entre itens de texto. Eu queria ver se eu poderia fazer isso em Deneb Vega-Lite. Descobri que, se criasse três marcas de texto para cada medida, poderia definir o separador de nome e o valor como desejasse.

Vamos adicionar um novo visual Deneb e adicionar nossas quatro medidas de contagem: Concentration , Stocks , Sites e Years .

Em seguida, editaremos o visual e escolheremos uma especificação vazia. Analisaremos nossos trechos de blocos de texto e copiaremos a camada de três elementos visuais e os colaremos no editor visual. Atualmente, temos uma camada de três marcas de texto: a categoria , o separador e o valor .

Definimos o alinhamento do separador ao centro e o alinhamento dos dados à esquerda. Antes de copiar e colar, faremos ajustes nos três compassos restantes e usaremos alguns parâmetros para facilitar a configuração das cores.

Vamos adicionar um bloco de parâmetros para as cores. Vamos copiar o bloco de texto de nosso arquivo de trechos e colá-lo em nosso código aqui. Agora temos nossos parâmetros disponíveis.

A próxima etapa é atualizar nossas marcas de texto para usar esses parâmetros. Temos três blocos separados que podemos adicionar: o bloco de categoria, o bloco separador e o bloco de dados.

Em seguida, definiremos o título do cartão. Vamos copiar o bloco de título do arquivo de snippets e colocá-lo no topo do nosso código. Agora temos nosso título para nosso cartão de métricas.

Também usaremos outro recurso incorporado ao Vega-Lite, ou seja, o widget associado. Colocaremos dois: um para o tamanho da fonte e outro para o espaço vertical . Primeiro, adicionaremos um parâmetro para o tamanho da fonte em nosso visual.

Em seguida, adicionaremos parâmetros para a lacuna vertical e a posição Y vertical. Também editaremos as marcas de texto para usar esses parâmetros. Em vez de Y em um valor fixo, vou definir um valor específico para nosso parâmetro Y1. Como você pode ver, podemos alterar a lacuna à medida que ela se move.

Vamos adicionar outro lado das marcas de texto. Vou copiar a categoria, o separador e o código de dados e colá-los no editor. Em seguida, alterarei isso para Dados 2, Separador 2 e Categoria 2. Também alteraremos nosso valor Y de Y1 para Y2. Por fim, vamos alterar a medida mostrada aqui de Count of Toxins para Count of Sites .

Criando o Visual Principal Usando o Vega-Lite

Como agora temos todos os visuais de configuração, podemos passar para o visual principal do relatório, ou seja, o gráfico de colunas facetadas de concentração por estado e ano .

Para criar o visual principal deste relatório, vamos modificar um gráfico de barras simples. Para este, criei algumas fatias rápidas que nos ajudarão em nosso esforço de desenvolvimento. Vamos copiar essas segmentações e colá-las em uma página em branco.

Então vamos adicionar um visual Deneb e torná-lo maior para preencher uma boa parte da página.

Também adicionaremos nossa medida de Concentração, Estado, Toxina e Ano.

Vamos começar usando uma especificação de gráfico de barras simples. Para categoria escolheremos Year , e para medida escolheremos Concentration .

Podemos ver um gráfico de barras exibido, mas queremos transformá-lo em um gráfico de colunas. Vamos inverter os eixos X e Y para transformá-lo em um gráfico de colunas.

Em seguida, defina o eixo do rótulo como 0 e desative os textos. Como sempre, copiaremos o bloco de nosso arquivo de trechos para ajustar o ângulo do rótulo do eixo X.

Também ajustaremos a dica de ferramenta pegando esse bloco de código do arquivo de snippets e colando-o no código.

Como podemos ver, há muito espaço em branco extra e uma palavra muito longa para Concentração em nossa dica de ferramenta. Vamos adicionar um título específico usando um C em vez de Concentração.

Também queremos adicionar um parâmetro para a cor da fonte.

A última coisa a fazer para este visual é adicionar um título. Vamos copiar o bloco do título e colá-lo no código.

Queremos tornar este gráfico de barras específico para cada estado. É muito fácil fazer isso no Vega-Lite; vamos apenas adicionar uma faceta em State. Vamos copiar o bloco de texto e colá-lo aqui.

Agora podemos ver gráficos diferentes para cada estado aqui.

Vamos fazer mais uma coisa e ajustar o tamanho do gráfico. Vamos pegar outro pequeno bloco de texto e colá-lo no código.

Quando voltamos ao relatório, podemos ver que ele responde a quaisquer estados que escolhermos.

Isso é tudo para a fase de preparação. A partir daqui, é uma simples questão de copiar e colar nossos visuais de desenvolvimento em uma página comum e definir as cores.

Vamos para o LuckyTemplates e pegar nossas caixas de texto para o título e para as informações do relatório e colá-las na página principal. Faremos o mesmo para os anos, estados e cortadores de toxinas.

Uma das coisas que podemos fazer agora é ajustar um pouco nossas cores. Nesse caso, escolhi a cor do ano da Pantone para 2022, que é o roxo.

Vamos selecionar o plano de fundo da tela para ser nossa cor mais escura e nossa paleta de cores.

Em seguida, vamos pegar nosso cartão de métricas e colá-lo em nossa página principal. Escolheremos uma cor de fundo e ajustaremos o tamanho.

Em seguida, pegue nosso gráfico de colunas em jejum, cole-o em nossa página principal e redimensione-o. Tudo está em uma página agora. É só uma questão de passar pelo visual e mudar nossos vermelhos para brancos para finalizar nosso trabalho.

Passaremos por cada visual para mudar de vermelho para branco.

Crie um visual personalizado para o LuckyTemplates usando
temas personalizados do Deneb no LuckyTemplates
Visuais personalizados do LuckyTemplates – Crie um aplicativo de relatórios

Conclusão

Minha conclusão deste tutorial é que você pode fazer praticamente o que quiser no Vega-Lite. Mas, como qualquer outra ferramenta, tem seus pontos fortes e fracos. Quando visualizado do ponto de vista da área de trabalho do LuckyTemplates, surgem alguns insights.

As caixas de texto são trabalhosas no Deneb Vega-Lite, então continuarei a usar as caixas de texto dinâmicas no LuckyTemplates desktop neste momento, a menos que haja um motivo convincente para fazê-las no Vega-Lite.

Os Slicers são específicos em vez de em cascata no Deneb Vega-Lite, então continuarei a usar os visuais do LuckyTemplates para fatiar por enquanto. Mas eu suspeito muito que existem configurações que ainda não encontrei ou que o visual personalizado do Deneb será aprimorado com recursos estendidos em um futuro próximo.

Os cartões exigem maior esforço de desenvolvimento no Vega-Lite em comparação com os cartões padrão disponíveis no LuckyTemplates desktop, mas o Deneb Vega-Lite fornece personalizações aprimoradas que não estão disponíveis nos cartões padrão do LuckyTemplates desktop.

Os visuais são onde o Deneb Vega-Lite realmente brilha. A flexibilidade é excelente e a personalização é praticamente ilimitada. Também é possível aproveitar os exemplos do trabalho de outras pessoas na implementação do Vega-Lite em outros ambientes, pois o código JSON é padrão e pode ser facilmente personalizado para se adequar à implementação do LuckyTemplates.

Uma desvantagem do Vega-Lite é que ele tem uma curva de aprendizado, mas o lado positivo é que a sintaxe JSON é legível e fácil de entender. Uma técnica desenvolvida para um visual geralmente pode ser copiada como um bloco de texto JSON e colada como está em outro visual. Com esta ferramenta, vejo um futuro muito brilhante, não apenas para o visual personalizado do Deneb, mas para a comunidade do LuckyTemplates.

grego