[XY] pointsRadius, showPoints and lineWidth.

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

@@ -44,6 +44,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(),

src/plugins/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();
   });
 });

src/plugins/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);
 

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

@@ -33,6 +33,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`',
@@ -135,6 +156,9 @@ export const validateValueLabels = (
   }
 };
 
+const isAreaOrLineChart = (seriesType: SeriesType) =>
+  seriesType.includes('line') || seriesType.includes('area');
+
 export const validateMarkSizeForChartType = (
   markSizeAccessor: ExpressionValueVisDimension | string | undefined,
   seriesType: SeriesType
@@ -150,6 +174,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

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

@@ -30,7 +30,6 @@ describe('xyVis', () => {
             }
       ),
     } as Datatable;
-
     const { layers, ...rest } = args;
     const { layerId, layerType, table, type, ...restLayerArgs } = sampleLayer;
     const result = await xyVisFunction.fn(
@@ -82,6 +81,7 @@ describe('xyVis', () => {
       )
     ).rejects.toThrowErrorMatchingSnapshot();
   });
+
   test('it should throw error if minTimeBarInterval is invalid', async () => {
     const { data, args } = sampleArgs();
     const { layers, ...rest } = args;

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

@@ -28,6 +28,9 @@ import {
   validateMinTimeBarInterval,
   validateMarkSizeForChartType,
   validateMarkSizeRatioWithAccessor,
+  validateShowPointsForChartType,
+  validateLineWidthForChartType,
+  validatePointsRadiusForChartType,
 } from './validate';
 
 const createDataLayer = (args: XYArgs, table: Datatable): DataLayerConfigResult => {
@@ -42,6 +45,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,
@@ -67,6 +73,9 @@ export const xyVisFn: XyVisFn['fn'] = async (data, args, handlers) => {
     yConfig,
     palette,
     markSizeAccessor,
+    showPoints,
+    pointsRadius,
+    lineWidth,
     ...restArgs
   } = args;
 
@@ -114,6 +123,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',

src/plugins/chart_expressions/expression_xy/common/i18n/index.tsx

@@ -177,6 +177,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',

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

@@ -102,6 +102,9 @@ export interface DataLayerArgs {
   hide?: boolean;
   splitAccessor?: string | ExpressionValueVisDimension;
   markSizeAccessor?: string | ExpressionValueVisDimension;
+  lineWidth?: number;
+  showPoints?: boolean;
+  pointsRadius?: number;
   columnToLabel?: string; // Actually a JSON key-value pair
   xScaleType: XScaleType;
   isHistogram: boolean;
@@ -121,6 +124,9 @@ export interface ExtendedDataLayerArgs {
   hide?: boolean;
   splitAccessor?: string;
   markSizeAccessor?: string;
+  lineWidth?: number;
+  showPoints?: boolean;
+  pointsRadius?: number;
   columnToLabel?: string; // Actually a JSON key-value pair
   xScaleType: XScaleType;
   isHistogram: boolean;