HTML у Dash

Створення дашбордів з Dash і Plotly

Alex Scriven

Data Scientist

Повертаємося до HTML

 

  • HTML = мова для структурування вебвмісту
    • Використовує «теги», як-от Div, H1>H6
  • Dash використовує компоненти dash.html
    • Тег H1 — це .H1()
    • Тег Div — це .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>
Створення дашбордів з Dash і Plotly

Структурні теги

 

  • Список доступних HTML‑тегів — документація
  • Важливі структурні теги:
    • .Br() = розрив рядка
    • .Img() = вставити зображення
Створення дашбордів з Dash і Plotly

Списки в HTML Dash

 

  • .Ul() \ .Ol() і .Li() = створення списків
    • .Ul() — невпорядкований список (маркери, як тут)
    • .Ol() — впорядкований список (нумерація)
    • .Li() — кожен елемент списку
Створення дашбордів з Dash і Plotly

Додавання логотипа компанії

 

app.layout = [

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

]

 

Знімок верхнього лівого кута браузера Chrome із серверною адресою в URL. У браузері видно логотип компанії — рожевий діамант із написом E-com global. Нижче — заголовок «Our Sales Dashboard».

Створення дашбордів з Dash і Plotly

Текстові теги

 

Задавайте й форматуйте текст

  • .P() або .Span() = вставити звичайний текст
    • Приймають аргумент children (список тексту, .P() або .Span())
  • .B() = зробити текст жирним
  • .I() = зробити текст курсивом
Створення дашбордів з Dash і Plotly

Текстові теги HTML у Dash

 

Складніше форматування:

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

   html.Span(children=[

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

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

   html.I("Data Scientist")

   ])

]

 

Знімок верхнього лівого кута вікна Chrome з видимою адресою сервера в рядку URL. Великий заголовок «our sales dashboard», нижче рядок: "Prepared: 2021-06-27 by Jessie Parker, data scientist". «Jessie Parker,» виділено жирним, «data scientist» — курсивом.

Створення дашбордів з Dash і Plotly

Розбивання тексту

$$

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

 

Той самий дашборд, що й на попередньому слайді: знімок верхнього лівого кута вікна Chrome з адресою сервера в URL. Великий заголовок «our sales dashboard»; нижче рядок: "Prepared: 2021-06-27 by Jessie Parker, data scientist". «Jessie Parker» — жирним, «data scientist» — курсивом. Тепер після дати й імені — розриви рядків.

Створення дашбордів з Dash і Plotly

Давайте потренуємось!

Створення дашбордів з Dash і Plotly

Preparing Video For Download...