A refined sales dashboard
The e-commerce company from Chapter 1 has called you up and has a budget for you to extend the previous work you did, building a basic proof-of-concept sales dashboard.
Now that you have built your styling and positioning skills, you can make this dashboard presentation-worthy.
As a reminder, the company would like a line chart of their total sales each month, a bar chart of their total sales in each country, and a high-level summary statistic around the highest order quantity for the period. However, they would prefer these side-by-side, and their corporate style guide asks for light blue backgrounds. They have requested that there be two logos, one on either side of the main title, so their brand is nice and prominent.
This exercise is part of the course
Building Dashboards with Dash and Plotly
Exercise instructions
- Add the left-side logo next to the H1 with
25px
margin below line17
. - Add the right-side logo next to the H1 with
25px
margin below line22
. - Set line graph to
500px
wide, side-by-side with5px
margin below line25
. - Set bar graph to
350px
wide, side-by-side with5px
margin below line28
.
Hands-on interactive exercise
Have a go at this exercise by completing this sample code.
from dash import Dash, dcc, html
import plotly.express as px
import pandas as pd
logo_link = 'https://assets.datacamp.com/production/repositories/5893/datasets/fdbe0accd2581a0c505dab4b29ebb66cf72a1803/e-comlogo.png'
ecom_sales = pd.read_csv('/usr/local/share/datasets/ecom_sales.csv')
ecom_line = ecom_sales.groupby('Year-Month')['OrderValue'].agg('sum').reset_index(name='TotalSales')
line_fig = px.line(data_frame=ecom_line, x='Year-Month', y='TotalSales',title='Total Sales by Month')
line_fig.update_layout({'paper_bgcolor':'rgb(224, 255, 252)' })
ecom_bar = ecom_sales.groupby('Country')['OrderValue'].agg('sum').reset_index(name='TotalSales')
bar_fig = px.bar(data_frame=ecom_bar, x='TotalSales', y='Country', orientation='h',title='Total Sales by Country')
bar_fig.update_layout({'yaxis':{'dtick':1, 'categoryorder':'total ascending'}, 'paper_bgcolor':'rgb(224, 255, 252)'})
app = Dash()
app.layout = [
html.Img(src=logo_link,
# Add the left-side logo next to the H1 with 25px margin
style={'display':'____', 'margin':'____'}),
html.H1(children=['Sales Figures'],
style={'display':'inline-block'}),
html.Img(src=logo_link,
# Add the right-side logo next to the H1 with 25px margin
style={'display':'____', 'margin':'____'}),
dcc.Graph(figure=line_fig,
# Set line graph to 500px wide, side-by-side with 5px margin
style={'width':'____', 'display':'____', 'margin':'____'}),
dcc.Graph(figure=bar_fig,
# Set bar graph to 350px wide, side-by-side with 5px margin
style={'width':'____', 'display':'____', 'margin':'____'}),
html.H3(f'The largest order quantity was {ecom_sales.Quantity.max()}')
]
if __name__ == '__main__':
app.run(debug=True)