# Metric

*** ## Tutorials


Introduction 101 [VIDEO]	https://flow.avonnicomponents.com/tutorials/components/metric/introduction	modern (26).png
Building a Dynamic Map with reactive metrics	Dynamic Map	image (20).avif
Build a Reactive Metrics Dashboard using the Avonni Metric and Data Table [VIDEO]	https://youtu.be/sRtkMi2Mmqg	modern (25).png
Build a user activity report	User Activity Report	Design sans titre (52).png

*** ## 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 primary, prominent number displayed in the component. * **Secondary Value:** Use this to show an additional number following 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.

Name	Description
Manual	This is the simplest option for displaying fixed locations. You can manually enter the latitude and longitude coordinates for each marker.
Variable	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.
Query	The most versatile option lets you pull data directly from Salesforce objects. This is ideal for displaying metrics based on an aggregate function.

#### Query Data Source configuration 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 The Avonni Metric component supports interactions on both the primary and secondary metrics. This lets you make your metrics more dynamic and user-friendly by letting users take action directly from the metrics. Here's how you can add interactions: 1. **Select the Metric:** Choose the primary or secondary metric within your Avonni Metric component. 2. **Configure the Interaction:** In the properties panel, you'll find a new section for configuring interactions. 3. **Choose an Action:** Select the type of action you want to trigger. Options may include: * **Navigate to Page:** Redirect the user to a specific page within your application. * **Open Flow:** Launch another flow to provide more detailed information or to guide the user through a process. * **And More:** Explore the options to find the best fit for your use case.

*** ## 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 {% hint style="info" %} If "Show Trend Color" is activated, it overrides the related metrics' styling settings.

{% endhint %} ***