다크 모드로 전환하기
소프트웨어와 웹페이지에서 흔히 볼 수 있는 트렌드가 '다크 모드'입니다. 눈의 피로를 덜어 주고, 어떤 분들에겐 더 선호되기도 하죠. 다크 모드는 요소의 배경이 검은색이고, 텍스트 색상이 흰색인 모드를 말합니다.
이번 과제는 이전 연습 문제에서 만든 대시보드를 '다크 사이드'로 전환하는 것입니다. 그래프와 HTML 요소의 배경과 텍스트 색상을 바꾸어야 합니다.
필요한 그래프 생성 등 대부분의 이전 대시보드는 제공되어 있습니다. 하지만 대시보드를 다크 모드로 전환하려면 핵심 작업이 남아 있어요. 이 연습 문제에서는 RGB 코드 대신 색상 이름을 사용해도 됩니다.
이 연습은 강의의 일부입니다
Dash와 Plotly로 대시보드 만들기
연습 안내
- 막대 차트의 글꼴 색상을 아래 10번째 줄의 다크 모드(
black배경,white텍스트)에 맞게 설정하세요. - 16번째 줄 아래에
logo_link변수를 사용해 새 로고를 추가하세요.
실습형 인터랙티브 연습
이 예제를 이 샘플 코드를 완성하여 풀어보세요.
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)