Add 'below' legend back to terms panel. Closes #1120. Wrap long terms…

… in table, closes #1056
elastic · Apr 7, 2014 · 9c47d43 · 9c47d43
1 parent 2581d31
commit 9c47d43
Show file tree

Hide file tree

Showing 4 changed files with 38 additions and 7 deletions.
diff --git a/docs/kibana/panels/terms.asciidoc b/docs/kibana/panels/terms.asciidoc
@@ -21,7 +21,7 @@ tilt:: In pie chart mode, tilt the chart back to appear as more of an oval shape
 lables:: In pie chart mode, draw labels in the pie slices
 arrangement:: In bar or pie mode, arrangement of the legend. horizontal or vertical
 chart:: table, bar or pie
-counter_pos:: The location of the legend in respect to the chart, above or none.
+counter_pos:: The location of the legend in respect to the chart, above, below, or none.
 spyable:: Set spyable to false to disable the inspect button
 
 ==== Queries

diff --git a/src/app/panels/terms/editor.html b/src/app/panels/terms/editor.html
@@ -45,7 +45,7 @@ <h5>View Options</h5>
       </div>
       <div class="editor-option" ng-show="panel.chart == 'bar' || panel.chart == 'pie'">
         <label class="small">Legend</label>
-        <select class="input-small" ng-model="panel.counter_pos" ng-options="f for f in ['above','none']"></select></span>
+        <select class="input-small" ng-model="panel.counter_pos" ng-options="f for f in ['above','below','none']"></select></span>
       </div>
       <div class="editor-option" ng-show="panel.chart != 'table' && panel.counter_pos != 'none'">
         <label class="small" >Legend Format</label>

diff --git a/src/app/panels/terms/module.html b/src/app/panels/terms/module.html
@@ -7,17 +7,22 @@
   </style>
 
   <!-- START Pie or bar chart -->
-  <div ng-show="panel.counter_pos != 'none' && (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 -->
     <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>
+        <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>
+        <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'">
@@ -31,14 +36,40 @@
 
   <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]}})
+      </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 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>
     </thead>
     <tr ng-repeat="term in data" ng-show="showMeta(term)">
-      <td>{{term.label}}</td>
+      <td class="terms-legend-term">{{term.label}}</td>
       <td>{{term.data[0][1]}}</td>
       <td>
         <span ng-hide="term.meta == 'other'">

diff --git a/src/app/panels/terms/module.js b/src/app/panels/terms/module.js
@@ -96,7 +96,7 @@ function (angular, app, _, $, kbn) {
        */
       chart       : 'bar',
       /** @scratch /panels/terms/5
-       * counter_pos:: The location of the legend in respect to the chart, above or none.
+       * counter_pos:: The location of the legend in respect to the chart, above, below, or none.
        */
       counter_pos : 'above',
       /** @scratch /panels/terms/5