From dc4f347ae11e93dd11efa9d688270aa76e62fb30 Mon Sep 17 00:00:00 2001 From: ubhatnagar Date: Tue, 27 Oct 2015 13:40:50 -0700 Subject: [PATCH 1/5] Added relative checkbox --- public/app/panels/graph/graph.tooltip.js | 2 +- public/app/panels/graph/styleEditor.html | 4 ++++ 2 files changed, 5 insertions(+), 1 deletion(-) diff --git a/public/app/panels/graph/graph.tooltip.js b/public/app/panels/graph/graph.tooltip.js index 8a747b61e0c..7f3df2cbafa 100644 --- a/public/app/panels/graph/graph.tooltip.js +++ b/public/app/panels/graph/graph.tooltip.js @@ -117,7 +117,7 @@ function ($) { var seriesHoverInfo = self.getMultiSeriesPlotHoverInfo(plotData, pos); seriesHtml = ''; - timestamp = dashboard.formatDate(seriesHoverInfo.time); + timestamp = dashboard.formatDate(seriesHoverInfo.time,scope.panel.tooltip.relativeTimestamp); for (i = 0; i < seriesHoverInfo.length; i++) { hoverInfo = seriesHoverInfo[i]; diff --git a/public/app/panels/graph/styleEditor.html b/public/app/panels/graph/styleEditor.html index 5d5f2fd7401..312f29b85ab 100644 --- a/public/app/panels/graph/styleEditor.html +++ b/public/app/panels/graph/styleEditor.html @@ -52,6 +52,10 @@ text="All series" model="panel.tooltip.shared" change="render()" tip="Show all series on same tooltip and a x croshair to help follow all series"> + +
From 03e2f25adba38956460f2840166a74a4ffd67433 Mon Sep 17 00:00:00 2001 From: ubhatnagar Date: Tue, 27 Oct 2015 22:04:43 -0700 Subject: [PATCH 2/5] Added relative time func and code refactoring --- public/app/features/dashboard/dashboardSrv.js | 21 ++++++++++++++++--- public/app/panels/graph/graph.tooltip.js | 15 +++++++++++-- 2 files changed, 31 insertions(+), 5 deletions(-) diff --git a/public/app/features/dashboard/dashboardSrv.js b/public/app/features/dashboard/dashboardSrv.js index 21318ac8370..25abdd42a97 100644 --- a/public/app/features/dashboard/dashboardSrv.js +++ b/public/app/features/dashboard/dashboardSrv.js @@ -216,9 +216,8 @@ function (angular, $, kbn, _, moment) { }; p.formatDate = function(date, format) { - if (!moment.isMoment(date)) { - date = moment(date); - } + + date = this.checkDate(date); format = format || 'YYYY-MM-DD HH:mm:ss'; @@ -227,6 +226,22 @@ function (angular, $, kbn, _, moment) { moment.utc(date).format(format); }; + p.formatRelativeDate = function(date) { + + date = this.checkDate(date); + + return this.timezone === 'browser' ? + moment(date).fromNow() : + moment.utc(date).fromNow(); + }; + + p.checkDate = function(date) { + if (!moment.isMoment(date)) { + date = moment(date); + } + return date; + }; + p._updateSchema = function(old) { var i, j, k; var oldVersion = this.schemaVersion; diff --git a/public/app/panels/graph/graph.tooltip.js b/public/app/panels/graph/graph.tooltip.js index 7f3df2cbafa..eecacf4a04c 100644 --- a/public/app/panels/graph/graph.tooltip.js +++ b/public/app/panels/graph/graph.tooltip.js @@ -117,7 +117,11 @@ function ($) { var seriesHoverInfo = self.getMultiSeriesPlotHoverInfo(plotData, pos); seriesHtml = ''; - timestamp = dashboard.formatDate(seriesHoverInfo.time,scope.panel.tooltip.relativeTimestamp); + if(scope.panel.tooltip.relativeTimestamp) { + timestamp = dashboard.formatRelativeDate(seriesHoverInfo.time); + } else { + timestamp = dashboard.formatDate(seriesHoverInfo.time); + } for (i = 0; i < seriesHoverInfo.length; i++) { hoverInfo = seriesHoverInfo[i]; @@ -127,6 +131,7 @@ function ($) { } series = seriesList[i]; + value = series.formatValue(hoverInfo.value); seriesHtml += '
'; @@ -151,7 +156,13 @@ function ($) { } value = series.formatValue(value); - timestamp = dashboard.formatDate(item.datapoint[0]); + + if(scope.panel.tooltip.relativeTimestamp) { + timestamp = dashboard.formatRelativeDate(item.datapoint[0]); + } else { + timestamp = dashboard.formatDate(item.datapoint[0]); + } + group += '
' + value + '
'; self.showTooltip(timestamp, group, pos); From af65a81d5b2fa5fb56965a9f566de4a45d6b08d1 Mon Sep 17 00:00:00 2001 From: ubhatnagar Date: Tue, 27 Oct 2015 23:18:38 -0700 Subject: [PATCH 3/5] Added relative time in tooltip --- public/app/panels/graph/graph.tooltip.js | 28 ++++++++++++++---------- 1 file changed, 17 insertions(+), 11 deletions(-) diff --git a/public/app/panels/graph/graph.tooltip.js b/public/app/panels/graph/graph.tooltip.js index eecacf4a04c..eef6f909de2 100644 --- a/public/app/panels/graph/graph.tooltip.js +++ b/public/app/panels/graph/graph.tooltip.js @@ -31,8 +31,13 @@ function ($) { return j - 1; }; - this.showTooltip = function(title, innerHtml, pos) { - var body = '
'+ title + '
' ; + this.showTooltip = function(absoluteTime, relativeTime, innerHtml, pos) { + var body; + if(typeof relativeTime === 'undefined') { + body = '
'+ absoluteTime + '
' ; + } else { + body = '
'+ absoluteTime + '
(' + relativeTime + ')
' ; + } body += innerHtml + '
'; $tooltip.html(body).place_tt(pos.pageX + 20, pos.pageY); }; @@ -101,7 +106,7 @@ function ($) { var plot = elem.data().plot; var plotData = plot.getData(); var seriesList = getSeriesFn(); - var group, value, timestamp, hoverInfo, i, series, seriesHtml; + var group, value, absoluteTime, relativeTime, hoverInfo, i, series, seriesHtml; if(dashboard.sharedCrosshair){ scope.appEvent('setCrosshair', { pos: pos, scope: scope }); @@ -117,12 +122,13 @@ function ($) { var seriesHoverInfo = self.getMultiSeriesPlotHoverInfo(plotData, pos); seriesHtml = ''; + if(scope.panel.tooltip.relativeTimestamp) { - timestamp = dashboard.formatRelativeDate(seriesHoverInfo.time); - } else { - timestamp = dashboard.formatDate(seriesHoverInfo.time); + relativeTime = dashboard.formatRelativeDate(seriesHoverInfo.time); } + absoluteTime = dashboard.formatDate(seriesHoverInfo.time); + for (i = 0; i < seriesHoverInfo.length; i++) { hoverInfo = seriesHoverInfo[i]; @@ -140,7 +146,7 @@ function ($) { plot.highlight(i, hoverInfo.hoverIndex); } - self.showTooltip(timestamp, seriesHtml, pos); + self.showTooltip(absoluteTime, relativeTime, seriesHtml, pos); } // single series tooltip else if (item) { @@ -158,14 +164,14 @@ function ($) { value = series.formatValue(value); if(scope.panel.tooltip.relativeTimestamp) { - timestamp = dashboard.formatRelativeDate(item.datapoint[0]); - } else { - timestamp = dashboard.formatDate(item.datapoint[0]); + relativeTime = dashboard.formatRelativeDate(item.datapoint[0]); } + absoluteTime = dashboard.formatDate(item.datapoint[0]); + group += '
' + value + '
'; - self.showTooltip(timestamp, group, pos); + self.showTooltipOther(absoluteTime, relativeTime, group, pos); } // no hit else { From e0b585779d444e1960cb145e559d5a702b25154b Mon Sep 17 00:00:00 2001 From: utkarshcmu Date: Wed, 28 Oct 2015 08:52:46 -0700 Subject: [PATCH 4/5] Added relative time by default, removed checkbox --- public/app/features/dashboard/dashboardSrv.js | 2 +- public/app/panels/graph/graph.tooltip.js | 19 ++++--------------- public/app/panels/graph/styleEditor.html | 4 ---- 3 files changed, 5 insertions(+), 20 deletions(-) diff --git a/public/app/features/dashboard/dashboardSrv.js b/public/app/features/dashboard/dashboardSrv.js index 25abdd42a97..78d19c43592 100644 --- a/public/app/features/dashboard/dashboardSrv.js +++ b/public/app/features/dashboard/dashboardSrv.js @@ -226,7 +226,7 @@ function (angular, $, kbn, _, moment) { moment.utc(date).format(format); }; - p.formatRelativeDate = function(date) { + p.getRelativeTime = function(date) { date = this.checkDate(date); diff --git a/public/app/panels/graph/graph.tooltip.js b/public/app/panels/graph/graph.tooltip.js index eef6f909de2..62a5a418503 100644 --- a/public/app/panels/graph/graph.tooltip.js +++ b/public/app/panels/graph/graph.tooltip.js @@ -32,12 +32,7 @@ function ($) { }; this.showTooltip = function(absoluteTime, relativeTime, innerHtml, pos) { - var body; - if(typeof relativeTime === 'undefined') { - body = '
'+ absoluteTime + '
' ; - } else { - body = '
'+ absoluteTime + '
(' + relativeTime + ')
' ; - } + var body = '
'+ absoluteTime + '
(' + relativeTime + ')
' ; body += innerHtml + '
'; $tooltip.html(body).place_tt(pos.pageX + 20, pos.pageY); }; @@ -123,10 +118,7 @@ function ($) { seriesHtml = ''; - if(scope.panel.tooltip.relativeTimestamp) { - relativeTime = dashboard.formatRelativeDate(seriesHoverInfo.time); - } - + relativeTime = dashboard.getRelativeTime(seriesHoverInfo.time); absoluteTime = dashboard.formatDate(seriesHoverInfo.time); for (i = 0; i < seriesHoverInfo.length; i++) { @@ -163,15 +155,12 @@ function ($) { value = series.formatValue(value); - if(scope.panel.tooltip.relativeTimestamp) { - relativeTime = dashboard.formatRelativeDate(item.datapoint[0]); - } - + relativeTime = dashboard.getRelativeTime(item.datapoint[0]); absoluteTime = dashboard.formatDate(item.datapoint[0]); group += '
' + value + '
'; - self.showTooltipOther(absoluteTime, relativeTime, group, pos); + self.showTooltip(absoluteTime, relativeTime, group, pos); } // no hit else { diff --git a/public/app/panels/graph/styleEditor.html b/public/app/panels/graph/styleEditor.html index 312f29b85ab..5d5f2fd7401 100644 --- a/public/app/panels/graph/styleEditor.html +++ b/public/app/panels/graph/styleEditor.html @@ -52,10 +52,6 @@ text="All series" model="panel.tooltip.shared" change="render()" tip="Show all series on same tooltip and a x croshair to help follow all series"> - -
From 2cb83cf19dce67c5191b08b6e9e58f7218ad984a Mon Sep 17 00:00:00 2001 From: carl bergquist Date: Wed, 16 Dec 2015 16:32:55 +0100 Subject: [PATCH 5/5] style(graph.tooltip): moves checkdate logic inside each method. I find it easier to follow and checkdate didnt do much. --- public/app/features/dashboard/dashboardSrv.js | 14 ++------------ 1 file changed, 2 insertions(+), 12 deletions(-) diff --git a/public/app/features/dashboard/dashboardSrv.js b/public/app/features/dashboard/dashboardSrv.js index 7923e1071cb..559adff5c54 100644 --- a/public/app/features/dashboard/dashboardSrv.js +++ b/public/app/features/dashboard/dashboardSrv.js @@ -214,9 +214,7 @@ function (angular, $, _, moment) { }; p.formatDate = function(date, format) { - - date = this.checkDate(date); - + date = moment.isMoment(date) ? date : moment(date); format = format || 'YYYY-MM-DD HH:mm:ss'; return this.timezone === 'browser' ? @@ -225,21 +223,13 @@ function (angular, $, _, moment) { }; p.getRelativeTime = function(date) { - - date = this.checkDate(date); + date = moment.isMoment(date) ? date : moment(date); return this.timezone === 'browser' ? moment(date).fromNow() : moment.utc(date).fromNow(); }; - p.checkDate = function(date) { - if (!moment.isMoment(date)) { - date = moment(date); - } - return date; - }; - p._updateSchema = function(old) { var i, j, k; var oldVersion = this.schemaVersion;