[XY] xyVis and layeredXyVis.

packages/kbn-optimizer/limits.yml

@@ -124,7 +124,7 @@ pageLoadAssetSize:
   visTypeGauge: 24113
   unifiedSearch: 104869
   data: 454087
-  expressionXY: 26500
   eventAnnotation: 19334
   screenshotting: 22870
   synthetics: 40958
+  expressionXY: 29000

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

@@ -10,7 +10,7 @@ import { Position } from '@elastic/charts';
 import type { PaletteOutput } from '@kbn/coloring';
 import { Datatable, DatatableRow } from '@kbn/expressions-plugin';
 import { LayerTypes } from '../constants';
-import { DataLayerConfigResult, LensMultiTable, XYArgs } from '../types';
+import { DataLayerConfig, XYProps } from '../types';
 
 export const mockPaletteOutput: PaletteOutput = {
   type: 'palette',
@@ -46,9 +46,9 @@ export const createSampleDatatableWithRows = (rows: DatatableRow[]): Datatable =
   rows,
 });
 
-export const sampleLayer: DataLayerConfigResult = {
-  type: 'dataLayer',
+export const sampleLayer: DataLayerConfig = {
   layerId: 'first',
+  type: 'dataLayer',
   layerType: LayerTypes.DATA,
   seriesType: 'line',
   xAccessor: 'c',
@@ -59,9 +59,12 @@ export const sampleLayer: DataLayerConfigResult = {
   yScaleType: 'linear',
   isHistogram: false,
   palette: mockPaletteOutput,
+  table: createSampleDatatableWithRows([]),
 };
 
-export const createArgsWithLayers = (layers: DataLayerConfigResult[] = [sampleLayer]): XYArgs => ({
+export const createArgsWithLayers = (
+  layers: DataLayerConfig | DataLayerConfig[] = sampleLayer
+): XYProps => ({
   xTitle: '',
   yTitle: '',
   yRightTitle: '',
@@ -104,25 +107,17 @@ export const createArgsWithLayers = (layers: DataLayerConfigResult[] = [sampleLa
     mode: 'full',
     type: 'axisExtentConfig',
   },
-  layers,
+  layers: Array.isArray(layers) ? layers : [layers],
 });
 
 export function sampleArgs() {
-  const data: LensMultiTable = {
-    type: 'lens_multitable',
-    tables: {
-      first: createSampleDatatableWithRows([
-        { a: 1, b: 2, c: 'I', d: 'Foo' },
-        { a: 1, b: 5, c: 'J', d: 'Bar' },
-      ]),
-    },
-    dateRange: {
-      fromDate: new Date('2019-01-02T05:00:00.000Z'),
-      toDate: new Date('2019-01-03T05:00:00.000Z'),
-    },
-  };
-
-  const args: XYArgs = createArgsWithLayers();
+  const data = createSampleDatatableWithRows([
+    { a: 1, b: 2, c: 'I', d: 'Foo' },
+    { a: 1, b: 5, c: 'J', d: 'Bar' },
+  ]);
 
-  return { data, args };
+  return {
+    data,
+    args: createArgsWithLayers({ ...sampleLayer, table: data }),
+  };
 }

src/plugins/chart_expressions/expression_xy/common/constants.ts

@@ -7,16 +7,21 @@
  */
 
 export const XY_VIS = 'xyVis';
+export const LAYERED_XY_VIS = 'layeredXyVis';
 export const Y_CONFIG = 'yConfig';
+export const EXTENDED_Y_CONFIG = 'extendedYConfig';
 export const MULTITABLE = 'lens_multitable';
 export const DATA_LAYER = 'dataLayer';
+export const EXTENDED_DATA_LAYER = 'extendedDataLayer';
 export const LEGEND_CONFIG = 'legendConfig';
 export const XY_VIS_RENDERER = 'xyVis';
 export const GRID_LINES_CONFIG = 'gridlinesConfig';
 export const ANNOTATION_LAYER = 'annotationLayer';
+export const EXTENDED_ANNOTATION_LAYER = 'extendedAnnotationLayer';
 export const TICK_LABELS_CONFIG = 'tickLabelsConfig';
 export const AXIS_EXTENT_CONFIG = 'axisExtentConfig';
 export const REFERENCE_LINE_LAYER = 'referenceLineLayer';
+export const EXTENDED_REFERENCE_LINE_LAYER = 'extendedReferenceLineLayer';
 export const LABELS_ORIENTATION_CONFIG = 'labelsOrientationConfig';
 export const AXIS_TITLES_VISIBILITY_CONFIG = 'axisTitlesVisibilityConfig';
 
@@ -106,6 +111,23 @@ export const XYCurveTypes = {
 
 export const ValueLabelModes = {
   HIDE: 'hide',
-  INSIDE: 'inside',
-  OUTSIDE: 'outside',
+  SHOW: 'show',
+} as const;
+
+export const AvailableReferenceLineIcons = {
+  EMPTY: 'empty',
+  ASTERISK: 'asterisk',
+  ALERT: 'alert',
+  BELL: 'bell',
+  BOLT: 'bolt',
+  BUG: 'bug',
+  CIRCLE: 'circle',
+  EDITOR_COMMENT: 'editorComment',
+  FLAG: 'flag',
+  HEART: 'heart',
+  MAP_MARKER: 'mapMarker',
+  PIN_FILLED: 'pinFilled',
+  STAR_EMPTY: 'starEmpty',
+  TAG: 'tag',
+  TRIANGLE: 'triangle',
 } as const;

src/plugins/chart_expressions/expression_xy/common/expression_functions/annotation_layer_config.ts → src/plugins/chart_expressions/expression_xy/common/expression_functions/annotation_layer.ts

@@ -6,42 +6,40 @@
  * Side Public License, v 1.
  */
 
-import type { ExpressionFunctionDefinition } from '@kbn/expressions-plugin/common';
+import type { Datatable, ExpressionFunctionDefinition } from '@kbn/expressions-plugin/common';
 import { LayerTypes, ANNOTATION_LAYER } from '../constants';
 import { AnnotationLayerArgs, AnnotationLayerConfigResult } from '../types';
+import { strings } from '../i18n';
 
-export function annotationLayerConfigFunction(): ExpressionFunctionDefinition<
+export function annotationLayerFunction(): ExpressionFunctionDefinition<
   typeof ANNOTATION_LAYER,
-  null,
+  Datatable,
   AnnotationLayerArgs,
   AnnotationLayerConfigResult
 > {
   return {
     name: ANNOTATION_LAYER,
     aliases: [],
     type: ANNOTATION_LAYER,
-    inputTypes: ['null'],
-    help: 'Annotation layer in lens',
+    inputTypes: ['datatable'],
+    help: strings.getAnnotationLayerFnHelp(),
     args: {
-      layerId: {
-        types: ['string'],
-        help: '',
-      },
       hide: {
         types: ['boolean'],
         default: false,
-        help: 'Show details',
+        help: strings.getAnnotationLayerHideHelp(),
       },
       annotations: {
         types: ['manual_point_event_annotation', 'manual_range_event_annotation'],
-        help: '',
+        help: strings.getAnnotationLayerAnnotationsHelp(),
         multi: true,
       },
     },
     fn: (input, args) => {
       return {
         type: ANNOTATION_LAYER,
         ...args,
+        annotations: args.annotations ?? [],
         layerType: LayerTypes.ANNOTATIONS,
       };
     },

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

@@ -11,6 +11,13 @@ import type { ExpressionFunctionDefinition } from '@kbn/expressions-plugin/commo
 import { AxisExtentConfig, AxisExtentConfigResult } from '../types';
 import { AxisExtentModes, AXIS_EXTENT_CONFIG } from '../constants';
 
+const errors = {
+  upperBoundLowerOrEqualToLowerBoundError: () =>
+    i18n.translate('expressionXY.reusable.function.axisExtentConfig.errors.emptyUpperBound', {
+      defaultMessage: 'Upper bound should be greater than lower bound, if custom mode is enabled.',
+    }),
+};
+
 export const axisExtentConfigFunction: ExpressionFunctionDefinition<
   typeof AXIS_EXTENT_CONFIG,
   null,
@@ -27,10 +34,12 @@ export const axisExtentConfigFunction: ExpressionFunctionDefinition<
   args: {
     mode: {
       types: ['string'],
-      options: [...Object.values(AxisExtentModes)],
       help: i18n.translate('expressionXY.axisExtentConfig.extentMode.help', {
         defaultMessage: 'The extent mode',
       }),
+      options: [...Object.values(AxisExtentModes)],
+      strict: true,
+      default: AxisExtentModes.FULL,
     },
     lowerBound: {
       types: ['number'],
@@ -46,6 +55,16 @@ export const axisExtentConfigFunction: ExpressionFunctionDefinition<
     },
   },
   fn(input, args) {
+    if (args.mode === AxisExtentModes.CUSTOM) {
+      if (
+        args.lowerBound !== undefined &&
+        args.upperBound !== undefined &&
+        args.lowerBound >= args.upperBound
+      ) {
+        throw new Error(errors.upperBoundLowerOrEqualToLowerBoundError());
+      }
+    }
+
     return {
       type: AXIS_EXTENT_CONFIG,
       ...args,

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

@@ -0,0 +1,72 @@
+/*
+ * 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 { SeriesTypes, XScaleTypes, YScaleTypes, Y_CONFIG } from '../constants';
+import { strings } from '../i18n';
+import { DataLayerFn, ExtendedDataLayerFn } from '../types';
+
+type CommonDataLayerFn = DataLayerFn | ExtendedDataLayerFn;
+
+export const commonDataLayerArgs: CommonDataLayerFn['args'] = {
+  hide: {
+    types: ['boolean'],
+    default: false,
+    help: strings.getHideHelp(),
+  },
+  xAccessor: {
+    types: ['string'],
+    help: strings.getXAccessorHelp(),
+  },
+  seriesType: {
+    types: ['string'],
+    options: [...Object.values(SeriesTypes)],
+    help: strings.getSeriesTypeHelp(),
+    required: true,
+    strict: true,
+  },
+  xScaleType: {
+    options: [...Object.values(XScaleTypes)],
+    help: strings.getXScaleTypeHelp(),
+    default: XScaleTypes.ORDINAL,
+    strict: true,
+  },
+  isHistogram: {
+    types: ['boolean'],
+    default: false,
+    help: strings.getIsHistogramHelp(),
+  },
+  yScaleType: {
+    options: [...Object.values(YScaleTypes)],
+    help: strings.getYScaleTypeHelp(),
+    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(),
+    multi: true,
+  },
+  columnToLabel: {
+    types: ['string'],
+    help: strings.getColumnToLabelHelp(),
+  },
+  palette: {
+    types: ['palette', 'system_palette'],
+    help: strings.getPaletteHelp(),
+    default: '{palette}',
+  },
+};

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

@@ -0,0 +1,30 @@
+/*
+ * 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 { EXTENDED_Y_CONFIG } from '../constants';
+import { strings } from '../i18n';
+import { ReferenceLineLayerFn, ExtendedReferenceLineLayerFn } from '../types';
+
+type CommonReferenceLineLayerFn = ReferenceLineLayerFn | ExtendedReferenceLineLayerFn;
+
+export const commonReferenceLineLayerArgs: CommonReferenceLineLayerFn['args'] = {
+  accessors: {
+    types: ['string'],
+    help: strings.getRLAccessorsHelp(),
+    multi: true,
+  },
+  yConfig: {
+    types: [EXTENDED_Y_CONFIG],
+    help: strings.getRLYConfigHelp(),
+    multi: true,
+  },
+  columnToLabel: {
+    types: ['string'],
+    help: strings.getColumnToLabelHelp(),
+  },
+};