​
MetricsGrid

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

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

<Metrics
  loadData="aws_coast"
  value="cost"
  label="service"
  prefix={() => "$"}
  suffix={() => "/mo"}
  footer={(item) => (
    <span style={{ opacity: 0.5 }}>
      {`${item["usage"]["instance_type"]}`}, {item["region"]}
    </span>
  )}
/>

​
プロパティ

​
loadData
string
required

Python関数やSQLファイルの name

​
variables
{ [key: string]: any }

Python関数やSQLファイルに渡す変数。 defineState()関数 を使って宣言してください。

​
value
function | string

カード中央に表示される値を制御します。 関数を渡すとその実行結果をValueとして扱います。文字列を渡すとそれをカラム名として、カラムの値をValueとして扱います。

​
label
function | string

値の上部に表示される文字列を制御します。 関数を渡すとその実行結果をラベルとして扱います。文字列を渡すとそれをカラム名として、カラムの値をラベルとして扱います。

​
preix
function | string

Valueの左側に表示される文字列を制御します。 関数を渡すとその実行結果をPrefixとして扱います。文字列を渡すとそれをカラム名として、カラムの値をPrefixとして扱います。

​
suffix
function | string

Valueの右側に表示される文字列を制御します。 関数を渡すとその実行結果をSuffixとして扱います。文字列を渡すとそれをカラム名として、カラムの値をSuffixとして扱います。

​
footer
function

カード下部に表示される文字列を制御します。 関数を渡すとその実行結果をFooterとして表示します。

​
Metrics

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

<Metrics
  loadData="aws_coast"
  value="cost"
  label="service"
  prefix={() => "$"}
  suffix={() => "/mo"}
  footer={(item) => (
    <span style={{ opacity: 0.5 }}>
      {`${item["usage"]["instance_type"]}`}, {item["region"]}
    </span>
  )}
/>

​
プロパティ

​
loadData
string
required

Python関数やSQLファイルの name

​
variables
{ [key: string]: any }

Python関数やSQLファイルに渡す変数。 defineState()関数 を使って宣言してください。

​
value
function | string

カード中央に表示される値を制御します。 関数を渡すとその実行結果をValueとして扱います。文字列を渡すとそれをカラム名として、カラムの値をValueとして扱います。

​
label
function | string

値の上部に表示される文字列を制御します。 関数を渡すとその実行結果をラベルとして扱います。文字列を渡すとそれをカラム名として、カラムの値をラベルとして扱います。

​
preix
function | string

Valueの左側に表示される文字列を制御します。 関数を渡すとその実行結果をPrefixとして扱います。文字列を渡すとそれをカラム名として、カラムの値をPrefixとして扱います。

​
suffix
function | string

Valueの右側に表示される文字列を制御します。 関数を渡すとその実行結果をSuffixとして扱います。文字列を渡すとそれをカラム名として、カラムの値をSuffixとして扱います。

​
footer
function

カード下部に表示される文字列を制御します。 関数を渡すとその実行結果をFooterとして表示します。

<Embed /><Input />