[XY] Allow multiple split accessors (#134566)

* Fixed types and imports

* Fixed handlers.inspectorAdapters.tables.logDatatable

* Fixed logDatatable

* Translations fixed.

* Fixed "Visualize App ... cleans filters and query" test.

cleans filters and query

* Fixed "lens disable auto-apply tests" test.

* Updated dashboard tests.

* Fixed translations.

* Expression tests fixed.

* Cleaned up expression_xy.

* cleaned up lens xy_visualization.

* fixed more tests.

* Fix of tsvb.

* Fixed more tests.

* Fixed xy chart limits.

* Fixed new tests.

* Fixed types.

* Added extended layers expressions.

* Added support of tables at layers.

* Fixed tests.

* Fixed more tests.

* Fixed lens types.

* Added tables to layers.

* Checks fixed.

* updated tests.

* Fixed types.

* First try to fix merge conflicts.

* Fixed annotatations.

* Fixed types.

* Updated snapshots

* Fixed tests.

* Fixed dependencies.

* Fixed i18n.

* Moved XY state types to lens.

* Fixed more types.

* Update src/plugins/chart_expressions/expression_xy/README.md

Co-authored-by: Marta Bondyra <marta.bondyra@gmail.com>

* [CI] Auto-commit changed files from 'node scripts/build_plugin_list_docs'

* Removed yConfig from *Layers types

* Fixed styles.

* Fixed types.

* Removed not used utils and styles.

* Fixed types and tests.

* updated size.

* Added right behavior, related to the tables, comming from the expression.

* Fixed reference lines.

* Fixed jsdoc.

* Added annotations to layeredXyVIs.

* Fixed limits.

* Refactored the implementation to be reusable.

* Fixed undefined layers.

* Fixed empty arrays problems.

* Fixed input translations and removed not used arguments.

* Add 'axis' arg

* Fixed missing required args error, and added required to arguments.

* Simplified expression configuration.

* Added strict to all the expressions.

* refactored code, according to the nit.

* Some fixes

* [CI] Auto-commit changed files from 'node scripts/eslint --no-cache --fix'

* Fix CI

* Fix checks

* Fix some lint errors

* Some fixes

* Moved dataLayer to the separate component.

* Fixed jest tests.

* Fixed tests.

* Refactored dataLayers helpers and xy_chart.

* Some refacroting

* Fix types

* More fixes of the expression

Added extendedYConfig for dataLayers.
Added yConfig for referenceLineLayers.
Fixed undefined id at tooltip.

* Some fixes

* Fixed tests and snapshots.

* Icons at annotations and reference lines are strict.

* Fix CI

* axis extent validation added.

* Added checks to the legend config.

* fillOpacity usage validation is added.

* Fixed valueLabels argument options. Removed not used. Added validation for usage.

* Removed not used tests and imports.

* Fixed valueLabels and added migrations.

* Fixed type checks.

* Added test for the migrations.

* Fixed imports.

* Fixed types

* Fixed i18n checks.

# Conflicts:
#	src/plugins/chart_expressions/expression_xy/public/components/xy_chart.tsx

* Some updates

* Some refactoring

* [CI] Auto-commit changed files from 'node scripts/eslint --no-cache --fix'

* Fixed imports and types.

* [CI] Auto-commit changed files from 'node scripts/eslint --no-cache --fix'

* Fix tests and types

* Fix checks

* Remove unneeded imports

* Fix imports

* Fix imports

* [CI] Auto-commit changed files from 'node scripts/eslint --no-cache --fix'

* Update src/plugins/chart_expressions/expression_xy/common/expression_functions/extended_annotation_layer.ts

Co-authored-by: Marta Bondyra <marta.bondyra@gmail.com>

* Removed extra extends.

* Update src/plugins/chart_expressions/expression_xy/common/expression_functions/annotation_layer.ts

Co-authored-by: Marta Bondyra <marta.bondyra@gmail.com>

* Added guard.

* Fixed the code duplication.

* Removed table from the annotation layer.

* Changed the `convertActiveDataFromIndexesToLayers` location.

* Added tests for convertActiveDataFromIndexesToLayers

* Reduced the bundle size a little bit.

* Reused strings and args.

* Refactored expression functions. Added asynchronous behavior.

* Fixed tests.

* Updated limits.

* Updated the limit.

* Fixed types.

* fixed types.

* Turned back layerIds.

* Removed convertActiveData from Lens.

* Added test to the layerIds generator.

* Fixed types.

* Some fixes

* Fix checks

* Fix snapshots

* Fixed problems with resetting of the inspector.

* Fixed migrations.

* Removed types.

* Fix i18n

* Remove unused translations

* Remove unused xAxisId

* Removed tones of `areFormatted` calculations.

* Fixed `isTimeViz` and `isHistogramViz` by replacing filteredLayers with dataLayers.

* Removed referenceLineLayers from the `groupAxesByType` fn.

* Added validation to the layeredXyVis.

* Fixed extent validation.

* Removed comments.

* Reduced limit.

* Fix validation

* Fix test

* Some fixes after merging

* Fix types

* [CI] Auto-commit changed files from 'node scripts/eslint --no-cache --fix'

* Fix CI

* Fix translations

* Fix CI

* Some fixes after resolve conflicts

* Fix CI

* Some updates for reference lines

* [CI] Auto-commit changed files from 'node scripts/precommit_hook.js --ref HEAD~1..HEAD --fix'

* Fix translations

* Fix CI

* Fix types

* Add validations for axes and rename `axes` arg to `yAxisConfigs`

* Fix CI

* Rename yConfig to decorations

* Fix types and i18n

* [CI] Auto-commit changed files from 'node scripts/eslint --no-cache --fix'

* Fix lint

* Fix some nits

* Fix CI

* Fix CI

* Fix CI

* Refactoring auto assignment logic

* Add possibility to use multiple split accessors

* Some fixes after resolving merge conflicts

* [CI] Auto-commit changed files from 'node scripts/precommit_hook.js --ref HEAD~1..HEAD --fix'

* Fixed types

* Fix log datatable

* [CI] Auto-commit changed files from 'node scripts/eslint --no-cache --fix'

* Fixed snapshots

* Fixed lint

* Fixed comments

* Some fixes after resolving merge conflicts

* Fixed reference line position

* Fix nit

* Fixed CI

* [CI] Auto-commit changed files from 'node scripts/eslint --no-cache --fix'

* Fixed comments

* [CI] Auto-commit changed files from 'node scripts/eslint --no-cache --fix'

* fix some problems after resolving merge confilcts

* Fix snapshot

* Fix comments

* Fix performance issue

* Fix CI

* Fix performance part 2

* Fix legend actions

Co-authored-by: Yaroslav Kuznietsov <kuznetsov.yaroslav.yk@gmail.com>
Co-authored-by: Kibana Machine <42973632+kibanamachine@users.noreply.github.com>
Co-authored-by: Marta Bondyra <marta.bondyra@gmail.com>
Co-authored-by: Joe Reuter <johannes.reuter@elastic.co>

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,