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

Core structure
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)

Widget with group of charts

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.

group-ChartList (static)

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"

grid-item

Group with chart and list (size: 4x4, split: vertical)

Vertical split widget group

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-ChartListVertical (static)

widgets:
  listVertical-4x4: 
    type: widget.group
    options:
      split: vertical
      children:
        - type: widget.chart
          options:
            chart: 
              type: component.line-chart
              options:
                xAxis:
                  isHidden: true
                yAxis:
                  max: 6
                  min: 3
                series:
                  - data: [email protected]
                    color: color1
                    layout: area-gradient
            top: 
              type: component.titles
              options:
                title: Solana
                subtitle: USDT
                align: left
                icon: currency-dollar
                iconColor: color2
            bottom: 
              type: component.trend
              options:
                title: 92,40 USDT / SOL          
                style:
                  isAlignRight: false
                  isValueBottom: true
                value: +21.2
                format:
                  numberStyle: unit
                  unit: percent
        - type: widget.list
          options:
            data: [email protected]
            item: 
              type: component.list-item
              options:
                title: [email protected]
                subtitle: [email protected]
                label:
                  title: [email protected] > 0 ? '+' & @ctx.current.item.change :@ctx.current.item.change
                  color:
                    - when: [email protected] > 0
                      color: color2
                    - when: [email protected] < 0
                      color: color4

grid-item

Group with avatar and list (size: 4x2)

Group widget with avatar and list

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-avatar-list (static)

widgets:
  groupAvatar-4x2: 
    type: widget.group
    options:
      children:
        - type: widget.avatar
          options:
            text: ''
            uri: https://images.unsplash.com/photo-1591084728795-1149f32d9866?ixlib=rb-1.2.1&ixid=MnwxMjA3fDB8MHxwaG90by1wYWdlfHx8fGVufDB8fHx8&auto=format&fit=crop&w=928&q=80
        - type: widget.list
          options:
            data: [email protected]
            item:
              type: component.list-item
              options:
                title: [email protected]
                leftElement: 
                  element: avatar
                  text: '' 
                  uri: [email protected]

group-avatar-list (Dynamic)

grid-item

Group with value and bar-chart (size: 2x4)

Group with value and bar-chart

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.

group-value-bar-chart (static)

widgets:
  groupValue-2x4: 
    type: widget.group
    options:
      children:
        - type: widget.value
          options:
            value: 7500
            top: 
              type: component.titles
              options:
                title: Daily revenue
        - type: widget.chart
          options:
            chart: 
              type: component.bar-chart
              options:
                series:
                  - data: [email protected]

group-value-chart (dynamic)

grid-item