From 7a00cfd1c1852c600c75adc2b04e0a5bf296b6fb Mon Sep 17 00:00:00 2001 From: Richard Wall Date: Sun, 11 Jul 2010 08:39:09 +0100 Subject: improved timerange chooser - still needs plot selection and drop down calendars enabling --- index.html | 33 ++++++++++++---- jarmon.js | 124 ++++++++++++++++++++++++++++++------------------------------- 2 files changed, 86 insertions(+), 71 deletions(-) diff --git a/index.html b/index.html index cec632a..0e285e2 100644 --- a/index.html +++ b/index.html @@ -112,10 +112,20 @@ }); // Initialise all the charts - cc.reset(); + cc.init(); } $(function() { + // Add dhtml calendars to the date input fields + /* + $(":date").dateinput({format: 'mmm dd yyyy', max: +1}); + $(":date[name=startTime]").data("dateinput").change(function() { + $(":date[name=endTime]").data("dateinput").setMin(this.getValue(), true); + }); + $(":date[name=endTime]").data("dateinput").change(function() { + $(":date[name=startTime]").data("dateinput").setMax(this.getValue(), true); + }); + */ // Setup dhtml tabs $(".css-tabs").tabs(".css-panes > div", {history: true}); @@ -127,18 +137,27 @@ // A static json file containing a list of rrd urls $.getJSON('rrd_list.json', initialiseCharts); + }); - diff --git a/jarmon.js b/jarmon.js index 3cd44e2..7b072ca 100644 --- a/jarmon.js +++ b/jarmon.js @@ -142,12 +142,12 @@ jarmon.RrdQuery.prototype.getData = function(startTime, endTime, dsId, cfName) { * @return: A Flot compatible data series I{Object} * eg {label:'', data:[], unit: ''} **/ - var startTimestamp = startTime.getTime()/1000; + var startTimestamp = startTime/1000; var lastUpdated = this.rrd.getLastUpdate(); var endTimestamp = lastUpdated; if(endTime) { - endTimestamp = endTime.getTime()/1000; + endTimestamp = endTime/1000; // If end time stamp is beyond the range of this rrd then reset it if(lastUpdated < endTimestamp) { endTimestamp = lastUpdated; @@ -235,7 +235,7 @@ jarmon.RrdQueryRemote.prototype.getData = function(startTime, endTime, dsId) { * @returns: A I{MochiKit.Async.Deferred} which calls back with a flot data * series object I{Object} **/ - var endTimestamp = endTime.getTime()/1000; + var endTimestamp = endTime/1000; // Download the rrd if there has never been a download or if the last // completed download had a lastUpdated timestamp less than the requested @@ -441,8 +441,8 @@ jarmon.Chart.prototype.draw = function() { result = new MochiKit.Async.Deferred(); result.callback({ data: [ - [this.startTime.getTime(), 0], - [this.endTime.getTime(), 0] + [this.startTime, 0], + [this.endTime, 0] ], lines: { lineWidth: 0 @@ -602,6 +602,17 @@ jarmon.Chart.STACKED_OPTIONS = { }; +// A selection of useful time ranges +jarmon.timeRangeShortcuts = [ + ['last hour', function(now) { return [now-60*60*1000*1, now]; }], + ['last six hours', function(now) { return [now-60*60*1000*6, now]; }], + ['last day', function(now) { return [now-60*60*1000*24, now]; }], + ['last week', function(now) { return [now-60*60*1000*24*7, now]; }], + ['last month', function(now) { return [now-60*60*1000*24*31, now]; }], + ['last year', function(now) { return [now-60*60*1000*24*365, now]; }] +]; + + /** * Presents the user with a form and a timeline with which they can choose a * time range and co-ordinates the refreshing of a series of charts. @@ -610,30 +621,23 @@ jarmon.Chart.STACKED_OPTIONS = { * for the timeline and for the series of charts. **/ jarmon.ChartCoordinator = function(ui) { + var self = this; this.ui = ui; - // Populate the time range selector - var timeRangeChoices = [ - [-60*60*1000*1, 'last hour'], - [-60*60*1000*6, 'last six hours'], - [-60*60*1000*24, 'last day'], - [-60*60*1000*24*7, 'last week'], - [-60*60*1000*24*31, 'last month'], - [-60*60*1000*24*365, 'last year'] - ]; - - var val, label, option, options = this.ui.find('select[name="from"]'); - - for(var i=0; i').attr('value', val).text(label)); + var options = this.ui.find('select[name="from_standard"]'); + for(var i=0; i').text(jarmon.timeRangeShortcuts[i][0])); } - // Default timezone offset based on localtime - var tzoffset = -1 * new Date().getTimezoneOffset() / 60; + options.bind('change', function(e) { + // No point in updating if the user chose custom. + if($(this).val() != 'custom') { + self.update(); + } + }); // Populate a list of tzoffset options + var label; options = this.ui.find('select[name="tzoffset"]'); for(var i=-12; i<=12; i++) { label = 'UTC'; @@ -643,42 +647,17 @@ jarmon.ChartCoordinator = function(ui) { label += ' - '; } label += Math.abs(i) + 'h'; - option = $('