Format the X axis of time series charts to have interval specific ticks

This commit is contained in:
Rashid Khan 2014-05-27 11:10:09 -07:00
parent 28c563c9d0
commit 1cb10faed0
3 changed files with 29 additions and 15 deletions

View file

@ -16,6 +16,7 @@ define(function (require) {
agg.name = 'date_histogram';
agg.display = 'Date Histogram';
agg.ordinal = {};
agg.makeLabel = function (params) {
var interval = _.find(agg.params.interval.options, { val: params.interval });
if (interval) return interval.display + ' ' + params.field;
@ -63,6 +64,7 @@ define(function (require) {
ms: ms('year')
}
],
write: function (selection, output) {
var bounds = timefilter.getBounds();

View file

@ -1,7 +1,9 @@
define(function (require) {
return function HistogramConverterFn(Private, timefilter) {
var _ = require('lodash');
var moment = require('moment');
var aggs = Private(require('../_aggs'));
var interval = require('utils/interval');
return function (chart, columns, rows) {
// index of color
@ -55,6 +57,16 @@ define(function (require) {
// X-axis description
chart.xAxisLabel = colX.label;
if (colX.field) chart.xAxisFormatter = colX.field.format.convert;
if (aggX.name === 'date_histogram') {
chart.xAxisFormatter = function (thing) {
var bounds = timefilter.getBounds();
return moment(thing).format(interval.calculate(
moment(bounds.min.valueOf()),
moment(bounds.max.valueOf()),
rows.length)
.format);
};
}
// Y-axis description
chart.yAxisLabel = colY.label;

View file

@ -28,35 +28,35 @@ define(function (require) {
case (interval <= toMS('500ms')):
return {interval: toMS('100ms'), format: 'hh:mm:ss.SSS'};
case (interval <= toMS('5s')):
return {interval: toMS('1s'), format: 'hh:mm:ss'};
return {interval: toMS('1s'), format: 'HH:mm:ss'};
case (interval <= toMS('7.5s')):
return {interval: toMS('5s'), format: 'hh:mm:ss'};
return {interval: toMS('5s'), format: 'HH:mm:ss'};
case (interval <= toMS('15s')):
return {interval: toMS('10s'), format: 'hh:mm:ss'};
return {interval: toMS('10s'), format: 'HH:mm:ss'};
case (interval <= toMS('45s')):
return {interval: toMS('30s'), format: 'hh:mm:ss'};
return {interval: toMS('30s'), format: 'HH:mm:ss'};
case (interval <= toMS('3m')):
return {interval: toMS('1m'), format: 'hh:mm'};
return {interval: toMS('1m'), format: 'HH:mm'};
case (interval <= toMS('9m')):
return {interval: toMS('5m'), format: 'hh:mm'};
return {interval: toMS('5m'), format: 'HH:mm'};
case (interval <= toMS('20m')):
return {interval: toMS('10m'), format: 'hh:mm'};
return {interval: toMS('10m'), format: 'HH:mm'};
case (interval <= toMS('45m')):
return {interval: toMS('30m'), format: 'yyyy-MM-dd hh:mm'};
return {interval: toMS('30m'), format: 'YYYY-MM-DD HH:mm'};
case (interval <= toMS('2h')):
return {interval: toMS('1h'), format: 'yyyy-MM-dd hh:mm'};
return {interval: toMS('1h'), format: 'YYYY-MM-DD HH:mm'};
case (interval <= toMS('6h')):
return {interval: toMS('3h'), format: 'yyyy-MM-dd hh:mm'};
return {interval: toMS('3h'), format: 'YYYY-MM-DD HH:mm'};
case (interval <= toMS('24h')):
return {interval: toMS('12h'), format: 'yyyy-MM-dd hh:mm'};
return {interval: toMS('12h'), format: 'YYYY-MM-DD HH:mm'};
case (interval <= toMS('1w')):
return {interval: toMS('1d'), format: 'yyyy-MM-dd'};
return {interval: toMS('1d'), format: 'YYYY-MM-DD'};
case (interval <= toMS('3w')):
return {interval: toMS('1w'), format: 'yyyy-MM-dd'};
return {interval: toMS('1w'), format: 'YYYY-MM-DD'};
case (interval < toMS('1y')):
return {interval: toMS('1M'), format: 'yyyy-MM'};
return {interval: toMS('1M'), format: 'YYYY-MM'};
default:
return {interval: toMS('1y'), format: 'yyyy'};
return {interval: toMS('1y'), format: 'YYYY'};
}
};