Aan de slagBegin gratis

Overschakelen naar dark mode

Een veelvoorkomende trend in software en op webpagina’s is een 'dark mode', wat rustiger is voor je ogen en door sommige mensen de voorkeur krijgt. In dark mode is de achtergrond van elementen zwart en is alle tekst wit.

Jouw taak is om het dashboard dat je in de vorige oefening hebt gemaakt om te zetten naar de 'donkere kant'. Dit houdt in dat je de achtergrond- en tekstkleur van je grafiek en HTML-elementen aanpast.

Het grootste deel van het vorige dashboard is al voor je klaargezet, inclusief de benodigde grafieken. Er is echter nog belangrijk werk nodig om het dashboard naar dark mode om te schakelen. In deze oefening mag je kleurnamen gebruiken in plaats van RGB-codes.

Deze oefening maakt deel uit van de cursus

Dashboards bouwen met Dash en Plotly

Bekijk cursus

Oefeninstructies

  • Stel de tekstkleur van de staafgrafiek in zodat deze past bij dark mode onder regel 10 (black achtergrond, white tekst).
  • Voeg het nieuwe logo toe met de variabele logo_link onder regel 16.

Interactieve oefening met praktijkervaring

Probeer deze oefening door deze voorbeeldcode aan te vullen.

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 bewerken en uitvoeren