LoslegenKostenlos loslegen

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.

Diese Übung ist Teil des Kurses

Building Dashboards with Dash and Plotly

Kurs anzeigen

Anleitung zur Übung

  • 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.

Interaktive Übung

Versuche dich an dieser Übung, indem du diesen Beispielcode vervollständigst.

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)
Code bearbeiten und ausführen