moving legend inside vislib (#16249)

src/ui/public/vis/vis_types/vislib_vis_type.js

@@ -4,38 +4,78 @@ import 'plugins/kbn_vislib_vis_types/controls/line_interpolation_option';
 import 'plugins/kbn_vislib_vis_types/controls/heatmap_options';
 import 'plugins/kbn_vislib_vis_types/controls/gauge_options';
 import 'plugins/kbn_vislib_vis_types/controls/point_series';
+import 'ui/visualize/visualize_legend';
 import { VisTypeProvider } from './base_vis_type';
 import { AggResponsePointSeriesProvider } from 'ui/agg_response/point_series/point_series';
 import VislibProvider from 'ui/vislib';
+import $ from 'jquery';
 
-export function VislibVisTypeProvider(Private) {
+export function VislibVisTypeProvider(Private, $rootScope, $timeout, $compile) {
   const VisType = Private(VisTypeProvider);
   const pointSeries = Private(AggResponsePointSeriesProvider);
   const vislib = Private(VislibProvider);
 
+  const legendClassName = {
+    top: 'vislib-container--legend-top',
+    bottom: 'vislib-container--legend-bottom',
+    left: 'vislib-container--legend-left',
+    right: 'vislib-container--legend-right',
+  };
+
   class VislibVisController {
     constructor(el, vis) {
       this.el = el;
       this.vis = vis;
+
+      this.container = document.createElement('div');
+      this.container.className = 'vislib-container';
+      this.el.appendChild(this.container);
+
+      this.chartEl = document.createElement('div');
+      this.chartEl.className = 'vislib-chart';
+      this.container.appendChild(this.chartEl);
+
     }
 
     render(esResponse) {
-      this._response = esResponse;
       if (this.vis.vislibVis) {
         this.destroy();
-      } else {
-        this.vis.refreshLegend = 0;
       }
 
-      return new Promise((resolve) => {
+      return new Promise(async (resolve) => {
         if (this.el.clientWidth === 0 || this.el.clientHeight === 0) {
           return resolve();
         }
-        this.vis.vislibVis = new vislib.Vis(this.el, this.vis.params);
+
+        let $scope;
+        if (this.vis.params.addLegend) {
+          $(this.container).attr('class', (i, cls) => {
+            return cls.replace(/vislib-container--legend-\S+/g, '');
+          }).addClass(legendClassName[this.vis.params.legendPosition]);
+
+          $scope = $rootScope.$new();
+          $scope.refreshLegend = 0;
+          $scope.vis = this.vis;
+          $scope.visData = esResponse;
+          $scope.uiState = $scope.vis.getUiState();
+          const legendHtml = $compile('<visualize-legend></visualize-legend>')($scope);
+          this.container.appendChild(legendHtml[0]);
+          $scope.$digest();
+          // We need to wait one digest cycle for the legend to render, before
+          // we want to render the chart, so it know about the legend size.
+          await new Promise(resolve => $timeout(resolve));
+        }
+
+        this.vis.vislibVis = new vislib.Vis(this.chartEl, this.vis.params);
         this.vis.vislibVis.on('brush', this.vis.API.events.brush);
         this.vis.vislibVis.on('click', this.vis.API.events.filter);
         this.vis.vislibVis.on('renderComplete', resolve);
         this.vis.vislibVis.render(esResponse, this.vis.getUiState());
+
+        if (this.vis.params.addLegend) {
+          $scope.refreshLegend++;
+          $scope.$digest();
+        }
       });
     }
 
@@ -46,6 +86,7 @@ export function VislibVisTypeProvider(Private) {
         this.vis.vislibVis.destroy();
         delete this.vis.vislibVis;
       }
+      $(this.container).find('visualize-legend').remove();
     }
   }
 

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

@@ -1,3 +1,30 @@
+.vislib-container {
+  flex: 1 1 0; /* 1 */
+  display: flex;
+  flex-direction: row;
+  overflow: auto;
+
+  &.vislib-container--legend-left {
+    flex-direction: row-reverse;
+  }
+  &.vislib-container--legend-right {
+    flex-direction: row;
+  }
+  &.vislib-container--legend-top {
+    flex-direction: column-reverse;
+  }
+  &.vislib-container--legend-bottom {
+    flex-direction: column;
+  }
+}
+
+.vislib-chart {
+  display: flex;
+  flex: 1 1 auto;
+  min-height: 0;
+  min-width: 0;
+}
+
 .visualize-chart {
   display: flex;
   flex: 1 1 auto;

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

@@ -18,18 +18,18 @@ visualize-legend {
   flex-direction: row;
   padding-top: 5px;
 
-  .vis-container--legend-left & {
+  .vislib-container--legend-left & {
     flex-direction: row-reverse;
   }
-  .vis-container--legend-right & {
+  .vislib-container--legend-right & {
     flex-direction: row;
   }
-  .vis-container--legend-top & {
+  .vislib-container--legend-top & {
     flex-direction: column-reverse;
     width: 100%;
     padding-left: 25px;
   }
-  .vis-container--legend-bottom & {
+  .vislib-container--legend-bottom & {
     flex-direction: column;
     width: 100%;
     padding-left: 25px;
@@ -57,8 +57,8 @@ visualize-legend {
 
     flex-direction: column;
 
-    .vis-container--legend-top &,
-    .vis-container--legend-bottom & {
+    .vislib-container--legend-top &,
+    .vislib-container--legend-bottom & {
       width: auto;
       overflow-y: hidden;
 

src/ui/public/visualize/visualization.html

@@ -8,7 +8,7 @@
 </div>
 <div
   ng-hide="showNoResultsMessage()"
-  class="vis-container {{getVisContainerClasses()}}"
+  class="vis-container"
   tabindex="0"
 >
   <span ng-if="!vis.type.isAccessible" class="kuiScreenReaderOnly">
@@ -19,7 +19,6 @@
     ng-style="loadingStyle"
     ng-class="{ loading: vis.type.requiresSearch && searchSource.activeFetchCount > 0 }"
     class="visualize-chart"></div>
-  <visualize-legend ng-if="addLegend"></visualize-legend>
 </div>
 <visualize-spy
   ng-if="showSpyPanel"

src/ui/public/visualize/visualization.js

@@ -1,7 +1,6 @@
 import { Observable } from 'rxjs/Rx';
 import 'ui/visualize/spy';
 import 'ui/visualize/visualize.less';
-import 'ui/visualize/visualize_legend';
 import _ from 'lodash';
 import { uiModules } from 'ui/modules';
 import { ResizeChecker } from 'ui/resize_checker';
@@ -36,8 +35,6 @@ uiModules
         const getVisEl = jQueryGetter('.visualize-chart');
         const getVisContainer = jQueryGetter('.vis-container');
 
-        $scope.addLegend = false;
-
         // Set the passed in uiState to the vis object. uiState reference should never be changed
         if (!$scope.uiState) $scope.uiState = $scope.vis.getUiState();
         else $scope.vis._setUiState($scope.uiState);
@@ -52,17 +49,6 @@ 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.visElement = getVisContainer();
 
         const loadingDelay = config.get('visualization:loadingDelay');
@@ -93,11 +79,6 @@ uiModules
           .filter(({ vis, visData, container }) => vis && vis.initialized && container && (!vis.type.requiresSearch || visData))
           .debounceTime(100)
           .switchMap(async ({ vis, visData, container }) => {
-            $scope.addLegend = vis.params.addLegend;
-            vis.refreshLegend++;
-            // We need to wait one digest cycle for the legend to render, before
-            // we want to render the chart, so it know about the legend size.
-            await new Promise(resolve => $timeout(resolve));
             vis.size = [container.width(), container.height()];
             const status = getUpdateStatus($scope);
             const renderPromise = visualization.render(visData, status);

src/ui/public/visualize/visualize.less

@@ -34,19 +34,6 @@ visualization {
       flex: 1 0;
     }
 
-    &.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.js

@@ -25,7 +25,7 @@ uiModules.get('kibana')
           $scope.data = data;
         });
 
-        $scope.$watch('vis.refreshLegend', () => {
+        $scope.$watch('refreshLegend', () => {
           refresh();
         });