Ninja NetMon Tx Single-wide BETA Dashboard Widget

options.js

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

var sparkDevice = element.find(".device .sparkline");
var dataDevice = [];

var sparklineOptions = {
  width: '100%',
  height: '85px',
  chartRangeMin: 0,
  chartRangeMinX: 0,
  chartRangeMaxX: 100,
  drawNormalOnTop: false,
  //fillColor: null,
  fillColor: 'hsla(360,100%,100%,1.0)',
  tooltipFormat: '<span style="color: {{color}}">&#9679;</span> {{y}} Kb'
}
 
function SetDevice(value) {
  element.find(".device .value .text").html(value);
  dataDevice.push(value);
  sparkDevice.sparkline(dataDevice, sparklineOptions);
  element.find(".device .value .hitext").html("HI: " + Math.max.apply(null, dataDevice));
  element.find(".device .value .lotext").html("LO: " + Math.min.apply(null, dataDevice));
}
 
scope.onData = function(data) {
   if ((data.D >=540 && data.D <= 543) || (data.G == 4 && data.D == 2000)) {
    SetDevice(data.DA);
  }
}
 
scope.Widget.settings.name = _.find(scope.Widget.devices, function(device) { return true; }).shortName;