[Lens] Adds fill opacity slider

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

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: {

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',

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;
 }
 

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);
+  });
+});

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;
+};

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();
 

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>
   );

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,