Removed buggy below setting for legend, added word wrapping to legend, …

…closes #1056
elastic · Mar 28, 2014 · 848822e · 848822e
1 parent 41f1a51
commit 848822e
Show file tree

Hide file tree

Showing 4 changed files with 9 additions and 24 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 below.
+counter_pos:: The location of the legend in respect to the chart, above 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','below','none']"></select></span>
+        <select class="input-small" ng-model="panel.counter_pos" ng-options="f for f in ['above','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
@@ -1,20 +1,23 @@
 <div ng-controller='terms' ng-init="init()">
   <style>
     .pieLabel { pointer-events: none }
+    .terms-legend-term {
+      word-break: break-all;
+    }
   </style>
 
   <!-- 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 != 'none' && (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 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> {{term.label}} ({{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'">
@@ -28,24 +31,6 @@
 
   <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 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> {{term.label}} ({{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>
   <!-- END Pie or Bar chart -->
 
   <table ng-style="panel.style" class="table table-striped table-condensed" ng-show="panel.chart == 'table'">

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 below.
+       * counter_pos:: The location of the legend in respect to the chart, above or none.
        */
       counter_pos : 'above',
       /** @scratch /panels/terms/5