diff --git a/public/app/plugins/panel/graph/graph_tooltip.ts b/public/app/plugins/panel/graph/graph_tooltip.ts index f9fa555d9f7..55f0c5432b6 100644 --- a/public/app/plugins/panel/graph/graph_tooltip.ts +++ b/public/app/plugins/panel/graph/graph_tooltip.ts @@ -172,6 +172,18 @@ export default function GraphTooltip(this: any, elem: any, dashboard: any, scope appEvents.emit(CoreEvents.graphClicked, { pos: pos, panel: panel, item: item }); }); + elem.bind('plotleave', () => { + if (!panel.tooltip.shared) { + return; + } + + const plot = elem.data().plot; + if (plot) { + $tooltip.detach(); + plot.unhighlight(); + } + }); + this.clear = (plot: { clearCrosshair: () => void; unhighlight: () => void }) => { $tooltip.detach(); plot.clearCrosshair(); diff --git a/public/vendor/flot/jquery.flot.js b/public/vendor/flot/jquery.flot.js index 95f59da5db9..22cb2b8ee26 100644 --- a/public/vendor/flot/jquery.flot.js +++ b/public/vendor/flot/jquery.flot.js @@ -1357,6 +1357,7 @@ Licensed under the MIT license. // .mouseleave when we drop support for 1.2.6. eventHolder.bind("mouseleave", onMouseLeave); + $(document).bind("touchend", onTouch); } if (options.grid.clickable) @@ -1372,6 +1373,7 @@ Licensed under the MIT license. eventHolder.unbind("mousemove", onMouseMove); eventHolder.unbind("mouseleave", onMouseLeave); eventHolder.unbind("click", onClick); + $(document).unbind("touchend", onTouch); executeHooks(hooks.shutdown, [eventHolder]); } @@ -3052,6 +3054,44 @@ Licensed under the MIT license. triggerClickHoverEvent("plotclick", e, function (s) { return s["clickable"] != false; }); } + // grafana addon - added to support mobile devices click in plot + function onTouch(e) { + if (!e.cancelable) { + return; + } + + if (!eventHolder.is(e.target) && eventHolder.has(e.target).length === 0) { + triggerClickHoverEvent("plotleave", e, function (s) { false; }); + return; + } + + onMouseMove(mapFromTouchEvent(e)); + e.preventDefault(); + } + + // grafana addon - added to support mobile devices and mapping touch event to click event structure + function mapFromTouchEvent(e) { + if (!e || !e.originalEvent) { + return e; + } + + if (e.pageX && e.pageY) { + return e; + } + + var original = e.originalEvent; + + if (original.changedTouches.length === 0) { + return e; + } + + var touch = original.changedTouches[0]; + e.pageX = touch.pageX; + e.pageY = touch.pageY; + + return e; + } + // trigger click or hover event (they send the same parameters // so we share their code) function triggerClickHoverEvent(eventname, event, seriesFilter) {