[XY] Support vis_dimension type for accessors

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

@@ -46,7 +46,7 @@ export const dataLayerConfigFunction: ExpressionFunctionDefinition<
       }),
     },
     xAccessor: {
-      types: ['string'],
+      types: ['string', 'vis_dimension'],
       help: i18n.translate('expressionXY.dataLayer.xAccessor.help', {
         defaultMessage: 'X-axis',
       }),
@@ -80,13 +80,13 @@ export const dataLayerConfigFunction: ExpressionFunctionDefinition<
       default: YScaleTypes.LINEAR,
     },
     splitAccessor: {
-      types: ['string'],
+      types: ['string', 'vis_dimension'],
       help: i18n.translate('expressionXY.dataLayer.splitAccessor.help', {
         defaultMessage: 'The column to split by',
       }),
     },
     accessors: {
-      types: ['string'],
+      types: ['string', 'vis_dimension'],
       help: i18n.translate('expressionXY.dataLayer.accessors.help', {
         defaultMessage: 'The columns to display on the y axis.',
       }),

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

@@ -32,7 +32,7 @@ export const referenceLineLayerConfigFunction: ExpressionFunctionDefinition<
       }),
     },
     accessors: {
-      types: ['string'],
+      types: ['string', 'vis_dimension'],
       help: i18n.translate('expressionXY.referenceLineLayer.accessors.help', {
         defaultMessage: 'The columns to display on the y axis.',
       }),

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

@@ -26,7 +26,7 @@ export const yAxisConfigFunction: ExpressionFunctionDefinition<
   inputTypes: ['null'],
   args: {
     forAccessor: {
-      types: ['string'],
+      types: ['string', 'vis_dimension'],
       help: i18n.translate('expressionXY.yConfig.forAccessor.help', {
         defaultMessage: 'The accessor this configuration is for',
       }),

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

@@ -8,6 +8,7 @@
 
 import { HorizontalAlignment, Position, VerticalAlignment } from '@elastic/charts';
 import { $Values } from '@kbn/utility-types';
+import type { ExpressionValueVisDimension } from '../../../../visualizations/public';
 import { Datatable } from '../../../../expressions';
 import { PaletteOutput } from '../../../../charts/common';
 import { EventAnnotationOutput } from '../../../../event_annotation/common';
@@ -70,7 +71,7 @@ export interface AxisConfig {
 }
 
 export interface YConfig {
-  forAccessor: string;
+  forAccessor: string | ExpressionValueVisDimension;
   axisMode?: YAxisMode;
   color?: string;
   icon?: string;
@@ -87,11 +88,11 @@ export interface ValidLayer extends DataLayerConfigResult {
 
 export interface DataLayerArgs {
   layerId: string;
-  accessors: string[];
+  accessors: Array<string | ExpressionValueVisDimension>;
   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;
@@ -192,7 +193,7 @@ export type AnnotationLayerConfigResult = AnnotationLayerArgs & {
 
 export interface ReferenceLineLayerArgs {
   layerId: string;
-  accessors: string[];
+  accessors: Array<string | ExpressionValueVisDimension>;
   columnToLabel?: string;
   yConfig?: YConfigResult[];
 }

src/plugins/chart_expressions/expression_xy/kibana.json

@@ -11,5 +11,6 @@
   "ui": true,
   "requiredPlugins": ["expressions", "charts", "data", "fieldFormats", "uiActions", "eventAnnotation", "visualizations"],
   "requiredBundles": ["kibanaReact"],
-  "optionalPlugins": []
+  "optionalPlugins": [],
+  "extraPublicDirs": ["common"]
 }

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

@@ -8,6 +8,10 @@
 
 import React from 'react';
 import type { LegendAction, XYChartSeriesIdentifier } from '@elastic/charts';
+import {
+  getAccessorByDimension,
+  getFormatByAccessor,
+} from '../../../../../plugins/visualizations/common/utils';
 import type { FilterEvent } from '../types';
 import type { LensMultiTable, DataLayerArgs } from '../../common';
 import type { FormatFactory } from '../types';
@@ -23,19 +27,23 @@ export const getLegendAction = (
   React.memo(({ series: [xySeries] }) => {
     const series = xySeries as XYChartSeriesIdentifier;
     const layer = filteredLayers.find((l) =>
-      series.seriesKeys.some((key: string | number) => l.accessors.includes(key.toString()))
+      series.seriesKeys.some((key: string | number) =>
+        l.accessors.some(
+          (accessor) =>
+            getAccessorByDimension(accessor, tables[l.layerId].columns) === key.toString()
+        )
+      )
     );
 
     if (!layer || !layer.splitAccessor) {
       return null;
     }
 
     const splitLabel = series.seriesKeys[0] as string;
-    const accessor = layer.splitAccessor;
 
     const table = tables[layer.layerId];
-    const splitColumn = table.columns.find(({ id }) => id === layer.splitAccessor);
-    const formatter = formatFactory(splitColumn && splitColumn.meta?.params);
+    const accessor = getAccessorByDimension(layer.splitAccessor, table.columns);
+    const formatter = formatFactory(getFormatByAccessor(layer.splitAccessor, table.columns));
 
     const rowIndex = table.rows.findIndex((row) => {
       if (layersAlreadyFormatted[accessor]) {

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

@@ -12,6 +12,7 @@ import React from 'react';
 import { groupBy } from 'lodash';
 import { RectAnnotation, AnnotationDomainType, LineAnnotation, Position } from '@elastic/charts';
 import { euiLightVars } from '@kbn/ui-theme';
+import { getAccessorByDimension } from '../../../../../plugins/visualizations/common/utils';
 import type { FieldFormat } from '../../../../field_formats/common';
 import type { IconPosition, ReferenceLineLayerArgs, YAxisMode } from '../../common/types';
 import type { LensMultiTable } from '../../common/types';
@@ -120,7 +121,9 @@ export const ReferenceLineAnnotations = ({
         const row = table.rows[0];
 
         const yConfigByValue = yConfigs.sort(
-          ({ forAccessor: idA }, { forAccessor: idB }) => row[idA] - row[idB]
+          ({ forAccessor: idA }, { forAccessor: idB }) =>
+            row[getAccessorByDimension(idA, table.columns)] -
+            row[getAccessorByDimension(idB, table.columns)]
         );
 
         const groupedByDirection = groupBy(yConfigByValue, 'fill');
@@ -137,6 +140,8 @@ export const ReferenceLineAnnotations = ({
               ? 'right'
               : 'left';
 
+          const forAccessor = getAccessorByDimension(yConfig.forAccessor, table.columns);
+
           const formatter = formatters[groupId || 'bottom'];
 
           const defaultColor = euiLightVars.euiColorDarkShade;
@@ -194,12 +199,12 @@ export const ReferenceLineAnnotations = ({
           annotations.push(
             <LineAnnotation
               {...props}
-              id={`${layerId}-${yConfig.forAccessor}-line`}
-              key={`${layerId}-${yConfig.forAccessor}-line`}
+              id={`${layerId}-${forAccessor}-line`}
+              key={`${layerId}-${forAccessor}-line`}
               dataValues={table.rows.map(() => ({
-                dataValue: row[yConfig.forAccessor],
-                header: columnToLabelMap[yConfig.forAccessor],
-                details: formatter?.convert(row[yConfig.forAccessor]) || row[yConfig.forAccessor],
+                dataValue: row[forAccessor],
+                header: columnToLabelMap[forAccessor],
+                details: formatter?.convert(row[forAccessor]) || row[forAccessor],
               }))}
               domainType={
                 yConfig.axisMode === 'bottom'
@@ -218,42 +223,46 @@ export const ReferenceLineAnnotations = ({
           if (yConfig.fill && yConfig.fill !== 'none') {
             const isFillAbove = yConfig.fill === 'above';
             const indexFromSameType = groupedByDirection[yConfig.fill].findIndex(
-              ({ forAccessor }) => forAccessor === yConfig.forAccessor
+              (yConfigResult) =>
+                getAccessorByDimension(yConfigResult.forAccessor, table.columns) === forAccessor
             );
             const shouldCheckNextReferenceLine =
               indexFromSameType < groupedByDirection[yConfig.fill].length - 1;
             annotations.push(
               <RectAnnotation
                 {...props}
-                id={`${layerId}-${yConfig.forAccessor}-rect`}
-                key={`${layerId}-${yConfig.forAccessor}-rect`}
+                id={`${layerId}-${forAccessor}-rect`}
+                key={`${layerId}-${forAccessor}-rect`}
                 dataValues={table.rows.map(() => {
                   const nextValue = shouldCheckNextReferenceLine
-                    ? row[groupedByDirection[yConfig.fill!][indexFromSameType + 1].forAccessor]
+                    ? row[
+                        getAccessorByDimension(
+                          groupedByDirection[yConfig.fill!][indexFromSameType + 1].forAccessor,
+                          table.columns
+                        )
+                      ]
                     : undefined;
                   if (yConfig.axisMode === 'bottom') {
                     return {
                       coordinates: {
-                        x0: isFillAbove ? row[yConfig.forAccessor] : nextValue,
+                        x0: isFillAbove ? row[forAccessor] : nextValue,
                         y0: undefined,
-                        x1: isFillAbove ? nextValue : row[yConfig.forAccessor],
+                        x1: isFillAbove ? nextValue : row[forAccessor],
                         y1: undefined,
                       },
-                      header: columnToLabelMap[yConfig.forAccessor],
-                      details:
-                        formatter?.convert(row[yConfig.forAccessor]) || row[yConfig.forAccessor],
+                      header: columnToLabelMap[forAccessor],
+                      details: formatter?.convert(row[forAccessor]) || row[forAccessor],
                     };
                   }
                   return {
                     coordinates: {
                       x0: undefined,
-                      y0: isFillAbove ? row[yConfig.forAccessor] : nextValue,
+                      y0: isFillAbove ? row[forAccessor] : nextValue,
                       x1: undefined,
-                      y1: isFillAbove ? nextValue : row[yConfig.forAccessor],
+                      y1: isFillAbove ? nextValue : row[forAccessor],
                     },
-                    header: columnToLabelMap[yConfig.forAccessor],
-                    details:
-                      formatter?.convert(row[yConfig.forAccessor]) || row[yConfig.forAccessor],
+                    header: columnToLabelMap[forAccessor],
+                    details: formatter?.convert(row[forAccessor]) || row[forAccessor],
                   };
                 })}
                 style={{

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

@@ -12,6 +12,10 @@ import moment from 'moment';
 import { Endzones } from '../../../../../plugins/charts/public';
 import type { LensMultiTable, DataLayerArgs } from '../../common';
 import { search } from '../../../../../plugins/data/public';
+import {
+  getColumnByAccessor,
+  getAccessorByDimension,
+} from '../../../../../plugins/visualizations/common/utils';
 
 export interface XDomain {
   min?: number;
@@ -23,7 +27,9 @@ export const getAppliedTimeRange = (layers: DataLayerArgs[], data: LensMultiTabl
   return Object.entries(data.tables)
     .map(([tableId, table]) => {
       const layer = layers.find((l) => l.layerId === tableId);
-      const xColumn = table.columns.find((col) => col.id === layer?.xAccessor);
+      const xColumn = layer?.xAccessor
+        ? getColumnByAccessor(layer?.xAccessor, table.columns)
+        : null;
       const timeRange =
         xColumn && search.aggs.getDateHistogramMetaDataByDatatableColumn(xColumn)?.timeRange;
       if (timeRange) {
@@ -59,9 +65,12 @@ export const getXDomain = (
   if (isHistogram && isFullyQualified(baseDomain)) {
     const xValues = uniq(
       layers
-        .flatMap((layer) =>
-          data.tables[layer.layerId].rows.map((row) => row[layer.xAccessor!].valueOf() as number)
-        )
+        .flatMap((layer) => {
+          const xAccessor =
+            layer.xAccessor &&
+            getAccessorByDimension(layer.xAccessor, data.tables[layer.layerId].columns);
+          return data.tables[layer.layerId].rows.map((row) => row[xAccessor!].valueOf() as number);
+        })
         .sort()
     );