ПочатиПочніть безкоштовно

Додавання 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)
Редагувати та запускати код