CommencerCommencez gratuitement

Styliser une application Dash avec du CSS

Il est temps de libérer la puissance de CSS et de faire passer vos tableaux de bord au niveau supérieur. Vous réfléchissez à des façons d’embellir le tableau de bord marketing que vous avez créé et vous avez quelques idées à présenter aux parties prenantes métier.

Ajuster la taille du graphique et du logo, et ajouter de jolies couleurs d’arrière-plan à divers éléments lui donnerait plus de peps !

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

  • Définissez la taille du logo à 215px de largeur et 240px de hauteur sous la ligne 16.
  • Définissez la taille de l’histogramme à 500px de largeur et 350px de hauteur sous la ligne 21.
  • Ajoutez une couleur d’arrière-plan lightgrey à la mention de copyright sous la ligne 30.

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/2bac9433b0e904735feefa26ca913fba187c0d55/e_com_logo.png'
ecom_category = ecom_sales.groupby(['Major Category','Minor Category']).size().reset_index(name='Total Orders').sort_values(by='Total Orders', ascending=False).reset_index(drop=True)
top_cat = ecom_category.loc[0]['Minor Category']
ecom_bar = px.bar(ecom_category, x='Total Orders', y='Minor Category', color='Major Category')
ecom_bar.update_layout({'yaxis':{'dtick':1, 'categoryorder':'total ascending'}, 'paper_bgcolor':'rgb(224, 255, 252)'})         

app = Dash()

app.layout = [
    html.Img(
    	src=logo_link,
    	# Set the size of the logo
    	style={'____':'____', '____':'____'}), 
    html.H1('Top Sales Categories'),
	dcc.Graph(
		figure=ecom_bar,
        # Set the size of the bar graph
		style={'____':'____', '____':'____', 'margin':'auto'}),
    html.Br(),
    html.Span(children=[
    'The top category was: ',
    html.B(top_cat),
    html.Br(),
    html.I(
		'Copyright E-Com INC',
    	# Add a background color to the copyright notice
    	style={'____':'____'})])
    ]

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