ПочатиПочніть безкоштовно

Аналіз локацій провідних клієнтів

Завдяки вашій вдалій роботі з e-commerce компанією вас попросили допомогти розширити наявний звіт про їхні продажі за країнами.

Керівника з продажів цікавить, де розташовані їхні найкращі клієнти. Наразі немає чіткого визначення, що означає «топ». В ідеалі він зможе легко випробувати різні порогові значення, за якими клієнта можна вважати топклієнтом, і подивитися, як змінюється графік за різних порогів.

Ваше завдання — допомогти керівнику з продажів, використавши компонент введення діапазону, щоб забезпечити застосунок із живим оновленням, який фільтрує продажі за мінімальною сумою OrderValue.

Ця вправа є частиною курсу

Створення дашбордів з Dash і Plotly

Переглянути курс

Інструкції до вправи

  • Додайте компонент введення діапазону dcc.Input з ідентифікатором min_order_val під рядком 34, щоб користувачі могли вибирати значення від 50 до 550.
  • У callback під рядком 53 перевірте input_val і відфільтруйте датафрейм sales, залишивши рядки з OrderValue, більшим за вибране значення.

Інтерактивна практична вправа

Спробуйте виконати цю вправу, доповнивши цей зразок коду.

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('Set minimum OrderValue'),
    *make_break(2),
    dcc.Input(
      # Add a range input
      id='min_order_val', type='____', 
      ____=____, ____=____, value=50,
      debounce=False,
      style={'width':'300px', '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_country'),
      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_country', component_property='figure'), 
    Input(component_id='min_order_val', component_property='value'))

def update_plot(input_val):
    sales = ecom_sales.copy(deep=True)
    # Check for input and filter sales
    if ____:
        input_val = round(float(input_val), 2)
        sales = sales[sales['OrderValue'] > ____] 
    fig = px.scatter(data_frame=sales, y='OrderValue', height=400,
                     x='Quantity', color='Country',
                     title=f'Orders of Min Value ${input_val}')
    return fig
      
if __name__ == '__main__':
    app.run(debug=True)
Редагувати та запускати код