Metric

The Avonni Metric displays numerical values with labels to provide context for key metrics and performance indicators .

Setting Up Your Metric

The Avonni Metric component allows you to display key performance indicators (KPIs) and other essential metrics in a visually engaging and informative way. To build your metric, you'll need to connect it to a data source and configure how that data is displayed.

1. Connect Your Data

The Avonni Metric component is all about showcasing important numbers and data clearly and visually appealingly. To get started, you must provide the actual values you want to display.

• Value: This is the star of the show – the main number you want to highlight. It could be anything from a sales total to the number of open cases or website visits. Ensure this value accurately represents the key metric you are tracking.

• Secondary Value: Consider this a supporting role. It's a great way to add context to your main value. You can use it to show a comparison (such as last year's sales), a related metric (like profit margin), or a target value.

• Description: Sometimes numbers need a little explanation. Use the description field to add a brief, informative text that clarifies the values. For example, you could specify the time the data covers or the units in which the numbers are expressed.

2. Connect to Your Data Source

Now that you know what you want to display, it's time to tell the Metric component where to get the data. Avonni offers flexible options to connect to various sources:

Manual

Enter data directly into the component configuration. This is suitable for small, static datasetsta.

Variable

Use a variable as your data source. This is useful for data that changes based on user interactions or other component logic.

Query

Fetch data directly from Salesforce using a query. This is the most common option for displaying Salesforce records.

3. Configure the Query Data Source (if applicable)

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.

Style the Metric

Make your metrics visually appealing and on-brand with Avonni's styling options:

• Label: Customize the font, size, color, and alignment of the label text.

• Description: Style the description text to complement the overall design.

• Value: Control the appearance of the primary and secondary values, including their font, size, color, and any prefixes or suffixes you want to add.

• Trend: If you display trends (like percentage increase or decrease), you can customize the colors used to represent positive and negative trends.