[XY] [Lens] Adds opacity slider (#100453) (#100568)

* [XY] Add opacity slider and dots size slider

* [Lens] Adds fill opacity slider

* Make the new sliders to appear fullwidth

* Change property name and fix unit tests

* Add a comment

* useDebouncedValue hook

Co-authored-by: Kibana Machine <42973632+kibanamachine@users.noreply.github.com>

Co-authored-by: Kibana Machine <42973632+kibanamachine@users.noreply.github.com>

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,

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,13 +42,26 @@ 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} />);
 
     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} />);

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

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

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,
+  circlesRadius: 3,
   interpolate: InterpolationMode.Linear,
   valueAxis: defaultValueAxisId,
 };

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, 'circlesRadius');
+    expect(range.at(1).props().disabled).toBeTruthy();
+  });
+});

src/plugins/vis_type_xy/public/editor/components/options/metrics_axes/point_options.tsx

@@ -0,0 +1,63 @@
+/*
+ * 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('visTypeXy.controls.pointSeries.series.circlesRadius', {
+          defaultMessage: 'Dots size',
+        })}
+        fullWidth
+        display="rowCompressed"
+      >
+        <EuiRange
+          data-test-subj="circlesRadius"
+          value={chart.circlesRadius}
+          min={1}
+          max={10}
+          step={1}
+          fullWidth
+          disabled={!chart.showCircles}
+          showInput
+          compressed
+          onChange={(e) => {
+            setChart('circlesRadius', Number(e.currentTarget.value));
+          }}
+        />
+      </EuiFormRow>
+    </>
+  );
+}
+
+export { PointOptions };

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,
+    circlesRadius: 3,
     interpolate: InterpolationMode.Linear,
     lineWidth: 2,
     valueAxis: defaultValueAxis,

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,29 @@ export function ElasticChartsOptions(props: ValidationVisOptionsProps<VisParams>
           }}
         />
       )}
+      {isAreaChart && (
+        <EuiFormRow
+          label={i18n.translate('visTypeXy.editors.elasticChartsOptions.fillOpacity', {
+            defaultMessage: 'Fill opacity',
+          })}
+          fullWidth
+          display="rowCompressed"
+        >
+          <EuiRange
+            data-test-subj="fillColorOpacity"
+            value={stateParams.fillOpacity ?? 0.3}
+            min={0}
+            max={1}
+            step={0.1}
+            showInput
+            fullWidth
+            compressed
+            onChange={(e) => {
+              setValue('fillOpacity', Number(e.currentTarget.value));
+            }}
+          />
+        </EuiFormRow>
+      )}
     </>
   );
 }

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,
+              circlesRadius: 3,
               interpolate: 'linear',
               valueAxis: 'ValueAxis-1',
             },
@@ -838,6 +839,7 @@ export const getStateParams = (type: string, thresholdPanelOn: boolean) => {
         },
         drawLinesBetweenPoints: true,
         showCircles: true,
+        circlesRadius: 3,
         interpolate: 'cardinal',
         valueAxis: 'ValueAxis-1',
       },