From ff1f44949f12bfd2f7832a09c238f8e968c703d5 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>
# Conflicts:
#	src/plugins/vis_type_vislib/public/components/options/point_series/point_series.tsx
#	test/functional/page_objects/visualize_chart_page.ts
#	test/functional/page_objects/visualize_editor_page.ts
---
 .../options/point_series/point_series.tsx     |  3 +-
 .../apps/visualize/_point_series_options.js   | 32 +++++++++++++++++++
 .../page_objects/visualize_chart_page.ts      | 11 +++++++
 .../page_objects/visualize_editor_page.ts     |  4 +++
 4 files changed, 49 insertions(+), 1 deletion(-)

diff --git a/src/legacy/core_plugins/vis_type_vislib/public/components/options/point_series/point_series.tsx b/src/legacy/core_plugins/vis_type_vislib/public/components/options/point_series/point_series.tsx
index b9872ab94bd0b..19ebf74ebd090 100644
--- a/src/legacy/core_plugins/vis_type_vislib/public/components/options/point_series/point_series.tsx
+++ b/src/legacy/core_plugins/vis_type_vislib/public/components/options/point_series/point_series.tsx
@@ -66,8 +66,9 @@ function PointSeriesOptions(props: ValidationVisOptionsProps<BasicVislibParams>)
           />
         )}
 
-        {vis.type.type === 'histogram' && (
+        {vis.type.name === '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 d0f7810b6f8bb..816cb15b0484d 100644
--- a/test/functional/apps/visualize/_point_series_options.js
+++ b/test/functional/apps/visualize/_point_series_options.js
@@ -192,6 +192,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 0f14489a39dbc..900cc272c9041 100644
--- a/test/functional/page_objects/visualize_chart_page.ts
+++ b/test/functional/page_objects/visualize_chart_page.ts
@@ -379,6 +379,17 @@ export function VisualizeChartPageProvider({ getService, getPageObjects }: FtrPr
       );
       return values.filter(item => item.length > 0);
     }
+
+    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 41c12170cf4dc..f4fa846432595 100644
--- a/test/functional/page_objects/visualize_editor_page.ts
+++ b/test/functional/page_objects/visualize_editor_page.ts
@@ -487,6 +487,10 @@ export function VisualizeEditorPageProvider({ getService, getPageObjects }: FtrP
       }
       await options[optionIndex].click();
     }
+
+    public async toggleValuesOnChart() {
+      return await testSubjects.click('showValuesOnChart');
+    }
   }
 
   return new VisualizeEditorPage();