[Lens] New value labels config option for bar charts

x-pack/plugins/lens/public/shared_components/toolbar_popover.tsx

@@ -32,6 +32,7 @@ export interface ToolbarPopoverProps {
    */
   groupPosition?: ToolbarButtonProps['groupPosition'];
   buttonDataTestSubj?: string;
+  larger?: boolean;
 }
 
 export const ToolbarPopover: React.FunctionComponent<ToolbarPopoverProps> = ({
@@ -41,15 +42,17 @@ export const ToolbarPopover: React.FunctionComponent<ToolbarPopoverProps> = ({
   isDisabled = false,
   groupPosition,
   buttonDataTestSubj,
+  larger,
 }) => {
   const [open, setOpen] = useState(false);
 
   const iconType: string | IconType = typeof type === 'string' ? typeToIconMap[type] : type;
+  const panelClassName = larger ? 'lnsXyToolbar__popoverLarger' : 'lnsXyToolbar__popover';
 
   return (
     <EuiFlexItem grow={false}>
       <EuiPopover
-        panelClassName="lnsXyToolbar__popover"
+        panelClassName={panelClassName}
         ownFocus
         aria-label={title}
         button={

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

@@ -246,6 +246,7 @@ const createArgsWithLayers = (layers: LayerArgs[] = [sampleLayer]): XYArgs => ({
     isVisible: false,
     position: Position.Top,
   },
+  valueLabels: 'hide',
   axisTitlesVisibilitySettings: {
     type: 'lens_xy_axisTitlesVisibilityConfig',
     x: true,
@@ -1794,6 +1795,7 @@ describe('xy_expression', () => {
         yTitle: '',
         yRightTitle: '',
         legend: { type: 'lens_xy_legendConfig', isVisible: false, position: Position.Top },
+        valueLabels: 'hide',
         tickLabelsVisibilitySettings: {
           type: 'lens_xy_tickLabelsConfig',
           x: true,
@@ -1876,6 +1878,7 @@ describe('xy_expression', () => {
         yTitle: '',
         yRightTitle: '',
         legend: { type: 'lens_xy_legendConfig', isVisible: false, position: Position.Top },
+        valueLabels: 'hide',
         tickLabelsVisibilitySettings: {
           type: 'lens_xy_tickLabelsConfig',
           x: true,
@@ -1945,6 +1948,7 @@ describe('xy_expression', () => {
         yTitle: '',
         yRightTitle: '',
         legend: { type: 'lens_xy_legendConfig', isVisible: true, position: Position.Top },
+        valueLabels: 'hide',
         tickLabelsVisibilitySettings: {
           type: 'lens_xy_tickLabelsConfig',
           x: true,

x-pack/plugins/lens/public/xy_visualization/expression.tsx

@@ -20,6 +20,10 @@ import {
   GeometryValue,
   XYChartSeriesIdentifier,
   StackMode,
+  RecursivePartial,
+  Theme,
+  VerticalAlignment,
+  HorizontalAlignment,
 } from '@elastic/charts';
 import { I18nProvider } from '@kbn/i18n/react';
 import {
@@ -125,6 +129,11 @@ export const xyChart: ExpressionFunctionDefinition<
         defaultMessage: 'Define how missing values are treated',
       }),
     },
+    valueLabels: {
+      types: ['string'],
+      options: ['hide', 'inside'],
+      help: '',
+    },
     tickLabelsVisibilitySettings: {
       types: ['lens_xy_tickLabelsConfig'],
       help: i18n.translate('xpack.lens.xyChart.tickLabelsSettings.help', {
@@ -206,6 +215,40 @@ export const getXyChartRenderer = (dependencies: {
   },
 });
 
+function mergeThemeWithValueLabelsStyling(
+  theme: RecursivePartial<Theme>,
+  valuesLabelMode: string = 'hide',
+  isHorizontal: boolean
+) {
+  const VALUE_LABELS_MAX_FONTSIZE = 15;
+  const VALUE_LABELS_MIN_FONTSIZE = 10;
+  const VALUE_LABELS_VERTICAL_OFFSET = -10;
+  const VALUE_LABELS_HORIZONTAL_OFFSET = 10;
+
+  if (valuesLabelMode === 'hide') {
+    return theme;
+  }
+  return {
+    ...theme,
+    ...{
+      barSeriesStyle: {
+        ...theme.barSeriesStyle,
+        displayValue: {
+          fontSize: { min: VALUE_LABELS_MIN_FONTSIZE, max: VALUE_LABELS_MAX_FONTSIZE },
+          fill: { textInverted: true, textBorder: true },
+          alignment: isHorizontal
+            ? {
+                vertical: VerticalAlignment.Middle,
+              }
+            : { horizontal: HorizontalAlignment.Center },
+          offsetX: isHorizontal ? VALUE_LABELS_HORIZONTAL_OFFSET : 0,
+          offsetY: isHorizontal ? 0 : VALUE_LABELS_VERTICAL_OFFSET,
+        },
+      },
+    },
+  };
+}
+
 function getIconForSeriesType(seriesType: SeriesType): IconType {
   return visualizationTypes.find((c) => c.id === seriesType)!.icon || 'empty';
 }
@@ -245,7 +288,7 @@ export function XYChart({
   onClickValue,
   onSelectRange,
 }: XYChartRenderProps) {
-  const { legend, layers, fittingFunction, gridlinesVisibilitySettings } = args;
+  const { legend, layers, fittingFunction, gridlinesVisibilitySettings, valueLabels } = args;
   const chartTheme = chartsThemeService.useChartsTheme();
   const chartBaseTheme = chartsThemeService.useChartsBaseTheme();
 
@@ -387,6 +430,16 @@ export function XYChart({
     return style;
   };
 
+  const shouldShowValueLabels =
+    // No stacked bar charts
+    filteredLayers.every((layer) => !layer.seriesType.includes('stacked')) &&
+    // No histogram charts
+    !isHistogramViz;
+
+  const baseThemeWithMaybeValueLabels = !shouldShowValueLabels
+    ? chartTheme
+    : mergeThemeWithValueLabelsStyling(chartTheme, valueLabels || 'hide', shouldRotate);
+
   return (
     <Chart>
       <Settings
@@ -397,7 +450,7 @@ export function XYChart({
         }
         legendPosition={legend.position}
         showLegendExtra={false}
-        theme={chartTheme}
+        theme={baseThemeWithMaybeValueLabels}
         baseTheme={chartBaseTheme}
         tooltip={{
           headerFormatter: (d) => safeXAccessorLabelRenderer(d.value),
@@ -601,6 +654,10 @@ export function XYChart({
             });
           }
 
+          const yAxis = yAxesConfiguration.find((axisConfiguration) =>
+            axisConfiguration.series.find((currentSeries) => currentSeries.accessor === accessor)
+          );
+
           const seriesProps: SeriesSpec = {
             splitSeriesAccessors: splitAccessor ? [splitAccessor] : [],
             stackAccessors: seriesType.includes('stacked') ? [xAccessor as string] : [],
@@ -611,9 +668,7 @@ export function XYChart({
             xScaleType: xAccessor ? xScaleType : 'ordinal',
             yScaleType,
             color: () => getSeriesColor(layer, accessor),
-            groupId: yAxesConfiguration.find((axisConfiguration) =>
-              axisConfiguration.series.find((currentSeries) => currentSeries.accessor === accessor)
-            )?.groupId,
+            groupId: yAxis?.groupId,
             enableHistogramMode:
               isHistogram &&
               (seriesType.includes('stacked') || !splitAccessor) &&
@@ -685,7 +740,19 @@ export function XYChart({
             case 'bar_horizontal':
             case 'bar_horizontal_stacked':
             case 'bar_horizontal_percentage_stacked':
-              return <BarSeries key={index} {...seriesProps} />;
+              const valueLabelsSettings = {
+                displayValueSettings: {
+                  // This format double fixes two issues in elastic-chart
+                  // * when rotating the chart, the formatter is not correctly picked
+                  // * in some scenarios value labels are not strings, and this breaks the elastic-chart lib
+                  valueFormatter: (d: unknown) => yAxis?.formatter?.convert(d) || '',
+                  showValueLabel: shouldShowValueLabels && valueLabels !== 'hide',
+                  isAlternatingValueLabel: false,
+                  isValueContainedInElement: true,
+                  hideClippedValue: true,
+                },
+              };
+              return <BarSeries key={index} {...seriesProps} {...valueLabelsSettings} />;
             case 'area_stacked':
             case 'area_percentage_stacked':
               return (

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

@@ -5,7 +5,8 @@
  */
 
 import { EuiIconType } from '@elastic/eui/src/components/icon/icon';
-import { SeriesType, visualizationTypes, LayerConfig, YConfig } from './types';
+import { FramePublicAPI } from '../types';
+import { SeriesType, visualizationTypes, LayerConfig, YConfig, ValidLayer } from './types';
 
 export function isHorizontalSeries(seriesType: SeriesType) {
   return (
@@ -37,3 +38,23 @@ export const getSeriesColor = (layer: LayerConfig, accessor: string) => {
     layer?.yConfig?.find((yConfig: YConfig) => yConfig.forAccessor === accessor)?.color || null
   );
 };
+
+export function hasHistogramSeries(
+  layers: ValidLayer[] = [],
+  datasourceLayers?: FramePublicAPI['datasourceLayers']
+) {
+  if (!datasourceLayers) {
+    return false;
+  }
+  const validLayers = layers.filter(({ accessors }) => accessors.length);
+
+  return validLayers.some(({ layerId, xAccessor }: ValidLayer) => {
+    const xAxisOperation = datasourceLayers[layerId].getOperationForColumnId(xAccessor);
+    return (
+      xAxisOperation &&
+      xAxisOperation.isBucketed &&
+      xAxisOperation.scale &&
+      xAxisOperation.scale !== 'ordinal'
+    );
+  });
+}