Added comments to default dashboard, added multi group binding to timepicker, added text panel

config.js

@@ -30,7 +30,7 @@ var config = new Settings(
     timefield:      '@timestamp', 
     indexpattern:   '"shakespeare"', 
     modules:        ['histogram','map','pie','table','stringquery','sort',
-                    'timepicker'], 
+                    'timepicker','text'], 
 
     defaultfields:  ['line_text'],
     perpage:        50,

dashboards.js

@@ -29,64 +29,181 @@ var dashboards =
           },
           timespan : '1h',
           timefield: '@timestamp',
+          group: ['default','pies'],
         },
         {
           type    : "sort",
           span    : 4,
-        }
+        },
+        {
+          type    : "text",
+          fontsize : "85%",
+          span: 3,
+          content : "Panels can send events to other panels. In the case of" +
+            " the sort panel, it also receives a field event that it uses" +
+            " to populate its list of fields from the table panel"
+        },
       ]
     },
     {
-      title:  "Monkey Monitoring",
+      title:  "Top 3 Characters",
       collapse: false,
-      height: "300px",
+      height: "160px",
       panels: [
         {
-          title   : "Monkey Shakespeare Lines",
-          type    : "histogram",
-          span    : 6,
-          show    : ['lines'],
-          fill    : 0.3,
-          query   : [
-            { label : "Query", query : "*", color: '#86B32D' },
-            { label : "Hamlet", query : "play_name:Hamlet" },
-            { label : "Macbeth", query : "play_name:macbeth" },
-          ],
+          type    : "text",
+          title   : "About",
+          fontsize : "85%",
+          span: 2,
+          content : "These pies demonstrate configurable binding. They are" +
+            " bound only to the time selector, not to the query input. Thus" +
+            " they will change when you select a new time range, but not if" +
+            " you enter a search. Try hovering over a pie slice.",
         },
         {
-          title   : "Monkey Typists Worldwide",
-          type    : "map",
-          map     : 'world',
-          field   : "country",
-          span    : 6,
-          size    : 500,
-          query   : "*",
-        }
+          title   : "Hamlet",
+          type    : "pie",
+          span    : 2,
+          size    : 3,
+          legend  : false,
+          labels  : false,
+          donut   : true,
+          colors  : ['#20805E','#26527C','#BF8530','#A60000','#006363','#679B00'],
+          field   : 'country',
+          //query   : { query: "*", field: "country"}
+          query   : { field : "speaker", query : "play_name:Hamlet" },
+          group   : "pies"
+        },
+        {
+          title   : "Othello",
+          type    : "pie",
+          span    : 2,
+          size    : 3,
+          legend  : false,
+          labels  : false,
+          donut   : true,
+          colors  : ['#35D59D','#FFB140','#F43D6B','#A60000','#006363','#679B00'],
+          field   : 'country',
+          //query   : { query: "*", field: "country"}
+          query   : { field : "speaker", query : "play_name:Othello" },
+          group   : "pies"
+        },
+        {
+          title   : "A Winters Tale",
+          type    : "pie",
+          span    : 2,
+          size    : 3,
+          legend  : false,
+          labels  : false,
+          donut   : true,
+          colors  : ['#78AF2C','#BF4630','#6A237E','#A60000','#006363','#679B00'],
+          field   : 'country',
+          //query   : { query: "*", field: "country"}
+          query   : { field : "speaker", query : 'play_name:"A Winters Tale"' },
+          group   : "pies"
+        },
+        {
+          title   : "The Tempest",
+          type    : "pie",
+          span    : 2,
+          size    : 3,
+          legend  : false,
+          labels  : false,
+          donut   : true,
+          colors  : ['#2A4480','#BFA730','#BF7130','#A60000','#006363','#679B00'],
+          field   : 'country',
+          //query   : { query: "*", field: "country"}
+          query   : { field : "speaker", query : 'play_name:"The Tempest"' },
+          group   : "pies"
+        },
+        {
+          title   : "King Lear",
+          type    : "pie",
+          span    : 2,
+          size    : 3,
+          legend  : false,
+          labels  : false,
+          donut   : true,
+          colors  : ['#01939A','#FFAB00','#FF0700','#A60000','#006363','#679B00'],
+          field   : 'country',
+          //query   : { query: "*", field: "country"}
+          query   : { field : "speaker", query : 'play_name:"King Lear"' },
+          group   : "pies"
+        },
       ]
     },
     {
       title:  "Lines of Plays",
       height: "250px",
+      collapse: true,
       panels: [
         {
           title   : "Plays",
           type    : "pie",
           span    : 4,
           size    : 8,
-          donut   : true,
           colors  : ['#BF3030','#1D7373','#86B32D','#A60000','#006363','#679B00'],
           field   : 'country',
           //query   : { query: "*", field: "country"}
           query   : { field : "play_name", query : "*" },
         },
+        {
+          type    : "text",
+          title   : "About",
+          fontsize : "85%",
+          span: 2,
+          content : "The table panel can be sorted via a sort panel, or by" +
+            " clicking the table header. Unlike the pie charts above, this" +
+            " pie is bound to the query input. Try searching for a speaker" +
+            " (eg, FALSTAFF) to see a break down of the plays they appear in.", 
+        },
         {
           title   : "Newest Lines",
           type    : "table",
-          span    : 8,
+          span    : 6,
           query   : "*",
           fields  : ['@timestamp','play_name','speaker','text_entry'],
         }
       ]
+    },
+    {
+      title:  "Monkey Monitoring",
+      collapse: false,
+      height: "275px",
+      panels: [
+        {
+          title   : "Monkey Shakespeare Lines",
+          type    : "histogram",
+          span    : 5,
+          show    : ['lines','stack'],
+          fill    : 0.3,
+          query   : [
+            { label : "Query Hits", query : "*", color: '#86B32D' },
+            { label : "Hamlet", query : "play_name:Hamlet" },
+            { label : "Macbeth", query : "play_name:macbeth" },
+          ],
+        },
+        {
+          title   : "Monkey Typists Worldwide",
+          type    : "map",
+          map     : 'world',
+          field   : "country",
+          span    : 5,
+          size    : 500,
+          query   : "*",
+        },
+        {
+          type    : "text",
+          title   : "About",
+          fontsize : "85%",
+          span: 2,
+          content : "Histograms can show multiple queries. In the case that a" +
+            " multi-query histogram is bound to a query input, only the first" +
+            " data series will be altered. All panels exist in the 'default'" +
+            " group by default. The map panel can be used to visualize events" +
+            " with attached geo data.", 
+        },
+      ]
     }
   ]
 };

panels/pie/module.js

@@ -14,6 +14,7 @@ angular.module('kibana.pie', [])
     donut   : false,
     tilt    : false,
     legend  : true,
+    labels  : true,
     group   : "default"
   }
   _.defaults($scope.panel,_d)
@@ -152,7 +153,7 @@ angular.module('kibana.pie', [])
                 label: 'The Rest'
               },
               label: { 
-                show: true,
+                show: scope.panel.labels,
                 radius: 2/3,
                 formatter: function(label, series){
                   return '<div style="font-size:8pt;text-align:center;padding:2px;color:white;">'+
@@ -163,6 +164,7 @@ angular.module('kibana.pie', [])
             }
           },
           //grid: { hoverable: true, clickable: true },
+          grid:   { hoverable: true, clickable: true },
           legend: { show: scope.panel.legend }
         };
 
@@ -170,7 +172,31 @@ angular.module('kibana.pie', [])
         if(elem.is(":visible")){
           $.plot(elem, scope.data, pie);
         }
-        //elem.show();
+        
+        function piett(x, y, contents) {
+          var tooltip = $('#pie-tooltip').length ? 
+            $('#pie-tooltip') : $('<div id="pie-tooltip"></div>');
+          //var tooltip = $('#pie-tooltip')
+          tooltip.text(contents).css({
+            position: 'absolute',
+            top     : y + 5,
+            left    : x + 5,
+            color   : "#FFF",
+            border  : '1px solid #FFF',
+            padding : '2px',
+            'font-size': '8pt',
+            'background-color': '#000',
+          }).appendTo("body");
+        }
+
+        elem.bind("plothover", function (event, pos, item) {
+          if (item) {
+            var percent = parseFloat(item.series.percent).toFixed(2) + "%";
+            piett(pos.pageX, pos.pageY, percent + " " + item.series.label);
+          } else {
+            $("#pie-tooltip").remove();
+          }
+        });
       }
     }
   };

panels/timepicker/module.js

@@ -43,6 +43,9 @@ angular.module('kibana.timepicker', [])
   }
   _.defaults($scope.panel,_d)
 
+  var _groups = _.isArray($scope.panel.group) ? 
+    $scope.panel.group : [$scope.panel.group];
+
   $scope.init = function() {
     // Private refresh interval that we can use for view display without causing
     // unnecessary refreshes during changes
@@ -74,11 +77,13 @@ angular.module('kibana.timepicker', [])
 
     // In the case that a panel is not ready to receive a time event, it may
     // request one be sent by broadcasting a 'get_time' with its _id to its group
-    $scope.$on($scope.panel.group+"-get_time", function(event,id) {
-      console.log('time request: '+id)
-      $rootScope.$broadcast(id+"-time", $scope.time)
+    // This panel can handle multiple groups
+    _.each(_groups,function(group){
+      $scope.$on(group+"-get_time", function(event,id) {
+        $rootScope.$broadcast(id+"-time", $scope.time)
+      });
     });
-        
+
     $scope.$watch('panel.refresh.enable', function() {$scope.refresh()});
     $scope.$watch('panel.refresh.interval', function() {
       $timeout(function(){
@@ -170,7 +175,9 @@ angular.module('kibana.timepicker', [])
     indices($scope.time.from,$scope.time.to).then(function (p) {
       $scope.time.index = p.join();
       // Broadcast time
-      $rootScope.$broadcast($scope.panel.group+"-time", $scope.time)
+      _.each(_groups,function(group){
+        $rootScope.$broadcast(group+"-time", $scope.time)
+      });
     });
 
     // Update panel's string representation of the time object