From fa393c282a6277c538695ddb6fb898320d07dc7d Mon Sep 17 00:00:00 2001 From: =?UTF-8?q?Torkel=20=C3=96degaard?= Date: Tue, 6 Dec 2016 11:55:20 +0100 Subject: [PATCH] feat(graph): refactoring shared tooltip PR #6274 --- public/app/core/services/keybindingSrv.ts | 1 + .../dashboard/import/dash_import.html | 8 +-- public/app/features/dashboard/model.ts | 2 - .../features/dashboard/partials/settings.html | 12 +--- public/app/plugins/panel/graph/graph.ts | 69 ++++++++----------- .../app/plugins/panel/graph/graph_tooltip.js | 45 ++++++------ public/app/plugins/panel/graph/module.ts | 1 - .../plugins/panel/graph/specs/graph_specs.ts | 2 +- .../app/plugins/panel/graph/tab_display.html | 2 +- 9 files changed, 59 insertions(+), 83 deletions(-) diff --git a/public/app/core/services/keybindingSrv.ts b/public/app/core/services/keybindingSrv.ts index c1109fa2b2e..2b509db822a 100644 --- a/public/app/core/services/keybindingSrv.ts +++ b/public/app/core/services/keybindingSrv.ts @@ -89,6 +89,7 @@ export class KeybindingSrv { this.bind('mod+o', () => { dashboard.sharedCrosshair = !dashboard.sharedCrosshair; + appEvents.emit('graph-hover-clear'); scope.broadcastRefresh(); }); diff --git a/public/app/features/dashboard/import/dash_import.html b/public/app/features/dashboard/import/dash_import.html index 3e914245627..5e19a02c28c 100644 --- a/public/app/features/dashboard/import/dash_import.html +++ b/public/app/features/dashboard/import/dash_import.html @@ -123,11 +123,11 @@
- - Cancel Back diff --git a/public/app/features/dashboard/model.ts b/public/app/features/dashboard/model.ts index a324995df7a..fa15acf823f 100644 --- a/public/app/features/dashboard/model.ts +++ b/public/app/features/dashboard/model.ts @@ -19,7 +19,6 @@ export class DashboardModel { timezone: any; editable: any; sharedCrosshair: any; - sharedTooltip: any; rows: DashboardRow[]; time: any; timepicker: any; @@ -53,7 +52,6 @@ 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 9a136b683e2..efa174acdb9 100644 --- a/public/app/features/dashboard/partials/settings.html +++ b/public/app/features/dashboard/partials/settings.html @@ -57,20 +57,14 @@ - -
diff --git a/public/app/plugins/panel/graph/graph.ts b/public/app/plugins/panel/graph/graph.ts index 61e95f3ec61..41154fa00d3 100755 --- a/public/app/plugins/panel/graph/graph.ts +++ b/public/app/plugins/panel/graph/graph.ts @@ -9,18 +9,17 @@ import 'jquery.flot.fillbelow'; import 'jquery.flot.crosshair'; import './jquery.flot.events'; -import angular from 'angular'; import $ from 'jquery'; -import moment from 'moment'; import _ from 'lodash'; +import moment from 'moment'; import kbn from 'app/core/utils/kbn'; +import {appEvents, coreModule} from 'app/core/core'; import GraphTooltip from './graph_tooltip'; import {ThresholdManager} from './threshold_manager'; -var module = angular.module('grafana.directives'); var labelWidthCache = {}; -module.directive('grafanaGraph', function($rootScope, timeSrv) { +coreModule.directive('grafanaGraph', function($rootScope, timeSrv) { return { restrict: 'A', template: '', @@ -28,7 +27,9 @@ module.directive('grafanaGraph', function($rootScope, timeSrv) { var ctrl = scope.ctrl; var dashboard = ctrl.dashboard; var panel = ctrl.panel; - var data, annotations; + var data; + var annotations; + var plot; var sortedSeries; var legendSideLastValue = null; var rootScope = scope.$root; @@ -37,8 +38,8 @@ module.directive('grafanaGraph', function($rootScope, timeSrv) { var tooltip = new GraphTooltip(elem, dashboard, scope, function() { return sortedSeries; }); - var plot; + // panel events ctrl.events.on('panel-teardown', () => { thresholdManager = null; @@ -48,39 +49,6 @@ module.directive('grafanaGraph', function($rootScope, timeSrv) { } }); - rootScope.onAppEvent('setCrosshair', function(event, info) { - // do not need to to this if event is from this panel - if (info.scope === scope) { - return; - } - - if (dashboard.sharedCrosshair) { - if (plot) { - plot.setCrosshair({ x: info.pos.x, y: info.pos.y }); - } - } - }, scope); - - rootScope.onAppEvent('clearCrosshair', function() { - if (plot) { - plot.clearCrosshair(); - } - }, 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; if (!data) { @@ -90,6 +58,27 @@ module.directive('grafanaGraph', function($rootScope, timeSrv) { render_panel(); }); + // global events + appEvents.on('graph-hover', function(evt) { + // ignore other graph hover events if shared tooltip is disabled + if (!dashboard.sharedCrosshair) { + return; + } + + // ignore if we are the emitter + if (!plot || evt.panel.id === panel.id || ctrl.otherPanelInFullscreenMode()) { + return; + } + + tooltip.show(evt.pos); + }, scope); + + appEvents.on('graph-hover-clear', function(event, info) { + if (plot) { + tooltip.clear(plot); + } + }, scope); + function getLegendHeight(panelHeight) { if (!panel.legend.show || panel.legend.rightSide) { return 0; @@ -288,7 +277,7 @@ module.directive('grafanaGraph', function($rootScope, timeSrv) { color: '#666' }, crosshair: { - mode: panel.tooltip.shared || dashboard.sharedCrosshair ? "x" : null + mode: 'x' } }; diff --git a/public/app/plugins/panel/graph/graph_tooltip.js b/public/app/plugins/panel/graph/graph_tooltip.js index 8259e9adc5c..4705d5d5a13 100644 --- a/public/app/plugins/panel/graph/graph_tooltip.js +++ b/public/app/plugins/panel/graph/graph_tooltip.js @@ -1,10 +1,12 @@ define([ 'jquery', - 'lodash' + 'app/core/core', ], -function ($) { +function ($, core) { 'use strict'; + var appEvents = core.appEvents; + function GraphTooltip(elem, dashboard, scope, getSeriesFn) { var self = this; var ctrl = scope.ctrl; @@ -41,7 +43,7 @@ function ($) { return j - 1; }; - this.showTooltip = function(absoluteTime, innerHtml, pos, xMode) { + this.renderAndShow = function(absoluteTime, innerHtml, pos, xMode) { if (xMode === 'time') { innerHtml = '
'+ absoluteTime + '
' + innerHtml; } @@ -140,43 +142,34 @@ function ($) { plot.unhighlight(); } } - - if (dashboard.sharedTooltip) { - ctrl.publishAppEvent('clearTooltip'); - } - - if (dashboard.sharedCrosshair) { - ctrl.publishAppEvent('clearCrosshair'); - } + appEvents.emit('graph-hover-clear'); }); elem.bind("plothover", function (event, pos, item) { - if (dashboard.sharedCrosshair) { - ctrl.publishAppEvent('setCrosshair', {pos: pos, scope: scope}); - } + self.show(pos, item); - if (dashboard.sharedTooltip) { - pos.panelRelY = (pos.pageY - elem.offset().top) / elem.height(); - ctrl.publishAppEvent('setTooltip', {pos: pos, scope: scope}); - } - self.setTooltip(pos, item); + // broadcast to other graph panels that we are hovering! + pos.panelRelY = (pos.pageY - elem.offset().top) / elem.height(); + appEvents.emit('graph-hover', {pos: pos, panel: panel}); }); - this.clearTooltip = function() { + this.clear = function(plot) { $tooltip.detach(); + plot.clearCrosshair(); }; - this.setTooltip = function(pos, item) { + this.show = function(pos, item) { var plot = elem.data().plot; var plotData = plot.getData(); var xAxes = plot.getXAxes(); var xMode = xAxes[0].options.mode; var seriesList = getSeriesFn(); + var allSeriesMode = panel.tooltip.shared; var group, value, absoluteTime, hoverInfo, i, series, seriesHtml, tooltipFormat; // 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) { + if (pos.panelRelY) { var pointOffset = plot.pointOffset({x: pos.x}); if (Number.isNaN(pointOffset.left) || pointOffset.left < 0) { $tooltip.detach(); @@ -184,6 +177,8 @@ function ($) { } pos.pageX = elem.offset().left + pointOffset.left; pos.pageY = elem.offset().top + elem.height() * pos.panelRelY; + plot.setCrosshair(pos); + allSeriesMode = true; } if (seriesList.length === 0) { @@ -196,7 +191,7 @@ function ($) { tooltipFormat = 'YYYY-MM-DD HH:mm:ss'; } - if (panel.tooltip.shared) { + if (allSeriesMode) { plot.unhighlight(); var seriesHoverInfo = self.getMultiSeriesPlotHoverInfo(plotData, pos); @@ -239,7 +234,7 @@ function ($) { plot.highlight(hoverInfo.index, hoverInfo.hoverIndex); } - self.showTooltip(absoluteTime, seriesHtml, pos, xMode); + self.renderAndShow(absoluteTime, seriesHtml, pos, xMode); } // single series tooltip else if (item) { @@ -260,7 +255,7 @@ function ($) { group += '
' + value + '
'; - self.showTooltip(absoluteTime, group, pos, xMode); + self.renderAndShow(absoluteTime, group, pos, xMode); } // no hit else { diff --git a/public/app/plugins/panel/graph/module.ts b/public/app/plugins/panel/graph/module.ts index e546a33c30b..12639a2fd6d 100644 --- a/public/app/plugins/panel/graph/module.ts +++ b/public/app/plugins/panel/graph/module.ts @@ -96,7 +96,6 @@ class GraphCtrl extends MetricsPanelCtrl { value_type: 'individual', shared: true, sort: 0, - msResolution: false, }, // time overrides timeFrom: null, diff --git a/public/app/plugins/panel/graph/specs/graph_specs.ts b/public/app/plugins/panel/graph/specs/graph_specs.ts index 046409b77b2..5578b3a361e 100644 --- a/public/app/plugins/panel/graph/specs/graph_specs.ts +++ b/public/app/plugins/panel/graph/specs/graph_specs.ts @@ -12,7 +12,7 @@ import {Emitter} from 'app/core/core'; describe('grafanaGraph', function() { - beforeEach(angularMocks.module('grafana.directives')); + beforeEach(angularMocks.module('grafana.core')); function graphScenario(desc, func, elementWidth = 500) { describe(desc, function() { diff --git a/public/app/plugins/panel/graph/tab_display.html b/public/app/plugins/panel/graph/tab_display.html index 6845181b8b2..8ace16c6078 100644 --- a/public/app/plugins/panel/graph/tab_display.html +++ b/public/app/plugins/panel/graph/tab_display.html @@ -48,7 +48,7 @@
-
Hover info
+
Hover tooltip