Dash कंपोनेंट्स में उपयोगकर्ता इनपुट

Dash और Plotly के साथ डैशबोर्ड बनाना

Alex Scriven

Data Scientist

यूज़र इनपुट क्यों?

उपयोगकर्ता इनपुट के कुछ काम के उपयोग:

बड़े नंबर रेंज पर फ़िल्टरिंग (number इनपुट)
- सोचिए, 2000 'year' वैल्यू वाला एक dropdown!
टेक्स्ट-मैचिंग पर फ़िल्टरिंग (search या text इनपुट)
लॉगिन बनाना (password और email/text इनपुट)

Dash में यूज़र इनपुट

यूज़र इनपुट, dash core components का Input टाइप है (dcc.Input)

callback इंटीग्रेशन के लिए id ज़रूरी है
type डिफॉल्ट रूप से text होता है
placeholder धुंधला गाइडेंस टेक्स्ट दिखाता है

काले बॉर्डर वाला एक छोटा आयत, जिसके अंदर धुंधले ग्रे टेक्स्ट में "Enter your text"

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

इनपुट का उपयोग

इनपुट एक Python वैरिएबल बन जाता है
callback के साथ उपयोग होता है

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

यूज़र इनपुट टाइप्स

कुछ सीधे-सादे हैं: 'text', 'number', 'password', 'email'
कुछ ज्यादा स्पेशलाइज़्ड हैं:
- 'range' एक रेंज स्लाइडर देता है
- 'tel' और 'url' टेलीफोन नंबर और वेबसाइट URLs के लिए हैं
कुछ एडवांस्ड हैं:
- 'search' और 'hidden' में एडवांस्ड ब्राउज़र इंटरैक्शन होता है

यूज़र इनपुट सीमित करना

type आर्ग्युमेंट अपने-आप कुछ सीमाएँ सेट करता है.

जैसे, email टाइप में [email protected] फ़ॉर्मेट चाहिए

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

एक GIF जिसमें इनपुट टेक्स्टबॉक्स में 'some-text' टाइप किया जाता है और माउस बाहर जाते ही बॉक्स लाल हो जाता है, जो त्रुटि दिखाता है. फिर '@gmail.com' जोड़ने पर बाहर जाने पर त्रुटि नहीं आती

अतिरिक्त प्रतिबंध

number टाइप में सिर्फ नंबर मान्य होते हैं
- अतिरिक्त रूप से: min और max संख्यात्मक सीमा सेट करते हैं
- text इनपुट के लिए minLength / maxLength
text टाइप में regex वैलिडेशन के लिए pattern भी होता है

एक GIF: दाईं ओर ऊपर/नीचे टॉगल वाले छोटे बॉक्स में क्लिक कर 1 बनता है, फिर नीचे करके 0. 249 टाइप करने पर कुछ नहीं, 251 टाइप करने पर लाल बॉर्डर से त्रुटि दिखती है.

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

इनपुट टॉगल करना

disabled से प्रोग्रामेटिकली इनपुट बंद करें

required से इसका उपयोग अनिवार्य करें

dcc.Input() के True/False आर्ग्युमेंट्स

एक GIF: आयताकार इनपुट बॉक्स जिसमें माउस क्लिक नहीं कर पाता. बॉक्स के अंदर टेक्स्ट है "A disabled input"

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

एक GIF: आयताकार इनपुट बॉक्स में बिना टेक्स्ट डाले क्लिक-आउट करने पर लाल बॉक्स से त्रुटि दिखती है. अंदर लिखा है "A Required input"

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

कब अपडेट करें

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

R, Re, Red, Redd पर फ़िल्टरिंग

एक GIF: टेक्स्ट इनपुट जिसका placeholder 'Filter Product Descriptions' है. अक्षर एक-एक कर टाइप होते हैं और नीचे का ग्राफ़ हर बार घटता है. टाइप हुआ टेक्स्ट R-E-D-D है. अंत में कोई डेटा नहीं दिखता, यानी 'redd' वाला विवरण मौजूद नहीं.

अभ्यास करते हैं!

Dash और Plotly के साथ डैशबोर्ड बनाना