From ad43315e0223d1161d33b9acf68c3b0476d25f51 Mon Sep 17 00:00:00 2001
From: =?UTF-8?q?M=C3=A1ximo=20Cuadros=20Ortiz?= <mcuadros@gmail.com>
Date: Wed, 8 Jan 2014 16:03:20 +0100
Subject: [PATCH] histogram: dateformat implementation unification and
 improments

---
 src/app/components/kbn.js          | 18 ++++++++++++++-
 src/app/panels/histogram/module.js | 37 +++++++++++++-----------------
 2 files changed, 33 insertions(+), 22 deletions(-)

diff --git a/src/app/components/kbn.js b/src/app/components/kbn.js
index 5690b7866ec5e..364d1df7995c5 100644
--- a/src/app/components/kbn.js
+++ b/src/app/components/kbn.js
@@ -238,6 +238,22 @@ function($, _, moment) {
     return info.sec * info.count;
   };
 
+  kbn.intervalToDateFormat = function (interval) {
+    var format = "HH:mm<br>MM-DD";
+    var _int = kbn.interval_to_seconds(interval);
+    if(_int >= 2628000) {
+      format = "YYYY-MM-DD<br>MMMM";
+    }
+    else if(_int >= 604800) {
+      format = 'YYYY-MM-DD<br>Wo [week]';
+    }
+    else if(_int >= 86400) {
+      format = 'YYYY-MM-DD<br>dddd';
+    }
+
+    return format;
+  };
+
   // This should go away, moment.js can do this
   kbn.time_ago = function(string) {
     return new Date(new Date().getTime() - (kbn.interval_to_ms(string)));
@@ -594,4 +610,4 @@ function($, _, moment) {
   };
 
   return kbn;
-});
\ No newline at end of file
+});
diff --git a/src/app/panels/histogram/module.js b/src/app/panels/histogram/module.js
index 7493933b57332..2863819353149 100644
--- a/src/app/panels/histogram/module.js
+++ b/src/app/panels/histogram/module.js
@@ -568,6 +568,18 @@ function (angular, app, $, _, kbn, moment, timeSeries) {
           });
         };
 
+        var timeFormat = function(val, stripHTML) {
+          var format = kbn.intervalToDateFormat(scope.panel.interval);
+
+          if (stripHTML === true) {
+            format = format.replace(/<(?:.|\n)*?>/gm, ' ');
+          }
+
+          return scope.panel.timezone === 'browser' ?
+          moment(val).format(format) :
+          moment.utc(val).format(format);
+        };
+
         // Function for rendering panel
         function render_panel(data) {
           // IE doesn't work without this
@@ -626,7 +638,7 @@ function (angular, app, $, _, kbn, moment, timeSeries) {
                 mode: "time",
                 min: _.isUndefined(scope.range.from) ? null : scope.range.from.getTime(),
                 max: _.isUndefined(scope.range.to) ? null : scope.range.to.getTime(),
-                timeformat: time_format(scope.panel.interval),
+                tickFormatter: timeFormat,
                 label: "Datetime",
                 ticks: elem.width()/100
               },
@@ -706,24 +718,9 @@ function (angular, app, $, _, kbn, moment, timeSeries) {
           }
         }
 
-        function time_format(interval) {
-          var _int = kbn.interval_to_seconds(interval);
-          if(_int >= 2628000) {
-            return "%Y-%m";
-          }
-          if(_int >= 86400) {
-            return "%Y-%m-%d";
-          }
-          if(_int >= 60) {
-            return "%H:%M<br>%m-%d";
-          }
-
-          return "%H:%M:%S";
-        }
-
         var $tooltip = $('<div>');
         elem.bind("plothover", function (event, pos, item) {
-          var group, value, timestamp;
+          var group, value;
           if (item) {
             if (item.series.info.alias || scope.panel.tooltip.query_as_alias) {
               group = '<small style="font-size:0.9em;">' +
@@ -742,12 +739,10 @@ function (angular, app, $, _, kbn, moment, timeSeries) {
             if(scope.panel.y_format === 'short') {
               value = kbn.shortFormat(value,2);
             }
-            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');
+           
             $tooltip
               .html(
-                group + value + " @ " + timestamp
+                group + value + " @ " + timeFormat(item.datapoint[0], true)
               )
               .place_tt(pos.pageX, pos.pageY);
           } else {