[Lens] New value labels config option for bar charts

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

@@ -10,7 +10,14 @@ import { ExpressionsSetup } from '../../../../../src/plugins/expressions/public'
 import { UI_SETTINGS } from '../../../../../src/plugins/data/public';
 import { xyVisualization } from './xy_visualization';
 import { xyChart, getXyChartRenderer } from './xy_expression';
-import { legendConfig, layerConfig, yAxisConfig, tickLabelsConfig, gridlinesConfig } from './types';
+import {
+  legendConfig,
+  layerConfig,
+  yAxisConfig,
+  tickLabelsConfig,
+  gridlinesConfig,
+  valueLabelsConfig,
+} from './types';
 import { EditorFrameSetup, FormatFactory } from '../types';
 import { ChartsPluginSetup } from '../../../../../src/plugins/charts/public';
 
@@ -41,6 +48,7 @@ export class XyVisualization {
     expressions.registerFunction(() => yAxisConfig);
     expressions.registerFunction(() => tickLabelsConfig);
     expressions.registerFunction(() => gridlinesConfig);
+    expressions.registerFunction(() => valueLabelsConfig);
     expressions.registerFunction(() => layerConfig);
     expressions.registerFunction(() => xyChart);
 

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

@@ -146,6 +146,22 @@ export const buildExpression = (
               ],
             },
           ],
+          displayValues: [
+            {
+              type: 'expression',
+              chain: [
+                {
+                  type: 'function',
+                  function: 'lens_xy_displayValuesConfig',
+                  arguments: {
+                    showLabels: [state?.displayValues?.showLabels ?? false],
+                    fontSize: [state?.displayValues?.fontSize ?? 10],
+                    position: [state?.displayValues?.position ?? 'inside'],
+                  },
+                },
+              ],
+            },
+          ],
           layers: validLayers.map((layer) => {
             const columnToLabel: Record<string, string> = {};
 
@@ -203,6 +219,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

@@ -169,6 +169,43 @@ const axisConfig: { [key in keyof AxisConfig]: ArgumentType<AxisConfig[key]> } =
   },
 };
 
+type ValueLabelsConfigResult = ValueLabelConfig & {
+  type: 'lens_xy_displayValuesConfig';
+};
+
+export const valueLabelsConfig: ExpressionFunctionDefinition<
+  'lens_xy_displayValuesConfig',
+  null,
+  ValueLabelConfig,
+  ValueLabelsConfigResult
+> = {
+  name: 'lens_xy_displayValuesConfig',
+  aliases: [],
+  type: 'lens_xy_displayValuesConfig',
+  help: ``,
+  inputTypes: ['null'],
+  args: {
+    showLabels: {
+      types: ['boolean'],
+      help: '',
+    },
+    fontSize: {
+      types: ['number'],
+      help: '',
+    },
+    position: {
+      types: ['string'],
+      help: '',
+    },
+  },
+  fn: function fn(input: unknown, args: ValueLabelConfig) {
+    return {
+      type: 'lens_xy_displayValuesConfig',
+      ...args,
+    };
+  },
+};
+
 type YConfigResult = YConfig & { type: 'lens_xy_yConfig' };
 
 export const yAxisConfig: ExpressionFunctionDefinition<
@@ -196,6 +233,11 @@ export const yAxisConfig: ExpressionFunctionDefinition<
       types: ['string'],
       help: 'The color of the series',
     },
+    showValueLabels: {
+      types: ['boolean'],
+      default: false,
+      help: '',
+    },
   },
   fn: function fn(input: unknown, args: YConfig) {
     return {
@@ -288,10 +330,17 @@ export type SeriesType =
 
 export type YAxisMode = 'auto' | 'left' | 'right';
 
+export interface ValueLabelConfig {
+  showLabels: boolean;
+  fontSize?: number;
+  position?: 'inside' | 'outside';
+}
+
 export interface YConfig {
   forAccessor: string;
   axisMode?: YAxisMode;
   color?: string;
+  showValueLabels?: boolean;
 }
 
 export interface LayerConfig {
@@ -322,6 +371,7 @@ export interface XYArgs {
   showYAxisTitle?: boolean;
   tickLabelsVisibilitySettings?: AxesSettingsConfig & { type: 'lens_xy_tickLabelsConfig' };
   gridlinesVisibilitySettings?: AxesSettingsConfig & { type: 'lens_xy_gridlinesConfig' };
+  displayValues: ValueLabelConfig & { type: 'lens_xy_displayValuesConfig' };
 }
 
 // Persisted parts of the state
@@ -336,6 +386,7 @@ export interface XYState {
   showYAxisTitle?: boolean;
   tickLabelsVisibilitySettings?: AxesSettingsConfig;
   gridlinesVisibilitySettings?: AxesSettingsConfig;
+  displayValues?: ValueLabelConfig;
 }
 
 export type State = XYState;