HTML w Dash

Tworzenie dashboardów z Dash i Plotly

Alex Scriven

Data Scientist

Przypomnienie HTML

HTML = język do strukturyzowania treści stron
- Używa tagów, np. Div, H1–H6
Dash korzysta z komponentów dash.html
- Tag H1 to .H1()
- Tag Div to .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>

Tagi strukturyzujące

Lista dostępnych tagów HTML – dokumentacja
Ważne tagi strukturyzujące:
- .Br() = nowy wiersz
- .Img() = wstawienie obrazu

Listy w HTML Dash

.Ul() \ .Ol() i .Li() = tworzenie list
- .Ul() – lista nieuporządkowana (punktory, tak jak tu!)
- .Ol() – lista numerowana
- .Li() – każdy element listy

Wstawianie logo firmy

app.layout = [

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

]

Zrzut ekranu lewego górnego rogu przeglądarki Chrome z adresem serwera w pasku URL. W przeglądarce widać logo firmy z różowym diamentem i napisem E-com global. Poniżej widnieje tytuł „Our Sales Dashboard"

Tagi tekstowe

Ustawianie i formatowanie tekstu

.P() lub .Span() = wstawienie zwykłego tekstu
- Przyjmują argument children (lista tekstu, .P() lub .Span())
.B() = tekst pogrubiony
.I() = tekst pochylony

Tagi tekstowe HTML w Dash

Bardziej złożone formatowanie:

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

   html.Span(children=[

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

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

   html.I("Data Scientist")

   ])

]

Zrzut ekranu lewego górnego rogu okna Chrome z adresem serwera w pasku URL. Widoczny jest duży tytuł „Our Sales Dashboard", a poniżej wiersz „Prepared: 2021-06-27 by Jessie Parker, Data Scientist" – „Jessie Parker," jest pogrubione, a „Data Scientist" pochylone

Łamanie tekstu

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

Zrzut ekranu tego samego dashboardu co na poprzednim slajdzie. Widać lewy górny róg okna Chrome z adresem serwera w pasku URL. Duży tytuł „Our Sales Dashboard", a poniżej wiersz „Prepared: 2021-06-27 by Jessie Parker, Data Scientist" – „Jessie Parker" jest pogrubione, „Data Scientist" pochylone. Po dacie i nazwisku pojawiły się teraz łamanie wierszy.

Czas na praktykę!

Tworzenie dashboardów z Dash i Plotly