Dash コンポーネントでのユーザー入力

Dash と Plotly で作るダッシュボード

Alex Scriven

Data Scientist

なぜユーザー入力か

ユーザー入力の活用例:

大きな数値範囲でのフィルタリング（number）
- 例: 年が2000項目あるドロップダウンは非効率
文字列一致でのフィルタ（search または text）
ログイン作成（password と email/text）

Dash のユーザー入力

ユーザー入力は Dash Core Components の Input 型（dcc.Input）です

コールバック連携には id が必須
type の既定値は text
placeholder は薄いガイダンス文字列を表示

黒枠の長方形に薄い灰色で「Enter your text」とある小さな画像

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

入力の利用

入力は Python 変数になる
コールバックで使用

# @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' は電話番号とウェブサイト URL 用
上級:
- 'search'、'hidden' は高度なブラウザ連携

入力の制限

type 引数は自動で制約を設定します。

例: email は [email protected] 形式が必須

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

入力ボックスに「some-text」と入力しフォーカスを外すと赤枠でエラー表示。再度入り「@gmail.com」を追記すると、フォーカスを外してもエラーにならない GIF

追加の制約

number は数値のみ許可
- さらに min と max で数値範囲を設定
- text 入力には minLength / maxLength
text には正規表現の pattern も利用可

小さな数値入力で上下矢印をクリックして1、その後0。249は受理、251で赤枠エラーになる GIF

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

入力の有効/無効切替

disabled で入力をプログラム的に無効化

required で必須化

いずれも dcc.Input() の True/False 引数

「A disabled input」と表示された入力にクリックできない GIF

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

「A Required input」と表示された入力で未入力のまま外すと赤枠エラーになる GIF

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

更新のタイミング

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

R、Re、Red、Redd で逐次フィルタ

プレースホルダーが「Filter Product Descriptions」のテキスト入力。R-E-D-D と一文字ずつ入力するたびに下のグラフのデータが減り、最終的に一致がなくなる GIF

Lass uns üben!

Dash と Plotly で作るダッシュボード