Article Content

  1. KPI Element
  2. Progress KPI Element


KPI Element

type = "kpi"

The KPI Element is used to display one or more KPIs.


Properties

Property
Type
Description
Example Value
id
string
The unique id assigned to the Element. This is defined by the user and used to refer to the Element in layouts.
"myElementId"
source
string
The id of the Datasource to take the data from.
"myDatasourceId"
config
string
The actual KPI config. It can either be completely copy-pasted (including mock-data), or you can remove the data part, and instead use the source (configured outside of the highcharts config).
  "config": {
    "title": "Test KPI Visualiser",
    "subTitle": "My Untitled KPI",
    "footer": "footer",
    "layout": {
      "orientation": "horizontal",
      "large": false
    },
    "kpiName": {
      "column": "Target Column"
    },
    "unit": {
      "text": "Dollar"
    },
    "value": {
      "column": "Target Column"
    }
  }
config.
color
string
Property to change the color of the KPI value.
  "color": "green" // or
  "color": "rgb(255, 255, 255)" //or 
  "color": "rgba(255,255,255,0.9)"
config.
conditional

Colors
array
Conditions to set different colors to KPI values (type sensitive).
  "conditionalColors": [
    {
      "value": "red",
      "conditions": {
        "equal": 25,
        "notEqual": 45,
        "greater": 25
      }
    },
    {
      "value": "black",
      "conditions": {
        "less": 25,
        "greaterOrEqual": 100,
        "lessOrEqual": 15
      }
    },
    {
      "value": "lightblue",
      "conditions": {
        "in": [
          1,
          25,
          "ABC"
        ],
        "notIn": [
          35,
          40,
          "DEF"
        ]
      }
    },
    {
      "value": "blue",
      "conditions": {
        "regex": "[^0-9]"
      }
    }
  ]
config.
layout
object
Used to apply a horizontal or vertical layout and a small or large size to the KPI Element.
  "layout": {
    "orientation": "horizontal",
    "large": false
    // or "small": true
  }


Example

  "elements": [
    {
      "id": "kpi-test",
      "type": "kpi",
      "source": "raw_testSource",
      "config": {
        "title": "Test KPI",
        "subTitle": "My Untitled KPI",
        "footer": "footer",
        "layout": {
          "orientation": "horizontal",
          "large": false
        },
        "kpiName": {
          "column": "Categories"
        },
        "unit": {
          "text": "Dollar"
        },
        "value": {
          "column": "Berlin"
        }
      }
    },
    {
      "id": "frtTableSector",
      "type": "table",
      "source": "raw_testSource"
    },
    {
      "id": "frtTableCountry",
      "type": "table",
      "source": "raw_testSource",
      "syncSets": [
        {
          "syncSetId": "test",
          "applyFilters": true,
          "publishFilters": true
        }
      ],
      "config": {
        "columns": [
          {
            "name": "Country"
          }
        ]
      }
    },
    // .. more elements
  ]



Progress KPI Element

type = "progressKpi"

With this Element you can add a KPI which shows the current progress.


Properties

Property
Type
Description
Example Value
id
string
The unique id assigned to the Element. This is defined by the user and used to refer to the Element in layouts.
"myElementId"
type
string
Type of your Element.
"progressKpi"
source
string
The id of the Datasource to take the data from.
"myData
config
object
The configuration of a progress KPI Element. It contains all options that can be set to render your progress KPI.

If you set "column" and "number" the number will be displayed.
  "config": {
      // KPI orientation
      "orientation": "horizontal 
                      || vertical",
      // Color of progress bar and value 
      "color": "red",
      // KPI title
     "title": "Progress KPI",
      "kpiName": {
        // Name of the displayed KPI
        "text": "First KPI"
        // Column with the name 
        // of the displayed KPI 
        "column": "Col3"
      },
      "value": {
        // Value column of the KPI
        "column": "Col1",
        "number": 40
       }
    }
config.
conditional
Colors
array
Conditions to set different colors to KPI values (type sensitive).
  "conditionalColors": [
    {
      "value": "red",
      "conditions": {
        "equal": 25,
        "notEqual": 45,
        "greater": 25
      }
    },
    {
      "value": "black",
      "conditions": {
        "less": 25,
        "greaterOrEqual": 100,
        "lessOrEqual": 15
      }
    },
    {
      "value": "lightblue",
      "conditions": {
        "in": [
          1,
          25,
          "ABC"
        ],
        "notIn": [
          35,
          40,
          "DEF"
        ]
      }
    },
    {
      "value": "blue",
      "conditions": {
        "regex": "[^0-9]"
      }
    }
  ]