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 ﻿
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)
grid-item
# Grid-item for the static jig.
children:
  - type: component.grid-item
    options:
      size: "2x2"
      children: 
        type: component.jig-widget
        options:
          jigId: trend-in-value-widget
          widgetId: trend-value
# Grid-item for the static jig.
children:
  - type: component.grid-item
    options:
      size: "2x2"
      children: 
        type: component.jig-widget
        options:
          jigId: trend-in-value-widget
          widgetId: trend-value
﻿
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)
grid-item
# Grid-item for the static jig.
children:
  - type: component.grid-item
    options:
      size: "4x4"
      children: 
        type: component.jig-widget
        options:
          jigId: trend-in-chart-widget
          widgetId: trendStatic-4x4
# Grid-item for the static jig.
children:
  - type: component.grid-item
    options:
      size: "4x4"
      children: 
        type: component.jig-widget
        options:
          jigId: trend-in-chart-widget
          widgetId: trendStatic-4x4
﻿
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)
YAML
# Grid-item for the static jig.
children:
  - type: component.grid-item
    options:
      size: "2x2"
      children: 
        type: component.jig-widget
        options:
          jigId: trend-in-list-widget
          widgetId: trendList-2x2
# Grid-item for the static jig.
children:
  - type: component.grid-item
    options:
      size: "2x2"
      children: 
        type: component.jig-widget
        options:
          jigId: trend-in-list-widget
          widgetId: trendList-2x2
﻿
﻿

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.