CommencezCommencez gratuitement

Passer en mode sombre

Une tendance courante dans les logiciels et les pages Web est d'offrir un « mode sombre », plus reposant pour les yeux et préféré par certaines personnes. Le mode sombre utilise un arrière-plan noir pour les éléments, et du texte blanc partout.

Votre tâche consiste à reprendre le tableau de bord que vous avez créé dans l'exercice précédent et à le faire basculer du « bon côté obscur ». Vous devrez modifier l'arrière-plan et la couleur du texte de votre graphique et de vos éléments HTML.

La plupart du tableau de bord précédent est fourni, y compris la création des graphiques nécessaires. Toutefois, il reste des éléments clés à ajuster pour passer le tableau de bord en mode sombre. Dans cet exercice, vous pouvez utiliser des noms de couleurs plutôt que des codes RVB.

Cette activité fait partie du cours

Créer des tableaux de bord avec Dash et Plotly

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 à l'aide de 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