Streamlit - 웹 대시보드에서 상호작용 버튼 만들기

# Streamlit 상호작용 하는 버튼 이용하기

웹에서는 로그인을 위해 사용하는 로그인 버튼이나,

주소 입력시 여러 지역 중 내 거주 지역을 선택하는 등등 많은 것들의 기능이 있습니다.

이번 포스팅에서는 웹에서 활용 할 수 있는 버튼들을 다룹니다.

---

설명보다는 눈으로 보고 이해하는게 빠를 것 같으니 바로 소스코드와 실행화면과 함께 출력

# Visual Studio Code에서 Streamlit 상호작용 버튼 이용하기

라이브러리 호출 및 CSV파일 데이터프레임화

import streamlit as st
import pandas as pd

df = pd.read_csv('data2/iris.csv')

 

버튼

• 버튼을 누를시 정해진 작업 수행
• .button('버튼이름')
  • 예시) 버튼을 누를시 특정 컬럼의 문자열을 대문자로 변경해보기

if st.button('대문자') :
    st.write(df['species'].str.upper().head(3))

 

라디오 버튼

• 여러 선택지 중에 하나를 선택하여 선택된 작업 수행
• .radio('보여줄 메시지', '선택지1, 선택지2...')
  • 예시) 라디오 버튼으로 특정컬럼을 이용하여 오름차순, 내림차순 정렬 해보기

my_order = ['오름차순', '내림차순'] #라디오 버튼에 보여줄 텍스트
status = st.radio('정렬방법선택', my_order) # 라디오 버튼의 상태 변수화

if status == my_order[0] : # 첫번째 선택시 오름차순
    st.write(df.sort_values('petal_length'))
elif status == my_order[1] : # 두번째 선택시 내림차순
    st.write(df.sort_values('petal_length', ascending=False))

 

체크 박스

• 체크와 체크를 해제 할 수 있게 하여 예/아니오 상황만으로 작업 수행
• .checkbox('보여줄 메시지')
  • 예시) 체크박스 체크시 데이터프레임 헤드 5개 보여주기
            해제시 헤드를 숨겼다고 텍스트 출력하기

if st.checkbox('헤드 5개 보기'):
    st.write(df.head())
else :
    st.text('헤드를 숨겼습니다.')

 

셀렉트 박스

• 여러개의 목록을 보여주고 그 중 하나를 선택, 선택된 작업 수행
• .selectbox('보여줄 메시지', '리스트1, 리스트2...')
  • 예시) 목록 중에서 하나 선택하면 그에 따른 메시지 출력하기

language = ['Python', 'C', 'Java', 'Go', 'PHP']
my_choice = st.selectbox('좋아하는 언어 선택', language)
if my_choice == language[0] :
    st.write("파이썬 선택")
# 이후 생략

 

멀티 셀렉트

• 여러개의 목록에서 하나 이상을 선택
• .multiselect('보여줄 메시지', '리스트1, 리스트2...')
  • 예시) 데이터프레임의 컬럼을 목록화하여 보고싶은 컬럼 선택하여 보기

columns_list = df.columns #데이터프레임의 컬럼명을 저장
choice_list = st.multiselect('컬럼을 선택하세요', columns_list)
st.write( df[choice_list] )

 

슬라이더

• 숫자를 조정하는데 주로 사용, 조정된 숫자로 작업 수행
• .slider('보여줄 메시지', 시작값, 끝값, 기본값, 단위값)
  • 예시) 1부터 120까지 나이를 조정할 수 있게 하고, 기본값은 30, 1씩 이동

age = st.slider('나이', 1, 120, 30, 10) # 시작값, 끝값, 기본값, 스텝
st.text('제가 선택한 나이는 {}입니다.'.format(age))

<드래그를 통하여 값 1씩 증감, 값 변경>

 

사이드 바

• 화면 왼쪽에 프레임을 나누어 따로 표기
• .sidebar ~ : 왼쪽 프레임에서 할 행동 표시
• 오른쪽 프레임에 표시하고 싶은데 능력이 모자란건지 홈페이지에서도 못찾겠음
  https://docs.streamlit.io/
  • 예시) 새로운 왼쪽 프레임에 안녕하세요와 버튼 생성하기

st.sidebar.text('안녕하세요')
st.sidebar.button('버튼')

 

익스팬더

• 활성화시 숨겨져 있던 정해진 작업을 수행 (확장 개념, =더보기 느낌)
• .expander('보여줄 메시지')
  • 'hello' 문구 출력시 데이터프레임의 헤드 5개 출력

with st.expander('Hello') :
     st.text('변경')
     st.write(df)