trend

6min
The trend component is used to display the increase/decrease over the last period. We can format the increment/decrement number as a percentage, currency, or plain value of a number. 
Mostly used in:
﻿Chart widget﻿
﻿List widget﻿
﻿Value widget﻿
﻿Configuration options﻿
value - positive or negative numeric value
format - There is a selection of possible formats available for the main value of the widget
title and subtitle - A place for the descriptive title and subtitle of the trend
﻿Examples and code snippets ﻿
Trend on value widget
﻿
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: =@ctx.datasources.trend-dynamic.financevalue
      align: right
      format:
        numberStyle: currency
        currency: USD
      bottom: 
        type: component.trend
        options:
          title: =@ctx.datasources.trend-dynamic.title
          value: =@ctx.datasources.trend-dynamic.value
          format:
            numberStyle: currency
            currency: USD
      top: 
        type: component.titles
        options:
          icon: chart
          iconColor: color6
widgets:
  2x2:
    type: widget.value
    options:
      value: =@ctx.datasources.trend-dynamic.financevalue
      align: right
      format:
        numberStyle: currency
        currency: USD
      bottom: 
        type: component.trend
        options:
          title: =@ctx.datasources.trend-dynamic.title
          value: =@ctx.datasources.trend-dynamic.value
          format:
            numberStyle: currency
            currency: USD
      top: 
        type: component.titles
        options:
          icon: chart
          iconColor: color6
﻿
Trend on chart widget
﻿
This example shows finance statistics. The trend component, in this case, 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: =@ctx.datasources.series1
              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
﻿
In this case, the widget/list shows us a list of patients. We know that we have a total of 569 patients and the trend component shows us that we have added 12 more patients 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: =@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
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
﻿
See also 
﻿Developer reference﻿
﻿Widgets samples solution - It can be downloaded on Jigx Management (Quick Start section)
﻿