Add seconds as a new axis formatter

src/app/components/kbn.js

@@ -566,6 +566,10 @@ function($, _, moment) {
       return function(val) {
       return function(val) {
         return kbn.bitFormat(val, decimals);
         return kbn.bitFormat(val, decimals);
       };
       };
+    case 's':
+      return function(val) {
+        return kbn.sFormat(val, decimals);
+      };
     case 'ms':
     case 'ms':
       return function(val) {
       return function(val) {
         return kbn.msFormat(val, decimals);
         return kbn.msFormat(val, decimals);
@@ -609,6 +613,27 @@ function($, _, moment) {
     return (size / 31536000000).toFixed(decimals) + " year";
     return (size / 31536000000).toFixed(decimals) + " year";
   };
   };
 
 
+  kbn.sFormat = function(size, decimals) {
+    // Less than 10 min, use seconds
+    if (size < 600) {
+      return size.toFixed(decimals) + " s";
+    }
+    // Less than 1 hour, devide in minutes
+    else if (size < 3600) {
+      return (size / 60).toFixed(decimals) + " min";
+    }
+    // Less than one day, devide in hours
+    else if (size < 86400) {
+      return (size / 3600).toFixed(decimals) + " hour";
+    }
+    // Less than one week, devide in days
+    else if (size < 604800) {
+      return (size / 86400).toFixed(decimals) + " day";
+    }
+
+    return (size / 3.15569e7).toFixed(decimals) + " year";
+  };
+
   kbn.microsFormat = function(size, decimals) {
   kbn.microsFormat = function(size, decimals) {
     if (size < 1000) {
     if (size < 1000) {
       return size.toFixed(0) + " µs";
       return size.toFixed(0) + " µs";

src/app/panels/graphite/axisEditor.html

@@ -10,11 +10,11 @@
     </div>
     </div>
     <div class="editor-option">
     <div class="editor-option">
       <label class="small">Left Y Format <tip>Y-axis formatting</tip></label>
       <label class="small">Left Y Format <tip>Y-axis formatting</tip></label>
-      <select class="input-small" ng-model="panel.y_formats[0]" ng-options="f for f in ['none','short','bytes', 'bits', 'ms', 'µs', 'ns']" ng-change="render()"></select>
+      <select class="input-small" ng-model="panel.y_formats[0]" ng-options="f for f in ['none','short','bytes', 'bits', 's', 'ms', 'µs', 'ns']" ng-change="render()"></select>
     </div>
     </div>
     <div class="editor-option">
     <div class="editor-option">
       <label class="small">Right Y Format <tip>Y-axis formatting</tip></label>
       <label class="small">Right Y Format <tip>Y-axis formatting</tip></label>
-      <select class="input-small" ng-model="panel.y_formats[1]" ng-options="f for f in ['none','short','bytes', 'bits', 'ms', 'µs', 'ns']" ng-change="render()"></select>
+      <select class="input-small" ng-model="panel.y_formats[1]" ng-options="f for f in ['none','short','bytes', 'bits', 's', 'ms', 'µs', 'ns']" ng-change="render()"></select>
     </div>
     </div>
 
 
     <div class="editor-option">
     <div class="editor-option">

src/app/panels/graphite/module.js

@@ -87,7 +87,7 @@ function (angular, app, $, _, kbn, moment, timeSeries) {
        */
        */
       scale         : 1,
       scale         : 1,
       /** @scratch /panels/histogram/3
       /** @scratch /panels/histogram/3
-       * y_formats :: 'none','bytes','bits','short', 'ms'
+       * y_formats :: 'none','bytes','bits','short', 's', 'ms'
        */
        */
       y_formats    : ['short', 'short'],
       y_formats    : ['short', 'short'],
       /** @scratch /panels/histogram/5
       /** @scratch /panels/histogram/5