Dash bileşenlerinde kullanıcı girdileri

Dash ve Plotly ile Paneller Oluşturma

Alex Scriven

Data Scientist

Neden kullanıcı girdisi?

Kullanıcı girdilerinin bazı yararlı kullanımları:

Geniş sayı aralığında filtreleme (number girdileri)
- 2000 yıl değerli bir açılır listeyi düşünün!
Metin eşleşmesine göre filtreleme (search veya text)
Giriş oluşturma (password ve email/text)

Dash'te kullanıcı girdisi

Bir kullanıcı girdisi, dash core components Input türüdür (dcc.Input)

Geri çağırma entegrasyonu için bir id gerekir
type varsayılan olarak text olur
placeholder soluk yönlendirme metni gösterir

Siyah kenarlıklı dikdörtgen içinde soluk gri "Enter your text" metni olan küçük görsel

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

Girdiyi kullanma

Girdi bir Python değişkeni olur
Geri çağırma ile kullanılır

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

Kullanıcı girdi türleri

Bazıları basittir: 'text', 'number', 'password', 'email'
Bazıları daha özeldir:
- 'range' bir aralık kaydırıcı üretir
- 'tel' ve 'url' telefon ve web adresleri içindir
Bazıları gelişmiştir:
- 'search' ve 'hidden' gelişmiş tarayıcı etkileşimi gerektirir

Kullanıcı girdisini kısıtlama

type bağımsız değişkeni otomatik bazı kısıtlar uygular.

Örn. email türü [email protected] biçimi ister

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

Bir giriş kutusuna 'some-text' yazılıyor; fare kutudan çıkınca kenarlık kırmızıya dönerek hata gösteriyor. Fare geri dönüp sona '@gmail.com' ekliyor; bu kez çıkınca hata olmuyor

Ek kısıtlar

number türü yalnızca sayı kabul eder
- Ek olarak: min ve max sayısal sınır koyar
- text girdileri için minLength / maxLength
text türünde regex doğrulaması için pattern vardır

Sağında yukarı/aşağı okları olan küçük kutu. Tıklayınca 1 olur, sonra 0. 249 yazılır, işlem olmaz; 251 yazılınca kutu kırmızı kenarlıkla hata gösterir.

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

Girdiyi aç/kapatma

disabled ile bir girdiyi programatik olarak kapatın

required ile kullanımını zorunlu kılın

dcc.Input() içinde True/False argümanları

"A disabled input" yazılı dikdörtgen giriş kutusuna fare tıklamaya çalışır ama giremez

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

"A Required input" yazılı kutuya fare yazı girmeden girip çıkar; dışarı tıklayınca kutu kırmızı kenarlıkla hata gösterir

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

Ne zaman güncellenir

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

R, Re, Red, Redd için filtreleme

Yer tutucu metni 'Filter Product Descriptions' olan bir metin girişi. Harfler tek tek yazılırken alttaki grafik her seferinde azalır. Girilen metin R-E-D-D. Tümü yazılınca açıklama sütununda 'redd' içeren veri olmadığını gösterir.

Hadi pratik yapalım!

Dash ve Plotly ile Paneller Oluşturma