Позиционирование компонентов Dash

Создание дашбордов с помощью Dash и Plotly

Alex Scriven

Data Scientist

HTML и веб

HTML: язык для структурирования веб-сайтов

HTML: каркас дома
- Задаёт расположение объектов
CSS: цвет краски в комнате
- Стиль (например, цвет фона) объектов

официальный логотип HTML с надписью HTML синими буквами

официальный логотип CSS с надписью CSS синими выпуклыми буквами

Теги Div и H

Dash использует dash.html для связи HTML с Python

Два важных элемента HTML («теги»):

Теги Div: ключевые для структурирования страниц
- Можно использовать множество блоков разного размера с разным содержимым
Теги H: заголовки разных уровней (H1 > H6)

Использование тегов Div и H

Внешний div (содержит всё остальное)
Внутренний div: красный фон
Div с синим фоном
- Внутри — теги H
Часть style пока игнорируем — подробнее о CSS позже!

<div>
  <div style="background-color: red; 
              width:250; height:250;">
  </div>
  <div style="background-color: lightblue; 
              width:250; height:250;">
    <h1>This box</h1>
    <h2>Another Title</h2>
  </div>
</div>

Наш пример в действии

Синий прямоугольник с пунктирной границей. В верхнем левом углу — закрашенный красный блок, ниже — закрашенный синий блок с текстом «This box» и «another title» внутри

Обратите внимание:

Div с красным фоном
Div с синим фоном и тегами H

Наш пример в Dash

Воссоздаём пример HTML с помощью Dash

from dash import Dash, html
app = Dash()
app.layout = [
    html.Div(style={'height':250, 'width':250, 'background-color':'red'}),
    html.Div(children=[
        html.H1("This box"),
        html.H2("Another Title")], 
        style={'background-color':'lightblue'})
    ]

Разбор структуры макета

Теги HTML соответствуют html.() в Dash
- html.Div() = <div>
- html.H1() = <h1>
У последнего div есть аргумент children
- Список объектов, размещаемых внутри
Внутрь можно помещать и компоненты dcc.Graph()!

from dash import Dash, html
app.layout = [
  html.Div(
    style={'background-color':'red', 
           'height':250, 'width':250}),
  html.Div(
  children=[
      html.H1("This box"),
      html.H2("Another Title")]
    ,style={'background-color':'lightblue', 
              'height':250, 'width':250})
]

Графики в макете

bar_fig_country = px.bar(ecom_sales, 
 x='Total Sales ($)', y='Country',
 color='Country', color_discrete_map=
 {'United Kingdom':'lightblue', 
 'Germany':'orange', 'France':'darkblue', 
 'Australia':'green', 'Hong Kong':'red'})
app = Dash()

app.layout = [
  html.H1("Sales Proportion by Country"),
  dcc.Graph(id='bar_graph', 
            figure=bar_fig_country)
]

GIF-анимация горизонтальной столбчатой диаграммы с общими продажами по оси X и странами по оси Y в браузере Chrome. Страны выделены разными цветами. Курсор перемещается по графику, затем в адресную строку с адресом сервера

Добавляем структуру

app.layout = [
  html.Div(style={
    'width':150,'height':150, 
    'background-color':'lightblue'}),
  html.H1("Sales Proportion by Country"),
  dcc.Graph(id='bar_graph', 
            figure=bar_fig_country)
]

GIF-анимация того же приложения, что и в предыдущем упражнении, но столбчатая диаграмма сдвинута вниз, а над ней появился небольшой светло-синий блок

Давайте потренируемся!

Создание дашбордов с помощью Dash и Plotly