Chuyển sang Chế độ tối
Một xu hướng phổ biến trong phần mềm và trang web là có 'Chế độ tối' (Dark Mode), dễ chịu hơn cho mắt và được một số người ưa thích. Chế độ tối là khi nền của các phần tử là màu đen và màu chữ của mọi thứ là màu trắng.
Nhiệm vụ của bạn là lấy bảng điều khiển (dashboard) mà bạn đã tạo ở bài trước và chuyển nó sang 'phe tối'. Việc này sẽ bao gồm thay đổi màu nền và màu chữ trên biểu đồ và các phần tử HTML của bạn.
Phần lớn dashboard trước đó đã được cung cấp, bao gồm cả việc tạo các biểu đồ cần thiết. Tuy nhiên, vẫn còn những phần quan trọng cần làm để chuyển dashboard sang Chế độ tối. Trong bài này, bạn có thể dùng tên màu thay vì mã RGB.
Bài tập này là một phần của khóa học
Xây dựng Dashboard với Dash và Plotly
Hướng dẫn bài tập
- Đặt màu chữ của biểu đồ cột để khớp với Chế độ tối bên dưới dòng
10(nềnblack, chữwhite). - Thêm logo mới bằng biến
logo_linkbên dưới dòng16.
Bài tập tương tác thực hành trực tiếp
Hãy thử làm bài tập này bằng cách hoàn thành đoạn mã mẫu này.
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)