Merge pull request elastic#7931 from ppisljar/fix/legendPosition

Ability to set the position of legends

src/core_plugins/kbn_vislib_vis_types/public/area.js

@@ -19,6 +19,7 @@ export default function HistogramVisType(Private) {
         shareYAxis: true,
         addTooltip: true,
         addLegend: true,
+        legendPosition: 'right',
         smoothLines: false,
         scale: 'linear',
         interpolate: 'linear',

src/core_plugins/kbn_vislib_vis_types/public/controls/vislib_basic_options.html

@@ -1,4 +1,15 @@
 <div>
+  <div class="vis-option-item" ng-if="vis.params.addLegend">
+    <label>
+      Legend Position
+      <select
+        class="form-control"
+        ng-model="vis.params.legendPosition"
+        ng-options="position for position in ['top', 'left', 'right', 'bottom']"
+      >
+      </select>
+    </label>
+  </div>
   <div class="vis-option-item">
     <label>
       <input type="checkbox" ng-model="vis.params.addTooltip">

src/core_plugins/kbn_vislib_vis_types/public/histogram.js

@@ -17,6 +17,7 @@ export default function HistogramVisType(Private) {
         shareYAxis: true,
         addTooltip: true,
         addLegend: true,
+        legendPosition: 'right',
         scale: 'linear',
         mode: 'stacked',
         times: [],

src/core_plugins/kbn_vislib_vis_types/public/line.js

@@ -17,6 +17,7 @@ export default function HistogramVisType(Private) {
         shareYAxis: true,
         addTooltip: true,
         addLegend: true,
+        legendPosition: 'right',
         showCircles: true,
         smoothLines: false,
         interpolate: 'linear',

src/core_plugins/kbn_vislib_vis_types/public/pie.js

@@ -17,6 +17,7 @@ export default function HistogramVisType(Private) {
         shareYAxis: true,
         addTooltip: true,
         addLegend: true,
+        legendPosition: 'right',
         isDonut: false
       },
       editor: pieTemplate

src/core_plugins/kibana/public/visualize/editor/styles/_editor.less

@@ -45,6 +45,7 @@
 
   .collapsible-sidebar {
     .flex-parent(0, 0, auto);
+    margin-right: 10px;
   }
 
   .visualization-options {

src/ui/public/vislib/styles/_legend.less

@@ -20,6 +20,23 @@ visualize-legend {
   flex-direction: row;
   padding-top: 5px;
 
+  .vis-container--legend-left & {
+    flex-direction: row-reverse;
+  }
+  .vis-container--legend-right & {
+    flex-direction: row;
+  }
+  .vis-container--legend-top & {
+    flex-direction: column-reverse;
+    width: 100%;
+    padding-left: 25px;
+  }
+  .vis-container--legend-bottom & {
+    flex-direction: column;
+    width: 100%;
+    padding-left: 25px;
+  }
+
   .header {
     cursor: pointer;
     width: 15px;
@@ -30,6 +47,11 @@ visualize-legend {
       color: @sidebar-hover-color;
     }
 
+    .vis-container--legend-top &,
+    .vis-container--legend-bottom & {
+      text-align: center;
+    }
+
     padding-right: 5px;
     font-size: 14px;
   }
@@ -54,6 +76,15 @@ visualize-legend {
     text-align: left;
 
     flex-direction: column;
+
+    .vis-container--legend-top &,
+    .vis-container--legend-bottom & {
+      width: auto;
+
+      .legend-value {
+        display: inline-block;
+      }
+    }
   }
 
   .legend-ul.hidden {

src/ui/public/visualize/visualize.html

@@ -6,7 +6,7 @@ <h4>No results found</h4>
   </div>
   <div class="item bottom"></div>
 </div>
-<div div ng-hide="showNoResultsMessage()" class="vis-container">
+<div div ng-hide="showNoResultsMessage()" class="vis-container {{getVisContainerClasses()}}">
   <div
     ng-style="loadingStyle"
     ng-class="{ loading: vis.type.requiresSearch && searchSource.activeFetchCount > 0 }"

src/ui/public/visualize/visualize.js

@@ -56,6 +56,17 @@ uiModules
         return Boolean(requiresSearch && isZeroHits && shouldShowMessage);
       };
 
+      const legendPositionToVisContainerClassMap = {
+        top: 'vis-container--legend-top',
+        bottom: 'vis-container--legend-bottom',
+        left: 'vis-container--legend-left',
+        right: 'vis-container--legend-right',
+      };
+
+      $scope.getVisContainerClasses = function () {
+        return legendPositionToVisContainerClassMap[$scope.vis.params.legendPosition];
+      };
+
       $scope.spy = {};
       $scope.spy.mode = ($scope.uiState) ? $scope.uiState.get('spy.mode', {}) : {};
 

src/ui/public/visualize/visualize.less

@@ -21,6 +21,19 @@ visualize {
     -webkit-transition: opacity 0.01s;
     transition: opacity 0.01s;
 
+    &.vis-container--legend-left {
+      flex-direction: row-reverse;
+    }
+    &.vis-container--legend-right {
+      flex-direction: row;
+    }
+    &.vis-container--legend-top {
+      flex-direction: column-reverse;
+    }
+    &.vis-container--legend-bottom {
+      flex-direction: column;
+    }
+
     &.spy-only {
       display: none;
     }

src/ui/public/visualize/visualize_legend.html

@@ -1,6 +1,6 @@
 <div class="legend-col-wrapper" ng-if="labels.length">
   <div ng-click="toggleLegend()" class="legend-toggle">
-    <i class="legend-icon fa" ng-class="open ? 'fa-chevron-circle-right' : 'fa-chevron-circle-left'"></i>
+    <i class="legend-icon fa {{getToggleLegendClasses()}}"></i>
   </div>
   <ul class="legend-ul" ng-show="open">
 

src/ui/public/visualize/visualize_legend.js

@@ -57,6 +57,23 @@ uiModules.get('kibana')
         $scope.uiState.set('vis.legendOpen', $scope.open);
       };
 
+      $scope.getToggleLegendClasses = function () {
+        switch ($scope.vis.params.legendPosition) {
+          case 'top':
+            return $scope.open ? 'fa-chevron-circle-up' : 'fa-chevron-circle-down';
+            break;
+          case 'bottom':
+            return $scope.open ? 'fa-chevron-circle-down' : 'fa-chevron-circle-up';
+            break;
+          case 'left':
+            return $scope.open ? 'fa-chevron-circle-left' : 'fa-chevron-circle-right';
+            break;
+          case 'right':
+          default:
+            return $scope.open ? 'fa-chevron-circle-right' : 'fa-chevron-circle-left';
+        }
+      };
+
       $scope.filter = function (legendData, negate) {
         clickHandler({point: legendData, negate: negate});
       };