Просмотр исходного кода

Added missing text panel, added hover to pie and histogram

Rashid Khan 13 лет назад
Родитель
Сommit
70f6a29700
5 измененных файлов с 56 добавлено и 6 удалено
  1. 7 5
      dashboards.js
  2. 27 0
      panels/histogram/module.js
  3. 1 1
      panels/pie/module.js
  4. 4 0
      panels/text/module.html
  5. 17 0
      panels/text/module.js

+ 7 - 5
dashboards.js

@@ -41,7 +41,8 @@ var dashboards =
           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"
+            " to populate its list of fields from the table panel. The time " +
+            " selector is a member of two groups."
         },
       ]
     },
@@ -55,10 +56,11 @@ var dashboards =
           title   : "About",
           fontsize : "85%",
           span: 2,
-          content : "These pies demonstrate configurable binding. They are" +
+          content : "These donut charts demonstrate configurable binding." + 
+            " They exist in a different group from the other panels and 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.",
+            " you enter a search.",
         },
         {
           title   : "Hamlet",
@@ -175,8 +177,8 @@ var dashboards =
           title   : "Monkey Shakespeare Lines",
           type    : "histogram",
           span    : 5,
-          show    : ['lines','stack'],
-          fill    : 0.3,
+          show    : ['bars','stack'],
+          fill    : 1,
           query   : [
             { label : "Query Hits", query : "*", color: '#86B32D' },
             { label : "Hamlet", query : "play_name:Hamlet" },

+ 27 - 0
panels/histogram/module.js

@@ -164,6 +164,33 @@ angular.module('kibana.histogram', [])
             }
           })
         })
+
+        function tt(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(1) + "%";
+            tt(pos.pageX, pos.pageY,
+              item.datapoint[1].toFixed(1) + " @ " + 
+              new Date(item.datapoint[0]).format(config.timeformat));
+          } else {
+            $("#pie-tooltip").remove();
+          }
+        });
       }
     }
   };

+ 1 - 1
panels/pie/module.js

@@ -191,7 +191,7 @@ angular.module('kibana.pie', [])
 
         elem.bind("plothover", function (event, pos, item) {
           if (item) {
-            var percent = parseFloat(item.series.percent).toFixed(2) + "%";
+            var percent = parseFloat(item.series.percent).toFixed(1) + "%";
             piett(pos.pageX, pos.pageY, percent + " " + item.series.label);
           } else {
             $("#pie-tooltip").remove();

+ 4 - 0
panels/text/module.html

@@ -0,0 +1,4 @@
+<div ng-controller='text'>
+  <h4 ng-class="{'ng-cloak': !panel.title}">{{panel.title}}</h4>
+  <p style="font-size:{{panel.fontsize}}">{{panel.content}}</p>
+</div>

+ 17 - 0
panels/text/module.js

@@ -0,0 +1,17 @@
+angular.module('kibana.text', [])
+.controller('text', function($scope, $rootScope) {
+
+  var _id = _.uniqueId();
+
+  // Set and populate defaults
+  var _d = {
+    group   : "default",
+    content : "",
+    'fontsize': "100%"
+  }
+  _.defaults($scope.panel,_d);
+
+  $scope.init = function() {
+  }
+  $scope.init();
+})