Gauge

Gauge widget displays the last time series reading from a single endpoint.

gauge-sample

config:
  type: gauge

Widget configuration

Gauge widget has the following configuration:

config:                      # REQUIRED.
  type: gauge                # Config type. Must always equal "gauge" for this widget type. REQUIRED.
  skin:                      # Widget skin.
  header:
    title:                   # Widget title text.
    displayTitle: true       # Indicates whether to display widget title text.
    iconPath:                # Path to icon.
  serviceIntegration:
    service:                 # Name of service instance (EPTS or WSTS) to get data from. REQUIRED.
    timeSeriesName:          # Name of time series to get data from. REQUIRED.
    dataPath:                # JSON path to the value contained in the data point. REQUIRED.
    updateInterval:          # Period for querying data from the data source, in seconds.
  options:
    displayPostfix:          # Postfix for the displayed value, i.e. "%", "ml", or "mph".
    displayScale:            # Number of digits after decimal point displayed for the value.
  ranges:                    # Value ranges where gauge shows warnings and errors. REQUIRED.
    max:                     # The upper boundary of the gauge scale. REQUIRED.
    highCritical:            # The lower boundary of critically high section.
    highWarning:             # The lower boundary of warningly high section.
    lowWarning:              # The upper boundary of warningly low section.
    lowCritical:             # The upper boundary of critically low section.
    min:                     # The lower boundary of the gauge scale. REQUIRED.
    step:                    # Gauge scale step.
  endpoint:                  # Takes value of ${dashboard.id} to fetch the data for the current endpoint on the endpoint
                             # dashboard or a pre-defined endpoint ID for any available endpoint.

As you can see from the configuration structure, Gauge widget allows users to define warnings and critical sections for very low or very high values, and display them in different colors accordingly.

Skins

Gauge widget is shipped with a set of pre-configured skins:

  • Radial
  • Radial180
  • Radial270
  • Horizontal
  • Vertical
  • RadialThin
  • RadialThin180
  • RadialThin270
  • HorizontalThin
  • VerticalThin
  • RadialMedium
  • HorizontalMedium
  • VerticalMedium
  • SingleNumber

Custom skin

It is possible to override various skin parameters of the widget in canvasGaugesOverridden parameter. Gauge widget is based on the library Canvas Gauges, and uses parameter of canvas Configuration

For example, needle width in specific widget with skin RadialMedium use configuration:

...
skin: Horizontal
canvasGaugesOverriden:
  needleWidth: 20

Configuration example

Below is an example of minimal valid configuration that renders a gauge with the SingleValue skin.

config:
  type:               gauge
  header:
    title: gauge
    displayTitle: true
  serviceIntegration:
    service:            epts_instance_1
    timeSeriesName:     humidity
    dataPath:           value
  ranges:
    max:              100
    min:              0

Interfaces

Gauge supports a number of service interfaces to perform its functional role. The key supported interfaces are summarized in the following diagram.

Gauge interfaces diagram

For service communication, WD widgets mainly use REST APIs.