[7.8] [Visualize] Bar chart: Show missing values on chart setting (#66375)

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',
             })}

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';

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();

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);