Stacked line charts incorrectly shows one term as 100% (elastic#96203)

* set "stacked" mode metric if the referenced axis is "percentage"

* Fixed CI

* Move logic inside chart_option component

* Fixed CI

* Update utils.ts

* Update index.tsx

* Update index.tsx

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

src/plugins/vis_type_xy/public/editor/components/options/metrics_axes/chart_options.test.tsx

@@ -7,10 +7,10 @@
  */
 
 import React from 'react';
-import { shallow } from 'enzyme';
+import { shallow, mount } from 'enzyme';
 
 import { ChartOptions, ChartOptionsParams } from './chart_options';
-import { SeriesParam, ChartMode } from '../../../../types';
+import { SeriesParam, ChartMode, AxisMode } from '../../../../types';
 import { LineOptions } from './line_options';
 import { valueAxis, seriesParam } from './mocks';
 import { ChartType } from '../../../../../common';
@@ -71,4 +71,14 @@ describe('ChartOptions component', () => {
 
     expect(setParamByIndex).toBeCalledWith('seriesParams', 0, paramName, ChartMode.Normal);
   });
+
+  it('should set "stacked" mode and disabled control if the referenced axis is "percentage"', () => {
+    defaultProps.valueAxes[0].scale.mode = AxisMode.Percentage;
+    defaultProps.chart.mode = ChartMode.Normal;
+    const paramName = 'mode';
+    const comp = mount(<ChartOptions {...defaultProps} />);
+
+    expect(setParamByIndex).toBeCalledWith('seriesParams', 0, paramName, ChartMode.Stacked);
+    expect(comp.find({ paramName }).prop('disabled')).toBeTruthy();
+  });
 });

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

@@ -6,14 +6,14 @@
  * Side Public License, v 1.
  */
 
-import React, { useMemo, useCallback } from 'react';
+import React, { useMemo, useCallback, useEffect, useState } from 'react';
 
 import { i18n } from '@kbn/i18n';
 import { EuiFlexGroup, EuiFlexItem, EuiSpacer } from '@elastic/eui';
 
 import { SelectOption } from '../../../../../../vis_default_editor/public';
 
-import { SeriesParam, ValueAxis } from '../../../../types';
+import { SeriesParam, ValueAxis, ChartMode, AxisMode } from '../../../../types';
 import { LineOptions } from './line_options';
 import { SetParamByIndex, ChangeValueAxis } from '.';
 import { ChartType } from '../../../../../common';
@@ -38,6 +38,7 @@ function ChartOptions({
   changeValueAxis,
   setParamByIndex,
 }: ChartOptionsParams) {
+  const [disabledMode, setDisabledMode] = useState<boolean>(false);
   const setChart: SetChart = useCallback(
     (paramName, value) => {
       setParamByIndex('seriesParams', index, paramName, value);
@@ -68,6 +69,20 @@ function ChartOptions({
     [valueAxes]
   );
 
+  useEffect(() => {
+    const valueAxisToMetric = valueAxes.find((valueAxis) => valueAxis.id === chart.valueAxis);
+    if (valueAxisToMetric) {
+      if (valueAxisToMetric.scale.mode === AxisMode.Percentage) {
+        setDisabledMode(true);
+        if (chart.mode !== ChartMode.Stacked) {
+          setChart('mode', ChartMode.Stacked);
+        }
+      } else if (disabledMode) {
+        setDisabledMode(false);
+      }
+    }
+  }, [valueAxes, chart, disabledMode, setChart, setDisabledMode]);
+
   return (
     <>
       <SelectOption
@@ -104,6 +119,7 @@ function ChartOptions({
             })}
             options={collections.chartModes}
             paramName="mode"
+            disabled={disabledMode}
             value={chart.mode}
             setValue={setChart}
           />