trend

4min

The trend component displays an increase or decrease over a period. The increment or decrement number can be formatted as a percentage, currency, or plain value.
Trend is available in the following content widgets: 
﻿Chart widget﻿
﻿List widget﻿
﻿Value widget﻿
﻿Configuration options﻿
Core structure
﻿
value
Positive or negative numeric value.
format
A selection of formats is available for the main value of the widget, for example, currency.
title
Display a title for the trend.
subtitle
Add a subtitle under the title text. Note: this text won't be displayed if isValueBottom is set to true
style
Properties used for component styling.
- isValueBottom - By default, the value is on the right of the text.  Set the property to true to move it underneath the text.
- isValueHidden - hides the number and only shows an icon indicating an up or down trend.
- isAlignRight - aligns everything to the right.
﻿Examples and code snippets ﻿
Trend on value widget
Upward trend
﻿
This example shows an increase in company turnover. The company has a turnover of over 24K USD, and the trend component shows that the increase for the last week is 1250 USD.
Examples:
See the full example using static data in GitHub.
See the full example using dynamic data in GitHub. 
trend-value (static)
trend-value (dynamic)
widgets:
  2x2:
    type: widget.value
    options:
      value: '23850'
      align: right
      format:
        numberStyle: currency
        currency: USD
      bottom: 
        type: component.trend
        options:
          title: 'Last week'
          value: +1250
          format:
            numberStyle: currency
            currency: USD
      top: 
        type: component.titles
        options:
          icon: chart
          iconColor: color6
widgets:
  2x2:
    type: widget.value
    options:
      value: '23850'
      align: right
      format:
        numberStyle: currency
        currency: USD
      bottom: 
        type: component.trend
        options:
          title: 'Last week'
          value: +1250
          format:
            numberStyle: currency
            currency: USD
      top: 
        type: component.titles
        options:
          icon: chart
          iconColor: color6
﻿
Trend on chart widget
Percentage trend
﻿
This example shows finance statistics. The trend component, indicates an increase in percent. Exactly 21% in the last period.
Examples:
See the full example using static data in GitHub. 
See the full example using dynamic data in GitHub. 
﻿
trend-chart (static)
trend-chart (dynamic)
widgets:
  4x4:
    type: widget.chart
    options:
      top:
        type: component.trend
        options:
          title: "$ 39,559.36"
          value: 0.21
          format:
            numberStyle: percent
          style:
            isAlignRight: true
            isValueBottom: true
      chart:
        type: component.line-chart
        options:
          chart:
            isAnimated: true
          yAxis:
            min: 0
            labels:
              format:
                numberStyle: currency
                compactDisplay: short
                notation: compact
            tickAmount: 4
            isFirstTickHidden: true
            isFirstLabelHidden: true
          xAxis:
            categories:
              - Q1
              - Q2
              - Q3
              - Q4
          series:
            - data: [email protected]
              name: Year 2019
              animation:
                  direction: left-to-right
              layout: area-gradient
              dataLabels:
                - isEnabled: true   
          legend:
            isHidden: false
widgets:
  4x4:
    type: widget.chart
    options:
      top:
        type: component.trend
        options:
          title: "$ 39,559.36"
          value: 0.21
          format:
            numberStyle: percent
          style:
            isAlignRight: true
            isValueBottom: true
      chart:
        type: component.line-chart
        options:
          chart:
            isAnimated: true
          yAxis:
            min: 0
            labels:
              format:
                numberStyle: currency
                compactDisplay: short
                notation: compact
            tickAmount: 4
            isFirstTickHidden: true
            isFirstLabelHidden: true
          xAxis:
            categories:
              - Q1
              - Q2
              - Q3
              - Q4
          series:
            - data: =@ctx.datasources.series1
              name: Year 2019
              animation:
                  direction: left-to-right
              layout: area-gradient
              dataLabels:
                - isEnabled: true   
          legend:
            isHidden: false
﻿
Trend on list widget
Patient trend over a period
﻿
In this example, the widget-list shows a list of patients. There are a total of 569 patients and the trend component shows that 12 more patients were added in the last period.
Examples:
See the full example using static data in GitHub.
See the full example using dynamic data in GitHub.
trend-list (static)
trend-list (dynamic)
widgets:
  2x2:
    type: widget.list
    options:
      data: [email protected]-dynamic
      top:
        type: component.trend
        options:
          title: "569 Patients"
          subtitle: "Patients"
          value: 12
          style:
            isAlignRight: false
            isValueBottom: true
            isValueHidden: false
      item:
        type: component.list-item
        options:
          title: [email protected] & ' ' & @ctx.current.item.lastname
          leftElement: 
            element: avatar
            text: =$substring(@ctx.current.item.firstname, 0, 1) & $substring(@ctx.current.item.lastname, 0, 1)
            uri: [email protected]
widgets:
  2x2:
    type: widget.list
    options:
      data: =@ctx.datasources.employees-dynamic
      top:
        type: component.trend
        options:
          title: "569 Patients"
          subtitle: "Patients"
          value: 12
          style:
            isAlignRight: false
            isValueBottom: true
            isValueHidden: false
      item:
        type: component.list-item
        options:
          title: =@ctx.current.item.firstname & ' ' & @ctx.current.item.lastname
          leftElement: 
            element: avatar
            text: =$substring(@ctx.current.item.firstname, 0, 1) & $substring(@ctx.current.item.lastname, 0, 1)
            uri: =@ctx.current.item.photo
﻿
﻿

Updated 08 Aug 2024

Did this page help you?

titles

actions (buttons)

Docs powered by Archbee

TABLE OF CONTENTS

Configuration options

Core structure

Examples and code snippets

Trend on value widget

Trend on chart widget

Trend on list widget

Core structure
value	Positive or negative numeric value.
format	A selection of formats is available for the main value of the widget, for example, currency.
title	Display a title for the trend.
subtitle	Add a subtitle under the title text. Note: this text won't be displayed if isValueBottom is set to true
style	Properties used for component styling. - isValueBottom - By default, the value is on the right of the text. Set the property to true to move it underneath the text. - isValueHidden - hides the number and only shows an icon indicating an up or down trend. - isAlignRight - aligns everything to the right.

trend

﻿Configuration options﻿

Core structure

﻿Examples and code snippets ﻿

Trend on value widget

Trend on chart widget

Trend on list widget

Configuration options

Examples and code snippets