variable()関数は v0.1.0 で廃止されました。より柔軟で広範な用途に対応した、 defineState() 関数を使用してください。

Morphでは、Python関数やSQLファイルの中で変数を定義することができますが、MDXファイルから実行する場合にも変数を利用することができます。

Python, SQLファイル中での変数の利用については、変数の使い方を参照してください。

variable 関数

変数の宣言には variable を使用してください。

variableの型は、 string | undefined です。

const dateRangeStart = variable(undefined);
const dateRangeEnd = variable(undefined);

コンポーネントに渡す

コンポーネントに渡す際には、オブジェクト形式で、PythonまたはSQLファイル内での変数名をキーとして渡してください。

以下の例では、Pythonファイル中で start_date と end_date を変数として利用しているため、それらをキーとして渡しています。

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

# Stock prices with dates

export const dateRangeStart = variable(undefined);
export const dateRangeEnd = variable(undefined);

<Grid cols="1">
  <VariableDatePicker
    type="range"
    variables={[
      dateRangeStart,
      dateRangeEnd
    ]}
  />
  <div className="h-[600px] w-full">
    <DataTable
      alias="stocks"
      variables={{
        start_date: dateRangeStart,
        end_date: dateRangeEnd
      }}
    />
  </div>
</Grid>