mobile menu

Summary Widget

You are here
PPF Summary Widget

PPF Summary widget

A summary widget is a great way to get an overview of how a certain data set is performing. Results are output to a table with colored 'traffic lights' depicting the success of each metric.

Below is an example of ALL the options available when defining a text widget. Some options are required, the options that are not required don't need to be defined unless something other than default is desired.

var ppf_widgets = {
    example_summary: { //Name of widget, these must be unique within the ppf_widget definitions
        ele: ['summarytable'], //REQUIRED
        data:  'speeddata', //REQUIRED
        type: 7, //REQUIRED
		  datadepend: ['voip','act'],
        lightColors: {
            good: '#42a328',
            warn: '#fbbb20',
            crit: '#b71919',
            na: '#333333'
        },
        bordersize: 1, //set to 0 to disable
        bordercolor: '#333333',
        metricsn: ['Download Speed', 'Upload Speed'],
        metricssubtitle: ['This is the download speed result', 'This is the upload speed result'],
        metrics: ['speed.dspeed','speed.uspeed'], //REQUIRED
        metricpfix: ['Mbps','Mbps'],
        url: ['',''],
        thresholds: 'default',
        depend: [ //REQUIRED (to define as blank use [[]])
            ['endofmonth', 'tuesday'],
            ['endofweek', 'wednesday']
        ]
    }
}

Defining a summary widget

Key Value
ele

Required. The element(s) defined here refer to HTML elements that should be present in the HTML page that pairs with the PPF. So, if the HTML element the table should appear in is

<div id='speedsum'></div>

the ele definition would be

ele: ['speedsum']
data

Required. Data refers to the data set name that should be used for the text. For example, if the following data set had been defined

var ppf_datasets = {
    data: {
        speeddata: {
            plugins: ['speed'],
            last: '1',
            unit: 'hour',
            by: 10
        }
    }
}

The data value for the summary widget would be...

data: 'speeddata'
datadepend
datadepend: ['voip','act']

If a widget is dependant on a certain data type then define a data dependency value. The format is an array. Common test types that can be defined are voip, act (which is Quality speed data), route, and capacity.

type

Required. Summary is type 7 and must be defined. When defined it should look like this

type: 7
lightColors:good

The color of the traffic light when results are considered good/a pass.

good: '#42a328'
lightColors:warn

The color of the traffic light when results are considered okay/a partial fail.

warn: '#fbbb20'
lightColors:crit

The color of the traffic light when results are considered bad/a fail.

crit: '#b71919'
lightColors:na

The color of the traffic light when results not available.

na: '#333333'
bordersize

Summary table border size in pixels. Set to 0 for no border.

bordersize: 1
bordercolor

Set the color of the border.

bordercolor: '#333333'
metricsn

The main metric names to appear in the summary table next to the traffic lights.

metricsn: ['Download Speed', 'Upload Speed']
metricssubtitle

The metric subtitles, if set, will appear underneath the main metric name (see metricsn above). If no subtitle is required simply set a pair of empty quotes.

metricssubtitle: ['This is the download speed result', '']
metrics

Required. This setting defines the metrics that will be displayed in the summary table. The format is testtype.testmetric.

Note that metrics defined here must be available for the chosen data set. For example, if the data set is getting speed data a VoIP metric won't be valid.

metrics: ['speed.dspeed','speed.uspeed']

For a list of available metrics by test type click here.

metricpfix

Most metrics have a postfix. For example a Speed test download speed result might be in Mbps. Use this setting to set the postfix for each metric.

metricpfix: ['Mbps','Mbps']
url

When a URL is defined it enables the summary row to be clicked, which will then open the URL in the same window. The position in the array determines the row that will be activated. For example the setting below would cause the first summary column to be clickable but the second not.

url: ['https://www.visualware.com', ''] //type array
thresholds

This setting defines the thresholds to use for the traffic lights. To clarify, the traffic lights will be colored according to whether a result is considered bad, okay, or good. MCS supports multiple threholds files, which must be specified when setting up data sets in order to use them.

thresholds: 'default'
depend Click here for dependency information.