Aan de slagGa gratis aan de slag

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.

Deze oefening maakt deel uit van de cursus

Building Dashboards with Dash and Plotly

Cursus bekijken

Oefeninstructies

  • Add the left-side logo next to the H1 with 25px margin below line 17.
  • Add the right-side logo next to the H1 with 25px margin below line 22.
  • Set line graph to 500px wide, side-by-side with 5px margin below line 25.
  • Set bar graph to 350px wide, side-by-side with 5px margin below line 28.

Praktische interactieve oefening

Probeer deze oefening eens door deze voorbeeldcode in te vullen.

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)
Code bewerken en uitvoeren