НачатьНачать бесплатно

Добавление HTML-списка в Dash

Пока вы работали за своим столом, коллега из отдела маркетинга увидел ваш последний дашборд и попросил создать похожий для них. Им нужна столбчатая диаграмма с топовыми категориями по общему объёму продаж, а ниже — список нескольких ведущих категорий для быстрого ознакомления.

У них также есть несколько пожеланий по оформлению, однако все они находятся в пределах ваших знаний об HTML и Dash.

Ваша задача — расширить созданный дашборд, добавив список топовых категорий с их объёмом продаж.

Это упражнение является частью курса

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

Посмотреть курс

Инструкции к упражнению

  • Создайте упорядоченный список ниже строки 20 с помощью Dash.
  • Добавьте два элемента списка, содержащих переменные num1_cat и num2_cat с их объёмом продаж, в упорядоченный список ниже строки 22.
  • Добавьте перенос строки ниже строки 26, чтобы уведомление об авторских правах отображалось на отдельной строке.

Интерактивное практическое упражнение

Попробуйте выполнить это упражнение, дополнив этот пример кода.

from dash import Dash, dcc, html
import plotly.express as px
import pandas as pd
ecom_sales = pd.read_csv('/usr/local/share/datasets/ecom_sales.csv')
logo_link = 'https://assets.datacamp.com/production/repositories/5893/datasets/2bac9433b0e904735feefa26ca913fba187c0d55/e_com_logo.png'
ecom_category = ecom_sales.groupby(['Major Category','Minor Category']).size().reset_index(name='Total Orders').sort_values(by='Total Orders', ascending=False).reset_index(drop=True)
num1_cat, num1_salesvol = ecom_category.loc[0].tolist()[1:3]
num2_cat, num2_salesvol = ecom_category.loc[1].tolist()[1:3]
ecom_bar = px.bar(ecom_category, x='Total Orders', y='Minor Category', color='Major Category')
ecom_bar.update_layout({'yaxis':{'dtick':1, 'categoryorder':'total ascending'}})             

app = Dash()

app.layout = [
    html.Img(src=logo_link),
    html.H1('Top Sales Categories'),
    dcc.Graph(figure=ecom_bar),
    html.Span(children=[
    'The top 2 sales categories were:',
    # Set up an ordered list
    html.____(children=[
      	# Add two list elements with the top category variables
        html.____(children=[____, ' with ', num1_salesvol, ' sales volume']),
        html.____(children=[____, ' with ', num2_salesvol, ' sales volume'])
    ], style={'width':'350px', 'margin':'auto'}),
    # Add a line break before the copyright notice
    html.____(),
    html.I('Copyright E-Com INC')])
    ]

if __name__ == '__main__':
    app.run(debug=True)
Редактировать и запускать код