graph.js in visage-app-0.9.6

- old
+ new

@@ -87,42 +87,45 @@
         name = name.trim().replace(/^\((.*)\)$/, '$1')
     }
     return name.trim()
 }
 
-function formatValue(value, places) {
-  var places = places ? places : 0
-  switch(true) {
-    case (Math.abs(value) > 1125899906842624):
-      var label = value / 1125899906842624,
-          unit  = 'P';
-      break
-    case (Math.abs(value) > 1099511627776):
-      var label = value / 1099511627776,
-          unit  = 'T';
-      break
-    case (Math.abs(value) > 1073741824):
-      var label = value / 1073741824,
-          unit  = 'G';
-      break
-    case (Math.abs(value) > 1048576):
-      var label = value / 1048576,
-          unit  = 'M';
-      break
-    case (Math.abs(value) > 1024):
-      var label = value / 1024,
-          unit  = 'K';
-      break
-    default:
-      var label = value,
-          unit  = '';
-      break
-  }
+function formatValue(value, options) {
+    var precision = options.precision,
+        min       = options.min,
+        max       = options.max;
 
-  var rounded = label.round(places)
+    switch(true) {
+        case (Math.abs(max) > 1125899906842624):
+            var label = value / 1125899906842624,
+                unit  = 'P';
+            break
+        case (Math.abs(max) > 1099511627776):
+            var label = value / 1099511627776,
+                unit  = 'T';
+            break
+        case (Math.abs(max) > 1073741824):
+            var label = value / 1073741824,
+                unit  = 'G';
+            break
+        case (Math.abs(max) > 1048576):
+            var label = value / 1048576,
+                unit  = 'M';
+            break
+        case (Math.abs(max) > 1024):
+            var label = value / 1024,
+                unit  = 'K';
+            break
+        default:
+            var label = value,
+                unit  = '';
+            break
+    }
 
-  return rounded + unit
+    var rounded = label.round(precision)
+
+    return rounded + unit
 }
 
 function formatDate(d) {
   var datetime = new Date(d * 1000)
   return datetime.format("%Y-%m-%d %H:%M:%S UTC%T")
@@ -243,11 +246,11 @@
                 this.series.each(function(series, index) {
                     this.chart.series[index].setData(series.data, false);
                 }, this);
 
                 /* Reset the zoom */
-                this.chart.toolbar.remove('zoom');
+                //this.chart.toolbar.remove('zoom');
                 this.chart.xAxis.concat(this.chart.yAxis).each(function(axis) {
                     axis.setExtremes(null,null,false);
                 });
 
                 this.chart.redraw();
@@ -284,25 +287,50 @@
             }, this);
         }, this);
 
         return series
     },
+    getSeriesMinMax: function(series) {
+        var min, max;
+
+        series.each(function(set) {
+            values = set.data.map(function(point) {
+                var value = point[1];
+                return value
+            });
+
+            var setMin = values.min()
+            var setMax = values.max()
+
+            if ($chk(min)) {
+                min = min > setMin ? setMin : min
+            } else {
+                min = setMin
+            }
+
+            if ($chk(max)) {
+                max = max < setMax ? setMax : max
+            } else {
+                max = setMax
+            }
+        });
+
+        return {'min': min, 'max': max};
+    },
     drawChart: function() {
         var series  = this.series,
             title   = this.graphName(),
             element = this.parentElement,
             ytitle  = formatPluginName(this.options.plugin),
-            max     = 0
+            min,
+            max;
 
         /* Get the maximum value across all sets.
          * Used later on to determine the decimal place in the label. */
-        series.each(function(set) {
-            var setMax = set.data.max()
-            if ( setMax > max ) {
-              max = setMax
-            }
-        });
+        meta = this.getSeriesMinMax(series);
+        var min = meta.min,
+            max = meta.max;
 
         this.chart = new Highcharts.Chart({
             chart: {
                 renderTo: element,
                 defaultSeriesType: 'line',
@@ -347,23 +375,29 @@
             },
             yAxis: {
               title: {
                 text: ytitle
               },
-              maxPadding: 0,
-              plotLines: [{
-                width: 0.5,
-              }],
+              startOnTick: false,
+              minPadding:  0.065,
+              max:         max,
+              endOnTick:   true,
               labels: {
-                formatter: function() {
-                  var places = max < 10 ? 2 : 0
-                  return formatValue(this.value, places)
-               }
+                    formatter: function() {
+                        var precision = min - max < 1000 ? 2 : 0,
+                            value     = formatValue(this.value, {
+                                            'precision': precision,
+                                            'min':       min,
+                                            'max':       max
+                                        });
+                        return value
+                    }
               }
             },
             plotOptions: {
               series: {
+                shadow: false,
                 marker: {
                   enabled: false,
                   stacking: 'normal',
                   states: {
                     hover: {
@@ -374,12 +408,22 @@
               }
             },
             tooltip: {
               formatter: function() {
                 var tip;
-                tip = '<b>' + formatSeriesLabel(this.series.name).trim() + '</b>-> '
-                tip += formatValue(this.y, 2) + ' <br/>'
+                tip =  '<strong>'
+                tip += formatSeriesLabel(this.series.name).trim()
+                tip += '</strong>' + ' -> '
+                tip += '<span style="font-family: monospace; font-size: 14px;">'
+                tip += formatValue(this.y, { 'precision': 2, 'min': min, 'max': max })
+                tip += '<span style="font-size: 9px; color: #777">'
+                tip += ' (' + this.y + ')'
+                tip += '</span>'
+                tip += '</span>'
+                tip += '<br/>'
+                tip += '<span style="font-family: monospace">'
                 tip += formatDate(this.x)
+                tip += '</span>'
 
                 return tip
               }
             },
             legend: {