From e3942b343829435f9561e191920836ddafab5fd6 Mon Sep 17 00:00:00 2001
From: =?UTF-8?q?Torkel=20=C3=96degaard?= <torkel.odegaard@gmail.com>
Date: Sat, 25 Oct 2014 12:00:56 +0200
Subject: [PATCH] Graph: multi series tooltip fix for long series names, and
 metric value row alignment, Fixes #983, #984

---
 src/app/directives/grafanaGraph.tooltip.js | 10 ++++++----
 src/css/less/graph.less                    | 11 ++++++++++-
 2 files changed, 16 insertions(+), 5 deletions(-)

diff --git a/src/app/directives/grafanaGraph.tooltip.js b/src/app/directives/grafanaGraph.tooltip.js
index 3a4a9b1ac2a..e0fede2f62d 100644
--- a/src/app/directives/grafanaGraph.tooltip.js
+++ b/src/app/directives/grafanaGraph.tooltip.js
@@ -144,8 +144,9 @@ function ($) {
           hoverInfo = seriesHoverInfo[i];
           value = series.formatValue(hoverInfo.value);
 
-          group = '<i class="icon-minus" style="color:' + series.color +';"></i> ' + series.label;
-          seriesHtml = group + ': <span class="graph-tooltip-value">' + value + '</span><br>' + seriesHtml;
+          seriesHtml += '<div class="graph-tooltip-list-item"><div class="graph-tooltip-series-name">';
+          seriesHtml += '<i class="icon-minus" style="color:' + series.color +';"></i> ' + series.label + ':</div>';
+          seriesHtml += '<div class="graph-tooltip-value">' + value + '</div></div>';
           plot.highlight(i, hoverInfo.hoverIndex);
         }
 
@@ -154,7 +155,8 @@ function ($) {
       // single series tooltip
       else if (item) {
         series = seriesList[item.seriesIndex];
-        group = '<i class="icon-minus" style="color:' + item.series.color +';"></i> ' + series.label;
+        group = '<div class="graph-tooltip-list-item"><div class="graph-tooltip-series-name">';
+        group += '<i class="icon-minus" style="color:' + item.series.color +';"></i> ' + series.label + ':</div>';
 
         if (scope.panel.stack && scope.panel.tooltip.value_type === 'individual') {
           value = item.datapoint[1] - item.datapoint[2];
@@ -165,7 +167,7 @@ function ($) {
 
         value = series.formatValue(value);
         timestamp = dashboard.formatDate(item.datapoint[0]);
-        group += ': <span class="graph-tooltip-value">' + value + '</span><br>';
+        group += '<div class="graph-tooltip-value">' + value + '</div>';
 
         self.showTooltip(timestamp, group, pos);
       }
diff --git a/src/css/less/graph.less b/src/css/less/graph.less
index c0c3f371325..0da3014410f 100644
--- a/src/css/less/graph.less
+++ b/src/css/less/graph.less
@@ -178,9 +178,18 @@
     top: -3px;
   }
 
+  .graph-tooltip-list-item {
+    display: table-row;
+  }
+
+  .graph-tooltip-series-name {
+    display: table-cell;
+  }
+
   .graph-tooltip-value {
+    display: table-cell;
     font-weight: bold;
-    float: right;
     padding-left: 10px;
+    text-align: right;
   }
 }