[Lens] Axis shown on the same side in xy chart (#138745)

* Fix axis auto assigment

* Simplify auto assignment logic + add new unit tests for that

Co-authored-by: Joe Reuter <johannes.reuter@elastic.co>
Co-authored-by: Kibana Machine <42973632+kibanamachine@users.noreply.github.com>

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

@@ -47,6 +47,7 @@ export type {
   ReferenceLineLayerArgs,
   CommonXYDataLayerConfig,
   ReferenceLineLayerConfig,
+  DataDecorationConfigResult,
   AvailableReferenceLineIcon,
   XYExtendedLayerConfigResult,
   CommonXYAnnotationLayerConfig,

src/plugins/chart_expressions/expression_xy/public/helpers/axes_configuration.test.ts

@@ -7,7 +7,7 @@
  */
 
 import { FieldFormat } from '@kbn/field-formats-plugin/common';
-import { DataLayerConfig, YAxisConfigResult } from '../../common';
+import { DataLayerConfig, YAxisConfigResult, DataDecorationConfigResult } from '../../common';
 import { LayerTypes } from '../../common/constants';
 import { Datatable } from '@kbn/expressions-plugin/public';
 import { getAxesConfiguration } from './axes_configuration';
@@ -218,6 +218,20 @@ describe('axes_configuration', () => {
             params: { id: 'currency' },
           },
         },
+        {
+          id: 'yAccessorId5',
+          name: 'Other column',
+          meta: {
+            type: 'number',
+            source: 'esaggs',
+            index: 'indexPatternId',
+            sourceParams: {
+              indexPatternId: 'indexPatternId',
+              type: 'count',
+            },
+            params: { id: 'number' },
+          },
+        },
       ],
     },
   };
@@ -228,6 +242,11 @@ describe('axes_configuration', () => {
       position: 'right',
       type: 'yAxisConfig',
     },
+    {
+      id: '2',
+      position: 'left',
+      type: 'yAxisConfig',
+    },
   ];
 
   const sampleLayer: DataLayerConfig = {
@@ -256,6 +275,7 @@ describe('axes_configuration', () => {
         yAccessorId: { id: 'number', params: {} },
         yAccessorId3: { id: 'currency', params: {} },
         yAccessorId4: { id: 'currency', params: {} },
+        yAccessorId5: { id: 'number', params: {} },
       },
       splitSeriesAccessors: {
         d: { format: { id: 'number', params: {} }, formatter: {} as FieldFormat },
@@ -269,11 +289,35 @@ describe('axes_configuration', () => {
     const formatFactory = jest.fn();
     const groups = getAxesConfiguration([sampleLayer], false, formatFactory, fieldFormats, []);
     expect(groups.length).toEqual(1);
+    expect(groups[0].groupId).toEqual('left');
     expect(groups[0].position).toEqual('left');
     expect(groups[0].series[0].accessor).toEqual('yAccessorId');
     expect(groups[0].series[0].layer).toEqual('first');
   });
 
+  it('should map auto series to defined left axis if formatters match', () => {
+    const formatFactory = jest.fn();
+    const groups = getAxesConfiguration(
+      [
+        {
+          ...sampleLayer,
+          accessors: ['yAccessorId', 'yAccessorId5'],
+          decorations: [{ type: 'dataDecorationConfig', forAccessor: 'yAccessorId', axisId: '2' }],
+        },
+      ],
+      false,
+      formatFactory,
+      fieldFormats,
+      yAxisConfigs
+    );
+    expect(groups.length).toEqual(1);
+    expect(groups[0].groupId).toEqual('axis-2');
+    expect(groups[0].position).toEqual('left');
+    expect(groups[0].series[0].accessor).toEqual('yAccessorId');
+    expect(groups[0].series[1].accessor).toEqual('yAccessorId5');
+    expect(groups[0].series[0].layer).toEqual('first');
+  });
+
   it('should map auto series to right axis if formatters do not match', () => {
     const formatFactory = jest.fn();
     const twoSeriesLayer = { ...sampleLayer, accessors: ['yAccessorId', 'yAccessorId2'] };
@@ -285,13 +329,72 @@ describe('axes_configuration', () => {
     expect(groups[1].series[0].accessor).toEqual('yAccessorId2');
   });
 
-  it('should map auto series to left if left and right are already filled with non-matching series', () => {
+  it('should map auto series to left axis if formatters do not match with defined left axis', () => {
+    const formatFactory = jest.fn();
+    const groups = getAxesConfiguration(
+      [
+        {
+          ...sampleLayer,
+          accessors: ['yAccessorId', 'yAccessorId3'],
+          decorations: [{ type: 'dataDecorationConfig', forAccessor: 'yAccessorId', axisId: '2' }],
+        },
+      ],
+      false,
+      formatFactory,
+      fieldFormats,
+      yAxisConfigs
+    );
+    expect(groups.length).toEqual(2);
+    expect(groups[0].groupId).toEqual('axis-2');
+    expect(groups[0].position).toEqual('left');
+    expect(groups[0].series[0].accessor).toEqual('yAccessorId');
+    expect(groups[0].series[0].layer).toEqual('first');
+    expect(groups[1].groupId).toEqual('right');
+    expect(groups[1].position).toEqual('right');
+    expect(groups[1].series[0].accessor).toEqual('yAccessorId3');
+    expect(groups[1].series[0].layer).toEqual('first');
+  });
+
+  it('should map auto series to defined left axis if defined left and right are already filled with non-matching series', () => {
+    const formatFactory = jest.fn();
+    const threeSeriesLayer = {
+      ...sampleLayer,
+      accessors: ['yAccessorId', 'yAccessorId2', 'yAccessorId3'],
+      decorations: [
+        { type: 'dataDecorationConfig', forAccessor: 'yAccessorId', axisId: '1' },
+        { type: 'dataDecorationConfig', forAccessor: 'yAccessorId2', axisId: '2' },
+      ] as DataDecorationConfigResult[],
+    };
+    const groups = getAxesConfiguration(
+      [threeSeriesLayer],
+      false,
+      formatFactory,
+      fieldFormats,
+      yAxisConfigs
+    );
+    expect(groups.length).toEqual(2);
+    expect(groups[0].groupId).toEqual('axis-1');
+    expect(groups[0].position).toEqual('right');
+    expect(groups[1].groupId).toEqual('axis-2');
+    expect(groups[1].position).toEqual('left');
+    expect(groups[0].series[0].accessor).toEqual('yAccessorId');
+    expect(groups[1].series[0].accessor).toEqual('yAccessorId2');
+    expect(groups[1].series[1].accessor).toEqual('yAccessorId3');
+  });
+
+  it('should map auto series to left if not-defined left and right are already filled with non-matching series', () => {
     const formatFactory = jest.fn();
     const threeSeriesLayer = {
       ...sampleLayer,
       accessors: ['yAccessorId', 'yAccessorId2', 'yAccessorId3'],
     };
-    const groups = getAxesConfiguration([threeSeriesLayer], false, formatFactory, fieldFormats, []);
+    const groups = getAxesConfiguration(
+      [threeSeriesLayer],
+      false,
+      formatFactory,
+      fieldFormats,
+      yAxisConfigs
+    );
     expect(groups.length).toEqual(2);
     expect(groups[0].position).toEqual('left');
     expect(groups[1].position).toEqual('right');

src/plugins/chart_expressions/expression_xy/public/helpers/axes_configuration.ts

@@ -113,8 +113,13 @@ export function groupAxesByType(
 
   const tablesExist = layers.filter(({ table }) => Boolean(table)).length > 0;
 
-  leftSeriesKeys.push(LEFT_GLOBAL_AXIS_ID);
-  rightSeriesKeys.push(RIGHT_GLOBAL_AXIS_ID);
+  if (!leftSeriesKeys.length) {
+    leftSeriesKeys.push(LEFT_GLOBAL_AXIS_ID);
+  }
+
+  if (!rightSeriesKeys.length) {
+    rightSeriesKeys.push(RIGHT_GLOBAL_AXIS_ID);
+  }
 
   series.auto.forEach((currentSeries) => {
     const leftAxisGroupId = tablesExist
@@ -129,16 +134,23 @@ export function groupAxesByType(
         )
       : undefined;
 
-    let axisGroupId = LEFT_GLOBAL_AXIS_ID;
+    const rightSeriesCount = rightSeriesKeys.reduce((acc, key) => {
+      return acc + series[key].length;
+    }, 0);
+    const leftSeriesCount = leftSeriesKeys.reduce((acc, key) => {
+      return acc + series[key].length;
+    }, 0);
 
-    if (series[LEFT_GLOBAL_AXIS_ID].length === 0 || leftAxisGroupId) {
-      axisGroupId = leftAxisGroupId || LEFT_GLOBAL_AXIS_ID;
-    } else if (series[RIGHT_GLOBAL_AXIS_ID].length === 0 || rightAxisGroupId) {
-      axisGroupId = rightAxisGroupId || RIGHT_GLOBAL_AXIS_ID;
-    } else if (series[RIGHT_GLOBAL_AXIS_ID].length >= series[LEFT_GLOBAL_AXIS_ID].length) {
-      axisGroupId = LEFT_GLOBAL_AXIS_ID;
+    let axisGroupId;
+
+    if (leftSeriesCount === 0 || leftAxisGroupId) {
+      axisGroupId = leftAxisGroupId || leftSeriesKeys[0];
+    } else if (rightSeriesCount === 0 || rightAxisGroupId) {
+      axisGroupId = rightAxisGroupId || rightSeriesKeys[0];
+    } else if (rightSeriesCount >= leftSeriesCount) {
+      axisGroupId = leftSeriesKeys[0];
     } else {
-      axisGroupId = RIGHT_GLOBAL_AXIS_ID;
+      axisGroupId = rightSeriesKeys[0];
     }
 
     series[axisGroupId].push(currentSeries);