Links

Metric

Metrics are useful for presenting key data points or numbers to users.

Overview

The Metric component displays a numerical value or metric, along with a label or title that provides context for the value. It is often used to convey essential or key performance indicators (KPIs) visually and easily digestibly.

Tutorials

Name
Description
Illustration
🎥 Video Introduction​
In this step-by-step tutorial, discover the power and simplicity of the Avonni Metric Component​
​
​

Changing the Properties

Entering Values

The Metric component works with data you can add. You can add data for:
  • Value: Value of the primary metric.
  • Secondary Value: If present, a secondary number will be displayed to the right of the primary one.
  • Description: Additional text to display below the label.

Adding dynamic data

Instead of typing data manually, you can use dynamic data from your flow by using the Mapped information.

Adding Interactions

No interactions are available.

Styling the Metric

From the Styles panel, you can customize styling attributes for the Metric component:
  • Label: to customize the label that is displayed on top of the data.
  • Description: to customize the additional text that is displayed below the label.
  • Value: to customize the look and feel of each item text.
  • Prefix: if any, customize the style of the Prefix metric.
  • Suffix: if any, customize the style of the Suffic metric.
  • Secondary Value: if any, customize the style of the Secondary Value
  • Secondary Prefix: if any, customize the style of the Secondary Prefix
  • Trend: to customize trend colors
  • Secondary Trend: to customize secondary trend colors
If "Show Trend Color" is activated, it overrides the related metrics' styling settings.
​
You can find the instructions for styling here.

Specifications

🎛️ Attributes
🎨 Styling
Name
Type
Description
avatar
MetricAvatar
Avatar object.
currencyCode
String
Only used if format-style="currency", this attribute determines which currency is displayed. Possible values are the ISO 4217 currency codes, such as USD for the US dollar.
currencyDisplayAs
String
Determines how currency is displayed. Possible values are symbol, code, and name.
description
String
Additional text to display below the label.
formatStyle
String
The number formatting style to use. Possible values are decimal, currency, percent, and percent-fixed. This value defaults to decimal.
label
String
Label of the metric. If present, it will be displayed on top of the data.
maximumFractionDigits
Integer
The maximum number of fraction digits that are allowed.
maximumSignificantDigits
Integer
The maximum number of significant digits that are allowed. Possible values are from 1 to 21.
minimumFractionDigits
Integer
The minimum number of fraction digits that are required.
minimumIntegerDigits
Integer
The minimum number of integer digits that are required. Possible values are from 1 to 21.
minimumSignificantDigits
Integer
The minimum number of significant digits that are required. Possible values are from 1 to 21.
prefix
String
Text to display before the primary value.
secondaryCurrencyCode
String
Only used if secondary-format-style="currency", this attribute determines which currency is displayed. Possible values are the ISO 4217 currency codes, such as USD for the US dollar.
secondaryCurrencyDisplayAs
String
Determines how currency is displayed. Possible values are symbol, code, and name. This value defaults to symbol.
secondaryFormatStyle
String
The formatting style to use for the secondary value. Possible values are decimal, currency, percent, and percent-fixed.
secondaryMaximumFractionDigits
Integer
The maximum number of fraction digits that are allowed.
secondaryMaximumSignificantDigits
Integer
The maximum number of significant digits that are allowed. Possible values are from 1 to 21.
secondaryMinimumFractionDigits
Integer
The minimum number of fraction digits that are required.
secondaryMinimumIntegerDigits
Integer
The minimum number of integer digits that are required. Possible values are from 1 to 21.
secondaryMinimumSignificantDigits
Integer
The minimum number of significant digits that are required. Possible values are from 1 to 21.
secondaryPrefix
String
Text to display before the secondary value.
secondaryShowTrendColor
Boolean
If present, the secondary value will change color and background depending on the trend direction.
secondarySuffix
String
Text to display after the secondary value.
secondaryTrendBreakpointValue
Integer
Number at which the secondary value will be considered neutral. Works in association with secondary-trend-icon and secondary-show-trend-color.
secondaryTrendIcon
String
Type of icon indicating the trend direction of the secondary value. Valid values include dynamic, arrow and caret.
secondaryValue
Integer
If present, a secondary number will be displayed to the right of the primary one.
secondaryValueSign
String
Determine what signs are allowed to be displayed in front of the secondary value, to indicate that it is positive or negative.
showTrendColor
Boolean
If present, the value will change color depending on the trend direction.
suffix
String
Text to display after the primary value.
tooltip
String
Text to display when the user mouses over the value.
trendBreakpointValue
Integer
Number at which the value will be considered neutral. Works in association with trend-icon and show-trend-color.
trendIcon
String
Type of icon indicating the trend direction of the value. Valid values include dynamic, arrow and caret.
value
Integer
Value of the primary metric.
valueSign
String
Determine what signs are allowed to be displayed in front of the value, to indicate that it is positive or negative.
​

Label

Name
Description
Text Color
Define the text color for the label
Font Size
Define the text color for the label
Font Style
Define the text color for the label
Font Weight
Define the text color for the label

Description

Name
Description
Text Color
Define the text color for the description
Font Size
Define the font size for the description
Font Style
Define the font style for the description
Font Weight
Define the font weight for the description

Value

Name
Description
Text Color
Define the text color for the value
Font Size
Define the font size for the value
Font Style
Define the font style for the value
Font Weight
Define the font weight for the value

Prefix

Name
Description
Text Color
Define the text color for the prefix
Font Size
Define the font size for the prefix
Font Style
Define the font style for the prefix
Font Weight
Define the font weight for the prefix

Suffix

Name
Description
Text Color
Define the text color for the suffix
Font Size
Define the font size for the suffix
Font Style
Define the font style for the suffix
Font Weight
Define the font weight for the suffix

Secondary Value

Name
Description
Text Color
Define the text color for the secondary value
Font Size
Define the font size for the secondary value
Font Style
Define the font style for the secondary value
Font Weight
Define the font weight for the secondary value

Secondary Prefix

Name
Description
Text Color
Define the text color for the secondary prefix
Font Size
Define the font size for the secondary prefix
Font Style
Define the font style for the secondary prefix
Font Weight
Define the font weight for the secondary prefix

Trend

Name
Description
Negative Color
Define the negative color for the trend
Neutral Color
Define the neutral color for the trend
Positive Color
Define the positive color for the trend

Secondary Trend

Name
Description
Negative Color
​
Negative Background Color'
​
Negative Radius
​
Neutral Color
​
Neutral Background Color
​
Neutral Radius
​
Positive Color
​
Positive Background Color
​
Positive Radius
​
​
Last modified 1mo ago