Un tableau de bord des ventes peaufiné

L’entreprise d’e-commerce du Chapitre 1 vous recontacte avec un budget pour prolonger votre travail précédent : la construction d’un tableau de bord des ventes simple en preuve de concept.

Maintenant que vous avez perfectionné vos compétences de style et de positionnement, vous pouvez rendre ce tableau de bord digne d’une présentation.

Pour rappel, l’entreprise souhaite un graphique en courbes de ses ventes totales par mois, un graphique en barres de ses ventes totales par pays, et une statistique de synthèse sur la quantité de commande maximale sur la période. Toutefois, elle préfère que ces éléments soient affichés côte à côte, et son guide de style demande des arrière-plans bleu clair. Elle a également demandé deux logos, un de chaque côté du titre principal, afin que la marque soit bien mise en avant.

Cet exercice fait partie du cours

<cours>Créer des tableaux de bord avec Dash et Plotly</cours>

Voir le cours

Instructions de l’exercice

Ajoutez le logo de gauche à côté du H1 avec une marge de 25px sous la ligne 17.
Ajoutez le logo de droite à côté du H1 avec une marge de 25px sous la ligne 22.
Réglez le graphique en lignes sur 500px de large, côte à côte avec une marge de 5px sous la ligne 25.
Réglez le graphique en barres sur 350px de large, côte à côte avec une marge de 5px sous la ligne 28.

Exercice interactif pratique

Essayez cet exercice en complétant ce code d’exemple.

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)

Modifier et exécuter le code