/* ********************************************************************* rrdGraphCtrl - control panel for rrdGraphPng charts Copyright: 2015 OETIKER+PARTNER AG http://www.oetiker.ch License: Gnu GPL Version 2 Version: #VERSION#, #DATE# Authors: * Tobias Oetiker (oetiker) * **********************************************************************/ /** * The rrdGraphCtrl control turns attaches to a rrdGraphPng object and lets * select start time and range of the graphs. */ qxWeb.define('rrdGraphCtrl',{ extend: qxWeb.$$qx.ui.website.Widget, statics: { _config : { timeRanges: { "Last 60 Minutes": { order: 0, len: 60, end: 'minute' }, "Last 24 Hours": { order: 1, len: 24, end: 'hour' }, "Last 7 Days": { order: 2, len: 7, end: 'day' }, "Last 31 Days": { order: 3, len: 31, end: 'day' }, "Last 12 Months": { order: 4, len: 12, end: 'month' }, "Today": { order: 5, len: 1, end: 'day' }, "This Week": { order: 6, len: 1, end: 'week' }, "This Month": { order: 7, len: 1, end: 'month' }, "This Year": { order: 8, len: 1, end: 'year' }, "60 Minutes": { order: 9, len: 3600}, "12 Hours": { order: 10, len: 12*3600}, "24 Hours": { order: 11, len: 24*3600}, "7 Days": { order: 12, len: 7*24*3600}, "4 Weeks": { order: 13, len: 4*7*24*3600}, "12 Months": { order: 13, len: 365*24*3600} }, initialTimeRange: 'Today', rangeMatchPrecision: 0.05, showTimeBox: true, resetTimeOnDateChange: false, switchToCustomOnStartChange: true, momentTz: null }, rrdGraphCtrl: function(rrdGraphPng,cfg){ var ctrl = new rrdGraphCtrl(this); ctrl.init(rrdGraphPng,cfg); return ctrl; } }, construct : function(selector, context) { this.base(arguments, selector, context); }, members : { init: function(rrdGraphPng,cfg){ if (!this.base(arguments)) { return false; }; if (cfg){ for (var key in cfg){ this.setConfig(key,cfg[key]) } } this._forEachElementWrapped(function(div,idx) { div.setProperty('rrdGraphPng',rrdGraphPng); div.__addDatePicker(); div.__addRangePicker(); }); return true; }, rebind: function(rrdGraphPng){ this._forEachElementWrapped(function(div,idx) { div.setProperty('rrdGraphPng',rrdGraphPng); div.emit('rebindRrdGraphPng'); rrdGraphPng.setStartRange(div.getProperty('start'),div.getProperty('range')); }); }, __addDatePicker: function(){ var rrdGraphPng = this.getProperty('rrdGraphPng'); var start = qxWeb.create(''); start.appendTo(this); var picker = start.datepicker().setConfig('format', function(date) { return date.toDateString(); }); var calendar = picker.getCalendar(); calendar.setValue(new Date()); var timeBox = qxWeb.create(''); if (! this.getConfig('showTimeBox')){ timeBox.hide(); } timeBox.appendTo(this); var that = this; var propagateDateTime = function(){ var time = timeBox.getValue().split(':'); [0,1,2].forEach(function(i){ time[i] = parseInt(time[i]); if (isNaN(time[i])){ time[i] = 0; } }); timeBox.setValue([0,1,2].map(function(i){return ('0'+time[i]).slice(-2)}).join(':')); var start; var momentTz = that.getConfig('momentTz'); if (momentTz){ start = parseInt(moment.tz(moment(calendar.getValue()).format("YYYY-MM-DD"),momentTz).format('X')); } else { start = calendar.getValue().getTime()/1000 } start += time[0]*3600+time[1]*60+time[2]; rrdGraphPng.setStart(start); that.setProperty('start',start); that.emit('syncRrdGraphCtrlRange',start); }; var blockDate = false; var onChangeValueCal = function(){ if (blockDate){ blockDate = false; return; } if (this.getConfig('resetTimeOnDateChange')){ timeBox.setValue('00:00:00'); } propagateDateTime(); }; calendar.on('changeValue',onChangeValueCal,this); var blockTime = false; timeBox.on('change',propagateDateTime,this); var onKeyPressTbox = function(e){ if (e.key == "Enter") { propagateDateTime(); } }; timeBox.on('keypress',onKeyPressTbox,this); var lastDate; var that = this; var onChangeStartRange = function(e){ var start = e.start; var range = e.range; if (isNaN(start)) return; var momentTz = this.getConfig('momentTz'); var date; if (momentTz){ date = new Date(moment.tz(start * 1000,momentTz).format("YYYY/MM/DD HH:mm:ss")); } else { date = new Date(start * 1000); } if (date != lastDate){ blockDate = true; calendar.setValue(new Date(date.getTime())); var newTime = date.getHours()+':'+('0'+date.getMinutes()).slice(-2)+':'+('0'+date.getSeconds()).slice(-2); timeBox.setValue(newTime); lastDate = date; } that.setProperty('start',start); }; rrdGraphPng.eq(0).on('changeStartRange',onChangeStartRange,this); var onRebindRrdGraphPng = function(){ rrdGraphPng.eq(0).off('changeStartRange',onChangeStartRange,this); rrdGraphPng = this.getProperty('rrdGraphPng'); rrdGraphPng.eq(0).on('changeStartRange',onChangeStartRange,this); }; this.on('rebindRrdGraphPng',onRebindRrdGraphPng,this); this.once('qxRrdDispose',function(){ this.off('rebindRrdGraphPng',onRebindRrdGraphPng,this); rrdGraphPng.eq(0).off('changeStartRange',onChangeStartRange,this); timeBox.off('change',propagateDateTime,this); timeBox.off('keypress',onKeyPressTbox,this); timeBox.remove(); calendar.off('changeValue',onChangeValueCal,this); picker.dispose(); picker.remove(); },this); }, __getRangeMoment: function(item){ var l = item.len; var end = moment().tz(this.getConfig('momentTz')); if (item.end) { end.endOf(item.end).add(1,'second'); } var start = end.clone().subtract(item.len,item.end ? item.end : 'second'); return { end: end.unix(), range: end.unix() - start.unix() }; }, __getRange: function(item){ if (this.getConfig('momentTz')){ return this.__getRangeMoment(item) } var d = item.end; var l = item.len; var now = new Date; var start; now.setMilliseconds(0); now.setSeconds(0); if (d == 'minute'){ now.setMinutes(now.getMinutes()+1) start = new Date(now.getTime()); start.setMinutes(start.getMinutes()-l); } else { now.setMinutes(0); if (d == 'hour'){ now.setHours(now.getHours()+1) start = new Date(now.getTime()); start.setHours(start.getHours()-l); } else { now.setHours(0); if (d == 'day'){ now.setDate(now.getDate()+1) start = new Date(now.getTime()); start.setDate(start.getDate()-l); } else { if (d == 'week'){ now.setDate(now.getDate()-now.getDay()+8); start = new Date(now.getTime()); start.setDate(start.getDate()-l*7); } else { now.setDate(1); if (d == 'month'){ now.setMonth(now.getMonth()+1); start = new Date(now.getTime()); start.setMonth(start.getMonth()-l); } else { now.setMonth(0); if (d == 'year'){ now.setYear(now.getFullYear()+1); start = new Date(now.getTime()); start.setYear(start.getFullYear()-l); } } } } } } var end = now.getTime()/1000; return { range: Math.round(end-start.getTime()/1000), end: Math.round(end) }; }, __addRangePicker: function(){ var rrdGraphPng = this.getProperty('rrdGraphPng'); var rangeSelector = qxWeb.create('