CommencerCommencer gratuitement

Switching to Darkmode

A common trend in software products and web pages is having a 'Dark Mode', which is easier on the eyes and preferred by some people. Dark Mode is where the background of elements are black, and the text color for everything is white.

Your task is to take the dashboard you created in the last exercise and switch it over to the 'dark side'. This will involve changing the background and text color on your graph and HTML elements.

Most of the last dashboard has been provided, including the creation of necessary graphs. However, there is key work to be done to switch over the dashboard to Dark Mode. You can use words for the colors in this exercise rather than RGB codes.

Cet exercice fait partie du cours

Building Dashboards with Dash and Plotly

Afficher le cours

Instructions

  • Set the font color of the bar chart to match Dark Mode below line 10 (black background, white text).
  • Add the new logo using the logo_link variable below line 16.

Exercice interactif pratique

Essayez cet exercice en complétant cet exemple de code.

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