From 848822e8cb348d6becea74fbec62458e9a2aa474 Mon Sep 17 00:00:00 2001
From: Rashid Khan <rashidkpc@gmail.com>
Date: Fri, 28 Mar 2014 15:35:03 -0700
Subject: [PATCH] Removed buggy below setting for legend, added word wrapping
 to legend, closes #1056

---
 docs/kibana/panels/terms.asciidoc |  2 +-
 src/app/panels/terms/editor.html  |  2 +-
 src/app/panels/terms/module.html  | 27 ++++++---------------------
 src/app/panels/terms/module.js    |  2 +-
 4 files changed, 9 insertions(+), 24 deletions(-)

diff --git a/docs/kibana/panels/terms.asciidoc b/docs/kibana/panels/terms.asciidoc
index 99e98c08553a4..d51fd2da7c72d 100644
--- 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
index ee849a66313a5..b21d9e1dac7f3 100644
--- 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
index 3dff22e0c3a58..e1c02f67bca86 100644
--- 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
index f691e1097384e..d23d0dcc1509a 100644
--- 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