From 84e0e94ac6db901818c3ec6536b494e2e723df3e Mon Sep 17 00:00:00 2001
From: Uladzislau Lasitsa <Uladzislau_Lasitsa@epam.com>
Date: Mon, 12 Apr 2021 16:16:47 +0300
Subject: [PATCH] Stacked line charts incorrectly shows one term as 100%
 (#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>
---
 .../__snapshots__/chart_options.test.tsx.snap |  1 +
 .../metrics_axes/chart_options.test.tsx       | 14 +++++++++++--
 .../options/metrics_axes/chart_options.tsx    | 20 +++++++++++++++++--
 3 files changed, 31 insertions(+), 4 deletions(-)

diff --git a/src/plugins/vis_type_xy/public/editor/components/options/metrics_axes/__snapshots__/chart_options.test.tsx.snap b/src/plugins/vis_type_xy/public/editor/components/options/metrics_axes/__snapshots__/chart_options.test.tsx.snap
index 56f35ae021173..59a7cf966df91 100644
--- a/src/plugins/vis_type_xy/public/editor/components/options/metrics_axes/__snapshots__/chart_options.test.tsx.snap
+++ b/src/plugins/vis_type_xy/public/editor/components/options/metrics_axes/__snapshots__/chart_options.test.tsx.snap
@@ -54,6 +54,7 @@ exports[`ChartOptions component should init with the default set of props 1`] =
     </EuiFlexItem>
     <EuiFlexItem>
       <SelectOption
+        disabled={false}
         id="seriesMode0"
         label="Mode"
         options={
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 caf14e57fef7e..def24d51f49f3 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
@@ -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();
+  });
 });
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 6f0b4fc5c9d22..23452a87aae60 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
@@ -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}
           />