HTML in Dash

Dashboards mit Dash und Plotly erstellen

Alex Scriven

Data Scientist

HTML aufgefrischt

HTML = Sprache zum Strukturieren von Webinhalten
- Verwendet „Tags" wie Div, H1>H6
Dash nutzt dash.html-Komponenten
- H1-Tag ist .H1()
- Div-Tag ist .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>

Struktur-Tags

Liste verfügbarer HTML-Tags – Dokumentation
Wichtige Struktur-Tags:
- .Br() = Zeilenumbruch
- .Img() = Bild einfügen

Listen in HTML Dash

.Ul() \ .Ol() & .Li() = Listen erstellen
- .Ul() für ungeordnete Liste (Bullets, wie hier)
- .Ol() für geordnete Liste (nummeriert)
- .Li() für jedes Listenelement

Firmenlogo einfügen

app.layout = [

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

]

Ein Screenshot oben links in Chrome mit Server-Adresse in der URL. Der Browser zeigt ein Firmenlogo, ein Ping-Diamant mit „E-com global". Darunter ein Titel: „Our Sales Dashboard".

Text-Tags

Text setzen und formatieren

.P() oder .Span() = Fließtext einfügen
- Akzeptieren ein children-Argument (Liste aus Text, .P() oder .Span())
.B() = Text fett
.I() = Text kursiv

HTML-Text-Tags in Dash

Etwas komplexere Formatierung:

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

   html.Span(children=[

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

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

   html.I("Data Scientist")

   ])

]

Ein Screenshot oben links in einem Chrome-Fenster mit sichtbarer Server-Adresse. Groß der Titel „our sales dashboard"; darunter die Zeile „Prepared: 2021-06-27 by Jessie Parker, data scientist". „Jessie Parker" ist fett, „data scientist" kursiv.

Text aufteilen

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

Screenshot desselben Dashboards wie auf der letzten Folie. Oben links in Chrome ist die Server-Adresse in der URL-Leiste. Großer Titel „our sales dashboard"; darunter „Prepared: 2021-06-27 by Jessie Parker, data scientist". „Jessie Parker" ist fett, „data scientist" kursiv. Nach Datum und Name gibt es nun Zeilenumbrüche.

Lass uns üben!

Dashboards mit Dash und Plotly erstellen