Zu Dark Mode wechseln

Ein verbreiteter Trend in Softwareprodukten und auf Webseiten ist der „Dark Mode“, der für die Augen angenehmer ist und von manchen bevorzugt wird. Beim Dark Mode sind die Hintergründe der Elemente schwarz und die Textfarbe überall weiß.

Deine Aufgabe ist es, das Dashboard aus der letzten Übung auf die „dunkle Seite“ zu bringen. Dafür musst du die Hintergrund- und Textfarben in deinem Diagramm und deinen HTML-Elementen anpassen.

Ein Großteil des letzten Dashboards wurde bereits bereitgestellt, einschließlich der Erstellung der nötigen Diagramme. Es gibt jedoch noch entscheidende Schritte, um das Dashboard auf Dark Mode umzustellen. In dieser Übung kannst du Farbnamen statt RGB-Codes verwenden.

Diese Übung ist Teil des Kurses

<Kurs>Dashboards mit Dash und Plotly erstellen</Kurs>

Kurs ansehen

Übungsanweisungen

Setze die Schriftfarbe des Balkendiagramms passend zum Dark Mode unterhalb von Zeile 10 (black Hintergrund, white Text).
Füge das neue Logo mithilfe der Variable logo_link unterhalb von Zeile 16 hinzu.

Interaktive praktische Übung

Versuche dich an dieser Übung, indem du diesen Beispielcode vervollständigst.

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)

Code bearbeiten und ausführen