Plotlyを用いた高度なダッシュボードアプリ構築
Morphでは入力フォームなどを伴う動的なダッシュボードアプリをカスタマイズして作成することができます。 このチュートリアルでは、入力フォームから受け取った値に応じてPlotlyのチャートをフィルタリングして表示するアプリケーションを作成します。
事前準備
このチュートリアルでは、事前に以下のコマンドを使用してパッケージをインストールしてください。
最終的な成果物
チュートリアル
ユーザーの入力によって表示内容を切り替える動的なアプリケーションを作成するためには、MDXファイルで入力フォームを作成して、その値をPython関数に渡す必要があります。
Python関数ではcontext.vars
を使用して入力フォームに入力された値を受け取り、返却するチャートのデータをフィルタリングします。
このチュートリアルでは、上記に加えて入力フォームの選択肢をSQLを使用して取得をする方法も紹介しています。
ここでは、以下の2つの関数を作成しています。
generate_population_data
: チュートリアルに使用するデータを生成しています。本番環境ではこの関数部分でデータを取得しすることができます。また、この関数はSQLファイルに代替することもできるため、SQLファイルでデータベースからデータを取得して使用することもできます。filter_plotly_chart
:generate_population_data
で生成されたデータをフィルタリングして、Plotlyのチャートを返却する関数です。
PlotlyとMatplotlibは、MorphのライブラリでFigureとして返却をすることで<Embed />
で使用できるように自動的にHTMLに変換をします。
ここでは、以下の2つの関数を作成しています。
generate_population_data
: チュートリアルに使用するデータを生成しています。本番環境ではこの関数部分でデータを取得しすることができます。また、この関数はSQLファイルに代替することもできるため、SQLファイルでデータベースからデータを取得して使用することもできます。filter_plotly_chart
:generate_population_data
で生成されたデータをフィルタリングして、Plotlyのチャートを返却する関数です。
PlotlyとMatplotlibは、MorphのライブラリでFigureとして返却をすることで<Embed />
で使用できるように自動的にHTMLに変換をします。
このSQLでは、generate_population_data
で生成されたデータを使用して、filter_plotly_chart
で使用する選択肢を取得しています。
他のSQL, Python, MDXのload_data
では、nameで指定されているget_state_list
を使用して結果にアクセスをすることができます。
Python, SQLで作成した関数を使用してダッシュボードを作成します。
defineState()
関数によって、ページ内で利用できる状態を宣言することができます。
dateStart
,dateEnd
: 選択された日付の範囲です。state
: 選択肢の中で選択されたstateの値です。
<DataTable />
, <Embed />
を使用して元データとチャートを表示しています。
variables
を使用することによって入力フォームで選択された値をPython関数に渡しています。