User inputs ใน Dash components

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

Alex Scriven

Data Scientist

ทำไมต้องใช้ user input?

ประโยชน์ของ user inputs:

กรองข้อมูลในช่วงตัวเลขกว้าง (input ประเภท number)
- ลองนึกถึง dropdown ที่มีค่า 'year' ถึง 2000 ค่า!
กรองข้อมูลด้วยการจับคู่ข้อความ (input ประเภท search หรือ text)
สร้างระบบล็อกอิน (input ประเภท password และ email/text)

User input ใน Dash

User input คือ Input ประเภทหนึ่งของ dash core components (dcc.Input)

ต้องมี id เพื่อเชื่อมกับ callback
type จะมีค่าเริ่มต้นเป็น text
placeholder แสดงข้อความแนะนำแบบจาง

ภาพรูปสี่เหลี่ยมขอบดำขนาดเล็ก มีข้อความสีเทาจาง "Enter your text" อยู่ภายใน

dcc.Input(
    id='my_input',
    type='text',
    placeholder="Enter your text")

การใช้งาน input

Input จะกลายเป็นตัวแปร Python
นำไปใช้ร่วมกับ callback

# @callback()
def update_plot(entered_data):
    fig = px.scatter(
    data_frame=sales, 
    y='OrderValue', x='Quantity',
    , title=f'{entered_data}')
    return fig

ประเภทของ user input

ประเภทพื้นฐาน: 'text', 'number', 'password', 'email'
ประเภทเฉพาะทาง:
- 'range' สร้าง range slider
- 'tel' และ 'url' ใช้สำหรับหมายเลขโทรศัพท์และ URL เว็บไซต์
ประเภทขั้นสูง:
- 'search' และ 'hidden' เกี่ยวข้องกับการทำงานขั้นสูงของเบราว์เซอร์

การจำกัด user input

อาร์กิวเมนต์ type จะกำหนดข้อจำกัดบางอย่างโดยอัตโนมัติ

เช่น ประเภท email กำหนดให้ต้องอยู่ในรูปแบบ [email protected]

dcc.Input(
    id='my_input',
    type='email',
    placeholder="Enter your email")

GIF แสดงกล่อง input ที่ผู้ใช้พิมพ์ข้อความ 'some-text,' แล้วคลิกออกนอกกล่อง กรอบของกล่องเปลี่ยนเป็นสีแดงแสดงข้อผิดพลาด จากนั้นคลิกกลับเข้ากล่องและเพิ่ม '@gmail.com' ต่อท้าย ซึ่งไม่เกิดข้อผิดพลาดเมื่อคลิกออก

ข้อจำกัดเพิ่มเติม

ประเภท number รับเฉพาะตัวเลข
- นอกจากนี้: min และ max กำหนดขอบเขตตัวเลข
- minLength / maxLength สำหรับ input ประเภท text
ประเภท text มี pattern สำหรับตรวจสอบด้วย regex

GIF แสดงกล่องขนาดเล็กพร้อมปุ่มเพิ่ม/ลดทางขวา เมาส์คลิกปุ่มเพื่อให้ได้ค่า 1 แล้วคลิกลงเพื่อเป็น 0 พิมพ์ 249 แล้วไม่มีการแจ้งเตือน แต่พอพิมพ์ 251 กรอบแดงจะปรากฏรอบ input แสดงข้อผิดพลาด

dcc.Input(
    id='my_input',
    type='number',
    max=250)

การเปิด/ปิด input

ปิดใช้งาน input ด้วยโค้ดโดยใช้ disabled

บังคับให้กรอกด้วย required

เป็นอาร์กิวเมนต์ True/False ของ dcc.Input()

GIF แสดงกล่อง input สี่เหลี่ยมที่เมาส์พยายามคลิกแต่ไม่สามารถทำได้ ข้อความภายในกล่องคือ "A disabled input"

dcc.Input(id='my_input', disabled=True)

GIF แสดงกล่อง input สี่เหลี่ยมที่เมาส์คลิกเข้าแล้วออกโดยไม่พิมพ์ข้อความ กรอบแดงจะปรากฏรอบ input เมื่อคลิกออก ข้อความภายในกล่องคือ "A Required input"

dcc.Input(id='my_input', required=True)

เมื่อใดควรอัปเดต

dcc.Input(id='my_input', type='text',
          debounce=False)

กรองด้วย R, Re, Red, Redd

GIF แสดงช่อง input พร้อม placeholder "Filter Product Descriptions" ผู้ใช้พิมพ์ทีละตัวอักษร กราฟด้านล่างเปลี่ยนแสดงข้อมูลน้อยลงทุกครั้ง ข้อความที่พิมพ์คือ R-E-D-D เมื่อครบแล้ว กราฟไม่มีข้อมูล แสดงว่าไม่มีจุดข้อมูลที่มีคำว่า redd ในคอลัมน์ description

มาฝึกกันเถอะ!

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