mobile menu

PPF Table Widget

You are here
PPF Table Widget

PPF Table Widget

Below is an example of ALL the options available when defining a table. 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_table: { //Name of widget, these must be unique within the ppf_widget definitions
        ele: [ 'table1', 'table2'], //REQUIRED
        data:  'speeddata', //REQUIRED
        type: 2, //REQUIRED
		  datadepend: ['voip','act'],
        styling: {
            bordercolor: "rgba(66,66,66,1)",
            cellspacing: "2px", 
            cellpadding: "5px",
            fontsize: "13px",
            width: "100%",
            headWs: 'normal',
            rowWs: 'nowrap'
        },
        metricnames: ['Download','Upload'], //REQUIRED
        metrics: ['speed.dspeed','speed.uspeed'], //REQUIRED
        thresholds: 'default',
        url: ['',''],
        depend: [
            ['endofmonth', 'tuesday'],
            ['endofweek', 'wednesday']
        ]
    }
}

Defining a Table

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='speedtable'></div>

the ele definition would be

ele: ['speedtable']
data

Required. Data refers to the data set name that should be used for the table. 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 table 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. A table is type 2 and must be defined. When defined it should look like this

type: 2
styling:bordercolor

Defines the color of the table border. This includes the borders around the cells and rows.

bordercolor: '#333333'
styling:cellspacing

Defines the spacing between cells. This will also affect the border width:

cellspacing: '2px'
styling:cellpadding

Defines the padding within the cells.

cellpadding: '5px'
styling:fontsize

Defines the font-size to use for the table text.

fontsize: '13px'
styling:width

Defines the width of the table. This can be a pixel width or a percentage.

width: '100%'
styling:headWs

Defines whether the heading cells should wrap their contents.

headWs: 'normal' //nowrap should be used to stop wrapping
styling:rowWs

Defines whether the result cells should wrap their contents.

headWs: 'nowrap' //normal should be used to allow wrapping
metrics

Required. This setting defines the metrics that will be displayed in the table columns. 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.

metricnames

Required. This setting defines the friendly names that will be used for the table heading row. There should be a name defined for each metric (see metrics above).

metricnames: ['Download','Upload']
url

When a URL is defined it enables the graph to be clicked, which will then open the URL in the same window.

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

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

thresholds: 'default'
url

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

url: ['https://www.visualware.com', ''] //type array
depend Click here for dependency information.