Parte 03 — Callbacks no Plotly Dash
Índice
Olá! Dando seguimento à série de posts sobre a criação de dashboards com o Plotly Dash, vamos entender um pouco mais sobre o uso de Callbacks e para isto já começaremos a manipular os dados que serão utilizados no decorrer do projeto.
Por hora, não vamos nos ater muito à estrutura do Dataset, nos próximos posts entraremos um pouco mais a fundo.
Para iniciar baixe o arquivo chamado ‘Salários dos Magistrados’ que se encontra neste site (https://brasil.io/dataset/salarios-magistrados/contracheque). O site brasil.io tem uma missão muito bacana de “tornar acessíveis os dados brasileiros de interesse público e temos como valores principais a transparência e colaboração”. O projeto encontra-se em fase beta,, sendo free somente para este período.
Estrutura de pastas
Com o arquivo em mãos, crie um projeto com a seguinte estrutura:
- Post03
- app.py
- Datasets -> [nome_arquivo].csv
Com a estrutura pronta, vamos codificar nosso ‘app.py’ e utilizar o conceito de ‘callbacks’
O que são callbacks
Nas aplicações Dash, as entradas e saídas são realizadas por meio das propriedades dos componentes, ou seja, você pode coletar o que foi digitado em um campo de texto (propriedade ‘value’ do componente dcc.Input por exemplo) e exibir em uma html.Div, ou utilizar para filtrar dados que precisam ser exibidos, por exemplo. Para coletar estas entradas e saídas (Input/Output) o Dash traz o decorator @app.callbacks() que devem ser inseridos antes de uma função, conforme exemplo abaixo:
Vamos entender o código que está acima:
- Em app.callback temos dois parâmetros, o Output e o Input:
- No Output, temos como primeiro parâmetro o id do componente que será utilizado para exibição do resultado, e no segundo a propriedade deste componente que será modificada pelo Input;
- Para o Input, segue-se a mesma lógica apresentada acima.
- Importante ressaltar que podemos ter uma lista de Outputs e uma lista de Inputs, ou seja, vários Inputs podem modificar um Output ou vários Outputs podem ser modificados por um Input. Conforme documentação do Dash, não é recomendado ter um Input modificando vários Outputs.
- A função recebe o valor de Input e exibe o que foi selecionado na tela, porém, pode também realizar operações bem mais complexas.
Resumindo, por meio dos callbacks, conseguimos trazer interatividade para nossas páginas, permitindo filtrar dados, atualizar páginas dinamicamente, etc.
Tendo isto em mente, vamos colocar a mão na massa.
Primeira aplicação com Callbacks
Para esta aplicação, a ideia geral será bem simples. Vamos mostrar quanto cada tribunal gastou com salários de magistrados ao longo dos anos. O usuário da nossa aplicação poderá selecionar o tribunal por meio de um menu Dropdown, com este Input, faremos um filtro em nosso dataset e exibiremos um gráfico de linha com os valores ao longo dos anos. Simples não? Vamos colocar a mão na massa?
Primeiramente, vamos importar as bibliotecas necessárias para este exemplo:
Com as bibliotecas, é hora de importar nosso dataset com o Pandas e instanciar a nossa aplicação Dash.
Ótimo, neste ponto já temos um Dataframe para chamar de nosso e a aplicação instanciada. Neste ponto, darei um pulo na ordem do código para melhorar o entendimento do que será feito.
Vamos agora criar o layout da nossa aplicação, que será bem simples:
- Um componente dropdown que receberá a lista de todos os tribunais cadastrados no Dataframe;
- Um componente HTML div;
- Dentro da div teremos outro componente Graph que será criado dinamicamente dentro do callback;
Aqui vale uma pausa para falar sobre o componente Graph. Ele consegue trabalhar com os mais diversos modelos de gráficos da biblioteca Plotly. Acessa a documentação dele, sobe um Jupyter Notebook e divirta-se com as possibilidades (https://plot.ly/python/). :-).
Para este tutorial eu utilizei o Plotly Express (https://plot.ly/python/plotly-express/), uma versão mais enxuta e super bacana para criar gráficos de maneira mais simples.
Voltando, nosso código seguirá a estrutura abaixo:
Reparem que no menu dropdown, geramos a listagem fazendo um for na lista tribunal, agora, vamos entender de onde esta lista surgiu (lembra que daríamos um pulo na ordem?). Antes da criação do layout, precisamos pegar a listagem de todos os tribunais que existem no dataframe para a exibição no dropdown e para fazer isto utilizamos o seguinte código:
Resumindo:
- A função unique() retorna uma lista com todas as categorias constantes em uma coluna.
Feito isto, se rodarmos a nossa aplicação, veremos algo semelhante à imagem abaixo.
Neste ponto, você já deverá ser capaz de ver a listagem de tribunais no menu dropdown, porém nada irá acontecer no gráfico. Vamos ao callback?
Nesta etapa, coloco o código comentado aqui, insira este último trecho em seu código e faça o teste, se tudo correu bem, você já deve estar gerando os gráficos com os gastos totais por período nos tribunais selecionados.
ALERTA, não se assuste com os valores. :-)
Espero que tenham gostado deste tutorial. Na próxima etapa, iremos trabalhar na criação de uma estrutura multipage com o Dash.
Um abraço e até lá.
