kibana-sinatra 3.0.1.0 → 3.1.0.0

data/lib/kibana/assets/app/panels/stats/module.js

@@ -48,6 +48,7 @@ define([
       description: 'A statistical panel for displaying aggregations using the Elastic Search statistical facet query.'
     };
 
+    $scope.modes = ['count','min','max','mean','total','variance','std_deviation','sum_of_squares'];
 
     var defaults = {
       queries     : {
@@ -62,7 +63,17 @@ define([
       sort_reverse: false,
       label_name: 'Query',
       value_name: 'Value',
-      spyable     : true
+      spyable     : true,
+      show: {
+        count: true,
+        min: true,
+        max: true,
+        mean: true,
+        std_deviation: true,
+        sum_of_squares: true,
+        total: true,
+        variance: true
+      }
     };
 
     _.defaults($scope.panel, defaults);
@@ -76,6 +87,7 @@ define([
     };
 
     $scope.set_sort = function(field) {
+      console.log(field);
       if($scope.panel.sort_field === field && $scope.panel.sort_reverse === false) {
         $scope.panel.sort_reverse = true;
       } else if($scope.panel.sort_field === field && $scope.panel.sort_reverse === true) {
@@ -149,8 +161,8 @@ define([
           var obj = _.clone(q);
           obj.label = alias;
           obj.Label = alias.toLowerCase(); //sort field
-          obj.value = results.facets['stats_'+alias][$scope.panel.mode];
-          obj.Value = results.facets['stats_'+alias][$scope.panel.mode]; //sort field
+          obj.value = results.facets['stats_'+alias];
+          obj.Value = results.facets['stats_'+alias]; //sort field
           return obj;
         });
 
@@ -159,6 +171,8 @@ define([
           rows: rows
         };
 
+        console.log($scope.data);
+
         $scope.$emit('render');
       });
     };

data/lib/kibana/assets/app/panels/table/micropanel.html

@@ -5,7 +5,7 @@
 <span>
   <i class="pointer icon-search" ng-click="fieldExists(micropanel.field,'must');dismiss();" bs-tooltip="'Find events with this field'"></i>
   <i class="pointer icon-ban-circle" ng-click="fieldExists(micropanel.field,'mustNot');dismiss();" bs-tooltip="'Find events without this field'"></i>
-  <strong>Micro Analysis of {{micropanel.field}}</strong>
+  <strong>Micro Analysis of {{micropanel.field}} <span ng-if='micropanel.type'>({{micropanel.type}})</span></strong>
   <span ng-show="micropanel.hasArrays">
     as
     <a class="link" ng-class="{'strong':micropanel.grouped}" ng-click="toggle_micropanel(micropanel.field,true)">Groups</a> /
@@ -59,6 +59,11 @@
         <li><a ng-click="termsModal(field,'table');dismiss();">Table</a></li>
       </ul>
     </div>
+    <div class="btn-group" ng-show="micropanel.hasStats">
+      <a class="btn dropdown-toggle pointer" ng-click="statsModal(field);dismiss();">
+        <i class="icon-list-ol"></i> Stats
+      </a>
+    </div>
 
   </div>
 </div>

data/lib/kibana/assets/app/panels/table/module.html

@@ -47,12 +47,17 @@
     .table-field-value {
       white-space: pre-wrap;
     }
+
+    .table-facet {
+      padding: 10px;
+      border: 1px solid #666;
+    }
   </style>
 
   <div class="table-container">
 
     <div bindonce ng-class="{'table-sidebar':panel.field_list}" ng-if="panel.field_list">
-      <div class="sidebar-nav">
+      <div style="{{panel.overflow}}:{{panel.height||row.height}};overflow-y:auto">
 
         <strong>Fields <i class=" icon-chevron-sign-left pointer " ng-click="panel.field_list = !panel.field_list" bs-tooltip="'Hide field list'"></i></strong><p>
 
@@ -73,14 +78,14 @@
           in your source document.
         </div>
 
-        <ul class="unstyled" style="{{panel.overflow}}:{{panel.height || row.height}};overflow-y:auto;overflow-x:hidden;" ng-if="panel.all_fields">
+        <ul class="unstyled" ng-if="panel.all_fields">
           <li class="table-fieldname" ng-style="panel.style" ng-repeat="field in fields.list|filter:fieldFilter|orderBy:identity">
             <i class="pointer" ng-class="{'icon-check': columns[field],'icon-check-empty': _.isUndefined(columns[field])}" ng-click="toggle_field(field)"></i>
             <a class="pointer" data-unique="1" bs-popover="'app/panels/table/micropanel.html'" data-placement="rightTop" ng-click="toggle_micropanel(field,true)" ng-class="{label: columns[field]}" bo-text="field"></a>
           </li>
         </ul>
 
-        <ul class="unstyled" style="{{panel.overflow}}:{{panel.height || row.height}};overflow-y:auto;overflow-x:hidden;" ng-if="!panel.all_fields">
+        <ul class="unstyled" ng-if="!panel.all_fields">
           <li class="table-fieldname"  ng-style="panel.style" ng-repeat="field in current_fields|filter:fieldFilter|orderBy:identity">
             <i class="pointer" ng-class="{'icon-check': columns[field],'icon-check-empty': _.isUndefined(columns[field])}" ng-click="toggle_field(field)"></i>
             <a class="pointer" data-unique="1" bs-popover="'app/panels/table/micropanel.html'" data-placement="rightTop" ng-click="toggle_micropanel(field,true)" ng-class="{label: columns[field]}" bo-text="field"></a>
@@ -90,93 +95,106 @@
       </div>
     </div>
 
-    <div style="{{panel.overflow}}:{{panel.height || row.height}};" ng-class="{'table-main':panel.field_list}" class="table-doc-table">
-
-      <div class="table-facet" ng-if="modalField">
-        <h4><button class="btn btn-mini btn-danger" ng-click="closeFacet();">close</button> Top 10 terms in field {{modalField}}</h4>
-        <kibana-simple-panel type="'{{facetType}}'" panel='{{facetPanel}}' ng-cloak></kibana-simple-panel>
-      </div>
-
-      <i class="pull-left icon-chevron-sign-right pointer" ng-click="panel.field_list = !panel.field_list" bs-tooltip="'Show field list'" ng-show="!panel.field_list"></i>
-      <div class="row-fluid" ng-show="panel.paging">
-        <div class="span1 offset1" style="text-align:right">
-          <i ng-click="panel.offset = 0" ng-show="panel.offset > 0" class='icon-circle-arrow-left pointer'></i>
-          <i ng-click="panel.offset = (panel.offset - panel.size)" ng-show="panel.offset > 0" class='icon-arrow-left pointer'></i>
+    <div ng-class="{'table-main':panel.field_list}" class="table-doc-table">
+
+      <div style="{{panel.overflow}}:{{panel.height||row.height}};overflow-y:auto">
+        <div class="table-facet" ng-if="modalField">
+          <h4>
+            <button class="btn btn-mini btn-danger" ng-click="closeFacet();">close</button>
+            {{adhocOpts.title}}
+            <span class="pointer ng-scope ng-pristine ng-valid ui-draggable" bs-tooltip="'Drag to add to dashboard'"
+              data-drag="true"
+              data-jqyoui-options="kbnJqUiDraggableOptions"
+              jqyoui-draggable="{animate:false,mutate:false,onStart:'panelMoveStart',onStop:'panelMoveStop',embedded:true}"
+              ng-model="adhocOpts"
+              data-original-title=""
+              title=""
+              aria-disabled="false" style="position: relative;"><i class="icon-move"></i></span>
+          </h4>
+          <kibana-simple-panel type="'{{facetType}}'" panel='{{facetPanel}}' ng-cloak></kibana-simple-panel>
         </div>
-        <div class="span8" style="text-align:center">
-          <strong>{{panel.offset}}</strong> to <strong>{{panel.offset + data.slice(panel.offset,panel.offset+panel.size).length}}</strong>
-          <small> of {{data.length}} available for paging</small>
-        </div>
-        <div class="span1" style="text-align:left">
-          <i ng-click="panel.offset = (panel.offset + panel.size)" ng-show="data.length > panel.offset+panel.size" class='icon-arrow-right pointer'></i>
+
+        <i class="pull-left icon-chevron-sign-right pointer" ng-click="panel.field_list = !panel.field_list" bs-tooltip="'Show field list'" ng-show="!panel.field_list"></i>
+        <div class="row-fluid" ng-show="panel.paging">
+          <div class="span1 offset1" style="text-align:right">
+            <i ng-click="panel.offset = 0" ng-show="panel.offset > 0" class='icon-circle-arrow-left pointer'></i>
+            <i ng-click="panel.offset = (panel.offset - panel.size)" ng-show="panel.offset > 0" class='icon-arrow-left pointer'></i>
+          </div>
+          <div class="span8" style="text-align:center">
+            <strong>{{panel.offset}}</strong> to <strong>{{panel.offset + data.slice(panel.offset,panel.offset+panel.size).length}}</strong>
+            <small> of {{data.length}} available for paging</small>
+          </div>
+          <div class="span1" style="text-align:left">
+            <i ng-click="panel.offset = (panel.offset + panel.size)" ng-show="data.length > panel.offset+panel.size" class='icon-arrow-right pointer'></i>
+          </div>
         </div>
-      </div>
-      <table class="table-hover table table-condensed" ng-style="panel.style">
-        <thead ng-show="panel.header">
-          <th ng-show="panel.fields.length<1">_source (select columns from the list to the left)</th>
-          <th style="white-space:nowrap" ng-repeat="field in panel.fields">
-            <i ng-show="!$first" class="pointer link icon-caret-left" ng-click="_.move(panel.fields,$index,$index-1)"></i>
-
-            <span  class="pointer" ng-click="set_sort(field)" ng-show='panel.sortable'>
-              {{field}}
-              <i ng-show='field == panel.sort[0]' class="pointer link" ng-class="{'icon-chevron-up': panel.sort[1] == 'asc','icon-chevron-down': panel.sort[1] == 'desc'}"></i>
-            </span>
-            <span ng-show='!panel.sortable'>{{field}}</span>
-            <i ng-show="!$last" class="pointer link icon-caret-right" ng-click="_.move(panel.fields,$index,$index+1)"></i>
-          </th>
-
-        </thead>
-        <tbody bindonce ng-repeat="event in data| slice:panel.offset:panel.offset+panel.size" ng-class-odd="'odd'">
-          <tr ng-click="toggle_details(event)" class="pointer">
-            <td ng-if="panel.fields.length<1" bo-text="event._source|stringify|tableTruncate:panel.trimFactor:1"></td>
-            <td ng-show="panel.fields.length>0" ng-repeat="field in panel.fields">
-              <span ng-if="!panel.localTime || panel.timeField != field" bo-html="(event.kibana.highlight[field]||event.kibana._source[field]) |tableHighlight | tableTruncate:panel.trimFactor:panel.fields.length" class="table-field-value"></span>
-              <span ng-if="panel.localTime && panel.timeField == field" bo-html="event.sort[1]|tableLocalTime:event" class="table-field-value"></span>
-            </td>
-          </tr>
-          <tr ng-if="event.kibana.details">
-            <td colspan={{panel.fields.length}} ng-switch="event.kibana.view">
-              <span>
-                View:
-                <a class="link" ng-class="{'strong':event.kibana.view == 'table'}" ng-click="event.kibana.view = 'table'">Table</a> /
-                <a class="link" ng-class="{'strong':event.kibana.view == 'json'}" ng-click="event.kibana.view = 'json'">JSON</a> /
-                <a class="link" ng-class="{'strong':event.kibana.view == 'raw'}" ng-click="event.kibana.view = 'raw'">Raw</a>
-                <i class="link pull-right icon-chevron-up" ng-click="toggle_details(event)"></i>
+        <table class="table-hover table table-condensed" ng-style="panel.style">
+          <thead ng-show="panel.header">
+            <th ng-show="panel.fields.length<1">_source (select columns from the list to the left)</th>
+            <th style="white-space:nowrap" ng-repeat="field in panel.fields">
+              <i ng-show="!$first" class="pointer link icon-caret-left" ng-click="_.move(panel.fields,$index,$index-1)"></i>
+
+              <span  class="pointer" ng-click="set_sort(field)" ng-show='panel.sortable'>
+                {{field}}
+                <i ng-show='field == panel.sort[0]' class="pointer link" ng-class="{'icon-chevron-up': panel.sort[1] == 'asc','icon-chevron-down': panel.sort[1] == 'desc'}"></i>
               </span>
-              <table class='table table-bordered table-condensed table-details' ng-switch-when="table">
-                <thead>
-                  <th class="table-details-field">Field</th>
-                  <th class="table-details-action">Action</th>
-                  <th class="table-details-value">Value</th>
-                </thead>
-                <tr ng-repeat="(key,value) in event.kibana._source track by $index" ng-class-odd="'odd'">
-                  <td style="word-wrap:break-word" bo-text="key"></td>
-                  <td style="white-space:nowrap">
-                    <i class='icon-search pointer' ng-click="build_search(key,value)" bs-tooltip="'Add filter to match this value'"></i>
-                    <i class='icon-ban-circle pointer' ng-click="build_search(key,value,true)" bs-tooltip="'Add filter to NOT match this value'"></i>
-                    <i class="pointer icon-th" ng-click="toggle_field(key)" bs-tooltip="'Toggle table column'"></i>
-                  </td>
-                  <!-- At some point we need to create a more efficient way of applying the filter pipeline -->
-                  <td style="white-space:pre-wrap;word-wrap:break-word" bo-html="value|noXml|urlLink|stringify"></td>
-                </tr>
-              </table>
-              <pre style="white-space:pre-wrap;word-wrap:break-word"  bo-html="without_kibana(event)|tableJson:2" ng-switch-when="json"></pre>
-              <pre bo-html="without_kibana(event)|tableJson:1" ng-switch-when="raw"></pre>
-            </td>
-          </tr>
-        </tbody>
-      </table>
-      <div class="row-fluid" ng-show="panel.paging">
-        <div class="span1 offset3" style="text-align:right">
-          <i ng-click="panel.offset = 0" ng-show="panel.offset > 0" class='icon-circle-arrow-left pointer'></i>
-          <i ng-click="panel.offset = (panel.offset - panel.size)" ng-show="panel.offset > 0" class='icon-arrow-left pointer'></i>
-        </div>
-        <div class="span4" style="text-align:center">
-          <strong>{{panel.offset}}</strong> to <strong>{{panel.offset + data.slice(panel.offset,panel.offset+panel.size).length}}</strong>
-          <small> of {{data.length}} available for paging</small>
-        </div>
-        <div class="span1" style="text-align:left">
-          <i ng-click="panel.offset = (panel.offset + panel.size)" ng-show="data.length > panel.offset+panel.size" class='icon-arrow-right pointer'></i>
+              <span ng-show='!panel.sortable'>{{field}}</span>
+              <i ng-show="!$last" class="pointer link icon-caret-right" ng-click="_.move(panel.fields,$index,$index+1)"></i>
+            </th>
+
+          </thead>
+          <tbody bindonce ng-repeat="event in data| slice:panel.offset:panel.offset+panel.size" ng-class-odd="'odd'">
+            <tr ng-click="toggle_details(event)" class="pointer">
+              <td ng-if="panel.fields.length<1" bo-text="event._source|stringify|tableTruncate:panel.trimFactor:1"></td>
+              <td ng-show="panel.fields.length>0" ng-repeat="field in panel.fields">
+                <span ng-if="!panel.localTime || panel.timeField != field" bo-html="(event.kibana.highlight[field]||event.kibana._source[field]) |tableHighlight | tableTruncate:panel.trimFactor:panel.fields.length" class="table-field-value"></span>
+                <span ng-if="panel.localTime && panel.timeField == field" bo-html="event.sort[1]|tableLocalTime:event" class="table-field-value"></span>
+              </td>
+            </tr>
+            <tr ng-if="event.kibana.details">
+              <td colspan={{panel.fields.length}} ng-switch="event.kibana.view">
+                <span>
+                  View:
+                  <a class="link" ng-class="{'strong':event.kibana.view == 'table'}" ng-click="event.kibana.view = 'table'">Table</a> /
+                  <a class="link" ng-class="{'strong':event.kibana.view == 'json'}" ng-click="event.kibana.view = 'json'">JSON</a> /
+                  <a class="link" ng-class="{'strong':event.kibana.view == 'raw'}" ng-click="event.kibana.view = 'raw'">Raw</a>
+                  <i class="link pull-right icon-chevron-up" ng-click="toggle_details(event)"></i>
+                </span>
+                <table class='table table-bordered table-condensed table-details' ng-switch-when="table">
+                  <thead>
+                    <th class="table-details-field">Field</th>
+                    <th class="table-details-action">Action</th>
+                    <th class="table-details-value">Value</th>
+                  </thead>
+                  <tr ng-repeat="(key,value) in event.kibana._source track by $index" ng-class-odd="'odd'">
+                    <td style="word-wrap:break-word" bo-text="key"></td>
+                    <td style="white-space:nowrap">
+                      <i class='icon-search pointer' ng-click="build_search(key,value)" bs-tooltip="'Add filter to match this value'"></i>
+                      <i class='icon-ban-circle pointer' ng-click="build_search(key,value,true)" bs-tooltip="'Add filter to NOT match this value'"></i>
+                      <i class="pointer icon-th" ng-click="toggle_field(key)" bs-tooltip="'Toggle table column'"></i>
+                    </td>
+                    <!-- At some point we need to create a more efficient way of applying the filter pipeline -->
+                    <td style="white-space:pre-wrap;word-wrap:break-word" bo-html="value|noXml|urlLink|stringify"></td>
+                  </tr>
+                </table>
+                <pre style="white-space:pre-wrap;word-wrap:break-word"  bo-html="without_kibana(event)|tableJson:2" ng-switch-when="json"></pre>
+                <pre bo-html="without_kibana(event)|tableJson:1" ng-switch-when="raw"></pre>
+              </td>
+            </tr>
+          </tbody>
+        </table>
+        <div class="row-fluid" ng-show="panel.paging">
+          <div class="span1 offset3" style="text-align:right">
+            <i ng-click="panel.offset = 0" ng-show="panel.offset > 0" class='icon-circle-arrow-left pointer'></i>
+            <i ng-click="panel.offset = (panel.offset - panel.size)" ng-show="panel.offset > 0" class='icon-arrow-left pointer'></i>
+          </div>
+          <div class="span4" style="text-align:center">
+            <strong>{{panel.offset}}</strong> to <strong>{{panel.offset + data.slice(panel.offset,panel.offset+panel.size).length}}</strong>
+            <small> of {{data.length}} available for paging</small>
+          </div>
+          <div class="span1" style="text-align:left">
+            <i ng-click="panel.offset = (panel.offset + panel.size)" ng-show="data.length > panel.offset+panel.size" class='icon-arrow-right pointer'></i>
+          </div>
         </div>
       </div>
     </div>

data/lib/kibana/assets/app/panels/table/module.js

@@ -18,6 +18,7 @@ define([
   'lodash',
   'kbn',
   'moment',
+  'jsonpath'
 ],
 function (angular, app, _, kbn, moment) {
   'use strict';
@@ -167,37 +168,41 @@ function (angular, app, _, kbn, moment) {
       $scope.closeFacet();
       $timeout(function() {
         $scope.modalField = field;
+        $scope.adhocOpts = {
+          height: "200px",
+          chart: chart,
+          field: field,
+          span: $scope.panel.span,
+          type: 'terms',
+          title: 'Top 10 terms in field ' + field
+        };
         showModal(
-          '{"height":"200px","chart":"'+chart+'","field":"'+field+'"}','terms');
+          angular.toJson($scope.adhocOpts),'terms');
       },0);
     };
 
     $scope.statsModal = function(field) {
-      $scope.modalField = field;
-      showModal(
-        '{"field":"'+field+'"}','statistics');
+      $scope.closeFacet();
+      $timeout(function() {
+        $scope.modalField = field;
+        $scope.adhocOpts = {
+          height: "200px",
+          field: field,
+          mode: 'mean',
+          span: $scope.panel.span,
+          type: 'stats',
+          title: 'Statistics for ' + field
+        };
+        showModal(
+          angular.toJson($scope.adhocOpts),'stats');
+      },0);
     };
 
     var showModal = function(panel,type) {
       $scope.facetPanel = panel;
       $scope.facetType = type;
-
-      // create a new modal. Can't reuse one modal unforunately as the directive will not
-      // re-render on show.
-      /*
-      $modal({
-        template: './app/panels/table/modal.html',
-        persist: false,
-        show: true,
-        scope: $scope.$new(),
-        keyboard: false
-      });
-      */
-
     };
 
-
-
     $scope.toggle_micropanel = function(field,groups) {
       var docs = _.map($scope.data,function(_d){return _d.kibana._source;});
       var topFieldValues = kbn.top_field_values(docs,field,10,groups);
@@ -210,6 +215,26 @@ function (angular, app, _, kbn, moment) {
         limit: 10,
         count: _.countBy(docs,function(doc){return _.contains(_.keys(doc),field);})['true']
       };
+
+
+      var nodeInfo = $scope.ejs.client.get('/' + dashboard.indices + '/_mapping/field/' + field,
+        undefined, undefined, function(data, status) {
+        console.log(status);
+        return;
+      });
+
+      return nodeInfo.then(function(p) {
+        var types = _.uniq(jsonPath(p, '*.*.*.*.mapping.*.type'));
+        if (_.isArray(types)) {
+          $scope.micropanel.type = types.join(', ');
+        }
+
+
+        if(_.intersection(types, ['long','float','integer','double']).length > 0) {
+          $scope.micropanel.hasStats =  true;
+        }
+      });
+
     };
 
     $scope.micropanelColor = function(index) {
@@ -289,9 +314,9 @@ function (angular, app, _, kbn, moment) {
         return;
       }
 
-      sort = [$scope.ejs.Sort($scope.panel.sort[0]).order($scope.panel.sort[1])];
+      sort = [$scope.ejs.Sort($scope.panel.sort[0]).order($scope.panel.sort[1]).ignoreUnmapped(true)];
       if($scope.panel.localTime) {
-        sort.push($scope.ejs.Sort($scope.panel.timeField).order($scope.panel.sort[1]));
+        sort.push($scope.ejs.Sort($scope.panel.timeField).order($scope.panel.sort[1]).ignoreUnmapped(true));
       }
 
 

data/lib/kibana/assets/app/panels/terms/module.html

@@ -4,66 +4,91 @@
     .terms-legend-term {
       word-break: break-all;
     }
+
+    .terms-remaining {
+      bottom:0;
+      top:0;
+      background-color: #f00;
+    }
+
+    .terms-wrapper {
+      display: table;
+      width: 100%;
+    }
+
+    .terms-legend {
+      display: table-row;
+      height: 0;
+    }
+
+    .terms-legend {
+      display: table-row;
+    }
   </style>
 
-  <!-- START Pie or bar chart -->
-  <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>
-      </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>
-
-    <span class="small pull-left" ng-show="panel.tmode == 'terms_stats'">
-      &nbsp | {{ panel.tstat }} of <strong>{{ panel.valuefield }}</strong>
-    </span>
-
-  </div>
-
-  <!-- keep legend from over lapping -->
-  <div style="clear:both"></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'>
-    <!-- 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]}})
+
+  <div class="terms-wrapper">
+    <!-- LEGEND -->
+    <div class="terms-legend" 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>
+        </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>
-    </span>
 
-    <span class="small pull-left" ng-show="panel.tmode == 'terms_stats'">
-      &nbsp | {{ panel.tstat }} of <strong>{{ panel.valuefield }}</strong>
-    </span>
+      <span class="small pull-left" ng-show="panel.tmode == 'terms_stats'">
+        &nbsp | {{ panel.tstat }} of <strong>{{ panel.valuefield }}</strong>
+      </span>
 
+    </div>
+    <!-- keep legend from over lapping -->
     <div style="clear:both"></div>
-  </div>
-  <!-- END Pie or Bar chart -->
 
 
+    <!-- CHART -->
+    <div ng-show="panel.chart == 'pie' || panel.chart == 'bar'" terms-chart params="{{panel}}" style="position:relative" class="pointer terms-chart">
+    </div>
+
+    <!-- LEGEND -->
+    <div class="terms-legend" 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 -->
   <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>