From 6a470d99b8d93342517f22d460fbd271aa3a9340 Mon Sep 17 00:00:00 2001
From: Daniil Suleiman <31325372+sulemanof@users.noreply.github.com>
Date: Tue, 19 May 2020 17:47:29 +0300
Subject: [PATCH] [Visualize] Bar chart: Show missing values on chart setting
 (#66375)

* Show missing switch button

* Add functional tests

Co-authored-by: Elastic Machine <elasticmachine@users.noreply.github.com>
---
 .../options/point_series/point_series.tsx     |  4 ++-
 .../apps/visualize/_point_series_options.js   | 32 +++++++++++++++++++
 .../page_objects/visualize_chart_page.ts      | 11 +++++++
 .../page_objects/visualize_editor_page.ts     |  4 +++
 4 files changed, 50 insertions(+), 1 deletion(-)

diff --git a/src/plugins/vis_type_vislib/public/components/options/point_series/point_series.tsx b/src/plugins/vis_type_vislib/public/components/options/point_series/point_series.tsx
index 60458b1f5c41f..dfe469bc9843b 100644
--- a/src/plugins/vis_type_vislib/public/components/options/point_series/point_series.tsx
+++ b/src/plugins/vis_type_vislib/public/components/options/point_series/point_series.tsx
@@ -26,6 +26,7 @@ import { BasicOptions, SwitchOption } from '../../../../../charts/public';
 import { GridPanel } from './grid_panel';
 import { ThresholdPanel } from './threshold_panel';
 import { BasicVislibParams } from '../../../types';
+import { ChartTypes } from '../../../utils/collections';
 
 function PointSeriesOptions(props: ValidationVisOptionsProps<BasicVislibParams>) {
   const { stateParams, setValue, vis } = props;
@@ -67,8 +68,9 @@ function PointSeriesOptions(props: ValidationVisOptionsProps<BasicVislibParams>)
           />
         )}
 
-        {vis.type.type === 'histogram' && (
+        {vis.type.name === ChartTypes.HISTOGRAM && (
           <SwitchOption
+            data-test-subj="showValuesOnChart"
             label={i18n.translate('visTypeVislib.editors.pointSeries.showLabels', {
               defaultMessage: 'Show values on chart',
             })}
diff --git a/test/functional/apps/visualize/_point_series_options.js b/test/functional/apps/visualize/_point_series_options.js
index 17e0d1ca87fdd..69cc3cd65aead 100644
--- a/test/functional/apps/visualize/_point_series_options.js
+++ b/test/functional/apps/visualize/_point_series_options.js
@@ -190,6 +190,38 @@ export default function({ getService, getPageObjects }) {
       });
     });
 
+    describe('show values on chart', () => {
+      before(async () => {
+        await PageObjects.visualize.navigateToNewVisualization();
+        await PageObjects.visualize.clickVerticalBarChart();
+        await PageObjects.visualize.clickNewSearch();
+        await PageObjects.timePicker.setDefaultAbsoluteRange();
+        log.debug('Bucket = X-axis');
+        await PageObjects.visEditor.clickBucket('X-axis');
+        log.debug('Aggregation = Terms');
+        await PageObjects.visEditor.selectAggregation('Terms');
+        log.debug('Field = geo.src');
+        await PageObjects.visEditor.selectField('geo.src');
+        await PageObjects.visEditor.clickGo();
+        log.debug('Open Options tab');
+        await PageObjects.visEditor.clickOptionsTab();
+      });
+
+      it('should show values on bar chart', async () => {
+        await PageObjects.visEditor.toggleValuesOnChart();
+        await PageObjects.visEditor.clickGo();
+        const values = await PageObjects.visChart.getChartValues();
+        expect(values).to.eql(['2,592', '2,373', '1,194', '489', '415']);
+      });
+
+      it('should hide values on bar chart', async () => {
+        await PageObjects.visEditor.toggleValuesOnChart();
+        await PageObjects.visEditor.clickGo();
+        const values = await PageObjects.visChart.getChartValues();
+        expect(values.length).to.be(0);
+      });
+    });
+
     describe('custom labels and axis titles', function() {
       const visName = 'Visualization Point Series Test';
       const customLabel = 'myLabel';
diff --git a/test/functional/page_objects/visualize_chart_page.ts b/test/functional/page_objects/visualize_chart_page.ts
index 71e722a9c8fdd..80fb33bb49d49 100644
--- a/test/functional/page_objects/visualize_chart_page.ts
+++ b/test/functional/page_objects/visualize_chart_page.ts
@@ -407,6 +407,17 @@ export function VisualizeChartPageProvider({ getService, getPageObjects }: FtrPr
           };
         });
     }
+
+    public async getChartValues() {
+      const elements = await find.allByCssSelector('.series.histogram text');
+      const values = await Promise.all(
+        elements.map(async element => {
+          const text = await element.getVisibleText();
+          return text;
+        })
+      );
+      return values;
+    }
   }
 
   return new VisualizeChart();
diff --git a/test/functional/page_objects/visualize_editor_page.ts b/test/functional/page_objects/visualize_editor_page.ts
index 8b0ec3ba26028..43323d37ffb6a 100644
--- a/test/functional/page_objects/visualize_editor_page.ts
+++ b/test/functional/page_objects/visualize_editor_page.ts
@@ -502,6 +502,10 @@ export function VisualizeEditorPageProvider({ getService, getPageObjects }: FtrP
       return await testSubjects.click('showCategoryLines');
     }
 
+    public async toggleValuesOnChart() {
+      return await testSubjects.click('showValuesOnChart');
+    }
+
     public async setGridValueAxis(axis: string) {
       log.debug(`setGridValueAxis(${axis})`);
       await find.selectValue('select#gridAxis', axis);