<Metrics />

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.