시작하기무료로 시작하기

깨진 대시보드 고치기

이런! 인터랙티브 매출 대시보드를 운영 환경으로 옮기는 동안 파일이 손상되었어요. 대부분의 파일은 복구했지만, 트리거된 콜백 함수 주변을 중심으로 중요한 함수와 요소에 누락이 있네요.

Dash 콜백에 대한 지식을 활용해 이 대시보드를 고칠 수 있을까요?

이 연습은 강의의 일부입니다

Dash와 Plotly로 대시보드 만들기

강의 보기

연습 안내

  • 페이지 로드 시 표시되도록, 34번째 줄 아래에서 country_filter 변수를 'All Countries'로 설정하세요.
  • 36번째 줄 아래의 update_plot 함수 내부에서 복사 메서드를 사용하여 ecom_sales DataFrame이 덮어쓰이지 않도록 하세요.
  • Plotly figure가 다시 렌더링되도록, 45번째 줄 아래의 update_plot 함수에서 bar_fig_major_cat figure를 반환하세요.

실습형 인터랙티브 연습

이 예제를 이 샘플 코드를 완성하여 풀어보세요.

from dash import Dash, dcc, html, Input, Output, callback
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/fdbe0accd2581a0c505dab4b29ebb66cf72a1803/e-comlogo.png'

app = Dash()

app.layout = [
    html.Img(src=logo_link, style={'margin': '30px 0px 0px 0px'}),
    html.H1('Sales breakdowns'),
    html.Div([
        html.H2('Controls'),
        html.Br(),
        html.H3('Country Select'),
        dcc.Dropdown(
            id='country_dd',
            options=['United Kingdom', 'Germany', 'France', 'Australia', 'Hong Kong'],
            style={'width': '200px', 'margin': '0 auto'})],
      	style={'width': '350px', 'height': '350px', 'display': 'inline-block', 'vertical-align': 'top', 'border': '1px solid black', 'padding': '20px'}),
    html.Div([
        dcc.Graph(id='major_cat'),
        html.H2('Major Category', style={'border': '2px solid black', 'width': '200px', 'margin': '0 auto'})],
        style={'width': '700px', 'display': 'inline-block'})
]

@callback(
    Output(component_id='major_cat', component_property='figure'),
    Input(component_id='country_dd', component_property='value')
)

def update_plot(input_country):
    # Set a default value
    country_filter = '____'
    # Ensure the DataFrame is not overwritten
    sales = ____.____(deep=True)
    if input_country:
        country_filter = input_country
        sales = sales[sales['Country'] == country_filter]
    ecom_bar_major_cat = sales.groupby('Major Category')['OrderValue'].agg('sum').reset_index(name='Total Sales ($)')
    bar_fig_major_cat = px.bar(
        title=f'Sales in {country_filter}', data_frame=ecom_bar_major_cat, x='Total Sales ($)', y='Major Category', color='Major Category',
                 color_discrete_map={'Clothes':'blue','Kitchen':'red','Garden':'green','Household':'yellow'})
   	# Return the figure
    ____

if __name__ == '__main__':
    app.run(debug=True)
코드 편집 및 실행