diff --git a/public/app/features/dashboard/model.ts b/public/app/features/dashboard/model.ts index fa15acf823f..a324995df7a 100644 --- a/public/app/features/dashboard/model.ts +++ b/public/app/features/dashboard/model.ts @@ -19,6 +19,7 @@ export class DashboardModel { timezone: any; editable: any; sharedCrosshair: any; + sharedTooltip: any; rows: DashboardRow[]; time: any; timepicker: any; @@ -52,6 +53,7 @@ export class DashboardModel { this.timezone = data.timezone || ''; this.editable = data.editable !== false; this.sharedCrosshair = data.sharedCrosshair || false; + this.sharedTooltip = data.sharedTooltip || false; this.hideControls = data.hideControls || false; this.time = data.time || { from: 'now-6h', to: 'now' }; this.timepicker = data.timepicker || {}; diff --git a/public/app/features/dashboard/partials/settings.html b/public/app/features/dashboard/partials/settings.html index 79cc7d12157..9a136b683e2 100644 --- a/public/app/features/dashboard/partials/settings.html +++ b/public/app/features/dashboard/partials/settings.html @@ -67,6 +67,12 @@ checked="dashboard.sharedCrosshair" label-class="width-11"> + + diff --git a/public/app/plugins/panel/graph/graph.ts b/public/app/plugins/panel/graph/graph.ts index 73fe37d5cad..961d46d0085 100755 --- a/public/app/plugins/panel/graph/graph.ts +++ b/public/app/plugins/panel/graph/graph.ts @@ -34,6 +34,9 @@ module.directive('grafanaGraph', function($rootScope, timeSrv) { var rootScope = scope.$root; var panelWidth = 0; var thresholdManager = new ThresholdManager(ctrl); + var tooltip = new GraphTooltip(elem, dashboard, scope, function() { + return sortedSeries; + }); var plot; ctrl.events.on('panel-teardown', () => { @@ -64,6 +67,19 @@ module.directive('grafanaGraph', function($rootScope, timeSrv) { } }, scope); + rootScope.onAppEvent('setTooltip', function(event, info) { + // do not need to to this if event is from this panel + // or another panel is in fullscreen mode + if (info.scope === scope || ctrl.otherPanelInFullscreenMode()) { + return; + } + tooltip.setTooltip(info.pos); + }, scope); + + rootScope.onAppEvent('clearTooltip', function() { + tooltip.clearTooltip(); + }, scope); + // Receive render events ctrl.events.on('render', function(renderData) { data = renderData || data; @@ -555,10 +571,6 @@ module.directive('grafanaGraph', function($rootScope, timeSrv) { return "%H:%M"; } - var tooltip = new GraphTooltip(elem, dashboard, scope, function() { - return sortedSeries; - }); - elem.bind("plotselected", function (event, ranges) { scope.$apply(function() { timeSrv.setTime({ diff --git a/public/app/plugins/panel/graph/graph_tooltip.js b/public/app/plugins/panel/graph/graph_tooltip.js index 5ef6c65a400..8259e9adc5c 100644 --- a/public/app/plugins/panel/graph/graph_tooltip.js +++ b/public/app/plugins/panel/graph/graph_tooltip.js @@ -10,7 +10,7 @@ function ($) { var ctrl = scope.ctrl; var panel = ctrl.panel; - var $tooltip = $('
'); + var $tooltip = $('
'); this.destroy = function() { $tooltip.remove(); @@ -141,12 +141,32 @@ function ($) { } } + if (dashboard.sharedTooltip) { + ctrl.publishAppEvent('clearTooltip'); + } + if (dashboard.sharedCrosshair) { ctrl.publishAppEvent('clearCrosshair'); } }); elem.bind("plothover", function (event, pos, item) { + if (dashboard.sharedCrosshair) { + ctrl.publishAppEvent('setCrosshair', {pos: pos, scope: scope}); + } + + if (dashboard.sharedTooltip) { + pos.panelRelY = (pos.pageY - elem.offset().top) / elem.height(); + ctrl.publishAppEvent('setTooltip', {pos: pos, scope: scope}); + } + self.setTooltip(pos, item); + }); + + this.clearTooltip = function() { + $tooltip.detach(); + }; + + this.setTooltip = function(pos, item) { var plot = elem.data().plot; var plotData = plot.getData(); var xAxes = plot.getXAxes(); @@ -154,8 +174,16 @@ function ($) { var seriesList = getSeriesFn(); var group, value, absoluteTime, hoverInfo, i, series, seriesHtml, tooltipFormat; - if (dashboard.sharedCrosshair) { - ctrl.publishAppEvent('setCrosshair', {pos: pos, scope: scope}); + // if panelRelY is defined another panel wants us to show a tooltip + // get pageX from position on x axis and pageY from relative position in original panel + if (pos.panelRelY !== undefined) { + var pointOffset = plot.pointOffset({x: pos.x}); + if (Number.isNaN(pointOffset.left) || pointOffset.left < 0) { + $tooltip.detach(); + return; + } + pos.pageX = elem.offset().left + pointOffset.left; + pos.pageY = elem.offset().top + elem.height() * pos.panelRelY; } if (seriesList.length === 0) { @@ -238,7 +266,7 @@ function ($) { else { $tooltip.detach(); } - }); + }; } return GraphTooltip;