---
title: Metric Widget  V1 - deprecated
slug: technical-docs/metric-widget-v1-deprecated
docTags: 
createdAt: 2024-10-08T11:22:38.011Z
---

# Intro

The Metric Widget presents a high-level interpretation based on metrics derived from data collected over an extended period. By aggregating multiple measurements, it offers users a broader understanding of their health trends and insights. Ideal for users interested in comprehensive health tracking, this widget can display aggregated values like stress levels or fitness scores. It’s designed to provide an overview that aids in interpreting long-term health progress.

# Layout

**Small**

::::VerticalSplit{layout="middle"}
:::VerticalSplitItem
::Image[]{src="https://api.archbee.com/api/optimize/_0R_DnpmBBLLXmaoWvG2u/HjrO6_O_peqAH0X1aQ0r3_box-s.png" size="34" width="408" height="504" position="center" caption=""default"" showCaption="true"}
:::

:::VerticalSplitItem
::Image[]{src="https://api.archbee.com/api/optimize/_0R_DnpmBBLLXmaoWvG2u/3xs9DPF1rhnZto7iZuBsX_biomarker-mr.png" size="34" width="408" height="504" position="center" caption=""arc"" showCaption="true"}
:::
::::

**Medium**

::Image[]{src="https://api.archbee.com/api/optimize/_0R_DnpmBBLLXmaoWvG2u/W_7jbz8dqidwXi4h7oWag_image.png" size="34" width="512" height="321" position="center" showCaption="false"}

[View the IntelliWidgets.js reference ->](docId\:dEkcuoAPHRmcZXe_caJ5v)

# Usage

## Creating the widget

The code snippet below creates a Metric widget and [mounts](docId\:sXVSW2jFSOhr7XbXEYZ_J) it to the DOM:

:::CodeblockTabs
Create and mount widget

```javascript
const intelli = IntelliProveWidgets("user_action_token");

const config = { /* config */ };
const variation = "default";
const themeOverrides = { /* theme overrides */ };
intelli.mountWidget(
    "#heart-rate-tile",
    "metric",
    config,
    variation,
    themeOverrides
);
```
:::

## Config

The Metric widget requires additional configuration parameters that describes which parameter should be displayed.

:::CodeblockTabs
Config

```javascript
const config = {
   parameter: "resting_heart_rate"
}
```
:::

| **Property**              | **Description**  |
| ------------------------- | ---------------- |
| `parameter`<br />*string* | Metric of choice |

List of available [metrics](docId\:yEqwSkx81EJu_Z8N3DjhY):

| **Parameter**              | **Layouts** |
| -------------------------- | ----------- |
| resting\_heart\_rate       | small       |
| resting\_respiratory\_rate | small       |
| mental\_stress             | small       |
| mental\_health\_risk       | small       |
| sleep\_quality             | small       |
| energy\_balance            | small       |
| general\_fitness\_level    | small       |
| hypertension\_risk         | medium      |

## Variation

Two variations of the Metric widget are available:

- "default"
- "arc"

## Theme Overrides

The Metric Widget allows [individual fine-tuning of the appearance](docId:2kL5Bnrb-6uIcQrFAqsiG).

The used accent colors are:

- Functional Primary 500
- Functional Secondary 500
- Functional Tertiary 500

## JSON Data

Retrieve the metric widget data in JSON format using the [Rest API](docId\:BiuPVixvHltbukKLR2ATI). The `data` field of the response body describes the widget properties.

The metric widget consists of the following fields (similar to the biomarker widget):

- The `value` is the actual numerical value. It can be an integer or a floating point number.
- The `unit` holds a textual value for the unit of the parameter.
- The `range` represents the entire span of possible values for that the parameter, indicated by minimum and a maximum.
- The `zone` indicates where the actual value falls, among three categories related to the health condition:
  - "good" (`zone: 1`)
  - "neutral" (`zone: 2`)
  - "bad" (`zone: 3`)
- The `optimum` defines how the range should be interpreted and visualized. There are three possible values for optimum: "low," "high," and "middle."
  - For "low": Lower values are categorized as "good" (green color), while higher values are categorized as "bad" (red color)
  - For "high": Higher values are categorized as "good" (green color), while lower values are categorized as "bad" (red color).
  - For "middle": The "good" zone (green color) is centered around the middle of the range. Values lower or higher than this midpoint are categorized as "bad" (red color).

::Image[]{src="https://api.archbee.com/api/optimize/_0R_DnpmBBLLXmaoWvG2u/d15PzMYiUOFLIHC4qJEoc_group-123.png" size="50" width="1093" height="1015" position="center" showCaption="false"}