CommencerCommencez gratuitement

Contrôler la disposition des objets

Votre travail avec Dash a vraiment de l’impact dans votre organisation. Cependant, un collègue vous a contacté au sujet d’un problème rencontré avec l’un de ses tableaux de bord. Dans sa version idéale, le tableau de bord affiche le logo de l’entreprise en haut, suivi de deux histogrammes placés côte à côte.

Mais le logo est trop proche du haut, et les graphiques sont empilés l’un au-dessus de l’autre. Quel bazar !

Vous pensez pouvoir utiliser vos connaissances en CSS pour remettre tout cela en ordre.

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 une marge de 30px uniquement en haut du logo sous la ligne 15 et laissez toutes les autres faces sans marge.
  • Ajoutez du style aux deux graphiques sous la ligne 19 pour qu’ils apparaissent côte à côte.

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
ecom_sales = pd.read_csv('/usr/local/share/datasets/ecom_sales.csv')
logo_link = 'https://assets.datacamp.com/production/repositories/5893/datasets/fdbe0accd2581a0c505dab4b29ebb66cf72a1803/e-comlogo.png'
ecom_bar_major_cat = ecom_sales.groupby('Major Category')['OrderValue'].agg('sum').reset_index(name='Total Sales ($)')
ecom_bar_minor_cat = ecom_sales.groupby('Minor Category')['OrderValue'].agg('sum').reset_index(name='Total Sales ($)')
bar_fig_major_cat = px.bar(ecom_bar_major_cat, x='Total Sales ($)', y='Major Category', color='Major Category', color_discrete_map={'Clothes':'blue','Kitchen':'red','Garden':'green','Household':'yellow'})
bar_fig_minor_cat = px.bar(ecom_bar_minor_cat, x='Total Sales ($)', y='Minor Category')                    

app = Dash()

app.layout = [
	html.Img(src=logo_link,
		# Add margin to the logo
		style={'margin':'____ ____ ____ ____'}),
	html.H1('Sales breakdowns'),
	dcc.Graph(
		# Style the graphs to appear side-by-side
		figure=bar_fig_major_cat,
		style={'display':'____', 'width': '49%'}),
	dcc.Graph(
		figure=bar_fig_minor_cat,
		style={'display':'____', 'width': '49%'}), 
  ]

if __name__ == '__main__':
    app.run(debug=True)
Modifier et exécuter le code