# Dashboard components

<figure><img src="https://217108486-files.gitbook.io/~/files/v0/b/gitbook-x-prod.appspot.com/o/spaces%2FmRfGitkyjOEMvVsEyGWN%2Fuploads%2FErpsFWj37KGQT8NH1an4%2FScreenshot_2024-08-15_at_9.54.55_AM.png?alt=media&#x26;token=68b3e859-7e1c-40f6-bbd2-e59d62fb78b1" alt=""><figcaption></figcaption></figure>

Components can be added to layers quickly create interactive and informative dashboards. Each component serves a specific purpose, providing unique insights and facilitating data analysis and exploration. By combining these components together, you can explore, compare, and interpret complex datasets with ease to make informed decisions.

{% hint style="success" %}
This feature is only available to customers on the [Enterprise plan](https://felt.com/pricing). To upgrade, [contact sales](https://felt.com/sales).
{% endhint %}

## Adding components

There are two ways to add components to a layer:

* Directly from the Components tool (![](https://217108486-files.gitbook.io/~/files/v0/b/gitbook-x-prod.appspot.com/o/spaces%2FmRfGitkyjOEMvVsEyGWN%2Fuploads%2Ffsd2u2NC1D4zcrUVVhDy%2Fcomponents.svg?alt=media\&token=f43a24ef-3387-4f1e-9337-fdbec2bcd4e9)) in the [toolbar](https://help.felt.com/getting-started/tour-the-interface)

<figure><img src="https://217108486-files.gitbook.io/~/files/v0/b/gitbook-x-prod.appspot.com/o/spaces%2FmRfGitkyjOEMvVsEyGWN%2Fuploads%2F8ufqlj5VTtXTQCK8Dhbf%2FScreen_Shot_2024-07-16_at_5.45.05_PM.png?alt=media&#x26;token=da73835d-d8cd-49b9-ae32-89e78bfedca2" alt="" width="563"><figcaption></figcaption></figure>

* Or from the Components tab in the [detail panel](https://help.felt.com/getting-started/tour-the-interface#detail-panel)

<figure><img src="https://217108486-files.gitbook.io/~/files/v0/b/gitbook-x-prod.appspot.com/o/spaces%2FmRfGitkyjOEMvVsEyGWN%2Fuploads%2FMBp77RMP5tiUScwblNYY%2FScreen_Shot_2024-07-16_at_5.47.08_PM.png?alt=media&#x26;token=14f907da-aa03-4856-9042-46e24de512c9" alt="" width="563"><figcaption></figcaption></figure>

## Available components

### Statistic

Summarize numeric values into useful statistics to quickly understand essential metrics in your data. With the Statistic component you can show the count of features (Feature count) or summarize a numeric attribute with different stats: Sum, Average, Min, Max, Median, or Distinct Count.

<figure><img src="https://217108486-files.gitbook.io/~/files/v0/b/gitbook-x-prod.appspot.com/o/spaces%2FmRfGitkyjOEMvVsEyGWN%2Fuploads%2Fey1cPS96pDcn53wd8I6d%2Fstat_card.png?alt=media&#x26;token=01dc6280-80fe-443c-b576-d39a439784fb" alt="" width="305"><figcaption></figcaption></figure>

**Good for**

* Providing quick insights into key metrics like averages, totals, and min or max values.
* Gaining a high-level overview of important numerical data.
* Presenting summarized data for easy interpretation.
* Show the total sales revenue for a quarter.

**Example use case:** Display the average income of residents in a city.

<figure><img src="https://217108486-files.gitbook.io/~/files/v0/b/gitbook-x-prod.appspot.com/o/spaces%2FmRfGitkyjOEMvVsEyGWN%2Fuploads%2F4VTgXVlq4rzbk6HL3sOy%2Fimage.png?alt=media&#x26;token=012c4f47-28be-4475-bf66-21d84f7b1593" alt="" width="244"><figcaption></figcaption></figure>

### Bar chart

Visualize and compare categories with bar charts to compare differences and trends between various groups in your data. You can calculate statistics (Feature Count, Sum, Average, Min, Max, Median, and Distinct Count) for each category based on a numeric attribute in the table. Summarizing a numeric attribute in the Bar chart is especially useful to summarize a secondary statistic on various categories.&#x20;

<figure><img src="https://217108486-files.gitbook.io/~/files/v0/b/gitbook-x-prod.appspot.com/o/spaces%2FmRfGitkyjOEMvVsEyGWN%2Fuploads%2FMHNfWFU0Wi9VNNUM9T2r%2Fbar_chart.png?alt=media&#x26;token=1fe0385d-e10f-4c45-9c08-2640d25739b2" alt="" width="305"><figcaption></figcaption></figure>

**Good for**

* Comparing different categories or groups.
* Highlighting differences and trends between multiple datasets.
* Visualize the number of users in different age groups.

**Example use case:** Compare the sales revenue for different sales territories.

Summarizing a numeric attribute in the Bar chart is especially useful to summarize a secondary statistic on various categories.&#x20;

<figure><img src="https://217108486-files.gitbook.io/~/files/v0/b/gitbook-x-prod.appspot.com/o/spaces%2FmRfGitkyjOEMvVsEyGWN%2Fuploads%2FG1hP4IDdR2XTZmCmtCPH%2Fimage.png?alt=media&#x26;token=31cd26a9-97b6-434e-baee-8f92e51d87d1" alt="" width="251"><figcaption></figcaption></figure>

### Histogram

Quickly chart patterns and trends by displaying frequency distributions or X,Y charts using easy-to-read bins. By default, distribution of data is shown across 50 bins. You can adjust this number in the Bins option.

<figure><img src="https://217108486-files.gitbook.io/~/files/v0/b/gitbook-x-prod.appspot.com/o/spaces%2FmRfGitkyjOEMvVsEyGWN%2Fuploads%2FFDx9n14i57EJrdygT2rc%2Fhistogram.png?alt=media&#x26;token=9e8d2755-e413-4442-a082-6b290640b08b" alt="" width="305"><figcaption></figcaption></figure>

**Good for**

* Understanding distribution and variability.
* Spotting outliers and central tendencies.
* Analyzing the spread of data points.
* Visualize the elevation distribution within a geographic region.

**Example use case:** Show the distribution of ages in demographic data.

<figure><img src="https://217108486-files.gitbook.io/~/files/v0/b/gitbook-x-prod.appspot.com/o/spaces%2FmRfGitkyjOEMvVsEyGWN%2Fuploads%2FAB8ckuLycXNsHQVSZdDW%2Fimage.png?alt=media&#x26;token=c9c527d7-465c-4f36-8e54-75c65015be30" alt="" width="253"><figcaption></figcaption></figure>

### Filter

Drill down, filter on-the-fly, and select more specific categories or ranges of data to focus on target information. There are two types of filter components: Dropdown and Slider. The Dropdown filters can be configured with multi-select or single-select. While all attributes are filterable with a dropdown, only numeric attributes can be filtered with a slider.

<figure><img src="https://217108486-files.gitbook.io/~/files/v0/b/gitbook-x-prod.appspot.com/o/spaces%2FmRfGitkyjOEMvVsEyGWN%2Fuploads%2F2WvgWdzEa4uhdCnAAn06%2Ffilter.png?alt=media&#x26;token=d6d3a785-6c3c-474d-9449-1bbbde2d9fd6" alt="" width="305"><figcaption></figcaption></figure>

**Good for**

* Focusing on particular values for more precise insights.
* Select distinct land use types to explore changes in a city.

**Example use case:** Filter sales data by revenue ranges to see performance in sales regions.

There are two types of filter components: Dropdown and Slider. All attributes are filterable with a dropdown. Only numeric attributes can be filtered with a slider.

{% columns %}
{% column %}
**Dropdown**

<figure><img src="https://217108486-files.gitbook.io/~/files/v0/b/gitbook-x-prod.appspot.com/o/spaces%2FmRfGitkyjOEMvVsEyGWN%2Fuploads%2Fg5KphDntqxKweMpvFmpt%2Fimage.png?alt=media&#x26;token=10910c7e-38bc-4e18-9b02-649ceb1935cd" alt=""><figcaption></figcaption></figure>
{% endcolumn %}

{% column %}
**Slider**

<figure><img src="https://217108486-files.gitbook.io/~/files/v0/b/gitbook-x-prod.appspot.com/o/spaces%2FmRfGitkyjOEMvVsEyGWN%2Fuploads%2F4fLO3TAXJ93g1iuU7qPn%2Fimage.png?alt=media&#x26;token=c59247a4-16db-4a1b-9393-efb0f4b7d364" alt=""><figcaption></figcaption></figure>

{% endcolumn %}
{% endcolumns %}

#### How filter input types are determined

For number column types you can configure the filter as a slider or a dropdown. When configuring a dropdown for numbers, the dropdown's style depends on the number of unique values in the layer:

* **<100 unique values**: displays as a dropdown with checkboxes

  <figure><img src="https://217108486-files.gitbook.io/~/files/v0/b/gitbook-x-prod.appspot.com/o/spaces%2FmRfGitkyjOEMvVsEyGWN%2Fuploads%2Fc0Zth4Rt9U6gDOGfoXUX%2Fimage.png?alt=media&#x26;token=17549eb8-63f0-4dd4-9140-4742f436b9ca" alt="" width="323"><figcaption></figcaption></figure>
* **100+ unique values**: displays as a text input field

  <figure><img src="https://217108486-files.gitbook.io/~/files/v0/b/gitbook-x-prod.appspot.com/o/spaces%2FmRfGitkyjOEMvVsEyGWN%2Fuploads%2FzKAH69UuLSDcVPh3ke0m%2Fimage.png?alt=media&#x26;token=e1ee3cc3-8b33-444c-9eeb-e89c61649ba5" alt="" width="321"><figcaption></figcaption></figure>

Tip: if you need a checkbox dropdown for a numeric column with 100+ unique values, convert the column to a string/text type in your source file and upload the dataset again.

### Time series

Explore spatial trends over time and reveal key metrics across time periods. With the Time series component, you can select between multiple time-based intervals to best summarize your data. Time intervals include: Year, Month, Week, Day, and Hour.

<figure><img src="https://217108486-files.gitbook.io/~/files/v0/b/gitbook-x-prod.appspot.com/o/spaces%2FmRfGitkyjOEMvVsEyGWN%2Fuploads%2Fvo6qc2LTq4IHlscbcTKf%2Ftime_slider.png?alt=media&#x26;token=146fadbc-ef03-497d-b034-ac70e526c7c6" alt="" width="305"><figcaption></figcaption></figure>

**Good for**

* Identifying trends and patterns over time.
* Tracking the evolution of data.
* Understanding how different variables interact across time.
* Monitor traffic flow changes during different times of the day.

**Example use case:** Display temperature changes over a year across various cities.

<figure><img src="https://217108486-files.gitbook.io/~/files/v0/b/gitbook-x-prod.appspot.com/o/spaces%2FmRfGitkyjOEMvVsEyGWN%2Fuploads%2FjonSinGFmVZvYJotDBBK%2Fimage.png?alt=media&#x26;token=cabe59e3-8a97-4961-a277-25ddd11e9098" alt="" width="252"><figcaption></figcaption></figure>

#### **Required Formats**

* **Native Date and Datetime Types**: We automatically recognize files with native date and datetime support, such as GeoPackage and Shapefile.
* **String Types**: If not a file type with native support, in order to recognize, the date or datetime strings should be in the following formats:
  * `1970-01-01` – ISO 8601
  * `1970/01/01` – common, unambiguous
  * `1970-01-01T00:00:00` – ISO 8601
  * `1970-01-01T00:00:00.00` – ISO 8601 with milliseconds
  * `1970-01-01T00:00:00Z` – ISO 8601 with UTC offset
  * `1970-01-01 00:00:00` – common, unambiguous
  * `1970/01/01 00:00:00` – common, unambiguous

#### **Unsupported Features**

* **Timezone Offsets**: We do not support timezone offsets at this time.

#### **Intervals**

* The time series component gives the following maximum intervals for meaningful breaks
  * Days: 365 (1 year)
  * Hours: 168 (1 week)
  * Weeks: 260 (5 years)
  * Months: 120 (10 years)
  * Years: 200

## Update Behavior

Components can update when a viewer zooms around the map and/or based on filters applied when other components are applied. Within the configuration panel for the Statistic, Bar chart, Histogram and Time series components you can control how metrics update dynamically on the map.

<figure><img src="https://217108486-files.gitbook.io/~/files/v0/b/gitbook-x-prod.appspot.com/o/spaces%2FmRfGitkyjOEMvVsEyGWN%2Fuploads%2FPMsdlxXaagyCJd6YPHr7%2FScreen_Shot_2024-07-17_at_8.09.54_AM.png?alt=media&#x26;token=96fa504a-9618-4416-809e-1a8ad509ba9a" alt="" width="284"><figcaption></figcaption></figure>

#### **Update based on view**

By default, components reflect all data visible on the map, not only the data that’s currently within a user’s view. Enable this setting to update a component as the map is moved.

#### **Update based on other filters**

By default, components update when other component filters are applied. Disable this setting to keep a component unaffected by other component filters.

## Formatting

To format how numeric metrics are displayed in the Dashboard components, click on the "Default" dropdown to open the format menu for that component's metric.&#x20;

<figure><img src="https://217108486-files.gitbook.io/~/files/v0/b/gitbook-x-prod.appspot.com/o/spaces%2FmRfGitkyjOEMvVsEyGWN%2Fuploads%2FXPfxmNkM8OLhn9CjATPF%2Fimage.png?alt=media&#x26;token=dc32b0bb-fac5-46c9-9665-ab646372e212" alt="" width="254"><figcaption></figcaption></figure>

In this menu you have control over the display of numeric metric, including: how many decimal places are displayed, prefix / suffix units, add numeric formatting, apply rounding logic. These metrics can be converted into percentages or custom format. See[formatting](https://help.felt.com/layers/formatting "mention") for more information.

<figure><img src="https://217108486-files.gitbook.io/~/files/v0/b/gitbook-x-prod.appspot.com/o/spaces%2FmRfGitkyjOEMvVsEyGWN%2Fuploads%2Fo9a7xs1iecQlBdhYbtFv%2Fimage.png?alt=media&#x26;token=a5a65882-a70f-4cc2-af2e-18207fc3ca06" alt="" width="375"><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://help.felt.com/dashboards-and-apps/dashboard-components.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.
