# Speedometer

The Speedometer gives a quick view of a specific value and range. It is possible to customize the Speedometer to show different colors depending on set rules for the value.

## General

General data is required for all portlets.

[General configuration](https://help.novacuraflow.com/6.11/development/flow-portal-2/common-configuration#general)

## Listeners

The portlet can listen to the following commands:

* On Row Selection
* On Refresh

[Listeners configuration](https://help.novacuraflow.com/6.11/development/flow-portal-2/common-configuration#listeners)

## Data

### Data source

The portlet data source configuration enables the portlet to execute specified queries towards the chosen database connector to fetch data, or fetch data from a workflow.

* Database: uses a flow connector to retrieve data from a database
* Workflow: runs a workflow to retrieve data

[Data source configuration](https://help.novacuraflow.com/6.11/development/flow-portal-2/common-configuration#database-source)

[Workflow source configuration](https://help.novacuraflow.com/6.11/development/flow-portal-2/common-configuration#workflow-source)

### Presentation

Under *presentation,* add the data to be shown in the speedometer:

* Value: the needle pointer in the speedometer, also shown as a number below the graphics
* Unit: the unit of the value (not mandatory)
* Description: the description to describe the value (not mandatory)
* Min: the minimum value and start point of the speedometer scale - can be a variable or manual input
* Max: the maximum value and end point of the speedometer scale - can be a variable or manual input
* Step: the value between each scale marker - can be a variable or manual input

<div align="left"><img src="https://543770944-files.gitbook.io/~/files/v0/b/gitbook-legacy-files/o/assets%2F-LtPTgZOYmpJka4jqs1v%2F-M0c9ssc9xsbJxrKD0FW%2F-M0cAnzvL1-HNRrfWr0q%2Fimage.png?alt=media&#x26;token=5302ed24-03b4-48d0-9335-e63c38cc0d54" alt=""></div>

<div align="left"><img src="https://543770944-files.gitbook.io/~/files/v0/b/gitbook-legacy-files/o/assets%2F-LtPTgZOYmpJka4jqs1v%2F-M0c9ssc9xsbJxrKD0FW%2F-M0cAkYt8KYHbXQRiMSj%2Fimage.png?alt=media&#x26;token=cbf4b27c-062c-4f16-91d6-49db9361f4b6" alt=""></div>

## Speedometer color rules

The speedometer colors can all be configured. As a default, the pointer and scale colors are set to different shades of blue. Click on the color box to configure pointer and scales colors.

* Pointer color: color of the needle pointer
* Scale color: primary color of the scale
* Second scale color: secondary scale color

The preview tab below shows a speedometer with default colors.

{% tabs %}
{% tab title="Set up speedometer color" %}

<div align="left"><img src="https://543770944-files.gitbook.io/~/files/v0/b/gitbook-legacy-files/o/assets%2F-LtPTgZOYmpJka4jqs1v%2F-M0c83-a9WhoAjnmbvgf%2F-M0c8773HPatm9A29yLX%2Fimage.png?alt=media&#x26;token=1871cbbc-a9bd-49c4-93cb-0e5c6a05f390" alt=""></div>
{% endtab %}

{% tab title="Preview" %}

<div align="left"><img src="https://543770944-files.gitbook.io/~/files/v0/b/gitbook-legacy-files/o/assets%2F-LtPTgZOYmpJka4jqs1v%2F-M0bs-eMJvj9m0oULVBl%2F-M0c7sCI6fNXFfbByES-%2Fimage.png?alt=media&#x26;token=ece32818-6399-43e2-8d71-2419515d1a9a" alt=""></div>
{% endtab %}
{% endtabs %}

The speedometer can have one or more scale color rules. The color rules override the default scale colors.

To enter a new rule:&#x20;

* click *New*
* select a color
* enter the condition field, operator, and value&#x20;
* preview the result or save

To edit an existing rule, click on the rule and it expands into edit mode.&#x20;

<div align="left"><img src="https://543770944-files.gitbook.io/~/files/v0/b/gitbook-legacy-files/o/assets%2F-LtPTgZOYmpJka4jqs1v%2F-M0bpa7_lhuINrh1_cwu%2F-M0brpEdEhlgbGLV-rzx%2Fimage.png?alt=media&#x26;token=3c78623c-c991-4b00-a246-b36b4f117896" alt=""></div>

## Style‌

Change the header text color and add a header stripe by configuring style.

[Style configuration](https://help.novacuraflow.com/6.11/development/flow-portal-2/common-configuration#style)