[XY] Allow multiple split accessors

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

@@ -54,7 +54,7 @@ export const sampleLayer: DataLayerConfig = {
   seriesType: 'line',
   xAccessor: 'c',
   accessors: ['a', 'b'],
-  splitAccessor: 'd',
+  splitAccessors: ['d'],
   columnToLabel: '{"a": "Label A", "b": "Label B", "d": "Label D"}',
   xScaleType: 'ordinal',
   isHistogram: false,
@@ -72,7 +72,7 @@ export const sampleExtendedLayer: ExtendedDataLayerConfig = {
   seriesType: 'line',
   xAccessor: 'c',
   accessors: ['a', 'b'],
-  splitAccessor: 'd',
+  splitAccessors: ['d'],
   columnToLabel: '{"a": "Label A", "b": "Label B", "d": "Label D"}',
   xScaleType: 'ordinal',
   isHistogram: false,

src/plugins/chart_expressions/expression_xy/common/expression_functions/extended_data_layer.test.ts

@@ -17,7 +17,7 @@ describe('extendedDataLayerConfig', () => {
     seriesType: 'line',
     xAccessor: 'c',
     accessors: ['a', 'b'],
-    splitAccessor: 'd',
+    splitAccessors: ['d'],
     xScaleType: 'linear',
     isHistogram: false,
     isHorizontal: false,

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

@@ -23,9 +23,10 @@ export const extendedDataLayerFunction: ExtendedDataLayerFn = {
       types: ['string'],
       help: strings.getXAccessorHelp(),
     },
-    splitAccessor: {
+    splitAccessors: {
       types: ['string'],
       help: strings.getSplitAccessorHelp(),
+      multi: true,
     },
     accessors: {
       types: ['string'],

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

@@ -23,7 +23,7 @@ export const extendedDataLayerFn: ExtendedDataLayerFn['fn'] = async (data, args,
   const accessors = getAccessors<string, ExtendedDataLayerArgs>(args, table);
 
   validateAccessor(accessors.xAccessor, table.columns);
-  validateAccessor(accessors.splitAccessor, table.columns);
+  accessors.splitAccessors?.forEach((accessor) => validateAccessor(accessor, table.columns));
   accessors.accessors.forEach((accessor) => validateAccessor(accessor, table.columns));
   validateMarkSizeForChartType(args.markSizeAccessor, args.seriesType);
   validateAccessor(args.markSizeAccessor, table.columns);

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

@@ -24,9 +24,10 @@ export const xyVisFunction: XyVisFn = {
       types: ['string', 'vis_dimension'],
       help: strings.getXAccessorHelp(),
     },
-    splitAccessor: {
+    splitAccessors: {
       types: ['string', 'vis_dimension'],
       help: strings.getSplitAccessorHelp(),
+      multi: true,
     },
     accessors: {
       types: ['string', 'vis_dimension'],

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

@@ -73,7 +73,7 @@ export const xyVisFn: XyVisFn['fn'] = async (data, args, handlers) => {
     accessors,
     xAccessor,
     hide,
-    splitAccessor,
+    splitAccessors,
     columnToLabel,
     xScaleType,
     isHistogram,
@@ -96,7 +96,7 @@ export const xyVisFn: XyVisFn['fn'] = async (data, args, handlers) => {
   const dataLayers: DataLayerConfigResult[] = [createDataLayer({ ...args, showLines }, data)];
 
   validateAccessor(dataLayers[0].xAccessor, data.columns);
-  validateAccessor(dataLayers[0].splitAccessor, data.columns);
+  dataLayers[0].splitAccessors?.forEach((accessor) => validateAccessor(accessor, data.columns));
   dataLayers[0].accessors.forEach((accessor) => validateAccessor(accessor, data.columns));
 
   validateMarkSizeForChartType(dataLayers[0].markSizeAccessor, args.seriesType);

src/plugins/chart_expressions/expression_xy/common/helpers/layers.ts

@@ -46,22 +46,30 @@ export function getDataLayers(layers: XYExtendedLayerConfigResult[]) {
 
 export function getAccessors<
   T,
-  U extends { splitAccessor?: T; xAccessor?: T; accessors: T[]; markSizeAccessor?: T }
+  U extends { splitAccessors?: T[]; xAccessor?: T; accessors: T[]; markSizeAccessor?: T }
 >(args: U, table: Datatable) {
-  let splitAccessor: T | string | undefined = args.splitAccessor;
+  let splitAccessors: Array<T | string> | undefined = args.splitAccessors;
   let xAccessor: T | string | undefined = args.xAccessor;
   let accessors: Array<T | string> = args.accessors ?? [];
   let markSizeAccessor: T | string | undefined = args.markSizeAccessor;
 
-  if (!splitAccessor && !xAccessor && !(accessors && accessors.length) && !markSizeAccessor) {
+  if (
+    !(splitAccessors && splitAccessors.length) &&
+    !xAccessor &&
+    !(accessors && accessors.length) &&
+    !markSizeAccessor
+  ) {
     const y = table.columns.find((column) => column.id === PointSeriesColumnNames.Y)?.id;
+    const splitColumnId = table.columns.find(
+      (column) => column.id === PointSeriesColumnNames.COLOR
+    )?.id;
     xAccessor = table.columns.find((column) => column.id === PointSeriesColumnNames.X)?.id;
-    splitAccessor = table.columns.find((column) => column.id === PointSeriesColumnNames.COLOR)?.id;
+    splitAccessors = splitColumnId ? [splitColumnId] : [];
     accessors = y ? [y] : [];
     markSizeAccessor = table.columns.find(
       (column) => column.id === PointSeriesColumnNames.SIZE
     )?.id;
   }
 
-  return { splitAccessor, xAccessor, accessors, markSizeAccessor };
+  return { splitAccessors, xAccessor, accessors, markSizeAccessor };
 }

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

@@ -116,7 +116,7 @@ export interface DataLayerArgs {
   seriesType: SeriesType;
   xAccessor?: string | ExpressionValueVisDimension;
   hide?: boolean;
-  splitAccessor?: string | ExpressionValueVisDimension;
+  splitAccessors?: Array<ExpressionValueVisDimension | string>;
   markSizeAccessor?: string | ExpressionValueVisDimension;
   lineWidth?: number;
   showPoints?: boolean;
@@ -142,7 +142,7 @@ export interface ExtendedDataLayerArgs {
   seriesType: SeriesType;
   xAccessor?: string;
   hide?: boolean;
-  splitAccessor?: string;
+  splitAccessors?: string[];
   markSizeAccessor?: string;
   lineWidth?: number;
   showPoints?: boolean;

src/plugins/chart_expressions/expression_xy/common/utils/log_datatables.ts

@@ -34,10 +34,10 @@ export const getLayerDimensions = (
   layer: CommonXYDataLayerConfig | ReferenceLineLayerConfig
 ): Dimension[] => {
   let xAccessor;
-  let splitAccessor;
+  let splitAccessors;
   if (layer.layerType === LayerTypes.DATA) {
     xAccessor = layer.xAccessor;
-    splitAccessor = layer.splitAccessor;
+    splitAccessors = layer.splitAccessors;
   }
 
   const { accessors, layerType } = layer;
@@ -47,6 +47,6 @@ export const getLayerDimensions = (
       layerType === LayerTypes.DATA ? strings.getMetricHelp() : strings.getReferenceLineHelp(),
     ],
     [xAccessor ? [xAccessor] : undefined, strings.getXAxisHelp()],
-    [splitAccessor ? [splitAccessor] : undefined, strings.getBreakdownHelp()],
+    [splitAccessors ? splitAccessors : undefined, strings.getBreakdownHelp()],
   ];
 };

src/plugins/chart_expressions/expression_xy/public/__mocks__/index.tsx

@@ -171,7 +171,7 @@ export const dateHistogramLayer: DataLayerConfig = {
   isStacked: true,
   isPercentage: false,
   isHorizontal: false,
-  splitAccessor: 'splitAccessorId',
+  splitAccessors: ['splitAccessorId'],
   seriesType: 'bar',
   accessors: ['yAccessorId'],
   palette: mockPaletteOutput,

src/plugins/chart_expressions/expression_xy/public/components/data_layers.tsx

@@ -74,7 +74,7 @@ export const DataLayers: FC<Props> = ({
   chartHasMoreThanOneBarSeries,
   defaultXScaleType,
 }) => {
-  const colorAssignments = getColorAssignments(layers, formatFactory);
+  const colorAssignments = getColorAssignments(layers, formatFactory, titles);
   return (
     <>
       {layers.flatMap((layer) =>

src/plugins/chart_expressions/expression_xy/public/components/legend_action.test.tsx

@@ -17,6 +17,7 @@ import { LayerTypes } from '../../common/constants';
 import { getLegendAction } from './legend_action';
 import { LegendActionPopover } from './legend_action_popover';
 import { mockPaletteOutput } from '../../common/__mocks__';
+import { FormatFactory } from '../types';
 
 const table: Datatable = {
   type: 'datatable',
@@ -163,20 +164,33 @@ const sampleLayer: DataLayerConfig = {
   showLines: true,
   xAccessor: 'c',
   accessors: ['a', 'b'],
-  splitAccessor: 'splitAccessorId',
+  splitAccessors: ['splitAccessorId'],
   columnToLabel: '{"a": "Label A", "b": "Label B", "d": "Label D"}',
   xScaleType: 'ordinal',
   isHistogram: false,
   palette: mockPaletteOutput,
   table,
 };
 
+const formatFactory = (() =>
+  ({
+    convert(x: unknown) {
+      return x;
+    },
+  } as unknown)) as FormatFactory;
+
 describe('getLegendAction', function () {
   let wrapperProps: LegendActionProps;
   const Component: ComponentType<LegendActionProps> = getLegendAction(
     [sampleLayer],
     jest.fn(),
-    jest.fn(),
+    formatFactory,
+    {
+      first: {
+        table,
+        formattedColumns: {},
+      },
+    },
     {}
   );
   let wrapper: ReactWrapper<LegendActionProps>;
@@ -188,6 +202,7 @@ describe('getLegendAction', function () {
       series: [
         {
           seriesKeys: ["Women's Accessories", 'test'],
+          splitAccessors: new Map().set('splitAccessorId', "Women's Accessories"),
         },
       ] as unknown as SeriesIdentifier[],
     };
@@ -205,6 +220,7 @@ describe('getLegendAction', function () {
       series: [
         {
           seriesKeys: ['test', 'b'],
+          splitAccessors: new Map().set('splitAccessorId', 'test'),
         },
       ] as unknown as SeriesIdentifier[],
     };
@@ -219,12 +235,15 @@ describe('getLegendAction', function () {
       series: [
         {
           seriesKeys: ["Women's Accessories", 'b'],
+          splitAccessors: new Map().set('splitAccessorId', "Women's Accessories"),
         },
       ] as unknown as SeriesIdentifier[],
     };
     wrapper = mountWithIntl(<Component {...newProps} />);
     expect(wrapper.find(EuiPopover).length).toBe(1);
-    expect(wrapper.find(EuiPopover).prop('title')).toEqual("Women's Accessories, filter options");
+    expect(wrapper.find(EuiPopover).prop('title')).toEqual(
+      "Women's Accessories - Label B, filter options"
+    );
     expect(wrapper.find(LegendActionPopover).prop('context')).toEqual({
       data: [
         {