fix elastic#572 adding a legendPosition setting

ppisljar · Aug 13, 2016 · 567d557 · 567d557
1 parent adfcf06
commit 567d557
Show file tree

Hide file tree

Showing 9 changed files with 61 additions and 1 deletion.
diff --git a/src/core_plugins/kbn_vislib_vis_types/public/area.js b/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',

diff --git a/src/core_plugins/kbn_vislib_vis_types/public/controls/vislib_basic_options.html b/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.showLegend">
+    <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">

diff --git a/src/core_plugins/kbn_vislib_vis_types/public/histogram.js b/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: [],

diff --git a/src/core_plugins/kbn_vislib_vis_types/public/line.js b/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',

diff --git a/src/core_plugins/kbn_vislib_vis_types/public/pie.js b/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

diff --git a/src/ui/public/vislib/styles/_legend.less b/src/ui/public/vislib/styles/_legend.less
@@ -20,6 +20,21 @@ 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%;
+  }
+  .vis-container--legend-bottom & {
+    flex-direction: column;
+    width: 100%;
+  }
+
   .header {
     cursor: pointer;
     width: 15px;
@@ -54,6 +69,15 @@ visualize-legend {
     text-align: left;
 
     flex-direction: column;
+
+    .vis-container--legend-top &,
+    .vis-container--legend-bottom & {
+      width: auto;
+
+      li {
+        display: inline-block;
+      }
+    }
   }
 
   .legend-ul.hidden {

diff --git a/src/ui/public/visualize/visualize.html b/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 vis-container--legend-{{vis.params.legendPosition}}">
   <div
     ng-style="loadingStyle"
     ng-class="{ loading: vis.type.requiresSearch && searchSource.activeFetchCount > 0 }"

diff --git a/src/ui/public/visualize/visualize.js b/src/ui/public/visualize/visualize.js
@@ -56,6 +56,14 @@ uiModules
         return Boolean(requiresSearch && isZeroHits && shouldShowMessage);
       };
 
+      $scope.showLegendTopOrLeft = function () {
+        return $scope.vis.params.legendPosition === 'top' || $scope.vis.params.legendPosition === 'left';
+      };
+
+      $scope.showLegendBottomOrRight = function () {
+        return $scope.vis.params.legendPosition === 'bottom' || $scope.vis.params.legendPosition === 'right';
+      };
+
       $scope.spy = {};
       $scope.spy.mode = ($scope.uiState) ? $scope.uiState.get('spy.mode', {}) : {};
 

diff --git a/src/ui/public/visualize/visualize.less b/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;
     }