From 0c0ca895a8c7c95de40244cbcf0b4b440a848723 Mon Sep 17 00:00:00 2001
From: =?UTF-8?q?Torkel=20=C3=96degaard?= <torkel.odegaard@gmail.com>
Date: Thu, 23 Jan 2014 13:31:02 +0100
Subject: [PATCH] Closes #9 , new y format 'ms' formats millisecond values as
 "200 ms" , "3 s", "4 min" etc.

---
 src/app/components/kbn.js                | 7 +++++--
 src/app/panels/graphite/legend.html      | 5 +++--
 src/app/panels/graphite/module.js        | 6 ++++++
 src/app/panels/graphite/styleEditor.html | 4 ++--
 4 files changed, 16 insertions(+), 6 deletions(-)

diff --git a/src/app/components/kbn.js b/src/app/components/kbn.js
index 92c0368e09f..3c8f3d30dfa 100644
--- a/src/app/components/kbn.js
+++ b/src/app/components/kbn.js
@@ -506,11 +506,14 @@ function($, _, moment) {
   };
 
   kbn.msFormat = function(size) {
-    if (size < 500) {
+    if (size < 1000) {
       return size.toFixed(0) + " ms";
     }
+    else if (size < 60000) {
+      return (size / 1000).toFixed(1) + " s";
+    }
     else {
-      return (size / 1000).toFixed(0) + " s";
+      return (size / 60000).toFixed(1) + " min";
     }
   };
 
diff --git a/src/app/panels/graphite/legend.html b/src/app/panels/graphite/legend.html
index 2abea9c7a27..259153385f1 100644
--- a/src/app/panels/graphite/legend.html
+++ b/src/app/panels/graphite/legend.html
@@ -4,10 +4,11 @@
       class="histogram-legend">
     <i  class='icon-minus pointer'
         ng-style="{color: series.color}"
-        ng-click="toggleSeries(series)">
+        bs-popover="'colorPopup.html'"
+        >
     </i>
     <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}}
       </a>
     </span>
diff --git a/src/app/panels/graphite/module.js b/src/app/panels/graphite/module.js
index b29a22838af..243b91b5cbf 100644
--- a/src/app/panels/graphite/module.js
+++ b/src/app/panels/graphite/module.js
@@ -691,6 +691,9 @@ function (angular, app, $, _, kbn, moment, timeSeries) {
               return kbn.shortFormat(val,0);
             };
           }
+          if (format === 'ms') {
+            axis.tickFormatter = kbn.msFormat;
+          }
         }
 
         function time_format(interval) {
@@ -730,6 +733,9 @@ function (angular, app, $, _, kbn, moment, timeSeries) {
             if(item.series.info.y_format === 'short') {
               value = kbn.shortFormat(value,2);
             }
+            if(item.series.info.y_format === 'ms') {
+              value = kbn.msFormat(value);
+            }
             timestamp = scope.panel.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');
diff --git a/src/app/panels/graphite/styleEditor.html b/src/app/panels/graphite/styleEditor.html
index 2a0c871383b..9f8dc68b16a 100644
--- a/src/app/panels/graphite/styleEditor.html
+++ b/src/app/panels/graphite/styleEditor.html
@@ -28,11 +28,11 @@
     </div>
     <div class="editor-option">
       <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 class="editor-option">
       <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 class="section">