Índice

• Parte 01 — Criando Dashboards com Plotly Dash
• Parte 02 — Primeiro Layout com Plotly Dash
• Parte 03 — Callback com Plotly Dash

Parte 02 — Primeiro Layout com Plotly Dash

Neste segundo post da série sobre Plotly Dash, iremos:

• Conhecer os componentes básicos do Dash e iniciar montagem de um layout básico;

Para começar nossos trabalhos, é importante entender um pouco do funcionamento do Plotly Dash e como iremos montar a nossa estrutura de páginas. Nesta série, desenvolveremos uma aplicação com mais de uma página, porém, para chegar lá, precisamos conseguir montar uma mais simples, single page, vamos lá?

Como podemos ver no próprio User Guide da ferramenta uma app Dash é composto de duas partes: a que exibe os itens na tela Layout e a que traz maior interação para a sua aplicação, permitindo a aplicação de filtros, navegação entre telas, menus, etc., os callbacks.

Para trabalhar com o Layout o Dash conta com classes em Python que nos ajudam com a sua montagem, são elas: dash_core_components e dash_html_components.

Para testar, vamos desenvolver a aplicação que encontra-se no próprio User Guide do Dash.

Dentro da pasta onde você subiu o ambiente virtual, crie uma pasta com o nome dashboard e dentro dela crie um arquivo com o nome app.py e insira o código abaixo:

Feito isto, salve o arquivo e rode o comando em seu terminal:

python app.py

Neste momento, será iniciada uma aplicação web, para visualizá-la, basta copiar o endereço que está à frente de Running on…em seu navegador e ver o seu primeiro layout.

Para entender o código acima, é importante conhecer pelo menos o básico de HTML, ok? Muito legal não é? Vamos fazer um overview do que está acontecendo ali?

Primeiro a gente está trazendo para o nosso app as bibliotecas que utilizaremos nesta etapa (semelhante àquela história do livro, biblioteca, etc do post anterior, lembra?). Depois, pra ficar bonitinho, importamos um arquivo CSS indicado pelo próprio Dash.

Para cuidar desta galera toda, um objeto Dash foi criado e partimos para brincar com o Layout. Dentro deste layout é que as coisas funcionam. Começamos os trabalhos com uma div (HTML, não manja o que é uma div? Da um pulo AQUI e depois volta com a gente) que vai receber toda a sua página. Dentro desta div temos um temos um elemento H1 (este você domina, correto? Se não, não tem problema, veja AQUI), outra div com um texto aleatório e aí utilizamos um carinha bem legal, nosso primeiro dash_core_component (dcc para os íntimos), com ele conseguimos trazer uma série de elementos interessantíssimos para nossos projetos como botões, cheeckbox, espaços para upload de arquivos, date pickers, etc. Da uma lida nesta página aqui e entenda um pouco sobre o que é possível.

Voltando para o dash_core_componenet do nosso exemplo vamos nos atentar nos elementos que ele traz. Em id teremos como o nosso componente poderá ser acionado por meio dos callbacks, aqui, vale um ponto de grande atenção, com um projeto grande, é importantíssimo manter um controle sobre cada nome utilizado em seus elementos (no momento adequado, faremos uma brincadeira com este item). Logo abaixo do id temos uma figure, que recebe um parâmetro data que contém os dados que iremos plotar e outra Layout que faz referência a elementos gerais do gráfico.

Dentro de data um item importante de avaliar é o parâmetro type, nele conseguimos escolher qual o tipo de gráfico iremos utilizar. Vamos brincar com isto?

Que tal experimentar alterar bar para line no primeiro grupo de dados?

E se adicionarmos uma nova linha de dados e mudar todos os types para line?

Mas, quais são os tipos de gráficos que eu posso colocar ali? De um pulo neste site e veja quais são as possibilidades.

Resumindo, neste segundo post entendemos um pouco sobre como funciona a estrutura de uma página do Plotly Dash, criamos um primeiro Layout e brincamos com os componentes dash_core_component e dash_html_component.

No próximo post, iremos um pouco além brincando com os callbacks e trazendo maior interatividade para nosso layout.

Obrigado e um abraço.