Refactoring time formats, Closes #142

src/app/components/kbn.js

@@ -505,27 +505,52 @@ function($, _, moment) {
     return (size.toFixed(decimals) + ext);
   };
 
-  kbn.msFormat = function(size) {
+  kbn.getFormatFunction = function(formatName, decimals) {
+    switch(formatName) {
+    case 'short':
+      return function(val) {
+        return kbn.shortFormat(val, decimals);
+      };
+    case 'bytes':
+      return function(val) {
+        return kbn.byteFormat(val, decimals);
+      };
+    case 'ms':
+      return function(val) {
+        return kbn.msFormat(val, decimals);
+      };
+    case 'µs':
+      return function(val) {
+        return kbn.microsFormat(val, decimals);
+      };
+    default:
+      return function(val) {
+        return val % 1 === 0 ? val : val.toFixed(decimals);
+      };
+    }
+  };
+
+  kbn.msFormat = function(size, decimals) {
     if (size < 1000) {
       return size.toFixed(0) + " ms";
     }
     else if (size < 60000) {
-      return (size / 1000).toFixed(1) + " s";
+      return (size / 1000).toFixed(decimals) + " s";
     }
     else {
-      return (size / 60000).toFixed(1) + " min";
+      return (size / 60000).toFixed(decimals) + " min";
     }
   };
 
-  kbn.microsFormat = function(size) {
+  kbn.microsFormat = function(size, decimals) {
     if (size < 1000) {
       return size.toFixed(0) + " µs";
     }
     else if (size < 1000000) {
-      return (size / 1000).toFixed(1) + " ms";
+      return (size / 1000).toFixed(decimals) + " ms";
     }
     else {
-      return (size / 1000000).toFixed(1) + " s";
+      return (size / 1000000).toFixed(decimals) + " s";
     }
   };
 

src/app/directives/grafanaGraph.js

@@ -155,48 +155,6 @@ function (angular, $, kbn, moment, _) {
           };
         }
 
-        function render_panel_as_graphite_png(url) {
-          url += '&width=' + elem.width();
-          url += '&height=' + elem.css('height').replace('px', '');
-          url += '&bgcolor=1f1f1f'; // @grayDarker & @kibanaPanelBackground
-          url += '&fgcolor=BBBFC2'; // @textColor & @grayLighter
-          url += scope.panel.stack ? '&areaMode=stacked' : '';
-          url += scope.panel.fill !== 0 ? ('&areaAlpha=' + (scope.panel.fill/10).toFixed(1)) : '';
-          url += scope.panel.linewidth !== 0 ? '&lineWidth=' + scope.panel.linewidth : '';
-          url += scope.panel.legend ? '' : '&hideLegend=true';
-          url += scope.panel.grid.min ? '&yMin=' + scope.panel.grid.min : '';
-          url += scope.panel.grid.max ? '&yMax=' + scope.panel.grid.max : '';
-          url += scope.panel['x-axis'] ? '' : '&hideAxes=true';
-          url += scope.panel['y-axis'] ? '' : '&hideYAxis=true';
-
-          switch(scope.panel.y_formats[0]) {
-          case 'bytes':
-            url += '&yUnitSystem=binary';
-            break;
-          case 'short':
-            url += '&yUnitSystem=si';
-            break;
-          case 'none':
-            url += '&yUnitSystem=none';
-            break;
-          }
-
-          switch(scope.panel.nullPointMode) {
-          case 'connected':
-            url += '&lineMode=connected';
-            break;
-          case 'null':
-            break; // graphite default lineMode
-          case 'null as zero':
-            url += "&drawNullAsZero=true";
-            break;
-          }
-
-          url += scope.panel.steppedLine ? '&lineMode=staircase' : '';
-
-          elem.html('<img src="' + url + '"></img>');
-        }
-
         function addGridThresholds(options, panel) {
           if (panel.grid.threshold1) {
             var limit1 = panel.grid.thresholdLine ? panel.grid.threshold1 : (panel.grid.threshold2 || null);
@@ -290,18 +248,10 @@ function (angular, $, kbn, moment, _) {
 
         function configureAxisMode(axis, format) {
           if (format === 'bytes') {
-            axis.mode = "byte";
-          }
-          if (format === 'short') {
-            axis.tickFormatter = function(val) {
-              return kbn.shortFormat(val, 1);
-            };
-          }
-          if (format === 'ms') {
-            axis.tickFormatter = kbn.msFormat;
+            axis.mode = 'byte';
           }
-          if (format === 'µs') {
-            axis.tickFormatter = kbn.microsFormat;
+          else if (format !== 'none') {
+            axis.tickFormatter = kbn.getFormatFunction(format, 1);
           }
         }
 
@@ -333,28 +283,30 @@ function (angular, $, kbn, moment, _) {
         var $tooltip = $('<div>');
 
         elem.bind("plothover", function (event, pos, item) {
-          var group, value, timestamp;
+          var group, value, timestamp, seriesInfo, format;
+
           if (item) {
-            if (item.series.info.alias || scope.panel.tooltip.query_as_alias) {
+            seriesInfo = item.series.info;
+            format = scope.panel.y_formats[seriesInfo.yaxis - 1];
+
+            if (seriesInfo.alias || scope.panel.tooltip.query_as_alias) {
               group = '<small style="font-size:0.9em;">' +
                 '<i class="icon-circle" style="color:'+item.series.color+';"></i>' + ' ' +
-                (item.series.info.alias || item.series.info.query)+
+                (seriesInfo.alias || seriesInfo.query)+
               '</small><br>';
             } else {
               group = kbn.query_color_dot(item.series.color, 15) + ' ';
             }
-            value = (scope.panel.stack && scope.panel.tooltip.value_type === 'individual') ?
-              item.datapoint[1] - item.datapoint[2] :
-              item.datapoint[1];
-            if(item.series.info.y_format === 'bytes') {
-              value = kbn.byteFormat(value, 2);
-            }
-            if(item.series.info.y_format === 'short') {
-              value = kbn.shortFormat(value, 2);
+
+            if (scope.panel.stack && scope.panel.tooltip.value_type === 'individual') {
+              value = item.datapoint[1] - item.datapoint[2];
             }
-            if(item.series.info.y_format === 'ms') {
-              value = kbn.msFormat(value);
+            else {
+              value = item.datapoint[1];
             }
+
+            value = kbn.getFormatFunction(format, 2)(value);
+
             timestamp = dashboard.current.timezone === 'browser' ?
               moment(item.datapoint[0]).format('YYYY-MM-DD HH:mm:ss') :
               moment.utc(item.datapoint[0]).format('YYYY-MM-DD HH:mm:ss');
@@ -368,6 +320,48 @@ function (angular, $, kbn, moment, _) {
           }
         });
 
+        function render_panel_as_graphite_png(url) {
+          url += '&width=' + elem.width();
+          url += '&height=' + elem.css('height').replace('px', '');
+          url += '&bgcolor=1f1f1f'; // @grayDarker & @kibanaPanelBackground
+          url += '&fgcolor=BBBFC2'; // @textColor & @grayLighter
+          url += scope.panel.stack ? '&areaMode=stacked' : '';
+          url += scope.panel.fill !== 0 ? ('&areaAlpha=' + (scope.panel.fill/10).toFixed(1)) : '';
+          url += scope.panel.linewidth !== 0 ? '&lineWidth=' + scope.panel.linewidth : '';
+          url += scope.panel.legend ? '' : '&hideLegend=true';
+          url += scope.panel.grid.min ? '&yMin=' + scope.panel.grid.min : '';
+          url += scope.panel.grid.max ? '&yMax=' + scope.panel.grid.max : '';
+          url += scope.panel['x-axis'] ? '' : '&hideAxes=true';
+          url += scope.panel['y-axis'] ? '' : '&hideYAxis=true';
+
+          switch(scope.panel.y_formats[0]) {
+          case 'bytes':
+            url += '&yUnitSystem=binary';
+            break;
+          case 'short':
+            url += '&yUnitSystem=si';
+            break;
+          case 'none':
+            url += '&yUnitSystem=none';
+            break;
+          }
+
+          switch(scope.panel.nullPointMode) {
+          case 'connected':
+            url += '&lineMode=connected';
+            break;
+          case 'null':
+            break; // graphite default lineMode
+          case 'null as zero':
+            url += "&drawNullAsZero=true";
+            break;
+          }
+
+          url += scope.panel.steppedLine ? '&lineMode=staircase' : '';
+
+          elem.html('<img src="' + url + '"></img>');
+        }
+
         elem.bind("plotselected", function (event, ranges) {
           filterSrv.setTime({
             from  : moment.utc(ranges.xaxis.from).toDate(),

src/app/panels/graphite/module.js

@@ -326,8 +326,7 @@ function (angular, app, $, _, kbn, moment, timeSeries) {
           alias: alias,
           color:  color,
           enable: true,
-          yaxis: yaxis,
-          y_format: $scope.panel.y_formats[yaxis - 1]
+          yaxis: yaxis
         };
 
         var series = new timeSeries.ZeroFilled({

src/app/panels/graphite/timeSeries.js

@@ -54,7 +54,7 @@ function (_, kbn) {
       this.info.avg = (this.info.total / result.length);
       this.info.current = result[result.length-1][1];
 
-      var formater = getFormater(yFormats[this.yaxis - 1]);
+      var formater = kbn.getFormatFunction(yFormats[this.yaxis - 1], 2);
       this.info.avg = this.info.avg ? formater(this.info.avg) : null;
       this.info.current = this.info.current ? formater(this.info.current) : null;
       this.info.min = this.info.min ? formater(this.info.min) : null;
@@ -65,25 +65,6 @@ function (_, kbn) {
     return result;
   };
 
-  function getFormater(yformat) {
-    switch(yformat) {
-    case 'bytes':
-      return kbn.byteFormat;
-    case 'short':
-      return kbn.shortFormat;
-    case 'ms':
-      return kbn.msFormat;
-    default:
-      return function(val) {
-        if (val % 1 === 0) {
-          return val;
-        }
-        else {
-          return val.toFixed(2);
-        }
-      };
-    }
-  }
 
   return ts;
 });