MCS Publishing | 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.