Fixed bug in pie editor, switched up edit icon, added ability to disable drag to select in histogram

index.html

@@ -19,6 +19,14 @@
     <link rel="stylesheet" href="common/css/main.css">
     <link rel="stylesheet" href="common/css/elasticjs.css">
     <link rel="stylesheet" href="common/css/timepicker.css">
+  
+    <!-- project dependency libs -->
+    <script src="common/lib/LAB.min.js"></script>
+    <script src="common/lib/underscore.min.js"></script>
+    <script src="common/lib/settings.js"></script>
+    <script src="config.js"></script>
+    <script src="js/app.js"></script>
+
 
   </head>
 
@@ -32,7 +40,7 @@
         <div class="container-fluid">
           <p class="navbar-text pull-right"><small><strong>Kibana 3</strong> <small>milestone 2</small></small></p>
           <span class="brand">{{dashboards.title}}</span>
-          <div class="brand"><i class='icon-edit pointer' ng-show='dashboards.editable' bs-modal="'partials/dasheditor.html'"></i></div>
+          <div class="brand"><i class='icon-cog pointer' ng-show='dashboards.editable' bs-modal="'partials/dasheditor.html'"></i></div>
         </div>
       </div>
     </div>
@@ -43,11 +51,4 @@
     </div>
   </body>
 
-  <!-- project dependency libs -->
-  <script src="common/lib/LAB.min.js"></script>
-  <script src="common/lib/underscore.min.js"></script>
-  <script src="common/lib/settings.js"></script>
-  <script src="config.js"></script>
-  <script src="js/app.js"></script>
-
 </html>

js/app.js

@@ -17,12 +17,9 @@ var modules = [
 var scripts = []
 
 var labjs = $LAB
-  .script("common/lib/jquery-1.8.0.min.js").wait()
+  .script("common/lib/jquery-1.8.0.min.js")
   .script("common/lib/modernizr-2.6.1.min.js")
   .script("common/lib/underscore.min.js")  
-  .script("common/lib/bootstrap.min.js")
-  .script('common/lib/datepicker.js')
-  .script('common/lib/timepicker.js')
   .script("common/lib/angular.min.js")
   .script("common/lib/angular-strap.min.js")
   .script("common/lib/angular-sanitize.min.js")
@@ -31,6 +28,9 @@ var labjs = $LAB
   .script("common/lib/moment.js")
   .script("common/lib/shared.js")
   .script("common/lib/filesaver.js")
+  .script("common/lib/bootstrap.min.js")
+  .script('common/lib/datepicker.js')
+  .script('common/lib/timepicker.js')
   .script("js/services.js")
   .script("js/controllers.js")
   .script("js/filters.js")

js/directives.js

@@ -8,8 +8,8 @@ angular.module('kibana.directives', [])
     restrict: 'E',
     link: function(scope, elem, attrs) {
       var template = '<img src="common/img/load.gif" class="panel-loading" ng-show="panel.loading == true">'+
-        '<span class="editlink panelextra pointer" style="right:15px;top:0px" bs-modal="\'partials/paneleditor.html\'" ng-show="panel.editable != false">'+
-          '<span class="small">{{panel.type}}</span> <i class="icon-edit pointer"></i>'+
+        ' <span class="editlink panelextra pointer" style="right:15px;top:0px" bs-modal="\'partials/paneleditor.html\'" ng-show="panel.editable != false">'+
+          '<span class="small">{{panel.type}}</span> <i class="icon-cog pointer"></i> '+
         '</span><h4>{{panel.title}}</h4>';
       elem.prepend($compile(angular.element(template))(scope));
     }

panels/histogram/editor.html

@@ -66,10 +66,11 @@
     </div>
   </div> 
   <div class="row-fluid">  
-    <div class="span3">
+    <div class="span2">
       <label class="small">Time correction</label> 
       <select ng-model="panel.timezone" class='input-small' ng-options="f for f in ['browser','utc']"></select>
     </div>
+    <div class="span1"> <label class="small">Selectable</label><input type="checkbox" ng-model="panel.interactive" ng-checked="panel.interactive"></div>
     <div class="span2"> 
       <label class="small">Zoom Links</label><input type="checkbox" ng-model="panel.zoomlinks" ng-checked="panel.zoomlinks" />
     </div>

panels/histogram/module.js

@@ -31,6 +31,7 @@
   * legend :: Show the legend?
   * x-axis :: Show x-axis labels and grid lines
   * y-axis :: Show y-axis labels and grid lines
+  * interactive :: Allow drag to select time range
   ### Group Events
   #### Receives
   * time :: An object containing the time range to use and the index(es) to query
@@ -64,7 +65,8 @@ angular.module('kibana.histogram', [])
     legend      : true,
     'x-axis'    : true,
     'y-axis'    : true,
-    percentage  : false
+    percentage  : false,
+    interactive : true,
   }
   _.defaults($scope.panel,_d)
 
@@ -288,7 +290,7 @@ angular.module('kibana.histogram', [])
 
           // Populate element
           try { 
-            scope.plot = $.plot(elem, scope.data, {
+            var options = {
               legend: { show: false },
               series: {
                 stackpercent: scope.panel.stack ? scope.panel.percentage : false,
@@ -317,10 +319,6 @@ angular.module('kibana.histogram', [])
                 label: "Datetime",
                 color: "#c8c8c8",
               },
-              selection: {
-                mode: "x",
-                color: '#ccc'
-              },
               grid: {
                 backgroundColor: null,
                 borderWidth: 0,
@@ -329,7 +327,12 @@ angular.module('kibana.histogram', [])
                 hoverable: true,
               },
               colors: ['#86B22D','#BF6730','#1D7373','#BFB930','#BF3030','#77207D']
-            })
+            }
+
+            if(scope.panel.interactive)
+              options.selection = { mode: "x", color: '#aaa' };
+
+            scope.plot = $.plot(elem, scope.data, options)
             
             // Work around for missing legend at initialization
             if(!scope.$$phase)

panels/pie/editor.html

@@ -1,10 +1,10 @@
 <div class="row-fluid" ng-switch="panel.mode">
+<div class="span3">
+  <label class="small">Mode</label> 
+  <select class="input-small" ng-change="set_mode(panel.mode)" ng-model="panel.mode" ng-options="f for f in ['terms','goal']"></select>
+</div> 
   <div ng-switch-when="terms">
     <div class="row-fluid">
-      <div class="span3">
-        <label class="small">Mode</label> 
-        <select class="input-small" ng-change="set_mode(panel.mode)" ng-model="panel.mode" ng-options="f for f in ['terms','goal']"></select>
-      </div> 
       <div class="span3">
         <form style="margin-bottom: 0px">
           <label class="small">Field</label>

partials/dashboard.html

@@ -9,7 +9,7 @@
           <div ng-show="row.collapsable">
             <div ng-class="{'row-open': !row.collapse, 'row-close': row.collapse}" style="position:absolute;margin-left:-60px;">
               <span class='pointer' ng-click="toggle_row(row)">{{row.title}}</span>
-              <i ng-show="row.editable" class="icon-edit pointer editlink" bs-modal="'partials/roweditor.html'"></i>
+              <i ng-show="row.editable" class="icon-cog pointer editlink" bs-modal="'partials/roweditor.html'"></i>
             </div>
           </div>
           <small ng-hide="row.collapsable" class="rotated">{{row.title}}</small>