เริ่มต้นใช้งานเริ่มต้นใช้งานได้ฟรี

วิเคราะห์ที่ตั้งของลูกค้าชั้นนำ

จากผลงานที่ผ่านมา บริษัท e-commerce ได้ขอให้ช่วยขยายรายงานยอดขายตามประเทศที่มีอยู่

ผู้จัดการฝ่ายขายต้องการทำความเข้าใจว่าลูกค้าชั้นนำอยู่ที่ไหนบ้าง แต่ยังไม่มีเกณฑ์ที่ชัดเจนว่า 'ชั้นนำ' หมายความว่าอย่างไร จึงต้องการให้ทดลองปรับค่าตัดสินได้อย่างง่ายดาย เพื่อดูว่ากราฟเปลี่ยนแปลงอย่างไรเมื่อใช้เกณฑ์ต่างกัน

ภารกิจของคุณคือช่วยผู้จัดการฝ่ายขายโดยใช้ range input เพื่อสร้างแอปที่อัปเดตแบบ live ซึ่งกรองยอดขายตามมูลค่า OrderValue ขั้นต่ำที่กำหนด

แบบฝึกหัดนี้เป็นส่วนหนึ่งของหลักสูตร

การสร้างแดชบอร์ดด้วย Dash และ Plotly

ดูคอร์ส

คำแนะนำการฝึกหัด

  • เพิ่ม range input component ชื่อ dcc.Input โดยกำหนด identifier เป็น min_order_val ไว้ใต้บรรทัดที่ 34 เพื่อให้ผู้ใช้เลือกค่าได้ตั้งแต่ 50 ถึง 550
  • ใน callback ใต้บรรทัดที่ 53 ให้ตรวจสอบ input_val และกรอง DataFrame 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)
แก้ไขและรันโค้ด