Adding an HTML list to Dash
While working at your desk, someone from the Marketing department saw the last little dashboard you produced and have asked you to create one for them. They would like a bar chart of the top categories by total sales amount but 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.
This exercise is part of the course
Building Dashboards with Dash and Plotly
Exercise instructions
- Create an ordered HTML list using Dash below line
22
. - Add two list elements containing the top two categories and their associated sales volumes (created for you on lines
9
and10
) to the ordered list below line24
. - Add a line break, so the copyright notice is on a new line below line
28
.
Hands-on interactive exercise
Have a go at this exercise by completing this sample code.
import dash
from dash import 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.Dash(__name__)
app.layout = html.Div([
html.Img(src=logo_link),
html.H1('Top Sales Categories'),
html.Div(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.____(____=[____, ' with ', num1_salesvol, ' sales volume']),
html.____(____=[____, ' 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')])
], style={'text-align':'center', 'font-size':22})
if __name__ == '__main__':
app.run_server(debug=True)