#30DaysOfStreamlit Day27 Streamlit Elements を使用してドラッグ可能でサイズ変更可能なダッシュボードを構築する

はじめに

この記事では、#30DaysOfStreamlitの内容の紹介を行います。
#30DaysOfStreamlitについてはコチラの記事を参照してください。

Streamlit Elementsとは

Streamlit Elementsとは、okld氏によって作成されたサードパーティ コンポーネントであり、マテリアル UI ウィジェット、Monaco エディター (Visual Studio Code)、Nivo チャートなどを備えた美しいアプリケーションやダッシュボードを作成するためのツールを提供します。

導入方法

何はともあれ、ライブラリをインストールしてみます。
コマンドは以下の通り。

詳細な利用方法に関しては、こちらを参照してください。

構築する目標

今回は、3つのマテリアルUIカードで構成されるダッシュボードを作成していきます。
3つのマテリアルUIカードの内容としては、以下の通りです。

• データを編集する為のMonaco コード エディター
• Nivoバンプチャート
• st.text_inputで入力したYoutubeのビデオURLをプレイヤー形式で表示

バンプチャートに利用するデータはコチラからダウンロードしました。

アプリケーションの構築

下記のようなPythonスクリプトを準備します。

上記のスクリプトを起動させると下記のような画面が展開されます。

各カードは縦横の調整が可能です。(アプリケーション内でのマウス操作で調整可能)

コードの解説

必要なライブラリをインポートします。

Streamlit Elementsでは、上記でインポートしたオブジェクトがあれば構築できます。
詳細な利用方法については、こちらの記事を参照してください。

続いて、レイアウトをワイドに変更して、サイドバー上にYoutubeのURLを記入できるウィジェットを追加します。

続いて利用するデータをセッションデータに保存しておきます。
後にデータエディタで編集後にセッションデータを利用してグラフにリアルタイムに描画できるようにするためです。

ここで、各レイアウトを定義します。 ダッシュボードに各アイテムを配置しています。 dashboad.Item()の引数としては下記のような意味合いを持ちます。

• 第一引数：Itemのタグ
• 第二引数：Itemのx軸
• 第三引数：Itemのy軸
• 第四引数：Itemの幅
• 第五引数：Itemの高さ

streamlit-elementsでのページを作成していきます。
まずは、elements()でページ全体の要素を作成しています。
さらにその下のwith句で子要素をdashboad.Grid()作成します。
この時に先ほど定義したレイアウトを読み込みdraggableHandleを”.draggable”とすることでその下の子要素のドラッグ操作を可能にしています。
この時、draggableHandleに設定した文字列を子要素のclassNameに設定することでドラッグ操作が可能になります。

ここからは、表示する各要素の作成を行います。 まずは、グラフが参照するデータを編集するカードを作成します。

各要素をカードで表示したいので、mui.Card()で宣言します。
この時にlayoutで定義したItemのタグをkeyに指定します。

続いてカードのヘッダーを設定します。
この時にmui.CardHeader()を使い、classNameをdraggableに設定します。

その後、カードに表示したい要素をmui.CardContent()を使い呼び出したwith句配下に記述します。 ここでは、データを編集させる機能を実装するので、editor.Monaco()を配置します。
この時、onChange引数に対して、sync()でstreamlitのセッション状態のデータを同期させ、lazy()を利用することで次に実装するデータの適用ボタンが押されるまで変更を遅延させます。

続いてこのカードでのアクションをmui.CardActionsを使い設定します。 CardActions配下には、mui.Button()を配置してonClickにsync()を配置することでデータの適用を行えるようにします。

次にデータを読み込んでグラフを表示するカードを作成します。
データエディタを作成した時と同様にmui.Card()を使い定義し、その後mui.CardHeader()とmui.CardContent()を定義します。

カードの中身を作成します。
今回はBumpグラフのため、nivo.bump()を利用します。 設定内容の詳細はこちらをご覧ください。

最後にメディアプレイヤーのカードを作成します。
カードの作成に関しては、これまでと同様です。
mui.CardContent()配下にmedia.Player()を配置します。 urlに関しては、サイドバーで設定したmedia_urlを設定します。