[Lens] New value labels config option for bar charts

x-pack/plugins/lens/public/xy_visualization/to_expression.ts

@@ -203,6 +203,9 @@ export const buildExpression = (
                                 forAccessor: [yConfig.forAccessor],
                                 axisMode: yConfig.axisMode ? [yConfig.axisMode] : [],
                                 color: yConfig.color ? [yConfig.color] : [],
+                                showValueLabels: yConfig.showValueLabels
+                                  ? [yConfig.showValueLabels]
+                                  : [],
                               },
                             },
                           ],

x-pack/plugins/lens/public/xy_visualization/types.ts

@@ -196,6 +196,11 @@ export const yAxisConfig: ExpressionFunctionDefinition<
       types: ['string'],
       help: 'The color of the series',
     },
+    showValueLabels: {
+      types: ['boolean'],
+      default: false,
+      help: 'Whether to show value labels on the chart bars (horizontal only)',
+    },
   },
   fn: function fn(input: unknown, args: YConfig) {
     return {
@@ -292,6 +297,7 @@ export interface YConfig {
   forAccessor: string;
   axisMode?: YAxisMode;
   color?: string;
+  showValueLabels?: boolean;
 }
 
 export interface LayerConfig {

x-pack/plugins/lens/public/xy_visualization/xy_config_panel.test.tsx

@@ -6,10 +6,16 @@
 
 import React from 'react';
 import { mountWithIntl as mount, shallowWithIntl as shallow } from 'test_utils/enzyme_helpers';
-import { EuiButtonGroupProps, EuiSuperSelect, EuiButtonGroup } from '@elastic/eui';
-import { LayerContextMenu, XyToolbar } from './xy_config_panel';
+import {
+  EuiButtonGroupProps,
+  EuiSuperSelect,
+  EuiButtonGroup,
+  EuiSwitch,
+  EuiSwitchProps,
+} from '@elastic/eui';
+import { LayerContextMenu, XyToolbar, DimensionEditor } from './xy_config_panel';
 import { FramePublicAPI } from '../types';
-import { State } from './types';
+import { State, SeriesType } from './types';
 import { Position } from '@elastic/charts';
 import { createMockFramePublicAPI, createMockDatasource } from '../editor_frame_service/mocks';
 
@@ -195,4 +201,76 @@ describe('XY Config panels', () => {
       expect(selections!).toEqual({ x: true, y: true });
     });
   });
+
+  describe('Dimension Editor', () => {
+    test('should show the value labels option for the bar chart', () => {
+      const state = testState();
+      const testAccessor = state.layers[0].accessors[0];
+
+      const component = mount(
+        <DimensionEditor
+          layerId={state.layers[0].layerId}
+          frame={frame}
+          setState={jest.fn()}
+          state={{
+            ...state,
+            layers: [
+              {
+                ...state.layers[0],
+                splitAccessor: undefined,
+                seriesType: 'bar_horizontal',
+                yConfig: [{ forAccessor: testAccessor, showValueLabels: true }],
+              },
+            ],
+          }}
+          groupId=""
+          accessor={testAccessor}
+        />
+      );
+
+      const valueLabelsCheck = component
+        .find(EuiSwitch)
+        .first()
+        .prop('checked') as EuiSwitchProps['checked'];
+
+      expect(valueLabelsCheck).toBe(true);
+    });
+
+    test('should not show the value labels switch for the other types of charts', () => {
+      const state = testState();
+      const testAccessor = state.layers[0].accessors[0];
+
+      const componentsConfig = [
+        { type: 'bar_horizontal' as SeriesType, multiseries: true },
+        { type: 'bar' as SeriesType, multiseries: true },
+        { type: 'line' as SeriesType, multiseries: false },
+        { type: 'area' as SeriesType, multiseries: false },
+      ];
+
+      for (const { type, multiseries } of componentsConfig) {
+        const component = mount(
+          <DimensionEditor
+            layerId={state.layers[0].layerId}
+            frame={frame}
+            setState={jest.fn()}
+            state={{
+              ...state,
+              layers: [
+                {
+                  ...state.layers[0],
+                  ...(!multiseries && { splitAccessor: undefined }),
+                  seriesType: type,
+                  yConfig: [{ forAccessor: testAccessor, showValueLabels: true }],
+                },
+              ],
+            }}
+            groupId=""
+            accessor={testAccessor}
+          />
+        );
+
+        expect(component.find(EuiSwitch).length).toBe(0);
+      }
+    });
+  });
 });