# Data Stream timeline

Graphical representation of the timeline of historical data from a data stream

## How it works

{{< staticImage "ux/DatastreamTimeline/Widget/DatastreamTimelineWidget.png" "Data Stream Timeline widget" >}}

This widget facilitates the visualization of value changes in a field over time.

Each timeline will display the name of the data stream along with the represented value, arranged as follows:

- `field`
- `value`

### Grouping

{{< staticImage "ux/DatastreamTimeline/Widget/DatastreamTimelineWidgetGrouped.png" "Data Stream Timeline grouped information" >}}

By enabling the grouping of timelines, one can view all represented states on a single timeline (without separation).

When data are grouped, the representation of the timeline will change, displaying the value on the same timeline, and each bar will contain the following:

- `field`

### Summary

{{< staticImage "ux/DatastreamTimeline/Widget/DatastreamTimelineWidgetResume.png" "Data Stream Timeline information summary" >}}

The summary panel allows you to observe the total time each value has been maintained.

### Widget Menu

{{< staticImage "ux/DatastreamTimeline/Widget/DatastreamTimelineWidgetActions.png" "Data Stream Timeline Actions" >}}

From here, the following actions can be performed:

- **Open device information** opens the corresponding temporary panel with the selected entity
- **Edit** opens the wizard corresponding to the selected entity
- **Generate QR** generates a QR code that will return basic information about the asset
- **Execute operation** opens the pre-configured operation launcher for the selected entity
{{% ux-widget-menu-actions %}}

## Configuration

{{% ux-widget-configuration %}}
- **Entity key** of the desired entity to obtain the data

{{< staticImage "ux/DatastreamTimeline/Configuration/DatastreamTimelineConfigGeneral.png" "Data Stream Timeline General Configuration" >}}

Finally, those columns from which to extract data to display on the graph must be configured. A timeline will be generated for each of them.

For each piece of data, the following can be configured:

- **Alias** a representative name for the column data on the graph
- **Color** to distinguish it within the graph
- **Formatter tool** is a tool that will process each piece of data, allowing for its modification and/or any calculation to ultimately display it on the graph. For example, it can convert numerical data into discrete data for representation.
- **Remove** will remove the column from the configuration

### Visualization

{{< staticImage "ux/DatastreamTimeline/Configuration/DatastreamTimelineConfigVisualization.png" "Data Stream Timeline Visualization" >}}

From here, some visual aspects of the widget can be changed.

- **Background color** allows you to set a distinctive color for the widget
- **Hide details header panel** hides the upper information panel of the widget, freeing up that space

{{% children sort="weight" depth="10" %}}

---