[Viz] legend duplicates percentile options when chart has both left & right Y axes (#113073)

* [Viz] legend duplicates percentile options when chart has both left & right Y axes

* Update comment for isPercentileIdEqualToSeriesId

* Remove Dimension interface

* Replace partial aspect with whole aspect value

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

Author: DianaDerevyankina

src/plugins/vis_types/xy/public/utils/accessors.test.ts

@@ -6,7 +6,11 @@
  * Side Public License, v 1.
  */
 
-import { COMPLEX_SPLIT_ACCESSOR, getComplexAccessor } from './accessors';
+import {
+  COMPLEX_SPLIT_ACCESSOR,
+  getComplexAccessor,
+  isPercentileIdEqualToSeriesId,
+} from './accessors';
 import { BUCKET_TYPES } from '../../../../data/common';
 import { AccessorFn, Datum } from '@elastic/charts';
 
@@ -99,3 +103,37 @@ describe('XY chart datum accessors', () => {
     expect(accessor).toBeUndefined();
   });
 });
+
+describe('isPercentileIdEqualToSeriesId', () => {
+  it('should be equal for plain column ids', () => {
+    const seriesColumnId = 'col-0-1';
+    const columnId = `${seriesColumnId}`;
+
+    const isEqual = isPercentileIdEqualToSeriesId(columnId, seriesColumnId);
+    expect(isEqual).toBeTruthy();
+  });
+
+  it('should be equal for column with percentile', () => {
+    const seriesColumnId = '1';
+    const columnId = `${seriesColumnId}.95`;
+
+    const isEqual = isPercentileIdEqualToSeriesId(columnId, seriesColumnId);
+    expect(isEqual).toBeTruthy();
+  });
+
+  it('should not be equal for column with percentile equal to seriesColumnId', () => {
+    const seriesColumnId = '1';
+    const columnId = `2.1`;
+
+    const isEqual = isPercentileIdEqualToSeriesId(columnId, seriesColumnId);
+    expect(isEqual).toBeFalsy();
+  });
+
+  it('should not be equal for column with percentile, where columnId contains seriesColumnId', () => {
+    const seriesColumnId = '1';
+    const columnId = `${seriesColumnId}2.1`;
+
+    const isEqual = isPercentileIdEqualToSeriesId(columnId, seriesColumnId);
+    expect(isEqual).toBeFalsy();
+  });
+});

src/plugins/vis_types/xy/public/utils/accessors.tsx

@@ -9,7 +9,7 @@
 import { AccessorFn, Accessor } from '@elastic/charts';
 import { BUCKET_TYPES } from '../../../../data/public';
 import { FakeParams } from '../../../../visualizations/public';
-import { Aspect } from '../types';
+import type { Aspect } from '../types';
 
 export const COMPLEX_X_ACCESSOR = '__customXAccessor__';
 export const COMPLEX_SPLIT_ACCESSOR = '__complexSplitAccessor__';
@@ -77,3 +77,11 @@ export const getSplitSeriesAccessorFnMap = (
 
   return m;
 };
+
+// For percentile, the aggregation id is coming in the form %s.%d, where %s is agg_id and %d - percents
+export const isPercentileIdEqualToSeriesId = (columnId: number | string, seriesColumnId: string) =>
+  columnId.toString().split('.')[0] === seriesColumnId;
+
+export const isValidSeriesForDimension = (seriesColumnId: string, { aggId, accessor }: Aspect) =>
+  (aggId === seriesColumnId || isPercentileIdEqualToSeriesId(aggId ?? '', seriesColumnId)) &&
+  accessor !== null;

src/plugins/vis_types/xy/public/utils/render_all_series.tsx

@@ -22,10 +22,10 @@ import {
 } from '@elastic/charts';
 
 import { DatatableRow } from '../../../../expressions/public';
-import { METRIC_TYPES } from '../../../../data/public';
 
 import { ChartType } from '../../common';
 import { SeriesParam, VisConfig } from '../types';
+import { isValidSeriesForDimension } from './accessors';
 
 /**
  * Matches vislib curve to elastic charts
@@ -82,17 +82,7 @@ export const renderAllSeries = (
       interpolate,
       type,
     }) => {
-      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;
-        }
-      });
+      const yAspects = aspects.y.filter((aspect) => isValidSeriesForDimension(paramId, aspect));
       if (!show || !yAspects.length) {
         return null;
       }