complete highchart dynamic graph for numerical values

domain-server/resources/web/stats/index.shtml

@@ -8,4 +8,7 @@
 <script src='js/stats.js'></script>
 <script src='js/json.human.js'></script>
 <script src='js/highcharts-custom.js'></script>
+<script src='/js/underscore-min.js'></script>
+<script src='js/underscore-keypath.min.js'></script>
+<script src='/js/bootbox.min.js'></script>
 <!--#include virtual="page-end.html"-->

domain-server/resources/web/stats/js/stats.js

@@ -5,6 +5,8 @@ function qs(key) {
 }
 
 $(document).ready(function(){
+  var currentHighchart;
+
   // setup a function to grab the nodeStats
   function getNodeStats() {
     
@@ -20,6 +22,16 @@ $(document).ready(function(){
       var stats = JsonHuman.format(json);
 
       $('#stats-container').html(stats);
+      if (currentHighchart) {
+        // get the current time to set with the point
+        var x = (new Date()).getTime();
+
+        // get the last value using underscore-keypath
+        var y = _(json).valueForKeyPath(graphKeypath); 
+        
+        var shift = currentHighchart.series[0].length > 20;
+        currentHighchart.series[0].addPoint([x, y], true, shift);
+      }
     }).fail(function(data) {
       $('#stats-container th').each(function(){
         $(this).addClass('stale');
@@ -31,9 +43,56 @@ $(document).ready(function(){
   getNodeStats();
   // grab the new assignments JSON every second
   var getNodeStatsInterval = setInterval(getNodeStats, 1000);
+  
+  var graphKeypath = "";
+  
+  // set the global Highcharts option
+  Highcharts.setOptions({
+    global: {
+      useUTC: false
+    }
+  });
+  
+  // add a function to help create the graph modal
+  function createGraphModal() {
+    bootbox.dialog({
+      title: graphKeypath,
+      message: "<div id='highchart-container'></div>",
+      buttons: {}
+    });
 
+    currentHighchart = new Highcharts.Chart({
+      chart: {
+        renderTo: 'highchart-container',
+        defaultSeriesType: 'line'
+      },
+      title: {
+        text: ''
+      },
+      xAxis: {
+        type: 'datetime',
+        tickPixelInterval: 150
+      },
+      yAxis: {
+        title: {
+          text: 'Value'
+        }
+      },
+      legend: {
+        enabled: false
+      },
+      series: [{
+        name: graphKeypath,
+        data: []
+      }]
+    });
+  }
+ 
   // handle clicks on numerical values - this lets the user show a line graph in a modal
   $('#stats-container').on('click', '.jh-type-number', function(){
-    var keypath = $(this).data('keypath');
+    graphKeypath = $(this).data('keypath');
+    
+    // setup the new graph modal
+    createGraphModal();
   });
 });

domain-server/resources/web/stats/js/underscore-keypath.min.js

@@ -0,0 +1 @@
+!function(){function t(t,r,e,n){return(0!==n?".":"")+r.replace(/\./g,"«dot»")}function r(r){"use strict";if("object"==typeof r&&"Array"===r.constructor.name)return Array.prototype.slice.call(r);if("string"==typeof r){r=r.replace(/\.\./g,"«dot»"),r=r.replace(/\['(([^']|\\')*)'\]/g,t),r=r.replace(/\["(([^"]|\\")*)"\]/g,t),r=r.replace(/([$A-Za-z_][0-9A-Za-z_$]*)\(\)/,"$1");var e=r.split(".");return e=s(e).map(function(t){return t.replace(/«dot»/g,".")})}throw new Error("keypath must be an array or a string")}function e(t){"use strict";return t=null===t?"":String(t),t.charAt(0).toUpperCase()+t.slice(1)}function n(t,r){"use strict";var e=y[r];return e?e(t):void 0}function u(t,r,e){"use strict";if(!(t instanceof Array))return void 0;var n=l[r];return n?n(t,e):void 0}function i(t,r){"use strict";if(""===r)return t;if(0===r.indexOf("@"))return n(t,r);var u=t["get"+e(r)];return void 0===u&&(u=t["is"+e(r)]),void 0===u&&(u=t[r]),"function"==typeof u&&(u=u.call(t)),u}function o(t,r){"use strict";return""===r?!0:"function"==typeof t["get"+e(r)]||"function"==typeof t["is"+e(r)]||s.has(t,r)}function a(t,r,n){"use strict";var i=t["set"+e(r)];return i?i.call(t,n):0===r.indexOf("@")?u(t,r,n):(t[r]=n,n)}function f(t,r){"use strict";var e,n,u=!0;for(e in r)if(r.hasOwnProperty(e)&&(n=r[e],s(t).valueForKeyPath(e)!==n)){u=!1;break}return u}var s;"undefined"!=typeof _&&(s=_);var c,y,l,p,d,h=this;if(c="undefined"!=typeof module&&"undefined"!=typeof require,"undefined"==typeof s&&(s=c?require("underscore"):h.underscore),"undefined"==typeof s)throw new Error("underscore.js is not found!");y={"@first":function(t){return s.first(t)},"@last":function(t){return s.last(t)},"@max":function(t){return s.max(t)},"@min":function(t){return s.min(t)},"@size":function(t){return s.size(t)}},l={"@first":function(t,r){return t[0]=r,r},"@last":function(t,r){return t[Math.max(t.length-1,0)]=r,r}},p={valueForKeyPath:function(t,e,n){"use strict";var u,o,a,f=t;if(null===t||void 0===t)return n;for(u=r(e),o=u.shift(),a=void 0;null!==f&&void 0!==f&&"string"==typeof o;)a=f,f=i(f,o),"function"==typeof f&&(f=f.call(a)),o=u.shift();return null===f||void 0===f?n:f},setValueForKeyPath:function(t,e,n){"use strict";var u,i,o=r(e);return u=o.pop(),i=s(t).valueForKeyPath(o.join(".")),null!==i&&void 0!==i?a(i,u,n):void 0},pluckByKeyPath:function(t,r){"use strict";var e,n,u=[];for(e=0;e<t.length;e+=1)n=t[e],u[e]=s(n).valueForKeyPath(r);return u},whereByKeyPath:function(t,r){"use strict";var e,n,u=[];for(e=0;e<t.length;e+=1)n=t[e],f(n,r)&&u.push(n);return u},findWhereByKeyPath:function(t,r){"use strict";var e,n;for(e=0;e<t.length;e+=1)if(n=t[e],f(n,r))return n;return null},sortByKeyPath:function(t,r){"use strict";return"string"!=typeof r?s.sortBy(t,r):s.sortBy(t,function(t){return s.valueForKeyPath(t,r)})},groupByKeyPath:function(t,r){"use strict";return"string"!=typeof r?s.groupBy(t,r):s.groupBy(t,function(t){return s.valueForKeyPath(t,r)})},indexByKeyPath:function(t,r){"use strict";return"string"!=typeof r?s.indexBy(t,r):s.indexBy(t,function(t){return s.valueForKeyPath(t,r)})},countByKeyPath:function(t,r){"use strict";return"string"!=typeof r?s.countBy(t,r):s.countBy(t,function(t){return s.valueForKeyPath(t,r)})},hasKeyPath:function(t,e){"use strict";var n,u,i;return null===t||void 0===t?!1:(n=r(e),u=n.pop(),i=this.valueForKeyPath(t,n),null!==i&&void 0!==i?o(i,u):!1)}},d={getValueForKeyPath:p.valueForKeyPath},s.mixin(p),s.mixin(d),c&&(module.exports=s,module.exports.__debug__={toSegments:r})}();