241010

import streamlit as st
import pandas as pd
from datetime import datetime
import altair as alt
import plotly.express as px


# 1. text
st.header('1. text')

st.title('Title')
st.header('Header')
st.subheader('Subheader')
st.text('Text')
st.markdown('**markdown_진하게**')
st.markdown('_markdown_기울임_')

# code: 코드블록
st.code('x = 1234')

# latex: 수식을 시각적으로 표현
st.latex(r'a+ar+ar^2')

df = pd.DataFrame({'first column': [1, 2, 3, 4],
                   'second column': [10, 20, 30, 40]})
st.write('Below is a DataFrame:', df, 'Above is a dataframe.')



# 2. media
st.header('2. media')

# caption: 간단한 텍스트 설명
st.caption('Caption')
st.audio('MusicSample.mp3')
st.video('VideoSample.mp4')



# 3. data
st.header('3. data')

# metric: 측정항목 - label = 타이틀, value = 값, delta = 변동값
st.metric(label = 'Temperature', value = '25C', delta = '-2.5C')

# columns: 여러 metric을 같이 표시
col1, col2, col3 = st.columns(3)
col1.metric(label = '기온', value = '25C', delta = '2.5C')
col2.metric(label = '풍속', value = '9mph', delta = '-8%')
col3.metric(label = '습도', value = '86%', delta = '4%')

# table: 고정 형태 테이블(스크롤바 없음)
df = pd.read_csv('https://raw.githubusercontent.com/huhshin/streamlit/master/data_titanic.csv')
st.table(df.head())

# data_editor: 데이터프레임 수정
edited_df = st.data_editor(df)
st.write(edited_df)



# 4-1 input
st.header('4-1 input')

# link_button: 누르면 링크 연결
st.link_button('Widget Link', 'https://docs.streamlit.io/library/api-reference/widgets')

# radio: 라디오 버튼
genre = st.radio('좋아하는 영화 장르를 선택하세요', ('코미디', 'SF', '액션'))
if genre == '코미디':
    st.write('유쾌')
elif genre == 'SF':
    st.write('저도 좋아합니다')
else:
    st.write('멋지십니다')

# button
if st.button('Say hello'):
    st.write('hi')
else:
    st.write('bye')

# checkbox
agree = st.checkbox('i agree')
if agree:
    st.write(':)')

# toggle
on = st.toggle('activate feature')
if on:
    st.write('on!')

# selectbox
option = st.selectbox('어떻게 연락드릴까요?', ['Email', 'Mobile', 'Office'])
st.write('네', option, '알겠습니다')

# multiselect: 초기값 설정 가능
color = st.multiselect('좋아하는 색깔은',['green', 'yellow', 'red', 'blue'],  ['yellow', 'red'])
st.write('좋아하는 색은', ', '.join(color), '입니다')

# text_input
text = st.text_input('최애영화 입력', 'sound of music')
st.write(text)

# number_input: 최소 최대 초기값 step 설정
num = st.number_input('숫자입력하세요', min_value = 1, max_value = 10, value = 5, step =1)
st.write('current number is', num)

# date_input: 초기값 설정
ymd = st.date_input('when is your birthday', datetime(2000,9,6))
st.write('당신의 생일은', ymd)


# chat_input: 채팅 어플리케이션
prompt = st.chat_input('say something')
if prompt:
    st.write(f'user has sent the following prompt: {prompt}')




# 4-2. input
st.header('4-2 input')

# slider: 최소 최대 초기값 설정
age = st.slider('나이가 어떻게 되세요?', 0, 130, 25)
st.write('my age', age)

date = st.slider('날짜 구간 입력', datetime(2022,6,1), datetime(2022, 7,31))
st.write(date)

# 날짜구간 데이터 조회
slider_date = st.slider('날짜 구간 선택하세요.', datetime(2021,1,1), datetime(2021,12,31), value = (datetime(2021, 7, 1), datetime(2021, 7, 31)))
seoul = pd.read_csv('data_subway_in_seoul.csv', encoding = 'cp949')
seoul['날짜'] = pd.to_datetime(seoul['날짜'], format = '%Y-%m-%d')
seoul.loc[seoul['날짜'].between(slider_date[0], slider_date[1])]



# 5. layout
st.header('5. layout')

# sidebar (with로 코드 가독성 높일 수 있음)
with st.sidebar:
    st.header('Sidebar')
    how_contact = st.selectbox('어떻게 연락 드릴까요?', ['Email', 'Mobile phone', 'Office phone'])
    st.write('선택한 연락 방법은', how_contact)


col1, col2, col3 = st.columns(3)
with col1:
    st.text('A cat')
    st.image('https://images.pexels.com/photos/2071873/pexels-photo-2071873.jpeg?auto=compress&cs=tinysrgb')

with col2:
    st.text('A dog')
    st.image('https://images.pexels.com/photos/3361739/pexels-photo-3361739.jpeg?auto=compress&cs=tinysrgb')

with col3:
    st.text('A owl')
    st.image('https://images.pexels.com/photos/3737300/pexels-photo-3737300.jpeg?auto=compress&cs=tinysrgb')


# tabs
tab1, tab2, tab3 = st.tabs(['고양이', '개', '올빼미'])
with tab1:
    st.caption('A cat')
    st.image('https://images.pexels.com/photos/2071873/pexels-photo-2071873.jpeg?auto=compress&cs=tinysrgb', width = 200)

with tab2:
    st.caption('A dog')
    st.image('https://images.pexels.com/photos/3361739/pexels-photo-3361739.jpeg?auto=compress&cs=tinysrgb', width = 200)

with tab3:
    st.caption('A owl')
    st.image('https://images.pexels.com/photos/3737300/pexels-photo-3737300.jpeg?auto=compress&cs=tinysrgb', width = 200)


# 페이지 선언
def main_page():
    st.title('Main page')
    st.sidebar.title('side main')

def page2():
    st.header('Page 2')
    st.text('Setosa')
    st.image('https://m.media-amazon.com/images/I/61pLvdbjC7L._AC_.jpg')

    st.text('Versicolor')
    st.image('https://upload.wikimedia.org/wikipedia/commons/2/27/Blue_Flag%2C_Ottawa.jpg')

    st.text('Virginica')
    st.image('https://upload.wikimedia.org/wikipedia/commons/thumb/f/f8/Iris_virginica_2.jpg/1920px-Iris_virginica_2.jpg')

def page3():
    st.header('Page 3')
    st.header('Setosa')
    st.image('https://m.media-amazon.com/images/I/61pLvdbjC7L._AC_.jpg', width=500)       

    st.header('Versicolor')
    st.image('https://upload.wikimedia.org/wikipedia/commons/2/27/Blue_Flag%2C_Ottawa.jpg', width=500)      

    st.header('Virginica')
    st.image('https://upload.wikimedia.org/wikipedia/commons/thumb/f/f8/Iris_virginica_2.jpg/1920px-Iris_virginica_2.jpg', width=500)   


page_names_to_funcs = {"Main Page": main_page, "Page 2": page2, "Page 3": page3}
selected_page = st.sidebar.selectbox('select a page', page_names_to_funcs.keys())
page_names_to_funcs[selected_page]()


# 6-2. chart

chart_data = pd.read_csv('https://raw.githubusercontent.com/huhshin/streamlit/master/data_sales.csv')

# line_chart
st.line_chart(chart_data)

# bar_chart
st.bar_chart(chart_data)


# altair chart: mark_line, mark_bar, mark_circle...
df = pd.read_csv('https://raw.githubusercontent.com/huhshin/streamlit/master/data_retail.csv')
df_melted = pd.melt(df, id_vars = ['date'], var_name = 'teams', value_name = 'sales')

chart = alt.Chart(df_melted, title = '일별팀매출비교').mark_line().encode(
    x = 'date', y = 'sales', color = 'teams', strokeDash = 'teams').properties(width = 650, height = 350)