From 210395d79df48264dedf42ff58a8cae2fbbf1453 Mon Sep 17 00:00:00 2001
From: Stratoula Kalafateli <efstratia.kalafateli@elastic.co>
Date: Mon, 24 May 2021 12:31:45 +0300
Subject: [PATCH 1/6] [XY] Add opacity slider and dots size slider

---
 .../vis_type_xy/public/config/get_config.ts   |  2 +
 .../__snapshots__/line_options.test.tsx.snap  |  9 ---
 .../__snapshots__/point_options.test.tsx.snap | 46 ++++++++++++++
 .../metrics_axes/chart_options.test.tsx       | 14 +++++
 .../options/metrics_axes/chart_options.tsx    |  4 ++
 .../options/metrics_axes/line_options.tsx     | 11 ----
 .../components/options/metrics_axes/mocks.ts  |  1 +
 .../metrics_axes/point_options.test.tsx       | 44 +++++++++++++
 .../options/metrics_axes/point_options.tsx    | 62 +++++++++++++++++++
 .../components/options/metrics_axes/utils.ts  |  1 +
 .../point_series/elastic_charts_options.tsx   | 36 +++++++++--
 .../point_series/point_series.mocks.ts        |  2 +
 .../expression_functions/series_param.ts      | 10 ++-
 .../public/expression_functions/xy_vis_fn.ts  |  7 +++
 .../public/sample_vis.test.mocks.ts           |  3 +
 src/plugins/vis_type_xy/public/to_ast.ts      |  2 +
 .../vis_type_xy/public/types/config.ts        |  1 +
 src/plugins/vis_type_xy/public/types/param.ts |  3 +
 .../public/utils/render_all_series.test.tsx   |  1 +
 .../public/utils/render_all_series.tsx        | 14 ++++-
 .../vis_type_xy/public/vis_types/area.ts      |  1 +
 .../vis_type_xy/public/vis_types/histogram.ts |  1 +
 .../public/vis_types/horizontal_bar.ts        |  1 +
 .../vis_type_xy/public/vis_types/line.ts      |  1 +
 24 files changed, 249 insertions(+), 28 deletions(-)
 create mode 100644 src/plugins/vis_type_xy/public/editor/components/options/metrics_axes/__snapshots__/point_options.test.tsx.snap
 create mode 100644 src/plugins/vis_type_xy/public/editor/components/options/metrics_axes/point_options.test.tsx
 create mode 100644 src/plugins/vis_type_xy/public/editor/components/options/metrics_axes/point_options.tsx

diff --git a/src/plugins/vis_type_xy/public/config/get_config.ts b/src/plugins/vis_type_xy/public/config/get_config.ts
index 8ebac1b71940a..ce01572060a40 100644
--- a/src/plugins/vis_type_xy/public/config/get_config.ts
+++ b/src/plugins/vis_type_xy/public/config/get_config.ts
@@ -39,6 +39,7 @@ export function getConfig(table: Datatable, params: VisParams): VisConfig {
     fittingFunction,
     detailedTooltip,
     isVislibVis,
+    fillOpacity,
   } = params;
   const aspects = getAspects(table.columns, params.dimensions);
   const xAxis = getAxis<XScaleType>(
@@ -63,6 +64,7 @@ export function getConfig(table: Datatable, params: VisParams): VisConfig {
     // NOTE: downscale ratio to match current vislib implementation
     markSizeRatio: radiusRatio * 0.6,
     fittingFunction,
+    fillOpacity,
     detailedTooltip,
     orderBucketsBySum,
     isTimeChart,
diff --git a/src/plugins/vis_type_xy/public/editor/components/options/metrics_axes/__snapshots__/line_options.test.tsx.snap b/src/plugins/vis_type_xy/public/editor/components/options/metrics_axes/__snapshots__/line_options.test.tsx.snap
index 7b45423f5f861..8764db1dea06a 100644
--- a/src/plugins/vis_type_xy/public/editor/components/options/metrics_axes/__snapshots__/line_options.test.tsx.snap
+++ b/src/plugins/vis_type_xy/public/editor/components/options/metrics_axes/__snapshots__/line_options.test.tsx.snap
@@ -54,14 +54,5 @@ exports[`LineOptions component should init with the default set of props 1`] = `
       />
     </EuiFlexItem>
   </EuiFlexGroup>
-  <EuiSpacer
-    size="m"
-  />
-  <SwitchOption
-    label="Show dots"
-    paramName="showCircles"
-    setValue={[MockFunction]}
-    value={true}
-  />
 </Fragment>
 `;
diff --git a/src/plugins/vis_type_xy/public/editor/components/options/metrics_axes/__snapshots__/point_options.test.tsx.snap b/src/plugins/vis_type_xy/public/editor/components/options/metrics_axes/__snapshots__/point_options.test.tsx.snap
new file mode 100644
index 0000000000000..82bf3d1ec9f62
--- /dev/null
+++ b/src/plugins/vis_type_xy/public/editor/components/options/metrics_axes/__snapshots__/point_options.test.tsx.snap
@@ -0,0 +1,46 @@
+// Jest Snapshot v1, https://goo.gl/fbAQLP
+
+exports[`PointOptions component should init with the default set of props 1`] = `
+<Fragment>
+  <EuiSpacer
+    size="m"
+  />
+  <SwitchOption
+    label="Show dots"
+    paramName="showCircles"
+    setValue={[MockFunction]}
+    value={true}
+  />
+  <EuiSpacer
+    size="m"
+  />
+  <EuiFormRow
+    describedByIds={Array []}
+    display="rowCompressed"
+    fullWidth={true}
+    hasChildLabel={true}
+    hasEmptyLabelSpace={false}
+    label="Dots size"
+    labelType="label"
+  >
+    <EuiRange
+      compressed={true}
+      data-test-subj="dotsRadius"
+      disabled={false}
+      fullWidth={false}
+      isLoading={false}
+      levels={Array []}
+      max={10}
+      min={1}
+      onChange={[Function]}
+      showInput={true}
+      showLabels={false}
+      showRange={false}
+      showTicks={false}
+      showValue={false}
+      step={1}
+      value={3}
+    />
+  </EuiFormRow>
+</Fragment>
+`;
diff --git a/src/plugins/vis_type_xy/public/editor/components/options/metrics_axes/chart_options.test.tsx b/src/plugins/vis_type_xy/public/editor/components/options/metrics_axes/chart_options.test.tsx
index def24d51f49f3..1d5c8be2b9246 100644
--- a/src/plugins/vis_type_xy/public/editor/components/options/metrics_axes/chart_options.test.tsx
+++ b/src/plugins/vis_type_xy/public/editor/components/options/metrics_axes/chart_options.test.tsx
@@ -12,6 +12,7 @@ import { shallow, mount } from 'enzyme';
 import { ChartOptions, ChartOptionsParams } from './chart_options';
 import { SeriesParam, ChartMode, AxisMode } from '../../../../types';
 import { LineOptions } from './line_options';
+import { PointOptions } from './point_options';
 import { valueAxis, seriesParam } from './mocks';
 import { ChartType } from '../../../../../common';
 
@@ -41,6 +42,12 @@ describe('ChartOptions component', () => {
     expect(comp).toMatchSnapshot();
   });
 
+  it('should hide the PointOptions when type is bar', () => {
+    const comp = shallow(<ChartOptions {...defaultProps} />);
+
+    expect(comp.find(PointOptions).exists()).toBeFalsy();
+  });
+
   it('should show LineOptions when type is line', () => {
     chart.type = ChartType.Line;
     const comp = shallow(<ChartOptions {...defaultProps} />);
@@ -48,6 +55,13 @@ describe('ChartOptions component', () => {
     expect(comp.find(LineOptions).exists()).toBeTruthy();
   });
 
+  it('should show PointOptions when type is area', () => {
+    chart.type = ChartType.Area;
+    const comp = shallow(<ChartOptions {...defaultProps} />);
+
+    expect(comp.find(PointOptions).exists()).toBeTruthy();
+  });
+
   it('should show line mode when type is area', () => {
     chart.type = ChartType.Area;
     const comp = shallow(<ChartOptions {...defaultProps} />);
diff --git a/src/plugins/vis_type_xy/public/editor/components/options/metrics_axes/chart_options.tsx b/src/plugins/vis_type_xy/public/editor/components/options/metrics_axes/chart_options.tsx
index 23452a87aae60..34ee33781f269 100644
--- a/src/plugins/vis_type_xy/public/editor/components/options/metrics_axes/chart_options.tsx
+++ b/src/plugins/vis_type_xy/public/editor/components/options/metrics_axes/chart_options.tsx
@@ -15,6 +15,7 @@ import { SelectOption } from '../../../../../../vis_default_editor/public';
 
 import { SeriesParam, ValueAxis, ChartMode, AxisMode } from '../../../../types';
 import { LineOptions } from './line_options';
+import { PointOptions } from './point_options';
 import { SetParamByIndex, ChangeValueAxis } from '.';
 import { ChartType } from '../../../../../common';
 import { getConfigCollections } from '../../../collections';
@@ -143,6 +144,9 @@ function ChartOptions({
       )}
 
       {chart.type === ChartType.Line && <LineOptions chart={chart} setChart={setChart} />}
+      {(chart.type === ChartType.Area || chart.type === ChartType.Line) && (
+        <PointOptions chart={chart} setChart={setChart} />
+      )}
     </>
   );
 }
diff --git a/src/plugins/vis_type_xy/public/editor/components/options/metrics_axes/line_options.tsx b/src/plugins/vis_type_xy/public/editor/components/options/metrics_axes/line_options.tsx
index 140f190c77181..75dfe8627d73e 100644
--- a/src/plugins/vis_type_xy/public/editor/components/options/metrics_axes/line_options.tsx
+++ b/src/plugins/vis_type_xy/public/editor/components/options/metrics_axes/line_options.tsx
@@ -78,17 +78,6 @@ function LineOptions({ chart, setChart }: LineOptionsParams) {
           />
         </EuiFlexItem>
       </EuiFlexGroup>
-
-      <EuiSpacer size="m" />
-
-      <SwitchOption
-        label={i18n.translate('visTypeXy.controls.pointSeries.series.showDotsLabel', {
-          defaultMessage: 'Show dots',
-        })}
-        paramName="showCircles"
-        value={chart.showCircles}
-        setValue={setChart}
-      />
     </>
   );
 }
diff --git a/src/plugins/vis_type_xy/public/editor/components/options/metrics_axes/mocks.ts b/src/plugins/vis_type_xy/public/editor/components/options/metrics_axes/mocks.ts
index 7451f6dea9039..cd4a06c99dbd7 100644
--- a/src/plugins/vis_type_xy/public/editor/components/options/metrics_axes/mocks.ts
+++ b/src/plugins/vis_type_xy/public/editor/components/options/metrics_axes/mocks.ts
@@ -75,6 +75,7 @@ const seriesParam: SeriesParam = {
   drawLinesBetweenPoints: true,
   lineWidth: 2,
   showCircles: true,
+  dotsRadius: 3,
   interpolate: InterpolationMode.Linear,
   valueAxis: defaultValueAxisId,
 };
diff --git a/src/plugins/vis_type_xy/public/editor/components/options/metrics_axes/point_options.test.tsx b/src/plugins/vis_type_xy/public/editor/components/options/metrics_axes/point_options.test.tsx
new file mode 100644
index 0000000000000..e7c50f80989f2
--- /dev/null
+++ b/src/plugins/vis_type_xy/public/editor/components/options/metrics_axes/point_options.test.tsx
@@ -0,0 +1,44 @@
+/*
+ * 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 React from 'react';
+import { shallow, mount } from 'enzyme';
+import { findTestSubject } from '@elastic/eui/lib/test';
+
+import { SeriesParam } from '../../../../types';
+import { PointOptions, PointOptionsParams } from './point_options';
+import { seriesParam } from './mocks';
+
+describe('PointOptions component', () => {
+  let setChart: jest.Mock;
+  let defaultProps: PointOptionsParams;
+  let chart: SeriesParam;
+
+  beforeEach(() => {
+    setChart = jest.fn();
+    chart = { ...seriesParam };
+
+    defaultProps = {
+      chart,
+      setChart,
+    };
+  });
+
+  it('should init with the default set of props', () => {
+    const comp = shallow(<PointOptions {...defaultProps} />);
+
+    expect(comp).toMatchSnapshot();
+  });
+
+  it('should disable the dots size range if the show dots switch is off', () => {
+    chart.showCircles = false;
+    const comp = mount(<PointOptions {...defaultProps} />);
+    const range = findTestSubject(comp, 'dotsRadius');
+    expect(range.at(1).props().disabled).toBeTruthy();
+  });
+});
diff --git a/src/plugins/vis_type_xy/public/editor/components/options/metrics_axes/point_options.tsx b/src/plugins/vis_type_xy/public/editor/components/options/metrics_axes/point_options.tsx
new file mode 100644
index 0000000000000..5151fe0e88c0b
--- /dev/null
+++ b/src/plugins/vis_type_xy/public/editor/components/options/metrics_axes/point_options.tsx
@@ -0,0 +1,62 @@
+/*
+ * 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 React from 'react';
+
+import { i18n } from '@kbn/i18n';
+import { EuiRange, EuiFormRow, EuiSpacer } from '@elastic/eui';
+
+import { SwitchOption } from '../../../../../../vis_default_editor/public';
+
+import { SeriesParam } from '../../../../types';
+import { SetChart } from './chart_options';
+
+export interface PointOptionsParams {
+  chart: SeriesParam;
+  setChart: SetChart;
+}
+
+function PointOptions({ chart, setChart }: PointOptionsParams) {
+  return (
+    <>
+      <EuiSpacer size="m" />
+      <SwitchOption
+        label={i18n.translate('visTypeXy.controls.pointSeries.series.showDotsLabel', {
+          defaultMessage: 'Show dots',
+        })}
+        paramName="showCircles"
+        value={chart.showCircles}
+        setValue={setChart}
+      />
+      <EuiSpacer size="m" />
+      <EuiFormRow
+        label={i18n.translate('isTypeXy.controls.pointSeries.series.dotsRadius', {
+          defaultMessage: 'Dots size',
+        })}
+        fullWidth
+        display="rowCompressed"
+      >
+        <EuiRange
+          data-test-subj="dotsRadius"
+          value={chart.dotsRadius}
+          min={1}
+          max={10}
+          step={1}
+          disabled={!chart.showCircles}
+          showInput
+          compressed
+          onChange={(e) => {
+            setChart('dotsRadius', Number(e.currentTarget.value));
+          }}
+        />
+      </EuiFormRow>
+    </>
+  );
+}
+
+export { PointOptions };
diff --git a/src/plugins/vis_type_xy/public/editor/components/options/metrics_axes/utils.ts b/src/plugins/vis_type_xy/public/editor/components/options/metrics_axes/utils.ts
index d0d0c08060acf..5ae3fffae6775 100644
--- a/src/plugins/vis_type_xy/public/editor/components/options/metrics_axes/utils.ts
+++ b/src/plugins/vis_type_xy/public/editor/components/options/metrics_axes/utils.ts
@@ -26,6 +26,7 @@ export const makeSerie = (
     type: ChartType.Line,
     drawLinesBetweenPoints: true,
     showCircles: true,
+    dotsRadius: 3,
     interpolate: InterpolationMode.Linear,
     lineWidth: 2,
     valueAxis: defaultValueAxis,
diff --git a/src/plugins/vis_type_xy/public/editor/components/options/point_series/elastic_charts_options.tsx b/src/plugins/vis_type_xy/public/editor/components/options/point_series/elastic_charts_options.tsx
index 5398980e268d4..280b0bc6cfd2b 100644
--- a/src/plugins/vis_type_xy/public/editor/components/options/point_series/elastic_charts_options.tsx
+++ b/src/plugins/vis_type_xy/public/editor/components/options/point_series/elastic_charts_options.tsx
@@ -10,7 +10,7 @@ import React, { useState, useEffect } from 'react';
 
 import { i18n } from '@kbn/i18n';
 import { METRIC_TYPE } from '@kbn/analytics';
-
+import { EuiFormRow, EuiRange } from '@elastic/eui';
 import {
   SelectOption,
   SwitchOption,
@@ -31,10 +31,14 @@ export function ElasticChartsOptions(props: ValidationVisOptionsProps<VisParams>
   const [palettesRegistry, setPalettesRegistry] = useState<PaletteRegistry | null>(null);
   const { stateParams, setValue, aggs } = props;
 
-  const hasLineChart = stateParams.seriesParams.some(
+  const isLineChart = stateParams.seriesParams.some(
+    ({ type, data: { id: paramId } }) =>
+      type === ChartType.Line && aggs.aggs.find(({ id }) => id === paramId)?.enabled
+  );
+
+  const isAreaChart = stateParams.seriesParams.some(
     ({ type, data: { id: paramId } }) =>
-      (type === ChartType.Line || type === ChartType.Area) &&
-      aggs.aggs.find(({ id }) => id === paramId)?.enabled
+      type === ChartType.Area && aggs.aggs.find(({ id }) => id === paramId)?.enabled
   );
 
   useEffect(() => {
@@ -66,7 +70,7 @@ export function ElasticChartsOptions(props: ValidationVisOptionsProps<VisParams>
         }}
       />
 
-      {hasLineChart && (
+      {(isLineChart || isAreaChart) && (
         <SelectOption
           data-test-subj="fittingFunction"
           label={i18n.translate('visTypeXy.editors.elasticChartsOptions.missingValuesLabel', {
@@ -97,6 +101,28 @@ export function ElasticChartsOptions(props: ValidationVisOptionsProps<VisParams>
           }}
         />
       )}
+      {isAreaChart && (
+        <EuiFormRow
+          label={i18n.translate('visTypeXy.editors.elasticChartsOptions.fillOpacity', {
+            defaultMessage: 'Color opacity',
+          })}
+          fullWidth
+          display="rowCompressed"
+        >
+          <EuiRange
+            data-test-subj="fillColorOpacity"
+            value={stateParams.fillOpacity ?? 0.3}
+            min={0}
+            max={1}
+            step={0.1}
+            showInput
+            compressed
+            onChange={(e) => {
+              setValue('fillOpacity', Number(e.currentTarget.value));
+            }}
+          />
+        </EuiFormRow>
+      )}
     </>
   );
 }
diff --git a/src/plugins/vis_type_xy/public/editor/components/options/point_series/point_series.mocks.ts b/src/plugins/vis_type_xy/public/editor/components/options/point_series/point_series.mocks.ts
index eb8d4d1c440d7..ef549d2e20320 100644
--- a/src/plugins/vis_type_xy/public/editor/components/options/point_series/point_series.mocks.ts
+++ b/src/plugins/vis_type_xy/public/editor/components/options/point_series/point_series.mocks.ts
@@ -410,6 +410,7 @@ export const getVis = (bucketType: string) => {
               drawLinesBetweenPoints: true,
               lineWidth: 2,
               showCircles: true,
+              dotsRadius: 3,
               interpolate: 'linear',
               valueAxis: 'ValueAxis-1',
             },
@@ -838,6 +839,7 @@ export const getStateParams = (type: string, thresholdPanelOn: boolean) => {
         },
         drawLinesBetweenPoints: true,
         showCircles: true,
+        dotsRadius: 3,
         interpolate: 'cardinal',
         valueAxis: 'ValueAxis-1',
       },
diff --git a/src/plugins/vis_type_xy/public/expression_functions/series_param.ts b/src/plugins/vis_type_xy/public/expression_functions/series_param.ts
index 402187cea6586..c0f838abaa01c 100644
--- a/src/plugins/vis_type_xy/public/expression_functions/series_param.ts
+++ b/src/plugins/vis_type_xy/public/expression_functions/series_param.ts
@@ -29,6 +29,7 @@ export type ExpressionValueSeriesParam = ExpressionValueBoxed<
     mode: SeriesParam['mode'];
     show: boolean;
     showCircles: boolean;
+    dotsRadius: number;
     seriesParamType: SeriesParam['type'];
     valueAxis: string;
   }
@@ -95,7 +96,13 @@ export const seriesParam = (): ExpressionFunctionDefinition<
     showCircles: {
       types: ['boolean'],
       help: i18n.translate('visTypeXy.function.seriesParam.showCircles.help', {
-        defaultMessage: 'Show circles',
+        defaultMessage: 'Show dots',
+      }),
+    },
+    dotsRadius: {
+      types: ['number'],
+      help: i18n.translate('visTypeXy.function.seriesParam.dotsRadius.help', {
+        defaultMessage: 'Defines the dots radius',
       }),
     },
     type: {
@@ -121,6 +128,7 @@ export const seriesParam = (): ExpressionFunctionDefinition<
       mode: args.mode,
       show: args.show,
       showCircles: args.showCircles,
+      dotsRadius: args.dotsRadius,
       seriesParamType: args.type,
       valueAxis: args.valueAxis,
     };
diff --git a/src/plugins/vis_type_xy/public/expression_functions/xy_vis_fn.ts b/src/plugins/vis_type_xy/public/expression_functions/xy_vis_fn.ts
index b8b8c0e8b8cca..29403a12fdce6 100644
--- a/src/plugins/vis_type_xy/public/expression_functions/xy_vis_fn.ts
+++ b/src/plugins/vis_type_xy/public/expression_functions/xy_vis_fn.ts
@@ -161,6 +161,12 @@ export const visTypeXyVisFn = (): VisTypeXyExpressionFunctionDefinition => ({
         defaultMessage: 'Defines the chart palette name',
       }),
     },
+    fillOpacity: {
+      types: ['number'],
+      help: i18n.translate('visTypeXy.function.args.fillOpacity.help', {
+        defaultMessage: 'Defines the area chart fill opacity',
+      }),
+    },
     xDimension: {
       types: ['xy_dimension', 'null'],
       help: i18n.translate('visTypeXy.function.args.xDimension.help', {
@@ -242,6 +248,7 @@ export const visTypeXyVisFn = (): VisTypeXyExpressionFunctionDefinition => ({
         type: 'palette',
         name: args.palette,
       },
+      fillOpacity: args.fillOpacity,
       fittingFunction: args.fittingFunction,
       dimensions: {
         x: args.xDimension,
diff --git a/src/plugins/vis_type_xy/public/sample_vis.test.mocks.ts b/src/plugins/vis_type_xy/public/sample_vis.test.mocks.ts
index e15f9c4207702..efdb6f28dbf68 100644
--- a/src/plugins/vis_type_xy/public/sample_vis.test.mocks.ts
+++ b/src/plugins/vis_type_xy/public/sample_vis.test.mocks.ts
@@ -1397,6 +1397,7 @@ export const sampleAreaVis = {
             drawLinesBetweenPoints: true,
             lineWidth: 2,
             showCircles: true,
+            dotsRadius: 3,
             interpolate: 'linear',
             valueAxis: 'ValueAxis-1',
           },
@@ -1417,6 +1418,7 @@ export const sampleAreaVis = {
         palette: {
           name: 'default',
         },
+        fillOpacity: 0.5,
       },
     },
     editorConfig: {
@@ -1562,6 +1564,7 @@ export const sampleAreaVis = {
         },
         drawLinesBetweenPoints: true,
         showCircles: true,
+        dotsRadius: 5,
         interpolate: 'linear',
         valueAxis: 'ValueAxis-1',
       },
diff --git a/src/plugins/vis_type_xy/public/to_ast.ts b/src/plugins/vis_type_xy/public/to_ast.ts
index c0a0ee566a445..57a1d6eda6175 100644
--- a/src/plugins/vis_type_xy/public/to_ast.ts
+++ b/src/plugins/vis_type_xy/public/to_ast.ts
@@ -98,6 +98,7 @@ const prepareSeriesParam = (data: SeriesParam) => {
     mode: data.mode,
     show: data.show,
     showCircles: data.showCircles,
+    dotsRadius: data.dotsRadius,
     type: data.type,
     valueAxis: data.valueAxis,
   });
@@ -207,6 +208,7 @@ export const toExpressionAst: VisToExpressionAst<VisParams> = async (vis, params
     fittingFunction: vis.params.fittingFunction,
     times: vis.params.times.map(prepareTimeMarker),
     palette: vis.params.palette.name,
+    fillOpacity: vis.params.fillOpacity,
     xDimension: dimensions.x ? prepareXYDimension(dimensions.x) : null,
     yDimension: dimensions.y.map(prepareXYDimension),
     zDimension: dimensions.z?.map(prepareXYDimension),
diff --git a/src/plugins/vis_type_xy/public/types/config.ts b/src/plugins/vis_type_xy/public/types/config.ts
index f025a36a82410..e52b47366bc85 100644
--- a/src/plugins/vis_type_xy/public/types/config.ts
+++ b/src/plugins/vis_type_xy/public/types/config.ts
@@ -116,6 +116,7 @@ export interface VisConfig {
   showValueLabel: boolean;
   enableHistogramMode: boolean;
   fittingFunction?: Exclude<Fit, 'explicit'>;
+  fillOpacity?: number;
   detailedTooltip?: boolean;
   isVislibVis?: boolean;
 }
diff --git a/src/plugins/vis_type_xy/public/types/param.ts b/src/plugins/vis_type_xy/public/types/param.ts
index f90899620126a..2f4ef5b71747c 100644
--- a/src/plugins/vis_type_xy/public/types/param.ts
+++ b/src/plugins/vis_type_xy/public/types/param.ts
@@ -78,6 +78,7 @@ export interface SeriesParam {
   mode: ChartMode;
   show: boolean;
   showCircles: boolean;
+  dotsRadius: number;
   type: ChartType;
   valueAxis: string;
 }
@@ -155,6 +156,7 @@ export interface VisParams {
    */
   detailedTooltip?: boolean;
   palette: PaletteOutput;
+  fillOpacity?: number;
   fittingFunction?: Exclude<Fit, 'explicit'>;
 }
 
@@ -186,6 +188,7 @@ export interface XYVisConfig {
    */
   detailedTooltip?: boolean;
   fittingFunction?: Exclude<Fit, 'explicit'>;
+  fillOpacity?: number;
   xDimension: ExpressionValueXYDimension | null;
   yDimension: ExpressionValueXYDimension[];
   zDimension?: ExpressionValueXYDimension[];
diff --git a/src/plugins/vis_type_xy/public/utils/render_all_series.test.tsx b/src/plugins/vis_type_xy/public/utils/render_all_series.test.tsx
index 628d3620090ca..7d1a6efe4fb71 100644
--- a/src/plugins/vis_type_xy/public/utils/render_all_series.test.tsx
+++ b/src/plugins/vis_type_xy/public/utils/render_all_series.test.tsx
@@ -31,6 +31,7 @@ const defaultSeriesParams = [
     mode: 'stacked',
     show: true,
     showCircles: true,
+    dotsRadius: 3,
     type: 'area',
     valueAxis: 'ValueAxis-1',
   },
diff --git a/src/plugins/vis_type_xy/public/utils/render_all_series.tsx b/src/plugins/vis_type_xy/public/utils/render_all_series.tsx
index 3bce5ddc2e85e..8487139ec534c 100644
--- a/src/plugins/vis_type_xy/public/utils/render_all_series.tsx
+++ b/src/plugins/vis_type_xy/public/utils/render_all_series.tsx
@@ -51,7 +51,15 @@ const getCurveType = (type?: 'linear' | 'cardinal' | 'step-after'): CurveType =>
  * @param getSeriesColor
  */
 export const renderAllSeries = (
-  { aspects, yAxes, xAxis, showValueLabel, enableHistogramMode, fittingFunction }: VisConfig,
+  {
+    aspects,
+    yAxes,
+    xAxis,
+    showValueLabel,
+    enableHistogramMode,
+    fittingFunction,
+    fillOpacity,
+  }: VisConfig,
   seriesParams: SeriesParam[],
   data: DatatableRow[],
   getSeriesName: (series: XYChartSeriesIdentifier) => SeriesName,
@@ -67,6 +75,7 @@ export const renderAllSeries = (
       data: { id: paramId },
       lineWidth: strokeWidth,
       showCircles,
+      dotsRadius,
       drawLinesBetweenPoints,
       mode,
       interpolate,
@@ -158,7 +167,7 @@ export const renderAllSeries = (
               stackMode={stackMode}
               areaSeriesStyle={{
                 area: {
-                  ...(type === ChartType.Line && { opacity: 0 }),
+                  ...(type === ChartType.Line ? { opacity: 0 } : { opacity: fillOpacity }),
                 },
                 line: {
                   strokeWidth,
@@ -167,6 +176,7 @@ export const renderAllSeries = (
                 point: {
                   visible: showCircles,
                   fill: markSizeAccessor ? ColorVariant.Series : undefined,
+                  radius: dotsRadius,
                 },
               }}
             />
diff --git a/src/plugins/vis_type_xy/public/vis_types/area.ts b/src/plugins/vis_type_xy/public/vis_types/area.ts
index f22f8df1752d6..df1ca85c4a167 100644
--- a/src/plugins/vis_type_xy/public/vis_types/area.ts
+++ b/src/plugins/vis_type_xy/public/vis_types/area.ts
@@ -98,6 +98,7 @@ export const getAreaVisTypeDefinition = (
           drawLinesBetweenPoints: true,
           lineWidth: 2,
           showCircles: true,
+          dotsRadius: 3,
           interpolate: InterpolationMode.Linear,
           valueAxis: 'ValueAxis-1',
         },
diff --git a/src/plugins/vis_type_xy/public/vis_types/histogram.ts b/src/plugins/vis_type_xy/public/vis_types/histogram.ts
index 732833ffecc80..a04b352e2626d 100644
--- a/src/plugins/vis_type_xy/public/vis_types/histogram.ts
+++ b/src/plugins/vis_type_xy/public/vis_types/histogram.ts
@@ -102,6 +102,7 @@ export const getHistogramVisTypeDefinition = (
           drawLinesBetweenPoints: true,
           lineWidth: 2,
           showCircles: true,
+          dotsRadius: 3,
         },
       ],
       radiusRatio: 0,
diff --git a/src/plugins/vis_type_xy/public/vis_types/horizontal_bar.ts b/src/plugins/vis_type_xy/public/vis_types/horizontal_bar.ts
index 791d93bb646b2..7e9e3630929a4 100644
--- a/src/plugins/vis_type_xy/public/vis_types/horizontal_bar.ts
+++ b/src/plugins/vis_type_xy/public/vis_types/horizontal_bar.ts
@@ -103,6 +103,7 @@ export const getHorizontalBarVisTypeDefinition = (
           drawLinesBetweenPoints: true,
           lineWidth: 2,
           showCircles: true,
+          dotsRadius: 3,
         },
       ],
       addTooltip: true,
diff --git a/src/plugins/vis_type_xy/public/vis_types/line.ts b/src/plugins/vis_type_xy/public/vis_types/line.ts
index 6316fe4458229..d8434b8f85b3b 100644
--- a/src/plugins/vis_type_xy/public/vis_types/line.ts
+++ b/src/plugins/vis_type_xy/public/vis_types/line.ts
@@ -100,6 +100,7 @@ export const getLineVisTypeDefinition = (
           lineWidth: 2,
           interpolate: InterpolationMode.Linear,
           showCircles: true,
+          dotsRadius: 3,
         },
       ],
       addTooltip: true,

From 0965a6e1cdf17eb73623b9999f2da06d55b28ff8 Mon Sep 17 00:00:00 2001
From: Stratoula Kalafateli <efstratia.kalafateli@elastic.co>
Date: Mon, 24 May 2021 14:17:36 +0300
Subject: [PATCH 2/6] [Lens] Adds fill opacity slider

---
 .../options/metrics_axes/point_options.tsx    |  2 +-
 .../__snapshots__/to_expression.test.ts.snap  |  3 ++
 .../public/xy_visualization/expression.tsx    |  7 +++
 .../public/xy_visualization/to_expression.ts  |  1 +
 .../lens/public/xy_visualization/types.ts     |  2 +
 .../fill_opacity_option.test.tsx              | 35 ++++++++++++
 .../fill_opacity_option.tsx                   | 53 +++++++++++++++++++
 .../visual_options_popover.test.tsx           | 51 ++++++++++++++++++
 .../visual_options_popover.tsx                | 16 ++++++
 .../public/xy_visualization/xy_suggestions.ts |  1 +
 10 files changed, 170 insertions(+), 1 deletion(-)
 create mode 100644 x-pack/plugins/lens/public/xy_visualization/visual_options_popover/fill_opacity_option.test.tsx
 create mode 100644 x-pack/plugins/lens/public/xy_visualization/visual_options_popover/fill_opacity_option.tsx

diff --git a/src/plugins/vis_type_xy/public/editor/components/options/metrics_axes/point_options.tsx b/src/plugins/vis_type_xy/public/editor/components/options/metrics_axes/point_options.tsx
index 5151fe0e88c0b..d42e84ec5ae58 100644
--- a/src/plugins/vis_type_xy/public/editor/components/options/metrics_axes/point_options.tsx
+++ b/src/plugins/vis_type_xy/public/editor/components/options/metrics_axes/point_options.tsx
@@ -35,7 +35,7 @@ function PointOptions({ chart, setChart }: PointOptionsParams) {
       />
       <EuiSpacer size="m" />
       <EuiFormRow
-        label={i18n.translate('isTypeXy.controls.pointSeries.series.dotsRadius', {
+        label={i18n.translate('visTypeXy.controls.pointSeries.series.dotsRadius', {
           defaultMessage: 'Dots size',
         })}
         fullWidth
diff --git a/x-pack/plugins/lens/public/xy_visualization/__snapshots__/to_expression.test.ts.snap b/x-pack/plugins/lens/public/xy_visualization/__snapshots__/to_expression.test.ts.snap
index 339fb5a7ab68f..08b3393fafe48 100644
--- a/x-pack/plugins/lens/public/xy_visualization/__snapshots__/to_expression.test.ts.snap
+++ b/x-pack/plugins/lens/public/xy_visualization/__snapshots__/to_expression.test.ts.snap
@@ -33,6 +33,9 @@ Object {
         "description": Array [
           "",
         ],
+        "fillOpacity": Array [
+          0.3,
+        ],
         "fittingFunction": Array [
           "Carry",
         ],
diff --git a/x-pack/plugins/lens/public/xy_visualization/expression.tsx b/x-pack/plugins/lens/public/xy_visualization/expression.tsx
index 006727b05b905..e3b4565913ad8 100644
--- a/x-pack/plugins/lens/public/xy_visualization/expression.tsx
+++ b/x-pack/plugins/lens/public/xy_visualization/expression.tsx
@@ -196,6 +196,12 @@ export const xyChart: ExpressionFunctionDefinition<
         defaultMessage: 'Define how curve type is rendered for a line chart',
       }),
     },
+    fillOpacity: {
+      types: ['number'],
+      help: i18n.translate('xpack.lens.xyChart.fillOpacity.help', {
+        defaultMessage: 'Define the area chart fill opacity',
+      }),
+    },
     hideEndzones: {
       types: ['boolean'],
       default: false,
@@ -812,6 +818,7 @@ export function XYChart({
                 visible: !xAccessor,
                 radius: 5,
               },
+              ...(args.fillOpacity && { area: { opacity: args.fillOpacity } }),
             },
             lineSeriesStyle: {
               point: {
diff --git a/x-pack/plugins/lens/public/xy_visualization/to_expression.ts b/x-pack/plugins/lens/public/xy_visualization/to_expression.ts
index dea6b1a7be0c5..269f10159892f 100644
--- a/x-pack/plugins/lens/public/xy_visualization/to_expression.ts
+++ b/x-pack/plugins/lens/public/xy_visualization/to_expression.ts
@@ -149,6 +149,7 @@ export const buildExpression = (
           ],
           fittingFunction: [state.fittingFunction || 'None'],
           curveType: [state.curveType || 'LINEAR'],
+          fillOpacity: [state.fillOpacity || 0.3],
           yLeftExtent: [
             {
               type: 'expression',
diff --git a/x-pack/plugins/lens/public/xy_visualization/types.ts b/x-pack/plugins/lens/public/xy_visualization/types.ts
index ea28b492477c1..531b034b53242 100644
--- a/x-pack/plugins/lens/public/xy_visualization/types.ts
+++ b/x-pack/plugins/lens/public/xy_visualization/types.ts
@@ -464,6 +464,7 @@ export interface XYArgs {
   tickLabelsVisibilitySettings?: AxesSettingsConfig & { type: 'lens_xy_tickLabelsConfig' };
   gridlinesVisibilitySettings?: AxesSettingsConfig & { type: 'lens_xy_gridlinesConfig' };
   curveType?: XYCurveType;
+  fillOpacity?: number;
   hideEndzones?: boolean;
 }
 
@@ -485,6 +486,7 @@ export interface XYState {
   tickLabelsVisibilitySettings?: AxesSettingsConfig;
   gridlinesVisibilitySettings?: AxesSettingsConfig;
   curveType?: XYCurveType;
+  fillOpacity?: number;
   hideEndzones?: boolean;
 }
 
diff --git a/x-pack/plugins/lens/public/xy_visualization/visual_options_popover/fill_opacity_option.test.tsx b/x-pack/plugins/lens/public/xy_visualization/visual_options_popover/fill_opacity_option.test.tsx
new file mode 100644
index 0000000000000..3ba29e4f72c83
--- /dev/null
+++ b/x-pack/plugins/lens/public/xy_visualization/visual_options_popover/fill_opacity_option.test.tsx
@@ -0,0 +1,35 @@
+/*
+ * 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; you may not use this file except in compliance with the Elastic License
+ * 2.0.
+ */
+
+import React from 'react';
+import { mountWithIntl as mount, shallowWithIntl as shallow } from '@kbn/test/jest';
+import { EuiRange } from '@elastic/eui';
+import { FillOpacityOption } from './fill_opacity_option';
+
+describe('Line curve option', () => {
+  it('should show currently selected opacity value', () => {
+    const component = shallow(<FillOpacityOption onChange={jest.fn()} value={0.3} />);
+
+    expect(component.find(EuiRange).prop('value')).toEqual(0.3);
+  });
+
+  it('should show fill opacity option when enabled', () => {
+    const component = mount(
+      <FillOpacityOption onChange={jest.fn()} value={0.3} isFillOpacityEnabled={true} />
+    );
+
+    expect(component.exists('[data-test-subj="lnsFillOpacity"]')).toEqual(true);
+  });
+
+  it('should hide curve option when disabled', () => {
+    const component = mount(
+      <FillOpacityOption onChange={jest.fn()} value={1} isFillOpacityEnabled={false} />
+    );
+
+    expect(component.exists('[data-test-subj="lnsFillOpacity"]')).toEqual(false);
+  });
+});
diff --git a/x-pack/plugins/lens/public/xy_visualization/visual_options_popover/fill_opacity_option.tsx b/x-pack/plugins/lens/public/xy_visualization/visual_options_popover/fill_opacity_option.tsx
new file mode 100644
index 0000000000000..eb418e7862781
--- /dev/null
+++ b/x-pack/plugins/lens/public/xy_visualization/visual_options_popover/fill_opacity_option.tsx
@@ -0,0 +1,53 @@
+/*
+ * 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; you may not use this file except in compliance with the Elastic License
+ * 2.0.
+ */
+
+import React from 'react';
+import { i18n } from '@kbn/i18n';
+import { EuiFormRow, EuiSpacer, EuiRange } from '@elastic/eui';
+
+export interface FillOpacityOptionProps {
+  /**
+   * Currently selected value
+   */
+  value: number;
+  /**
+   * Callback on display option change
+   */
+  onChange: (value: number) => void;
+  isFillOpacityEnabled?: boolean;
+}
+
+export const FillOpacityOption: React.FC<FillOpacityOptionProps> = ({
+  onChange,
+  value,
+  isFillOpacityEnabled = true,
+}) => {
+  return isFillOpacityEnabled ? (
+    <>
+      <EuiFormRow
+        display="columnCompressedSwitch"
+        label={i18n.translate('xpack.lens.xyChart.fillOpacityLabel', {
+          defaultMessage: 'Fill opacity',
+        })}
+      >
+        <EuiRange
+          data-test-subj="lnsFillOpacity"
+          value={value}
+          min={0.1}
+          max={1}
+          step={0.1}
+          showInput
+          compressed
+          onChange={(e) => {
+            onChange(Number(e.currentTarget.value));
+          }}
+        />
+      </EuiFormRow>
+      <EuiSpacer />
+    </>
+  ) : null;
+};
diff --git a/x-pack/plugins/lens/public/xy_visualization/visual_options_popover/visual_options_popover.test.tsx b/x-pack/plugins/lens/public/xy_visualization/visual_options_popover/visual_options_popover.test.tsx
index e7ec395312bff..b46ad1940491e 100644
--- a/x-pack/plugins/lens/public/xy_visualization/visual_options_popover/visual_options_popover.test.tsx
+++ b/x-pack/plugins/lens/public/xy_visualization/visual_options_popover/visual_options_popover.test.tsx
@@ -14,6 +14,7 @@ import { State } from '../types';
 import { VisualOptionsPopover } from './visual_options_popover';
 import { ToolbarPopover } from '../../shared_components';
 import { MissingValuesOptions } from './missing_values_option';
+import { FillOpacityOption } from './fill_opacity_option';
 
 describe('Visual options popover', () => {
   let frame: FramePublicAPI;
@@ -74,6 +75,22 @@ describe('Visual options popover', () => {
     expect(component.find(MissingValuesOptions).prop('isFittingEnabled')).toEqual(false);
   });
 
+  it('should not disable the fill opacity for percentage area charts', () => {
+    const state = testState();
+    const component = shallow(
+      <VisualOptionsPopover
+        datasourceLayers={frame.datasourceLayers}
+        setState={jest.fn()}
+        state={{
+          ...state,
+          layers: [{ ...state.layers[0], seriesType: 'area_percentage_stacked' }],
+        }}
+      />
+    );
+
+    expect(component.find(FillOpacityOption).prop('isFillOpacityEnabled')).toEqual(true);
+  });
+
   it('should not disable the visual options for percentage area charts', () => {
     const state = testState();
     const component = shallow(
@@ -128,6 +145,40 @@ describe('Visual options popover', () => {
     expect(component.find(MissingValuesOptions).prop('isFittingEnabled')).toEqual(false);
   });
 
+  it('should hide the fill opacity option for bar series', () => {
+    const state = testState();
+    const component = shallow(
+      <VisualOptionsPopover
+        datasourceLayers={frame.datasourceLayers}
+        setState={jest.fn()}
+        state={{
+          ...state,
+          layers: [{ ...state.layers[0], seriesType: 'bar_horizontal' }],
+          fittingFunction: 'Carry',
+        }}
+      />
+    );
+
+    expect(component.find(FillOpacityOption).prop('isFillOpacityEnabled')).toEqual(false);
+  });
+
+  it('should hide the fill opacity option for line series', () => {
+    const state = testState();
+    const component = shallow(
+      <VisualOptionsPopover
+        datasourceLayers={frame.datasourceLayers}
+        setState={jest.fn()}
+        state={{
+          ...state,
+          layers: [{ ...state.layers[0], seriesType: 'line' }],
+          fittingFunction: 'Carry',
+        }}
+      />
+    );
+
+    expect(component.find(FillOpacityOption).prop('isFillOpacityEnabled')).toEqual(false);
+  });
+
   it('should show the popover and display field enabled for bar and horizontal_bar series', () => {
     const state = testState();
 
diff --git a/x-pack/plugins/lens/public/xy_visualization/visual_options_popover/visual_options_popover.tsx b/x-pack/plugins/lens/public/xy_visualization/visual_options_popover/visual_options_popover.tsx
index b8b89f146bdc0..b07feb85892e5 100644
--- a/x-pack/plugins/lens/public/xy_visualization/visual_options_popover/visual_options_popover.tsx
+++ b/x-pack/plugins/lens/public/xy_visualization/visual_options_popover/visual_options_popover.tsx
@@ -10,6 +10,7 @@ import { i18n } from '@kbn/i18n';
 import { ToolbarPopover } from '../../shared_components';
 import { MissingValuesOptions } from './missing_values_option';
 import { LineCurveOption } from './line_curve_option';
+import { FillOpacityOption } from './fill_opacity_option';
 import { XYState } from '../types';
 import { hasHistogramSeries } from '../state_helpers';
 import { ValidLayer } from '../types';
@@ -61,6 +62,10 @@ export const VisualOptionsPopover: React.FC<VisualOptionsPopoverProps> = ({
     ['bar', 'bar_horizontal'].includes(seriesType)
   );
 
+  const hasAreaSeries = state?.layers.some(({ seriesType }) =>
+    ['area_stacked', 'area', 'area_percentage_stacked'].includes(seriesType)
+  );
+
   const isHistogramSeries = Boolean(
     hasHistogramSeries(state?.layers as ValidLayer[], datasourceLayers)
   );
@@ -110,6 +115,17 @@ export const VisualOptionsPopover: React.FC<VisualOptionsPopoverProps> = ({
             setState({ ...state, fittingFunction: newVal });
           }}
         />
+
+        <FillOpacityOption
+          isFillOpacityEnabled={hasAreaSeries}
+          value={state?.fillOpacity ?? 0.3}
+          onChange={(newValue) => {
+            setState({
+              ...state,
+              fillOpacity: newValue,
+            });
+          }}
+        />
       </ToolbarPopover>
     </TooltipWrapper>
   );
diff --git a/x-pack/plugins/lens/public/xy_visualization/xy_suggestions.ts b/x-pack/plugins/lens/public/xy_visualization/xy_suggestions.ts
index 4554c34b97c55..aff33778258fe 100644
--- a/x-pack/plugins/lens/public/xy_visualization/xy_suggestions.ts
+++ b/x-pack/plugins/lens/public/xy_visualization/xy_suggestions.ts
@@ -524,6 +524,7 @@ function buildSuggestion({
     valueLabels: currentState?.valueLabels || 'hide',
     fittingFunction: currentState?.fittingFunction || 'None',
     curveType: currentState?.curveType,
+    fillOpacity: currentState?.fillOpacity,
     xTitle: currentState?.xTitle,
     yTitle: currentState?.yTitle,
     yRightTitle: currentState?.yRightTitle,

From 8ae806cc3aec0ee962df69d53b7fbf5032604a00 Mon Sep 17 00:00:00 2001
From: Stratoula Kalafateli <efstratia.kalafateli@elastic.co>
Date: Mon, 24 May 2021 14:48:26 +0300
Subject: [PATCH 3/6] Make the new sliders to appear fullwidth

---
 .../components/options/metrics_axes/point_options.tsx  |  1 +
 .../options/point_series/elastic_charts_options.tsx    |  3 ++-
 .../visual_options_popover/fill_opacity_option.tsx     |  7 ++++---
 .../visual_options_popover/missing_values_option.tsx   | 10 +++++++++-
 4 files changed, 16 insertions(+), 5 deletions(-)

diff --git a/src/plugins/vis_type_xy/public/editor/components/options/metrics_axes/point_options.tsx b/src/plugins/vis_type_xy/public/editor/components/options/metrics_axes/point_options.tsx
index d42e84ec5ae58..8068debf9e86a 100644
--- a/src/plugins/vis_type_xy/public/editor/components/options/metrics_axes/point_options.tsx
+++ b/src/plugins/vis_type_xy/public/editor/components/options/metrics_axes/point_options.tsx
@@ -47,6 +47,7 @@ function PointOptions({ chart, setChart }: PointOptionsParams) {
           min={1}
           max={10}
           step={1}
+          fullWidth
           disabled={!chart.showCircles}
           showInput
           compressed
diff --git a/src/plugins/vis_type_xy/public/editor/components/options/point_series/elastic_charts_options.tsx b/src/plugins/vis_type_xy/public/editor/components/options/point_series/elastic_charts_options.tsx
index 280b0bc6cfd2b..271c5445a9580 100644
--- a/src/plugins/vis_type_xy/public/editor/components/options/point_series/elastic_charts_options.tsx
+++ b/src/plugins/vis_type_xy/public/editor/components/options/point_series/elastic_charts_options.tsx
@@ -104,7 +104,7 @@ export function ElasticChartsOptions(props: ValidationVisOptionsProps<VisParams>
       {isAreaChart && (
         <EuiFormRow
           label={i18n.translate('visTypeXy.editors.elasticChartsOptions.fillOpacity', {
-            defaultMessage: 'Color opacity',
+            defaultMessage: 'Fill opacity',
           })}
           fullWidth
           display="rowCompressed"
@@ -116,6 +116,7 @@ export function ElasticChartsOptions(props: ValidationVisOptionsProps<VisParams>
             max={1}
             step={0.1}
             showInput
+            fullWidth
             compressed
             onChange={(e) => {
               setValue('fillOpacity', Number(e.currentTarget.value));
diff --git a/x-pack/plugins/lens/public/xy_visualization/visual_options_popover/fill_opacity_option.tsx b/x-pack/plugins/lens/public/xy_visualization/visual_options_popover/fill_opacity_option.tsx
index eb418e7862781..2f32c57945038 100644
--- a/x-pack/plugins/lens/public/xy_visualization/visual_options_popover/fill_opacity_option.tsx
+++ b/x-pack/plugins/lens/public/xy_visualization/visual_options_popover/fill_opacity_option.tsx
@@ -7,7 +7,7 @@
 
 import React from 'react';
 import { i18n } from '@kbn/i18n';
-import { EuiFormRow, EuiSpacer, EuiRange } from '@elastic/eui';
+import { EuiFormRow, EuiRange } from '@elastic/eui';
 
 export interface FillOpacityOptionProps {
   /**
@@ -29,10 +29,11 @@ export const FillOpacityOption: React.FC<FillOpacityOptionProps> = ({
   return isFillOpacityEnabled ? (
     <>
       <EuiFormRow
-        display="columnCompressedSwitch"
+        display="columnCompressed"
         label={i18n.translate('xpack.lens.xyChart.fillOpacityLabel', {
           defaultMessage: 'Fill opacity',
         })}
+        fullWidth
       >
         <EuiRange
           data-test-subj="lnsFillOpacity"
@@ -42,12 +43,12 @@ export const FillOpacityOption: React.FC<FillOpacityOptionProps> = ({
           step={0.1}
           showInput
           compressed
+          fullWidth
           onChange={(e) => {
             onChange(Number(e.currentTarget.value));
           }}
         />
       </EuiFormRow>
-      <EuiSpacer />
     </>
   ) : null;
 };
diff --git a/x-pack/plugins/lens/public/xy_visualization/visual_options_popover/missing_values_option.tsx b/x-pack/plugins/lens/public/xy_visualization/visual_options_popover/missing_values_option.tsx
index fb6ecec4d2801..a683d4fbf514c 100644
--- a/x-pack/plugins/lens/public/xy_visualization/visual_options_popover/missing_values_option.tsx
+++ b/x-pack/plugins/lens/public/xy_visualization/visual_options_popover/missing_values_option.tsx
@@ -7,7 +7,14 @@
 
 import React from 'react';
 import { i18n } from '@kbn/i18n';
-import { EuiButtonGroup, EuiFormRow, EuiIconTip, EuiSuperSelect, EuiText } from '@elastic/eui';
+import {
+  EuiButtonGroup,
+  EuiFormRow,
+  EuiIconTip,
+  EuiSuperSelect,
+  EuiText,
+  EuiSpacer,
+} from '@elastic/eui';
 import { FittingFunction, fittingFunctionDefinitions } from '../fitting_functions';
 import { ValueLabelConfig } from '../types';
 
@@ -133,6 +140,7 @@ export const MissingValuesOptions: React.FC<MissingValuesOptionProps> = ({
           />
         </EuiFormRow>
       )}
+      <EuiSpacer />
     </>
   );
 };

From 5f5ab58a19689ec45c3726fbf2c0297e4b4a1619 Mon Sep 17 00:00:00 2001
From: Stratoula Kalafateli <efstratia.kalafateli@elastic.co>
Date: Mon, 24 May 2021 16:04:57 +0300
Subject: [PATCH 4/6] Change property name and fix unit tests

---
 .../public/__snapshots__/to_ast.test.ts.snap         |  2 +-
 .../metrics_axes/__snapshots__/index.test.tsx.snap   |  2 ++
 .../__snapshots__/point_options.test.tsx.snap        |  4 ++--
 .../editor/components/options/metrics_axes/mocks.ts  |  2 +-
 .../options/metrics_axes/point_options.test.tsx      |  2 +-
 .../options/metrics_axes/point_options.tsx           |  8 ++++----
 .../editor/components/options/metrics_axes/utils.ts  |  2 +-
 .../options/point_series/point_series.mocks.ts       |  4 ++--
 .../public/expression_functions/series_param.ts      | 12 ++++++------
 .../vis_type_xy/public/sample_vis.test.mocks.ts      |  4 ++--
 src/plugins/vis_type_xy/public/to_ast.ts             |  2 +-
 src/plugins/vis_type_xy/public/types/param.ts        |  2 +-
 .../public/utils/render_all_series.test.tsx          |  2 +-
 .../vis_type_xy/public/utils/render_all_series.tsx   |  4 ++--
 src/plugins/vis_type_xy/public/vis_types/area.ts     |  2 +-
 .../vis_type_xy/public/vis_types/histogram.ts        |  2 +-
 .../vis_type_xy/public/vis_types/horizontal_bar.ts   |  2 +-
 src/plugins/vis_type_xy/public/vis_types/line.ts     |  2 +-
 18 files changed, 31 insertions(+), 29 deletions(-)

diff --git a/src/plugins/vis_type_vislib/public/__snapshots__/to_ast.test.ts.snap b/src/plugins/vis_type_vislib/public/__snapshots__/to_ast.test.ts.snap
index 3ca2834a54fca..8b720568c4d2c 100644
--- a/src/plugins/vis_type_vislib/public/__snapshots__/to_ast.test.ts.snap
+++ b/src/plugins/vis_type_vislib/public/__snapshots__/to_ast.test.ts.snap
@@ -8,7 +8,7 @@ Object {
       "area",
     ],
     "visConfig": Array [
-      "{\\"type\\":\\"area\\",\\"grid\\":{\\"categoryLines\\":false,\\"style\\":{\\"color\\":\\"#eee\\"}},\\"categoryAxes\\":[{\\"id\\":\\"CategoryAxis-1\\",\\"type\\":\\"category\\",\\"position\\":\\"bottom\\",\\"show\\":true,\\"style\\":{},\\"scale\\":{\\"type\\":\\"linear\\"},\\"labels\\":{\\"show\\":true,\\"truncate\\":100},\\"title\\":{}}],\\"valueAxes\\":[{\\"id\\":\\"ValueAxis-1\\",\\"name\\":\\"LeftAxis-1\\",\\"type\\":\\"value\\",\\"position\\":\\"left\\",\\"show\\":true,\\"style\\":{},\\"scale\\":{\\"type\\":\\"linear\\",\\"mode\\":\\"normal\\"},\\"labels\\":{\\"show\\":true,\\"rotate\\":0,\\"filter\\":false,\\"truncate\\":100},\\"title\\":{\\"text\\":\\"Sum of total_quantity\\"}}],\\"seriesParams\\":[{\\"show\\":\\"true\\",\\"type\\":\\"area\\",\\"mode\\":\\"stacked\\",\\"data\\":{\\"label\\":\\"Sum of total_quantity\\",\\"id\\":\\"1\\"},\\"drawLinesBetweenPoints\\":true,\\"showCircles\\":true,\\"interpolate\\":\\"linear\\",\\"valueAxis\\":\\"ValueAxis-1\\"}],\\"addTooltip\\":true,\\"addLegend\\":true,\\"legendPosition\\":\\"top\\",\\"times\\":[],\\"addTimeMarker\\":false,\\"thresholdLine\\":{\\"show\\":false,\\"value\\":10,\\"width\\":1,\\"style\\":\\"full\\",\\"color\\":\\"#E7664C\\"},\\"palette\\":{\\"name\\":\\"default\\"},\\"labels\\":{},\\"dimensions\\":{\\"x\\":{\\"accessor\\":1,\\"format\\":{\\"id\\":\\"date\\",\\"params\\":{\\"pattern\\":\\"HH:mm:ss.SSS\\"}},\\"params\\":{}},\\"y\\":[{\\"accessor\\":0,\\"format\\":{\\"id\\":\\"number\\",\\"params\\":{\\"parsedUrl\\":{\\"origin\\":\\"http://localhost:5801\\",\\"pathname\\":\\"/app/visualize\\",\\"basePath\\":\\"\\"}}},\\"params\\":{}}],\\"series\\":[{\\"accessor\\":2,\\"format\\":{\\"id\\":\\"terms\\",\\"params\\":{\\"id\\":\\"string\\",\\"otherBucketLabel\\":\\"Other\\",\\"missingBucketLabel\\":\\"Missing\\",\\"parsedUrl\\":{\\"origin\\":\\"http://localhost:5801\\",\\"pathname\\":\\"/app/visualize\\",\\"basePath\\":\\"\\"}}},\\"params\\":{}}]}}",
+      "{\\"type\\":\\"area\\",\\"grid\\":{\\"categoryLines\\":false,\\"style\\":{\\"color\\":\\"#eee\\"}},\\"categoryAxes\\":[{\\"id\\":\\"CategoryAxis-1\\",\\"type\\":\\"category\\",\\"position\\":\\"bottom\\",\\"show\\":true,\\"style\\":{},\\"scale\\":{\\"type\\":\\"linear\\"},\\"labels\\":{\\"show\\":true,\\"truncate\\":100},\\"title\\":{}}],\\"valueAxes\\":[{\\"id\\":\\"ValueAxis-1\\",\\"name\\":\\"LeftAxis-1\\",\\"type\\":\\"value\\",\\"position\\":\\"left\\",\\"show\\":true,\\"style\\":{},\\"scale\\":{\\"type\\":\\"linear\\",\\"mode\\":\\"normal\\"},\\"labels\\":{\\"show\\":true,\\"rotate\\":0,\\"filter\\":false,\\"truncate\\":100},\\"title\\":{\\"text\\":\\"Sum of total_quantity\\"}}],\\"seriesParams\\":[{\\"show\\":\\"true\\",\\"type\\":\\"area\\",\\"mode\\":\\"stacked\\",\\"data\\":{\\"label\\":\\"Sum of total_quantity\\",\\"id\\":\\"1\\"},\\"drawLinesBetweenPoints\\":true,\\"showCircles\\":true,\\"circlesRadius\\":5,\\"interpolate\\":\\"linear\\",\\"valueAxis\\":\\"ValueAxis-1\\"}],\\"addTooltip\\":true,\\"addLegend\\":true,\\"legendPosition\\":\\"top\\",\\"times\\":[],\\"addTimeMarker\\":false,\\"thresholdLine\\":{\\"show\\":false,\\"value\\":10,\\"width\\":1,\\"style\\":\\"full\\",\\"color\\":\\"#E7664C\\"},\\"palette\\":{\\"name\\":\\"default\\"},\\"labels\\":{},\\"dimensions\\":{\\"x\\":{\\"accessor\\":1,\\"format\\":{\\"id\\":\\"date\\",\\"params\\":{\\"pattern\\":\\"HH:mm:ss.SSS\\"}},\\"params\\":{}},\\"y\\":[{\\"accessor\\":0,\\"format\\":{\\"id\\":\\"number\\",\\"params\\":{\\"parsedUrl\\":{\\"origin\\":\\"http://localhost:5801\\",\\"pathname\\":\\"/app/visualize\\",\\"basePath\\":\\"\\"}}},\\"params\\":{}}],\\"series\\":[{\\"accessor\\":2,\\"format\\":{\\"id\\":\\"terms\\",\\"params\\":{\\"id\\":\\"string\\",\\"otherBucketLabel\\":\\"Other\\",\\"missingBucketLabel\\":\\"Missing\\",\\"parsedUrl\\":{\\"origin\\":\\"http://localhost:5801\\",\\"pathname\\":\\"/app/visualize\\",\\"basePath\\":\\"\\"}}},\\"params\\":{}}]}}",
     ],
   },
   "getArgument": [Function],
diff --git a/src/plugins/vis_type_xy/public/editor/components/options/metrics_axes/__snapshots__/index.test.tsx.snap b/src/plugins/vis_type_xy/public/editor/components/options/metrics_axes/__snapshots__/index.test.tsx.snap
index 40e53d88f99cf..05e2532073eaf 100644
--- a/src/plugins/vis_type_xy/public/editor/components/options/metrics_axes/__snapshots__/index.test.tsx.snap
+++ b/src/plugins/vis_type_xy/public/editor/components/options/metrics_axes/__snapshots__/index.test.tsx.snap
@@ -7,6 +7,7 @@ exports[`MetricsAxisOptions component should init with the default set of props
     seriesParams={
       Array [
         Object {
+          "circlesRadius": 3,
           "data": Object {
             "id": "1",
             "label": "Count",
@@ -79,6 +80,7 @@ exports[`MetricsAxisOptions component should init with the default set of props
     seriesParams={
       Array [
         Object {
+          "circlesRadius": 3,
           "data": Object {
             "id": "1",
             "label": "Count",
diff --git a/src/plugins/vis_type_xy/public/editor/components/options/metrics_axes/__snapshots__/point_options.test.tsx.snap b/src/plugins/vis_type_xy/public/editor/components/options/metrics_axes/__snapshots__/point_options.test.tsx.snap
index 82bf3d1ec9f62..fcd6f8d00a138 100644
--- a/src/plugins/vis_type_xy/public/editor/components/options/metrics_axes/__snapshots__/point_options.test.tsx.snap
+++ b/src/plugins/vis_type_xy/public/editor/components/options/metrics_axes/__snapshots__/point_options.test.tsx.snap
@@ -25,9 +25,9 @@ exports[`PointOptions component should init with the default set of props 1`] =
   >
     <EuiRange
       compressed={true}
-      data-test-subj="dotsRadius"
+      data-test-subj="circlesRadius"
       disabled={false}
-      fullWidth={false}
+      fullWidth={true}
       isLoading={false}
       levels={Array []}
       max={10}
diff --git a/src/plugins/vis_type_xy/public/editor/components/options/metrics_axes/mocks.ts b/src/plugins/vis_type_xy/public/editor/components/options/metrics_axes/mocks.ts
index cd4a06c99dbd7..eed224cf2a514 100644
--- a/src/plugins/vis_type_xy/public/editor/components/options/metrics_axes/mocks.ts
+++ b/src/plugins/vis_type_xy/public/editor/components/options/metrics_axes/mocks.ts
@@ -75,7 +75,7 @@ const seriesParam: SeriesParam = {
   drawLinesBetweenPoints: true,
   lineWidth: 2,
   showCircles: true,
-  dotsRadius: 3,
+  circlesRadius: 3,
   interpolate: InterpolationMode.Linear,
   valueAxis: defaultValueAxisId,
 };
diff --git a/src/plugins/vis_type_xy/public/editor/components/options/metrics_axes/point_options.test.tsx b/src/plugins/vis_type_xy/public/editor/components/options/metrics_axes/point_options.test.tsx
index e7c50f80989f2..68ac1832d28a8 100644
--- a/src/plugins/vis_type_xy/public/editor/components/options/metrics_axes/point_options.test.tsx
+++ b/src/plugins/vis_type_xy/public/editor/components/options/metrics_axes/point_options.test.tsx
@@ -38,7 +38,7 @@ describe('PointOptions component', () => {
   it('should disable the dots size range if the show dots switch is off', () => {
     chart.showCircles = false;
     const comp = mount(<PointOptions {...defaultProps} />);
-    const range = findTestSubject(comp, 'dotsRadius');
+    const range = findTestSubject(comp, 'circlesRadius');
     expect(range.at(1).props().disabled).toBeTruthy();
   });
 });
diff --git a/src/plugins/vis_type_xy/public/editor/components/options/metrics_axes/point_options.tsx b/src/plugins/vis_type_xy/public/editor/components/options/metrics_axes/point_options.tsx
index 8068debf9e86a..d35a5a2374ca3 100644
--- a/src/plugins/vis_type_xy/public/editor/components/options/metrics_axes/point_options.tsx
+++ b/src/plugins/vis_type_xy/public/editor/components/options/metrics_axes/point_options.tsx
@@ -35,15 +35,15 @@ function PointOptions({ chart, setChart }: PointOptionsParams) {
       />
       <EuiSpacer size="m" />
       <EuiFormRow
-        label={i18n.translate('visTypeXy.controls.pointSeries.series.dotsRadius', {
+        label={i18n.translate('visTypeXy.controls.pointSeries.series.circlesRadius', {
           defaultMessage: 'Dots size',
         })}
         fullWidth
         display="rowCompressed"
       >
         <EuiRange
-          data-test-subj="dotsRadius"
-          value={chart.dotsRadius}
+          data-test-subj="circlesRadius"
+          value={chart.circlesRadius}
           min={1}
           max={10}
           step={1}
@@ -52,7 +52,7 @@ function PointOptions({ chart, setChart }: PointOptionsParams) {
           showInput
           compressed
           onChange={(e) => {
-            setChart('dotsRadius', Number(e.currentTarget.value));
+            setChart('circlesRadius', Number(e.currentTarget.value));
           }}
         />
       </EuiFormRow>
diff --git a/src/plugins/vis_type_xy/public/editor/components/options/metrics_axes/utils.ts b/src/plugins/vis_type_xy/public/editor/components/options/metrics_axes/utils.ts
index 5ae3fffae6775..a8d53e45bc988 100644
--- a/src/plugins/vis_type_xy/public/editor/components/options/metrics_axes/utils.ts
+++ b/src/plugins/vis_type_xy/public/editor/components/options/metrics_axes/utils.ts
@@ -26,7 +26,7 @@ export const makeSerie = (
     type: ChartType.Line,
     drawLinesBetweenPoints: true,
     showCircles: true,
-    dotsRadius: 3,
+    circlesRadius: 3,
     interpolate: InterpolationMode.Linear,
     lineWidth: 2,
     valueAxis: defaultValueAxis,
diff --git a/src/plugins/vis_type_xy/public/editor/components/options/point_series/point_series.mocks.ts b/src/plugins/vis_type_xy/public/editor/components/options/point_series/point_series.mocks.ts
index ef549d2e20320..f23d9e4ada336 100644
--- a/src/plugins/vis_type_xy/public/editor/components/options/point_series/point_series.mocks.ts
+++ b/src/plugins/vis_type_xy/public/editor/components/options/point_series/point_series.mocks.ts
@@ -410,7 +410,7 @@ export const getVis = (bucketType: string) => {
               drawLinesBetweenPoints: true,
               lineWidth: 2,
               showCircles: true,
-              dotsRadius: 3,
+              circlesRadius: 3,
               interpolate: 'linear',
               valueAxis: 'ValueAxis-1',
             },
@@ -839,7 +839,7 @@ export const getStateParams = (type: string, thresholdPanelOn: boolean) => {
         },
         drawLinesBetweenPoints: true,
         showCircles: true,
-        dotsRadius: 3,
+        circlesRadius: 3,
         interpolate: 'cardinal',
         valueAxis: 'ValueAxis-1',
       },
diff --git a/src/plugins/vis_type_xy/public/expression_functions/series_param.ts b/src/plugins/vis_type_xy/public/expression_functions/series_param.ts
index c0f838abaa01c..3fd62e33e257f 100644
--- a/src/plugins/vis_type_xy/public/expression_functions/series_param.ts
+++ b/src/plugins/vis_type_xy/public/expression_functions/series_param.ts
@@ -29,7 +29,7 @@ export type ExpressionValueSeriesParam = ExpressionValueBoxed<
     mode: SeriesParam['mode'];
     show: boolean;
     showCircles: boolean;
-    dotsRadius: number;
+    circlesRadius: number;
     seriesParamType: SeriesParam['type'];
     valueAxis: string;
   }
@@ -96,13 +96,13 @@ export const seriesParam = (): ExpressionFunctionDefinition<
     showCircles: {
       types: ['boolean'],
       help: i18n.translate('visTypeXy.function.seriesParam.showCircles.help', {
-        defaultMessage: 'Show dots',
+        defaultMessage: 'Show circles',
       }),
     },
-    dotsRadius: {
+    circlesRadius: {
       types: ['number'],
-      help: i18n.translate('visTypeXy.function.seriesParam.dotsRadius.help', {
-        defaultMessage: 'Defines the dots radius',
+      help: i18n.translate('visTypeXy.function.seriesParam.circlesRadius.help', {
+        defaultMessage: 'Defines the circles size (radius)',
       }),
     },
     type: {
@@ -128,7 +128,7 @@ export const seriesParam = (): ExpressionFunctionDefinition<
       mode: args.mode,
       show: args.show,
       showCircles: args.showCircles,
-      dotsRadius: args.dotsRadius,
+      circlesRadius: args.circlesRadius,
       seriesParamType: args.type,
       valueAxis: args.valueAxis,
     };
diff --git a/src/plugins/vis_type_xy/public/sample_vis.test.mocks.ts b/src/plugins/vis_type_xy/public/sample_vis.test.mocks.ts
index efdb6f28dbf68..39370d941b52a 100644
--- a/src/plugins/vis_type_xy/public/sample_vis.test.mocks.ts
+++ b/src/plugins/vis_type_xy/public/sample_vis.test.mocks.ts
@@ -1397,7 +1397,7 @@ export const sampleAreaVis = {
             drawLinesBetweenPoints: true,
             lineWidth: 2,
             showCircles: true,
-            dotsRadius: 3,
+            circlesRadius: 3,
             interpolate: 'linear',
             valueAxis: 'ValueAxis-1',
           },
@@ -1564,7 +1564,7 @@ export const sampleAreaVis = {
         },
         drawLinesBetweenPoints: true,
         showCircles: true,
-        dotsRadius: 5,
+        circlesRadius: 5,
         interpolate: 'linear',
         valueAxis: 'ValueAxis-1',
       },
diff --git a/src/plugins/vis_type_xy/public/to_ast.ts b/src/plugins/vis_type_xy/public/to_ast.ts
index 57a1d6eda6175..f473cd77c2d2b 100644
--- a/src/plugins/vis_type_xy/public/to_ast.ts
+++ b/src/plugins/vis_type_xy/public/to_ast.ts
@@ -98,7 +98,7 @@ const prepareSeriesParam = (data: SeriesParam) => {
     mode: data.mode,
     show: data.show,
     showCircles: data.showCircles,
-    dotsRadius: data.dotsRadius,
+    circlesRadius: data.circlesRadius,
     type: data.type,
     valueAxis: data.valueAxis,
   });
diff --git a/src/plugins/vis_type_xy/public/types/param.ts b/src/plugins/vis_type_xy/public/types/param.ts
index 2f4ef5b71747c..7a2ff7e240264 100644
--- a/src/plugins/vis_type_xy/public/types/param.ts
+++ b/src/plugins/vis_type_xy/public/types/param.ts
@@ -78,7 +78,7 @@ export interface SeriesParam {
   mode: ChartMode;
   show: boolean;
   showCircles: boolean;
-  dotsRadius: number;
+  circlesRadius: number;
   type: ChartType;
   valueAxis: string;
 }
diff --git a/src/plugins/vis_type_xy/public/utils/render_all_series.test.tsx b/src/plugins/vis_type_xy/public/utils/render_all_series.test.tsx
index 7d1a6efe4fb71..23dabef662d55 100644
--- a/src/plugins/vis_type_xy/public/utils/render_all_series.test.tsx
+++ b/src/plugins/vis_type_xy/public/utils/render_all_series.test.tsx
@@ -31,7 +31,7 @@ const defaultSeriesParams = [
     mode: 'stacked',
     show: true,
     showCircles: true,
-    dotsRadius: 3,
+    circlesRadius: 3,
     type: 'area',
     valueAxis: 'ValueAxis-1',
   },
diff --git a/src/plugins/vis_type_xy/public/utils/render_all_series.tsx b/src/plugins/vis_type_xy/public/utils/render_all_series.tsx
index 8487139ec534c..e915e6d4966c5 100644
--- a/src/plugins/vis_type_xy/public/utils/render_all_series.tsx
+++ b/src/plugins/vis_type_xy/public/utils/render_all_series.tsx
@@ -75,7 +75,7 @@ export const renderAllSeries = (
       data: { id: paramId },
       lineWidth: strokeWidth,
       showCircles,
-      dotsRadius,
+      circlesRadius,
       drawLinesBetweenPoints,
       mode,
       interpolate,
@@ -176,7 +176,7 @@ export const renderAllSeries = (
                 point: {
                   visible: showCircles,
                   fill: markSizeAccessor ? ColorVariant.Series : undefined,
-                  radius: dotsRadius,
+                  radius: circlesRadius,
                 },
               }}
             />
diff --git a/src/plugins/vis_type_xy/public/vis_types/area.ts b/src/plugins/vis_type_xy/public/vis_types/area.ts
index df1ca85c4a167..912b3d8d48e95 100644
--- a/src/plugins/vis_type_xy/public/vis_types/area.ts
+++ b/src/plugins/vis_type_xy/public/vis_types/area.ts
@@ -98,7 +98,7 @@ export const getAreaVisTypeDefinition = (
           drawLinesBetweenPoints: true,
           lineWidth: 2,
           showCircles: true,
-          dotsRadius: 3,
+          circlesRadius: 3,
           interpolate: InterpolationMode.Linear,
           valueAxis: 'ValueAxis-1',
         },
diff --git a/src/plugins/vis_type_xy/public/vis_types/histogram.ts b/src/plugins/vis_type_xy/public/vis_types/histogram.ts
index a04b352e2626d..9af4cfd7b43a3 100644
--- a/src/plugins/vis_type_xy/public/vis_types/histogram.ts
+++ b/src/plugins/vis_type_xy/public/vis_types/histogram.ts
@@ -102,7 +102,7 @@ export const getHistogramVisTypeDefinition = (
           drawLinesBetweenPoints: true,
           lineWidth: 2,
           showCircles: true,
-          dotsRadius: 3,
+          circlesRadius: 3,
         },
       ],
       radiusRatio: 0,
diff --git a/src/plugins/vis_type_xy/public/vis_types/horizontal_bar.ts b/src/plugins/vis_type_xy/public/vis_types/horizontal_bar.ts
index 7e9e3630929a4..874e69b246a4d 100644
--- a/src/plugins/vis_type_xy/public/vis_types/horizontal_bar.ts
+++ b/src/plugins/vis_type_xy/public/vis_types/horizontal_bar.ts
@@ -103,7 +103,7 @@ export const getHorizontalBarVisTypeDefinition = (
           drawLinesBetweenPoints: true,
           lineWidth: 2,
           showCircles: true,
-          dotsRadius: 3,
+          circlesRadius: 3,
         },
       ],
       addTooltip: true,
diff --git a/src/plugins/vis_type_xy/public/vis_types/line.ts b/src/plugins/vis_type_xy/public/vis_types/line.ts
index d8434b8f85b3b..2e8944f44daab 100644
--- a/src/plugins/vis_type_xy/public/vis_types/line.ts
+++ b/src/plugins/vis_type_xy/public/vis_types/line.ts
@@ -100,7 +100,7 @@ export const getLineVisTypeDefinition = (
           lineWidth: 2,
           interpolate: InterpolationMode.Linear,
           showCircles: true,
-          dotsRadius: 3,
+          circlesRadius: 3,
         },
       ],
       addTooltip: true,

From 1424ab668b683ea66bfb9cbd4935f257ff55bd59 Mon Sep 17 00:00:00 2001
From: Stratoula Kalafateli <efstratia.kalafateli@elastic.co>
Date: Tue, 25 May 2021 10:14:54 +0300
Subject: [PATCH 5/6] Add a comment

---
 .../visual_options_popover/fill_opacity_option.tsx             | 3 +++
 1 file changed, 3 insertions(+)

diff --git a/x-pack/plugins/lens/public/xy_visualization/visual_options_popover/fill_opacity_option.tsx b/x-pack/plugins/lens/public/xy_visualization/visual_options_popover/fill_opacity_option.tsx
index 2f32c57945038..a6f2e1d63ec1c 100644
--- a/x-pack/plugins/lens/public/xy_visualization/visual_options_popover/fill_opacity_option.tsx
+++ b/x-pack/plugins/lens/public/xy_visualization/visual_options_popover/fill_opacity_option.tsx
@@ -18,6 +18,9 @@ export interface FillOpacityOptionProps {
    * Callback on display option change
    */
   onChange: (value: number) => void;
+  /**
+   * Flag for rendering or not the component
+   */
   isFillOpacityEnabled?: boolean;
 }
 

From b24d8deb52581f3e2de8ec0a5e30555af28c2999 Mon Sep 17 00:00:00 2001
From: Stratoula Kalafateli <efstratia.kalafateli@elastic.co>
Date: Tue, 25 May 2021 17:06:44 +0300
Subject: [PATCH 6/6] useDebouncedValue hook

---
 .../visual_options_popover/fill_opacity_option.tsx          | 6 ++++--
 1 file changed, 4 insertions(+), 2 deletions(-)

diff --git a/x-pack/plugins/lens/public/xy_visualization/visual_options_popover/fill_opacity_option.tsx b/x-pack/plugins/lens/public/xy_visualization/visual_options_popover/fill_opacity_option.tsx
index a6f2e1d63ec1c..eb8d35c54a99b 100644
--- a/x-pack/plugins/lens/public/xy_visualization/visual_options_popover/fill_opacity_option.tsx
+++ b/x-pack/plugins/lens/public/xy_visualization/visual_options_popover/fill_opacity_option.tsx
@@ -8,6 +8,7 @@
 import React from 'react';
 import { i18n } from '@kbn/i18n';
 import { EuiFormRow, EuiRange } from '@elastic/eui';
+import { useDebouncedValue } from '../../shared_components';
 
 export interface FillOpacityOptionProps {
   /**
@@ -29,6 +30,7 @@ export const FillOpacityOption: React.FC<FillOpacityOptionProps> = ({
   value,
   isFillOpacityEnabled = true,
 }) => {
+  const { inputValue, handleInputChange } = useDebouncedValue({ value, onChange });
   return isFillOpacityEnabled ? (
     <>
       <EuiFormRow
@@ -40,7 +42,7 @@ export const FillOpacityOption: React.FC<FillOpacityOptionProps> = ({
       >
         <EuiRange
           data-test-subj="lnsFillOpacity"
-          value={value}
+          value={inputValue}
           min={0.1}
           max={1}
           step={0.1}
@@ -48,7 +50,7 @@ export const FillOpacityOption: React.FC<FillOpacityOptionProps> = ({
           compressed
           fullWidth
           onChange={(e) => {
-            onChange(Number(e.currentTarget.value));
+            handleInputChange(Number(e.currentTarget.value));
           }}
         />
       </EuiFormRow>