[XY Axis] Fixes problem with series being displayed twice (#96773)

Co-authored-by: Kibana Machine <42973632+kibanamachine@users.noreply.github.com>

src/plugins/vis_type_xy/public/utils/render_all_series.test.mocks.ts

@@ -98,7 +98,141 @@ export const getVisConfig = (): VisConfig => {
           },
         },
         groupId: 'ValueAxis-1',
-        title: 'Percentiles of products.base_price',
+        title: 'Avg of products.base_price',
+        ticks: {
+          show: true,
+          rotation: 0,
+          showOverlappingLabels: true,
+          showDuplicates: true,
+        },
+        grid: {
+          show: false,
+        },
+        scale: {
+          mode: 'normal',
+          type: 'linear',
+        },
+        domain: {},
+        integersOnly: false,
+      },
+    ],
+    legend: {
+      show: true,
+      position: 'right',
+    },
+    rotation: 0,
+    thresholdLine: {
+      color: '#E7664C',
+      show: false,
+      value: 10,
+      width: 1,
+      groupId: 'ValueAxis-1',
+    },
+  };
+};
+
+export const getVisConfigMutipleYaxis = (): VisConfig => {
+  return {
+    markSizeRatio: 5.3999999999999995,
+    fittingFunction: 'linear',
+    detailedTooltip: true,
+    isTimeChart: true,
+    showCurrentTime: false,
+    showValueLabel: false,
+    enableHistogramMode: true,
+    tooltip: {
+      type: 'vertical',
+    },
+    aspects: {
+      x: {
+        accessor: 'col-0-2',
+        column: 0,
+        title: 'order_date per minute',
+        format: {
+          id: 'date',
+          params: {
+            pattern: 'HH:mm',
+          },
+        },
+        aggType: 'date_histogram',
+        aggId: '2',
+        params: {
+          date: true,
+          intervalESUnit: 'm',
+          intervalESValue: 1,
+          interval: 60000,
+          format: 'HH:mm',
+        },
+      },
+      y: [
+        {
+          accessor: 'col-1-3',
+          column: 1,
+          title: 'Average products.base_price',
+          format: {
+            id: 'number',
+          },
+          aggType: 'avg',
+          aggId: '3',
+          params: {},
+        },
+        {
+          accessor: 'col-1-2',
+          column: 1,
+          title: 'Average products.taxful_price',
+          format: {
+            id: 'number',
+          },
+          aggType: 'avg',
+          aggId: '33',
+          params: {},
+        },
+      ],
+    },
+    xAxis: {
+      id: 'CategoryAxis-1',
+      position: 'bottom',
+      show: true,
+      style: {
+        axisTitle: {
+          visible: true,
+        },
+        tickLabel: {
+          visible: true,
+          rotation: 0,
+        },
+      },
+      groupId: 'CategoryAxis-1',
+      title: 'order_date per minute',
+      ticks: {
+        show: true,
+        showOverlappingLabels: false,
+        showDuplicates: false,
+      },
+      grid: {
+        show: false,
+      },
+      scale: {
+        type: 'time',
+      },
+      integersOnly: false,
+    },
+    yAxes: [
+      {
+        id: 'ValueAxis-1',
+        position: 'left',
+        show: true,
+        style: {
+          axisTitle: {
+            visible: true,
+          },
+          tickLabel: {
+            visible: true,
+            rotation: 0,
+          },
+        },
+        groupId: 'ValueAxis-1',
+        title: 'Avg of products.base_price',
         ticks: {
           show: true,
           rotation: 0,

src/plugins/vis_type_xy/public/utils/render_all_series.test.tsx

@@ -15,6 +15,7 @@ import {
   getVisConfig,
   getVisConfigPercentiles,
   getPercentilesData,
+  getVisConfigMutipleYaxis,
 } from './render_all_series.test.mocks';
 import { SeriesParam, VisConfig } from '../types';
 
@@ -99,6 +100,22 @@ describe('renderAllSeries', function () {
     expect(wrapper.find(AreaSeries).prop('yAccessors')).toEqual(['col-1-3']);
   });
 
+  it('renders the correct yAccessors for multiple yAxis', () => {
+    const mutipleYAxisConfig = getVisConfigMutipleYaxis();
+    const renderMutipleYAxisSeries = renderAllSeries(
+      mutipleYAxisConfig,
+      defaultSeriesParams as SeriesParam[],
+      defaultData,
+      jest.fn(),
+      jest.fn(),
+      'Europe/Athens',
+      'col-0-2',
+      []
+    );
+    const wrapper = shallow(<div>{renderMutipleYAxisSeries}</div>);
+    expect(wrapper.find(AreaSeries).prop('yAccessors')).toEqual(['col-1-3']);
+  });
+
   it('renders the correct yAccessors for percentile aggs', () => {
     const percentilesConfig = getVisConfigPercentiles();
     const percentilesData = getPercentilesData();

src/plugins/vis_type_xy/public/utils/render_all_series.tsx

@@ -21,6 +21,7 @@ import {
 } from '@elastic/charts';
 
 import { DatatableRow } from '../../../expressions/public';
+import { METRIC_TYPES } from '../../../data/public';
 
 import { ChartType } from '../../common';
 import { SeriesParam, VisConfig } from '../types';
@@ -71,9 +72,17 @@ export const renderAllSeries = (
       interpolate,
       type,
     }) => {
-      const yAspects = aspects.y.filter(
-        ({ aggId, accessor }) => aggId?.includes(paramId) && accessor !== null
-      );
+      const yAspects = aspects.y.filter(({ aggId, aggType, accessor }) => {
+        if (
+          aggType === METRIC_TYPES.PERCENTILES ||
+          aggType === METRIC_TYPES.PERCENTILE_RANKS ||
+          aggType === METRIC_TYPES.STD_DEV
+        ) {
+          return aggId?.includes(paramId) && accessor !== null;
+        } else {
+          return aggId === paramId && accessor !== null;
+        }
+      });
       if (!show || !yAspects.length) {
         return null;
       }