[XY] Add axes support (elastic#129476)

* Added `axes` support

* Refactoring auto-assignment logic

* Fixed reference line position

* Fixed bug with auto-assignment.

* Fixed snapshots

* Fixed behavior of the horizontal reference lines.

Co-authored-by: Yaroslav Kuznietsov <[email protected]>
Co-authored-by: Kibana Machine <[email protected]>
Co-authored-by: Marta Bondyra <[email protected]>

src/plugins/chart_expressions/expression_xy/common/__mocks__/index.ts

@@ -58,6 +58,9 @@ export const sampleLayer: DataLayerConfig = {
   columnToLabel: '{"a": "Label A", "b": "Label B", "d": "Label D"}',
   xScaleType: 'ordinal',
   isHistogram: false,
+  isHorizontal: false,
+  isPercentage: false,
+  isStacked: false,
   palette: mockPaletteOutput,
   table: createSampleDatatableWithRows([]),
 };
@@ -73,16 +76,16 @@ export const sampleExtendedLayer: ExtendedDataLayerConfig = {
   columnToLabel: '{"a": "Label A", "b": "Label B", "d": "Label D"}',
   xScaleType: 'ordinal',
   isHistogram: false,
+  isHorizontal: false,
+  isStacked: false,
+  isPercentage: false,
   palette: mockPaletteOutput,
   table: createSampleDatatableWithRows([]),
 };
 
 export const createArgsWithLayers = (
   layers: DataLayerConfig | DataLayerConfig[] = sampleLayer
 ): XYProps => ({
-  xTitle: '',
-  yTitle: '',
-  yRightTitle: '',
   showTooltip: true,
   legend: {
     type: 'legendConfig',
@@ -91,41 +94,44 @@ export const createArgsWithLayers = (
   },
   valueLabels: 'hide',
   valuesInLegend: false,
-  axisTitlesVisibilitySettings: {
-    type: 'axisTitlesVisibilityConfig',
-    x: true,
-    yLeft: true,
-    yRight: true,
-  },
-  tickLabelsVisibilitySettings: {
-    type: 'tickLabelsConfig',
-    x: true,
-    yLeft: false,
-    yRight: false,
-  },
-  labelsOrientation: {
-    type: 'labelsOrientationConfig',
-    x: 0,
-    yLeft: -90,
-    yRight: -45,
-  },
-  gridlinesVisibilitySettings: {
-    type: 'gridlinesConfig',
-    x: true,
-    yLeft: false,
-    yRight: false,
-  },
-  yLeftExtent: {
-    mode: 'full',
-    type: 'axisExtentConfig',
-  },
-  yRightExtent: {
-    mode: 'full',
-    type: 'axisExtentConfig',
+  xAxisConfig: {
+    type: 'xAxisConfig',
+    position: 'bottom',
+    showGridLines: true,
+    labelsOrientation: 0,
+    showLabels: true,
+    showTitle: true,
+    title: '',
   },
+  yAxisConfigs: [
+    {
+      type: 'yAxisConfig',
+      position: 'right',
+      showGridLines: false,
+      labelsOrientation: -45,
+      showLabels: false,
+      showTitle: true,
+      title: '',
+      extent: {
+        mode: 'full',
+        type: 'axisExtentConfig',
+      },
+    },
+    {
+      type: 'yAxisConfig',
+      position: 'left',
+      showGridLines: false,
+      labelsOrientation: -90,
+      showLabels: false,
+      showTitle: true,
+      title: '',
+      extent: {
+        mode: 'full',
+        type: 'axisExtentConfig',
+      },
+    },
+  ],
   layers: Array.isArray(layers) ? layers : [layers],
-  yLeftScale: 'linear',
-  yRightScale: 'linear',
 });
 
 export function sampleArgs() {

src/plugins/chart_expressions/expression_xy/common/constants.ts

@@ -8,22 +8,20 @@
 
 export const XY_VIS = 'xyVis';
 export const LAYERED_XY_VIS = 'layeredXyVis';
-export const Y_CONFIG = 'yConfig';
-export const REFERENCE_LINE_Y_CONFIG = 'referenceLineYConfig';
-export const EXTENDED_Y_CONFIG = 'extendedYConfig';
+export const DATA_DECORATION_CONFIG = 'dataDecorationConfig';
+export const REFERENCE_LINE_DECORATION_CONFIG = 'referenceLineDecorationConfig';
+export const EXTENDED_REFERENCE_LINE_DECORATION_CONFIG = 'extendedReferenceLineDecorationConfig';
+export const X_AXIS_CONFIG = 'xAxisConfig';
+export const Y_AXIS_CONFIG = 'yAxisConfig';
 export const DATA_LAYER = 'dataLayer';
 export const EXTENDED_DATA_LAYER = 'extendedDataLayer';
 export const LEGEND_CONFIG = 'legendConfig';
 export const XY_VIS_RENDERER = 'xyVis';
-export const GRID_LINES_CONFIG = 'gridlinesConfig';
 export const ANNOTATION_LAYER = 'annotationLayer';
 export const EXTENDED_ANNOTATION_LAYER = 'extendedAnnotationLayer';
-export const TICK_LABELS_CONFIG = 'tickLabelsConfig';
 export const AXIS_EXTENT_CONFIG = 'axisExtentConfig';
 export const REFERENCE_LINE = 'referenceLine';
 export const REFERENCE_LINE_LAYER = 'referenceLineLayer';
-export const LABELS_ORIENTATION_CONFIG = 'labelsOrientationConfig';
-export const AXIS_TITLES_VISIBILITY_CONFIG = 'axisTitlesVisibilityConfig';
 
 export const LayerTypes = {
   DATA: 'data',
@@ -82,13 +80,6 @@ export const SeriesTypes = {
   BAR: 'bar',
   LINE: 'line',
   AREA: 'area',
-  BAR_STACKED: 'bar_stacked',
-  AREA_STACKED: 'area_stacked',
-  BAR_HORIZONTAL: 'bar_horizontal',
-  BAR_PERCENTAGE_STACKED: 'bar_percentage_stacked',
-  BAR_HORIZONTAL_STACKED: 'bar_horizontal_stacked',
-  AREA_PERCENTAGE_STACKED: 'area_percentage_stacked',
-  BAR_HORIZONTAL_PERCENTAGE_STACKED: 'bar_horizontal_percentage_stacked',
 } as const;
 
 export const YScaleTypes = {
@@ -131,3 +122,10 @@ export const AvailableReferenceLineIcons = {
   TAG: 'tag',
   TRIANGLE: 'triangle',
 } as const;
+
+export const AxisModes = {
+  NORMAL: 'normal',
+  PERCENTAGE: 'percentage',
+  WIGGLE: 'wiggle',
+  SILHOUETTE: 'silhouette',
+} as const;

src/plugins/chart_expressions/expression_xy/common/expression_functions/common_axis_args.ts

@@ -0,0 +1,72 @@
+/*
+ * Copyright Elasticsearch B.V. and/or licensed to Elasticsearch B.V. under one
+ * or more contributor license agreements. Licensed under the Elastic License
+ * 2.0 and the Server Side Public License, v 1; you may not use this file except
+ * in compliance with, at your election, the Elastic License 2.0 or the Server
+ * Side Public License, v 1.
+ */
+
+import { strings } from '../i18n';
+import { XAxisConfigFn, YAxisConfigFn } from '../types';
+import { AXIS_EXTENT_CONFIG } from '../constants';
+
+type CommonAxisConfigFn = XAxisConfigFn | YAxisConfigFn;
+
+export const commonAxisConfigArgs: Omit<
+  CommonAxisConfigFn['args'],
+  'scaleType' | 'mode' | 'boundsMargin'
+> = {
+  title: {
+    types: ['string'],
+    help: strings.getAxisTitleHelp(),
+  },
+  id: {
+    types: ['string'],
+    help: strings.getAxisIdHelp(),
+  },
+  hide: {
+    types: ['boolean'],
+    help: strings.getAxisHideHelp(),
+  },
+  labelColor: {
+    types: ['string'],
+    help: strings.getAxisLabelColorHelp(),
+  },
+  showOverlappingLabels: {
+    types: ['boolean'],
+    help: strings.getAxisShowOverlappingLabelsHelp(),
+  },
+  showDuplicates: {
+    types: ['boolean'],
+    help: strings.getAxisShowDuplicatesHelp(),
+  },
+  showGridLines: {
+    types: ['boolean'],
+    help: strings.getAxisShowGridLinesHelp(),
+    default: false,
+  },
+  labelsOrientation: {
+    types: ['number'],
+    options: [0, -90, -45],
+    help: strings.getAxisLabelsOrientationHelp(),
+  },
+  showLabels: {
+    types: ['boolean'],
+    help: strings.getAxisShowLabelsHelp(),
+    default: true,
+  },
+  showTitle: {
+    types: ['boolean'],
+    help: strings.getAxisShowTitleHelp(),
+    default: true,
+  },
+  truncate: {
+    types: ['number'],
+    help: strings.getAxisTruncateHelp(),
+  },
+  extent: {
+    types: [AXIS_EXTENT_CONFIG],
+    help: strings.getAxisExtentHelp(),
+    default: `{${AXIS_EXTENT_CONFIG}}`,
+  },
+};

src/plugins/chart_expressions/expression_xy/common/expression_functions/common_data_layer_args.ts

@@ -7,7 +7,7 @@
  */
 
 import { ArgumentType } from '@kbn/expressions-plugin/common';
-import { SeriesTypes, XScaleTypes, Y_CONFIG } from '../constants';
+import { SeriesTypes, XScaleTypes, DATA_DECORATION_CONFIG } from '../constants';
 import { strings } from '../i18n';
 import { DataLayerArgs, ExtendedDataLayerArgs } from '../types';
 
@@ -43,6 +43,21 @@ export const commonDataLayerArgs: Omit<
     default: false,
     help: strings.getIsHistogramHelp(),
   },
+  isPercentage: {
+    types: ['boolean'],
+    default: false,
+    help: strings.getIsPercentageHelp(),
+  },
+  isStacked: {
+    types: ['boolean'],
+    default: false,
+    help: strings.getIsStackedHelp(),
+  },
+  isHorizontal: {
+    types: ['boolean'],
+    default: false,
+    help: strings.getIsHorizontalHelp(),
+  },
   lineWidth: {
     types: ['number'],
     help: strings.getLineWidthHelp(),
@@ -59,9 +74,9 @@ export const commonDataLayerArgs: Omit<
     types: ['boolean'],
     help: strings.getShowLinesHelp(),
   },
-  yConfig: {
-    types: [Y_CONFIG],
-    help: strings.getYConfigHelp(),
+  decorations: {
+    types: [DATA_DECORATION_CONFIG],
+    help: strings.getDecorationsHelp(),
     multi: true,
   },
   columnToLabel: {