CommencerCommencer gratuitement

Adding an HTML list to Dash

While working at your desk, someone from the Marketing department saw the last little dashboard you produced and asked you to create one for them. They would like a bar chart of the top categories by total sales amount, with a list below that notes the top few categories for a quick glance.

They also have a few stylistic notes, but they all seem within your knowledge base, given your recent work in HTML and Dash.

Your task is to extend the dashboard you created to include a list of the top categories and their sales volume.

Cet exercice fait partie du cours

Building Dashboards with Dash and Plotly

Afficher le cours

Instructions

  • Create an ordered list below line 20 using Dash.
  • Add two list elements containing the num1_cat and num2_cat variables with their sales volumes to the ordered list below line 22.
  • Add a line break below line 26 so the copyright notice appears on its own.

Exercice interactif pratique

Essayez cet exercice en complétant cet exemple de code.

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)
Modifier et exécuter le code