StreamlitでPandasをインタラクティブに操作

はじめに

PandasをインタラクティブにStrimlitで操作するstreamlit-aggridのモジュールの解説記事を見つけました。StreamlitAgGridコンポーネントを使用する必要がある7つの理由の記事の補足説明です。

参考

Stremlit公式

全般的な使い方

streamlit勉強会【オンライン】

20210215_streamlit勉強会

いろいろな使い方（streamlit-aggridの紹介あり）

Streamlitの使い方の細かいところ

環境

windows 10

python3.8

anaconda

必要モジュール（私の場合は、できるだけcondaでインストール）

streamlit、pandas、plotly、plotly_express、streamlit-aggrid

conda install -c conda-forge streamlit plotly

pip install streamlit-aggrid plotly_express

起動・停止方法

起動：streamlit run ファイル名.py

デフォルトでは 8501 ポートで Streamlit のアプリケーションサーバが起動する。

open http://localhost:8501

停止：ctl + c

コード

StreamlitAgGridコンポーネントを使用する必要がある7つの理由の記事の補足説明です。

使われているデータのダウンロードについては、netflix_titles.csvと検索するといくつか出てきますが、

こちらのサイトのデータを利用しました。

https://github.com/prasertcbs/basic-dataset/blob/master/netflix_titles.csv

コードはこちらに上げています。https://github.com/SGyutan/streamlit_aggrid

（1）スクロール、列の並べ替え、検索、フィルタリング

このCSVデータをpandasで読み込み、インタラクティブに操作するコードです。 Webページにある（aggrid_1-py）の補足

Pandasのデータフレームのスクロール、列の並べ替え、検索、フィルタリングが可能です。

# tut_1.py
import pandas as pd 
import streamlit as st 
from st_aggrid import AgGrid

st.set_page_config(page_title="Netflix Shows", layout="wide") 
st.title("Netlix shows analysis")

# csvが保存されているパスを指定する
shows = pd.read_csv("netflix_titles.csv")  

AgGrid(shows)

（2）ページによる操作

レコードのスクロールをページ付けにするコード。表の右下にページを変える矢印が付きます。Webページ（aggrid_4-py）の補足。

# tut_2.py
import pandas as pd
import streamlit as st
from st_aggrid import AgGrid
from st_aggrid.grid_options_builder import GridOptionsBuilder

st.set_page_config(page_title="Netflix Shows", layout="wide") 
st.title("Netlix shows analysis")

shows = pd.read_csv("netflix_titles.csv")

# ---
gb = GridOptionsBuilder.from_dataframe(shows)
gb.configure_pagination()
gridOptions = gb.build()

AgGrid(shows, gridOptions=gridOptions)

（3）列の固定、グループ化、集計

列を固定、グループ化、および集約するコード。データフレームの右端に、列のフィルタリング、ピボットテーブルの実行、またはグループ化と集計（平均または合計）操作に使用できるサイドバーが付きます。Webページ（aggrid_5-py）の補足。

# tut_3.py
import pandas as pd
import streamlit as st
from st_aggrid import AgGrid
from st_aggrid.grid_options_builder import GridOptionsBuilder

st.set_page_config(page_title="Netflix Shows", layout="wide") 
st.title("Netlix shows analysis")

shows = pd.read_csv("netflix_titles.csv")
gb = GridOptionsBuilder.from_dataframe(shows)

# ---
gb.configure_pagination()
gb.configure_side_bar()
gb.configure_default_column(groupable=True, value=True, enableRowGroup=True, aggFunc="sum", editable=True)
gridOptions = gb.build()

AgGrid(shows, gridOptions=gridOptions, enable_enterprise_modules=True)

（4）セルの強調、スタイル設定

セルの値に応じてスタイルを設定するコード。country値に「UnitedStates」が含まれている場合に列の背景色を変更して、アメリカのテレビ番組や映画番組を強調表示します。Webページ（aggrid_6-py）の補足。

参考にしたWebページでは変更された場所のみ記載されているので、ここでは省略せずに記載します。

# tut_4.py
import pandas as pd
import streamlit as st
from st_aggrid import AgGrid
from st_aggrid.grid_options_builder import GridOptionsBuilder

# add
from st_aggrid.shared import JsCode

st.set_page_config(page_title="Netflix Shows", layout="wide") 
st.title("Netlix shows analysis")

shows = pd.read_csv("netflix_titles.csv")
gb = GridOptionsBuilder.from_dataframe(shows)

# ---

cellsytle_jscode = JsCode(
    """
function(params) {
    if (params.value.includes('United States')) {
        return {
            'color': 'white',
            'backgroundColor': 'darkred'
        }
    } else {
        return {
            'color': 'black',
            'backgroundColor': 'white'
        }
    }
};
"""
)

gb.configure_column("country", cellStyle=cellsytle_jscode)

gridOptions = gb.build()

data = AgGrid(
    shows,
    gridOptions=gridOptions,
    enable_enterprise_modules=True,
    allow_unsafe_jscode=True
)

（5）1行または複数行の選択と選択行の追加処理

列の並べ替え、1行または複数行のチェックボックスのチェック、手動での値の変更などをキャプチャして、Streamlitアプリのグローバルレイアウトを変更することができます。(aggrid_7_1.py 、aggrid_7_2.py )

1つまたは複数の行が選択すると、選択した行の内容が表の下に出力されます。

# tut_5.py
import pandas as pd
import streamlit as st
from st_aggrid import AgGrid
from st_aggrid.grid_options_builder import GridOptionsBuilder
#add
from st_aggrid.shared import GridUpdateMode

st.set_page_config(page_title="Netflix Shows", layout="wide") 
st.title("Netlix shows analysis")

shows = pd.read_csv("netflix_titles.csv")
gb = GridOptionsBuilder.from_dataframe(shows)

# ---
gb.configure_selection(selection_mode="multiple", use_checkbox=True)

gridOptions = gb.build()


data = AgGrid(shows, 
              gridOptions=gridOptions, 
              enable_enterprise_modules=True, 
              allow_unsafe_jscode=True, 
              update_mode=GridUpdateMode.SELECTION_CHANGED)

st.write(data["selected_rows"])

複数の行を選択し、新しい行を選択するたびに、番組の種類（映画/テレビ番組）ごとにグループ化された番組の評価の更新されたヒストグラムが表示されます。

# tut_6.py
import pandas as pd
import streamlit as st
from st_aggrid import AgGrid
from st_aggrid.grid_options_builder import GridOptionsBuilder
#add
from st_aggrid.shared import GridUpdateMode

st.set_page_config(page_title="Netflix Shows", layout="wide") 
st.title("Netlix shows analysis")

shows = pd.read_csv("netflix_titles.csv")
gb = GridOptionsBuilder.from_dataframe(shows)

# ---
gb.configure_selection(selection_mode="multiple", use_checkbox=True)

gridOptions = gb.build()


data = AgGrid(shows, 
              gridOptions=gridOptions, 
              enable_enterprise_modules=True, 
              allow_unsafe_jscode=True, 
              update_mode=GridUpdateMode.SELECTION_CHANGED)

# st.write(data["selected_rows"])

# add
import plotly_express as px

selected_rows = data["selected_rows"]
selected_rows = pd.DataFrame(selected_rows)

if len(selected_rows) != 0:
    fig = px.bar(selected_rows, "rating", color="type")
    st.plotly_chart(fig)

感想・まとめ

streamlit-aggridは、Streamlit内でPandasのDataFrameをインタラクティブに扱えます。ここにあるプログラムを参考に、自分なりのデータベース検索Webアプリを作ってみようと思います。

公式ページの[Components](Components • Streamlit)に有用なモジュールが紹介されています。