Dash에 HTML 목록 추가하기
책상에서 작업하던 중, 마케팅 부서의 누군가가 당신이 만든 최근 대시보드를 보고 자신들도 하나 만들어 달라고 요청했어요. 총 매출액 기준 상위 카테고리를 막대 그래프로 보여 주고, 그 아래에는 상위 몇 개 카테고리를 한눈에 볼 수 있도록 목록으로 표시해 달라고 합니다.
스타일에 대한 몇 가지 요청도 있었지만, 최근에 학습한 HTML과 Dash 지식으로 충분히 처리할 수 있을 것 같아요.
당신의 과제는 기존에 만든 대시보드를 확장하여 상위 카테고리와 그 매출 규모를 목록으로 포함하는 것입니다.
이 연습은 강의의 일부입니다
Dash와 Plotly로 대시보드 만들기
연습 안내
- 줄
20아래에 Dash를 사용해 순서 있는 목록을 만드세요. - 줄
22아래의 순서 있는 목록에num1_cat과num2_cat변수와 그 매출액을 포함한 두 개의 목록 요소를 추가하세요. - 줄
26아래에 줄바꿈을 추가해 저작권 문구가 독립된 줄에 보이도록 하세요.
실습형 인터랙티브 연습
이 예제를 이 샘플 코드를 완성하여 풀어보세요.
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/2bac9433b0e904735feefa26ca913fba187c0d55/e_com_logo.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)
num1_cat, num1_salesvol = ecom_category.loc[0].tolist()[1:3]
num2_cat, num2_salesvol = ecom_category.loc[1].tolist()[1:3]
ecom_bar = px.bar(ecom_category, x='Total Orders', y='Minor Category', color='Major Category')
ecom_bar.update_layout({'yaxis':{'dtick':1, 'categoryorder':'total ascending'}})
app = Dash()
app.layout = [
html.Img(src=logo_link),
html.H1('Top Sales Categories'),
dcc.Graph(figure=ecom_bar),
html.Span(children=[
'The top 2 sales categories were:',
# Set up an ordered list
html.____(children=[
# Add two list elements with the top category variables
html.____(children=[____, ' with ', num1_salesvol, ' sales volume']),
html.____(children=[____, ' with ', num2_salesvol, ' sales volume'])
], style={'width':'350px', 'margin':'auto'}),
# Add a line break before the copyright notice
html.____(),
html.I('Copyright E-Com INC')])
]
if __name__ == '__main__':
app.run(debug=True)