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 |
---|---|---|
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 ValueSecondary Prefix
: if any, customize the style of the Secondary PrefixTrend
: to customize trend colorsSecondary Trend
: to customize secondary trend colors
Specifications
Name | Type | Description |
---|---|---|
avatar | MetricAvatar | Avatar object. |
currencyCode | String | Only used if |
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 |
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 |
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 |
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. |
Last updated