Browse Source

Added pointer to chart hovers

Rashid Khan 12 years ago
parent
commit
ea62d4aea3
3 changed files with 13 additions and 13 deletions
  1. 5 5
      panels/histogram/module.html
  2. 2 2
      panels/pie/module.html
  3. 6 6
      panels/terms/module.html

+ 5 - 5
panels/histogram/module.html

@@ -8,10 +8,10 @@
       display:inline-block;
       display:inline-block;
       height:10px;
       height:10px;
       width:10px;
       width:10px;
-      border-radius:5px;  
+      border-radius:5px;
     }
     }
     .histogram-legend-item {
     .histogram-legend-item {
-      display:inline-block; 
+      display:inline-block;
     }
     }
     .histogram-chart {
     .histogram-chart {
       position:relative;
       position:relative;
@@ -23,7 +23,7 @@
   <div>
   <div>
     <span ng-show='panel.zoomlinks && data'>
     <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(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> | 
+      <a class='small' ng-click='zoom(2)'><i class='icon-zoom-out'></i> Zoom Out</a> |
     </span>
     </span>
     <span ng-show="panel.legend" ng-repeat='series in data' class="histogram-legend">
     <span ng-show="panel.legend" ng-repeat='series in data' class="histogram-legend">
       <i class='icon-circle' ng-style="{color: series.info.color}"></i>
       <i class='icon-circle' ng-style="{color: series.info.color}"></i>
@@ -32,5 +32,5 @@
     <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>
     <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>
   </div>
   <center><img ng-show='panel.loading && _.isUndefined(data)' src="common/img/load_big.gif"></center>
   <center><img ng-show='panel.loading && _.isUndefined(data)' src="common/img/load_big.gif"></center>
-  <div histogram-chart class="histogram-chart" params="{{panel}}"></div>
-</kibana-panel>         
+  <div histogram-chart class="pointer histogram-chart" params="{{panel}}"></div>
+</kibana-panel>

+ 2 - 2
panels/pie/module.html

@@ -8,9 +8,9 @@
   </div><br>
   </div><br>
   <div style="clear:both"></div>
   <div style="clear:both"></div>
 
 
-  <div pie params="{{panel}}" style="position:relative"></div>
+  <div pie class="pointer" params="{{panel}}" style="position:relative"></div>
 
 
   <div ng-show="panel.legend == 'below'" ng-repeat="query in legend" style="float:left;padding-left: 10px;">
   <div ng-show="panel.legend == 'below'" ng-repeat="query in legend" style="float:left;padding-left: 10px;">
     <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>
     <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>
   </div>
-</kibana-panel>         
+</kibana-panel>

+ 6 - 6
panels/terms/module.html

@@ -5,7 +5,7 @@
   <!-- START Pie or bar chart -->
   <!-- START Pie or bar chart -->
   <div ng-show="panel.counter_pos == 'above' && (panel.chart == 'bar' || panel.chart == 'pie')" id='{{$id}}-legend'>
   <div ng-show="panel.counter_pos == 'above' && (panel.chart == 'bar' || panel.chart == 'pie')" id='{{$id}}-legend'>
     <!-- vertical legend above -->
     <!-- vertical legend above -->
-    <table class="small" ng-show="panel.arrangement == 'vertical'">  
+    <table class="small" ng-show="panel.arrangement == 'vertical'">
       <tr ng-repeat="term in legend">
       <tr ng-repeat="term in legend">
         <td><i class="icon-circle" ng-style="{color:term.color}"></i></td> <td style="padding-right:10px;padding-left:10px;">{{term.label}}</td><td>{{term.data[0][1]}}</td>
         <td><i class="icon-circle" ng-style="{color:term.color}"></i></td> <td style="padding-right:10px;padding-left:10px;">{{term.label}}</td><td>{{term.data[0][1]}}</td>
       </tr>
       </tr>
@@ -21,11 +21,11 @@
   <!-- keep legend from over lapping -->
   <!-- keep legend from over lapping -->
   <div style="clear:both"></div>
   <div style="clear:both"></div>
 
 
-  <div ng-show="panel.chart == 'pie' || panel.chart == 'bar'" terms-chart params="{{panel}}" style="position:relative"></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'>
   <div ng-show="panel.counter_pos == 'below' && (panel.chart == 'bar' || panel.chart == 'pie')" id='{{$id}}-legend'>
     <!-- vertical legend below -->
     <!-- vertical legend below -->
-    <table class="small" ng-show="panel.arrangement == 'vertical'">  
+    <table class="small" ng-show="panel.arrangement == 'vertical'">
       <tr ng-repeat="term in legend">
       <tr ng-repeat="term in legend">
         <td><i class="icon-circle" ng-style="{color:term.color}"></i></i></td> <td style="padding-right:10px;padding-left:10px;">{{term.label}}</td><td>{{term.data[0][1]}}</td>
         <td><i class="icon-circle" ng-style="{color:term.color}"></i></i></td> <td style="padding-right:10px;padding-left:10px;">{{term.label}}</td><td>{{term.data[0][1]}}</td>
       </tr>
       </tr>
@@ -39,7 +39,7 @@
   </div>
   </div>
   <!-- END Pie or Bar chart -->
   <!-- END Pie or Bar chart -->
 
 
-  <table ng-style="panel.style" class="table table-striped table-condensed" ng-show="panel.chart == 'table'">  
+  <table ng-style="panel.style" class="table table-striped table-condensed" ng-show="panel.chart == 'table'">
     <thead>
     <thead>
       <th>Term</th> <th>Count</th> <th>Action</th>
       <th>Term</th> <th>Count</th> <th>Action</th>
     </thead>
     </thead>
@@ -48,11 +48,11 @@
       <td>{{term.data[0][1]}}</td>
       <td>{{term.data[0][1]}}</td>
       <td>
       <td>
         <span ng-hide="term.meta == 'other'">
         <span ng-hide="term.meta == 'other'">
-          <i class='icon-search pointer' ng-click="build_search(term)"></i> 
+          <i class='icon-search pointer' ng-click="build_search(term)"></i>
           <i class='icon-ban-circle pointer' ng-click="build_search(term,true)"></i>
           <i class='icon-ban-circle pointer' ng-click="build_search(term,true)"></i>
         </span>
         </span>
       </td>
       </td>
     </tr>
     </tr>
   </table>
   </table>
 
 
-</kibana-panel>         
+</kibana-panel>