Ninja Netmon BETA Dashboard Widget [2W x 1H] [Author: Brian Call] [License: MIT]

options.js

return {
  "name": "Ninja Netmon",
  "deviceMap": [
    { "deviceId": [530,531,532,533], "minimum": 1, "maximum": 1}, //Network In
    { "deviceId": [540,541,542,543], "minimum": 1, "maximum": 1}, //Network Out
    { "deviceId": 2000, "vendor": 0, "minimum": 1, "maximum": 1} //Sandbox
  ],
  "forceDeviceMapGroup": true
}

style.less

.column {
  width: 50%;
  height: 100%;
  top: 0%;
  position: relative;
  float: left;
  background: white;
}

.label {
  position: absolute;
  top: 80px;
  width: 100%;
  text-align: center;
  color: rgba(0,0,0,0.3);
}

.value {
  position: absolute;
  top: 45px;
  width: 100%;
  text-align: center;
  font-size: 45px;
  font-weight: bold;
  left: 70px;
  
  .units {
    font-size: 14px;
    font-weight: normal;
    vertical-align: super;
    position: relative;
    top: -10px;
  }
  
  .hitext {
    position: relative;
    display: inline-block;
    color: hsl(20,75%,65%);
    font-weight: bold;
    font-size: 10px;
    width: 50px;
    top: -13px;
    left: -44px;
    text-align: left;
  }
  
  .lotext {
    position: relative;
    display: inline-block;
    color: hsl(203,60%,56%);
    font-weight: bold;
    font-size: 10px;
    width: 50px;
    top: -2px;
    left: -107px;
    text-align: left;
  }
}

.sparkline {
  position: relative;
  top: 105px;
  width: 90%;
  height: 85px;
  margin-left: auto;
  margin-right: auto;
  line-height: 30px;
  border: 1px solid hsl(0,0%,90%);
  background: hsl(0,0%,95%);
  
  canvas {
    width: 100%;
    height: 30px;
  }
}

.netout {
  color: hsl(45,100%,45%);
}

.netin {
  color: hsl(203,60%,56%);
}

view.html

<div class="netout column">
  <div class="label">Upload</div>
  <div class="value">
    <span class="text"></span>
    <sup class="units">Kbps</sup>
    <span class="hitext"></span>
    <span class="lotext"></span>
  </div>
  <div class="sparkline"></div>
</div>
<div class="netin column">
  <div class="label">Download</div>
  <div class="value">
    <span class="text"></span>
    <sup class="units">Kbps</sup>
    <span class="hitext"></span>
    <span class="lotext"></span>
  </div>
  <div class="sparkline"></div>
</div>

widget.js

var sparkNetIn = element.find(".netin .sparkline");
var sparkNetOut = element.find(".netout .sparkline");

var dataNetIn = [];
var dataNetInTimestamps = [];
var dataNetOut = [];
var dataNetOutTimestamps = [];

/* 
Sparkline (graph) styling options -
  chartRangeMinX: Defines the min number of points on the X-axis. This helps set the scale.
  chartRanageMaxX: Defines the max number of points on the X-axis
    e.g. 3600 seconds (updates) = 1 hr * 60 min/hr * 60 sec/min
    This assumes a data refresh of 1 second
  chartRangeMin: Defines the min value for the Y-axis. This helps set the scale.
  chartRangeMax: Defines the max on the Y-axis. Left undefined on purpose. 
  width: Width of the graph data within the "canvas" - 
    This should be 100% unless you're going with a different style.
  height: Height of the graph data within the "canvas" -
    This should match the .sparkline "height" variable in the widget CSS.
*/
var sparklineOptionsNetIn = {
  width: '100%',
  height: '85px',
  chartRangeMin: 0,
  chartRangeMinX: 0,
  chartRangeMaxX: 100,
  drawNormalOnTop: false,
  fillColor: null,
  //fillColor: 'rgb(255,255,255)',
  maxSpotColor: 'rgb(255,0,0)',
  //lineColor: 'hsla(360,100%,100%,1.0)',
  //fillColor: 'hsla(360,100%,100%,1.0)',
  tooltipPrefix: ' Download: ',
  tooltipSuffix: 'Kb',
  //tooltipFormat: '<span style="color: {{color}}">&#9679;</span> {{y}} Kb'
  tooltipFormatter: function(sparkline, options, fields) {
    return '<div class="jsqfield"><span style="color: ' + fields.color + '">&#9679;</span>' + options.get('tooltipPrefix') + fields.y + options.get('tooltipSuffix') + ' @ ' + dataNetInTimestamps[fields.x] + '</div>';
  }
};

var sparklineOptionsNetOut = {
  width: '100%',
  height: '85px',
  chartRangeMin: 0,
  chartRangeMinX: 0,
  chartRangeMaxX: 100,
  drawNormalOnTop: false,
  fillColor: null,
  //fillColor: 'rgb(255,255,255)',
  //fillColor: 'hsla(360,100%,100%,1.0)',
  lineColor: 'hsl(45,100%,45%)',
  tooltipPrefix: ' Upload: ',
  tooltipSuffix: 'Kb',
  //tooltipFormat: '<span style="color: {{color}}">&#9679;</span> {{y}} Kb'
  tooltipFormatter: function(sparkline, options, fields) {
    return '<div class="jsqfield"><span style="color: ' + fields.color + '">&#9679;</span>' + options.get('tooltipPrefix') + fields.y + options.get('tooltipSuffix') + ' @ ' + dataNetOutTimestamps[fields.x] + '</div>';
  }
}

// Convert timestamp provided by driver
function sensor_timestamp(timestamp) {
  var localTime = new Date(timestamp);
  var month = localTime.getMonth() + 1;  // Month is 0-11, add 1 to make it 1-12
  var day = localTime.getDate();
  var year = localTime.getFullYear();
  var hours = localTime.getHours();
  var minutes = localTime.getMinutes();
  var seconds = localTime.getSeconds();
  
  // Months are 1-12, so add "0" in front of 1-9 to conform with ISO 8601
  if (month < 10) {
    month = "0" + month;
  };
  
  // Days are 1-31, so add "0" in front of 1-9 to conform with ISO 8601
  if (day < 10) {
    day = "0" + day;
  };
    
  // Seconds are returned 0-59, so add a "0" at the front if 0-9
  if (seconds < 10) {
    seconds = "0" + seconds;
  };
    
  // Minutes are returns 0-59, so add a "0" at the front if 0-9
  if (minutes < 10) {
    minutes = "0" + minutes;
  };
  
  // Put it together - type 1 = YYYY-MM-DD hh:mm:ss
  var timestamp_type1 = year + "-" + month + "-" + day + " " + hours + ":" + minutes + ":" + seconds;
  
  // Put it together - type 2 = hh:mm:ss (YYY-MM-DD)
  var timestamp_type2 = hours + ":" + minutes + ":" + seconds + " (" + year + "-" + month + "-" + day + ")";
  
  // Put it together - type 3 = hh:mm:ss YYY-MM-DD
  var timestamp_type3 = hours + ":" + minutes + ":" + seconds + " " + year + "-" + month + "-" + day;
  
  // Return timestamp for whatever purpose it's needed for
  return timestamp_type2;
};

/* Set download display values */
function SetNetIn(value, timestamp) {
  element.find(".netin .value .text").html(value);
  dataNetIn.push(value);
  dataNetInTimestamps.push(sensor_timestamp(timestamp));
  sparkNetIn.sparkline(dataNetIn, sparklineOptionsNetIn);
  element.find(".netin .value .hitext").html("HI: " + Math.max.apply(null, dataNetIn));
  element.find(".netin .value .lotext").html("LO: " + Math.min.apply(null, dataNetIn));
};

/* Set upload display values */
function SetNetOut(value, timestamp) {
  element.find(".netout .value .text").html(value);
  dataNetOut.push(value);
  dataNetOutTimestamps.push(sensor_timestamp(timestamp));
  sparkNetOut.sparkline(dataNetOut, sparklineOptionsNetOut);
  element.find(".netout .value .hitext").html("HI: " + Math.max.apply(null, dataNetOut));
  element.find(".netout .value .lotext").html("LO: " + Math.min.apply(null, dataNetOut));
};

/* Update display when new data is received */
scope.onData = function(data) {
  if ((data.D >=530 && data.D <= 533) || (data.G == 3 && data.D == 2000)) {
      /* Group ID 3 = Download, as defined in the ninja-netmon driver */
      SetNetIn(data.DA, data.timestamp);
  };
  
  if ((data.D >=540 && data.D <= 543) || (data.G == 4 && data.D == 2000)) {
      /* Group ID 4 = Upload, as defined in the ninja-netmon driver */
      SetNetOut(data.DA, data.timestamp);
  };
};

/* Determine the NIC in use from one of the ninja-netmon drivers -
   1) Grab the short name for the first device
      Example: "Ninja NetMon (wlan0 | Tx | Kbps)"
   2) Break the short name up based on spaces
      Example: "Ninja NetMon (wlan0 | Tx | Kbps)" => "(wlan0"
   3) Now remove the extra parenthesis
      Example: "(wlan0" => "wlan0"
   4) Set the title to the interface value parsed from the title
      Example: scope.Widget.settings.name = "<insert title here>"
*/
var widgetShortName = _.find(scope.Widget.devices, function(device) { return true; }).shortName;
var widgetNameArray = widgetShortName.split(' ');
var widgetNICArray = widgetNameArray[1].split('(');
var widgetNIC = widgetNICArray[1];

scope.Widget.settings.name = "Ninja NetMon (" + widgetNIC +")";