Ninjablock Health Widget (CPU/RAM/Disk) for the BETA dashboard

options.js

return {
  "name": "Ninja Health",
  "deviceMap": [
    { "deviceId": [500,501,502,503], "minimum": 1, "maximum": 1},
    { "deviceId": [520,521,522,523], "minimum": 1, "maximum": 1},
    { "deviceId": 2000, "minimum": 1, "maximum": 1}
  ],
  "forceDeviceMapGroup": true
}

style.less

/* GENERAL */
background: white;

/* LAYOUT */
/* Three column layout from: http://www.dynamicdrive.com/style/layouts/item/css-liquid-layout-33-fluid-fluid-fluid/ */
#centerwrapper {
  float: left;
  width: 100%;
}

#leftcolumn {
  float: left;
  width: 37%; /* Make the left column a little wider for CPU usage: Width of left column in percentage */
  margin-left: -100%;
  /* color: hsl(45,100%,45%); /* Ninjablock gold */
  color: hsl(94,59%,50%); /* Green */
}

#centercolumn {
  margin: 0 42% 0 42%; /* Margins for content column. Should be "0 RightColumnWidth 0 LeftColumnWidth */
  color: hsl(45,100%,45%); /* Ninjablock gold */
}

#rightcolumn {
  float: left;
  width: 33%; /*Width of right column in pixels */
  margin-left: -33%; /* Set margin to that of -(RightColumnWidth) */
  /* color: hsl(45,100%,45%); /* Ninjablock gold */
  /* color: hsl(207, 59%, 50%); /* Blue */
  color: hsl(184, 59%, 50%); /* Turquoise */
}

.innertube {
  /* Margins for inner DIV inside each column (to provide padding) - originally 10px */
  /* margin: 0px; */
  margin-top: 0;
  margin-bottom: 0;
  width: 52%;
  margin-left: auto;
  margin-right: auto;
}

/* VALUE DISPLAY OPTIONS */
.value {
  position: relative;
  top: 35px;
  text-align: left;
  /* text-align: center; /* CENTER LAYOUT */
  font-size: 2.2em; /* 25px */
  font-weight: bold;
  left: 0px;
  width: 100%;
  white-space: nowrap;
  
  .units {
    /* font-size: 12px; */
    font-size: 0.50em;
    font-weight: normal;
    vertical-align: super;
    position: relative;
    top: 0px;
    left: -6px;
  }
  
  .hiText {
    position: relative;
    display: block;
    /* color: hsl(20,75%,65%); /* Subdued red */
    color: hsl(0, 89%, 70%); /* Brighter red */
    font-weight: bold;
    font-size: 0.38em; /* 10px */
    line-height: 1em;
    top: 9px;
    left: 0px;
    /* left: -6px; /* CENTER LAYOUT */
  }
  
  .loText {
    position: relative;
    display: block;
    color: hsl(203,60%,56%); /* Blue */
    font-weight: bold;
    font-size: 0.38em; /* 10px */
    line-height: 1em;
    top: 10px;
    left: 0px;
    /* left: -6px; /* CENTER LAYOUT */
  }
  
  .label {
    position: relative;
    display: block;
    color: hsl(0,0%,60%); /* Grey */
    font-weight: normal;
    font-size: 0.3em; /* NORMAL LAYOUT */
    line-height: 1em;
    width: 100%;
    top: 13px;
    overflow: visible;
    /* left: -6px; /* CENTER LAYOUT */
    /* text-align: right; /* VERTICAL TEXT */
    /* left: -50px; /* VERTICAL TEXT */
    /* VERTICAL TEXT
    writing-mode:tb-rl;
      -webkit-transform:rotate(-90deg);
       -moz-transform:rotate(-90deg);
       -o-transform: rotate(-90deg);
    */
  }
}

/* SPARKLINE CSS */
.sparkline {
  clear: both;
  position: relative;
  /* top: 104px; /* When using absolute positioning*/
  top: 55px;
  width: 94%;
  float: center;
  margin-left: auto; /* Remove if absolute positioning is used */
  margin-right: auto; /* Remove if absolute positioning is used */
  height: 97px;
  line-height: 30px;
  border: 1px solid hsl(0,0%,90%);
  background: hsl(0,0%,95%);
  
  canvas {
    width: 100%;
    height: 30px;
  }
}

view.html

<div class="widget">
  
  <!-- Center column -->
  <div id="centerwrapper">
    <div id="centercolumn">
      <div class="innertube">
        <div class="value">
          <span class="text"></span>
          <sup class="units">%</sup>
          <span class="hiText"></span>
          <span class="loText"></span>
          <span class="label"></span>
        </div>
      </div>
    </div>
  </div>
  
  <!-- Left column -->
  <div id="leftcolumn">
    <div class="innertube">
      <div class="value">
        <span class="text"></span>
        <sup class="units">%</sup>
        <span class="hiText"></span>
        <span class="loText"></span>
        <span class="label"></span>
      </div>
    </div>
  </div>
  
  <!-- Right column -->
  <div id="rightcolumn">
    <div class="innertube">
      <div class="value">
        <span class="text"></span>
        <sup class="units">%</sup>
        <span class="hiText"></span>
        <span class="loText"></span>
        <span class="label"></span>
      </div>
    </div>
  </div>
  
  <!-- Graphs -->
  <div class="sparkline"></div>
</div>

widget.js

/* Find the sparkline */
var sparkCPU = element.find(".widget .sparkline");
var sparkRAM = element.find(".widget .sparkline");
var sparkDiskspace = element.find(".widget .sparkline");

/* Sensor data arrays */
var dataCPU = [];
var dataRAM = [];
var dataDiskspace = [];

/* Set labels for each column */
element.find(".widget #leftcolumn .innertube .value .label").html("CPU");
element.find(".widget #centerwrapper #centercolumn .innertube .value .label").html("RAM");
element.find(".widget #rightcolumn .innertube .value .label").html("DISK");

/* Sparkline options for the CPU graph */
var sparklineOptionsCPU = {
  width: '100%',
  height: '100%',
  chartRangeMin: 0,
  chartRangeMax: 100,
  chartRangeMinX: 0,
  chartRangeMaxX: 100,
  drawNormalOnTop: false,
  fillColor: null,
  lineColor: 'hsl(94,59%,50%)',
  tooltipFormat: '<span style="color: {{color}}">&#9679;</span> CPU use: {{y}}%',
  disableHiddenCheck: true
};

/* Sparkline options for the RAM graph */
var sparklineOptionsRAM = {
  composite: true,
  width: '100%',
  height: '100%',
  chartRangeMin: 0,
  chartRangeMax: 100,
  chartRangeMinX: 0,
  chartRangeMaxX: 100,
  drawNormalOnTop: false,
  fillColor: null,
  lineColor: 'hsl(45,100%,45%)',
  tooltipFormat: '<span style="color: {{color}}">&#9679;</span> RAM use: {{y}}%',
  disableHiddenCheck: true
};

/* Sparkline options for the Diskspace graph */
var sparklineOptionsDiskspace = {
  composite: true,
  width: '100%',
  height: '100%',
  chartRangeMin: 0,
  chartRangeMax: 100,
  chartRangeMinX: 0,
  chartRangeMaxX: 100,
  drawNormalOnTop: false,
  fillColor: null,
  lineColor: 'hsl(184, 59%, 50%)',
  tooltipFormat: '<span style="color: {{color}}">&#9679;</span> Disk use: {{y}}%',
  disableHiddenCheck: true
};

/* Update CPU display */
function SetCPU(value) {
  dataCPU.push(value);

  element.find(".widget #leftcolumn .innertube .value .text").html(value);
  element.find(".widget #leftcolumn .innertube .value .hiText").html("HI: " + Math.max.apply(null, dataCPU));
  element.find(".widget #leftcolumn .innertube .value .loText").html("LO: " + Math.min.apply(null, dataCPU));
};

/* Update RAM display */
function SetRAM(value) {
  dataRAM.push(value);
  
  element.find(".widget #centerwrapper #centercolumn .innertube .value .text").html(value);
  element.find(".widget #centerwrapper #centercolumn .innertube .value .hiText").html("HI: " + Math.max.apply(null, dataRAM));
  element.find(".widget #centerwrapper #centercolumn .innertube .value .loText").html("LO: " + Math.min.apply(null, dataRAM));
};

/* Update Diskspace display */
function SetDiskspace(value) {
  dataDiskspace.push(value);

  element.find(".widget #rightcolumn .innertube .value .text").html(value);
  element.find(".widget #rightcolumn .innertube .value .hiText").html("HI: " + Math.max.apply(null, dataDiskspace));
  element.find(".widget #rightcolumn .innertube .value .loText").html("LO: " + Math.min.apply(null, dataDiskspace));
};

/* Call appropriate update functions when data is received */
scope.onData = function(data) {
  // CPU usage IDs
  if (data.D >= 500 && data.D <= 503) {
      SetCPU(data.DA);
  };
  
  // RAM usage IDs
  if (data.D >= 520 && data.D <= 523) {
    SetRAM(data.DA);
  };
  
  // Diskspace ID (still uses generic device ID 2000)
  if (data.D == 2000) {
    var diskVal = data.DA.split('%');
    SetDiskspace(diskVal[0]);
  };
  
  // Update all of the sparklines onData() instead of inside each set function
  sparkCPU.sparkline(dataCPU, sparklineOptionsCPU);
  sparkRAM.sparkline(dataRAM, sparklineOptionsRAM);
  sparkDiskspace.sparkline(dataDiskspace, sparklineOptionsDiskspace);
};

/* Widget title, manually set since none of the shortnames for the associated devices will do */
scope.Widget.settings.name = "Health@ninjablock";