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

Configuring the Metric component

Adding Data to the Metric Component

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

Connect Salesforce Data

The Metric component can display data from various sources: enter values directly, connect to existing Salesforce records, or build custom queries for complex calculations.

Manual

• How it works: You directly type in the specific values you want to display (Value, Secondary Value, Description) within the component's settings.

• Best for: Static data that doesn't change frequently or when you don't want to tie the data to your Salesforce records.

Mapped

• How it works: You connect the component's fields (Value, Secondary Value, Description) to variables or outputs from actions within your flow.

• Best for: Displaying data generated or manipulated during the flow's execution. This data might not be permanently stored in a Salesforce object but is crucial for the current process.

Query

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.

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.

Specifications

🎛️ Attributes

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.

🎨 Styling

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