fix(graph): narrow panels shows right date format on x-axis

fixes #3852. The function that calculates the date format for
the x-axis on a panel takes the panel width into account and
can be wrong for certain date ranges if the panel is too
narrow. E.g. can show dates in format %m/%d %H:%M when it
should show it as %H:%M

public/app/plugins/panel/graph/graph.js

@@ -296,7 +296,7 @@ function (angular, $, moment, _, kbn, GraphTooltip) {
             max: max,
             label: "Datetime",
             ticks: ticks,
-            timeformat: time_format(scope.interval, ticks, min, max),
+            timeformat: time_format(ticks, min, max),
           };
         }
 
@@ -436,20 +436,23 @@ function (angular, $, moment, _, kbn, GraphTooltip) {
           };
         }
 
-        function time_format(interval, ticks, min, max) {
+        function time_format(ticks, min, max) {
           if (min && max && ticks) {
-            var secPerTick = ((max - min) / ticks) / 1000;
+            var range = max - min;
+            var secPerTick = (range/ticks) / 1000;
+            var oneDay = 86400000;
+            var oneYear = 31536000000;
 
             if (secPerTick <= 45) {
               return "%H:%M:%S";
             }
-            if (secPerTick <= 7200) {
+            if (secPerTick <= 7200 || range <= oneDay) {
               return "%H:%M";
             }
             if (secPerTick <= 80000) {
               return "%m/%d %H:%M";
             }
-            if (secPerTick <= 2419200) {
+            if (secPerTick <= 2419200 || range <= oneYear) {
               return "%m/%d";
             }
             return "%Y-%m";

public/app/plugins/panel/graph/specs/graph_specs.ts

@@ -7,12 +7,13 @@ import angular from 'angular';
 import $ from 'jquery';
 import helpers from '../../../../../test/specs/helpers';
 import TimeSeries from '../../../../core/time_series2';
+import moment from 'moment';
 
 describe('grafanaGraph', function() {
 
   beforeEach(angularMocks.module('grafana.directives'));
 
-  function graphScenario(desc, func)  {
+  function graphScenario(desc, func, elementWidth = 500)  {
     describe(desc, function() {
       var ctx: any = {};
 
@@ -24,7 +25,7 @@ describe('grafanaGraph', function() {
 
         beforeEach(angularMocks.inject(function($rootScope, $compile) {
           var scope = $rootScope.$new();
-          var element = angular.element("<div style='width:500px' grafana-graph><div>");
+          var element = angular.element("<div style='width:" + elementWidth + "px' grafana-graph><div>");
 
           scope.height = '200px';
           scope.panel = {
@@ -43,8 +44,8 @@ describe('grafanaGraph', function() {
           scope.hiddenSeries = {};
           scope.dashboard = { timezone: 'browser' };
           scope.range = {
-            from: new Date('2014-08-09 10:00:00'),
-            to: new Date('2014-09-09 13:00:00')
+            from: moment([2015, 1, 1, 10]),
+            to: moment([2015, 1, 1, 22])
           };
           ctx.data = [];
           ctx.data.push(new TimeSeries({
@@ -227,4 +228,31 @@ describe('grafanaGraph', function() {
       expect(axis.tickFormatter(100, axis)).to.be("100%");
     });
   });
+
+  graphScenario('when panel too narrow to show x-axis dates in same granularity as wide panels', function(ctx) {
+    describe('and the range is less than 24 hours', function() {
+      ctx.setup(function(scope) {
+        scope.range.from = moment([2015, 1, 1, 10]);
+        scope.range.to = moment([2015, 1, 1, 22]);
+      });
+
+      it('should format dates as hours minutes', function() {
+        var axis = ctx.plotOptions.xaxis;
+        expect(axis.timeformat).to.be('%H:%M');
+      });
+    });
+
+    describe('and the range is less than one year', function() {
+      ctx.setup(function(scope) {
+        scope.range.from = moment([2015, 1, 1]);
+        scope.range.to = moment([2015, 11, 20]);
+      });
+
+      it('should format dates as month days', function() {
+        var axis = ctx.plotOptions.xaxis;
+        expect(axis.timeformat).to.be('%m/%d');
+      });
+    });
+
+  }, 10);
 });