[XY] Support vis_dimension type for accessors

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

@@ -16,16 +16,15 @@ type CommonDataLayerFnArgs = {
   [key in keyof CommonDataLayerArgs]: ArgumentType<CommonDataLayerArgs[key]>;
 };
 
-export const commonDataLayerArgs: CommonDataLayerFnArgs = {
+export const commonDataLayerArgs: Omit<
+  CommonDataLayerFnArgs,
+  'accessors' | 'xAccessor' | 'splitAccessor'
+> = {
   hide: {
     types: ['boolean'],
     default: false,
     help: strings.getHideHelp(),
   },
-  xAccessor: {
-    types: ['string'],
-    help: strings.getXAccessorHelp(),
-  },
   seriesType: {
     aliases: ['_'],
     types: ['string'],
@@ -51,15 +50,6 @@ export const commonDataLayerArgs: CommonDataLayerFnArgs = {
     default: YScaleTypes.LINEAR,
     strict: true,
   },
-  splitAccessor: {
-    types: ['string'],
-    help: strings.getSplitAccessorHelp(),
-  },
-  accessors: {
-    types: ['string'],
-    help: strings.getAccessorsHelp(),
-    multi: true,
-  },
   yConfig: {
     types: [Y_CONFIG],
     help: strings.getYConfigHelp(),

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

@@ -12,12 +12,7 @@ import { ReferenceLineLayerFn, ExtendedReferenceLineLayerFn } from '../types';
 
 type CommonReferenceLineLayerFn = ReferenceLineLayerFn | ExtendedReferenceLineLayerFn;
 
-export const commonReferenceLineLayerArgs: CommonReferenceLineLayerFn['args'] = {
-  accessors: {
-    types: ['string'],
-    help: strings.getRLAccessorsHelp(),
-    multi: true,
-  },
+export const commonReferenceLineLayerArgs: Omit<CommonReferenceLineLayerFn['args'], 'accessors'> = {
   yConfig: {
     types: [EXTENDED_Y_CONFIG],
     help: strings.getRLYConfigHelp(),

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

@@ -7,10 +7,9 @@
  */
 
 import { ExtendedDataLayerFn } from '../types';
-import { EXTENDED_DATA_LAYER, LayerTypes } from '../constants';
+import { EXTENDED_DATA_LAYER } from '../constants';
 import { strings } from '../i18n';
 import { commonDataLayerArgs } from './common_data_layer_args';
-import { getAccessors } from '../helpers';
 
 export const extendedDataLayerFunction: ExtendedDataLayerFn = {
   name: EXTENDED_DATA_LAYER,
@@ -20,6 +19,19 @@ export const extendedDataLayerFunction: ExtendedDataLayerFn = {
   inputTypes: ['datatable'],
   args: {
     ...commonDataLayerArgs,
+    xAccessor: {
+      types: ['string'],
+      help: strings.getXAccessorHelp(),
+    },
+    splitAccessor: {
+      types: ['string'],
+      help: strings.getSplitAccessorHelp(),
+    },
+    accessors: {
+      types: ['string'],
+      help: strings.getAccessorsHelp(),
+      multi: true,
+    },
     table: {
       types: ['datatable'],
       help: strings.getTableHelp(),
@@ -29,14 +41,8 @@ export const extendedDataLayerFunction: ExtendedDataLayerFn = {
       help: strings.getLayerIdHelp(),
     },
   },
-  fn(input, args) {
-    const table = args.table ?? input;
-    return {
-      type: EXTENDED_DATA_LAYER,
-      ...args,
-      ...getAccessors(args, table),
-      layerType: LayerTypes.DATA,
-      table,
-    };
+  async fn(input, args, context) {
+    const { extendedDataLayerFn } = await import('./extended_data_layer_fn');
+    return await extendedDataLayerFn(input, args, context);
   },
 };

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

@@ -0,0 +1,29 @@
+/*
+ * Copyright Elasticsearch B.V. and/or licensed to Elasticsearch B.V. under one
+ * or more contributor license agreements. Licensed under the Elastic License
+ * 2.0 and the Server Side Public License, v 1; you may not use this file except
+ * in compliance with, at your election, the Elastic License 2.0 or the Server
+ * Side Public License, v 1.
+ */
+
+import { validateAccessor } from '@kbn/visualizations-plugin/common/utils';
+import { ExtendedDataLayerArgs, ExtendedDataLayerFn } from '../types';
+import { EXTENDED_DATA_LAYER, LayerTypes } from '../constants';
+import { getAccessors } from '../helpers';
+
+export const extendedDataLayerFn: ExtendedDataLayerFn['fn'] = async (data, args, context) => {
+  const table = args.table ?? data;
+  const accessors = getAccessors<string, ExtendedDataLayerArgs>(args, table);
+
+  validateAccessor(accessors.xAccessor, table.columns);
+  validateAccessor(accessors.splitAccessor, table.columns);
+  accessors.accessors.forEach((accessor) => validateAccessor(accessor, table.columns));
+
+  return {
+    type: EXTENDED_DATA_LAYER,
+    ...args,
+    layerType: LayerTypes.DATA,
+    ...accessors,
+    table,
+  };
+};

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

@@ -6,6 +6,7 @@
  * Side Public License, v 1.
  */
 
+import { validateAccessor } from '@kbn/visualizations-plugin/common/utils';
 import { LayerTypes, EXTENDED_REFERENCE_LINE_LAYER } from '../constants';
 import { ExtendedReferenceLineLayerFn } from '../types';
 import { strings } from '../i18n';
@@ -19,6 +20,11 @@ export const extendedReferenceLineLayerFunction: ExtendedReferenceLineLayerFn =
   inputTypes: ['datatable'],
   args: {
     ...commonReferenceLineLayerArgs,
+    accessors: {
+      types: ['string'],
+      help: strings.getRLAccessorsHelp(),
+      multi: true,
+    },
     table: {
       types: ['datatable'],
       help: strings.getTableHelp(),
@@ -29,12 +35,16 @@ export const extendedReferenceLineLayerFunction: ExtendedReferenceLineLayerFn =
     },
   },
   fn(input, args) {
+    const table = args.table ?? input;
+    const accessors = args.accessors ?? [];
+    accessors.forEach((accessor) => validateAccessor(accessor, table.columns));
+
     return {
       type: EXTENDED_REFERENCE_LINE_LAYER,
       ...args,
       accessors: args.accessors ?? [],
       layerType: LayerTypes.REFERENCELINE,
-      table: args.table ?? input,
+      table,
     };
   },
 };

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

@@ -6,6 +6,7 @@
  * Side Public License, v 1.
  */
 
+import { validateAccessor } from '@kbn/visualizations-plugin/common/utils';
 import { LayerTypes, REFERENCE_LINE_LAYER } from '../constants';
 import { ReferenceLineLayerFn } from '../types';
 import { strings } from '../i18n';
@@ -17,13 +18,23 @@ export const referenceLineLayerFunction: ReferenceLineLayerFn = {
   type: REFERENCE_LINE_LAYER,
   help: strings.getRLHelp(),
   inputTypes: ['datatable'],
-  args: { ...commonReferenceLineLayerArgs },
+  args: {
+    ...commonReferenceLineLayerArgs,
+    accessors: {
+      types: ['string', 'vis_dimension'],
+      help: strings.getRLAccessorsHelp(),
+      multi: true,
+    },
+  },
   fn(table, args) {
+    const accessors = args.accessors ?? [];
+    accessors.forEach((accessor) => validateAccessor(accessor, table.columns));
+
     return {
       type: REFERENCE_LINE_LAYER,
       ...args,
-      accessors: args.accessors ?? [],
       layerType: LayerTypes.REFERENCELINE,
+      accessors,
       table,
     };
   },

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

@@ -20,6 +20,19 @@ export const xyVisFunction: XyVisFn = {
   args: {
     ...commonXYArgs,
     ...commonDataLayerArgs,
+    xAccessor: {
+      types: ['string', 'vis_dimension'],
+      help: strings.getXAccessorHelp(),
+    },
+    splitAccessor: {
+      types: ['string', 'vis_dimension'],
+      help: strings.getSplitAccessorHelp(),
+    },
+    accessors: {
+      types: ['string', 'vis_dimension'],
+      help: strings.getAccessorsHelp(),
+      multi: true,
+    },
     referenceLineLayers: {
       types: [REFERENCE_LINE_LAYER],
       help: strings.getReferenceLineLayerHelp(),

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

@@ -12,6 +12,7 @@ import {
   validateAccessor,
 } from '@kbn/visualizations-plugin/common/utils';
 import type { Datatable } from '@kbn/expressions-plugin/common';
+import { ExpressionValueVisDimension } from '@kbn/visualizations-plugin/common/expression_functions';
 import { LayerTypes, XY_VIS_RENDERER, DATA_LAYER } from '../constants';
 import { appendLayerIds, getAccessors } from '../helpers';
 import { DataLayerConfigResult, XYLayerConfig, XyVisFn, XYArgs } from '../types';
@@ -37,7 +38,7 @@ const createDataLayer = (args: XYArgs, table: Datatable): DataLayerConfigResult
   yConfig: args.yConfig,
   layerType: LayerTypes.DATA,
   table,
-  ...getAccessors(args, table),
+  ...getAccessors<string | ExpressionValueVisDimension, XYArgs>(args, table),
 });
 
 export const xyVisFn: XyVisFn['fn'] = async (data, args, handlers) => {
@@ -64,6 +65,10 @@ export const xyVisFn: XyVisFn['fn'] = async (data, args, handlers) => {
 
   const dataLayers: DataLayerConfigResult[] = [createDataLayer(args, data)];
 
+  validateAccessor(dataLayers[0].xAccessor, data.columns);
+  validateAccessor(dataLayers[0].splitAccessor, data.columns);
+  dataLayers[0].accessors.forEach((accessor) => validateAccessor(accessor, data.columns));
+
   const layers: XYLayerConfig[] = [
     ...appendLayerIds(dataLayers, 'dataLayers'),
     ...appendLayerIds(referenceLineLayers, 'referenceLineLayers'),

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

@@ -7,7 +7,7 @@
  */
 
 import { Datatable, PointSeriesColumnNames } from '@kbn/expressions-plugin/common';
-import { WithLayerId, DataLayerArgs } from '../types';
+import { WithLayerId } from '../types';
 
 function isWithLayerId<T>(layer: T): layer is T & WithLayerId {
   return (layer as T & WithLayerId).layerId ? true : false;
@@ -27,10 +27,13 @@ export function appendLayerIds<T>(
     }));
 }
 
-export function getAccessors(args: DataLayerArgs, table: Datatable) {
-  let splitAccessor = args.splitAccessor;
-  let xAccessor = args.xAccessor;
-  let accessors = args.accessors ?? [];
+export function getAccessors<T, U extends { splitAccessor?: T; xAccessor?: T; accessors: T[] }>(
+  args: U,
+  table: Datatable
+) {
+  let splitAccessor: T | string | undefined = args.splitAccessor;
+  let xAccessor: T | string | undefined = args.xAccessor;
+  let accessors: Array<T | string> = args.accessors ?? [];
   if (!splitAccessor && !xAccessor && !(accessors && accessors.length)) {
     const y = table.columns.find((column) => column.id === PointSeriesColumnNames.Y)?.id;
     xAccessor = table.columns.find((column) => column.id === PointSeriesColumnNames.X)?.id;

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

@@ -12,8 +12,7 @@ import type { PaletteOutput } from '@kbn/coloring';
 import { Datatable, ExpressionFunctionDefinition } from '@kbn/expressions-plugin';
 import { LegendSize } from '@kbn/visualizations-plugin/public';
 import { EventAnnotationOutput } from '@kbn/event-annotation-plugin/common';
-import { ExpressionValueVisDimension } from '@kbn/visualizations-plugin/common';
-
+import type { ExpressionValueVisDimension } from '@kbn/visualizations-plugin/common/expression_functions';
 import {
   AxisExtentModes,
   FillStyles,
@@ -96,11 +95,11 @@ export interface YConfig {
 }
 
 export interface DataLayerArgs {
-  accessors: string[];
+  accessors: Array<ExpressionValueVisDimension | string>;
   seriesType: SeriesType;
-  xAccessor?: string;
+  xAccessor?: string | ExpressionValueVisDimension;
   hide?: boolean;
-  splitAccessor?: string;
+  splitAccessor?: string | ExpressionValueVisDimension;
   columnToLabel?: string; // Actually a JSON key-value pair
   yScaleType: YScaleType;
   xScaleType: XScaleType;
@@ -276,7 +275,7 @@ export type ExtendedAnnotationLayerConfigResult = ExtendedAnnotationLayerArgs &
 };
 
 export interface ReferenceLineLayerArgs {
-  accessors: string[];
+  accessors: Array<ExpressionValueVisDimension | string>;
   columnToLabel?: string;
   yConfig?: ExtendedYConfigResult[];
 }
@@ -385,7 +384,7 @@ export type ExtendedDataLayerFn = ExpressionFunctionDefinition<
   typeof EXTENDED_DATA_LAYER,
   Datatable,
   ExtendedDataLayerArgs,
-  ExtendedDataLayerConfigResult
+  Promise<ExtendedDataLayerConfigResult>
 >;
 
 export type ReferenceLineLayerFn = ExpressionFunctionDefinition<

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

@@ -34,7 +34,6 @@ import type {
   CommonXYAnnotationLayerConfig,
   CollectiveConfig,
 } from '../../common';
-
 import { AnnotationIcon, hasIcon, Marker, MarkerBody } from '../helpers';
 import { mapVerticalToHorizontalPlacement, LINES_MARKER_SIZE } from '../helpers';
 

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

@@ -15,6 +15,8 @@ import {
 import React, { FC } from 'react';
 import { PaletteRegistry } from '@kbn/coloring';
 import { FormatFactory } from '@kbn/field-formats-plugin/common';
+import { getAccessorByDimension } from '@kbn/visualizations-plugin/common/utils';
+
 import {
   CommonXYDataLayerConfig,
   EndValue,
@@ -71,7 +73,8 @@ export const DataLayers: FC<Props> = ({
     <>
       {layers.flatMap((layer) =>
         layer.accessors.map((accessor, accessorIndex) => {
-          const { seriesType, columnToLabel, layerId } = layer;
+          const { seriesType, columnToLabel, layerId, table } = layer;
+          const yColumnId = getAccessorByDimension(accessor, table.columns);
           const columnToLabelMap: Record<string, string> = columnToLabel
             ? JSON.parse(columnToLabel)
             : {};
@@ -84,12 +87,12 @@ export const DataLayers: FC<Props> = ({
           const isPercentage = seriesType.includes('percentage');
 
           const yAxis = yAxesConfiguration.find((axisConfiguration) =>
-            axisConfiguration.series.find((currentSeries) => currentSeries.accessor === accessor)
+            axisConfiguration.series.find((currentSeries) => currentSeries.accessor === yColumnId)
           );
 
           const seriesProps = getSeriesProps({
             layer,
-            accessor,
+            accessor: yColumnId,
             chartHasMoreThanOneBarSeries,
             colorAssignments,
             formatFactory,

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

@@ -8,6 +8,7 @@
 
 import React from 'react';
 import type { LegendAction, XYChartSeriesIdentifier } from '@elastic/charts';
+import { getAccessorByDimension } from '@kbn/visualizations-plugin/common/utils';
 import type { FilterEvent } from '../types';
 import type { CommonXYDataLayerConfig } from '../../common';
 import type { FormatFactory } from '../types';
@@ -23,7 +24,11 @@ export const getLegendAction = (
   React.memo(({ series: [xySeries] }) => {
     const series = xySeries as XYChartSeriesIdentifier;
     const layerIndex = dataLayers.findIndex((l) =>
-      series.seriesKeys.some((key: string | number) => l.accessors.includes(key.toString()))
+      series.seriesKeys.some((key: string | number) =>
+        l.accessors.some(
+          (accessor) => getAccessorByDimension(accessor, l.table.columns) === key.toString()
+        )
+      )
     );
 
     if (layerIndex === -1) {
@@ -36,11 +41,12 @@ export const getLegendAction = (
     }
 
     const splitLabel = series.seriesKeys[0] as string;
-    const accessor = layer.splitAccessor;
 
     const { table } = layer;
-    const splitColumn = table.columns.find(({ id }) => id === layer.splitAccessor);
-    const formatter = formatFactory(splitColumn && getFormat(splitColumn.meta));
+    const accessor = getAccessorByDimension(layer.splitAccessor, table.columns);
+    const formatter = formatFactory(
+      accessor ? getFormat(table.columns, layer.splitAccessor) : undefined
+    );
 
     const rowIndex = table.rows.findIndex((row) => {
       if (formattedDatatables[layer.layerId]?.formattedColumns[accessor]) {