Metric
Metrics are useful for presenting key data points or numbers to users.
Last updated
Metrics are useful for presenting key data points or numbers to users.
Last updated
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.
You can customize the information displayed in the Metric component by providing the following values:
Value: This is the main, prominent number displayed in the component.
Secondary Value: Use this to show an additional number next to the primary value (useful for comparisons or supplementary data).
Description: Include a brief text description to give more context to the values shown
The Metric component can display data from various sources: enter values directly, connect to existing Salesforce records, or build custom queries for complex calculations.
The Query Data Source in the Metric component displays values calculated directly from your Salesforce data.
Here's how it works:
Define Your Query: Write a query that targets a specific Salesforce object (like the Opportunity object) and selects the field you want to work with (like the Amount field).
Apply an Aggregate Function: Choose an aggregate function (e.g., sum, average, count) to perform a calculation on the selected field. In the example, the 'sum' function would calculate the total value of all opportunities.
Connect the Query to the Metric Component: Link the query you created to the Metric component's Query Data Source.
The Avonni Metric component will now dynamically display the result of your query, providing real-time insights into your Salesforce data.
No interactions are available.
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
| Name | Description |
|---|---|
If "Show Trend Color" is activated, it overrides the related metrics' styling settings.
| Name | Type | Description |
|---|---|---|
| Name | Description |
|---|---|
| Name | Description |
|---|---|
| Name | Description |
|---|---|
| Name | Description |
|---|---|
| Name | Description |
|---|---|
| Name | Description |
|---|---|
| Name | Description |
|---|---|
| Name | Description |
|---|---|
| Name | Description |
|---|---|
This is the simplest option for displaying fixed locations. You can manually enter the latitude and longitude coordinates for each marker.
It is ideal for displaying locations that change based on data within your Salesforce flow. You can link the marker coordinates to flow variables, allowing for dynamic updates as the flow progresses.
The most versatile option lets you pull data directly from Salesforce objects. This is ideal for displaying metrics based on an aggregate function.
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.
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
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
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
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
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
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
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
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
Negative Color
Negative Background Color'
Negative Radius
Neutral Color
Neutral Background Color
Neutral Radius
Positive Color
Positive Background Color
Positive Radius
