HTML în Dash

Crearea dashboardurilor cu Dash și Plotly

Alex Scriven

Data Scientist

Recapitulare HTML

 

  • HTML = limbaj pentru structurarea conținutului web
    • Folosește „etichete" precum Div, H1>H6
  • Dash utilizează componente dash.html
    • Eticheta H1 este .H1()
    • Eticheta Div este .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>
Crearea dashboardurilor cu Dash și Plotly

Etichete de structurare

 

  • Lista etichetelor HTML disponibile - documentație
  • Etichete importante de structurare:
    • .Br() = Întrerupere de linie
    • .Img() = Inserați o imagine
Crearea dashboardurilor cu Dash și Plotly

Liste în HTML Dash

 

  • .Ul() \ .Ol() & .Li() = Creare liste
    • .Ul() pentru listă neordonată (cu puncte, ca aceasta!)
    • .Ol() pentru listă ordonată (numerotată)
    • .Li() pentru fiecare element al listei
Crearea dashboardurilor cu Dash și Plotly

Inserarea unui logo de companie

 

app.layout = [

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

]

 

Captură de ecran din colțul stânga sus al unui browser Chrome, unde adresa serverului este vizibilă în bara URL. Browserul afișează un logo al companiei — un diamant roz cu textul „E-com global". Dedesubt se află un titlu cu textul „Our Sales Dashboard"

Crearea dashboardurilor cu Dash și Plotly

Etichete de text

 

Setați și formatați conținutul text

  • .P() sau .Span() = Inserați text simplu
    • Acceptă un argument children (listă de text, .P() sau .Span())
  • .B() = Text îngroșat
  • .I() = Text italic
Crearea dashboardurilor cu Dash și Plotly

Etichete de text HTML în Dash

 

Formatare complexă:

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

   html.Span(children=[

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

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

   html.I("Data Scientist")

   ])

]

 

Captură de ecran din colțul stânga sus al unui browser Chrome, unde adresa serverului este vizibilă în bara URL. Există un titlu mare „Our Sales Dashboard", iar dedesubt o linie cu textul „Prepared: 2021-06-27 by Jessie Parker, Data Scientist" — Jessie Parker este îngroșat, iar Data Scientist este italic

Crearea dashboardurilor cu Dash și Plotly

Întreruperea textului

$$

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

 

Captură de ecran a aceluiași dashboard ca în slide-ul anterior. Titlul „Our Sales Dashboard" este vizibil, iar dedesubt textul „Prepared: 2021-06-27 by Jessie Parker, Data Scientist" — Jessie Parker este îngroșat, Data Scientist este italic. Față de slide-ul anterior, există acum întreruperi de linie după dată și după nume.

Crearea dashboardurilor cu Dash și Plotly

Să exersăm!

Crearea dashboardurilor cu Dash și Plotly

Preparing Video For Download...