Readded percent stacking, fixed bug when area = 0, added view options to histogram outside of editor

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>

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

@@ -90,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
@@ -99,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();
       });
@@ -308,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) {
@@ -353,7 +361,8 @@ function (angular, app, $, _, kbn, moment, timeSeries) {
                 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
                 },

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

@@ -77,8 +77,8 @@
                 stackSums = getStackSums(plot.getData());
             }
             var newPoints = [];
-			
-			
+
+
 			var key_idx = 0;
 			var value_idx = 1;
 			if (s.bars && s.bars.horizontal && s.bars.horizontal === true) {