group
The group widget allows widgets to be combined to create a single widget. The group widget can be used only on sizes: 2x4, 4x2, and 4x4.
Configuration options
children
The children property includes all available widgets- combining two widgets is typical for group widgets.
footer
Add text to the footer of the widget
footerAlign
Align the footer text to left, right, center.
placeholders
Specify a placeholder text to display if there is no data, for example - title: No data to display
split
The option to group the widgets vertically or horizontally. By default, widgets are grouped vertically.
Examples and code snippets
Group with chart and list (size: 4x4, split: horizontal)
For the 4x4 widget, we have a split option. In this property, a vertical or horizontal layout is possible for the widget. In this example, a combination of a chart and a list are used in a horizontal split.
Examples: See the full example using static data in GitHub.
widgets:
list-horizontal-4x4:
type: widget.group
options:
split: horizontal
children:
- type: widget.chart
options:
chart:
type: component.line-chart
options:
chart:
isAnimated: true
yAxis:
min: 0
labels:
format:
numberStyle: currency
compactDisplay: short
notation: compact
tickAmount: 8
isFirstTickHidden: true
isFirstLabelHidden: true
xAxis:
categories:
- Q1
- Q2
- Q3
- Q4
series:
- data: =[{"x":"Q1/20", "y":25000, "color":"color2"}, {"x":"Q2/20", "y":32000, "color":"color2"}, {"x":"Q3/20", "y":45000, "color":"color2"}, {"x":"Q4/20", "y":86000, "color":"color2"}]
name: Year 2019
animation:
direction: left-to-right
layout: area-gradient
dataLabels:
- isEnabled: true
- data: =[{"x":"Q1/20", "y":12000, "color":"color3"}, {"x":"Q2/20", "y":48000, "color":"color3"}, {"x":"Q3/20", "y":36000, "color":"color3"}, {"x":"Q4/20", "y":120000, "color":"color3"}]
name: Year 2020
animation:
direction: left-to-right
layout: area-gradient
dataLabels:
- isEnabled: true
legend:
isHidden: false
- type: widget.list
options:
data: [email protected]
item:
type: component.list-item
options:
divider: solid
title: [email protected]
subtitle: [email protected]
description: =$fromMillis($toMillis(@ctx.current.item.date), '[M01]/[D01]/[Y01]')
label:
title: [email protected] & '$'
isHidden: false
color:
- when: =(@ctx.current.item.positive = true)
color: color2
- when: =(@ctx.current.item.positive = false)
color: color4
leftElement:
element: icon
icon: [email protected] = true ? 'up' :'down'
style:
isPositive: [email protected]
isError: [email protected] = false ? "true" :"false"Group with chart and list (size: 4x4, split: vertical)
In this example, a combination of a chart and list was configured with a vertical split.
Examples: See the full example using static data in GitHub.
Group with avatar and list (size: 4x2)
This group widget represents a combination of the avatar with a list. After clicking on the widget, the list component is shown.
Examples: See the full example using static data in GitHub. See the full example using dynamic data in GitHub.
Datasources: See the full datasource for static data in GitHub. See the full datasource for dynamic data in GitHub.
Group with value and bar-chart (size: 2x4)
This group widget represents a combination of the value and bar-chart. After clicking on the widget, the bar- chart is shown.
Examples: See the full example using static data in GitHub. See the full example using dynamic data in GitHub.
Datasources: See the full datasource for static data in GitHub. See the full datasource for dynamic data in GitHub.
Last updated
Was this helpful?