HTML di Dash

Membangun Dasbor dengan Dash dan Plotly

Alex Scriven

Data Scientist

Sekilas HTML

 

  • HTML = bahasa untuk menyusun konten web
    • Menggunakan 'tag' seperti Div, H1>H6
  • Dash menggunakan komponen dash.html
    • Tag H1 adalah .H1()
    • Tag Div adalah .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>
Membangun Dasbor dengan Dash dan Plotly

Tag struktur

 

  • Daftar tag HTML yang tersedia - dokumentasi
  • Tag struktur penting:
    • .Br() = Baris baru
    • .Img() = Sisipkan gambar
Membangun Dasbor dengan Dash dan Plotly

Daftar di HTML Dash

 

  • .Ul() \ .Ol() & .Li() = Membuat daftar
    • .Ul() untuk daftar tak berurutan (bullet seperti ini)
    • .Ol() untuk daftar berurutan (bernombor)
    • .Li() untuk tiap elemen daftar
Membangun Dasbor dengan Dash dan Plotly

Menyisipkan logo perusahaan

 

app.layout = [

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

]

 

Tangkapan layar kiri atas browser Chrome dengan alamat server di bilah URL. Browser menampilkan logo perusahaan, sebuah belah ketupat merah muda bertuliskan E-com global. Di bawahnya ada judul 'Our Sales Dashboard'

Membangun Dasbor dengan Dash dan Plotly

Tag teks

 

Atur dan format konten teks

  • .P() atau .Span() = Sisipkan teks biasa
    • Menerima argumen children (daftar teks, .P() atau .Span())
  • .B() = Tebalkan teks
  • .I() = Miringkan teks
Membangun Dasbor dengan Dash dan Plotly

Tag teks HTML di Dash

 

Format yang lebih kompleks:

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

   html.Span(children=[

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

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

   html.I("Data Scientist")

   ])

]

 

Tangkapan layar kiri atas jendela Chrome dengan alamat server di bilah URL. Ada judul besar 'our sales dashboard'. Di bawahnya tertulis "Prepared: 2021-06-27 by Jessie Parker, data scientist". Nama Jessie Parker dicetak tebal dan data scientist dimiringkan

Membangun Dasbor dengan Dash dan Plotly

Memecah teks

$$

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

 

Tangkapan layar dasbor yang sama seperti slide sebelumnya. Kiri atas jendela Chrome dengan alamat server di bilah URL. Ada judul besar 'our sales dashboard'; di bawahnya tertulis "Prepared: 2021-06-27 by Jessie Parker, data scientist". Jessie Parker dicetak tebal, dan data scientist dimiringkan. Kini ada jeda baris setelah tanggal dan nama.

Membangun Dasbor dengan Dash dan Plotly

Ayo berlatih!

Membangun Dasbor dengan Dash dan Plotly

Preparing Video For Download...