website logo
👥 Community🎯 Samples on GitHub🚦System Status
💡 Guides
🚀 Examples
🍕 Developer Reference
⚡️ Changelog
🎥 Video Library
Navigate through spaces
⌘K
Examples Overview
Setting up your solution
Jig Types
Components
Datasource
Actions
Preview
Widgets
Expressions
Aggregation
Boolean
Comparison Operators
Date & Time
Path Operators
Functional Programming
Jigx Variables
Predicate Queries
String
Docs powered by
Archbee
Widgets
content of widgets

group

7min

The group widget can be used for combinations of your widgets.

The group widget can be used only on sizes: 2x4, 4x2, and 4x4.

Configuration options

The core structure includes: children

  • The children property includes all widgets available - the combination of 2 of them is typical for group widget

Examples and code snippets 

The group with Chart and List (size: 4x4, split: horizontal)

Document image




For the 4x4 widget, we have a split option. In this property, we can choose a vertical or horizontal layout for the widget. In this case, we chose a combination of a chart and a list in a horizontal split.

Examples:

See the full example using static data in GitHub.



group-ChartList (static)
|
widgets:
  "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: =@ctx.datasources.transactions
            item: 
              type: component.list-item
              options:
                divider: solid
                title: =@ctx.current.item.company
                subtitle: =@ctx.current.item.description
                description: =$fromMillis($toMillis(@ctx.current.item.date), '[M01]/[D01]/[Y01]')
                label:
                  title: =@ctx.current.item.amount & '$'
                  isHidden: false
                  color:
                    - when: =(@ctx.current.item.positive = true)
                      color: color2
                    - when: =(@ctx.current.item.positive = false)
                      color: color4
                leftElement: 
                  element: icon
                  icon: =@ctx.current.item.positive = true ? 'up' :'down'
                style:
                  isPositive: =@ctx.current.item.positive
                  isError: =@ctx.current.item.positive = false ? "true" :"false"


The group with Chart and List (size: 4x4, split: vertical)

Document image


Examples:

See the full example using static data in GitHub.

group-ChartListVertical (static)
|
widgets:
  "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: =@ctx.datasources.chart
                    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: =@ctx.datasources.list
            item: 
              type: component.list-item
              options:
                title: =@ctx.current.item.title
                subtitle: =@ctx.current.item.subtitle
                label:
                  title: =@ctx.current.item.change > 0 ? '+' & @ctx.current.item.change :@ctx.current.item.change
                  color:
                    - when: =@ctx.current.item.change > 0
                      color: color2
                    - when: =@ctx.current.item.change < 0
                      color: color4


In this case, we also selected a combination of graph and list. This example is in a vertical split.

The group with Avatar and List (size: 4x2)

Document image


This group widget represents a combination of the avatar with the list. After clicking on the widget, there is a list component.

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)
group-avatar-list (Dynamic)
|
widgets:
  4x2: 
    type: widget.group
    options:
      children:
        - type: widget.avatar
          options:
            text: ''
            uri: =@ctx.datasources.avatar-dynamic.photo
        - type: widget.list
          options:
            data: =@ctx.datasources.employees-dynamic
            item:
              type: component.list-item
              options:
                title: =@ctx.current.item.firstname
                subtitle: =@ctx.current.item.lastname
                leftElement: 
                  element: avatar
                  text: '' 
                  uri: =@ctx.current.item.photo


Group with Value and Bar chart (size: 2x4)

Document image


This group widget represents a combination of the avatar with the list. After clicking on the widget, there is a bar chart.

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)
group-value-chart (dynamic)
|
widgets:
  2x4: 
    type: widget.group
    options:
      children:
        - type: widget.value
          options:
            value: =@ctx.datasources.value-dynamic.value
            top: 
              type: component.titles
              options:
                title: Daily revenue
        - type: widget.chart
          options:
            chart: 
              type: component.bar-chart
              options:
                series:
                  - data: =@ctx.datasources.series1-dynamic




See also

  • Developer reference
  • Widgets samples solution - It can be downloaded on Jigx Management (Quick Start section)



Updated 20 Sep 2023
Did this page help you?
PREVIOUS
trend
NEXT
actions
Docs powered by
Archbee
TABLE OF CONTENTS
Configuration options
Examples and code snippets
The group with Chart and List (size: 4x4, split: horizontal)
The group with Chart and List (size: 4x4, split: vertical)
The group with Avatar and List (size: 4x2)
Group with Value and Bar chart (size: 2x4)
See also
Docs powered by
Archbee
Copyright © 2023 Jigx, Inc. All rights reserved. Terms of Service