HTML v Dash

Tvorba dashboardů s Dash a Plotly

Alex Scriven

Data Scientist

HTML – opakování

 

  • HTML = jazyk pro strukturování webového obsahu
    • Používá „tagy" jako Div, H1–H6
  • Dash používá komponenty dash.html
    • Tag H1 je .H1()
    • Tag Div je .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>
Tvorba dashboardů s Dash a Plotly

Strukturovací tagy

 

  • Seznam dostupných HTML tagů – dokumentace
  • Důležité strukturovací tagy:
    • .Br() = Zalomení řádku
    • .Img() = Vložení obrázku
Tvorba dashboardů s Dash a Plotly

Seznamy v HTML Dash

 

  • .Ul() \ .Ol() & .Li() = Vytvoření seznamů
    • .Ul() pro neuspořádaný seznam (odrážky, jako tento!)
    • .Ol() pro uspořádaný seznam (číslovaný)
    • .Li() pro každý prvek seznamu
Tvorba dashboardů s Dash a Plotly

Vložení loga společnosti

 

app.layout = [

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

]

 

Snímek obrazovky levého horního rohu prohlížeče Chrome s adresou serveru v adresním řádku. V prohlížeči je logo společnosti – růžový diamant s nápisem E-com global. Pod ním je nadpis „Our Sales Dashboard"

Tvorba dashboardů s Dash a Plotly

Textové tagy

 

Nastavení a formátování textu

  • .P() nebo .Span() = Vložení prostého textu
    • Přijímají argument children (seznam textu, .P() nebo .Span())
  • .B() = Tučný text
  • .I() = Kurzíva
Tvorba dashboardů s Dash a Plotly

HTML textové tagy v Dash

 

Příklad komplexního formátování:

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

   html.Span(children=[

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

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

   html.I("Data Scientist")

   ])

]

 

Snímek obrazovky levého horního rohu okna Chrome, kde je v adresním řádku viditelná adresa serveru. Velký nadpis říká „Our Sales Dashboard", pod ním je řádek s textem „Prepared: 2021-06-27 by Jessie Parker, data scientist" – Jessie Parker je tučně a data scientist kurzívou

Tvorba dashboardů s Dash a Plotly

Zalomení textu

$$

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

 

Snímek obrazovky stejného dashboardu jako na předchozím snímku. Levý horní roh okna Chrome s adresou serveru v adresním řádku. Velký nadpis říká „Our Sales Dashboard"; pod ním je řádek „Prepared: 2021-06-27 by Jessie Parker, data scientist" – Jessie Parker je tučně a data scientist kurzívou. Nově jsou za datem a jménem zalomení řádků.

Tvorba dashboardů s Dash a Plotly

Lass uns üben!

Tvorba dashboardů s Dash a Plotly

Preparing Video For Download...