Stats (ALPHA)
Responsive Widgets are in alpha and available by invitation only on Business and Enterprise plans. Behavior and properties may change. To request access, open a support ticket and name the feature Responsive Widgets (ALPHA).
The Stats widget shows one key number in a card, such as active users or monthly revenue. It can also show a change value, a caption, an icon, and a small trend line (sparkline). Use several Stats widgets side by side to build a KPI row on a dashboard.
Widget type: WDS_STATS_WIDGET
Loading state
While its data loads for the first time, the widget shows a loading placeholder in the card. When data reloads and the widget already has a value, it keeps showing the old value until the new one arrives. A value of 0 counts as data.
Content properties
These properties appear in the Content tab of the property pane.
Fields
Label string
Sets the label for the number, for example Active users. Default: Active Users. The label shows on one line.
Value string
Sets the main number or text. Default: 42. You can bind data to it, for example {{GetStats.data.activeUsers}}. If the value is empty, the widget hides it, and it hides Value change too.
Value color string
Sets the semantic color of the value and the icon. Options: Default, Accent, Neutral, Positive, Negative, Warning. A new widget starts with Neutral.
Values for code: default, accent, neutral, positive, negative, warning.
Optional Fields
Select icon string
Sets the icon in the card. Default: shopping-bag. If the value is empty or (none), the card shows no icon.
Position string
Sets which side of the card the icon is on. Options: start (default), end.
Values for code: start, end.
You set this property in the property pane only. You cannot bind it to data.
Value change string
Sets a short text next to the value, such as the change since last period. Default: +50%.
Color string
Sets the semantic color of Value change. Options: Accent, Neutral, Positive, Negative, Warning. A new widget starts with Positive.
Values for code: accent, neutral, positive, negative, warning.
Caption string
Sets a short text under the value, for example Since 21 Jan 2022. Default: This week.
Sparkline data array
Sets an array of numbers to draw as a small trend line under the value. Default: [10, 14, 9, 16, 12, 20, 18]. Leave it empty to hide the sparkline.
Example:
{{ GetStats.data.dailyUsers.map(d => d.count) }}
General
Visible boolean
Controls whether the widget is visible. Default: on.
Animate loading boolean
Controls the loading animation of the widget. Default: on.
Style properties
These properties appear in the Style tab of the property pane.
General
Alignment string
Sets the horizontal alignment of the text in the card. Options: left (default), center.
Values for code: start, center.
Value position string
Shows the value below or above the label. Options: Below label (default), Above label.
Values for code: bottom, top.
Value size string
Sets the text size of the value. Options: Subtitle (default), Title, Heading.
Values for code: subtitle, title, heading.
Border color string
Adds a 2 px solid border to the card in the color you choose.
Background string
Sets a custom CSS background for the card. Use a color, for example #def7ec, or a gradient, for example linear-gradient(...).
Visual Separation boolean
Gives the card an elevated background, borders, or both, so it stands out from the rest of the page. Default: off.
Reference properties
Reference properties let you read the widget's state in bindings and code, for example {{StatsWidget1.isVisible}}. You cannot set them directly.
isVisible boolean
Shows whether the widget is visible.
Example:
{{StatsWidget1.isVisible}}
Methods
Methods let you change the widget's properties from code, for example in a JS Object.
setVisibility (param: boolean): Promise
Shows or hides the widget.
Example:
StatsWidget1.setVisibility(false)