Clean up panel editors, fix render on panel height change

js/controllers.js

@@ -109,9 +109,9 @@ angular.module('kibana.controllers', [])
     }
   }
 
-  $scope.close_modal = function() {
+  // This can be overridden by individual panel
-    // Dummy function, available for overriding in child scopes. For example
+  $scope.close_edit = function() {
-    // a panel might want to broadcast an event when a modal is closed
+    $scope.$broadcast('render')
   }
 
   $scope.add_panel = function(row,panel) {

panels/histogram/editor.html

@@ -32,19 +32,25 @@
       <i class="icon-remove pointer" ng-click="remove_query(q)"></i>
     </div>
   </div>
-  <div class="row-fluid">    
+  <h5>Chart Options</h5>
-    <div class="span3">
+  <div class="row-fluid">
-      <label class="small">Chart Options</label> 
+    <div class="span1"> <label class="small">Bars</label><input ng-change="$emit('render')" type="checkbox" ng-model="panel.bars" ng-checked="panel.bars"></div>
-      <select ng-change="$emit('render')" multiple style="width:95%" ng-model="panel.show" ng-options="f for f in ['bars','points','stack','lines','legend','x-axis','y-axis']"></select>
+    <div class="span1"> <label class="small">Lines</label><input ng-change="$emit('render')" type="checkbox" ng-model="panel.lines" ng-checked="panel.lines"></div>
-    </div>
+    <div class="span1"> <label class="small">Points</label><input ng-change="$emit('render')" type="checkbox" ng-model="panel.points" ng-checked="panel.points"></div>
-    <div class="span2">
+    <div class="span1"> <label class="small">Stack</label><input ng-change="$emit('render')" type="checkbox" ng-model="panel.stack" ng-checked="panel.stack"></div>
+    <div class="span1"> <label class="small">Legend</label><input ng-change="$emit('render')" type="checkbox" ng-model="panel.legend" ng-checked="panel.legend"></div>
+    <div class="span1"> <label class="small">x-Axis</label><input ng-change="$emit('render')" type="checkbox" ng-model="panel['x-axis']" ng-checked="panel['x-axis']"></div>
+    <div class="span1"> <label class="small">y-Axis</label><input ng-change="$emit('render')" type="checkbox" ng-model="panel['y-axis']" ng-checked="panel['y-axis']"></div>
+    <div class="span2" ng-show="panel.lines">
       <label class="small">Line Fill</label> 
       <select ng-change="$emit('render')" class="input-mini" ng-model="panel.fill" ng-options="f for f in [0,1,2,3,4,5,6,7,8,9,10]"></select>
     </div>
-    <div class="span2">
+    <div class="span2" ng-show="panel.lines">
       <label class="small">Line Width</label> 
       <select ng-change="$emit('render')" class="input-mini" ng-model="panel.linewidth" ng-options="f for f in [0,1,2,3,4,5,6,7,8,9,10]"></select>
     </div>
+  </div> 
+  <div class="row-fluid">    
     <div class="span3">
       <label class="small">Time correction</label> 
       <select ng-change="$emit('render')" ng-model="panel.timezone" class='input-small' ng-options="f for f in ['browser','utc']"></select>

panels/histogram/module.html

@@ -7,7 +7,7 @@
     <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>
   </span> | 
-  <span ng-repeat='series in legend' style='display:inline-block;padding-right:5px'>
+  <span ng-show="panel.legend" ng-repeat='series in legend' style='display:inline-block;padding-right:5px'>
     <div style="display:inline-block;background:{{series.color}};height:10px;width:10px"></div>
     <div class='small' style='display:inline-block'>{{series.label}} ({{series.hits}})</div>
   </span><span class="small"> per <strong>{{panel.interval}}</strong> | (<strong>{{hits}}</strong> total)</span>

panels/histogram/module.js

@@ -3,15 +3,21 @@ angular.module('kibana.histogram', [])
 
   // Set and populate defaults
   var _d = {
+    group     : "default",
     query     : [ {query: "*", label:"Query"} ],
     interval  : secondsToHms(calculate_interval($scope.from,$scope.to,40,0)/1000),
-    show      : ['bars','y-axis','x-axis','legend'],
     fill      : 3,
     linewidth : 3,
     timezone  : 'browser', // browser, utc or a standard timezone
     spyable   : true,
     zoomlinks : true,
-    group     : "default",
+    bars      : true,
+    stack     : true,
+    points    : false,
+    lines     : false,
+    legend    : true,
+    'x-axis'  : true,
+    'y-axis'  : true,
   }
   _.defaults($scope.panel,_d)
 
@@ -204,17 +210,6 @@ angular.module('kibana.histogram', [])
       // Function for rendering panel
       function render_panel() {
         // Determine format
-        var show = _.isUndefined(scope.panel.show) ? {
-            bars: true, lines: false, points: false
-          } : {
-            lines:  _.indexOf(scope.panel.show,'lines')   < 0 ? false : true,
-            bars:   _.indexOf(scope.panel.show,'bars')    < 0 ? false : true,
-            points: _.indexOf(scope.panel.show,'points')  < 0 ? false : true,
-            stack:  _.indexOf(scope.panel.show,'stack')   < 0 ? null  : true,
-            legend: _.indexOf(scope.panel.show,'legend')  < 0 ? false : true,
-            'x-axis': _.indexOf(scope.panel.show,'x-axis') < 0 ? false : true,
-            'y-axis': _.indexOf(scope.panel.show,'y-axis') < 0 ? false : true,
-          }
 
         // Set barwidth based on specified interval
         var barwidth = interval_to_seconds(scope.panel.interval)*1000
@@ -227,6 +222,7 @@ angular.module('kibana.histogram', [])
                     
         // Populate element. Note that jvectormap appends, does not replace.
         scripts.wait(function(){
+          var stack = scope.panel.stack ? true : null;
 
           // Populate element
           try { 
@@ -235,21 +231,21 @@ angular.module('kibana.histogram', [])
                 show: false,
               },
               series: {
-                stack:  show.stack,
+                stack:  stack,
                 lines:  { 
-                  show: show.lines, 
+                  show: scope.panel.lines, 
                   fill: scope.panel.fill/10, 
                   lineWidth: scope.panel.linewidth,
-                  steps: true
+                  steps: false
                 },
-                bars:   { show: show.bars,  fill: 1, barWidth: barwidth/1.8 },
+                bars:   { show: scope.panel.bars,  fill: 1, barWidth: barwidth/1.8 },
-                points: { show: show.points, fill: 1, fillColor: false},
+                points: { show: scope.panel.points, fill: 1, fillColor: false},
                 shadowSize: 1
               },
-              yaxis: { show: show['y-axis'], min: 0, color: "#000" },
+              yaxis: { show: scope.panel['y-axis'], min: 0, color: "#000" },
               xaxis: {
                 timezone: scope.panel.timezone,
-                show: show['x-axis'],
+                show: scope.panel['x-axis'],
                 mode: "time",
                 timeformat: time_format(scope.panel.interval),
                 label: "Datetime",

panels/hits/editor.html

@@ -1,13 +1,13 @@
 <div ng-controller="hits">
   <div class="row-fluid">
-    <div class="span2"><label class="small">Font Size</label> 
+    <div class="span2   "><label class="small">Font Size</label> 
       <select class="input-mini" ng-model="panel.style['font-size']" ng-options="f for f in ['7pt','8pt','9pt','10pt','12pt','14pt','16pt','18pt','20pt','24pt','28pt','32pt','36pt','42pt','48pt','52pt','60pt','72pt']"></select></span>
     </div>
     <div class="span2"> 
       <label class="small">Aggregate</label><input type="checkbox" ng-model="panel.aggregate" ng-checked="panel.aggregate">
     </div>
     <div class="span3" ng-show="!panel.aggregate"><label class="small">Counter Style</label> 
-      <select class="input-small" ng-model="panel.arrangement" ng-options="f for f in ['horizontal','vertical']"></select></span>
+      <select class="input-small" ng-model="panel.arrangement" ng-options="f for f in ['none','horizontal','vertical']"></select></span>
     </div>
     <div class="span2" ng-show="!panel.aggregate"> 
       <label class="small">Chart</label><input type="checkbox" ng-model="panel.chart" ng-checked="panel.chart">

panels/hits/module.html

@@ -10,5 +10,5 @@
      <span ng-show='panel.chart'><div style="display:inline-block;background:{{query.color}};height:{{panel.style['font-size']}};width:{{panel.style['font-size']}}"></div></span> {{query.label}} ({{query.hits}}) <span ng-show="!$last">|</span>
     </div><br>
   </div><div style="clear:both"></div>
-  <div ng-show='panel.chart && panel.query.length > 1' hits-chart params="{{panel}}" style="height:{{panel.height || row.height}};position:relative"></div>
+  <div ng-show='panel.chart && !panel.aggregate ' hits-chart params="{{panel}}" style="height:{{panel.height || row.height}};position:relative"></div>
 </kibana-panel>         

panels/timepicker/module.html

@@ -23,7 +23,7 @@
       </div>
     </div>
     <div ng-switch-when="since">
-      <div class="span10">
+      <div class="span5">
         <form class="nomargin">
           <label><small>Since</small></label>
           <input type="text" class="input-smaller" ng-change="time_check()" ng-model="timepicker.from.date" data-date-format="mm/dd/yyyy" bs-datepicker>  

panels/timepicker/module.js

@@ -111,10 +111,6 @@ angular.module('kibana.timepicker', [])
       }     
       $scope.time_apply();
     });
-    
-    $scope.$on('render', function (){
-      $scope.time_apply();
-    });
   }
 
   $scope.set_interval = function (refresh_interval) {
@@ -167,8 +163,8 @@ angular.module('kibana.timepicker', [])
     $scope.time_apply();
   }
 
-  $scope.close_modal = function() {
+  $scope.close_edit = function() {
-    $scope.$broadcast('render');
+    $scope.time_apply();
   }
 
   $scope.time_check = function(){

partials/paneleditor.html

@@ -13,5 +13,5 @@
   
 </div>
 <div class="modal-footer">
-  <button type="button" class="btn btn-success" ng-click="dismiss();close_modal()">Close</button>
+  <button type="button" class="btn btn-success" ng-click="dismiss();close_edit()">Close</button>
 </div>

partials/roweditor.html

@@ -56,5 +56,5 @@
   </div>
 </div>
 <div class="modal-footer">
-  <button type="button" class="btn btn-success" ng-click="dismiss();reset_panel();send_render()">Close</button>
+  <button type="button" class="btn btn-success" ng-click="dismiss();reset_panel();close_edit()">Close</button>
 </div>