플롯 제목 업데이트하기
여러분이 함께 작업해 온 전자상거래 회사에서 새로운 과제를 제시했어요.
최종 사용자에게 맞춤형 플롯을 제공하는 방법에 관심이 있어요. 즉, 플롯의 제목을 구성 가능하게 해서 사용자가 자신에게 개인화되었다고 느끼게 하려는 거예요.
이럴 때는 사용자 입력 컴포넌트가 제격이죠!
텍스트 사용자 입력을 받아 플롯 제목을 업데이트하도록 Dash 앱을 개선하는 데 도움을 주세요.
이 연습은 강의의 일부입니다
Dash와 Plotly로 대시보드 만들기
연습 안내
~- 33번 줄 아래에 식별자 add_user_name을 가진 dcc.Input 텍스트 입력 컴포넌트를 추가하세요.
36번 줄 아래에서 사용자が 'Enter'를 눌렀을 때 콜백이 트리거되도록debounce매개변수를 설정하세요.38번 줄 아래에서 그래프가 렌더링될 때 이 입력이 필수가 아니도록required매개변수를 설정하세요.
실습형 인터랙티브 연습
이 예제를 이 샘플 코드를 완성하여 풀어보세요.
from dash import Dash, dcc, html, Input, Output, callback
import plotly.express as px
import pandas as pd
from datetime import datetime, date
ecom_sales = pd.read_csv('/usr/local/share/datasets/ecom_sales.csv')
logo_link = 'https://assets.datacamp.com/production/repositories/5893/datasets/fdbe0accd2581a0c505dab4b29ebb66cf72a1803/e-comlogo.png'
def make_break(num_breaks):
br_list = [html.Br()] * num_breaks
return br_list
def add_logo():
corp_logo = html.Img(
src=logo_link,
style={'width':'75px','margin':'20px 20px 5px 5px','border':'1px dashed lightblue','display':'inline-block'})
return corp_logo
def style_c():
layout_style={'display':'inline-block','margin':'0 auto','padding':'20px'}
return layout_style
app = Dash()
app.layout = [
add_logo(),
*make_break(2),
html.H1('Sales Dashboard'),
*make_break(3),
html.Div([
html.H2('Controls', style=style_c()),
html.H3('Customize plot title'),
*make_break(2),
# Add a text input
dcc.____(id='add_user_name', type='____',
placeholder='Enter your name',
# Ensure input is triggered with 'Enter'
____=____,
# Ensure the plot can load without a selection
____=____,
style={'width':'200px', 'height':'30px'})],
style={'width':'350px', 'height':'350px', 'vertical-align':'top', 'border':'1px solid black',
'display':'inline-block', 'margin':'0px 80px'}),
html.Div([
dcc.Graph(id='sales_plot'),
html.H2('Sales Quantity by Country', style={ 'border':'2px solid black', 'width':'400px', 'margin':'0 auto'})],
style={'width':'500px','display':'inline-block'})
]
@callback(
Output(component_id='sales_plot', component_property='figure'),
Input(component_id='add_user_name', component_property='value')
)
def update_plot(entered_name):
title_value = 'No Name Entered'
sales = ecom_sales.copy(deep=True)
if entered_name:
title_value = entered_name
fig = px.scatter(data_frame=sales,
y='OrderValue', x='Quantity', color='Country',title=f'Plot generated for: {title_value}')
return fig
if __name__ == '__main__':
app.run(debug=True)