​
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として表示します。