Input pengguna di komponen Dash

Membangun Dasbor dengan Dash dan Plotly

Alex Scriven

Data Scientist

Mengapa input pengguna?

Beberapa kegunaan input pengguna:

Penyaringan rentang angka besar (input number)
- Bayangkan dropdown dengan 2000 nilai tahun!
Penyaringan dengan pencocokan teks (input search atau text)
Membuat login (input password dan email/text)

Input pengguna di Dash

Input pengguna adalah tipe Input dari dash core components (dcc.Input)

id wajib untuk integrasi callback
type bawaan adalah text
placeholder menampilkan teks panduan samar

Gambar kecil kotak persegi panjang bertepi hitam dengan teks abu-abu samar "Enter your text"

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

Menggunakan input

Input menjadi variabel Python
Digunakan dalam callback

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

Tipe input pengguna

Beberapa sederhana: 'text', 'number', 'password', 'email'
Beberapa lebih khusus:
- 'range' menghasilkan range slider
- 'tel' dan 'url' untuk nomor telepon dan URL situs web
Beberapa lanjutan:
- 'search' dan 'hidden' melibatkan interaksi browser lanjutan

Membatasi input pengguna

Argumen type otomatis menetapkan batasan.

Mis.: tipe email memerlukan format [email protected]

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

Gif kotak input tempat seseorang mengetik 'some-text', lalu kursor keluar kotak sehingga tepi berubah merah (error). Kursor kembali dan menambahkan '@gmail.com' di akhir, lalu saat keluar tidak ada error

Pembatasan tambahan

Tipe number hanya menerima angka
- Selain itu: min dan max menetapkan batas numerik
- minLength / maxLength untuk input text
Tipe text juga punya pattern untuk validasi regex

Gif kotak kecil dengan tombol naik-turun di kanan. Diklik hingga bernilai 1, lalu turun ke 0. Diketik 249 (tidak ada efek), lalu 251 yang memicu kotak merah (error).

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

Mengaktifkan/nonaktifkan input

Nonaktifkan input secara terprogram dengan disabled

Wajibkan pengisian dengan required

Argumen True/False dari dcc.Input()

Gif kotak input persegi panjang yang tidak dapat diklik. Teks di dalamnya: "A disabled input"

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

Gif kotak input persegi panjang yang diklik lalu ditinggalkan tanpa teks. Muncul kotak merah (error). Teks di dalamnya: "A Required input"

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

Kapan memperbarui

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

Menyaring untuk R, Re, Red, Redd

Gif input teks dengan placeholder 'Filter Product Descriptions'. Teks diketik satu per satu huruf dan grafik di bawahnya makin sedikit datanya: R-E-D-D. Saat lengkap, tidak ada data yang cocok dengan 'redd'

Ayo berlatih!

Membangun Dasbor dengan Dash dan Plotly