Graph: fixed value formating for tooltip, need original data. flotcharts copys the data, so changes to value formats func after plot call does not affect the plot.getData() series

src/app/components/timeSeries.js

@@ -5,15 +5,11 @@ define([
 function (_, kbn) {
   'use strict';
 
-  function defaultValueFormater(value) {
-    return kbn.valueFormats.none(value, 2, 2);
-  }
-
   function TimeSeries(opts) {
     this.datapoints = opts.datapoints;
     this.info = opts.info;
     this.label = opts.info.alias;
-    this.valueFormater = defaultValueFormater;
+    this.valueFormater = kbn.valueFormats.none;
   }
 
   function matchSeriesOverride(aliasOrRegex, seriesAlias) {
@@ -113,14 +109,19 @@ function (_, kbn) {
   };
 
   TimeSeries.prototype.updateLegendValues = function(formater, decimals, scaledDecimals) {
-    this.valueFormater = function(value) {
+    this.valueFormater = formater;
-      return formater(value, decimals, scaledDecimals);
+    this.decimals = decimals;
+    this.scaledDecimals = scaledDecimals;
+
+    this.info.avg = this.formatValue(this.info.avg);
+    this.info.current = this.formatValue(this.info.current);
+    this.info.min = this.formatValue(this.info.min);
+    this.info.max = this.formatValue(this.info.max);
+    this.info.total = this.formatValue(this.info.total);
   };
-    this.info.avg = this.valueFormater(this.info.avg);
+
-    this.info.current = this.valueFormater(this.info.current);
+  TimeSeries.prototype.formatValue = function(value) {
-    this.info.min = this.valueFormater(this.info.min);
+    return this.valueFormater(value, this.decimals, this.scaledDecimals);
-    this.info.max = this.valueFormater(this.info.max);
-    this.info.total = this.valueFormater(this.info.total);
   };
 
   return TimeSeries;

src/app/directives/grafanaGraph.js

@@ -105,7 +105,6 @@ function (angular, $, kbn, moment, _, GraphTooltip) {
 
         function updateLegendValues(plot) {
           var yaxis = plot.getYAxes();
-          console.log("value");
 
           for (var i = 0; i < data.length; i++) {
             var series = data[i];
@@ -113,7 +112,6 @@ function (angular, $, kbn, moment, _, GraphTooltip) {
             var formater = kbn.valueFormats[scope.panel.y_formats[series.yaxis - 1]];
             series.updateLegendValues(formater, axis.tickDecimals, axis.scaledDecimals);
           }
-
         }
 
         // Function for rendering panel
@@ -417,7 +415,9 @@ function (angular, $, kbn, moment, _, GraphTooltip) {
           elem.html('<img src="' + url + '"></img>');
         }
 
-        new GraphTooltip(elem, dashboard, scope);
+        new GraphTooltip(elem, dashboard, scope, function() {
+          return data;
+        });
 
         elem.bind("plotselected", function (event, ranges) {
           scope.$apply(function() {

src/app/directives/grafanaGraph.tooltip.js

@@ -4,7 +4,7 @@ define([
 function ($) {
   'use strict';
 
-  function GraphTooltip(elem, dashboard, scope) {
+  function GraphTooltip(elem, dashboard, scope, getSeriesFn) {
     var self = this;
 
     var $tooltip = $('<div id="tooltip">');
@@ -38,7 +38,7 @@ function ($) {
     };
 
     this.getMultiSeriesPlotHoverInfo = function(seriesList, pos) {
-      var value, seriesInfo, i, series, hoverIndex;
+      var value, i, series, hoverIndex;
       var results = [];
 
       var pointCount = seriesList[0].data.length;
@@ -62,7 +62,6 @@ function ($) {
 
       for (i = 0; i < seriesList.length; i++) {
         series = seriesList[i];
-        seriesInfo = series.info;
 
         if (scope.panel.stack) {
           if (scope.panel.tooltip.value_type === 'individual') {
@@ -113,7 +112,8 @@ function ($) {
 
     elem.bind("plothover", function (event, pos, item) {
       var plot = elem.data().plot;
-      var data = plot.getData();
+      var plotData = plot.getData();
+      var seriesList = getSeriesFn();
       var group, value, timestamp, hoverInfo, i, series, seriesHtml;
 
       if(dashboard.sharedCrosshair){
@@ -123,7 +123,7 @@ function ($) {
       if (scope.panel.tooltip.shared) {
         plot.unhighlight();
 
-        var seriesHoverInfo = self.getMultiSeriesPlotHoverInfo(data, pos);
+        var seriesHoverInfo = self.getMultiSeriesPlotHoverInfo(plotData, pos);
         if (seriesHoverInfo.pointCountMismatch) {
           self.showTooltip('Shared tooltip error', '<ul>' +
             '<li>Series point counts are not the same</li>' +
@@ -136,9 +136,9 @@ function ($) {
         timestamp = dashboard.formatDate(seriesHoverInfo.time);
 
         for (i = 0; i < seriesHoverInfo.length; i++) {
-          series = data[i];
+          series = seriesList[i];
           hoverInfo = seriesHoverInfo[i];
-          value = series.valueFormater(hoverInfo.value);
+          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;
@@ -159,7 +159,7 @@ function ($) {
           value = item.datapoint[1];
         }
 
-        value = series.valueFormater(value);
+        value = series.formatValue(value);
         timestamp = dashboard.formatDate(item.datapoint[0]);
         group += ': <span class="graph-tooltip-value">' + value + '</span>';