HTML in Dash

Dashboards bouwen met Dash en Plotly

Alex Scriven

Data Scientist

HTML herzien

HTML = taal om webinhoud te structureren
- Gebruikt ‘tags’ zoals Div, H1>H6
Dash gebruikt dash.html-componenten
- H1-tag is .H1()
- Div-tag is .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>

Structuur-tags

Lijst met beschikbare HTML-tags - documentatie
Belangrijke structuur-tags:
- .Br() = Nieuwe regel
- .Img() = Afbeelding invoegen

Lijsten in HTML Dash

.Ul() \ .Ol() & .Li() = Lijsten maken
- .Ul() voor ongenummerde lijst (bullets, zoals deze!)
- .Ol() voor genummerde lijst
- .Li() voor elk lijstitem

Bedrijfslogo invoegen

app.layout = [

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

]

Een screenshot van linksboven in een Chrome-browser met het serveradres in de URL. De browser toont een bedrijfslogo, een roze ruit met ‘E-com global’. Daaronder een titel: 'Our Sales Dashboard'

Teksttags

Tekst instellen en opmaken

.P() of .Span() = Platte tekst invoegen
- Accepteert een children-argument (lijst van tekst, .P() of .Span())
.B() = Vet tekst
.I() = Cursief tekst

HTML-teksttags in Dash

Wat complexere opmaak:

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

   html.Span(children=[

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

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

   html.I("Data Scientist")

   ])

]

Een screenshot van linksboven in een Chrome-venster met het serveradres in de URL-balk. Er staat een grote titel ‘our sales dashboard’, met daaronder: "Prepared: 2021-06-27 by Jessie Parker, data scientist". Jessie Parker staat in vet en data scientist cursief.

Tekst opsplitsen

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")])
    ]

Een screenshot van hetzelfde dashboard als op de vorige slide. Het is linksboven in een Chrome-venster met het serveradres in de URL-balk. Er staat een grote titel ‘our sales dashboard’; daaronder: "Prepared: 2021-06-27 by Jessie Parker, data scientist". Jessie Parker is vet, data scientist cursief. Er staan nu regeleinden na de datum en na de naam.

Laten we oefenen!

Dashboards bouwen met Dash en Plotly