Nhập liệu người dùng trong thành phần Dash

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

Alex Scriven

Data Scientist

Vì sao cần nhập liệu?

Một số ứng dụng hữu ích của nhập liệu:

Lọc theo dải số lớn (ô number)
- Hãy tưởng tượng dropdown có 2000 giá trị năm!
Lọc theo khớp văn bản (ô search hoặc text)
Tạo đăng nhập (ô password và email/text)

Nhập liệu trong Dash

Một ô nhập liệu là kiểu Input của dash core components (dcc.Input)

Cần id để tích hợp callback
type mặc định là text
placeholder hiển thị gợi ý mờ

Ảnh nhỏ hình chữ nhật viền đen với chữ xám mờ "Enter your text" bên trong

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

Sử dụng giá trị nhập

Giá trị nhập trở thành biến Python
Dùng trong callback

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

Các kiểu nhập liệu

Một số loại cơ bản: 'text', 'number', 'password', 'email'
Một số chuyên biệt:
- 'range' tạo thanh trượt phạm vi
- 'tel' và 'url' cho số điện thoại và địa chỉ web
Một số nâng cao:
- 'search' và 'hidden' cần tương tác trình duyệt nâng cao

Giới hạn nhập liệu

Đối số type tự động áp đặt vài giới hạn.

Ví dụ: kiểu email yêu cầu định dạng [email protected]

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

Ảnh gif ô nhập nơi người dùng gõ 'some-text', rời chuột khỏi ô làm viền ô chuyển đỏ báo lỗi. Chuột quay lại, thêm '@gmail.com' vào cuối; khi rời chuột, không còn lỗi

Ràng buộc bổ sung

Kiểu number chỉ cho phép số
- Thêm nữa: min và max đặt giới hạn số
- minLength / maxLength cho ô text
Kiểu text còn có pattern để kiểm tra regex

Ảnh gif hộp nhỏ có phím tăng/giảm bên phải. Chuột nhấp để ra số 1, rồi giảm về 0. Gõ 249 không báo gì, gõ 251 thì viền đỏ báo lỗi

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

Bật/tắt ô nhập

Tắt ô nhập bằng mã với disabled

Bắt buộc phải nhập với required

Đối số True/False của dcc.Input()

Ảnh gif ô nhập hình chữ nhật mà chuột cố bấm nhưng không được. Chữ trong ô: "A disabled input"

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

Ảnh gif ô nhập hình chữ nhật; chuột bấm vào rồi ra ngoài mà không nhập. Viền đỏ xuất hiện báo lỗi. Chữ trong ô: "A Required input"

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

Khi nào cập nhật

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

Lọc theo R, Re, Red, Redd

Ảnh gif ô nhập văn bản với placeholder 'Filter Product Descriptions'. Gõ từng ký tự, biểu đồ bên dưới giảm dữ liệu dần. Gõ R-E-D-D; khi hoàn tất, không còn dữ liệu vì không có mô tả chứa 'redd'

Ayo berlatih!

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