Ninja NetMon Universal Single-wide BETA Dashboard Widget [Author: Brian Call] [License: MIT]

options.js

return {
  "name": "Ninja NetMon (NIC | Rx | Kbps)",
  "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

background: white;

h4 { 
  color: rgba(0,0,0,0.3);
  font-size: 15px;
  margin: 10px 10px;
}

.value {
  position: absolute;
  top: 60px;
  width: 100%;
  text-align: center;
  font-size: 45px;
  font-weight: bold;
  left: 70px;
  
  .units {
    position: relative;
    top: -10px;
    vertical-align: super;
    font-size: 14px;
    font-weight: normal;
  }
  
  .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: absolute;
  top: 110px;
  width: 92%;
  height: 85px;  
  left: 8px; 
  line-height: 30px;
  border: 1px solid hsl(0,0%,90%);
  background: hsl(0,0%,95%);
  
  canvas {
    width: 100%;
    height: 30px;
  }
}

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

view.html

<br><br>
<div class="device">
  <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

/**
  * Identify various elements for re-use in functions
  */
var sparkDevice = element.find(".device .sparkline");
var deviceHiText = element.find(".device .value .hiText");
var deviceLoText = element.find(".device .value .loText");

/**
  * Setup device data arrays for value storage and high/low markers
  */
var dataDeviceName = "";
var dataDevice = [];
var dataDeviceTimestamps = [];
var dataDeviceHiLo = ({ 
  "high": -1,
  "highTime": "",
  "low": 999,
  "lowTime": ""
});


/**
  * Opentip: Options
  */
Opentip.styles.normalToolTip = {
  "extends": "standard",
  stem: true,
  tipJoint: "bottom",
  showOn: "mouseover",
  borderRadius: 0,
  borderWidth: 1,
  borderColor: "#FFFFFF",
  showEffect: "appear",
  hideEffect: "appear",
  showEffectDuration: 0.0,
  hideEffectDuration: 0.0,
  stemBase: 10,
  stemLength: 5,
  background: "rgba(0,0,0,0.6)",
  removeElementsOnHide: true,
  offset: [0, 15],
  escapeContent: false
};

/**
  * Opentip: Creation
  */
//var ELEMENT_NAME = element.find("#ELEMENT_NAME");
//var TIP_NAME = new Opentip(TARGET_ELEMENT_NAME, { style: "TIP_STYLE" });
var opentipDeviceHiText = new Opentip(deviceHiText, { style: "normalToolTip" });
var opentipDeviceLoText = new Opentip(deviceLoText, { style: "normalToolTip" });

/**
  * VARIABLE: Max Array Length
  */
var maxArrayLen = 200;

/**
  * Sparkline style
  */
var sparklineOptions = {
  width: '100%',
  height: '85px',
  chartRangeMin: 0,
  chartRangeMinX: 0,
  chartRangeMaxX: 100,
  drawNormalOnTop: false,
  fillColor: null,
  lineColor: 'hsl(203,60%,56%)',
  tooltipPrefix: ' Device: ',
  tooltipSuffix: ' Kbps',
  tooltipFormatter: function(sparkline, options, fields) {
    return '<div class="jsqfield"><span style="color: ' + 
      fields.color + 
      '">&#9679;</span>' +
      options.get('tooltipPrefix') +
      fields.y + 
      options.get('tooltipSuffix') + 
      ' @ ' + 
      dataDeviceTimestamps[fields.x] + 
      '</div>';
  }
};

/**
  * FUNCTION: sensor_timestamp(timestamp)
  * DESCRIPTION: 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;
  };
  
  // Hours are returned 0-23, so add a "0" at the front if 0-9
  if (hours < 10) {
    hours = "0" + hours;
  };
  
  // 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
  return timestamp_type2;
};

function SetDevice(value, timestamp) {
  // Update the device values array
  dataDevice.push(value);
  
  //Update timestamp array
  dataDeviceTimestamps.push(sensor_timestamp(timestamp));
  
  // Check for new high value
  if ( Math.max.apply(null, dataDevice) > dataDeviceHiLo.high ) {
    dataDeviceHiLo.high = Math.max.apply(null, dataDevice);
    dataDeviceHiLo.highTime = timestamp;
  };
  
  // Check for new low value
  if ( Math.min.apply(null, dataDevice) < dataDeviceHiLo.low ) {
    dataDeviceHiLo.low = Math.min.apply(null, dataDevice);
    dataDeviceHiLo.lowTime = timestamp;
  };
  
  // Update the display
  element.find(".device .value .text").html(value);
  deviceHiText.html("HI: " + dataDeviceHiLo.high);
  deviceLoText.html("LO: " + dataDeviceHiLo.low);
  
  // Clean up the arrays, if necessary
  if (dataDevice.length > maxArrayLen || dataDeviceTimestamps.length > maxArrayLen) {
    dataDevice = dataDevice.slice(dataDevice.length-maxArrayLen,dataDevice.length);
    dataDeviceTimestamps = dataDeviceTimestamps.slice(dataDeviceTimestamps.length-maxArrayLen,dataDeviceTimestamps.length);
  };
};

scope.onData = function(data) {
  // If sensor is a network sensor or custom sandbox device... update the display
  // 530 - 533 = Network In (download)
  if ( data.D >=530 && data.D <= 533 ) {
    dataDeviceName = "Download";
    sparklineOptions.tooltipPrefix = " Download: ";
    SetDevice(data.DA, data.timestamp);  
  };
  
  // 540 - 543 = Network Out (upload)
  if ( data.D >=540 && data.D <= 543 ) {
    dataDeviceName = "Upload";
    sparklineOptions.tooltipPrefix = " Upload: ";
    SetDevice(data.DA, data.timestamp);  
  };
  
  // Update the Sparkline
  sparkDevice.sparkline(dataDevice, sparklineOptions);
};

/**
 * TOOLTIP HANDLER: HIGH VALUE
 */
deviceHiText.on("mouseover", function() {
  // Set the cursor to an arrow ("default")
  $(this).css("cursor", "default");
  
  // Opentip: Define contents - depends on timestamp function and high/low value integration
  opentipDeviceHiText.setContent('<span style="color: rgb(255,255,255); font-family: arial,sans-serif; font-size: 10px">' + 
                      'HI: ' + 
                      dataDeviceHiLo.high + 
                      ' Kbps @ ' + 
                      sensor_timestamp(dataDeviceHiLo.highTime) + 
                      '</span>');
});
 
/**
 * TOOLTIP HANDLER: LOW VALUE
 */
deviceLoText.on("mouseover", function() { 
  // Set the cursor to an arrow ("default")
  $(this).css("cursor", "default");
  
  // Opentip: Define contents - depends on timestamp function and high/low value integration
  opentipDeviceLoText.setContent('<span style="color: rgb(255,255,255); font-family: arial,sans-serif; font-size: 10px">' + 
                      'LO: ' + 
                      dataDeviceHiLo.low + 
                      ' Kbps @ ' + 
                      sensor_timestamp(dataDeviceHiLo.lowTime) + 
                      '</span>');
});

// Set the widget name from the driver "name" field
scope.Widget.settings.name = _.find(scope.Widget.devices, function(device) { return true; }).shortName;