​
MetricsGrid

The MetricsGrid component displays each row of the execution results of Python functions or SQL files using the Metrics component.

The display is in grid format.

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

​
Properties

​
loadData
string
required

The name of the Python function or SQL file

​
variables
{ [key: string]: any }

Variables to pass to the Python function or SQL file. Declare them using the defineState() function.

​
value
function | string

Controls the value displayed in the center of the card. If a function is passed, its execution result is treated as the Value. If a string is passed, it is treated as the column name, and the column value is treated as the Value.

​
label
function | string

Controls the string displayed above the value. If a function is passed, its execution result is treated as the label. If a string is passed, it is treated as the column name, and the column value is treated as the label.

​
preix
function | string

Controls the string displayed to the left of the Value. If a function is passed, its execution result is treated as the Prefix. If a string is passed, it is treated as the column name, and the column value is treated as the Prefix.

​
suffix
function | string

Controls the string displayed to the right of the Value. If a function is passed, its execution result is treated as the Suffix. If a string is passed, it is treated as the column name, and the column value is treated as the Suffix.

​
footer
function

Controls the string displayed at the bottom of the card. If a function is passed, its execution result is displayed as the Footer.

​
Metrics

The Metrics component displays the value of a specific column from the first row of the execution results of Python functions or SQL files.

<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>
  )}
/>

​
Properties

​
loadData
string
required

The name of the Python function or SQL file

​
varialbes
{ [key: string]: any }

Variables to pass to the Python function or SQL file. Declare using the defineState() function.

​
value
function | string

Controls the value displayed in the center of the card. If a function is passed, its execution result is treated as the Value. If a string is passed, it is treated as the column name, and the column value is treated as the Value.

​
label
function | string

Controls the string displayed above the value. If a function is passed, its execution result is treated as the label. If a string is passed, it is treated as the column name, and the column value is treated as the label.

​
preix
function | string

Controls the string displayed to the left of the Value. If a function is passed, its execution result is treated as the Prefix. If a string is passed, it is treated as the column name, and the column value is treated as the Prefix.

​
suffix
function | string

Controls the string displayed to the right of the Value. If a function is passed, its execution result is treated as the Suffix. If a string is passed, it is treated as the column name, and the column value is treated as the Suffix.

​
footer
function

Controls the string displayed at the bottom of the card. If a function is passed, its execution result is displayed as the Footer.

<Embed /><Input />