KPI Component

The KPIComponent allows you to visualize key performance indicators.

How to start

  1. To be able to use KPIComponent you first have to load the additional Dashboards plugin.

  2. Define a cell using a unique identifier for example cell: 'dashboard-col-0'.

You can find more information how to create a layout in dashboard here.

  1. The last thing that you have to do is to specify the type: 'KPI' and value: <value> in the component’s config. See the full example below.
Dashboards.board('container', {
    gui: {
        layouts: [{
            id: 'layout-1',
            rows: [{
                cells: [{
                    id: 'dashboard-col-0'
                }]
            }]
        }]
    },
    components: [{
        cell: 'dashboard-col-0',
        type: 'KPI',
        title: 'My KPI',
        value: 10
    }]
});

KPI with chart

KPIComponent allows end-user including the extra chart.

  1. To be able to use Highcharts in KPI you first have to load Highcharts as usual.
<script src="https://code.highcharts.com/dashboards/dashboards.js"></script>
<script src="https://code.highcharts.com/highcharts.js"></script>
<script src="https://code.highcharts.com/dashboards/modules/dashboards-plugin.js"></script>

Alternatively, you can also use the NPM package.

npm install highcharts
  1. The KPIComponent with chart uses styledMode by default, so you need to load also the set of CSS styles to display Highcharts properly.
@import url("https://code.highcharts.com/css/highcharts.css");

More information about styling charts, you can find in our docs.

  1. Define chart options for the KPI. For the full set of available chart options, see the Highcharts API
Dashboards.board('container', {
    gui: {
        layouts: [{
            id: 'layout-1',
            rows: [{
                cells: [{
                    id: 'dashboard-col-0'
                }]
            }]
        }]
    },
    components: [{
        cell: 'dashboard-col-0',
        title: 'My KPI',
        type: 'KPI',
        value: 10,
        chartOptions: {
          series: [{
              data: [734, 244, 685, 250, 920, 320, 200, 150]
          }]
        }
    }]
});

Working with data

You can either define static data, as you would do in the basic KPI Component (the value parameter), or use the dataPool to connect some dynamic data. The KPIComponent reflects the last value from the column (declared by columnName param) as a value itself.

Here is the example. Example of working with connector.

Dashboards.board('container', {
    dataPool: {
        connectors: [{
            id: 'value',
            type: 'CSV',
            options: {
                csv: `Date,Value
                2019-01-01,100
                2019-01-02,200
                2019-01-03,300
                2019-01-04,400`
            }
        }]
    },
    components: [{
        cell: 'kpi',
        type: 'KPI',
        title: 'Last day\'s value',
        columnName: 'Value',
        connector: {
            id: 'value'
        }
    }],
    gui: {
        layouts: [{
            rows: [{
                cells: [{
                    id: 'kpi'
                }]
            }]
        }]
    }
});

Configuring options

The value can be customized by:

  • valueFormat - a format string for the value text.
    valueFormat: '{value} km/h',
  • valueFormatter - a function to format the text of the value from scratch.
    valueFormatter: function () {
            return this.options.value + ' km/h';
        },

Sync with other components

The KPI Component allows user to sync the component with other components in dashboard or group. You can find more information about it in the sync chapter.

API options

For the full set of available options, see the API.

Edit this page