Text Widget

Overview

The Text Widget displays last series value with an optional icon. Each series in the widget is rendered separately.

The widget can be used to emphasize important metrics.

[widget]
  type = text
  entity = nurswgvml007

  [series]
    metric = memtotal
  [series]
    metric = memfree

When the values are hidden, the widget can present many series in a compact view.

Widget Settings

  • The settings apply to the [widget] section.
  • Common [widget] settings are inherited.
Name Description
circle Display series values inside a circle.
Possible values: false, true.
Default value: false.
Example: circle = true
min-font-size Minimum font size for labels, in pixels.
Example: min-font-size = 20
max-font-size Maximum font size for labels, in pixels.
Example: max-font-size = 60
on-series-click Behavior upon series label click.
See example configuration for possible values.
Example: on-series-click = callDialog({ type:'page', url: 'https://axibase.com' })
icon-size Resize icon to fill all available space.
If icon-size is not set, icon is scaled proportionally to font height.
Control font size with min-font-size and max-font-size.
Possible value: auto.
Example: icon-size = auto

Series Settings

  • The settings apply to the [series] section.
  • Common [series] settings are inherited.
Name Description
icon Display .svg icon in the Text Widget.
Path to custom icons must be defined.
Default ATSD icon directory is /opt/atsd/atsd/conf/portal/img/.
Reference built-in icons by name, without directory path.
See the Icon Reference Sheet for built-in icons.
Underscore ( _ ) can be replaced with dash (-).
Custom icon must be placed in /atsd-hostname/config/workspace/svg and referenced with the path /workspace/svg/image-name.svg.
Example: icon = user.svg
icon-position Icon position relative to series value.
Possible values: left, right, top, bottom.
Default value: top.
Example: icon-position = bottom
icon-color Icon color.
Possible values: color name.
Example: icon-color = orange
icon-alert-style CSS style applied to icon when alert-expression is true.
Example: icon-alert-style = fill: red;

Examples

Multiple Series

Clock and Series

Advanced Configuration Example

Icon Alert

Alert Grid

  • To hide both captions and values, add the following custom styles o the portal.

    [configuration]
      script = $('<style>.axi-text-widget-value {color: transparent; font-size: 1px !important} .axi-text-widget-caption {display: none} </style>').appendTo('head')
    
  • Apply max-font-size to limit the size of the circles.

  • Set common background color to all series using the style setting.

  • Apply alert-expression to change the background color based on last value.