Morphのデータを利用するには、専用のコンポーネントを用いて、Python関数やSQLファイルの name をプロパティとして渡します。

以下は、Pythonの実行結果のDataFrameをテーブル表示する例です。

index.mdx
export const name = 'index';
export const title = 'Top page';

# Top page

export const date = variable();

<VariableDatePicker type='single' variable={date}>

<div className="h-[600px] w-full">
  <DataTable 
    alias="aggregate_py" 
    variable={{ date: date }} 
    headerKeys={['date', 'new_deal_count', 'diff']}
  />
</div>

以下で、データ表示用のコンポーネントを紹介します。

​
共通のプロパティ

プロパティ型説明
aliasstringPython関数やSQLファイルの name
variables{ [key: string]: Variable }Python関数やSQLファイルに渡す変数。 variable()関数 を使って宣言してください。

​
DataTable

DataTableコンポーネントは、Python関数やSQLファイルの実行結果をテーブル表示します。

プロパティ型説明
headerKeysstring[]表示するカラムの名前。順番も指定できます。
<DataTable alias="aggregate_py" />

​
Embed (HTML, Plotly, etc.)

Embedコンポーネントは、Python関数の実行結果がHTMLの場合に、そのHTMLを表示します。

<Embed alias="plotly_py" />
プロパティ型説明
widthstring (optional)要素の幅
heightstring (optional)要素の高さ

​
Metrics

Metricsコンポーネントは、Python関数やSQLファイルの実行結果のうち、1行目の特定の行の値を表示します。

<Metrics alias="aggregate_py" valueKey="amount" />
プロパティ型説明
valueKeystring値を表示するカラム名
labelstring (optional)値の上部に表示される文字列
unitstring (optional)値の右部に表示される文字列

​
MetricsGrid

MetricsGridコンポーネントは、Python関数やSQLファイルの実行結果の各行を、Metricsコンポーネントで表示します。

表示はグリッド形式です。

<MetricsGrid alias="aggregate_py" cols="3" valueKey="amount" labelKey="name" />
プロパティ型説明
colsnumberグリッドの列数
valueKeystring値を表示するカラム名
labelstring (optional)値の上部に表示される文字列
labelKeystring (optional)値の上部に表示される文字列をデータの中から取得したい場合、そのカラム名
unitstring (optional)値の右部に表示される文字列

​
コンポーネントを用いずにデータを表示する

コンポーネントを使わずに、Python関数やSQLファイルの実行結果を表示するには、getJson 関数と value 関数を使ってください。


# Employee Data

export const employeeData = getJson({
  alias: 'employee_list_py',
}));

## We have {value(employeeData).length} employees.

getJson 関数はMDXファイル内で、Python関数やSQLファイルの実行結果を取得するために使います。この返り値は単なるオブジェクトではないため、value 関数を使って値を取り出してください。

​
どう使う？

たとえば、Pythonファイルから従業員のリストを返却し、それをセレクトボックスに表示し、選択された従業員のIDをvariableとしてDataTableに渡したい場合があります。

その場合、以下のように記述します。


# Employee Detail

export const employees = getJson({
  alias: 'employee_list_py',
});
export const selectedEmployee = variable();

<VariableSelect variable={selectedEmployee}>
  <VariableSelectItems items={employee} />
</VaraibleSelect>

## Work log

<DataTable alias="work_log_py" variables={{ employee_id: selectedEmployee }} />