Na aula de hoje eu quero te mostrar como construir dashboards em Python utilizando as bibliotecas dash e plotly!
Caso prefira esse conteúdo no formato de vídeo-aula, assista ao vídeo abaixo ou acesse o nosso canal do YouTube!
Para receber por e-mail o(s) arquivo(s) utilizados na aula, preencha:
Você sabia que é possível criar dashboards em Python? Hoje eu quero te mostrar como fazer isso utilizando a biblioteca dash e a biblioteca plotly.
Como vamos tratar da criação de dashboards nós vamos falar sobre criação de gráficos no Python, pois os dashboards precisam desses gráficos para facilitar a visualização dos dados.
Como a documentação dessas bibliotecas já utiliza algumas bases de dados já prontas, e nós queremos de mostrar tudo passo a passo, então não se esqueça de baixar os arquivos para poder acompanhar a aula!
OBS: Aqui no blog nós já temos um conteúdo falando sobre a biblioteca plotly que é uma biblioteca para criação de gráficos.
O dash seria uma extensão do plotly, então você vai conseguir criar gráficos que conseguem interagir com outras coisas, tipo botão, caixa de seleção, lista de valores…
Ele cria o gráfico dentro de uma base do flask, ou seja, você vai conseguir pegar qualquer gráfico criado através do dash e colocar em um site
OBS: Se você ainda não sabe o que é flask ou queira saber um pouco mais sobre a criação de sites com flask nós temos um post aqui no blog falando só sobre esse assunto. Basta clicar aqui para acessar essa página.
Para o nosso projeto vamos precisar da biblioteca dash e da biblioteca pandas (que é uma biblioteca para análise de dados).
Outra biblioteca que vamos ter que instalar é a biblioteca openpyxl, pois o pandas utiliza ela para ler dados em Excel.
OBS: Para esse exemplo nós vamos utilizar o editor de Python PyCharm, então se você ainda não tem ou quer acompanhar utilizando o mesmo editor basta clicar aqui que temos um passo a passo de instalação.
Vamos ter basicamente duas partes na construção do dashboard com o Dash. A primeira delas é o layout que é toda a parte visual e a segunda é o callback que seria a funcionalidade que vai dar para o gráfico.
Para dar início a construção do nosso layout nós já vamos pegar o código pronto que tem no próprio site do dash, então você pode copiar e depois nós vamos fazer as nossas alterações.
# Run this app with `python app.py` and
# visit http://127.0.0.1:8050/ in your web browser.
from dash import Dash, html, dcc
import plotly.express as px
import pandas as pd
app = Dash(__name__)
# assume you have a "long-form" data frame
# see https://plotly.com/python/px-arguments/ for more options
df = pd.DataFrame({
"Fruit": ["Apples", "Oranges", "Bananas", "Apples", "Oranges", "Bananas"],
"Amount": [4, 1, 2, 2, 4, 5],
"City": ["SF", "SF", "SF", "Montreal", "Montreal", "Montreal"]
})
fig = px.bar(df, x="Fruit", y="Amount", color="City", barmode="group")
app.layout = html.Div(children=[
html.H1(children='Hello Dash'),
html.Div(children='''
Dash: A web application framework for your data.
'''),
dcc.Graph(
id='example-graph',
figure=fig
)
])
if __name__ == '__main__':
app.run_server(debug=True)Ao rodar o código padrão você vai verificar se tudo está rodando normalmente, se não estiver pode não ter instalado as bibliotecas ou pode estar com algum problema de configuração no seu Python.
Após rodar o código você vai receber uma mensagem de que o dash está rodando no site x, então basta clicar nele ou copiar e colar no seu navegador que você já vai se deparar com esse resultado.
Então temos basicamente um site com esse dashboard que foi utilizando o exemplo da própria documentação do dash.
Para o layout nós temos 2 tipos de itens para o nosso dashboard. Vamos ter os itens em HTML e os itens em DCC (dashboard core components).
Geralmente tudo o que for relacionado ao gráfico nós vamos utilizar o dcc e o que não estiver relacionado ao gráfico nós vamos utilizar o html.
Na parte app.layout = html.Div(children=[ você vai notar que aqui vamos começar uma “árvore”, então temos um grande bloco onde vamos colocar os outros blocos dentro para criar o nosso dashboard.
Você vai notar que temos 3 blocos de códigos, 1 é para o título, o outro para o texto logo abaixo do título e o último para o gráfico.
Então agora que você já tem uma noção dessa construção nós podemos alterar essas informações para poder criar o nosso dashboard.
Esses ajustes são para inserir as nossas informações e os nossos dados. Então lembre-se de que você vai poder alterar essas informações para ajustar o seu dashboard.
Pode alterar os títulos, textos e o próprio gráfico para criar o seu dashboard personalizado.
Nós agora vamos inserir os elementos do dcc (dash core components). Lembrando de que você pode pegar todas essas informações dentro da documentação.
Nós vamos inserir um botão de Dropdown, que é uma lista. Então vamos utilizar essa lista para que possamos selecionar as lojas.
from dash import Dash, html, dcc, Input, Output
import plotly.express as px
import pandas as pd
app = Dash(__name__)
# assume you have a "long-form" data frame
# see https://plotly.com/python/px-arguments/ for more options
df = pd.read_excel("Vendas.xlsx")
# criando o gráfico
fig = px.bar(df, x="Produto", y="Quantidade", color="ID Loja", barmode="group")
opcoes = list(df['ID Loja'].unique())
opcoes.append("Todas as Lojas")
app.layout = html.Div(children=[
html.H1(children='Faturamento das Lojas'),
html.H2(children='Gráfico com o Faturamento de Todos os Produtos separados por Loja'),
html.Div(children='''
Obs: Esse gráfico mostra a quantidade de produtos vendidos, não o faturamento.
'''),
dcc.Dropdown(opcoes, value='Todas as Lojas', id='lista_lojas'),
dcc.Graph(
id='grafico_quantidade_vendas',
figure=fig
)
])
@app.callback(
Output('grafico_quantidade_vendas', 'figure'),
Input('lista_lojas', 'value')
)
def update_output(value):
if value == "Todas as Lojas":
fig = px.bar(df, x="Produto", y="Quantidade", color="ID Loja", barmode="group")
else:
tabela_filtrada = df.loc[df['ID Loja']==value, :]
fig = px.bar(tabela_filtrada, x="Produto", y="Quantidade", color="ID Loja", barmode="group")
return fig
if __name__ == '__main__':
app.run_server(debug=True)E depois nós vamos dar uma funcionalidade para essa lista, por isso do callback, que comentei anteriormente. Que é uma funcionalidade dentro do nosso dashboard.
Esse é o nosso código completo já com o dropdown com as opções das lojas e uma opção padrão de todas as lojas.
Outra coisa é o callback que vamos colocá-lo antes do if __name__ == ‘__main__’:. E claro, além de definir o output (saída) e o input (entrada).
Nós temos que definir como esses valores serão alterados dentro do nosso dashboard, então vamos utilizar a função IF para verificar se estamos com “Todas as Lojas” para deixar a visualização total.
E caso selecione qualquer outra opção vamos ajustar o gráfico para essa informação selecionada!
Aqui temos o dashboard final com a nossa caixa de listagem para que o usuário possa selecionar qual loja quer analisar.
Aqui temos o gráfico já filtrado com a informação selecionada, então você de fato tem um dashboard que permite com que o usuário faça a interação com os dados.
Então você pode utilizar o dropdown, slider, tab, tooltip entre outros diversos callbacks para compor o seu dashboard.
Agora é praticar e ler a documentação para inserir novos elementos para que você consiga criar o seu próprio dashboard em Python!
Nessa aula eu te mostrei como criar um dashboard em Python utilizando o dash e o plotly.
Você agora vai poder criar os seus próprios dashboards em Python e ainda vai poder colocá-los no seu site se precisar para deixar disponível para os usuários!
Para acessar outras publicações de Python, clique aqui!
Quer aprender mais sobre Python com um minicurso gratuito?
Expert em conteúdos da Hashtag Treinamentos. Auxilia na criação de conteúdos de variados temas voltados para aqueles que acompanham nossos canais.
Quer sair do zero em Python e virar uma referência na sua empresa? Matricule-se agora mesmo no Python Impressionador!