Time series last value

Widget that displays the last value obtained in a time series.

How it works

The information can be displayed in various formats: graphically, symbolically, and textually.

We can also check its history and statistics: trend, maximum and minimum, percentile, mean, and median.

The following actions can be performed:

Open device information: opens a temporary dashboard with device information
Edit: opens the device wizard
Open device details: opens the device information wizard
Generate QR: generates a QR code that will return basic information about the device
Historical data: “Time Series data list” widget in table format, showing the time series’ history
View Chart: “Time Series history” widget that displays the evolution of the time series
Execute operation: opens the operation execution wizard to perform an operation on the device
Capture screen: Takes a screenshot of the widget.
Duplicate widget: Creates a duplicate of the widget on the dashboard.
Copy widget: Copies the widget to another dashboard.
Change widget location: Moves the widget to another dashboard.

Configuration

General

Refresh Frequency: allows configuring the data refresh frequency displayed in the list.
Title: widget title. It can be configured to remain fixed in the widget or only be displayed when it receives focus.
About: widget description in Markdown format.
Organization: Organization of the desired time series
Time Series: Time Series source
Value column: Column to read the value
Date column: Column to read the date of the value and for stats
Entity key: Device to display
DatastreamId: Data stream whose last value (and its statistics) will be displayed

Name: Alias for the selected field to display
Test Value: If this data is filled in, a preview of how the widget will look with the value given to the datastream will be displayed in the configuration.
Symbol: Unit for the value
View mode: Type of data visualization

Value: Value in text format (default mode).
Icon: Display an icon (Symbol field) along with the value in text mode.
Battery (Percent): Display the value within a battery. Reference values will be configured in the “Chart colors” panel.
Bar (Percent/Range): Display the value in a bar. Reference values will be configured in the “Chart colors” panel.
Gauge (Percent/Range): Display the value in a gauge-type graph. Reference values will be configured in the “Chart colors” panel.
Choose an icon: Icon to display (for Icon mode).
Choose color: Icon color.
Alignment: Alignment of the value (Value and Icon modes) in the widget.
Size: Value size.
Extra information: Extra information to display in the widget along with the value.
FORMATTER: Opens a panel where you can format the value.
- dataFormatter: Value format
- tooltip: Tooltip value format that appears when hovering over the value
- box: Tooltip box style
- char: Graphic value format:
  - battery: https://github.com/larsmars/vuejs-progress-bar#usage. For proper visualization of this chart, the following configuration is recommended for all sizes other than small:
```
formatter.chart.battery.text = { color: "red" };
```
  - bar: https://canvas-gauges.com/documentation/user-guide/configuration (https://canvas-gauges.com/documentation/examples/ See “Other Custom Linear Gauges”):
```
formatter.chart.bar.options = {
  units: "GB",
  minValue: 0,
  maxValue: 100,
  majorTicks: [0, 10, 20, 30, 40, 50, 60, 70, 80, 90, 100],
  minorTicks: 5,
  barBeginCircle: false,
};
```
  In this case, the barBeginCircle option should always be set to false. If it is necessary to modify this option, it is recommended to use the thermometer chart type.
  - circularGauge: https://echarts.apache.org/examples/en/index.html#chart-type-gauge. The properties of this chart are the same as those of gauge, but these options should be added:
```
formatter.chart.gaugeCircular = {
  series: [
    {
      detail: {
        formatter: "{value} GB",
      },
    },
  ],
};
series[0].startAngle = 90;
series[0].endAngle = -269;
```
  Do not modify these properties unless necessary. If necessary, it is recommended to use the gauge chart type.
  - thermometer: https://canvas-gauges.com/documentation/user-guide/configuration (https://canvas-gauges.com/documentation/examples/ See “Other Custom Linear Gauges”)
```
formatter.chart.thermometer.options = {
  units: "ºC",
  minValue: 0,
  maxValue: 100,
  majorTicks: [0, 10, 20, 30, 40, 50, 60, 70, 80, 90, 100],
  minorTicks: 5,
};
```

Advanced

Historical data graph: Display a graph showing the value’s evolution over time
Statistical data graph: Display statistical data
Choose a period: Time frame for sampling the statistical data and its visualization in the value evolution graph
Trend: Assign a color based on the value’s trend

Visualization

We can configure certain elements of the graphs displayed in the widget:

Background color background color for the widget
Hide details header panel: Removes the menu allowing for the modification of the type of visualization as well as the type of value to display.