Streamlitを使って株価データをグラフ表示した

#Streamlitを使って株価データをグラフ表示した
StreamlitとはPandasのDataFrameやmatplotlibで作成したグラフを簡単にウェブアプリにすることが出来るサービス

株価データ取得の方法はこちら → [Seleniumを使い株価データを自動取得](https://qiita.com/morita-toyscreation/items/9fbc07c8367572e0e7f3)
株価データをBigQueryに保存する方法はこちら → [自動取得した株価データをBigQueryに保存](https://qiita.com/morita-toyscreation/items/f7ed4e71ec56fefc9f49)
[Streamlit公式サイト](https://www.streamlit.io/)

## はじめに

パッケージをインストール `pip install streamlit` 
デモを起動 `streamlit hello`

```
$ pip install streamlit
$ streamlit hello
```

サイドメニューのChoose a demo で複数タイプのデモがある
![screencapture-localhost-8501-2021-01-29-09_16_16.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/59264/f99a4b5d-66da-870a-764d-59925f96b7db.png)

## 株価を表示

###銘柄を取得
stock_list.csv に銘柄データを追加

stock_list.csv

```CSV
stock_no,name
7203,トヨタ自動車(株)
9984,ソフトバンクグループ(株)
6861,(株)キーエンス
6758,ソニー(株)
9432,日本電信電話(株)
9983,(株)ファーストリテイリング
```
Pandas DataFrameにして取得

```Python
def _get_stock_list():
    stock_list = pd.read_csv(
        os.getcwd() + "/stock_list.csv",
        thousands=",",
        engine="python",
        encoding="UTF-8",
    )
    return stock_list
```

###サイドメニューに検索を追加
selectboxで銘柄検索、date_inputで期間検索
期間検索の結果はselected_date[0]で開始期間、selected_date[1]で終了期間

```Python
...
def main():

    # サイドメニュー
    stock_list = _get_stock_list()
    stock_name = st.sidebar.selectbox(
        "銘柄検索",
        stock_list["name"].values,
    )
    stock_no = stock_list.query(f"name == '{stock_name}'").iloc[0]["stock_no"]

    min_date = datetime.now() - timedelta(days=90)
    max_date = datetime.now()
    selected_date = st.sidebar.date_input(
        "期間検索", [min_date, max_date], max_value=max_date
    )

    start_date = selected_date[0].strftime("%Y-%m-%d")
    end_date = (
        selected_date[1].strftime("%Y-%m-%d")
        if len(selected_date) == 2
        else max_date.strftime("%Y-%m-%d")
    )
```

###BigQueryに保存したデータ取得
stock_no、start_date、end_date は検索の値を使う

```Python
def _get_stock(stock_no: str, start_date: str, end_date: str):

    job_config = bigquery.QueryJobConfig(
        query_parameters=[
            bigquery.ScalarQueryParameter("start_date", "STRING", start_date),
            bigquery.ScalarQueryParameter("end_date", "STRING", end_date),
        ]
    )
    df = client.query(
        f"""SELECT * FROM `weekend-hackathon.yahoo_finance_download.{stock_no}` 
WHERE trade_at >= @start_date AND trade_at <= @end_date ORDER BY trade_at LIMIT 1000""",
        job_config,
    ).to_dataframe()

    df = df.rename(
        columns={
            "trade_at": "日付",
            "open": "始値",
            "high": "高値",
            "low": "安値",
            "close": "終値",
            "volume": "出来高",
            "adj_close": "調整後終値",
        }
    )

    return df
```

###Streamlitに描画
タイトルとDataframe、グラフを表示する
コメントはMarkDownとして画面出力できる
Dataframeは `st.write(stock_df)` とするだけでリスト表示
グラフ描画はMATLABを使うサンプルは終値を繋げた
![screencapture-localhost-8501-2021-01-30-02_14_49.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/59264/0a1866f9-8116-1187-a96c-33dcd26a17a3.png)

```Python
def main():
...
    # メイン
    f"""
    # {stock_no} {stock_name}
    """

    stock_df = _get_stock(stock_no, start_date, end_date)
    st.write(stock_df)

    x = stock_df["日付"].values
    y_count = stock_df["終値"].values

    fig = plt.figure()
    ax = fig.add_subplot(111)
    ax.plot(x, y_count)

    xfmt = mdates.DateFormatter("%m/%d")
    xloc = mdates.DayLocator(interval=math.floor(len(stock_df) / 5))

    ax.xaxis.set_major_locator(xloc)
    ax.xaxis.set_major_formatter(xfmt)
    st.write(fig)
```

##Streamlit起動

起動し対象URLにアクセスすると表示される
検索すると銘柄、期間が変更したものに更新される

```
$ streamlit run app.py
2021-01-30 02:46:47.751
  For better performance, install the Watchdog module:

  $ xcode-select --install
  $ pip install watchdog



  You can now view your Streamlit app in your browser.

  Local URL: http://localhost:8501
  Network URL: http://192.168.10.7:8501
```

やってみた感じPythonだけでいい感じに作れた
次回はStreamlitをデプロイします :beers:
いいね！と思ったら LGTM お願いします :clap::clap::clap:

【PR】週末ハッカソンというイベントやってます！ → https://weekend-hackathon.toyscreation.jp/about/

続き投稿しました :hugging:
[Streamlitで作成した株価アプリをWEB公開した（キャッシュ説明あり）](https://qiita.com/morita-toyscreation/items/c9c873bce8d54cfe5b36)