Merge pull request #11480 from grafana/graph_tooltip_to_ts

Graph tooltip to ts

public/app/plugins/panel/graph/graph_tooltip.js → public/app/plugins/panel/graph/graph_tooltip.ts

-define([
-  'jquery',
-  'app/core/core',
-],
-function ($, core) {
-  'use strict';
+import $ from 'jquery';
+import { appEvents } from 'app/core/core';
 
-  var appEvents = core.appEvents;
+export default function GraphTooltip(elem, dashboard, scope, getSeriesFn) {
+  let self = this;
+  let ctrl = scope.ctrl;
+  let panel = ctrl.panel;
 
-  function GraphTooltip(elem, dashboard, scope, getSeriesFn) {
-    var self = this;
-    var ctrl = scope.ctrl;
-    var panel = ctrl.panel;
-
-    var $tooltip = $('<div class="graph-tooltip">');
+  let $tooltip = $('<div class="graph-tooltip">');
 
   this.destroy = function() {
     $tooltip.remove();
   };
 
   this.findHoverIndexFromDataPoints = function(posX, series, last) {
-      var ps = series.datapoints.pointsize;
-      var initial = last*ps;
-      var len = series.datapoints.points.length;
-      for (var j = initial; j < len; j += ps) {
+    let ps = series.datapoints.pointsize;
+    let initial = last * ps;
+    let len = series.datapoints.points.length;
+    let j;
+    for (j = initial; j < len; j += ps) {
       // Special case of a non stepped line, highlight the very last point just before a null point
-        if ((!series.lines.steps && series.datapoints.points[initial] != null && series.datapoints.points[j] == null)
+      if (
+        (!series.lines.steps && series.datapoints.points[initial] != null && series.datapoints.points[j] == null) ||
         //normal case
-            || series.datapoints.points[j] > posX) {
-          return Math.max(j - ps,  0)/ps;
+        series.datapoints.points[j] > posX
+      ) {
+        return Math.max(j - ps, 0) / ps;
       }
     }
-      return j/ps - 1;
+    return j / ps - 1;
   };
 
   this.findHoverIndexFromData = function(posX, series) {
-      var lower = 0;
-      var upper = series.data.length - 1;
-      var middle;
+    let lower = 0;
+    let upper = series.data.length - 1;
+    let middle;
     while (true) {
       if (lower > upper) {
         return Math.max(upper, 0);
@@ -54,20 +51,20 @@ function ($, core) {
 
   this.renderAndShow = function(absoluteTime, innerHtml, pos, xMode) {
     if (xMode === 'time') {
-        innerHtml = '<div class="graph-tooltip-time">'+ absoluteTime + '</div>' + innerHtml;
+      innerHtml = '<div class="graph-tooltip-time">' + absoluteTime + '</div>' + innerHtml;
     }
     $tooltip.html(innerHtml).place_tt(pos.pageX + 20, pos.pageY);
   };
 
   this.getMultiSeriesPlotHoverInfo = function(seriesList, pos) {
-      var value, i, series, hoverIndex, hoverDistance, pointTime, yaxis;
+    let value, i, series, hoverIndex, hoverDistance, pointTime, yaxis;
     // 3 sub-arrays, 1st for hidden series, 2nd for left yaxis, 3rd for right yaxis.
-      var results = [[],[],[]];
+    let results: any = [[], [], []];
 
     //now we know the current X (j) position for X and Y values
-      var last_value = 0; //needed for stacked values
+    let last_value = 0; //needed for stacked values
 
-      var minDistance, minTime;
+    let minDistance, minTime;
 
     for (i = 0; i < seriesList.length; i++) {
       series = seriesList[i];
@@ -89,9 +86,11 @@ function ($, core) {
       pointTime = series.data[hoverIndex][0];
 
       // Take the closest point before the cursor, or if it does not exist, the closest after
-        if (! minDistance
-            || (hoverDistance >=0 && (hoverDistance < minDistance || minDistance < 0))
-            || (hoverDistance < 0 && hoverDistance > minDistance)) {
+      if (
+        !minDistance ||
+        (hoverDistance >= 0 && (hoverDistance < minDistance || minDistance < 0)) ||
+        (hoverDistance < 0 && hoverDistance > minDistance)
+      ) {
         minDistance = hoverDistance;
         minTime = pointTime;
       }
@@ -130,12 +129,12 @@ function ($, core) {
         label: series.aliasEscaped,
         time: pointTime,
         distance: hoverDistance,
-          index: i
+        index: i,
       });
     }
 
     // Contat the 3 sub-arrays
-      results = results[0].concat(results[1],results[2]);
+    results = results[0].concat(results[1], results[2]);
 
     // Time of the point closer to pointer
     results.time = minTime;
@@ -143,9 +142,9 @@ function ($, core) {
     return results;
   };
 
-    elem.mouseleave(function () {
+  elem.mouseleave(function() {
     if (panel.tooltip.shared) {
-        var plot = elem.data().plot;
+      let plot = elem.data().plot;
       if (plot) {
         $tooltip.detach();
         plot.unhighlight();
@@ -154,16 +153,16 @@ function ($, core) {
     appEvents.emit('graph-hover-clear');
   });
 
-    elem.bind("plothover", function (event, pos, item) {
+  elem.bind('plothover', function(event, pos, item) {
     self.show(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});
+    appEvents.emit('graph-hover', { pos: pos, panel: panel });
   });
 
-    elem.bind("plotclick", function (event, pos, item) {
-      appEvents.emit('graph-click', {pos: pos, panel: panel, item: item});
+  elem.bind('plotclick', function(event, pos, item) {
+    appEvents.emit('graph-click', { pos: pos, panel: panel, item: item });
   });
 
   this.clear = function(plot) {
@@ -173,25 +172,26 @@ function ($, core) {
   };
 
   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;
+    let plot = elem.data().plot;
+    let plotData = plot.getData();
+    let xAxes = plot.getXAxes();
+    let xMode = xAxes[0].options.mode;
+    let seriesList = getSeriesFn();
+    let allSeriesMode = panel.tooltip.shared;
+    let 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) {
-        var pointOffset = plot.pointOffset({x: pos.x});
+      let pointOffset = plot.pointOffset({ x: pos.x });
       if (Number.isNaN(pointOffset.left) || pointOffset.left < 0 || pointOffset.left > elem.width()) {
         self.clear(plot);
         return;
       }
       pos.pageX = elem.offset().left + pointOffset.left;
       pos.pageY = elem.offset().top + elem.height() * pos.panelRelY;
-        var isVisible = pos.pageY >= $(window).scrollTop() && pos.pageY <= $(window).innerHeight() + $(window).scrollTop();
+      let isVisible =
+        pos.pageY >= $(window).scrollTop() && pos.pageY <= $(window).innerHeight() + $(window).scrollTop();
       if (!isVisible) {
         self.clear(plot);
         return;
@@ -218,7 +218,7 @@ function ($, core) {
     if (allSeriesMode) {
       plot.unhighlight();
 
-        var seriesHoverInfo = self.getMultiSeriesPlotHoverInfo(plotData, pos);
+      let seriesHoverInfo = self.getMultiSeriesPlotHoverInfo(plotData, pos);
 
       seriesHtml = '';
 
@@ -243,7 +243,7 @@ function ($, core) {
           continue;
         }
 
-          var highlightClass = '';
+        let highlightClass = '';
         if (item && hoverInfo.index === item.seriesIndex) {
           highlightClass = 'graph-tooltip-list-item--highlight';
         }
@@ -252,24 +252,25 @@ function ($, core) {
 
         value = series.formatValue(hoverInfo.value);
 
-          seriesHtml += '<div class="graph-tooltip-list-item ' + highlightClass + '"><div class="graph-tooltip-series-name">';
-          seriesHtml += '<i class="fa fa-minus" style="color:' + hoverInfo.color +';"></i> ' + hoverInfo.label + ':</div>';
+        seriesHtml +=
+          '<div class="graph-tooltip-list-item ' + highlightClass + '"><div class="graph-tooltip-series-name">';
+        seriesHtml +=
+          '<i class="fa fa-minus" style="color:' + hoverInfo.color + ';"></i> ' + hoverInfo.label + ':</div>';
         seriesHtml += '<div class="graph-tooltip-value">' + value + '</div></div>';
         plot.highlight(hoverInfo.index, hoverInfo.hoverIndex);
       }
 
       self.renderAndShow(absoluteTime, seriesHtml, pos, xMode);
-      }
+    } else if (item) {
       // single series tooltip
-      else if (item) {
       series = seriesList[item.seriesIndex];
       group = '<div class="graph-tooltip-list-item"><div class="graph-tooltip-series-name">';
-        group += '<i class="fa fa-minus" style="color:' + item.series.color +';"></i> ' + series.aliasEscaped + ':</div>';
+      group +=
+        '<i class="fa fa-minus" style="color:' + item.series.color + ';"></i> ' + series.aliasEscaped + ':</div>';
 
       if (panel.stack && panel.tooltip.value_type === 'individual') {
         value = item.datapoint[1] - item.datapoint[2];
-        }
-        else {
+      } else {
         value = item.datapoint[1];
       }
 
@@ -280,13 +281,9 @@ function ($, core) {
       group += '<div class="graph-tooltip-value">' + value + '</div>';
 
       self.renderAndShow(absoluteTime, group, pos, xMode);
-      }
+    } else {
       // no hit
-      else {
       $tooltip.detach();
     }
   };
-  }
-
-  return GraphTooltip;
-});
+}

public/app/plugins/panel/graph/specs/tooltip_specs.ts

@@ -11,6 +11,7 @@ var scope = {
 
 var elem = $('<div></div>');
 var dashboard = {};
+var getSeriesFn;
 
 function describeSharedTooltip(desc, fn) {
   var ctx: any = {};
@@ -30,7 +31,7 @@ function describeSharedTooltip(desc, fn) {
   describe(desc, function() {
     beforeEach(function() {
       ctx.setupFn();
-      var tooltip = new GraphTooltip(elem, dashboard, scope);
+      var tooltip = new GraphTooltip(elem, dashboard, scope, getSeriesFn);
       ctx.results = tooltip.getMultiSeriesPlotHoverInfo(ctx.data, ctx.pos);
     });
 
@@ -39,7 +40,7 @@ function describeSharedTooltip(desc, fn) {
 }
 
 describe('findHoverIndexFromData', function() {
-  var tooltip = new GraphTooltip(elem, dashboard, scope);
+  var tooltip = new GraphTooltip(elem, dashboard, scope, getSeriesFn);
   var series = {
     data: [[100, 0], [101, 0], [102, 0], [103, 0], [104, 0], [105, 0], [106, 0], [107, 0]],
   };