CommencezCommencez gratuitement

Styliser une application Dash avec du CSS

Il est temps de libérer la puissance du CSS et d'amener vos tableaux de bord à un autre niveau. 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 d'affaires.

Ajuster la taille du graphique et du logo, et ajouter de belles couleurs d'arrière-plan à divers éléments le rendrait plus attrayant!

Cette activité fait partie du cours

Créer des tableaux de bord avec Dash et Plotly

Voir le cours

Instructions de l’exercice

  • Réglez la taille du logo à 215px de large et 240px de haut sous la ligne 16.
  • Réglez la taille de l'histogramme à 500px de large et 350px de haut sous la ligne 21.
  • Ajoutez une couleur d'arrière-plan lightgrey à l'avis de droit d'auteur 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