CommencezCommencez gratuitement

Un tableau de bord des ventes peaufiné

L'entreprise de commerce électronique du chapitre 1 vous a recontacté et dispose d'un budget pour que vous prolongiez votre travail précédent en créant une preuve de concept de base pour un tableau de bord des ventes.

Maintenant que vous maîtrisez mieux le style et le positionnement, vous pouvez rendre ce tableau de bord prêt pour une présentation.

Rappel : l'entreprise souhaite un graphique linéaire de ses ventes totales par mois, un diagramme à barres de ses ventes totales par pays, ainsi qu'une statistique sommaire de haut niveau sur la quantité de commande la plus élevée de la période. Toutefois, elle préfère que ces éléments soient présentés côte à côte, et son guide de normes graphiques exige des arrière-plans bleu pâle. Elle demande aussi deux logos, un de chaque côté du titre principal, pour mettre la marque bien en évidence.

Cette activité fait partie du cours

Créer des tableaux de bord avec Dash et Plotly

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 linéaire à 500px de large, côte à côte avec une marge de 5px sous la ligne 25.
  • Réglez le diagramme à barres à 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