[XY] Add xExtent validation within expression (#134546)

* ✨ Add expression validation for xExtent * ✅ Add more tests
elastic · Jun 17, 2022 · 2dc48ff · 2dc48ff
1 parent 6decdc3
commit 2dc48ff
Show file tree

Hide file tree

Showing 6 changed files with 158 additions and 7 deletions.
diff --git a/src/plugins/chart_expressions/expression_xy/common/__mocks__/index.ts b/src/plugins/chart_expressions/expression_xy/common/__mocks__/index.ts
@@ -115,10 +115,6 @@ export const createArgsWithLayers = (
     yLeft: false,
     yRight: false,
   },
-  xExtent: {
-    mode: 'dataBounds',
-    type: 'axisExtentConfig',
-  },
   yLeftExtent: {
     mode: 'full',
     type: 'axisExtentConfig',

diff --git a/...t_expressions/expression_xy/common/expression_functions/__snapshots__/xy_vis.test.ts.snap b/...t_expressions/expression_xy/common/expression_functions/__snapshots__/xy_vis.test.ts.snap
diff --git a/src/plugins/chart_expressions/expression_xy/common/expression_functions/validate.ts b/src/plugins/chart_expressions/expression_xy/common/expression_functions/validate.ts
@@ -87,6 +87,14 @@ export const errors = {
     i18n.translate('expressionXY.reusable.function.xyVis.errors.dataBoundsForNotLineChartError', {
       defaultMessage: 'Only line charts can be fit to the data bounds',
     }),
+  extentFullModeIsInvalidError: () =>
+    i18n.translate('expressionXY.reusable.function.xyVis.errors.extentFullModeIsInvalid', {
+      defaultMessage: 'For x axis extent, the full mode is not supported.',
+    }),
+  extentModeNotSupportedError: () =>
+    i18n.translate('expressionXY.reusable.function.xyVis.errors.extentModeNotSupportedError', {
+      defaultMessage: 'X axis extent is only supported for numeric histograms.',
+    }),
   timeMarkerForNotTimeChartsError: () =>
     i18n.translate('expressionXY.reusable.function.xyVis.errors.timeMarkerForNotTimeChartsError', {
       defaultMessage: 'Only time charts can have current time marker',
@@ -136,6 +144,20 @@ export const validateExtentForDataBounds = (
   }
 };
 
+export const validateXExtent = (
+  extent: AxisExtentConfigResult | undefined,
+  dataLayers: Array<DataLayerConfigResult | CommonXYDataLayerConfig>
+) => {
+  if (extent) {
+    if (extent.mode === AxisExtentModes.FULL) {
+      throw new Error(errors.extentFullModeIsInvalidError());
+    }
+    if (isTimeChart(dataLayers) || dataLayers.every(({ isHistogram }) => !isHistogram)) {
+      throw new Error(errors.extentModeNotSupportedError());
+    }
+  }
+};
+
 export const validateExtent = (
   extent: AxisExtentConfigResult,
   hasBarOrArea: boolean,

diff --git a/src/plugins/chart_expressions/expression_xy/common/expression_functions/xy_vis.test.ts b/src/plugins/chart_expressions/expression_xy/common/expression_functions/xy_vis.test.ts
@@ -215,4 +215,129 @@ describe('xyVis', () => {
       )
     ).rejects.toThrowErrorMatchingSnapshot();
   });
+
+  test('throws the error if the x axis extent is enabled for a date histogram', async () => {
+    const {
+      data,
+      args: { layers, ...rest },
+    } = sampleArgs();
+    const { layerId, layerType, table, type, ...restLayerArgs } = sampleLayer;
+
+    expect(
+      xyVisFunction.fn(
+        data,
+        {
+          ...rest,
+          ...restLayerArgs,
+          referenceLines: [],
+          annotationLayers: [],
+          isHistogram: true,
+          xScaleType: 'time',
+          xExtent: { type: 'axisExtentConfig', mode: 'dataBounds' },
+        },
+        createMockExecutionContext()
+      )
+    ).rejects.toThrowErrorMatchingSnapshot();
+  });
+
+  test('throws the error if the x axis extent is enabled with the full mode', async () => {
+    const {
+      data,
+      args: { layers, ...rest },
+    } = sampleArgs();
+    const { layerId, layerType, table, type, ...restLayerArgs } = sampleLayer;
+
+    expect(
+      xyVisFunction.fn(
+        data,
+        {
+          ...rest,
+          ...restLayerArgs,
+          referenceLines: [],
+          annotationLayers: [],
+          xExtent: {
+            type: 'axisExtentConfig',
+            mode: 'full',
+            lowerBound: undefined,
+            upperBound: undefined,
+          },
+        },
+        createMockExecutionContext()
+      )
+    ).rejects.toThrowErrorMatchingSnapshot();
+  });
+
+  test('throws the error if the x axis extent is enabled without a histogram defined', async () => {
+    const {
+      data,
+      args: { layers, ...rest },
+    } = sampleArgs();
+    const { layerId, layerType, table, type, ...restLayerArgs } = sampleLayer;
+
+    expect(
+      xyVisFunction.fn(
+        data,
+        {
+          ...rest,
+          ...restLayerArgs,
+          referenceLines: [],
+          annotationLayers: [],
+          xExtent: {
+            type: 'axisExtentConfig',
+            mode: 'dataBounds',
+          },
+        },
+        createMockExecutionContext()
+      )
+    ).rejects.toThrowErrorMatchingSnapshot();
+  });
+
+  test('it renders with custom xExtent for a numeric histogram', async () => {
+    const { data, args } = sampleArgs();
+    const { layers, ...rest } = args;
+    const { layerId, layerType, table, type, ...restLayerArgs } = sampleLayer;
+    const result = await xyVisFunction.fn(
+      data,
+      {
+        ...rest,
+        ...restLayerArgs,
+        referenceLines: [],
+        annotationLayers: [],
+        isHistogram: true,
+        xExtent: {
+          type: 'axisExtentConfig',
+          mode: 'custom',
+          lowerBound: 0,
+          upperBound: 10,
+        },
+      },
+      createMockExecutionContext()
+    );
+
+    expect(result).toEqual({
+      type: 'render',
+      as: XY_VIS,
+      value: {
+        args: {
+          ...rest,
+          xExtent: {
+            type: 'axisExtentConfig',
+            mode: 'custom',
+            lowerBound: 0,
+            upperBound: 10,
+          },
+          layers: [
+            {
+              layerType,
+              table: data,
+              layerId: 'dataLayers-0',
+              type,
+              ...restLayerArgs,
+              isHistogram: true,
+            },
+          ],
+        },
+      },
+    });
+  });
 });
diff --git a/src/plugins/chart_expressions/expression_xy/common/expression_functions/xy_vis_fn.ts b/src/plugins/chart_expressions/expression_xy/common/expression_functions/xy_vis_fn.ts
@@ -33,6 +33,7 @@ import {
   validateLineWidthForChartType,
   validatePointsRadiusForChartType,
   validateLinesVisibilityForChartType,
+  validateXExtent,
 } from './validate';
 
 const createDataLayer = (args: XYArgs, table: Datatable): DataLayerConfigResult => {
@@ -120,6 +121,7 @@ export const xyVisFn: XyVisFn['fn'] = async (data, args, handlers) => {
   const hasBar = hasBarLayer(dataLayers);
   const hasArea = hasAreaLayer(dataLayers);
 
+  validateXExtent(args.xExtent, dataLayers);
   validateExtent(args.yLeftExtent, hasBar || hasArea, dataLayers);
   validateExtent(args.yRightExtent, hasBar || hasArea, dataLayers);
   validateFillOpacity(args.fillOpacity, hasArea);

diff --git a/src/plugins/chart_expressions/expression_xy/common/types/expression_functions.ts b/src/plugins/chart_expressions/expression_xy/common/types/expression_functions.ts
@@ -196,7 +196,7 @@ export interface XYArgs extends DataLayerArgs {
   xTitle: string;
   yTitle: string;
   yRightTitle: string;
-  xExtent: AxisExtentConfigResult;
+  xExtent?: AxisExtentConfigResult;
   yLeftExtent: AxisExtentConfigResult;
   yRightExtent: AxisExtentConfigResult;
   yLeftScale: YScaleType;
@@ -231,7 +231,7 @@ export interface LayeredXYArgs {
   xTitle: string;
   yTitle: string;
   yRightTitle: string;
-  xExtent: AxisExtentConfigResult;
+  xExtent?: AxisExtentConfigResult;
   yLeftExtent: AxisExtentConfigResult;
   yRightExtent: AxisExtentConfigResult;
   yLeftScale: YScaleType;
@@ -263,7 +263,7 @@ export interface XYProps {
   xTitle: string;
   yTitle: string;
   yRightTitle: string;
-  xExtent: AxisExtentConfigResult;
+  xExtent?: AxisExtentConfigResult;
   yLeftExtent: AxisExtentConfigResult;
   yRightExtent: AxisExtentConfigResult;
   yLeftScale: YScaleType;