# Metric

## **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:

### **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.

{% @arcade/embed flowId="bN4fRigPBuqjBV09DpeI" url="<https://app.arcade.software/share/bN4fRigPBuqjBV09DpeI>" %}

## **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.