IE9 support; closes #96

common/css/main.css

@@ -49,9 +49,9 @@
   -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); 
+  -ms-transform: rotate(-90deg);
 }
 
 .row-open i {

panels/histogram/module.html

@@ -26,11 +26,11 @@
     <a class='small' ng-click='zoom(2)'><i class='icon-zoom-out'></i> Zoom Out</a> | 
   </span>
   <span ng-show="panel.legend" ng-repeat='series in data' class="histogram-legend">
-    <div class="histogram-legend-dot" style="background:{{series.info.color}};"></div>
+    <i class='icon-circle' ng-style="{color: series.info.color}"></i>
-    <div class='small histogram-legend-item'>{{series.info.alias}} ({{series.hits}})</div>
+    <span class='small histogram-legend-item'>{{series.info.alias}} ({{series.hits}})</span>
   </span>
   <span ng-show="panel.legend" class="small"><span ng-show="panel.value_field && panel.mode != 'count'">{{panel.value_field}}</span> {{panel.mode}} per <strong>{{panel.interval}}</strong> | (<strong>{{hits}}</strong> hits)</span>
   </div>
   <center><img ng-show='panel.loading && _.isUndefined(data)' src="common/img/load_big.gif"></center>
-  <div histogram-chart class="histogram-chart" params="{{panel}}" style="height:{{panel.height || row.height}};"></div>
+  <div histogram-chart class="histogram-chart" params="{{panel}}"></div>
 </kibana-panel>         

panels/histogram/module.js

@@ -266,6 +266,7 @@ angular.module('kibana.histogram', [])
 .directive('histogramChart', function(dashboard, eventBus, filterSrv, $rootScope) {
   return {
     restrict: 'A',
+    template: '<div></div>',
     link: function(scope, elem, attrs, ctrl) {
 
       // Receive render events
@@ -280,7 +281,10 @@ angular.module('kibana.histogram', [])
 
       // Function for rendering panel
       function render_panel() {
- 
+
+        // IE doesn't work without this
+        elem.css({height:scope.panel.height||scope.row.height});
+        
         // Populate from the query service
         try {
           _.each(scope.data,function(series) {

panels/hits/module.html

@@ -10,26 +10,26 @@
 
     <!-- horizontal legend -->
     <div class="small" ng-show="panel.arrangement == 'horizontal'" ng-repeat="query in data" style="float:left;padding-left: 10px;">
-     <span><div style="display:inline-block;border-radius:5px;background:{{query.info.color}};height:10px;width:10px"></div></span> {{query.info.alias}} ({{query.data[0][1]}}) </span>
+     <span><i class="icon-circle" ng-style="{color:query.info.color}"></i> {{query.info.alias}} ({{query.data[0][1]}}) </span>
     </div><br>
 
   </div>
 
   <div style="clear:both"></div>
 
-  <div ng-show="panel.chart == 'pie' || panel.chart == 'bar'" hits-chart params="{{panel}}" style="height:{{panel.height || row.height}};position:relative"></div>
+  <div ng-show="panel.chart == 'pie' || panel.chart == 'bar'" hits-chart params="{{panel}}" style="position:relative"></div>
 
   <div ng-show="panel.counter_pos == 'below' && (panel.chart == 'bar' || panel.chart == 'pie')" id='{{$id}}-legend'>
     <!-- vertical legend -->
     <table class="small" ng-show="panel.arrangement == 'vertical'">  
       <tr ng-repeat="query in data">
-        <td><div style="display:inline-block;border-radius:5px;background:{{query.info.color}};height:10px;width:10px"></div></td> <td style="padding-right:10px;padding-left:10px;">{{query.info.alias}}</td><td>{{query.data[0][1]}}</td>
+        <td><i class="icon-circle" ng-style="{color:query.info.color}"></i></td> <td style="padding-right:10px;padding-left:10px;">{{query.info.alias}}</td><td>{{query.data[0][1]}}</td>
       </tr>
     </table>
 
     <!-- horizontal legend -->
     <div class="small" ng-show="panel.arrangement == 'horizontal'" ng-repeat="query in data" style="float:left;padding-left: 10px;">
-     <span><div style="display:inline-block;border-radius:5px;background:{{query.info.color}};height:10px;width:10px"></div></span> {{query.info.alias}} ({{query.data[0][1]}}) </span>
+     <span><i class="icon-circle" ng-style="{color:query.info.color}"></i></span> {{query.info.alias}} ({{query.data[0][1]}}) </span>
     </div><br>
 
   </div>

panels/hits/module.js

@@ -161,6 +161,8 @@ angular.module('kibana.hits', [])
 
       // Function for rendering panel
       function render_panel() {
+        // IE doesn't work without this
+        elem.css({height:scope.panel.height||scope.row.height});
 
         try {
           _.each(scope.data,function(series) {
@@ -228,9 +230,6 @@ angular.module('kibana.hits', [])
                 colors: query.colors
               });
             }
-            // Compensate for the height of the  legend. Gross
-            elem.height(
-              (scope.panel.height || scope.row.height).replace('px','') - $("#"+scope.$id+"-legend").height());
 
             // Work around for missing legend at initialization
             if(!scope.$$phase) {

panels/pie/module.html

@@ -4,13 +4,13 @@
   </span>
 
   <div ng-show="panel.legend == 'above'" ng-repeat="query in plot.getData()" style="float:left;padding-left: 10px;">
-    <span ng-show='panel.chart != "none"'><div style="display:inline-block;border-radius:5px;background:{{query.color}};height:10px;width:10px"></div></span><span class="small"> {{query.label}} ({{query.data[0][1]}}) </span></span>
+    <span ng-show='panel.chart != "none"'><i class="icon-circle" ng-style="{color:query.color}"></i></span><span class="small"> {{query.label}} ({{query.data[0][1]}}) </span></span>
   </div><br>
   <div style="clear:both"></div>
 
-  <div pie params="{{panel}}" style="height:{{panel.height || row.height}};position:relative"></div>
+  <div pie params="{{panel}}" style="position:relative"></div>
 
   <div ng-show="panel.legend == 'below'" ng-repeat="query in plot.getData()" style="float:left;padding-left: 10px;">
-    <span ng-show='panel.chart != "none"'><div style="display:inline-block;border-radius:5px;background:{{query.color}};height:10px;width:10px"></div></span><span class="small"> {{query.label}} ({{query.data[0][1]}}) </span></span>
+    <span ng-show='panel.chart != "none"'><i class="icon-circle" ng-style="{color:query.color}"></i></span><span class="small"> {{query.label}} ({{query.data[0][1]}}) </span></span>
   </div>
 </kibana-panel>         

panels/pie/module.js

@@ -181,10 +181,14 @@ angular.module('kibana.pie', [])
 
       // Function for rendering panel
       function render_panel() {
+        // IE doesn't work without this
+        elem.css({height:scope.panel.height||scope.row.height});
+
         var scripts = $LAB.script("common/lib/panels/jquery.flot.js").wait()
                           .script("common/lib/panels/jquery.flot.pie.js");
     
         var label;
+
         if(scope.panel.mode === 'goal') {
           label = { 
             show: scope.panel.labels,

panels/query/meta.html

@@ -9,7 +9,7 @@
   <form>
     <input class="input-medium input-query-alias" type="text" ng-model="queries.list[id].alias" placeholder='Alias...' />
     <div>
-      <i ng-repeat="color in queries.colors" class="pointer" ng-class="{'icon-circle-blank':queries.list[id].color == color,'icon-circle':queries.list[id].color != color}" style="color:{{color}}" ng-click="queries.list[id].color = color;render();"> </i>
+      <i ng-repeat="color in queries.colors" class="pointer" ng-class="{'icon-circle-blank':queries.list[id].color == color,'icon-circle':queries.list[id].color != color}" ng-style="{color:color}" ng-click="queries.list[id].color = color;render();"> </i>
     </div>
   </form>
 </div>

panels/query/module.html

@@ -38,7 +38,7 @@
   <div ng-repeat="id in queries.ids" ng-class="{'short-query': queries.ids.length>1}">
     <form class="form-search" style="position:relative" ng-submit="refresh()">
       <span class="begin-query">
-        <i class="icon-circle pointer" data-unique="1" bs-popover="'panels/query/meta.html'" data-placement="right" style="color:{{queries.list[id].color}}"></i>
+        <i class="icon-circle pointer" data-unique="1" bs-popover="'panels/query/meta.html'" data-placement="right" ng-style="{color: queries.list[id].color}"></i>
         <i class="icon-remove-sign pointer remove-query" ng-show="queries.ids.length>1" ng-click="queries.remove(id);refresh()"></i>
       </span>
       <input class="search-query panel-query" ng-class="{'input-block-level': queries.ids.length==1,'last-query': $last,'has-remove': queries.ids.length>1}" bs-typeahead="panel.history" data-min-length=0 data-items=100 type="text" ng-model="queries.list[id].query"/>