grafana · toni-moreno · Nov 28, 2015
diff --git a/public/app/panels/graph/axisEditor.html b/public/app/panels/graph/axisEditor.html
@@ -216,6 +216,9 @@
 				<li class="tight-form-item">
 					<editor-checkbox text="Current" model="panel.legend.current" change="legendValuesOptionChanged()"></editor-checkbox>
 				</li>
+				<li class="tight-form-item">
+					<editor-checkbox text="Percent" model="panel.legend.percent" change="legendValuesOptionChanged()"></editor-checkbox>
+				</li>
 				<li class="tight-form-item">
 					<editor-checkbox text="Total" model="panel.legend.total" change="legendValuesOptionChanged()"></editor-checkbox>
 				</li>

diff --git a/public/app/panels/graph/graph.tooltip.js b/public/app/panels/graph/graph.tooltip.js
@@ -1,7 +1,8 @@
 define([
   'jquery',
+  'app/core/utils/kbn',
 ],
-function ($) {
+function ($,kbn) {
   'use strict';
 
   function GraphTooltip(elem, dashboard, scope, getSeriesFn) {
@@ -38,11 +39,12 @@ function ($) {
     };
 
     this.getMultiSeriesPlotHoverInfo = function(seriesList, pos) {
-      var value, i, series, hoverIndex;
+      var value, i, series, hoverIndex, original_value;
       var results = [];
 
       //now we know the current X (j) position for X and Y values
       var last_value = 0; //needed for stacked values
+      var sum_value = 0; // needed to compute percent on stacked graphs
 
       for (i = 0; i < seriesList.length; i++) {
         series = seriesList[i];
@@ -63,11 +65,13 @@ function ($) {
         if (series.stack) {
           if (scope.panel.tooltip.value_type === 'individual') {
             value = series.data[hoverIndex][1];
-          } else if (!series.stack) {
-            value = series.data[hoverIndex][1];
+            original_value = value;
+            sum_value+= original_value;
           } else {
-            last_value += series.data[hoverIndex][1];
+            original_value = series.data[hoverIndex][1];
+            last_value += original_value;
             value = last_value;
+            sum_value+= original_value;
           }
         } else {
           value = series.data[hoverIndex][1];
@@ -79,12 +83,19 @@ function ($) {
           // Stacked series can increase its length on each new stacked serie if null points found,
           // to speed the index search we begin always on the last found hoverIndex.
           var newhoverIndex = this.findHoverIndexFromDataPoints(pos.x, series, hoverIndex);
-          results.push({ value: value, hoverIndex: newhoverIndex});
+          results.push({ original_value: original_value, value: value, hoverIndex: newhoverIndex , percent_val: 0});
         } else {
           results.push({ value: value, hoverIndex: hoverIndex});
         }
       }
-
+      //compute percent for stacked series
+      if(scope.panel.tooltip.percent_vals) {
+        $.each(results,function (index,value) {
+          if(value.percent_val === 0) {
+            value.percent_val = value.original_value*100/sum_value;
+          }
+        });
+      }
       return results;
     };
 
@@ -136,7 +147,12 @@ function ($) {
 
           seriesHtml += '<div class="graph-tooltip-list-item"><div class="graph-tooltip-series-name">';
           seriesHtml += '<i class="fa fa-minus" style="color:' + series.color +';"></i> ' + series.label + ':</div>';
-          seriesHtml += '<div class="graph-tooltip-value">' + value + '</div></div>';
+          seriesHtml += '<div class="graph-tooltip-value">' + value + '</div>';
+          if(scope.panel.tooltip.percent_vals && hoverInfo.percent_val) {
+            var value_percent = kbn.valueFormats.percent(hoverInfo.percent_val,1);
+            seriesHtml += '<div class="graph-tooltip-value"> (' + value_percent + ')</div>';
+          }
+          seriesHtml += '</div>';
           plot.highlight(i, hoverInfo.hoverIndex);
         }
 

diff --git a/public/app/panels/graph/legend.js b/public/app/panels/graph/legend.js
@@ -1,11 +1,12 @@
 define([
   'angular',
+  'app/core/utils/kbn',
   'lodash',
   'jquery',
   'jquery.flot',
-  'jquery.flot.time',
+  'jquery.flot.time'
 ],
-function (angular, _, $) {
+function (angular, kbn, _, $) {
   'use strict';
 
   var module = angular.module('grafana.panels.graph');
@@ -88,6 +89,24 @@ function (angular, _, $) {
           return html + '</th>';
         }
 
+        function getSumTotal(getSeriesStack) {
+          var sumTotal = 0;
+          for (i = 0; i < seriesList.length; i++) {
+            var series = seriesList[i];
+            if (getSeriesStack(series)) {
+              sumTotal += series.stats.total;
+            }
+          }
+
+          return sumTotal;
+        }
+
+        function getSeriesStack(stack, series) {
+          series.applySeriesOverrides(panel.seriesOverrides);
+          var seriesStack = typeof series.stack === 'undefined' || series.stack === true;
+          return stack && seriesStack;
+        }
+
         function render() {
           if (firstRender) {
             elem.append($container);
@@ -111,6 +130,7 @@ function (angular, _, $) {
               header += getTableHeaderHtml('max');
               header += getTableHeaderHtml('avg');
               header += getTableHeaderHtml('current');
+              header += getTableHeaderHtml('percent');
               header += getTableHeaderHtml('total');
             }
             header += '</tr>';
@@ -126,6 +146,12 @@ function (angular, _, $) {
             }
           }
 
+          var stack = panel.percentage ? null : panel.stack ? true : null;
+
+          var sumTotal = getSumTotal(function (series) {
+            return getSeriesStack(stack, series);
+          });
+
           for (i = 0; i < seriesList.length; i++) {
             var series = seriesList[i];
 
@@ -160,11 +186,16 @@ function (angular, _, $) {
               var min = series.formatValue(series.stats.min);
               var max = series.formatValue(series.stats.max);
               var total = series.formatValue(series.stats.total);
+              var percent = '-';
+              if (getSeriesStack(stack, series)) {
+                percent = kbn.valueFormats.percent(100 * series.stats.total / sumTotal, 1);
+              }
 
               if (panel.legend.min) { html += '<div class="graph-legend-value min">' + min + '</div>'; }
               if (panel.legend.max) { html += '<div class="graph-legend-value max">' + max + '</div>'; }
               if (panel.legend.avg) { html += '<div class="graph-legend-value avg">' + avg + '</div>'; }
               if (panel.legend.current) { html += '<div class="graph-legend-value current">' + current + '</div>'; }
+              if (panel.legend.percent) { html += '<div class="graph-legend-value percent">' + percent + '</div>'; }
               if (panel.legend.total) { html += '<div class="graph-legend-value total">' + total + '</div>'; }
             }
 

diff --git a/public/app/panels/graph/module.js b/public/app/panels/graph/module.js
@@ -85,6 +85,7 @@ function (angular, _, moment, kbn, TimeSeries, PanelMeta) {
         min: false,
         max: false,
         current: false,
+        percent: false,
         total: false,
         avg: false
       },
@@ -281,7 +282,7 @@ function (angular, _, moment, kbn, TimeSeries, PanelMeta) {
 
     $scope.legendValuesOptionChanged = function() {
       var legend = $scope.panel.legend;
-      legend.values = legend.min || legend.max || legend.avg || legend.current || legend.total;
+      legend.values = legend.min || legend.max || legend.avg || legend.current || legend.percent || legend.total;
       $scope.render();
     };
 

diff --git a/public/app/panels/graph/styleEditor.html b/public/app/panels/graph/styleEditor.html
@@ -52,10 +52,14 @@ <h5>Tooltip</h5>
 			text="All series" model="panel.tooltip.shared" change="render()"
 			tip="Show all series on same tooltip and a x croshair to help follow all series">
 		</editor-opt-bool>
-		<div class="editor-option" ng-show="panel.stack">
+		<div class="editor-option" ng-show="panel.stack && panel.tooltip.shared">
       <label class="small">Stacked Values <tip>How should the values in stacked charts to be calculated?</tip></label>
       <select class="input-small" ng-model="panel.tooltip.value_type" ng-options="f for f in ['cumulative','individual']" ng-change="render()"></select>
     </div>
+    <editor-opt-bool
+			text="Show Percent Values" model="panel.tooltip.percent_vals" showIf="panel.stack && panel.tooltip.shared" change="render()"
+			tip="Show percent values for all stacked series in the tooltip">
+		</editor-opt-bool>   
   </div>
 </div>
 

diff --git a/public/less/panel_graph.less b/public/less/panel_graph.less
@@ -40,6 +40,9 @@
   &.avg:before {
     content: "Avg: "
   }
+  &.percent:before {
+    content: "Percent: "
+  }
 }
 
 .graph-legend-icon .fa {
@@ -105,7 +108,7 @@
   }
 
   .graph-legend-value {
-    &.current, &.max, &.min, &.total, &.avg {
+    &.current, &.max, &.min, &.total, &.avg, &.percent {
       &:before {
         content: '';
       }
@@ -271,5 +274,3 @@
   text-align: center;
   font-size: 12px;
 }
-
-
@@ -166,6 +166,42 @@ define([
 
   });
 
-});
+  describeSharedTooltip("steppedLine false, stack true, individual true, stacked value percent true ", function(ctx) {
+    ctx.setup(function() {
+      ctx.data = [
+        {
+          data: [[10, 8], [12, 20]],
+          lines: {},
+          datapoints: {
+            pointsize: 2,
+            points: [[10, 8], [12, 20]],
+          },
+          stack: true
+        },
+        {
+          data: [[10, 2], [12, 3]],
+          lines: {},
+          datapoints: {
+            pointsize: 2,
+            points: [[10, 2], [12, 3]],
+          },
+          stack: true
+        }
+      ];
+      ctx.scope.panel.stack = true;
+      ctx.scope.panel.tooltip.value_type = 'individual';
+      ctx.scope.panel.tooltip.percent_vals = true;
+      ctx.pos = { x: 11 };
+    });
 
+    it('should not show stacked value', function() {
+      expect(ctx.results[1].value).to.be(2);
+      expect(ctx.results[0].value).to.be(8);
+      expect(ctx.results[1].percent_val).to.be(20);
+      expect(ctx.results[0].percent_val).to.be(80);
+    });
+
+  });
+
+});