Розміщення компонентів Dash

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

Alex Scriven

Data Scientist

HTML і веб

HTML: мова для структурування сайтів

HTML: дерев'яний каркас будинку
- Визначає розміщення об'єктів
CSS: колір фарби в кімнаті
- Стиль об'єктів (напр., колір тла)

офіційний логотип html. написано HTML синіми літерами

офіційний логотип css. напис "css" синім рельєфним шрифтом

Теґи Div і H

Dash використовує dash.html як міст між HTML і Python

Дві важливі HTML-структури («теґи»):

Теґи div: важливі для структури сайтів
- Можна мати багато 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 відповідають Dash html.()
- 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)
]

Гіф: горизонтальна стовпчикова діаграма з підсумковими продажами на осі x та країнами на осі y у браузері Chrome. Країни різних кольорів. Курсор наводиться на графік, а потім на рядок URL із адресою сервера

Додаємо більше структури

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

Гіф того самого застосунку, що й у попередній вправі, але стовпчикова діаграма зміщена нижче сторінки, а зверху — невеликий блакитний блок

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

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