ÎncepețiÎncepe gratuit

Trecerea la Modul Întunecat

O tendință frecventă în produsele software și paginile web este „Modul Întunecat" (Dark Mode), mai confortabil pentru ochi și preferat de mulți utilizatori. În Dark Mode, fundalul elementelor este negru, iar culoarea textului este albă.

Sarcina ta este să iei dashboard-ul creat în exercițiul anterior și să-l transformi în spiritul „părții întunecate". Aceasta presupune modificarea culorii de fundal și a culorii textului atât pe grafic, cât și pe elementele HTML.

Marea parte a dashboard-ului anterior este deja furnizată, inclusiv crearea graficelor necesare. Totuși, mai ai de făcut câteva modificări esențiale pentru a trece la Dark Mode. În acest exercițiu poți folosi denumirile culorilor în loc de coduri RGB.

Acest exercițiu face parte din cursul

Crearea dashboardurilor cu Dash și Plotly

Vezi cursul

Instrucțiuni pentru exercițiu

  • Setează culoarea fontului graficului cu bare pentru a corespunde cu Dark Mode, sub linia 10 (fundal black, text white).
  • Adaugă noul logo folosind variabila logo_link, sub linia 16.

Exercițiu interactiv practic

Încearcă acest exercițiu completând acest cod de exemplu.

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)
Editează și rulează codul