TEJ API 遇上STREAMLIT App

Photo by Carlos Muza on Unsplash

前言

在之前的教學中,我們已經學會如何創建自己的 TEJAPI 資料庫,詳細資料可以參考這篇文章,接下來這篇文章將用利用 TEJAPI 資料庫串聯 STREAMLIT 套件將資料視覺化,並利用套件中的選擇日期、下拉式選單、勾選資料、數據滑桿來與資料做連動,使資料變成可以互動的 APP。

本文重點概要

  • 文章難度:★★☆☆☆
  • STREAMLIT APP 視覺化應用

STREAMLIT 簡介

STREAMLIT 是一個在 2018 年誕生的 python 套件,它有許多內建工具提供使用者進行操作,由下方範例顯示,左側的控制台可以針對右側dashboard進行設置,工具包含下拉式選項、滑桿…種種工具讓使用者可以自由編排、調整版面,輕鬆完成一個小型的 APP 專案,更多工具可以參考以下網站,接下來將以實作展示如何使用 Streamlit 套件結合 TEJ API 達成視覺化應用。

連結任意門:STREAMLIT官網

STREAMLIT APP範例畫面
STREAMLIT APP範例畫面

套件導入

本文使用 Windows 並以 VScode 作為編輯器

# STREAMLIT套件
import streamlit as st
# 可以互動的PLOT套件
import plotly.graph_objects as go
# 設置日期格式的套件
import datetime
from datetime import datetime as dt
from datetime import timedelta
import tejapi
# 登入TEJ API
tejapi.ApiConfig.api_key = "your_key"
#把時間取消保留日期 (無視)
tejapi.ApiConfig.ignoretz = True

資料庫使用

左側的 sidebar 與 小工具設置

接下來就要開始設置左側的 sidebar 跟 小工具了,我們將會分為5個區塊做說明。

sidebar說明圖示
sidebar說明圖示
  1. 第一區塊 sidebar版面

使用with st.sidebar:將整個框架設置出來

with st.sidebar:

2. 第二區塊 標題設置

使用st.title將標題呈現出來

st.title('TEJAPI股票學習')

3. 第三區塊 日期選取工具

日期選取工具
日期選取工具

我們先設置左右的 “col1”、“col2” 並放在一個 columns 中,使用 with 去設置 col1 中的內容 ,在使用 st.data_input 工具將日期選取工具叫出來並設置裡面的參數。

col1, col2 = st.columns(2)
with col1:
# 將股票起使日期設置為變數d1
d1 = st.date_input(
"股票起始日期",
# 並將預設資料設定為2022年的1/1
datetime.date(2022, 1, 1))
with col2:
# 將股票起使日期設置為變數d2
d2= st.date_input(
"股票結束日期",
datetime.date(2023, 2, 3))

4. 第四區塊 下拉式選項

下拉式選項範例
下拉式選項範例

接著設置下拉式選項,並讓它可以呈現所有股票的代碼,本次使用的資料庫為交易資料-股價資料,鎖定資料庫後並利用 date 套件將我們要撈取的 TEJAPI 資料內建的 “mdate” 日期指定在昨天,並使用 “opts” 參數,將資料的欄位設定為股票代碼,再將股票代碼那一欄的資料轉換成 list 資料並放入st.selectboc 中,使所有股票代碼成為下拉式選項中的選項。再來將選取到的股票資料設定為 “stock_code” 變數。

#輸入股價
# 使用date套件的date獲取今天日期資料
current_date = dt.now().date()
# 使用date套件的timedelta獲取昨天的日期資料
previous_date = current_date - timedelta(days=1)
data = tejapi.get('TWN/APIPRCD',
mdate=previous_date,
opts={'columns':['coid']},
paginate=True)
coids = data['coid'].tolist()
stock_code = st.selectbox('選擇股票代碼', data)
st.write('你選擇股票是: ', stock_code)

再將剛剛設定的 “d1”、“d2”、“stock_code” 放到我們篩選 TEJAPI 股票資料的變數中,下面介紹到右邊的股票圖表時就會用到這筆新的資料了。

stock_id = {stock_code}
gte, lte = {d1}, {d2}
tejdata= tejapi.get('TWN/APIPRCD',
paginate = True,
coid = stock_id,
mdate = {'gte':gte, 'lte':lte},
chinese_column_name=True
)
df = tejdata
df.reset_index(drop=True, inplace=True)

5. 第五區塊 checkbox 以及 slider 進度條

checkbox、slider進度條應用
checkbox、slider進度條應用

這邊將 st.checkbox 設定為變數 EMA1_checked,這個變數將會連動到圖表上面的 EMA 短線的開關,在下方右圖圖表呈現那塊會說明到。slider 的部分使用將 EMA 參數設置為 1~31 並將預設的參數設定為 7

# 預設選取 checkbox,並將結果儲存到變數 is_checked 中
EMA1_checked = st.checkbox("發散指標(EMA1)(短線)", value=True,key="EMA1")
# Add a slider to the sidebar:
slider1 = st.sidebar.slider(
'設置EMA1參數',
1, 31, 7
)
EMA2_checked = st.checkbox("發散指標(EMA2)(長線)", value=True,key='EMA2')
# Add a slider to the sidebar:
slider2 = st.sidebar.slider(
'設置EMA2參數',
1, 31, 21
)

右側圖表呈現與EMA參數設置

接下來我們將介紹 APP 的右半部分,圖表以及資料庫的呈現。這次分為三大區塊去進行說明。

右側圖表說明範例圖
右側圖表說明範例圖

1. 第一區塊 標題設置

這邊 st.title 可以設置 title ,同時使用 write 將設置空一行

st.title('🌐STREAMLIT股票資料EMA應用')
st.write("")

2. 第二區塊 圖表呈現、EMA 計算

這裡首先要使用 plotly.graph_objects 這個套件將整個圖表的框架框出,使呈現的圖表可以設定縮放功能。
df[‘EMA1’] 的部分就是將左邊 slider 進度條的數值輸入 EMA 計算中,並使用 IF 判斷式 來設定斷觸發條件,當左邊的進度條被選取時, EMA (短線) 的走勢曲線就會呈現出來,同理我們可以將此應用用到 EMA (長線) 的走勢曲線中,最後加上標題以及 X、Y 軸名稱。

fig = go.Figure()
# 根據 slider 的值來計算 EMA,並加入到圖表中
df['EMA1'] = df['收盤價'].ewm(span=slider1, adjust=False).mean()
df['EMA2'] = df['收盤價'].ewm(span=slider2, adjust=False).mean()


# 如果 checkbox 被選取,則畫出 EMA1 的線
if EMA1_checked:
    fig.add_trace(go.Scatter(x=df['資料日'], y=df['EMA1'],
                             mode='lines',
                             name=f'EMA{slider1}'))

if EMA2_checked:
    fig.add_trace(go.Scatter(x=df['資料日'], y=df['EMA2'],
                             mode='lines',
                             name=f'EMA{slider2}'))   

fig.add_trace(go.Scatter(x=df['資料日'], y=df['收盤價'],
                    mode='lines',
                    name='收盤價'))


fig.update_layout(
    title=f"{stock_code} 股票價格走勢圖",
    xaxis_title="股票時間",
    yaxis_title="股票價格",
    legend_title="指標",
    autosize=True
)
st.plotly_chart(fig, use_container_width=True)

3. 第三區塊 下拉式分頁、資料庫的呈現

expander、資料表呈現
expander、資料表呈現

我們可以使用下拉式選單 st.expander 使資料表收合、設置函式將資料表轉換成 csv 檔、利用 st.download_button 下載檔案。

with st.expander("🌐點此查看股票資料"):
        
        st.dataframe(df, height=500)
        @st.cache_data
        def convert_df(df):
            # IMPORTANT: Cache the conversion to prevent computation on every rerun
            return df.to_csv().encode("utf-8")
        csv = convert_df(df)

        st.download_button(
            label="點此下載資料範例",
            data=csv,
            file_name="股價資料.csv",
            mime="text/csv",
        )

開啟STREAMLIT

設定完成後,我們可以藉由終端機來啟動 STREAMLIT 專案,透過在終端機輸入 streamlit run app.py 即可執行。

streamlit run app.py

結語

本次實作使用 STREAMLIT 套件,讓 TEJAPI 的資料庫能夠以互動式 APP 的方式呈現數據,增進與使用者的互動。讀者在實作時也可以去 STREAMLIT 的官網中找取其他小工具加入自己的程式中。此外 ,TEJ API 提供廣泛的臺灣企業和金融市場相關資料,包括財務、股票、基金、宏觀經濟、產業等領域,並提供專業報告和研究,幫助公司研究、投資決策和市場預測。

溫馨提醒,本次介紹與標的僅供參考,不代表任何商品或投資上的建議。之後也會介紹使用 TEJ 資料庫來建構各式選擇權模型,所以歡迎對選擇權交易有興趣的讀者,選購 TEJ E-Shop 的相關方案,用高品質的資料庫,建構出適合自己的訂價模型。

完整程式碼

延伸閱讀

相關連結

返回總覽頁
Procesing