[XY] pointsRadius, showPoints and lineWidth. (#130391)

* Added pointsRadius, showPoints and lineWidth. * Added tests. Co-authored-by: Kibana Machine <[email protected]>
elastic · May 20, 2022 · 24cbb32 · 24cbb32
1 parent 1c2eb9f
commit 24cbb32
Show file tree

Hide file tree

Showing 13 changed files with 313 additions and 59 deletions.
diff --git a/.../expression_xy/common/expression_functions/__snapshots__/extended_data_layer.test.ts.snap b/.../expression_xy/common/expression_functions/__snapshots__/extended_data_layer.test.ts.snap
diff --git a/...ins/chart_expressions/expression_xy/common/expression_functions/common_data_layer_args.ts b/...ins/chart_expressions/expression_xy/common/expression_functions/common_data_layer_args.ts
@@ -43,6 +43,18 @@ export const commonDataLayerArgs: Omit<
     default: false,
     help: strings.getIsHistogramHelp(),
   },
+  lineWidth: {
+    types: ['number'],
+    help: strings.getLineWidthHelp(),
+  },
+  showPoints: {
+    types: ['boolean'],
+    help: strings.getShowPointsHelp(),
+  },
+  pointsRadius: {
+    types: ['number'],
+    help: strings.getPointsRadiusHelp(),
+  },
   yConfig: {
     types: [Y_CONFIG],
     help: strings.getYConfigHelp(),

diff --git a/...s/chart_expressions/expression_xy/common/expression_functions/extended_data_layer.test.ts b/...s/chart_expressions/expression_xy/common/expression_functions/extended_data_layer.test.ts
@@ -13,62 +13,92 @@ import { LayerTypes } from '../constants';
 import { extendedDataLayerFunction } from './extended_data_layer';
 
 describe('extendedDataLayerConfig', () => {
+  const args: ExtendedDataLayerArgs = {
+    seriesType: 'line',
+    xAccessor: 'c',
+    accessors: ['a', 'b'],
+    splitAccessor: 'd',
+    xScaleType: 'linear',
+    isHistogram: false,
+    palette: mockPaletteOutput,
+  };
+
   test('produces the correct arguments', async () => {
     const { data } = sampleArgs();
-    const args: ExtendedDataLayerArgs = {
-      seriesType: 'line',
-      xAccessor: 'c',
-      accessors: ['a', 'b'],
-      splitAccessor: 'd',
-      xScaleType: 'linear',
-      isHistogram: false,
-      palette: mockPaletteOutput,
+    const fullArgs: ExtendedDataLayerArgs = {
+      ...args,
       markSizeAccessor: 'b',
+      showPoints: true,
+      lineWidth: 10,
+      pointsRadius: 10,
     };
 
-    const result = await extendedDataLayerFunction.fn(data, args, createMockExecutionContext());
+    const result = await extendedDataLayerFunction.fn(data, fullArgs, createMockExecutionContext());
 
     expect(result).toEqual({
       type: 'extendedDataLayer',
       layerType: LayerTypes.DATA,
-      ...args,
+      ...fullArgs,
       table: data,
     });
   });
 
   test('throws the error if markSizeAccessor is provided to the not line/area chart', async () => {
     const { data } = sampleArgs();
-    const args: ExtendedDataLayerArgs = {
-      seriesType: 'bar',
-      xAccessor: 'c',
-      accessors: ['a', 'b'],
-      splitAccessor: 'd',
-      xScaleType: 'linear',
-      isHistogram: false,
-      palette: mockPaletteOutput,
-      markSizeAccessor: 'b',
-    };
 
     expect(
-      extendedDataLayerFunction.fn(data, args, createMockExecutionContext())
+      extendedDataLayerFunction.fn(
+        data,
+        { ...args, seriesType: 'bar', markSizeAccessor: 'b' },
+        createMockExecutionContext()
+      )
     ).rejects.toThrowErrorMatchingSnapshot();
   });
 
   test("throws the error if markSizeAccessor doesn't have the corresponding column in the table", async () => {
     const { data } = sampleArgs();
-    const args: ExtendedDataLayerArgs = {
-      seriesType: 'line',
-      xAccessor: 'c',
-      accessors: ['a', 'b'],
-      splitAccessor: 'd',
-      xScaleType: 'linear',
-      isHistogram: false,
-      palette: mockPaletteOutput,
-      markSizeAccessor: 'nonsense',
-    };
 
     expect(
-      extendedDataLayerFunction.fn(data, args, createMockExecutionContext())
+      extendedDataLayerFunction.fn(
+        data,
+        { ...args, markSizeAccessor: 'nonsense' },
+        createMockExecutionContext()
+      )
+    ).rejects.toThrowErrorMatchingSnapshot();
+  });
+
+  test('throws the error if lineWidth is provided to the not line/area chart', async () => {
+    const { data } = sampleArgs();
+    expect(
+      extendedDataLayerFunction.fn(
+        data,
+        { ...args, seriesType: 'bar', lineWidth: 10 },
+        createMockExecutionContext()
+      )
+    ).rejects.toThrowErrorMatchingSnapshot();
+  });
+
+  test('throws the error if showPoints is provided to the not line/area chart', async () => {
+    const { data } = sampleArgs();
+
+    expect(
+      extendedDataLayerFunction.fn(
+        data,
+        { ...args, seriesType: 'bar', showPoints: true },
+        createMockExecutionContext()
+      )
+    ).rejects.toThrowErrorMatchingSnapshot();
+  });
+
+  test('throws the error if pointsRadius is provided to the not line/area chart', async () => {
+    const { data } = sampleArgs();
+
+    expect(
+      extendedDataLayerFunction.fn(
+        data,
+        { ...args, seriesType: 'bar', pointsRadius: 10 },
+        createMockExecutionContext()
+      )
     ).rejects.toThrowErrorMatchingSnapshot();
   });
 });
diff --git a/...ins/chart_expressions/expression_xy/common/expression_functions/extended_data_layer_fn.ts b/...ins/chart_expressions/expression_xy/common/expression_functions/extended_data_layer_fn.ts
@@ -10,7 +10,12 @@ import { validateAccessor } from '@kbn/visualizations-plugin/common/utils';
 import { ExtendedDataLayerArgs, ExtendedDataLayerFn } from '../types';
 import { EXTENDED_DATA_LAYER, LayerTypes } from '../constants';
 import { getAccessors, normalizeTable } from '../helpers';
-import { validateMarkSizeForChartType } from './validate';
+import {
+  validateLineWidthForChartType,
+  validateMarkSizeForChartType,
+  validatePointsRadiusForChartType,
+  validateShowPointsForChartType,
+} from './validate';
 
 export const extendedDataLayerFn: ExtendedDataLayerFn['fn'] = async (data, args, context) => {
   const table = args.table ?? data;
@@ -21,6 +26,9 @@ export const extendedDataLayerFn: ExtendedDataLayerFn['fn'] = async (data, args,
   accessors.accessors.forEach((accessor) => validateAccessor(accessor, table.columns));
   validateMarkSizeForChartType(args.markSizeAccessor, args.seriesType);
   validateAccessor(args.markSizeAccessor, table.columns);
+  validateLineWidthForChartType(args.lineWidth, args.seriesType);
+  validateShowPointsForChartType(args.showPoints, args.seriesType);
+  validatePointsRadiusForChartType(args.pointsRadius, args.seriesType);
 
   const normalizedTable = normalizeTable(table, accessors.xAccessor);
 

diff --git a/...ugins/chart_expressions/expression_xy/common/expression_functions/reference_line_layer.ts b/...ugins/chart_expressions/expression_xy/common/expression_functions/reference_line_layer.ts
@@ -6,8 +6,7 @@
  * Side Public License, v 1.
  */
 
-import { validateAccessor } from '@kbn/visualizations-plugin/common/utils';
-import { LayerTypes, REFERENCE_LINE_LAYER, EXTENDED_Y_CONFIG } from '../constants';
+import { REFERENCE_LINE_LAYER, EXTENDED_Y_CONFIG } from '../constants';
 import { ReferenceLineLayerFn } from '../types';
 import { strings } from '../i18n';
 
@@ -41,16 +40,8 @@ export const referenceLineLayerFunction: ReferenceLineLayerFn = {
       help: strings.getLayerIdHelp(),
     },
   },
-  fn(input, args) {
-    const table = args.table ?? input;
-    const accessors = args.accessors ?? [];
-    accessors.forEach((accessor) => validateAccessor(accessor, table.columns));
-
-    return {
-      type: REFERENCE_LINE_LAYER,
-      ...args,
-      layerType: LayerTypes.REFERENCELINE,
-      table: args.table ?? input,
-    };
+  async fn(input, args, context) {
+    const { referenceLineLayerFn } = await import('./reference_line_layer_fn');
+    return await referenceLineLayerFn(input, args, context);
   },
 };
diff --git a/...ns/chart_expressions/expression_xy/common/expression_functions/reference_line_layer_fn.ts b/...ns/chart_expressions/expression_xy/common/expression_functions/reference_line_layer_fn.ts
@@ -0,0 +1,24 @@
+/*
+ * 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 { LayerTypes, REFERENCE_LINE_LAYER } from '../constants';
+import { ReferenceLineLayerFn } from '../types';
+
+export const referenceLineLayerFn: ReferenceLineLayerFn['fn'] = async (input, args, handlers) => {
+  const table = args.table ?? input;
+  const accessors = args.accessors ?? [];
+  accessors.forEach((accessor) => validateAccessor(accessor, table.columns));
+
+  return {
+    type: REFERENCE_LINE_LAYER,
+    ...args,
+    layerType: LayerTypes.REFERENCELINE,
+    table: args.table ?? input,
+  };
+};
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
@@ -34,6 +34,27 @@ export const errors = {
     i18n.translate('expressionXY.reusable.function.xyVis.errors.markSizeLimitsError', {
       defaultMessage: 'Mark size ratio must be greater or equal to 1 and less or equal to 100',
     }),
+  lineWidthForNonLineOrAreaChartError: () =>
+    i18n.translate(
+      'expressionXY.reusable.function.xyVis.errors.lineWidthForNonLineOrAreaChartError',
+      {
+        defaultMessage: '`lineWidth` can be applied only for line or area charts',
+      }
+    ),
+  showPointsForNonLineOrAreaChartError: () =>
+    i18n.translate(
+      'expressionXY.reusable.function.xyVis.errors.showPointsForNonLineOrAreaChartError',
+      {
+        defaultMessage: '`showPoints` can be applied only for line or area charts',
+      }
+    ),
+  pointsRadiusForNonLineOrAreaChartError: () =>
+    i18n.translate(
+      'expressionXY.reusable.function.xyVis.errors.pointsRadiusForNonLineOrAreaChartError',
+      {
+        defaultMessage: '`pointsRadius` can be applied only for line or area charts',
+      }
+    ),
   markSizeRatioWithoutAccessor: () =>
     i18n.translate('expressionXY.reusable.function.xyVis.errors.markSizeRatioWithoutAccessor', {
       defaultMessage: 'Mark size ratio can be applied only with `markSizeAccessor`',
@@ -140,6 +161,9 @@ export const validateValueLabels = (
   }
 };
 
+const isAreaOrLineChart = (seriesType: SeriesType) =>
+  seriesType.includes('line') || seriesType.includes('area');
+
 export const validateAddTimeMarker = (
   dataLayers: Array<DataLayerConfigResult | ExtendedDataLayerConfigResult>,
   addTimeMarker?: boolean
@@ -164,6 +188,33 @@ export const validateMarkSizeRatioLimits = (markSizeRatio?: number) => {
   }
 };
 
+export const validateLineWidthForChartType = (
+  lineWidth: number | undefined,
+  seriesType: SeriesType
+) => {
+  if (lineWidth !== undefined && !isAreaOrLineChart(seriesType)) {
+    throw new Error(errors.lineWidthForNonLineOrAreaChartError());
+  }
+};
+
+export const validateShowPointsForChartType = (
+  showPoints: boolean | undefined,
+  seriesType: SeriesType
+) => {
+  if (showPoints !== undefined && !isAreaOrLineChart(seriesType)) {
+    throw new Error(errors.showPointsForNonLineOrAreaChartError());
+  }
+};
+
+export const validatePointsRadiusForChartType = (
+  pointsRadius: number | undefined,
+  seriesType: SeriesType
+) => {
+  if (pointsRadius !== undefined && !isAreaOrLineChart(seriesType)) {
+    throw new Error(errors.pointsRadiusForNonLineOrAreaChartError());
+  }
+};
+
 export const validateMarkSizeRatioWithAccessor = (
   markSizeRatio: number | undefined,
   markSizeAccessor: ExpressionValueVisDimension | string | undefined

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
@@ -65,6 +65,7 @@ describe('xyVis', () => {
       )
     ).rejects.toThrowErrorMatchingSnapshot();
   });
+
   test('it should throw error if minTimeBarInterval is invalid', async () => {
     const { data, args } = sampleArgs();
     const { layers, ...rest } = args;

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
@@ -29,6 +29,9 @@ import {
   validateMinTimeBarInterval,
   validateMarkSizeForChartType,
   validateMarkSizeRatioWithAccessor,
+  validateShowPointsForChartType,
+  validateLineWidthForChartType,
+  validatePointsRadiusForChartType,
 } from './validate';
 
 const createDataLayer = (args: XYArgs, table: Datatable): DataLayerConfigResult => {
@@ -43,6 +46,9 @@ const createDataLayer = (args: XYArgs, table: Datatable): DataLayerConfigResult
     isHistogram: args.isHistogram,
     palette: args.palette,
     yConfig: args.yConfig,
+    showPoints: args.showPoints,
+    pointsRadius: args.pointsRadius,
+    lineWidth: args.lineWidth,
     layerType: LayerTypes.DATA,
     table: normalizedTable,
     ...accessors,
@@ -68,6 +74,9 @@ export const xyVisFn: XyVisFn['fn'] = async (data, args, handlers) => {
     yConfig,
     palette,
     markSizeAccessor,
+    showPoints,
+    pointsRadius,
+    lineWidth,
     ...restArgs
   } = args;
 
@@ -116,6 +125,9 @@ export const xyVisFn: XyVisFn['fn'] = async (data, args, handlers) => {
   validateValueLabels(args.valueLabels, hasBar, hasNotHistogramBars);
   validateMarkSizeRatioWithAccessor(args.markSizeRatio, dataLayers[0].markSizeAccessor);
   validateMarkSizeRatioLimits(args.markSizeRatio);
+  validateLineWidthForChartType(lineWidth, args.seriesType);
+  validateShowPointsForChartType(showPoints, args.seriesType);
+  validatePointsRadiusForChartType(pointsRadius, args.seriesType);
 
   return {
     type: 'render',

diff --git a/src/plugins/chart_expressions/expression_xy/common/i18n/index.tsx b/src/plugins/chart_expressions/expression_xy/common/i18n/index.tsx
@@ -181,6 +181,18 @@ export const strings = {
     i18n.translate('expressionXY.dataLayer.markSizeAccessor.help', {
       defaultMessage: 'Mark size accessor',
     }),
+  getLineWidthHelp: () =>
+    i18n.translate('expressionXY.dataLayer.lineWidth.help', {
+      defaultMessage: 'Line width',
+    }),
+  getShowPointsHelp: () =>
+    i18n.translate('expressionXY.dataLayer.showPoints.help', {
+      defaultMessage: 'Show points',
+    }),
+  getPointsRadiusHelp: () =>
+    i18n.translate('expressionXY.dataLayer.pointsRadius.help', {
+      defaultMessage: 'Points radius',
+    }),
   getYConfigHelp: () =>
     i18n.translate('expressionXY.dataLayer.yConfig.help', {
       defaultMessage: 'Additional configuration for y axes',