HTML no Dash

Construindo Dashboards com Dash e Plotly

Alex Scriven

Data Scientist

Revisando HTML

HTML = linguagem para estruturar conteúdo da web
- Usa "tags" como Div, H1>H6
O Dash usa componentes dash.html
- A tag H1 é .H1()
- A tag Div é .Div()

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

Tags de estrutura

Lista de tags HTML disponíveis - documentação
Tags de estrutura importantes:
- .Br() = Quebra de linha
- .Img() = Inserir imagem

Listas no Dash com HTML

.Ul() \ .Ol() & .Li() = Criar listas
- .Ul() para lista não ordenada (marcadores, como estas!)
- .Ol() para lista ordenada (numerada)
- .Li() para cada item da lista

Inserindo o logo da empresa

app.layout = [

  html.Img(src='www.website.com/logo.png'),
  html.H1("Our Sales Dashboard")

]

Uma captura do canto superior esquerdo do navegador Chrome, com o endereço do servidor na URL. O navegador exibe a imagem do logo da empresa, um losango rosa com o texto E-com global. Abaixo há um título "Our Sales Dashboard"

Tags de texto

Definir e formatar texto

.P() ou .Span() = Inserir texto simples
- Aceitam o argumento children (lista de texto, .P() ou .Span())
.B() = Negrito em parte do texto
.I() = Itálico em parte do texto

Tags de texto HTML no Dash

Formatação mais complexa:

app.layout = [
   html.H1("Our Sales Dashboard"),

   html.Span(children=[

   f"Prepared: {datetime.now().date()}",

   " by ", html.B("Jessie Parker, "),

   html.I("Data Scientist")

   ])

]

Uma captura do canto superior esquerdo de uma janela do Chrome com o endereço do servidor na barra de URL. Há um título grande "our sales dashboard"; abaixo, a linha "Prepared: 2021-06-27 by Jessie Parker, data scientist". "Jessie Parker" está em negrito e "data scientist" em itálico

Quebrando o texto

app.layout = [
   html.H1("Our Sales Dashboard"),
   html.Span(children=[
   f"Prepared: {datetime.now().date()}", 
   html.Br(),
   " by ", html.B("Jessie Parker, "),
   html.Br(),
   html.I("Data Scientist")])
    ]

Uma captura do mesmo dashboard do slide anterior. No canto superior esquerdo do Chrome, o endereço do servidor aparece na URL. Há um título grande "our sales dashboard"; abaixo, a linha "Prepared: 2021-06-27 by Jessie Parker, data scientist". "Jessie Parker" está em negrito e "data scientist" em itálico. Agora há quebras de linha após a data e o nome.

Vamos praticar!

Construindo Dashboards com Dash e Plotly