Inizia subitoInizia gratis

Passare alla Dark Mode

Una tendenza comune nei software e nelle pagine web è la "Dark Mode", più riposante per gli occhi e preferita da alcune persone. In Dark Mode lo sfondo degli elementi è nero e il colore del testo è bianco.

Il tuo compito è prendere il dashboard che hai creato nell'esercizio precedente e portarlo sul "lato oscuro". Dovrai modificare lo sfondo e il colore del testo nel grafico e negli elementi HTML.

Gran parte del dashboard precedente è già stata fornita, inclusa la creazione dei grafici necessari. Tuttavia, c'è del lavoro chiave da fare per passare il dashboard alla Dark Mode. In questo esercizio puoi usare i nomi dei colori invece dei codici RGB.

Questo esercizio fa parte del corso

Creare dashboard con Dash e Plotly

Visualizza corso

Istruzioni dell'esercizio

  • Imposta il colore del font del grafico a barre per adattarlo alla Dark Mode sotto la riga 10 (sfondo black, testo white).
  • Aggiungi il nuovo logo usando la variabile logo_link sotto la riga 16.

esercizio interattivo pratico

Prova questo esercizio completando questo codice di esempio.

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)
Modifica ed esegui il codice