CommencezCommencez gratuitement

Contrôler la disposition des objets

Votre travail avec Dash a vraiment un impact dans votre organisation. Toutefois, une collègue vous a écrit au sujet d'un problème 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 diagrammes à barres côte à côte.

Mais le logo est trop près du haut, et les graphiques sont empilés l'un au-dessus de l'autre. Quel fouillis!

Vous pensez pouvoir utiliser vos connaissances en CSS pour remettre ces éléments en place.

Cette activité fait partie du cours

Créer des tableaux de bord avec Dash et Plotly

Voir le cours

Instructions de l’exercice

  • Ajoutez une marge de 30px au haut seulement du logo sous la ligne 15 et laissez les autres côtés 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