こんにちはkirigayaです
morhpを触っていると多くのエラーに遭遇します...
jsに慣れてないのとstreamlitに慣れすぎてしまった影響かもしれない
pythonで関数を定義しmdxファイルで呼ぶだけだと思ってた...
mdxファイル
export const title = "plotly chart";
import { defineState } from "@morph-data/components";
<div className="p-4 border border-gray-300 rounded-lg shadow-md">
<Grid cols="2">
<div>
<DataTable loadData="generate_data" />
</div>
<div>
<Embed
loadData="plot_step_chart"
height={400}
/>
</div>
</Grid>
</div>
pyファイル
mport numpy as np
import pandas as pd
import plotly.express as px
import morph
from morph import MorphGlobalContext
@morph.func(name="generate_data")
def generate_data():
# サンプルデータの作成
data = {
"x": [1, 2, 3, 4, 5],
"y": [10, 20, 15, 25, 30]
}
df = pd.DataFrame(data)
return df
@morph.func(name="plot_step_chart")
@morph.load_data("generate_data")
def plot_step_chart():
"""Plotlyでステップ関数のラインチャートを作成し、Figureを返す"""
# Plotly Express でステップ関数をプロット
fig = px.line(df, x="x", y="y", markers=True, title="ステップ関数のラインチャート")
# ステップ関数の形状に変更 (hv: 水平→垂直)
fig.update_traces(line_shape="hv")
return fig
このコードでは以下のエラーが発生する
GUI上では
テーブルデータの表示部分はこれ
チャート表示部分はこれ
それでは解決していきます
参考になったドキュメント
エラーの原因は@morph.funcでデコレートされたgenerate_data()関数が引数なしで定義されているのに、実行時に1つの引数が渡されているためです。
Morphの@morph.funcは内部的に関数を呼び出す際にコンテキスト情報(context)を引数として渡す 仕様になっています。そのため、generate_data()の定義でcontext を引数に追加する必要があります。
def generate_data(context: MorphGlobalContext)に修正します。これで正常にテーブルデータが表示されます！
次にチャートの表示部分を修正します
参考になったドキュメント
データフレームをMorphGlobalContextから取得するようにします
context.data["generate_data"]は@morph.func(name="generate_data")で指定しているものを使います
さらにfrom morph_lib.types import HtmlResponseを使ってfigオブジェクトをhtmlに変換します。これでチャートが正常に表示されます
from morph_lib.types import HtmlResponse
@morph.func(name="plot_step_chart")
@morph.load_data("generate_data")
def plot_step_chart(context: MorphGlobalContext):
"""Plotlyでステップ関数のラインチャートを作成し、htmlを返す"""
df = context.data["generate_data"]
# Plotly Express でステップ関数をプロット
fig = px.line(df, x="x", y="y", markers=True, title="ステップ関数のラインチャート")
# ステップ関数の形状に変更 (hv: 水平→垂直)
fig.update_traces(line_shape="hv")
return HtmlResponse(fig.to_html())
またエラーに遭遇したら記事にしようと思います...
Discussion