Bắt đầu ngayBắt đầu miễn phí

Phân tích vị trí của nhóm khách hàng hàng đầu

Dựa trên công việc tốt của bạn với công ty thương mại điện tử, bạn được đề nghị hỗ trợ họ mở rộng một báo cáo hiện có về doanh số theo quốc gia.

Quản lý kinh doanh muốn hiểu các khách hàng hàng đầu của họ đang ở đâu. Hiện tại, họ chưa có định nghĩa rõ ràng về "hàng đầu". Lý tưởng nhất là họ có thể dễ dàng thử nhiều ngưỡng khác nhau để coi ai đó là khách hàng hàng đầu và xem biểu đồ thay đổi ra sao với các ngưỡng khác nhau.

Nhiệm vụ của bạn là hỗ trợ quản lý kinh doanh bằng cách dùng một range input để xây dựng một ứng dụng cập nhật theo thời gian thực, giúp lọc doanh số theo mức OrderValue tối thiểu.

Bài tập này là một phần của khóa học

Xây dựng Dashboard với Dash và Plotly

Xem khóa học

Hướng dẫn bài tập

  • Thêm một thành phần range input dcc.Input với định danh min_order_val bên dưới dòng 34, cho phép người dùng chọn giá trị từ 50 đến 550.
  • Trong callback bên dưới dòng 53, kiểm tra input_val và lọc DataFrame sales với OrderValue lớn hơn giá trị đã chọn.

Bài tập tương tác thực hành trực tiếp

Hãy thử làm bài tập này bằng cách hoàn thành đoạn mã mẫu này.

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)
Chỉnh sửa và Chạy Mã