# Metric

## Overview

The Metric component can be utilized to present and visualize analytics data.

<figure><img src="https://837703843-files.gitbook.io/~/files/v0/b/gitbook-x-prod.appspot.com/o/spaces%2FUX6zPRMFFK0yrTghj7cY%2Fuploads%2Fxg7WXubhTewfRAFSbJ9A%2FCleanShot%202025-08-05%20at%2013.56.32%402x-min.png?alt=media&#x26;token=87e737a2-71b5-4250-89b2-69ccee33bd86" alt=""><figcaption></figcaption></figure>

### Properties

<table><thead><tr><th width="122.921875">Name</th><th>Type</th><th>Description</th></tr></thead><tbody><tr><td><code>name</code></td><td><code>string</code></td><td>Component name</td></tr><tr><td><code>value</code></td><td><code>{ main: any; additional: any }</code></td><td>Computed metric's value</td></tr></tbody></table>

### Methods

<table><thead><tr><th width="92.85546875">Name</th><th width="228.34765625">Parameters</th><th width="104.390625">Returns</th><th>Description</th></tr></thead><tbody><tr><td><code>setData</code></td><td><code>data: object | object[]</code></td><td><code>void</code></td><td>Set component data. Data is an object or array of objects with arbitrary structure.</td></tr></tbody></table>

### Triggers

<table><thead><tr><th width="184.5546875">Name</th><th>Description</th></tr></thead><tbody><tr><td><strong>On Init</strong></td><td>Triggered when the component is initialized</td></tr></tbody></table>

## Working with the component

### Accessing calculated metric value

Using metrics, you can calculate a sum or count of any specific values you need. You can also use the metric value in other fields for further calculations - you can refer to it as `{{ui.metric.value.main}}` or `{{ui.metric.value.additional}}`, depending on which value you need to use.

Let's say you have a metric that displays the amount of logged hours for each employee and their hourly rate. You also want to have a separate field to display the salary of each employee based on the metric data. Here's how you can do that:

1. Add a *Text* component to the canvas.
2. In the component's *Value* property, specify the following formula to calculate the salary:

`{{ui.employeesMetric.value.main*ui.employeesMetric.value.additional}}`&#x20;

{% hint style="info" %}
`{{ui.employeesMetric.value.main}}` is the **main** field of the metric representing the amount of logged hours.

`{{ui.employeesMetric.value.additional}}` is the **additional** field of the metric representing the hourly rate.
{% endhint %}

As a result, you will get the required amount representing the employee's salary.

<figure><img src="https://837703843-files.gitbook.io/~/files/v0/b/gitbook-x-prod.appspot.com/o/spaces%2FUX6zPRMFFK0yrTghj7cY%2Fuploads%2FJx68u26EnzJ4JnXAh7Xs%2FCleanShot%202025-08-05%20at%2016.34.03%402x-min.png?alt=media&#x26;token=ffa206f6-45ac-44db-8d68-49757cda40c6" alt=""><figcaption></figcaption></figure>


---

# Agent Instructions: Querying This Documentation

If you need additional information that is not directly available in this page, you can query the documentation dynamically by asking a question.

Perform an HTTP GET request on the current page URL with the `ask` query parameter:

```
GET https://docs.uibakery.io/reference/working-with-components/metric.md?ask=<question>
```

The question should be specific, self-contained, and written in natural language.
The response will contain a direct answer to the question and relevant excerpts and sources from the documentation.

Use this mechanism when the answer is not explicitly present in the current page, you need clarification or additional context, or you want to retrieve related documentation sections.