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")

입력 사용하기

입력은 파이썬 변수로 전달됩니다
콜백과 함께 사용됩니다

# @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'을 추가하면, 밖으로 나가도 오류가 나지 않습니다

추가 제한 사항

number 타입은 숫자만 허용합니다
- 추가로: min, max로 수치 범위를 설정
- text 입력에는 minLength / maxLength
text 타입은 정규식 검증을 위한 pattern도 있습니다

오른쪽에 위아래 토글 버튼이 있는 작은 상자. 클릭하여 1로 만들고, 아래쪽을 눌러 0이 됩니다. 249를 입력하면 변화 없고, 251을 입력하면 빨간 테두리로 오류 표시가 나타납니다.

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

입력 토글하기

disabled로 입력을 프로그램matically 비활성화

required로 필수로 지정

dcc.Input()의 True/False 인자입니다

마우스가 클릭하려 해도 클릭되지 않는 비활성화된 입력 상자. 상자 안 텍스트는 "A disabled input"

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

마우스가 클릭 후 아무 텍스트도 입력하지 않고 나가면 빨간 테두리로 오류가 표시되는 필수 입력 상자. 상자 안 텍스트는 "A Required input"

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이며, 모두 입력되면 해당 텍스트를 포함한 데이터가 없어집니다.

연습해 봅시다!

Dash와 Plotly로 대시보드 만들기