Posicionando componentes do Dash

Construindo Dashboards com Dash e Plotly

Alex Scriven

Data Scientist

HTML e a web

HTML: linguagem para estruturar sites

HTML: estrutura de madeira de uma casa
- Define a posição dos objetos
CSS: a cor da pintura do cômodo
- Estilo (ex.: cor de fundo) dos objetos

o logotipo oficial do html. diz HTML em letras azuis

o logotipo oficial do css. diz css em relevo azul

Tags Div e H

Dash usa dash.html para fazer a ponte entre HTML e Python

Duas estruturas importantes de HTML ('tags'):

Tags div: essenciais para estruturar sites
- Podem ter várias divs de tamanhos diferentes com conteúdos variados
Tags h: títulos de tamanhos diferentes (H1 > H6)

Usando tags Div e H

Div geral (tudo dentro)
Div interna: fundo vermelho
Div com fundo azul
- Tags h dentro
Ignore a parte style — falaremos de CSS depois!

<div>
  <div style="background-color: red; 
              width:250; height:250;">
  </div>
  <div style="background-color: lightblue; 
              width:250; height:250;">
    <h1>This box</h1>
    <h2>Another Title</h2>
  </div>
</div>

Nosso exemplo exibido

Uma imagem de uma caixa azul com borda pontilhada. Dentro, ocupando parte do canto superior esquerdo, há uma caixa vermelha preenchida. Abaixo, uma caixa azul preenchida com as palavras 'This box' e 'another title' dentro

Observe:

Div com fundo vermelho
Div com fundo azul e tags H

Nosso exemplo no Dash

Recriando o exemplo de HTML com Dash

from dash import Dash, html
app = Dash()
app.layout = [
    html.Div(style={'height':250, 'width':250, 'background-color':'red'}),
    html.Div(children=[
        html.H1("This box"),
        html.H2("Another Title")], 
        style={'background-color':'lightblue'})
    ]

Detalhando o layout

Tags HTML mapeiam para html.() do Dash
- html.Div() = <div>
- html.H1() = <h1>
A última div tem o argumento children
- Uma lista de objetos que vão dentro
Também dá para colocar componentes dcc.Graph()!

from dash import Dash, html
app.layout = [
  html.Div(
    style={'background-color':'red', 
           'height':250, 'width':250}),
  html.Div(
  children=[
      html.H1("This box"),
      html.H2("Another Title")]
    ,style={'background-color':'lightblue', 
              'height':250, 'width':250})
]

Gráficos no layout

bar_fig_country = px.bar(ecom_sales, 
 x='Total Sales ($)', y='Country',
 color='Country', color_discrete_map=
 {'United Kingdom':'lightblue', 
 'Germany':'orange', 'France':'darkblue', 
 'Australia':'green', 'Hong Kong':'red'})
app = Dash()

app.layout = [
  html.H1("Sales Proportion by Country"),
  dcc.Graph(id='bar_graph', 
            figure=bar_fig_country)
]

Um gif de um gráfico de barras horizontal de vendas totais no eixo x por país no eixo y em um navegador Chrome. Os países têm cores diferentes. O mouse passa sobre o gráfico e depois na barra de URL com o endereço do servidor

Adicionando mais estrutura

app.layout = [
  html.Div(style={
    'width':150,'height':150, 
    'background-color':'lightblue'}),
  html.H1("Sales Proportion by Country"),
  dcc.Graph(id='bar_graph', 
            figure=bar_fig_country)
]

Um gif do mesmo app do exercício anterior; porém, o gráfico de barras foi empurrado para baixo da página e há uma pequena caixa azul-clara acima

Vamos praticar!

Construindo Dashboards com Dash e Plotly