# Indicator

**Indicators** are important tools to benchmark, target and monitor performance.

Different types of indicators are used in monitoring and evaluation, such as ‘quantitative’ or ‘qualitative’. Colors and thresholds can be set to guide decision.

## The Method To Use <a href="#the-method-to-use" id="the-method-to-use"></a>

The method is `s.plt.indicator()`

It must contain the following input variables:

```python
order: int, 
data: Union[str, pd.DataFrame, List[Dict], Dict],
```

And accepts the following input variables as optional:

```python
data: Union[str, pd.DataFrame, List[Dict], Dict], 
order: int,
vertical: Union[bool, str] = False, 
**component_params
```

In the data parameter, the key value pairs that will have an effect in the result are:

```python
{
    title: string,
    value: string,
    description?: string,
    color?: 'success'   'warning'   'error'   'neutral'   'caution',
    align?: 'left'   'center'   'right',
    targetPath?: string,
    icon?: string,
    bigIcon?: string,
    variant?: 'default'   'outlined'   'contained'   'topColor',
    info?: string,
    hideIcons?: boolean,
    backgroundImage?: string
}
```

### Styles

`"color"` : "<mark style="color:blue;">`default`</mark>", "<mark style="color:green;">`success`</mark>", "<mark style="color:orange;">`"warning`</mark>", "<mark style="color:red;">`error`</mark>", "<mark style="color:yellow;">`caution`</mark>"

If you don't set any `"color"` style, the color is **black.**

<figure><img src="https://3782181538-files.gitbook.io/~/files/v0/b/gitbook-x-prod.appspot.com/o/spaces%2FUlHTfmIZY46Z1EDfyGMz%2Fuploads%2FjWG6OkCEG6WMaOrngTPB%2FCaptura%20de%20Pantalla%202023-03-23%20a%20las%2015.25.56.png?alt=media&#x26;token=f7ba7f23-7191-404e-82a9-381459507add" alt=""><figcaption><p>Left to right 1st line: success, warning, caution.<br>Left to right 2on line: default, error, black(no color set)</p></figcaption></figure>

`"alignment"` : `left` , `center`, `right` by default the value `right` is taken. Note that the alignment only applies to the value, not to the title nor description.

<figure><img src="https://3782181538-files.gitbook.io/~/files/v0/b/gitbook-x-prod.appspot.com/o/spaces%2FUlHTfmIZY46Z1EDfyGMz%2Fuploads%2F7cnrOihZM5y98fYRTMUx%2FCaptura%20de%20Pantalla%202023-03-23%20a%20las%2015.36.07.png?alt=media&#x26;token=9efbee4d-b97f-4143-bfb5-3d7bcb23d360" alt=""><figcaption><p>Left to right: left, center, right</p></figcaption></figure>

"`variant`" : "`default`" , "`outlined`", "`contained`", "`topColor`" The variants are used to modify the container, making the same color that used only the text before, for example, with the contained variant, serve to put this color in the background.

<figure><img src="https://3782181538-files.gitbook.io/~/files/v0/b/gitbook-x-prod.appspot.com/o/spaces%2FUlHTfmIZY46Z1EDfyGMz%2Fuploads%2FpMG846pRlqzsTtQv5ts0%2FCaptura%20de%20Pantalla%202023-03-23%20a%20las%2015.38.45.png?alt=media&#x26;token=555f3c30-fe2f-4e4a-869a-9aaa671e5f5b" alt=""><figcaption><p>Left to right: default, contained, outlined, topColor</p></figcaption></figure>

"`backgroundImage`" set a url to get a beautiful indicator with background image.\
&#x20;                                                <img src="https://3782181538-files.gitbook.io/~/files/v0/b/gitbook-x-prod.appspot.com/o/spaces%2FUlHTfmIZY46Z1EDfyGMz%2Fuploads%2Fk5OCBwmo4ys0CwzQDNB6%2FCaptura%20de%20Pantalla%202023-03-23%20a%20las%2015.46.08.png?alt=media&#x26;token=7e3893ee-bf81-48e2-8e43-cb86b57fbdf0" alt="" data-size="original">

"`icon`" : set an icon from a list.&#x20;

```
"icon" : "Line/subscriptions"
```

{% hint style="info" %}
This list will be added soon
{% endhint %}

\
&#x20;                                                ![](https://3782181538-files.gitbook.io/~/files/v0/b/gitbook-x-prod.appspot.com/o/spaces%2FUlHTfmIZY46Z1EDfyGMz%2Fuploads%2FKoiJmz7FaTZoFHjdejcT%2FCaptura%20de%20Pantalla%202023-03-23%20a%20las%2015.49.46.png?alt=media\&token=312b81e5-6dd0-4999-abbe-4468e0ec2ef8)

"`bigIcon`" : set a bigIcon inside the indicator. BigIcon and icon can be different and coexist in the same indicator

```
"bigIcon" : "Line/calendar"
```

\
&#x20;                                                ![](https://3782181538-files.gitbook.io/~/files/v0/b/gitbook-x-prod.appspot.com/o/spaces%2FUlHTfmIZY46Z1EDfyGMz%2Fuploads%2F591PwhuJ49Mz1I6dNBam%2FCaptura%20de%20Pantalla%202023-03-23%20a%20las%2015.53.46.png?alt=media\&token=1ec4fe07-f452-4592-b03e-4c7d012f5be3)

"`target_path`": set a path so that when the indicator is clicked it redirects to the specified path in the dashboard.

\
&#x20;                                                ![](https://3782181538-files.gitbook.io/~/files/v0/b/gitbook-x-prod.appspot.com/o/spaces%2FUlHTfmIZY46Z1EDfyGMz%2Fuploads%2FbasDnUU6MIo4m0elVK6o%2Fimatge.png?alt=media\&token=213c762c-e350-4a4b-b196-5e130e66ad80)

## Example

```python
data_ = [{
    "color": "success",
    "variant": "contained",
    "description": "This indicator has a Link",
    "targetPath": "/indicators/indicator/1",
    "title": "Target Indicator",
    "align": "left",
    "value": "500€"
}, {
    "color": "warning",
    "backgroundImage": "https://images.unsplash.com/photo-1535957998253-26ae1ef29506?ixlib=rb-1.2.1&ixid=MnwxMjA3fDB8MHxwaG90by1wYWdlfHx8fGVufDB8fHx8&auto=format&fit=crop&w=736&q=80",
    "variant": "outlined",
    "description": "This has a background",
    "title": "Super cool indicator",
    "align": "left",
    "value": "Value"
}, {
    "color": "error",
    "variant": "outlined",
    "description": "This hasn't got any icons",
    "title": "Error indicator",
    "align": "left",
    "value": "Value",
}, {
    "color": "caution",
    "variant": "contained",
    "description": "Aligned to right and full of icons",
    "title": "Multiple cases",
    "align": "right",
    "value": "Value",
}]

s.plt.indicator(
    data=data_, order=2, rows_size=2, cols_size=12,
)
```

<figure><img src="https://3782181538-files.gitbook.io/~/files/v0/b/gitbook-x-prod.appspot.com/o/spaces%2FUlHTfmIZY46Z1EDfyGMz%2Fuploads%2F7AAtqXrawnPTvq627sYT%2Fimatge.png?alt=media&#x26;token=16b29c1b-1cc9-4b24-a3bb-e8641cc57058" alt=""><figcaption></figcaption></figure>

### Modifying Size And Padding <a href="#id-2.-title-axes-names-legend-and-use-of-option_modifications" id="id-2.-title-axes-names-legend-and-use-of-option_modifications"></a>

It is possible to personalize the **size** and add **padding.** One example could be obtained using:

{% hint style="info" %}
Consult [using the grid](https://docs.shimoku.com/dev/building-web-app/grid/using-the-grid) for more details about padding and size
{% endhint %}

```python
s.plt.indicator(
    order=0, cols_size=7,
    padding="0,0,0,2",
    data=[
        {
            "description": "Seda incolora",
            "title": "Largo (m)",
            "value": "1200",
            "color": "grey",
        },
        {
            "description": "Precio",
            "title": "Cambio €/$",
            "value": "1.19",
            "color": "warning",

        },
    ],
)
```

<figure><img src="https://3782181538-files.gitbook.io/~/files/v0/b/gitbook-x-prod.appspot.com/o/spaces%2FUlHTfmIZY46Z1EDfyGMz%2Fuploads%2FapPkXqhnyfAdsNvypL40%2FIndicators%20size%20and%20padding.png?alt=media&#x26;token=4cc0ec55-71b8-41d6-9f57-063775ac7fb9" alt=""><figcaption><p>Note the space before the component using  <code>padding="0,0,0,2",</code>   and size with <code>cols_size=7</code>. Size can be modified with attention to the text to be fit in.</p></figcaption></figure>

{% hint style="info" %}

### Featured Content

[changing-the-menu-path](https://docs.shimoku.com/dev/building-web-app/menu/changing-the-menu-path "mention")\
The `menu_path` can be modified.<br>

[using-the-grid](https://docs.shimoku.com/dev/building-web-app/grid/using-the-grid "mention")

It is possible to use any number of rows.
{% endhint %}