НачатьНачать бесплатно

Восстановление сломанного дашборда

Неудача! При переносе интерактивного дашборда продаж в продакшн файл оказался повреждён. Большинство файлов удалось восстановить, однако в некоторых ключевых функциях и элементах остались пробелы — прежде всего в функции callback, которая срабатывает при взаимодействии пользователя.

Сможете ли вы применить знания о callback-функциях Dash, чтобы исправить этот дашборд?

Это упражнение является частью курса

Создание дашбордов с помощью Dash и Plotly

Посмотреть курс

Инструкции к упражнению

  • Присвойте переменной country_filter значение 'All Countries' после строки 34, чтобы это значение отображалось при загрузке страницы.
  • Убедитесь, что DataFrame ecom_sales не перезаписывается внутри функции update_plot после строки 36 — используйте метод копирования.
  • Верните фигуру bar_fig_major_cat из функции update_plot после строки 45, чтобы график Plotly отрисовывался заново.

Интерактивное практическое упражнение

Попробуйте выполнить это упражнение, дополнив этот пример кода.

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)
Редактировать и запускать код