Skip to main content

​
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.
⌘I