mobile menu

PPF Indicator Widget

You are here
PPF Indicator Widget

PPF Indicator widget

Below is an example of ALL the options available when defining a indicator 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_indicator: { //Name of widget, must be unique within the ppf_widget definitions
      data: 'v24',
      datadepend: [],
      ele: ['mos1'],
      type: 3,
      width: "125px",
      height: "80px",
      thrgood: ["#3a8312", "#ffffff"],
      thrbad: ["#b21d1d", "#ffffff"],
      throkay: ["#dbb43f", "#000000"],
      textsize: "12px",
      textweight: "normal",
      textalign: "left",
      margin: "7px",
      cellpadding: "0px 0px 0px 10px", //top right bottom left
      border: "",
      metricsn: ['Outgoing MOS', 'Incoming MOS', 'Example', 'VoIP'],
      metrics: ['voip.mos', 'voip.dmos', 'exp.(||voip.mos|| * ||voip.dmos||).toFixed(1)', 'sum|voip.dmos,voip.mos,voip.loss,voip.dloss,voip.djitter,voip.jitter'],
      metricsubtitles: ['score', 'score', 'Calculation', 'Overall'],
      url: ['','','',''],
      depend: [[]]
    }
}

Defining a text 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='mos1'></div>

the ele definition would be

ele: ['mos1']
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: {
        v24: {
            plugins: ['speed'],
            last: '1',
            unit: 'hour',
            by: 10
        }
    }
}

The data value for the text would be...

data: 'v24'
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. Text is type 3 and must be defined. When defined it should look like this

type: 3
width

Width of the indicataors as they as they will appear on the page.

width: "200px"
height

Height of the indicataors as they will appear on the page.

height: "60px"
thrgood

This is an array of the background color (position 1) and text color (position 2) to be used for the indicator if the result is considered good, as determined by result thresholds set within MCS.

thrgood: ["#3a8312", "#ffffff"]
thrbad

This is an array of the background color (position 1) and text color (position 2) to be used for the indicator if the result is considered bad, as determined by result thresholds set within MCS.

thrbad: ["#b21d1d", "#ffffff"]
throkay

This is an array of the background color (position 1) and text color (position 2) to be used for the indicator if the result is considered average, as determined by result thresholds set within MCS.

throkay: ["#dbb43f", "#000000"]
textsize
textsize: "12px"

Choose the text size to use for the headings, sub-headings, and results.

textweight
textweight: "normal",

Text weight is how thin or bold a text will appear. Valid entries include thin, normal, and bold. The field also takes numerical values from 100-900 (thinest to boldest).

textalign
textalign: "left"

Determines the text alignment within the indicator. Valid entries are left, center, and right.

margin
margin: "7px"

The margin controls the distance between each indicator. As each metric specified in the widget appears as single indicator it's important to have a margin of more than 1px.

cellpadding
cellpadding: "0px 0px 0px 10px"

Padding creates space within the indicator. The padding setting applies to all three of the elements, heading, result, and sub-heading. The format is top, right, bottom, left, which allows different padding values to be used for different directions.

border
border: ""

To add a border around the indicators enter a numerical value.

url

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

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