MCS Publishing | PPF Indicator Widget

Only options marked as required must be defined — all others use sensible defaults.

var ppf_widgets = {
    example_indicator: {
        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",
        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: [[]]
    }
}

Key	Description
`ele`	Required. HTML element IDs where the indicators should render. Example: `ele: ['mos1']`
`data`	Required. The data set name to use. Example: `data: 'v24'`
`type`	Required. Must be `3` for an indicator widget.
`metrics`	Required. Metrics to display, in `testtype.metric` format. Also supports expressions and `sum\|` aggregations. See available metrics.
`datadepend`	If the widget depends on a certain data type, define as an array. Common types: `voip`, `act` (Quality), `route`, `capacity`.

Each threshold setting is an array of two colors: background color (position 1) and text color (position 2), as determined by result thresholds set within MCS.

Key	Description	Example
`thrgood`	Colors when the result is good.	`["#3a8312", "#ffffff"]`
`thrbad`	Colors when the result is bad.	`["#b21d1d", "#ffffff"]`
`throkay`	Colors when the result is average.	`["#dbb43f", "#000000"]`

Key	Description	Example
`width`	Width of each indicator.	`"125px"`
`height`	Height of each indicator.	`"80px"`
`textsize`	Font size for headings, sub-headings, and results.	`"12px"`
`textweight`	Font weight. Accepts `thin`, `normal`, `bold`, or numerical values 100–900.	`"normal"`
`textalign`	Text alignment within the indicator: `left`, `center`, or `right`.	`"left"`
`margin`	Distance between each indicator. Should be more than 1px when multiple metrics are defined.	`"7px"`
`cellpadding`	Internal padding for all three elements (heading, result, sub-heading). Format: top right bottom left.	`"0px 0px 0px 10px"`
`border`	Border around indicators. Set a numerical value or leave empty for no border.	`""`
`metricsn`	Display names for each metric indicator.	`['Outgoing MOS', 'Incoming MOS']`
`metricsubtitles`	Subtitles appearing below each metric name.	`['score', 'score']`
`url`	Makes individual indicators clickable. Array position determines which indicator is activated.	`['https://...', '']`
`depend`	Widget dependencies. See dependency information.	`[[]]`

PPF Indicator Widget

Full Example

Required Keys

Threshold Colors

Display Options