IntenseWebs/grafana
3
0
Fork 0
mirror of https://github.com/grafana/grafana.git synced 2024-11-26 02:40:26 -06:00
Code Issues Packages Projects Releases Wiki Activity

Merge pull request #3866 from daniellee/issue3852

Browse Source 
fix(graph): narrow panels shows correct date format on x-axis
This commit is contained in:
Carl Bergquist 2016-01-27 17:45:31 +01:00
commit a1b5aae958
2 changed files with 40 additions and 9 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

13
public/app/plugins/panel/graph/graph.js
View File

@ -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";

36
public/app/plugins/panel/graph/specs/graph_specs.ts
View File

@ -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);
});