Aan de slagBegin gratis

Een verfijnd salesdashboard

Het e-commercebedrijf uit Hoofdstuk 1 heeft je weer gebeld en heeft budget om het eerdere werk dat je deed uit te breiden: een basisproof-of-concept van een salesdashboard.

Nu je je vaardigheden in styling en positionering hebt opgebouwd, kun je dit dashboard presentatiewaardig maken.

Ter herinnering: het bedrijf wil een lijngrafiek van hun totale omzet per maand, een staafdiagram van hun totale omzet per land, en een beknopte samenvatting over de hoogste bestelhoeveelheid in de periode. Ze willen deze echter liever naast elkaar zien, en hun huisstijl vraagt om lichtblauwe achtergronden. Ze hebben gevraagd om twee logo’s, één aan elke kant van de hoofdtitel, zodat hun merk duidelijk naar voren komt.

Deze oefening maakt deel uit van de cursus

Dashboards bouwen met Dash en Plotly

Bekijk cursus

Oefeninstructies

  • Voeg het logo links naast de H1 toe met 25px marge onder regel 17.
  • Voeg het logo rechts naast de H1 toe met 25px marge onder regel 22.
  • Stel de lijngrafiek in op 500px breed, naast elkaar met 5px marge onder regel 25.
  • Stel de staafgrafiek in op 350px breed, naast elkaar met 5px marge onder regel 28.

Interactieve oefening met praktijkervaring

Probeer deze oefening door deze voorbeeldcode aan 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