Lots of visual tweaks, added bar chart options to hit panel

2025-01-01 11:47:05 -06:00 · 2013-04-06 16:34:04 -07:00 · 2013-04-06 16:34:04 -07:00 · b7eaae3c8b
commit b7eaae3c8b
parent d685fddcbe
9 changed files with 183 additions and 36 deletions
--- a/common/css/main.css
+++ b/common/css/main.css
@ -6,6 +6,46 @@
  color: #000;
 }

+.kibana-row {
+  margin-left: 15px;
+  margin-bottom: 15px;
+}
+
+.navbar .brand {
+  color: #eee;
+}
+
+.row-close {
+  color: #bbb;  
+  position: absolute;
+  font-size: 9pt;
+  font-weight: 200;
+  padding-left: 35px;
+  padding-top:0px;
+}
+
+.row-open {
+  text-align: right;
+  color: #bbb;  
+  margin-top:30px;
+  position: absolute;
+  font-size: 13pt;
+  font-weight: 200;
+  -moz-transform-origin: 40px;
+  -ms-transform-origin: 40px;
+  -o-transform-origin: 40px;
+  -webkit-transform-origin: 40px;
+  transform-origin: 40px;
+  transform: rotate(-90deg);
+  filter: progid:DXImageTransform.Microsoft.BasicImage(rotation=3);
+  -webkit-transform: rotate(-90deg); 
+  -moz-transform: rotate(-90deg); 
+}
+
+.row-open i {
+  font-size: 10pt;
+}
+
 .odd {
  background-color: #f9f9f9;
 }
--- a/index.html
+++ b/index.html
@ -36,7 +36,7 @@
  <div class="navbar navbar-static-top">
    <div class="navbar-inner">
      <div class="container-fluid">
-        <p class="navbar-text pull-right"><small>Kibana 3 Preview</small></p>
+        <p class="navbar-text pull-right"><small><strong>Kibana 3</strong> <small>milestone 1</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>
--- a/panels/histogram/module.html
+++ b/panels/histogram/module.html
@ -2,16 +2,16 @@
  <span ng-show="panel.spyable" style="position:absolute;right:0px;top:0px" class='panelextra pointer'>
      <i bs-modal="'partials/modal.html'" class="icon-eye-open"></i>
  </span>
-  <center ng-show='panel.zoomlinks && data'>
+  <div>
+  <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>
-  </center>
-  <div>
+  </span> | 
  <span 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>
  </div>
  <center><img ng-show='panel.loading && _.isUndefined(data)' src="common/img/load_big.gif"></center>
-  <div histogram params="{{panel}}" style="height:{{panel.height || row.height}};position:relative"></div>
+  <div histogram-chart params="{{panel}}" style="height:{{panel.height || row.height}};position:relative"></div>
 </kibana-panel>         
--- a/panels/histogram/module.js
+++ b/panels/histogram/module.js
@ -184,7 +184,7 @@ angular.module('kibana.histogram', [])
  }

 })
-.directive('histogram', function(eventBus) {
+.directive('histogramChart', function(eventBus) {
  return {
    restrict: 'A',
    link: function(scope, elem, attrs, ctrl) {
@ -256,7 +256,8 @@ angular.module('kibana.histogram', [])
                color: "#000",
              },
              selection: {
-                mode: "x"
+                mode: "x",
+                color: '#666'
              },
              grid: {
                backgroundColor: '#fff',
--- a/panels/hits/editor.html
+++ b/panels/hits/editor.html
@ -1,25 +1,28 @@
 <div ng-controller="hits">
  <div class="row-fluid">
-    <div class="span3"><h6>Font Size</h6> 
-      <select class="input-small" 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 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 Queries</label><input type="checkbox" ng-model="panel.aggregate" ng-checked="panel.aggregate">
+      <label class="small">Aggregate</label><input type="checkbox" ng-model="panel.aggregate" ng-checked="panel.aggregate">
    </div>
-    <div class="span3" ng-show="!panel.aggregate"><h6>Arrangement</h6> 
-      <select class="input-medium" ng-model="panel.arrangement" ng-options="f for f in ['horizontal','vertical']"></select></span>
+    <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>
+    </div>
+    <div class="span2" ng-show="!panel.aggregate"> 
+      <label class="small">Chart</label><input type="checkbox" ng-model="panel.chart" ng-checked="panel.chart">
    </div>
  </div>
  <div class="row-fluid">
    <div class="span3">
      <form style="margin-bottom: 0px">
-        <h6>Label</h6>
+       <label class="small">Label</label>
        <input type="text" placeholder="New Label" style="width:70%" ng-model="newlabel">
      </form>
    </div>
    <div class="span8">
      <form class="input-append" style="margin-bottom: 0px">
-        <h6>Query</h6>
+        <label class="small">Query</label>
        <input type="text" placeholder="New Query" style="width:80%" ng-model="newquery">
        <button class="btn" ng-click="add_query(newlabel,newquery);newlabel='';newquery=''"><i class="icon-plus"></i></button>
      </form>
--- a/panels/hits/module.html
+++ b/panels/hits/module.html
@ -1,11 +1,14 @@
 <kibana-panel ng-controller='hits' ng-init="init()">
-  <p ng-style="panel.style" ng-show="panel.aggregate">{{hits}}</p>
-  <table ng-style="panel.style" ng-show="!panel.aggregate && panel.arrangement == 'vertical'">  
-    <tr style="line-height:{{panel.style['font-size']}}" ng-repeat="query in data">
-      <td style="padding-right:10px">{{query.label}}</td><td>{{query.hits}}</td>
-    </tr>
-  </table>
-  <div ng-style="panel.style" ng-show="!panel.aggregate && panel.arrangement == 'horizontal'" ng-repeat="query in data" style="float:left; padding-left: 10px">
-    {{query.label}} {{query.hits}} <span ng-show="!$last">|</span>
-  </div>
+  <div ng-show="panel.counters">
+    <p ng-style="panel.style" ng-show="panel.aggregate">{{hits}}</p>
+    <table ng-style="panel.style" ng-show="!panel.aggregate && panel.arrangement == 'vertical'">  
+      <tr style="line-height:{{panel.style['font-size']}}" ng-repeat="query in data">
+        <td ng-show="panel.chart" style="background:{{query.color}};width:{{panel.style['font-size']}}"></td> <td style="padding-right:10px;padding-left:10px;">{{query.label}}</td><td>{{query.hits}}</td>
+      </tr>
+    </table>
+    <div ng-style="panel.style" ng-show="!panel.aggregate && panel.arrangement == 'horizontal'" ng-repeat="query in data" style="float:left;padding-left: 10px;">
+     <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>
 </kibana-panel>         
--- a/panels/hits/module.js
+++ b/panels/hits/module.js
@ -5,9 +5,12 @@ angular.module('kibana.hits', [])
  var _d = {
    query   : "*",
    group   : "default",
-    style   : { "font-size": '36pt'},
+    style   : { "font-size": '10pt'},
    aggregate   : true,
-    arrangement : 'vertical'
+    arrangement : 'vertical',
+    chart   : true,
+    counters: true,
+    count_pos: 'above'
  }
  _.defaults($scope.panel,_d)

@ -87,15 +90,17 @@ angular.module('kibana.hits', [])
          // Create series
          $scope.data[i] = { 
            label: $scope.panel.query[i].label || "query"+(parseInt(i)+1), 
-            hits: hits
+            hits: hits,
+            data: [[i,hits]]
          };

          i++;
        });

+        $scope.$emit('render');
        if(_segment < $scope.panel.index.length-1) 
          $scope.get_data(_segment+1,query_id)
-      
+        
      }
    });
  }
@ -119,4 +124,95 @@ angular.module('kibana.hits', [])
    $scope.get_data();
  }

+}).directive('hitsChart', function(eventBus) {
+  return {
+    restrict: 'A',
+    link: function(scope, elem, attrs, ctrl) {
+
+      // Receive render events
+      scope.$on('render',function(){
+        render_panel();
+      });
+  
+      // Re-render if the window is resized
+      angular.element(window).bind('resize', function(){
+        render_panel();
+      });
+
+      // Function for rendering panel
+      function render_panel() {
+
+        var scripts = $LAB.script("common/lib/panels/jquery.flot.js")
+                    
+        // Populate element. Note that jvectormap appends, does not replace.
+        scripts.wait(function(){
+          console.log(scope.data)
+
+          // Populate element
+          try { 
+            var plot = $.plot(elem, scope.data, {
+              legend: { show: false },
+              series: {
+                lines:  { show: false, },
+                bars:   { show: true,  fill: 1, barWidth: 0.8, horizontal: false },
+                shadowSize: 1
+              },
+              yaxis: { show: true, min: 0, color: "#000" },
+              xaxis: { show: false },
+              grid: {
+                backgroundColor: '#fff',
+                borderWidth: 0,
+                borderColor: '#eee',
+                color: "#eee",
+                hoverable: true,
+              },
+              colors: ['#EB6841','#00A0B0','#6A4A3C','#EDC951','#CC333F']
+            })
+
+            var i = 0;
+            _.each(plot.getData(),function(series) {
+              scope.data[i].color = series.color;
+              i++;
+            })
+            
+            // Work around for missing legend at initialization
+            if(!scope.$$phase)
+              scope.$apply()
+
+          } catch(e) {
+            elem.text(e)
+          }
+        })
+      }
+
+      function tt(x, y, contents) {
+        var tooltip = $('#pie-tooltip').length ? 
+          $('#pie-tooltip') : $('<div id="pie-tooltip"></div>');
+        //var tooltip = $('#pie-tooltip')
+        tooltip.html(contents).css({
+          position: 'absolute',
+          top     : y + 5,
+          left    : x + 5,
+          color   : "#000",
+          border  : '3px solid #000',
+          padding : '10px',
+          'font-size': '11pt',
+          'font-weight' : 'bold',
+          'background-color': '#FFF',
+          'border-radius': '10px',
+        }).appendTo("body");
+      }
+
+      elem.bind("plothover", function (event, pos, item) {
+        if (item) {
+          tt(pos.pageX, pos.pageY,
+            "<div style='vertical-align:middle;display:inline-block;background:"+item.series.color+";height:20px;width:20px'></div> "+
+            item.datapoint[1].toFixed(0))
+        } else {
+          $("#pie-tooltip").remove();
+        }
+      });
+
+    }
+  };
 })
--- a/panels/stringquery/module.html
+++ b/panels/stringquery/module.html
@ -21,7 +21,7 @@
    </form>
  </div>
  <div class='row-fluid' ng-show="panel.multi && panel.multi_arrange == 'horizontal'">
-      <form class="form-inline" style="width:100%;" >        
+      <form class="form-inline" style="width:100%;margin:0px" >        
        <span ng-repeat="q in panel.query">
          <span class="input-append" style="margin-bottom:0px;margin-right:5px">
            <button class="btn btn-danger" type="submit" style="width:50px;margin-left:-50px;visibility:hidden"></button>
--- a/partials/dashboard.html
+++ b/partials/dashboard.html
@ -1,17 +1,21 @@

-<div class="row-fluid container">
+<div class="row-fluid container" style="margin-top:10px">
  <!-- Rows -->
  <div ng-controller="dashcontrol" ng-init="init()"></div>
-  <div class="row-fluid" ng-controller="RowCtrl" ng-repeat="(row_name, row) in dashboards.rows">
-    <div class="span12">
+  <div class="row-fluid kibana-row" ng-controller="RowCtrl" ng-repeat="(row_name, row) in dashboards.rows">
+    <div class="row-control">
      <div class="row-fluid row-header" style="padding:0px;margin:0px;height:0px">
-        <div class="span12" style="min-height:5px;vertical-align:bottom">
-          <i ng-show="row.editable" class="icon-edit pointer editlink" bs-modal="'partials/roweditor.html'"></i>
-          <span ng-show="row.collapsable" ng-click="toggle_row(row)" class="pointer"><i class="pointer" ng-class="{'icon-caret-down': !row.collapse,'icon-caret-right': row.collapse}"></i> <small>{{row.title}}</small></span>
-          <small ng-hide="row.collapsable">{{row.title}}</small>
+        <div style="vertical-align:bottom">
+          <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>
+            </div>
+          </div>
+          <small ng-hide="row.collapsable" class="rotated">{{row.title}}</small>
        </div>
      </div>
-      <div class="row-fluid" style="padding-top:10px" ng-hide="row.collapse">
+      <div class="row-fluid" style="padding-top:0px" ng-hide="row.collapse">
        <!-- Panels -->
        <div ng-repeat="(name, panel) in row.panels" ng-hide="panel.span == 0 || panel.hide" class="span{{panel.span}} panel" style="min-height:{{row.height}}; position:relative">
          <!-- Error Panel -->