HTML i Dash

Bygg dashboards med Dash och Plotly

Alex Scriven

Data Scientist

HTML – en genomgång

 

  • HTML = språk för att strukturera webbinnehåll
    • Använder 'taggar' som Div, H1>H6
  • Dash använder dash.html-komponenter
    • H1-taggen är .H1()
    • Div-taggen är .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>
Bygg dashboards med Dash och Plotly

Strukturtaggar

 

  • Lista över tillgängliga HTML-taggar – dokumentation
  • Viktiga strukturtaggar:
    • .Br() = radbrytning
    • .Img() = infoga en bild
Bygg dashboards med Dash och Plotly

Listor i HTML Dash

 

  • .Ul() \ .Ol() & .Li() = skapa listor
    • .Ul() för osorterad lista (punktlista, som den här!)
    • .Ol() för sorterad lista (numrerad lista)
    • .Li() för varje listelement
Bygg dashboards med Dash och Plotly

Infoga en företagslogotyp

 

app.layout = [

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

]

 

En skärmdump av det övre vänstra hörnet i en Chrome-webbläsare där URL-fältet visar serveradressen. Webbläsaren visar en företagslogotyp – en rosa diamant med texten E-com Global. Under logotypen finns en rubrik med texten "Our Sales Dashboard"

Bygg dashboards med Dash och Plotly

Texttaggar

 

Ange och formatera textinnehåll

  • .P() eller .Span() = infoga vanlig text
    • Tar ett children-argument (lista med text, .P() eller .Span())
  • .B() = fet text
  • .I() = kursiv text
Bygg dashboards med Dash och Plotly

HTML-texttaggar i Dash

 

Avancerad formatering:

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

   html.Span(children=[

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

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

   html.I("Data Scientist")

   ])

]

 

En skärmdump av det övre vänstra hörnet i ett Chrome-fönster där serveradressen syns i URL-fältet. En stor rubrik visar "Our Sales Dashboard", och nedanför finns en rad med texten "Prepared: 2021-06-27 by Jessie Parker, Data Scientist" – där Jessie Parker är fet och Data Scientist är kursiv

Bygg dashboards med Dash och Plotly

Dela upp texten

$$

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

 

En skärmdump av samma dashboard som förra bilden. Det övre vänstra hörnet av ett Chrome-fönster visas med serveradressen i URL-fältet. En stor rubrik visar "Our Sales Dashboard"; nedanför finns texten "Prepared: 2021-06-27 by Jessie Parker, Data Scientist" – Jessie Parker är fet och Data Scientist är kursiv. Nu finns radbrytningar efter datumet och efter namnet.

Bygg dashboards med Dash och Plotly

Nu kör vi en övning!

Bygg dashboards med Dash och Plotly

Preparing Video For Download...