Fix pushed down chart on multi line horizontal legends (#31466)

elastic · Feb 27, 2019 · 295de1e · 295de1e
1 parent db700ff
commit 295de1e
Show file tree

Hide file tree

Showing 3 changed files with 28 additions and 13 deletions.
diff --git a/src/legacy/ui/public/vis/vis_types/vislib_vis_legend.js b/src/legacy/ui/public/vis/vis_types/vislib_vis_legend.js
@@ -25,6 +25,8 @@ import { VisFiltersProvider } from '../vis_filters';
 import { htmlIdGenerator, keyCodes } from '@elastic/eui';
 import { getTableAggs } from '../../visualize/loader/pipeline_helpers/utilities';
 
+export const CUSTOM_LEGEND_VIS_TYPES = ['heatmap', 'gauge'];
+
 uiModules.get('kibana')
   .directive('vislibLegend', function (Private, $timeout, i18n) {
     const Data = Private(VislibLibDataProvider);
@@ -92,7 +94,7 @@ uiModules.get('kibana')
         };
 
         $scope.canFilter = function (legendData) {
-          if (['heatmap', 'gauge'].includes($scope.vis.vislibVis.visConfigArgs.type)) {
+          if (CUSTOM_LEGEND_VIS_TYPES.includes($scope.vis.vislibVis.visConfigArgs.type)) {
             return false;
           }
           const filters = visFilters.filter({ aggConfigs: $scope.tableAggs, data: legendData.values }, { simulate: true });
@@ -140,7 +142,7 @@ uiModules.get('kibana')
             $scope.open = $scope.vis.params.addLegend;
           }
 
-          if (['heatmap', 'gauge'].includes(vislibVis.visConfigArgs.type)) {
+          if (CUSTOM_LEGEND_VIS_TYPES.includes(vislibVis.visConfigArgs.type)) {
             const labels = vislibVis.getLegendLabels();
             if (labels) {
               $scope.labels = _.map(labels, label => {

diff --git a/src/legacy/ui/public/vis/vis_types/vislib_vis_type.js b/src/legacy/ui/public/vis/vis_types/vislib_vis_type.js
@@ -23,7 +23,7 @@ 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 './vislib_vis_legend';
+import { CUSTOM_LEGEND_VIS_TYPES } from './vislib_vis_legend';
 import { BaseVisTypeProvider } from './base_vis_type';
 import VislibProvider from '../../vislib';
 import { VisFiltersProvider } from '../vis_filters';
@@ -68,6 +68,13 @@ export function VislibVisTypeProvider(Private, $rootScope, $timeout, $compile) {
           return 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.initVisConfig(esResponse, this.vis.getUiState());
+
         if (this.vis.params.addLegend) {
           $(this.container).attr('class', (i, cls) => {
             return cls.replace(/visLib--legend-\S+/g, '');
@@ -83,15 +90,16 @@ export function VislibVisTypeProvider(Private, $rootScope, $timeout, $compile) {
           this.$scope.$digest();
         }
 
-        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) {
+        // refreshing the legend after the chart is rendered.
+        // this is necessary because some visualizations
+        // provide data necessary for the legend only after a render cycle.
+        if (this.vis.params.addLegend && CUSTOM_LEGEND_VIS_TYPES.includes(this.vis.vislibVis.visConfigArgs.type)) {
           this.$scope.refreshLegend++;
           this.$scope.$digest();
+
+          this.vis.vislibVis.render(esResponse, this.vis.getUiState());
         }
       });
     }

diff --git a/src/legacy/ui/public/vislib/vis.js b/src/legacy/ui/public/vislib/vis.js
@@ -47,6 +47,15 @@ export function VislibVisProvider(Private) {
     hasLegend() {
       return this.visConfigArgs.addLegend;
     }
+
+    initVisConfig(data, uiState) {
+      this.data = data;
+
+      this.uiState = uiState;
+
+      this.visConfig = new VisConfig(this.visConfigArgs, this.data, this.uiState, this.el);
+    }
+
     /**
      * Renders the visualization
      *
@@ -63,11 +72,7 @@ export function VislibVisProvider(Private) {
         this._runOnHandler('destroy');
       }
 
-      this.data = data;
-
-      this.uiState = uiState;
-
-      this.visConfig = new VisConfig(this.visConfigArgs, this.data, this.uiState, this.el);
+      this.initVisConfig(data, uiState);
 
       this.handler = new Handler(this, this.visConfig);
       this._runOnHandler('render');