StreamlitとGridDBを用いたS&P 500ダッシュボードの構築

ダッシュボードは、企業業績の包括的なスナップショットです。ダッシュボードの性質は動的であるため、パフォーマンスの任意の領域をクリックし、「ドリルダウン」して詳細を確認することができます。ダッシュボードの機能は、データウェアハウスで収集されたすべてのデータ、つまり主要業績評価指標（KPI）を集約して価値を抽出し、信頼性の高い結果を提供することです。こうすることで、技術者でないユーザーでもデータを理解しやすくなるのです。ここでは、StreamlitとGridDBを使って、ダッシュボードのWebアプリを構築することにします。Streamlitを使えば、データスクリプトを数分で共有可能なWebアプリにすることができます。

最初のステップとして、S&P500データの簡単なスクレイパーを作成します。ティッカーシンボルを取得した後、結果のリストはPythonのyfinanceライブラリから株価データを取得するために使用します。最後に、両方の機能を組み合わせたウェブアプリを作成します。

チュートリアルの概要は以下の通りです

1. 前提条件と環境設定
2. データセット概要
3. 必要なライブラリのインポート
4. データセットの読み込み
5. ダッシュボードの構築
6. まとめ

前提条件と環境設定

このプロジェクトでは、Streamlit をインストールし、Python クライアントと共に GridDB をインストールする必要があります。チュートリアルを続ける前に、以下のパッケージがインストールされている必要があります。

1. Pandas
2. matplotlib
3. griddb_python
4. Streamlit
5. seaborn
6. numpy
7. yfinance

これらのパッケージは Conda の仮想環境に conda install package-name を使ってインストールすることができます。ターミナルやコマンドプロンプトから直接Pythonを使っている場合は、 pip install package-name でインストールできます。

GridDBのインストール

このチュートリアルでは、データセットをロードする際に、GridDB を使用する方法と、Pandas を使用する方法の 2 種類を取り上げます。Pythonを使用してGridDBにアクセスするためには、以下のパッケージも予めインストールしておく必要があります。

1. GridDB Cクライアント
2. SWIG (Simplified Wrapper and Interface Generator)
3. GridDB Pythonクライアント

データセット概要

S&P 500は、S&P Dow Jones Indicesによって管理されている株式市場のインデックスです。アメリカの証券取引所で取引されている大型企業500社が発行する普通株式504銘柄で構成されています。S&P 500と呼ばれていますが、構成銘柄のうち5社はデュアル・クラス・ストックのため、505銘柄で構成されています。

使用したデータは、以下の2つのリンク(https://en.wikipedia.org/wiki/List_of_S%26P_500_companies)と(https://pypi.org/project/yfinance/)から入手できます。

必要なライブラリとデータセットのインポート

import griddb_python as griddb
import streamlit as st
import pandas as pd
import base64
import matplotlib.pyplot as plt
import seaborn as sns
import numpy as np
import yfinance as yf
st.set_option('deprecation.showPyplotGlobalUse', False)

2022-04-25 14:04:27.637 INFO    numexpr.utils: Note: NumExpr detected 12 cores but "NUMEXPR_MAX_THREADS" not set, so enforcing safe limit of 8.
2022-04-25 14:04:27.663 INFO    numexpr.utils: NumExpr defaulting to 8 threads.

データセットの読み込み

ここで、GridDBサーバにデータをロードする必要があります。CSVファイルから直接読み込むことも可能ですが、GridDBのハイブリッドインメモリアーキテクチャを活用することで、アプリケーションの高速化を図ることができます。また、必要なデータをデータフレームにロードすることで、クエリのパフォーマンスを向上させることができます。

GridDBを利用する

GridDB™は、IoTやビッグデータに最適な高スケーラブルNoSQLデータベースです。GridDBの理念の根幹は、IoTに最適化された汎用性の高いデータストアの提供、高いスケーラビリティ、高性能なチューニング、高い信頼性の確保にあります。

大量のデータを保存する場合、CSVファイルでは面倒なことがあります。GridDBは、オープンソースでスケーラブルなデータベースとして、完璧な代替手段となっています。GridDBは、スケーラブルでインメモリなNoSQLデータベースで、大量のデータを簡単に保存することができます。GridDBを初めて使う場合は、「GridDB上でPandasのデータフレームを使用する」のチュートリアルが役に立ちます。

まず、すべてのデータ（CSV形式）をGridDBサーバにロードします。CSVからdataframeオブジェクトに直接読み込むこともできますが、GridDBのハイブリッドインメモリアーキテクチャにより、まずデータベースに読み込むことでアプリケーションの速度が大幅に向上します。

factory = griddb.StoreFactory.get_instance()

# Initialize the GridDB container (enter your database credentials)
try:
    gridstore = factory.get_store(host=host_name, port=your_port, 
            cluster_name=cluster_name, username=admin, 
            password=admin)

    info = griddb.ContainerInfo("S&P500",
                    [["Symbol", griddb.Type.STRING],["Security", griddb.Type.STRING],[" SEC filings", griddb.Type.STRING],
                     ["GICS Sector", griddb.Type.STRING],["GICS Sub-Industry", griddb.Type.STRING],
                     ["Headquarters Location", griddb.Type.STRING],["Date first added", griddb.Type.TIMESTAMP]
                     ["CIK",griddb.Type.INTEGER]], ["Founded",griddb.Type.INTEGER]],
                    griddb.ContainerType.COLLECTION, True)
    cont = gridstore.put_container(info) 


sql_statement = ('SELECT * FROM S&P500')
dataset = pd.read_sql_query(sql_statement, cont)

cont変数には、データが格納されるコンテナ情報が格納されていることに注意してください。S&P500 をコンテナ名で置き換えてください。詳細はチュートリアル「GridDB上でPandasのデータフレームを使用する」に記載されています。

IoTやビッグデータのユースケースに関して言えば、GridDBはリレーショナルやNoSQLの領域の他のデータベースの中で明らかに際立っています。全体として、GridDBは高可用性とデータ保持を必要とするミッションクリティカルなアプリケーションのために、複数の信頼性機能を提供しています。

Pandasを使ったread_html

Pythonでは、ファイルを開くことによって、そのファイルにアクセスできるようにする必要があります。これはopen()関数を用いて行うことができます。open()はファイルオブジェクトを返し、そのオブジェクトは開かれたファイルに関する情報を取得し、操作するためのメソッドと属性を持っています。データをロードした後、csv形式のファイルをダウンロードします。

# @st.cache
def load_data():
    url = 'https://en.wikipedia.org/wiki/List_of_S%26P_500_companies'
    html = pd.read_html(url, header = 0)
    df = html[0]
    return df

df = load_data()
sector = df.groupby('GICS Sector')

# Sidebar - Sector selection
sorted_sector_unique = sorted( df['GICS Sector'].unique() )
selected_sector = st.sidebar.multiselect('Sector', sorted_sector_unique, sorted_sector_unique)

# Filtering data
df_selected_sector = df[ (df['GICS Sector'].isin(selected_sector)) ]

# Download S&P500 data
# https://discuss.streamlit.io/t/how-to-download-file-in-streamlit/1806
def filedownload(df):
    csv = df.to_csv(index=False)
    b64 = base64.b64encode(csv.encode()).decode()  # strings <-> bytes conversions
    href = f'<a href="data:file/csv;base64,{b64}" download="SP500.csv">Download CSV File</a>'
    return href

st.markdown(filedownload(df_selected_sector), unsafe_allow_html=True)

DeltaGenerator(_root_container=0, _provided_cursor=None, _parent=None, _block_type=None, _form_data=None)

# https://pypi.org/project/yfinance/

data = yf.download(
        tickers = list(df_selected_sector[:10].Symbol),
        period = "ytd",
        interval = "1d",
        group_by = 'ticker',
        auto_adjust = True,
        prepost = True,
        threads = True,
        proxy = None
    )

[*********************100%***********************]  10 of 10 completed

df.head()

データセットが読み込まれたら、次はそのデータセットを調べてみましょう。head() 関数を使って、このデータセットの最初の5行を表示してみましょう。

data.head()

ダッシュボードの構築

Streamlitを使えば、様々な方法でアプリにテキストを追加することができます。以下はその一例です。私たちのダッシュボードでは、Markdownを使って小さな段落や書き込みも追加していきます。

# Dashboard Title and paragraphs
st.title('S&P 500 Dashboard | Streamlit & GridDB')

st.markdown("""
This Streamlit App made using the power of GridDB retrieves the list of the **S&P 500** and its corresponding **stock closing price**.
* **Data source:** [Wikipedia](https://en.wikipedia.org/wiki/List_of_S%26P_500_companies) and [Yahoo finance library] (https://pypi.org/project/yfinance/).
""")

ドロップダウンでは、シリーズから選択するために st.selectbox を使用します。欲しいオプションを書き込んだり、配列やデータフレームのカラムを渡したりすることができます。

st.header('Display Companies in Selected Sector')
st.write('Data Dimension: ' + str(df_selected_sector.shape[0]) + ' rows and ' + str(df_selected_sector.shape[1]) + ' columns.')
st.dataframe(df_selected_sector)

Streamlit がサポートしているデータチャートライブラリには、Matplotlib、Altair、Plotly などの有名なものがあります。私たちのダッシュボードでは、Matplotlibを使用します。

また、Streamlit の外観をすっきりさせるサイドバーがあり、アプリをページの左側に配置したまま、すべてのウィジェットをそこに移動させることができます。state サイドバー用のウィジェットと、st.sidebar を使ってドロップダウン・フィルターを作ってみましょう。

以下は、株価の終値データをよく見るために必要な折れ線グラフのコードです。

# Plot Closing Price of Query Symbol
def price_plot(symbol):
  df = pd.DataFrame(data[symbol].Close)
  df['Date'] = df.index
  plt.fill_between(df.Date, df.Close, color='red', alpha=0.3)
  plt.plot(df.Date, df.Close, color='red', alpha=0.8 )
  plt.xticks(rotation=45)
  plt.title(symbol, fontweight='normal')
  plt.xlabel('Date', fontweight='normal')
  plt.ylabel('Closing Price', fontweight='normal')
  return st.pyplot()

num_company = st.sidebar.slider('Number of Companies', 1, 5)

if st.button('Show Plots'):
    st.header('Stock Closing Price')
    for i in list(df_selected_sector.Symbol)[:num_company]:
        price_plot(i)

さて、これでコードの作成は終了です。ターミナルを開いて main.py があるパスに移動し、コマンドラインで次のように入力して Streamlit ウェブサーバを起動します。

streamlit run main.py

デフォルトでは、ポート番号8501で実行されます。ブラウザを開き、このURL http://localhost:8501 をクリックすると、ブラウザ上でダッシュボードが表示されます。

結論

このチュートリアルでは、GridDBとStreamlitの力を使って、素晴らしいダッシュボードを作りました。データをインポートする方法として、(1) GridDB と (2) Pandas read_html の2つを検討しました。GridDBはオープンソースで拡張性が高いので、大きなデータセットの場合、ノートブックにデータをインポートするための優れた代替手段を提供します。

ブログの内容について疑問や質問がある場合は Q&A サイトである Stack Overflow に質問を投稿しましょう。 GridDB 開発者やエンジニアから速やかな回答が得られるようにするためにも "griddb" タグをつけることをお忘れなく。 https://stackoverflow.com/questions/ask?tags=griddb