Send render whenever window size changes or a panel is resized

elastic · Apr 28, 2014 · 6b69103 · 6b69103
1 parent 430d7fa
commit 6b69103
Show file tree

Hide file tree

Showing 14 changed files with 124 additions and 105 deletions.
diff --git a/src/app/controllers/dash.js b/src/app/controllers/dash.js
@@ -25,6 +25,9 @@ function (angular, config, _) {
     $scope.panelMoveOver = panelMove.onOver;
     $scope.panelMoveOut = panelMove.onOut;
 
+    angular.element(window).bind('resize', function(){
+      $scope.$broadcast('render');
+    });
 
     $scope.init = function() {
       $scope.config = config;

diff --git a/src/app/directives/kibanaPanel.js b/src/app/directives/kibanaPanel.js
@@ -7,9 +7,9 @@ function (angular,$) {
 
   angular
     .module('kibana.directives')
-    .directive('kibanaPanel', function($compile) {
-      var container = '<div class="panel-container" ng-style="{\'min-height\':row.height}"></div>';
-      var content = '<div class="panel-content"></div>';
+    .directive('kibanaPanel', function($compile, $rootScope) {
+      var container = '<div class="panel-container"></div>';
+      var content = '<div class="panel-content" ng-style="{\'min-height\':row.height}"></div>';
 
       var panelHeader =
       '<div class="panel-header">'+
@@ -73,6 +73,10 @@ function (angular,$) {
           // load the module.js if we have any
           var newScope = $scope.$new();
 
+          elem.parent().parent().parent().resize(function() {
+            $rootScope.$broadcast('render');
+          });
+
           $scope.kbnJqUiDraggableOptions = {
             revert: 'invalid',
             helper: function() {

diff --git a/src/app/directives/resizable.js b/src/app/directives/resizable.js
@@ -15,7 +15,8 @@ function (angular) {
           var getOpts = function() {
             return {
               maxWidth: elem.parent().width(),
-              grid: elem.parent().width()/12
+              grid: elem.parent().width()/12,
+              handles: 'e'
             };
           };
 

diff --git a/src/app/panels/goal/module.js b/src/app/panels/goal/module.js
@@ -164,11 +164,6 @@ define([
           render_panel();
         });
 
-        // Or if the window is resized
-        angular.element(window).bind('resize', function(){
-          render_panel();
-        });
-
         // Function for rendering panel
         function render_panel() {
           // IE doesn't work without this

diff --git a/src/app/panels/histogram/module.js b/src/app/panels/histogram/module.js
@@ -579,15 +579,6 @@ function (angular, app, $, _, kbn, moment, timeSeries, numeral) {
           render_panel(data);
         });
 
-        scope.$watch('panel.span', function(){
-          render_panel(data);
-        });
-
-        // Re-render if the window is resized
-        angular.element(window).bind('resize', function(){
-          render_panel(data);
-        });
-
         var scale = function(series,factor) {
           return _.map(series,function(p) {
             return [p[0],p[1]*factor];

diff --git a/src/app/panels/hits/module.js b/src/app/panels/hits/module.js
@@ -203,11 +203,6 @@ define([
           render_panel();
         });
 
-        // Re-render if the window is resized
-        angular.element(window).bind('resize', function(){
-          render_panel();
-        });
-
         // Function for rendering panel
         function render_panel() {
           // IE doesn't work without this

diff --git a/src/app/panels/map/module.html b/src/app/panels/map/module.html
@@ -53,7 +53,7 @@
         background-color: #1f1f1f;
         border-radius: 5px;
         position: absolute;
-        right: 0px;
+        left: 0px;
         top: 15px;
         display: none;
         z-index: 99;

diff --git a/src/app/panels/map/module.js b/src/app/panels/map/module.js
@@ -161,19 +161,16 @@ function (angular, app, _, $) {
 
         // Receive render events
         scope.$on('render',function(){
-          render_panel();
+          slow();
         });
 
-        // Or if the window is resized
-        angular.element(window).bind('resize', function(){
-          render_panel();
+        elem.closest('.panel').resize(function () {
+          elem.empty();
         });
 
         function render_panel() {
+          elem.empty();
           elem.css({height:scope.row.height});
-
-          elem.text('');
-
           $('.jvectormap-zoomin,.jvectormap-zoomout,.jvectormap-label').remove();
           require(['./panels/map/lib/map.'+scope.panel.map], function () {
             elem.vectorMap({
@@ -194,7 +191,7 @@ function (angular, app, _, $) {
                 elem.children('.map-legend').text(label.text() + ": " + count);
               },
               onRegionOut: function() {
-                $('.map-legend').hide();
+                elem.children('.map-legend').hide();
               },
               onRegionClick: function(event, code) {
                 var count = _.isUndefined(scope.data[code]) ? 0 : scope.data[code];
@@ -205,9 +202,11 @@ function (angular, app, _, $) {
             });
             elem.prepend('<span class="map-legend"></span>');
 
-            $('.map-legend').hide();
+            elem.children('.map-legend').hide();
           });
         }
+
+        var slow = _.debounce(render_panel, 200);
       }
     };
   });

diff --git a/src/app/panels/sparklines/module.js b/src/app/panels/sparklines/module.js
@@ -296,11 +296,6 @@ function (angular, app, $, _, kbn, moment, timeSeries) {
           render_panel();
         });
 
-        // Re-render if the window is resized
-        angular.element(window).bind('resize', function(){
-          render_panel();
-        });
-
         var derivative = function(series) {
           return _.map(series, function(p,i) {
             var _v;

diff --git a/src/app/panels/terms/module.html b/src/app/panels/terms/module.html
@@ -4,66 +4,91 @@
     .terms-legend-term {
       word-break: break-all;
     }
+
+    .terms-remaining {
+      bottom:0;
+      top:0;
+      background-color: #f00;
+    }
+
+    .terms-wrapper {
+      display: table;
+      width: 100%;
+    }
+
+    .terms-legend {
+      display: table-row;
+      height: 0;
+    }
+
+    .terms-legend {
+      display: table-row;
+    }
   </style>
 
-  <!-- START Pie or bar chart -->
-  <div ng-show="panel.counter_pos == 'above' && (panel.chart == 'bar' || panel.chart == 'pie')" id='{{$id}}-legend'>
-    <!-- vertical legend above -->
-    <table class="small" ng-show="panel.arrangement == 'vertical'">
-      <tr ng-repeat="term in legend">
-        <td><i class="icon-circle" ng-style="{color:term.color}"></i></td>
-        <td class="terms-legend-term" style="padding-right:10px;padding-left:10px;">{{term.label}}</td>
-        <td>{{term.data[0][1]}}</td>
-      </tr>
-    </table>
-
-    <!-- horizontal legend above -->
-    <span class="small" ng-show="panel.arrangement == 'horizontal'" ng-repeat="term in legend" style="float:left;padding-left: 10px;">
-      <span>
-        <i class="icon-circle" ng-style="{color:term.color}"></i>
-        <span class="terms-legend-term">{{term.label}}</span> ({{term.data[0][1]}})
-      </span>
-    </span>
-
-    <span class="small pull-left" ng-show="panel.tmode == 'terms_stats'">
-      &nbsp | {{ panel.tstat }} of <strong>{{ panel.valuefield }}</strong>
-    </span>
-
-  </div>
-
-  <!-- keep legend from over lapping -->
-  <div style="clear:both"></div>
-
-  <div ng-show="panel.chart == 'pie' || panel.chart == 'bar'" terms-chart params="{{panel}}" style="position:relative" class="pointer"></div>
-
-  <div ng-show="panel.counter_pos == 'below' && (panel.chart == 'bar' || panel.chart == 'pie')" id='{{$id}}-legend'>
-    <!-- vertical legend below -->
-    <table class="small" ng-show="panel.arrangement == 'vertical'">
-      <tr ng-repeat="term in legend">
-        <td><i class="icon-circle" ng-style="{color:term.color}"></i></i></td>
-        <td class="terms-legend-term" style="padding-right:10px;padding-left:10px;">{{term.label}}</td>
-        <td>{{term.data[0][1]}}</td>
-      </tr>
-    </table>
-
-    <!-- horizontal legend below -->
-    <span class="small" ng-show="panel.arrangement == 'horizontal'" ng-repeat="term in legend" style="float:left;padding-left: 10px;">
-      <span>
-        <i class="icon-circle" ng-style="{color:term.color}"></i>
-        <span class="terms-legend-term">{{term.label}}</span> ({{term.data[0][1]}})
+
+  <div class="terms-wrapper">
+    <!-- LEGEND -->
+    <div class="terms-legend" ng-show="panel.counter_pos == 'above' && (panel.chart == 'bar' || panel.chart == 'pie')" id='{{$id}}-legend'>
+      <!-- vertical legend above -->
+      <table class="small" ng-show="panel.arrangement == 'vertical'">
+        <tr ng-repeat="term in legend">
+          <td><i class="icon-circle" ng-style="{color:term.color}"></i></td>
+          <td class="terms-legend-term" style="padding-right:10px;padding-left:10px;">{{term.label}}</td>
+          <td>{{term.data[0][1]}}</td>
+        </tr>
+      </table>
+
+      <!-- horizontal legend above -->
+      <span class="small" ng-show="panel.arrangement == 'horizontal'" ng-repeat="term in legend" style="float:left;padding-left: 10px;">
+        <span>
+          <i class="icon-circle" ng-style="{color:term.color}"></i>
+          <span class="terms-legend-term">{{term.label}}</span> ({{term.data[0][1]}})
+        </span>
       </span>
-    </span>
 
-    <span class="small pull-left" ng-show="panel.tmode == 'terms_stats'">
-      &nbsp | {{ panel.tstat }} of <strong>{{ panel.valuefield }}</strong>
-    </span>
+      <span class="small pull-left" ng-show="panel.tmode == 'terms_stats'">
+        &nbsp | {{ panel.tstat }} of <strong>{{ panel.valuefield }}</strong>
+      </span>
 
+    </div>
+    <!-- keep legend from over lapping -->
     <div style="clear:both"></div>
-  </div>
-  <!-- END Pie or Bar chart -->
 
 
+    <!-- CHART -->
+    <div ng-show="panel.chart == 'pie' || panel.chart == 'bar'" terms-chart params="{{panel}}" style="position:relative" class="pointer terms-chart">
+    </div>
+
+    <!-- LEGEND -->
+    <div class="terms-legend" ng-show="panel.counter_pos == 'below' && (panel.chart == 'bar' || panel.chart == 'pie')" id='{{$id}}-legend'>
+      <!-- vertical legend below -->
+      <table class="small" ng-show="panel.arrangement == 'vertical'">
+        <tr ng-repeat="term in legend">
+          <td><i class="icon-circle" ng-style="{color:term.color}"></i></i></td>
+          <td class="terms-legend-term" style="padding-right:10px;padding-left:10px;">{{term.label}}</td>
+          <td>{{term.data[0][1]}}</td>
+        </tr>
+      </table>
+
+      <!-- horizontal legend below -->
+      <span class="small" ng-show="panel.arrangement == 'horizontal'" ng-repeat="term in legend" style="float:left;padding-left: 10px;">
+        <span>
+          <i class="icon-circle" ng-style="{color:term.color}"></i>
+          <span class="terms-legend-term">{{term.label}}</span> ({{term.data[0][1]}})
+        </span>
+      </span>
+
+      <span class="small pull-left" ng-show="panel.tmode == 'terms_stats'">
+        &nbsp | {{ panel.tstat }} of <strong>{{ panel.valuefield }}</strong>
+      </span>
+
+      <div style="clear:both"></div>
+    </div>
+    <!-- END Pie or Bar chart -->
+
 
+  <!-- TABLE -->
   <table ng-style="panel.style" class="table table-striped table-condensed" ng-show="panel.chart == 'table'">
     <thead>
       <th>Term</th> <th>{{ panel.tmode == 'terms_stats' ? panel.tstat : 'Count' }}</th> <th>Action</th>

diff --git a/src/app/panels/terms/module.js b/src/app/panels/terms/module.js
@@ -255,17 +255,13 @@ function (angular, app, _, $, kbn) {
     return {
       restrict: 'A',
       link: function(scope, elem) {
+        var plot;
 
         // 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 build_results() {
           var k = 0;
           scope.data = [];
@@ -292,7 +288,7 @@ function (angular, app, _, $, kbn) {
 
         // Function for rendering panel
         function render_panel() {
-          var plot, chartData;
+          var chartData;
 
           build_results();
 

diff --git a/src/css/bootstrap.dark.min.css b/src/css/bootstrap.dark.min.css
diff --git a/src/css/bootstrap.light.min.css b/src/css/bootstrap.light.min.css
diff --git a/src/vendor/bootstrap/less/overrides.less b/src/vendor/bootstrap/less/overrides.less
@@ -75,22 +75,36 @@ code, pre {
   display: inline-table;
   vertical-align: top;
   // Work around for overflow issue.
-  margin-left: -1px;
+  box-sizing: border-box;
+  padding: 0px 0px 0px 0px;
+  background: @kibanaPanelBackground;
+  border: 3px solid @bodyBackground;
 }
 
 .panel-container {
-  padding: 0px 0px 0px 0px;
-  background: @kibanaPanelBackground;
   border: 1px solid rgba(100, 100, 100, 0.50);
-  margin: 5px;
+  padding: 10px;
+}
+
+.panel-container > [ng-controller] {
+  box-sizing: border-box;
+  display: table;
+  width: 100%;
+  min-height: inherit;
+}
+
+.panel-header {
+  display: table-row;
+  width: 100%;
+  height: 0px;
 }
 
 .panel-content {
-  padding: 0px 10px 10px 10px;
+  display: table-row;
+  width: 100%;
 }
 
 .panel-title {
-  padding-left: 10px;
   border: 0px;
   text-transform: uppercase;
   font-weight: bold;
@@ -105,7 +119,7 @@ code, pre {
 
 .panel div.panel-extra div.panel-extra-container {
   margin-right: 0px;
-  margin-top: 7px;
+  line-height: 10px;
 }
 
 .panel div.panel-extra {
@@ -115,6 +129,7 @@ code, pre {
 
 .panel div.panel-extra .extra {
   float:right !important;
+  text-align: right;
 }
 
 .panel-error {
@@ -143,7 +158,7 @@ code, pre {
 .ui-resizable-handle { position: absolute;font-size: 0.1px; display: block; }
 .ui-resizable-disabled .ui-resizable-handle, .ui-resizable-autohide .ui-resizable-handle { display: none; }
 .ui-resizable-e { cursor: e-resize; width: 7px; right: 3px; top: 0; height: 100%; }
-.ui-resizable-w { cursor: w-resize; width: 7px; left: 3px; top: 0; height: 100%; }
+
 // ---------------------------
 
 .row-add-button {