Added logarithmic scaling into graph and smoothie.js.

2 files changed, 25 insertions, 14 deletions

diff --git a/static/smoothie.js b/static/smoothie.js
index 27f5151..827c121 100644
--- a/static/smoothie.js
+++ b/static/smoothie.js
@@ -227,7 +227,10 @@
    *   maxValue: undefined,                      // specify to clamp the upper y-axis to a given value
    *   maxValueScale: 1,                         // allows proportional padding to be added above the chart. for 10% padding, specify 1.1.
    *   minValueScale: 1,                         // allows proportional padding to be added below the chart. for 10% padding, specify 1.1.
-   *   yRangeFunction: undefined,                // function({min: , max: }) { return {min: , max: }; }
+   *   yRangeFunction: function(value) {         // function({min: , max: }) { return {min: , max: }; }
+   *     return value)
+   *   }
+   *   valueTransformFunction: undefinde         // function(value) { return value; }
    *   scaleSmoothing: 0.125,                    // controls the rate at which y-value zoom animation occurs
    *   millisPerPixel: 20,                       // sets the speed at which the chart pans by
    *   enableDpiScaling: true,                   // support rendering at different DPI depending on the device
@@ -285,6 +288,9 @@
     },
     maxValueScale: 1,
     minValueScale: 1,
+    valueTransformFunction: function (value) {
+      return value;
+    },
     interpolation: 'bezier',
     scaleSmoothing: 0.125,
     maxDataSetLength: 2,
@@ -572,10 +578,10 @@
         // Calculate the threshold time for the oldest data points.
         oldestValidTime = time - (dimensions.width * chartOptions.millisPerPixel),
         valueToYPixel = function(value) {
-          var offset = value - this.currentVisMinValue;
-          return this.currentValueRange === 0
+          var offset = this.options.valueTransformFunction(value - this.currentVisMinValue);
+            return this.currentValueRange === 0
             ? dimensions.height
-            : dimensions.height - (Math.round((offset / this.currentValueRange) * dimensions.height));
+            : dimensions.height - (Math.round((offset / this.options.valueTransformFunction(this.currentValueRange)) * dimensions.height));
         }.bind(this),
         timeToXPixel = function(t) {
           if(chartOptions.scrollBackwards) {
@@ -751,10 +757,11 @@
     if (!chartOptions.labels.disabled && !isNaN(this.valueRange.min) && !isNaN(this.valueRange.max)) {
       var maxValueString = chartOptions.yMaxFormatter(this.valueRange.max, chartOptions.labels.precision),
           minValueString = chartOptions.yMinFormatter(this.valueRange.min, chartOptions.labels.precision),
-          labelPos = chartOptions.scrollBackwards ? 0 : dimensions.width - context.measureText(maxValueString).width - 2;
+          maxLabelPos = chartOptions.scrollBackwards ? 0 : dimensions.width - context.measureText(maxValueString).width - 2;
+          minLabelPos = chartOptions.scrollBackwards ? 0 : dimensions.width - context.measureText(minValueString).width - 2;
       context.fillStyle = chartOptions.labels.fillStyle;
-      context.fillText(maxValueString, labelPos, chartOptions.labels.fontSize);
-      context.fillText(minValueString, labelPos, dimensions.height - 2);
+      context.fillText(maxValueString, maxLabelPos, chartOptions.labels.fontSize);
+      context.fillText(minValueString, minLabelPos, dimensions.height - 2);
     }
 
     // Display timestamps along x-axis at the bottom of the chart.
diff --git a/static/status-dnbd3.html b/static/status-dnbd3.html
index 645447f..d9ce816 100644
--- a/static/status-dnbd3.html
+++ b/static/status-dnbd3.html
@@ -21,7 +21,7 @@
 <script type="text/javascript">
 
 // Initialize the statistics chart at the bottom.
-var smoothie = new SmoothieChart({'millisPerPixel': 300, 'grid': {'millisPerLine': 30000}, timestampFormatter:SmoothieChart.timeFormatter});
+var smoothie = new SmoothieChart({'millisPerPixel': 300, 'grid': {'millisPerLine': 30000}, timestampFormatter:SmoothieChart.timeFormatter, yMaxFormatter: bytesToString, yMinFormatter: bytesToString, valueTransformFunction: logarithmicScaling});
 smoothie.streamTo(document.getElementById("traffic"), 2000);
 
 // For coloring the servers and the chart-lines.
@@ -32,6 +32,10 @@ function makeId(prefix, text) {
     return prefix + text.replace(/\./g, "-");
 }
 
+function logarithmicScaling(value) {
+    return Math.log(value/1000000+1);
+}
+
 function myGraph(el) {
 
     var changed = false;
@@ -332,16 +336,16 @@ function updateGraph(g, data){
 function bytesToString( bytes ) {
     var convertedValue;
     var unit;
-    if (bytes > 1099511627776 ) {
+    if (bytes >= 1099511627776 ) {
         convertedValue = Math.round( (bytes / 1099511627776) * 100 ) / 100 ;
         unit = " TiB";
-    } else if (bytes > 1073741824 ) {
+    } else if (bytes >= 1073741824 ) {
         convertedValue = Math.round( (bytes / 1073741824) * 100 ) / 100 ;
         unit = " GiB";
-    } else if (bytes > 1048576 ) {
+    } else if (bytes >= 1048576 ) {
         convertedValue = Math.round( (bytes / 1048576) * 100 ) / 100 ;
         unit = " MiB";
-    } else if ( bytes > 1024 ) {
+    } else if ( bytes >= 1024 ) {
         convertedValue = Math.round( (bytes / 1024) * 100 ) / 100 ;
 //        convertedValue = Math.round( ( convertedValue / 1024 ) * 100 ) / 100;
         unit = " KiB";
@@ -385,7 +389,7 @@ function updateTrafficGraph(stats, data){
         for (var i = 0; i < stats.length; ++i) {
             var server = servers[stats[i].address];
             if (!server) {
-                servers[stats[i].address] = server = { 'lastUptime': 0, 'lastSent': 0, 'line': new TimeSeries(), 'index': serverCount++ , 'uploadRate': 0, 'downloadRate': 0}
+                servers[stats[i].address] = server = { 'lastUptime': 0, 'lastSent': 0, 'line': new TimeSeries({logarithmicScale: true}), 'index': serverCount++ , 'uploadRate': 0, 'downloadRate': 0}
                 server.color = colorList(stats[i].address);
                 smoothie.addTimeSeries(server['line'], {lineWidth:2, strokeStyle: server.color});
 //              console.log("Added");
@@ -400,7 +404,7 @@ function updateTrafficGraph(stats, data){
                 // Upload rate in bytes/s
                 server['uploadRate'] = (stats[i].bytesSent - server['lastSent'])/(data.timestamp - lastTime) * 1000;
                 // Rate in MiB/s
-                server['line'].append(new Date().getTime(), server['uploadRate']/( 1024 * 1024));
+                server['line'].append(new Date().getTime(), server['uploadRate']);
             } else {
                 server['uploadRate'] = 0;
             }