Passer en mode sombre

Une tendance fréquente dans les logiciels et sur le web est le « mode sombre », plus reposant pour les yeux et apprécié par certaines personnes. Le mode sombre consiste à utiliser un fond noir pour les éléments et une couleur de texte blanche partout.

Votre tâche est de reprendre le tableau de bord que vous avez créé dans l’exercice précédent et de le faire basculer du « côté obscur ». Cela implique de modifier la couleur d’arrière-plan et la couleur du texte pour votre graphique et vos éléments HTML.

La majeure partie du tableau de bord précédent a été fournie, y compris la création des graphiques nécessaires. Toutefois, il reste un travail essentiel pour passer le tableau de bord en mode sombre. Dans cet exercice, vous pouvez utiliser des noms de couleurs plutôt que des codes RGB.

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 couleur de police de l’histogramme pour correspondre au mode sombre sous la ligne 10 (arrière-plan black, texte white).
Ajoutez le nouveau logo en utilisant la variable logo_link sous la ligne 16.

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/1c95273e21a54b5ca48e0b03cc0c1faeafb3d7cd/e-comlogo_white.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')

# Set the font color of the bar chart
ecom_bar.update_layout({'yaxis':{'dtick':1, 'categoryorder':'total ascending'}, 'paper_bgcolor':'black', 'font': {'color':'____'}})

app = Dash()

app.layout = [
    # Add the new logo
    html.Img(
    	src=____,
    	style={'width':'165px', 'height':'50px'}),
    html.H1('Top Sales Categories'),
    dcc.Graph(
    	figure=ecom_bar,
    	style={'width':'500px', 'height':'350px', 'margin':'auto'}),
    html.Br(),
    html.Span(children=[
    'The top category was: ',
    html.B(top_cat),
    html.Br(),
    html.I('Copyright E-Com INC')])
    ]

if __name__ == '__main__':
    app.run(debug=True)

Modifier et exécuter le code