Merge branch 'stackPercent'

src/app/components/require.config.js

@@ -32,6 +32,7 @@ require.config({
     'jquery.flot.pie':        '../vendor/jquery/jquery.flot.pie',
     'jquery.flot.selection':  '../vendor/jquery/jquery.flot.selection',
     'jquery.flot.stack':      '../vendor/jquery/jquery.flot.stack',
+    'jquery.flot.stackpercent':'../vendor/jquery/jquery.flot.stackpercent',
     'jquery.flot.time':       '../vendor/jquery/jquery.flot.time',
 
     modernizr:                '../vendor/modernizr-2.6.1',
@@ -64,6 +65,7 @@ require.config({
     'jquery.flot.pie':      ['jquery', 'jquery.flot'],
     'jquery.flot.selection':['jquery', 'jquery.flot'],
     'jquery.flot.stack':    ['jquery', 'jquery.flot'],
+    'jquery.flot.stackpercent':['jquery', 'jquery.flot'],
     'jquery.flot.time':     ['jquery', 'jquery.flot'],
 
     'angular-sanitize':     ['angular'],
@@ -81,4 +83,4 @@ require.config({
 
     elasticjs:              ['angular', '../vendor/elasticjs/elastic']
   }
-});
+});

src/app/panels/histogram/editor.html

@@ -16,12 +16,15 @@
     </div>
   </div>
   <h5>Chart Settings</h5>
-  <div class="row-fluid" style="margin-bottom:10px;">
+  <div class="row-fluid" style="text-align:center;margin-bottom:10px;">
     <div class="span1"> <label class="small">Bars</label><input type="checkbox" ng-model="panel.bars" ng-checked="panel.bars"></div>
     <div class="span1"> <label class="small">Lines</label><input type="checkbox" ng-model="panel.lines" ng-checked="panel.lines"></div>
     <div class="span1"> <label class="small">Points</label><input type="checkbox" ng-model="panel.points" ng-checked="panel.points"></div>
     <div class="span1"> <label class="small">Stack</label><input type="checkbox" ng-model="panel.stack" ng-checked="panel.stack"></div>
-    <!--<div class="span1" ng-show="panel.stack">Percent <tip>Stack as a percentage of total</tip></label><input type="checkbox"  ng-model="panel.percentage" ng-checked="panel.percentage"></div>-->
+    <div class="span1" ng-show="panel.stack">
+      <label style="white-space:nowrap" class="small">Percent <tip>Stack as a percentage of total</tip></label>
+      <input type="checkbox"  ng-model="panel.percentage" ng-checked="panel.percentage">
+    </div>
     <div class="span1"> <label class="small">Legend</label><input type="checkbox" ng-model="panel.legend" ng-checked="panel.legend"></div>
     <div class="span1"> <label class="small">xAxis</label><input type="checkbox" ng-model="panel['x-axis']" ng-checked="panel['x-axis']"></div>
     <div class="span1"> <label class="small">yAxis</label><input type="checkbox" ng-model="panel['y-axis']" ng-checked="panel['y-axis']"></div>
@@ -69,4 +72,4 @@
       <label class="small">Display Query <tip>If an alias is set, it will be shown in the tooltip. If not, should it show the query?</tip></label>
       <input type="checkbox" ng-model="panel.tooltip.query_as_alias" />
     </div>
-  </div>
+  </div>

src/app/panels/histogram/module.html

@@ -16,14 +16,25 @@
     .histogram-chart {
       position:relative;
     }
+    .histogram-options {
+      padding: 5px;
+    }
+    .histogram-options label {
+      margin: 0px 0px 0px 10px !important;
+    }
   </style>
   <span ng-show="panel.spyable" class='spy panelextra pointer'>
       <i bs-modal="'app/partials/inspector.html'" class="icon-eye-open"></i>
   </span>
   <div>
+    <span ng-show='panel.options'>
+      <a class="link underline small" ng-show='panel.options' ng-click="options=!options">
+        <i ng-show="!options" class="icon-caret-right"></i><i ng-show="options" class="icon-caret-down"></i> View
+      </a> |&nbsp
+    </span>
     <span ng-show='panel.zoomlinks && data'>
       <!--<a class='small' ng-click='zoom(0.5)'><i class='icon-zoom-in'></i> Zoom In</a>-->
-      <a class='small' ng-click='zoom(2)'><i class='icon-zoom-out'></i> Zoom Out</a> |
+      <a class='small' ng-click='zoom(2)'><i class='icon-zoom-out'></i> Zoom Out</a> |&nbsp
     </span>
     <span ng-show="panel.legend" ng-repeat='series in data' class="histogram-legend">
       <i class='icon-circle' ng-style="{color: series.info.color}"></i>
@@ -31,6 +42,16 @@
     </span>
     <span ng-show="panel.legend" class="small"><span ng-show="panel.value_field && panel.mode != 'count'">{{panel.value_field}}</span> {{panel.mode}} per <strong>{{panel.interval}}</strong> | (<strong>{{hits}}</strong> hits)</span>
   </div>
+  <form class="form-inline bordered histogram-options" ng-show="options">
+    <label class="small">Bars</label> <input type="checkbox" ng-model="panel.bars" ng-checked="panel.bars" ng-change="render()">
+    <label class="small">Lines</label> <input type="checkbox" ng-model="panel.lines" ng-checked="panel.lines" ng-change="render()">
+    <label class="small">Points</label> <input type="checkbox" ng-model="panel.points" ng-checked="panel.points" ng-change="render()">
+    <label class="small">Stack</label> <input type="checkbox" ng-model="panel.stack" ng-checked="panel.stack" ng-change="render()">
+    <span ng-show="panel.stack">
+      <label style="white-space:nowrap" class="small">Percent</label>
+      <input type="checkbox"  ng-model="panel.percentage" ng-checked="panel.percentage" ng-change="render()">
+    </span>
+  </form>
   <center><img ng-show='panel.loading && _.isUndefined(data)' src="img/load_big.gif"></center>
   <div histogram-chart class="pointer histogram-chart" params="{{panel}}"></div>
 </div>

src/app/panels/histogram/module.js

@@ -40,7 +40,8 @@ define([
   'jquery.flot.pie',
   'jquery.flot.selection',
   'jquery.flot.time',
-  'jquery.flot.stack'
+  'jquery.flot.stack',
+  'jquery.flot.stackpercent'
 ],
 function (angular, app, $, _, kbn, moment, timeSeries) {
 
@@ -89,6 +90,7 @@ function (angular, app, $, _, kbn, moment, timeSeries) {
       'y-axis'    : true,
       percentage  : false,
       interactive : true,
+      options     : true,
       tooltip     : {
         value_type: 'cumulative',
         query_as_alias: false
@@ -98,6 +100,8 @@ function (angular, app, $, _, kbn, moment, timeSeries) {
     _.defaults($scope.panel,_d);
 
     $scope.init = function() {
+      // Hide view options by default
+      $scope.options = false;
       $scope.$on('refresh',function(){
         $scope.get_data();
       });
@@ -307,6 +311,11 @@ function (angular, app, $, _, kbn, moment, timeSeries) {
       $scope.refresh =  false;
       $scope.$emit('render');
     };
+
+    $scope.render = function() {
+      $scope.$emit('render');
+    };
+
   });
 
   module.directive('histogramChart', function(dashboard, filterSrv) {
@@ -348,11 +357,12 @@ function (angular, app, $, _, kbn, moment, timeSeries) {
             var options = {
               legend: { show: false },
               series: {
-                //stackpercent: scope.panel.stack ? scope.panel.percentage : false,
+                stackpercent: scope.panel.stack ? scope.panel.percentage : false,
                 stack: scope.panel.percentage ? null : stack,
                 lines:  {
                   show: scope.panel.lines,
-                  fill: scope.panel.fill/10,
+                  // Silly, but fixes bug in stacked percentages
+                  fill: scope.panel.fill === 0 ? 0.001 : scope.panel.fill/10,
                   lineWidth: scope.panel.linewidth,
                   steps: false
                 },
@@ -476,4 +486,4 @@ function (angular, app, $, _, kbn, moment, timeSeries) {
     };
   });
 
-});
+});

src/app/panels/table/module.js

@@ -325,6 +325,8 @@ function (angular, app, _, kbn, moment) {
     };
   });
 
+
+
   module.filter('tableJson', function() {
     var json;
     return function(text,prettyLevel) {

src/vendor/bootstrap/less/overrides.less

@@ -23,6 +23,10 @@
   font-weight: normal;
 }
 
+.bordered {
+  border: 1px solid @tableBorder;
+}
+
 .spy {
   position:absolute;
   right:0px;

src/vendor/bootstrap/less/variables.dark.less

@@ -80,7 +80,7 @@
 @tableBackground:                   transparent; // overall background-color
 @tableBackgroundAccent:             darken(@grayDark, 5%); // for striping
 @tableBackgroundHover:              @grayDark; // for hover
-@tableBorder:                       darken(@grayDarker, 5%); // table and cell border
+@tableBorder:                       lighten(@grayDark, 2%); // table and cell border
 
 // Buttons
 // -------------------------

src/vendor/jquery/jquery.flot.stackpercent.js

@@ -0,0 +1,126 @@
+(function ($) {
+    var options = {
+        series: {
+            stackpercent: null
+        } // or number/string
+    };
+
+    function init(plot) {
+
+        // will be built up dynamically as a hash from x-value, or y-value if horizontal
+        var stackBases = {};
+        var processed = false;
+        var stackSums = {};
+
+        //set percentage for stacked chart
+        function processRawData(plot, series, data, datapoints) {
+            if (!processed) {
+                processed = true;
+                stackSums = getStackSums(plot.getData());
+            }
+			if (series.stackpercent == true) {
+				var num = data.length;
+				series.percents = [];
+				var key_idx = 0;
+				var value_idx = 1;
+				if (series.bars && series.bars.horizontal && series.bars.horizontal === true) {
+					key_idx = 1;
+					value_idx = 0;
+				}
+				for (var j = 0; j < num; j++) {
+					var sum = stackSums[data[j][key_idx] + ""];
+					if (sum > 0) {
+						series.percents.push(data[j][value_idx] * 100 / sum);
+					} else {
+						series.percents.push(0);
+					}
+				}
+			}
+        }
+
+        //calculate summary
+        function getStackSums(_data) {
+            var data_len = _data.length;
+            var sums = {};
+            if (data_len > 0) {
+                //caculate summary
+                for (var i = 0; i < data_len; i++) {
+                    if (_data[i].stackpercent) {
+						var key_idx = 0;
+						var value_idx = 1;
+						if (_data[i].bars && _data[i].bars.horizontal && _data[i].bars.horizontal === true) {
+							key_idx = 1;
+							value_idx = 0;
+						}
+                        var num = _data[i].data.length;
+                        for (var j = 0; j < num; j++) {
+                            var value = 0;
+                            if (_data[i].data[j][1] != null) {
+                                value = _data[i].data[j][value_idx];
+                            }
+                            if (sums[_data[i].data[j][key_idx] + ""]) {
+                                sums[_data[i].data[j][key_idx] + ""] += value;
+                            } else {
+                                sums[_data[i].data[j][key_idx] + ""] = value;
+                            }
+
+                        }
+                    }
+                }
+            }
+            return sums;
+        }
+
+        function stackData(plot, s, datapoints) {
+            if (!s.stackpercent) return;
+            if (!processed) {
+                stackSums = getStackSums(plot.getData());
+            }
+            var newPoints = [];
+
+
+			var key_idx = 0;
+			var value_idx = 1;
+			if (s.bars && s.bars.horizontal && s.bars.horizontal === true) {
+				key_idx = 1;
+				value_idx = 0;
+			}
+
+			for (var i = 0; i < datapoints.points.length; i += 3) {
+				// note that the values need to be turned into absolute y-values.
+				// in other words, if you were to stack (x, y1), (x, y2), and (x, y3),
+				// (each from different series, which is where stackBases comes in),
+				// you'd want the new points to be (x, y1, 0), (x, y1+y2, y1), (x, y1+y2+y3, y1+y2)
+				// generally, (x, thisValue + (base up to this point), + (base up to this point))
+				if (!stackBases[datapoints.points[i + key_idx]]) {
+					stackBases[datapoints.points[i + key_idx]] = 0;
+				}
+				newPoints[i + key_idx] = datapoints.points[i + key_idx];
+				newPoints[i + value_idx] = datapoints.points[i + value_idx] + stackBases[datapoints.points[i + key_idx]];
+				newPoints[i + 2] = stackBases[datapoints.points[i + key_idx]];
+				stackBases[datapoints.points[i + key_idx]] += datapoints.points[i + value_idx];
+				// change points to percentage values
+				// you may need to set yaxis:{ max = 100 }
+				if ( stackSums[newPoints[i+key_idx]+""] > 0 ){
+					newPoints[i + value_idx] = newPoints[i + value_idx] * 100 / stackSums[newPoints[i + key_idx] + ""];
+					newPoints[i + 2] = newPoints[i + 2] * 100 / stackSums[newPoints[i + key_idx] + ""];
+				} else {
+					newPoints[i + value_idx] = 0;
+					newPoints[i + 2] = 0;
+				}
+			}
+
+            datapoints.points = newPoints;
+        }
+
+		plot.hooks.processRawData.push(processRawData);
+        plot.hooks.processDatapoints.push(stackData);
+    }
+
+    $.plot.plugins.push({
+        init: init,
+        options: options,
+        name: 'stackpercent',
+        version: '0.1'
+    });
+})(jQuery);