Overview
A summary widget provides an overview of how a data set is performing. Results are output to a table with colored "traffic lights" depicting the success of each metric.
Full Example
Only options marked as required must be defined — all others use sensible defaults.
var ppf_widgets = {
example_summary: {
ele: ['summarytable'],
data: 'speeddata',
type: 7,
datadepend: ['voip', 'act'],
lightColors: {
good: '#42a328',
warn: '#fbbb20',
crit: '#b71919',
na: '#333333'
},
bordersize: 1,
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'],
metricpfix: ['Mbps', 'Mbps'],
url: ['', ''],
thresholds: 'default',
depend: [
['endofmonth', 'tuesday'],
['endofweek', 'wednesday']
]
}
}
Required Keys
| Key | Description |
ele |
Required. HTML element IDs where the summary should render. Example: ele: ['speedsum'] |
data |
Required. The data set name to use. Example: data: 'speeddata' |
type |
Required. Must be 7 for a summary widget. |
metrics |
Required. Metrics to display, in testtype.metric format. Must be available for the chosen data set. See available metrics. Example: metrics: ['speed.dspeed', 'speed.uspeed'] |
depend |
Required. Use [[]] for no dependencies. See dependency information. |
datadepend |
If the widget depends on a certain data type, define as an array. Common types: voip, act (Quality), route, capacity. |
Traffic Light Colors
| Key | Description | Default |
lightColors.good | Color when results are good / pass. | '#42a328' |
lightColors.warn | Color when results are okay / partial fail. | '#fbbb20' |
lightColors.crit | Color when results are bad / fail. | '#b71919' |
lightColors.na | Color when results are not available. | '#333333' |
Display Options
| Key | Description |
bordersize | Table border size in pixels. Set to 0 for no border. |
bordercolor | Border color. Example: '#333333' |
metricsn | Main metric names to appear next to the traffic lights. Example: ['Download Speed', 'Upload Speed'] |
metricssubtitle | Subtitles that appear below metric names. Use empty quotes for no subtitle. Example: ['Speed result', ''] |
metricpfix | Postfix for each metric result (e.g., unit of measurement). Example: ['Mbps', 'Mbps'] |
url | Makes summary rows clickable. Array position determines which row is activated. Example: ['https://www.visualware.com', ''] |
thresholds | Threshold file for traffic light color decisions. MCS supports multiple threshold files, which must be specified when setting up data sets. Example: 'default' |