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...