Closes #9 , new y format 'ms' formats millisecond values as "200 ms" , "3 s", "4 min" etc.

src/app/components/kbn.js

@@ -506,11 +506,14 @@ function($, _, moment) {
   };
   };
 
 
   kbn.msFormat = function(size) {
   kbn.msFormat = function(size) {
-    if (size < 500) {
+    if (size < 1000) {
       return size.toFixed(0) + " ms";
       return size.toFixed(0) + " ms";
     }
     }
+    else if (size < 60000) {
+      return (size / 1000).toFixed(1) + " s";
+    }
     else {
     else {
-      return (size / 1000).toFixed(0) + " s";
+      return (size / 60000).toFixed(1) + " min";
     }
     }
   };
   };
 
 

src/app/panels/graphite/legend.html

@@ -4,10 +4,11 @@
       class="histogram-legend">
       class="histogram-legend">
     <i  class='icon-minus pointer'
     <i  class='icon-minus pointer'
         ng-style="{color: series.color}"
         ng-style="{color: series.color}"
-        ng-click="toggleSeries(series)">
+        bs-popover="'colorPopup.html'"
+        >
     </i>
     </i>
     <span class='small histogram-legend-item'>
     <span class='small histogram-legend-item'>
-      <a bs-popover="'colorPopup.html'" data-unique="1" data-placement="{{series.yaxis === 2 ? 'bottomRight' : 'bottomLeft'}}">
+      <a ng-click="toggleSeries(series)" data-unique="1" data-placement="{{series.yaxis === 2 ? 'bottomRight' : 'bottomLeft'}}">
         {{series.alias}}
         {{series.alias}}
       </a>
       </a>
     </span>
     </span>

src/app/panels/graphite/module.js

@@ -691,6 +691,9 @@ function (angular, app, $, _, kbn, moment, timeSeries) {
               return kbn.shortFormat(val,0);
               return kbn.shortFormat(val,0);
             };
             };
           }
           }
+          if (format === 'ms') {
+            axis.tickFormatter = kbn.msFormat;
+          }
         }
         }
 
 
         function time_format(interval) {
         function time_format(interval) {
@@ -730,6 +733,9 @@ function (angular, app, $, _, kbn, moment, timeSeries) {
             if(item.series.info.y_format === 'short') {
             if(item.series.info.y_format === 'short') {
               value = kbn.shortFormat(value,2);
               value = kbn.shortFormat(value,2);
             }
             }
+            if(item.series.info.y_format === 'ms') {
+              value = kbn.msFormat(value);
+            }
             timestamp = scope.panel.timezone === 'browser' ?
             timestamp = scope.panel.timezone === 'browser' ?
               moment(item.datapoint[0]).format('YYYY-MM-DD HH:mm:ss') :
               moment(item.datapoint[0]).format('YYYY-MM-DD HH:mm:ss') :
               moment.utc(item.datapoint[0]).format('YYYY-MM-DD HH:mm:ss');
               moment.utc(item.datapoint[0]).format('YYYY-MM-DD HH:mm:ss');

src/app/panels/graphite/styleEditor.html

@@ -28,11 +28,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_format" ng-options="f for f in ['none','short','bytes']" ng-change="render()"></select>
+      <select class="input-small" ng-model="panel.y_format" ng-options="f for f in ['none','short','bytes', 'ms']" 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.y2_format" ng-options="f for f in ['none','short','bytes']" ng-change="render()"></select>
+      <select class="input-small" ng-model="panel.y2_format" ng-options="f for f in ['none','short','bytes', 'ms']" ng-change="render()"></select>
     </div>
     </div>
   </div>
   </div>
   <div class="section">
   <div class="section">